/* ============================================================================
   RestoKernel — rk-ops.css : styles partagés des écrans de service
   Charte : docs/admin-operations-charte.md. S'applique à <body class="rk-ops">,
   après style.css et admin.css. Utilise les tokens de style.css.
   ============================================================================ */

body.rk-ops { font-size: 18px; line-height: 1.45; }

/* ---- En-tête partagé : cibles de 48 px, textes de 16 px minimum ---- */
body.rk-ops .admin-bar { min-height: 72px; }
body.rk-ops .admin-bar .portal-back,
body.rk-ops .admin-bar .btn,
body.rk-ops .admin-bar .lang-switch button {
  min-height: 48px; min-width: 48px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
body.rk-ops .admin-bar .portal-back { padding: 0 1rem; }
body.rk-ops .admin-bar .btn { padding: 0 1.1rem; }
body.rk-ops .admin-bar .lang-switch button { padding: 0 .6rem; }
body.rk-ops .admin-bar-brand span { font-size: 16px; }
body.rk-ops #header-clock { font-size: 16px; }
body.rk-ops #tenant-badge { font-size: 16px !important; }

/* ---- Boutons de service ---- */
body.rk-ops .btn,
body.rk-ops .ops-btn {
  min-height: 48px; min-width: 48px; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.ops-primary {
  width: 100%; min-height: 64px; font-size: 22px; font-weight: 700;
  border-radius: 14px; border: 0; cursor: pointer;
  background: var(--ink); color: #fff;
}
.ops-primary:active { transform: scale(.98); }
.ops-primary.is-pay { background: var(--accent-2); color: var(--ink); }
.ops-secondary {
  min-height: 48px; padding: 0 1rem; font-size: 16px; font-weight: 600;
  border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.ops-secondary.is-danger { color: #B42318; border-color: rgba(180,35,24,.4); }
.ops-secondary.is-armed { background: #B42318; border-color: #B42318; color: #fff; }

/* ---- Fraîcheur et perte de connexion ---- */
rk-ops-status, .rk-ops-status {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 48px;
  font-size: 16px; font-weight: 600; color: var(--muted);
}
rk-ops-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #16A34A; }
rk-ops-status.is-lost { color: #B42318; }
rk-ops-status.is-lost::before { background: #B42318; }
.rk-ops-lost {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 1rem 1.5rem; text-align: center;
  background: #B42318; color: #fff; font-size: 20px; font-weight: 700;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
}

/* ---- Bandeau « Annuler » : bas à gauche (le widget vocal est à droite) ---- */
.rk-ops-undo {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 450;
  display: flex; align-items: center; gap: 1rem; overflow: hidden;
  max-width: min(560px, calc(100vw - 7rem));
  padding: .6rem .6rem .6rem 1.25rem; border-radius: 16px;
  background: var(--ink); color: #fff; font-size: 18px; font-weight: 600;
  box-shadow: var(--shadow);
}
.rk-ops-undo-msg { flex: 1; }
.rk-ops-undo-btn {
  min-height: 48px; min-width: 48px; padding: 0 1.2rem; border-radius: 12px; border: 0;
  background: var(--accent-2); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer;
}
.rk-ops-undo-bar {
  position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: var(--accent-2); transform-origin: left center;
}
@keyframes rk-ops-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- Nouvelle carte : clignote 3 s ---- */
@keyframes rk-ops-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,0,0); }
  50% { box-shadow: 0 0 0 6px rgba(255,184,0,.85); }
}
.ops-new { animation: rk-ops-flash 1s ease-in-out 3; }

@media (prefers-reduced-motion: reduce) {
  .ops-new { animation: none; outline: 4px solid var(--accent-2); }
  .rk-ops-undo-bar { animation: none !important; }
}