/* ============================================================
   Encas Créole 83 — Tablette gestion
   Thème sombre optimisé cuisine · Grands boutons tactiles
   ============================================================ */

:root {
  --soleil: #FFD23F;
  --piment: #E63E2C;
  --canne:  #1FA85C;
  --lagon:  #1D9BB5;
  --encre:  #1E1A16;

  /* Thème sombre tablette */
  --bg:        #141210;
  --surface:   #1E1A16;
  --surface-2: #2A2420;
  --surface-3: #352E28;
  --texte:     #F5EDD5;
  --texte-2:   rgba(245,237,213,0.55);
  --bord:      rgba(245,237,213,0.1);
  --bord-fort: rgba(245,237,213,0.22);

  /* Couleurs colonnes */
  --col-1-acc: var(--soleil);
  --col-2-acc: var(--canne);
  --col-3-acc: var(--lagon);

  --f-display: 'Titan One', system-ui, sans-serif;
  --f-body:    'Baloo 2', system-ui, sans-serif;

  --header-h: 58px;
  --rayon: 12px;
  --rayon-sm: 8px;
  --tr: 0.15s ease;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; height: 100%; overscroll-behavior: none; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--texte);
  height: 100%;
  overflow: hidden; /* La tablette ne scroll pas — seules les colonnes scrollent */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }
svg    { display: block; flex-shrink: 0; }

/* ── VUE LOGIN ──────────────────────────────────────────────── */
.vue-login {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  padding: 36px 28px;
}

/* Logo */
.login-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}
.logo-encas  { font-family: var(--f-display); font-size: 1.8rem; color: var(--soleil); }
.logo-creole { font-family: var(--f-display); font-size: 1.8rem; color: var(--texte); }
.logo-83 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--piment);
  background: var(--soleil);
  padding: 0 5px;
  border-radius: 4px;
}

.login-sous-titre {
  text-align: center;
  color: var(--texte-2);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.champ { margin-bottom: 16px; }

.label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--texte-2);
  margin-bottom: 6px;
}

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-sm);
  color: var(--texte);
  font-size: 1rem;
  font-family: var(--f-body);
  transition: border-color var(--tr);
  -webkit-appearance: none;
}
input:focus { outline: none; border-color: var(--lagon); }

.login-erreur {
  color: var(--piment);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.btn-login {
  width: 100%;
  padding: 15px;
  background: var(--piment);
  color: #fff;
  border: none;
  border-radius: var(--rayon-sm);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  transition: background var(--tr), transform var(--tr);
  margin-top: 8px;
}
.btn-login:hover  { background: #cc3424; }
.btn-login:active { transform: scale(0.98); }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── VUE APP ────────────────────────────────────────────────── */
.vue-app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.tab-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--bord-fort);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 10;
}

.header-gauche {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.tab-logo {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--soleil);
  white-space: nowrap;
}

/* Statut connexion Realtime */
.statut-conn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--texte-2);
  white-space: nowrap;
}
.conn-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texte-2);
  flex-shrink: 0;
}
.statut-conn.connecte  .conn-point { background: var(--canne); box-shadow: 0 0 0 3px rgba(31,168,92,.25); }
.statut-conn.polling   .conn-point { background: var(--soleil); }
.statut-conn.erreur    .conn-point { background: var(--piment); }

.header-droite {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Boutons header */
.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--bord-fort);
  background: var(--surface-2);
  color: var(--texte);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--tr), border-color var(--tr);
}
.btn-header:hover { background: var(--surface-3); }
.btn-header:active { transform: scale(0.96); }

.btn-son[aria-pressed="true"] {
  border-color: var(--canne);
  color: var(--canne);
}

.btn-pause { color: var(--texte); }
.btn-pause[aria-pressed="true"] {
  background: rgba(230,62,44,.15);
  border-color: var(--piment);
  color: var(--piment);
}

.btn-logout { color: var(--texte-2); }

/* ── KANBAN ──────────────────────────────────────────────────── */
.kanban {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  min-height: 0; /* Important : permet au flex child de scroll */
}

.kanban-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bord);
  min-height: 0;
}
.kanban-col:last-child { border-right: none; }

/* En-têtes colonnes */
.col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 3px solid;
  flex-shrink: 0;
}
.col-nouvelles  .col-header { border-color: var(--col-1-acc); }
.col-preparation .col-header { border-color: var(--col-2-acc); }
.col-pretes     .col-header { border-color: var(--col-3-acc); }

.col-titre {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .02em;
}
.col-nouvelles  .col-titre { color: var(--col-1-acc); }
.col-preparation .col-titre { color: var(--col-2-acc); }
.col-pretes     .col-titre { color: var(--col-3-acc); }

.col-badge {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 14px;
  font-family: var(--f-display);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--texte-2);
  transition: background var(--tr), color var(--tr);
}
.col-badge.actif {
  background: var(--piment);
  color: #fff;
}

/* Liste scrollable */
.col-liste {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--bord-fort) transparent;
}
.col-liste:empty::after {
  content: 'Aucune commande';
  display: block;
  text-align: center;
  color: var(--texte-2);
  font-size: 0.85rem;
  padding-top: 32px;
}

/* ── CARD COMMANDE ───────────────────────────────────────────── */
.order-card {
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: card-entree 0.25s ease;
  role: listitem;
}

@keyframes card-entree {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bande colorée en haut selon la colonne */
.order-card[data-statut="en_attente"]   { border-top: 3px solid var(--col-1-acc); }
.order-card[data-statut="acceptee"],
.order-card[data-statut="en_preparation"] { border-top: 3px solid var(--col-2-acc); }
.order-card[data-statut="prete"]          { border-top: 3px solid var(--col-3-acc); }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 14px 0;
  gap: 8px;
}

.order-num {
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--texte);
  line-height: 1;
}

.order-meta {
  text-align: right;
  font-size: 0.75rem;
  color: var(--texte-2);
  line-height: 1.4;
}

.order-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 2px;
}
.order-type.retrait  { background: rgba(255,210,63,.15);  color: var(--soleil); }
.order-type.livraison { background: rgba(29,155,181,.15); color: var(--lagon); }

.card-client {
  padding: 10px 14px 0;
}
.client-nom {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.client-tel {
  font-size: 0.8rem;
  color: var(--texte-2);
  margin-top: 1px;
}

/* Articles */
.card-articles {
  padding: 10px 14px;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.article-ligne {
  font-size: 0.85rem;
  color: var(--texte);
  display: flex;
  gap: 6px;
}
.article-qte { color: var(--piment); font-weight: 700; flex-shrink: 0; }

/* Zone livraison */
.card-adresse {
  padding: 6px 14px 0;
  font-size: 0.78rem;
  color: var(--lagon);
  font-weight: 600;
}

/* Notes */
.card-notes {
  padding: 6px 14px 0;
  font-size: 0.78rem;
  color: var(--soleil);
  font-style: italic;
}

/* Pied : total + délai */
.card-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 8px;
}
.order-total {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--texte);
}
.order-timer {
  font-size: 0.78rem;
  color: var(--texte-2);
}
.order-timer.urgent { color: var(--piment); font-weight: 700; }

/* Boutons d'action */
.card-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}
.btn-action {
  flex: 1;
  padding: 13px 10px;
  border-radius: var(--rayon-sm);
  border: none;
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  transition: opacity var(--tr), transform var(--tr);
  min-height: 48px; /* Touch target minimum */
}
.btn-action:active { transform: scale(0.97); }

.btn-accepter { background: var(--canne); }
.btn-accepter:hover { opacity: 0.9; }

.btn-refuser  { background: var(--piment); }
.btn-refuser:hover { opacity: 0.9; }

.btn-prete    { background: var(--lagon); }
.btn-prete:hover { opacity: 0.9; }

.btn-remise   { background: var(--surface-3); color: var(--texte-2); border: 1px solid var(--bord-fort); }
.btn-remise:hover { background: var(--surface-3); opacity: 0.8; }

.btn-action:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ── MODAL ACCEPTATION ───────────────────────────────────────── */
.modal {
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  color: var(--texte);
  padding: 28px 24px;
  width: min(90vw, 380px);
}
.modal::backdrop { background: rgba(0,0,0,0.7); }

.modal-titre {
  font-family: var(--f-display);
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.modal-desc {
  color: var(--texte-2);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.modal-desc strong { color: var(--texte); }

.modal-temps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.btn-temps {
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-sm);
  color: var(--texte);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  transition: background var(--tr), border-color var(--tr);
  min-height: 56px;
}
.btn-temps:hover { background: var(--surface-3); border-color: var(--canne); color: var(--canne); }
.btn-temps:active { transform: scale(0.97); }

/* ── OVERLAY SON ─────────────────────────────────────────────── */
.overlay-son {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 24px;
}
.overlay-son.hidden { display: none; }

.son-carte {
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  padding: 36px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--texte);
}
.son-carte svg { color: var(--texte-2); }
.son-titre { font-family: var(--f-display); font-size: 1.2rem; }
.son-desc  { font-size: 0.88rem; color: var(--texte-2); line-height: 1.5; }

.btn-activer-son {
  padding: 15px 32px;
  background: var(--canne);
  color: #fff;
  border: none;
  border-radius: var(--rayon-sm);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 8px;
  min-height: 52px;
  width: 100%;
  transition: background var(--tr);
}
.btn-activer-son:hover  { background: #189950; }
.btn-activer-son:active { transform: scale(0.97); }

/* ── FOCUS ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--lagon);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ── PAUSE : overlay visuel sur le kanban ─────────────────────── */
.kanban.en-pause::before {
  content: 'COMMANDES SUSPENDUES';
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: rgba(230,62,44,.12);
  border-bottom: 2px solid var(--piment);
  color: var(--piment);
  font-family: var(--f-display);
  font-size: 0.85rem;
  text-align: center;
  padding: 6px;
  z-index: 5;
  letter-spacing: .05em;
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .order-card { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}