/* =====================================================================
   POS SaaS Maroc — app.css
   ---------------------------------------------------------------------
   Une seule feuille de style. Mobile d'abord.

   Parti pris : l'écran est tenu d'une main, souvent en plein soleil,
   parfois avec les doigts sales. D'où des cibles tactiles de 48 px
   minimum, un contraste élevé, et des montants en gros chiffres
   tabulaires — le commerçant doit lire son total d'un coup d'œil,
   à bout de bras.

   Aucune police externe : sur une connexion 3G faible, une police
   Google ajoute 200 ms de page blanche à chaque écran.
   ================================================================== */

:root {
    /* Couleurs — bleu Majorelle (le bleu du Jardin Majorelle, Marrakech)
       comme accent, sur un fond sable chaud. Signature de la marque :
       une étoile à 8 branches (motif zellige), jamais décorative seule,
       toujours au service d'un repère (logo, état vide, chargement). */
    --ink:        #1c1b2e;   /* texte principal, encre profonde */
    --ink-soft:   #5f5d78;   /* texte secondaire */
    --ink-faint:  #9694ab;   /* légendes */

    --brand:      #453BC4;   /* bleu Majorelle — couleur d'action */
    --brand-dark: #332a99;
    --brand-pale: #ECEAFA;
    --brand-2:    #E8B23D;   /* jaune safran — accent chaud secondaire, rare */

    --sand:       #f6f2ea;   /* fond de page, chaud, non éblouissant */
    --surface:    #ffffff;
    --border:     #e7e0d2;

    --bad:        #c0292c;
    --bad-pale:   #fbe9e8;
    --warn:       #b2650f;
    --warn-pale:  #fcf0dd;
    --good:       #187a4f;
    --good-pale:  #e6f5ec;

    /* Mesures */
    --tap:        48px;      /* hauteur minimale d'une cible tactile */
    --r:          14px;      /* rayon standard */
    --r-sm:       10px;
    --pad:        16px;
    --topbar:     58px;
    --tabbar:     64px;

    --shadow:     0 1px 2px rgba(28,27,46,.06), 0 8px 20px rgba(28,27,46,.06);
    --shadow-lift:0 10px 30px rgba(28,27,46,.14);

    /* Chiffres alignés verticalement dans les colonnes de prix */
    --num: ui-monospace, "SF Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;

    /* Rétro-compatibilité : anciennes classes encore référencées */
    --teal: var(--brand);
    --teal-dark: var(--brand-dark);
    --teal-pale: var(--brand-pale);
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours l'emporter.
   Sans cette règle, une classe qui définit `display` (comme .modal)
   écrase le comportement natif de `hidden` et l'élément reste visible. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
}

body.has-nav { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
h2.sub {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ink-faint);
    margin: 28px 0 10px;
}

/* Focus clavier visible — obligation d'accessibilité, pas décoration */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}


/* =====================================================================
   MISE EN PAGE
   ================================================================== */

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--pad) var(--pad) 32px;
}

body.full .page { padding-left: 0; padding-right: 0; }
body.full .pos  { padding: 0 var(--pad); }

.head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.head .count {
    font-size: 13px; font-weight: 600; color: var(--ink-faint);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 9px; vertical-align: middle;
}


/* =====================================================================
   BARRE HAUTE
   ================================================================== */

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 0 var(--pad);
    background: var(--surface); color: var(--ink);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar) + env(safe-area-inset-top));
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-menu-btn {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    color: var(--brand); background: var(--brand-pale);
    border-radius: var(--r-sm); border: none; cursor: pointer;
}
.topbar-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar .shop {
    font-weight: 700; font-size: 15px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .who { font-size: 12px; color: var(--ink-faint); }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar-btn {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    color: var(--brand); font-size: 20px;
    background: var(--brand-pale); border-radius: var(--r-sm);
}
.topbar-btn:hover { text-decoration: none; background: #ded9f7; }
.topbar-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 999px;
    background: var(--brand); color: #fff; font-weight: 700; font-size: 14px;
    display: grid; place-items: center; border: none; cursor: pointer;
}

/* =====================================================================
   MENU LATÉRAL (tiroir)
   ================================================================== */

.drawer-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(28,27,46,.4);
}
.drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 91;
    width: min(300px, 84vw);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
    animation: drawer-in .16s ease-out;
}
@keyframes drawer-in { from { transform: translateX(-12px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px var(--pad) 14px; border-bottom: 1px solid var(--border);
}
.drawer-mark {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    background: var(--brand); color: #fff;
    display: grid; place-items: center; flex: none;
}
.drawer-head .name { font-weight: 800; font-size: 16px; line-height: 1.15; }
.drawer-head .sub  { font-size: 12px; color: var(--ink-faint); }
.drawer-close { margin-left: auto; color: var(--ink-faint); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; }
.drawer-nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.drawer-link {
    display: flex; align-items: center; gap: 14px;
    padding: 13px var(--pad); color: var(--ink); font-weight: 600; font-size: 15px;
}
.drawer-link:hover { text-decoration: none; background: var(--sand); }
.drawer-link .ico { color: var(--ink-soft); }
.drawer-link.actif { color: var(--brand); background: var(--brand-pale); }
.drawer-link.actif .ico { color: var(--brand); }
.drawer-foot { border-top: 1px solid var(--border); padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom)); }
.drawer-lang {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; font-size: 14px; color: var(--ink-soft);
}
.drawer-user { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.drawer-user .topbar-avatar { width: 34px; height: 34px; font-size: 12.5px; }
.drawer-user .name { font-weight: 700; font-size: 14px; }
.drawer-user .tag-actif { font-size: 11.5px; color: var(--good); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.drawer-user .tag-actif::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--good); }
.drawer-logout { display: flex; align-items: center; gap: 10px; color: var(--bad); font-weight: 700; font-size: 14px; padding: 10px 0 0; }


/* =====================================================================
   BANDEAUX
   ================================================================== */

.banner {
    background: var(--teal-pale); color: var(--teal-dark);
    font-size: 13px; text-align: center; padding: 8px var(--pad);
    border-bottom: 1px solid rgba(15,118,110,.15);
}
.banner.warn { background: var(--warn-pale); color: var(--warn); border-color: rgba(180,83,9,.2); }
.banner a { color: inherit; font-weight: 700; text-decoration: underline; }

.flash {
    margin: 12px var(--pad) 0; padding: 12px 14px;
    border-radius: var(--r); font-size: 14px; font-weight: 600;
    background: var(--good-pale); color: var(--good);
    border: 1px solid rgba(21,128,61,.2);
}
.flash.error { background: var(--bad-pale); color: var(--bad); border-color: rgba(185,28,28,.2); }

.alert {
    padding: 12px 14px; border-radius: var(--r); font-size: 14px;
    margin: 0 0 14px; border: 1px solid transparent;
}
.alert.error   { background: var(--bad-pale);  color: var(--bad);  border-color: rgba(185,28,28,.2); }
.alert.success { background: var(--good-pale); color: var(--good); border-color: rgba(21,128,61,.2); }
.alert.warn    { background: var(--warn-pale); color: var(--warn); border-color: rgba(180,83,9,.2); }
.alert p { margin: 0 0 6px; }


/* =====================================================================
   BARRE D'ONGLETS BASSE
   ================================================================== */

.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.tab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: var(--tabbar);
    color: var(--ink-faint); font-size: 10.5px; font-weight: 600;
}
.tab:hover { text-decoration: none; }
.tab .ico { line-height: 1; display: flex; }
.tab.actif { color: var(--brand); }
.tab .lbl { white-space: nowrap; }
.tab.cta {
    position: relative; top: -14px; flex: 0 0 56px;
}
.tab.cta .ico {
    width: 52px; height: 52px; border-radius: 999px;
    background: var(--brand); color: #fff;
    box-shadow: 0 6px 16px rgba(69,59,196,.35);
    display: grid; place-items: center;
}
.tab.cta .lbl { color: var(--ink-faint); }
.tab.cta.actif .ico { background: var(--brand-dark); }


/* =====================================================================
   BOUTONS
   ================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: 0 18px;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface); color: var(--ink);
    font: inherit; font-weight: 600; font-size: 15px;
    cursor: pointer; text-decoration: none;
    transition: background .12s ease, transform .06s ease;
}
.btn:hover { text-decoration: none; background: #f2efe7; }
.btn:active { transform: scale(.985); }

.btn.primary {
    background: var(--teal); border-color: var(--teal); color: #fff;
    box-shadow: var(--shadow);
}
.btn.primary:hover { background: var(--teal-dark); }

.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: #9c1616; }

.btn.ghost { background: transparent; }

.btn.big { min-height: 56px; font-size: 17px; width: 100%; }
.btn.sm  { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
.btn.block { display: flex; width: 100%; margin: 14px 0; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.btn-row .btn { flex: 1; min-width: 140px; }

.card-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.card-actions form { margin: 0; }


/* =====================================================================
   FORMULAIRES
   ================================================================== */

label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--ink-soft); margin: 14px 0 5px;
}
label .req {
    font-weight: 500; color: var(--teal); text-transform: none;
    font-size: 11.5px; margin-left: 4px;
}

input[type=text], input[type=tel], input[type=password], input[type=search],
input[type=date], input[type=number], input[type=file], select, textarea {
    width: 100%; min-height: var(--tap);
    padding: 10px 13px;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 16px;   /* 16px empêche le zoom auto sur iOS */
}
input:disabled { background: #f0ede5; color: var(--ink-faint); }
input::placeholder { color: var(--ink-faint); }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: var(--pad);
    box-shadow: var(--shadow); margin-bottom: 16px;
}
.card > label:first-child, .card > h2:first-child { margin-top: 0; }
.form .btn { margin-top: 18px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.hint.sm { font-size: 12px; }
.hint.center { text-align: center; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 62px; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--teal);
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 10px; cursor: pointer;
}

.filters {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.filters .search-input { flex: 1 1 100%; }
.filters select, .filters input[type=date] { flex: 1; min-width: 130px; }
.filters .btn { flex: none; }

.mini-input { margin-top: 8px; }
.mini-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.mini-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
    margin: 10px 0; color: var(--ink-soft);
}
.mini-table th, .mini-table td {
    border: 1px solid var(--border); padding: 5px 7px; text-align: left;
    white-space: nowrap;
}
.mini-table th { background: var(--sand); font-weight: 600; }


/* =====================================================================
   CONNEXION
   ================================================================== */

.auth { max-width: 400px; margin: 0 auto; padding-top: 28px; }

.auth-logo { text-align: center; margin-bottom: 22px; }
.stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 4px 0 18px;
}
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 14px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 10px;
}
.stat-chip {
    width: 38px; height: 38px; border-radius: var(--r-sm);
    display: grid; place-items: center; color: var(--brand);
    background: var(--brand-pale);
}
.stat-chip.warn { color: var(--warn); background: var(--warn-pale); }
.stat-chip.good { color: var(--good); background: var(--good-pale); }
.stat-chip.gold { color: #8a5a10; background: #fbf0da; }
.stat-card .v { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-family: var(--num); }
.stat-card .l { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

.logo-mark {
    width: 64px; height: 64px; margin: 0 auto 12px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 22px rgba(69,59,196,.32);
}
.logo-mark .ico svg { width: 32px; height: 32px; }
.auth-logo h1 { font-size: 26px; letter-spacing: -.02em; }
.tagline { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; }

.auth-alt { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 16px; }

.shop-name { font-size: 18px; font-weight: 700; margin: 0; text-align: center; }

.users-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px; margin: 16px 0 4px;
}
.user-chip {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; cursor: pointer;
    background: var(--sand); border: 1px solid var(--border);
    border-radius: var(--r); font: inherit; color: inherit;
}
.user-chip:hover, .user-chip.actif { border-color: var(--teal); background: var(--teal-pale); }
.user-chip .avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--teal); color: #fff; font-size: 18px; font-weight: 700;
}
.user-chip .nom { font-size: 13.5px; font-weight: 600; }

.tag {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 7px; border-radius: 999px;
    background: var(--teal-pale); color: var(--teal-dark);
    margin-left: 6px; vertical-align: middle;
}
.tag.bad { background: var(--bad-pale); color: var(--bad); }

.pin-who { text-align: center; margin: 18px 0 8px; color: var(--ink-soft); font-size: 14px; }
.pin-input {
    text-align: center; font-family: var(--num);
    font-size: 30px; letter-spacing: .5em; text-indent: .5em;
    height: 64px; padding: 0;
}
#pinForm .btn { margin-top: 12px; }
#pinBack { margin-top: 8px; }


/* =====================================================================
   CAISSE
   ================================================================== */

.pos-search { display: flex; gap: 8px; margin-bottom: 12px; }
.search-input { flex: 1; }
.scan-btn {
    flex: none; width: var(--tap); height: var(--tap);
    display: grid; place-items: center;
    background: var(--teal); color: #fff;
    border: 0; border-radius: var(--r); font-size: 22px; cursor: pointer;
}
.scan-btn:active { background: var(--teal-dark); }

.pos-results {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden; margin-bottom: 12px;
    max-height: 46vh; overflow-y: auto; box-shadow: var(--shadow);
}
.res-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%; min-height: 54px; padding: 10px 14px;
    background: none; border: 0; border-bottom: 1px solid var(--border);
    font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.res-item:last-child { border-bottom: 0; }
.res-item:hover { background: var(--sand); }
.res-nom { font-weight: 600; }
.res-sub { display: block; font-size: 12px; color: var(--ink-faint); }
.res-prix { font-family: var(--num); font-weight: 700; white-space: nowrap; }
.res-none { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 14px; }

.cart-empty { text-align: center; padding: 34px 20px; color: var(--ink-soft); }
.cart-empty .big { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.cart-empty p { margin: 0; font-size: 14px; }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cl-nom { font-weight: 600; }
.cl-unit { font-size: 12px; color: var(--ink-faint); }
.cl-total { font-family: var(--num); font-weight: 700; text-align: right; }
.cl-qty {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
}
.qty-btn {
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); font-size: 20px; font-weight: 700;
    color: var(--teal); cursor: pointer;
}
.qty-btn:active { background: var(--teal-pale); }
.qty-val {
    width: 66px; text-align: center; font-family: var(--num);
    font-weight: 700; min-height: 40px; padding: 0;
}
.cl-remove {
    margin-left: auto; background: none; border: 0;
    color: var(--bad); font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px; cursor: pointer;
}

.pos-footer {
    position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 14px;
    box-shadow: 0 -4px 18px rgba(18,33,31,.07);
    margin-top: 16px;
}

/* Signature de l'écran : le total, lisible à bout de bras */
.pos-total {
    display: flex; align-items: baseline; gap: 8px;
    padding-bottom: 12px; border-bottom: 1px dashed var(--border);
}
.pos-total .lbl { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.pos-total .amount {
    margin-left: auto; font-family: var(--num);
    font-size: 40px; font-weight: 700; letter-spacing: -.03em;
    line-height: 1; color: var(--ink);
}
.pos-total .cur { font-size: 15px; font-weight: 700; color: var(--ink-soft); }

.pos-extra { margin: 12px 0; }
.pos-extra summary {
    font-size: 13px; font-weight: 600; color: var(--teal);
    cursor: pointer; padding: 6px 0;
}

.pay-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.pay-btn {
    min-height: 46px; border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface); font: inherit; font-size: 14px; font-weight: 600;
    color: var(--ink-soft); cursor: pointer;
}
.pay-btn.actif {
    background: var(--teal-pale); border-color: var(--teal); color: var(--teal-dark);
}

.pos-actions { display: flex; gap: 8px; }
.pos-actions .btn.ghost { flex: none; width: 96px; }
.pos-actions .btn.primary { flex: 1; }

.pos-day {
    text-align: center; font-size: 13px; color: var(--ink-faint);
    margin: 18px 0 0;
}


/* =====================================================================
   FENÊTRES MODALES
   ================================================================== */

.modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(12,22,20,.55);
    padding: 0;
}
.modal-box {
    width: 100%; max-width: 480px;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    padding: 20px var(--pad) calc(20px + env(safe-area-inset-bottom));
    max-height: 92vh; overflow-y: auto;
    animation: rise .16s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: .7; } }

.modal-box h3 { margin: 0 0 4px; font-size: 19px; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

.modal-box.scanner { padding: 0; overflow: hidden; border-radius: 18px 18px 0 0; }
#scanVideo { width: 100%; height: 58vh; object-fit: cover; background: #000; display: block; }
.scan-frame {
    position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
    width: 74%; height: 27%;
    border: 3px solid rgba(255,255,255,.9); border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.28);
    pointer-events: none;
}
.scan-hint {
    text-align: center; font-size: 14px; color: var(--ink-soft);
    margin: 14px var(--pad) 0;
}
.modal-box.scanner .modal-actions { padding: 0 var(--pad) 18px; margin-top: 14px; }

.quick-more summary {
    font-size: 13px; font-weight: 600; color: var(--teal);
    cursor: pointer; padding: 10px 0;
}

.modal-box.done { text-align: center; }
.done-mark {
    width: 66px; height: 66px; margin: 6px auto 12px;
    display: grid; place-items: center;
    background: var(--good-pale); color: var(--good);
    border-radius: 50%; font-size: 34px;
}
.done-total { font-family: var(--num); font-size: 32px; font-weight: 700; margin: 0; }
.done-info { color: var(--ink-soft); font-size: 14px; margin: 6px 0 0; }


/* =====================================================================
   LISTES
   ================================================================== */

.list { list-style: none; margin: 0; padding: 0;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }

.row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    min-height: 62px;
}
.row:last-child { border-bottom: 0; }
.list.compact .row { min-height: 52px; padding: 9px 14px; }

.row-main { flex: 1; min-width: 0; color: inherit; }
.row-main:hover { text-decoration: none; }
.row-title {
    display: block; font-weight: 600; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub {
    display: block; font-size: 12.5px; color: var(--ink-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.row-side { flex: none; text-align: right; }
.price { display: block; font-family: var(--num); font-weight: 700; font-size: 15px; }
.num, .unit { display: block; font-size: 11.5px; color: var(--ink-faint); }
.benef { display: block; font-size: 12px; color: var(--good); font-family: var(--num); }

.stock, .stock-big { display: block; font-family: var(--num); font-weight: 700; }
.stock { font-size: 13px; color: var(--ink-soft); }
.stock-big { font-size: 19px; }
.stock.bad, .stock-big.bad { color: var(--bad); }
.stock.warn, .stock-big.warn { color: var(--warn); }
.warn-txt { color: var(--warn); }

.row-edit {
    flex: none; width: 40px; height: 40px;
    display: grid; place-items: center;
    color: var(--ink-faint); font-size: 17px; border-radius: 10px;
}
.row-edit:hover { background: var(--sand); text-decoration: none; color: var(--teal); }

.row.annulee .row-title, .row.annulee .price { text-decoration: line-through; opacity: .55; }
.row.inactif { opacity: .55; }

.mvts .delta { font-family: var(--num); font-weight: 700; font-size: 15px; }
.mvts .delta.up { color: var(--good); }
.mvts .delta.down { color: var(--bad); }
.mvts .after { display: block; font-size: 11.5px; color: var(--ink-faint); }

.foot-link { text-align: center; font-size: 14px; margin: 18px 0 0; }

.empty {
    text-align: center; padding: 40px 22px; color: var(--ink-soft);
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--r);
}
.empty .big { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.empty p { margin: 0 0 10px; font-size: 14px; }
.empty .btn { margin-top: 6px; }
.empty.start { margin-top: 18px; }

.rec-empty {
    text-align: center; color: var(--ink-faint); font-size: 14px; padding: 26px 0;
}


/* =====================================================================
   STATISTIQUES
   ================================================================== */

.stats-row { display: flex; gap: 8px; margin-bottom: 14px; }
.stat {
    flex: 1; text-align: center; padding: 12px 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); color: inherit;
}
.stat:hover { text-decoration: none; }
.stat .v { display: block; font-family: var(--num); font-size: 20px; font-weight: 700; }
.stat .l { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.stat.bad  { border-color: rgba(185,28,28,.35); background: var(--bad-pale); }
.stat.bad .v { color: var(--bad); }
.stat.warn { border-color: rgba(180,83,9,.35); background: var(--warn-pale); }
.stat.warn .v { color: var(--warn); }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 14px; box-shadow: var(--shadow);
}
.kpi .v {
    display: block; font-family: var(--num);
    font-size: 24px; font-weight: 700; letter-spacing: -.02em;
}
.kpi .l { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.value-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 14px; margin-bottom: 14px;
}
.value-box > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 5px 0; font-size: 14px;
}
.value-box .l { color: var(--ink-soft); }
.value-box strong { font-family: var(--num); }

.chart {
    display: flex; align-items: flex-end; gap: 5px;
    height: 130px; padding: 10px 12px 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r);
}
.chart-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end; height: 100%;
}
.chart-bar {
    width: 100%; max-width: 30px;
    background: var(--teal); border-radius: 4px 4px 0 0;
    min-height: 3px;
}
.chart-lbl { font-size: 9.5px; color: var(--ink-faint); margin-top: 5px; white-space: nowrap; }


/* =====================================================================
   CLÔTURE DU JOUR
   ================================================================== */

.closing {
    background: var(--teal); color: #fff;
    border-radius: var(--r); padding: 18px;
    box-shadow: 0 6px 22px rgba(15,118,110,.24);
}
.closing h2 { margin: 0 0 14px; font-size: 14px; font-weight: 700; opacity: .85; }

/* Le montant encaissé domine la carte : c'est le seul chiffre que le
   commerçant doit lire en fermant, tout le reste est du détail. */
.closing-main {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.closing-main .l { font-size: 14px; opacity: .85; }
.closing-main .v {
    font-family: var(--num); font-size: 34px; font-weight: 700;
    letter-spacing: -.03em; line-height: 1;
}

.closing-modes { list-style: none; margin: 12px 0 0; padding: 0; }
.closing-modes li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 5px 0; font-size: 14px;
}
.closing-modes .l { flex: 1; opacity: .85; }
.closing-modes .m {
    font-family: var(--num); font-weight: 700;
    min-width: 92px; text-align: right;
}

.closing-foot {
    margin: 14px 0 0; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: 12.5px; opacity: .8;
}

.period-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.tab-btn {
    flex: none; padding: 9px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    white-space: nowrap;
}
.tab-btn:hover { text-decoration: none; }
.tab-btn.actif { background: var(--teal); border-color: var(--teal); color: #fff; }

.period-label { font-size: 13px; color: var(--ink-faint); margin: 0 0 10px; }


/* =====================================================================
   TICKET
   ================================================================== */

.ticket {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 18px; box-shadow: var(--shadow);
}
.ticket-meta { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

.ticket-lines { list-style: none; margin: 0; padding: 0; }
.ticket-lines li {
    display: grid; grid-template-columns: 1fr auto;
    gap: 2px 12px; padding: 9px 0; border-bottom: 1px dashed var(--border);
}
.t-nom { font-weight: 600; font-size: 14.5px; }
.t-qte { grid-column: 1; font-size: 12px; color: var(--ink-faint); font-family: var(--num); }
.t-tot { grid-row: 1 / span 2; align-self: center;
         font-family: var(--num); font-weight: 700; }

.ticket-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--ink);
    font-size: 15px; font-weight: 600;
}
.ticket-total strong { font-family: var(--num); font-size: 24px; }
.ticket-benef {
    margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 14px; color: var(--ink-soft);
}
.ticket-benef strong { color: var(--good); font-family: var(--num); }


/* =====================================================================
   RÉGLAGES
   ================================================================== */

.shop-code {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 6px 0;
}
.shop-code .l { font-size: 13px; color: var(--ink-soft); }
.shop-code strong {
    font-family: var(--num); font-size: 22px; letter-spacing: .12em;
    color: var(--teal-dark);
}

.info-box {
    background: var(--teal-pale); border: 1px solid rgba(15,118,110,.2);
    border-radius: var(--r); padding: 14px; margin-bottom: 16px;
    font-size: 13.5px; color: var(--teal-dark);
}
.info-box p { margin: 0 0 8px; }
.info-box p:last-child { margin-bottom: 0; }

.team-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.inline-pin { display: flex; gap: 5px; }
.pin-mini {
    width: 74px; min-height: 42px; padding: 0 8px;
    text-align: center; font-family: var(--num); font-size: 16px;
    letter-spacing: .05em;
}

/* Ligne "Comptes" (Mon équipe) — sur petit écran, le nom et les actions
   (PIN + activer/désactiver) ne tiennent pas côte à côte. On passe donc
   sur deux niveaux : identité en haut, actions en pleine largeur en bas. */
.row.team-row {
    flex-wrap: wrap;
    align-items: flex-start;
}
.row.team-row .row-title {
    white-space: normal; overflow: visible; text-overflow: clip;
}
.row.team-row .row-main { flex: 1 1 160px; }
.row.team-row .team-actions {
    flex: 1 1 100%;
    align-items: stretch;
    margin-top: 4px;
}
.row.team-row .inline-pin { flex-wrap: nowrap; }
.row.team-row .inline-pin .pin-mini { flex: 1; width: auto; min-width: 0; }
.row.team-row .inline-pin .btn { flex: none; }

/* Le bouton Désactiver/Réactiver (2e formulaire, pas le champ PIN)
   prend toute la largeur pour rester lisible sur mobile. Il ne doit
   jamais toucher le formulaire du PIN — sinon le champ PIN est écrasé. */
.row.team-row .team-actions > form:not(.inline-pin) { width: 100%; }
.row.team-row .team-actions > form:not(.inline-pin) > button.btn { width: 100%; }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-choice {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border: 1.5px solid var(--border); border-radius: var(--r);
    cursor: pointer;
}
.plan-choice input { position: absolute; top: 12px; right: 12px; }
.plan-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-pale); }
.plan-name { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.plan-price { font-family: var(--num); font-size: 20px; font-weight: 800; }
.plan-price .per { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.plan-save {
    align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--good);
    background: var(--good-pale); border-radius: 999px; padding: 2px 8px;
}

/* =====================================================================
   CRÉDITS — carte "dette client" avec encaissement en un geste
   ================================================================== */

.credit-row {
    flex-wrap: wrap; align-items: flex-start; gap: 6px 10px;
}
.credit-row .row-main { flex: 1 1 160px; }
.credit-amounts { flex: none; text-align: right; }
.credit-restant {
    display: block; font-family: var(--num); font-weight: 800; font-size: 16px;
    color: var(--warn);
}
.credit-restant .lbl { font-family: inherit; font-weight: 600; font-size: 11.5px; color: var(--ink-faint); }
.credit-total { font-size: 11.5px; color: var(--ink-faint); }
.credit-form {
    flex: 1 1 100%; display: flex; gap: 8px; margin-top: 6px;
}
.credit-input { flex: 1; width: auto; min-width: 0; text-align: left; padding-left: 10px; }
.credit-form .btn { flex: none; }

.credit-box {
    background: var(--warn-pale); border: 1px solid rgba(178,101,15,.25);
    border-radius: var(--r); padding: 12px; margin: 4px 0 10px;
}
.credit-box label { display: block; font-size: 12.5px; font-weight: 700; color: var(--warn); margin-bottom: 6px; }
.credit-box input {
    width: 100%; min-height: 44px; padding: 0 12px; font-size: 16px;
    border: 1px solid rgba(178,101,15,.35); border-radius: var(--r-sm); background: #fff;
}
.credit-reste { margin: 8px 0 4px; font-size: 13.5px; color: var(--ink); }
.credit-reste strong { color: var(--warn); }

.sub-status { text-align: center; }
.sub-status .big { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.sub-status p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.sub-status.warn { border-color: rgba(180,83,9,.35); background: var(--warn-pale); }
.sub-status.bad  { border-color: rgba(185,28,28,.35); background: var(--bad-pale); }
.sub-status.bad .big { color: var(--bad); }

.contact-line { margin: 14px 0 0; }


/* =====================================================================
   REMPLIR LE RAYON
   ================================================================== */

.fill-intro {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 22px 18px; text-align: center;
    box-shadow: var(--shadow);
}
.fill-intro p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 16px; }
.fill-intro .hint { margin-top: 12px; }

.link-btn {
    background: none; border: 0; padding: 0;
    color: var(--teal); font: inherit; font-size: inherit;
    text-decoration: underline; cursor: pointer;
}

/* Le compteur reste collé en haut : le commerçant voit sa progression
   sans lâcher le rythme de scan. */
.fill-counter {
    position: sticky; top: calc(var(--topbar) + env(safe-area-inset-top));
    z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
    background: var(--teal); color: #fff;
    border-radius: var(--r); padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(15,118,110,.25);
}
.fill-counter .v {
    font-family: var(--num); font-size: 26px; font-weight: 700; line-height: 1;
}
.fill-counter .l { display: block; font-size: 12px; opacity: .85; }
.fill-counter .btn {
    background: #fff; border-color: #fff; color: var(--teal-dark); flex: none;
}
.fill-counter .btn:hover { background: #eef8f6; }

.fill-badge {
    display: inline-block; margin: 0 0 8px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; padding: 4px 10px; border-radius: 999px;
}
.fill-badge.connu   { background: var(--teal-pale);  color: var(--teal-dark); }
.fill-badge.nouveau { background: var(--warn-pale);  color: var(--warn); }


/* =====================================================================
   BANNIÈRE D'INSTALLATION PWA
   ================================================================== */

.install-prompt {
    position: fixed; left: 10px; right: 10px;
    bottom: calc(var(--tabbar) + 10px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--ink); color: #fff;
    border-radius: var(--r); padding: 12px 14px;
    font-size: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.install-prompt span { flex: 1 1 100%; }
.install-prompt .btn { flex: 1; min-height: 40px; }
.install-prompt .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }


/* =====================================================================
   ÉCRANS LARGES
   ================================================================== */

@media (min-width: 720px) {
    .page { padding: 24px; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }
    .pay-modes { grid-template-columns: repeat(4, 1fr); }
    .modal { align-items: center; padding: 20px; }
    .modal-box { border-radius: 18px; }
    .pos-footer { bottom: 10px; }
    body.has-nav { padding-bottom: 20px; }
    .tabbar {
        position: sticky; top: calc(var(--topbar) + env(safe-area-inset-top));
        bottom: auto; border-top: 0; border-bottom: 1px solid var(--border);
    }
    .tab { flex-direction: row; gap: 7px; height: 52px; font-size: 13px; }
    .install-prompt { left: auto; right: 20px; bottom: 20px; max-width: 340px; }
}

@media print {
    .topbar, .tabbar, .btn, .filters, .install-prompt, .banner { display: none !important; }
    body { background: #fff; }
    .ticket { border: 0; box-shadow: none; }
}


/* =====================================================================
   CRÉDIT — ce qui est dû doit se distinguer de ce qui est encaissé
   ---------------------------------------------------------------------
   Un montant à crédit affiché comme un montant reçu fausse la lecture
   de la journée. Partout où les deux coexistent, la somme non encaissée
   est marquée en orange, jamais dans la couleur des recettes.
   ================================================================== */

.price.impaye { color: var(--warn); }

.stat-card.alerte { border-color: rgba(180, 83, 9, .35); }
.stat-chip.warn   { background: var(--warn-pale); color: var(--warn); }

a.kpi:hover, a.stat-card:hover { text-decoration: none; border-color: var(--teal); }


.closing-du {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: 12px 0 0; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 13px;
}
.closing-du .l { opacity: .85; }
.closing-du a {
    color: #fff; font-family: var(--num); font-weight: 700; font-size: 17px;
    text-decoration: underline;
}

.ticket-credit {
    margin: 14px 0 0; padding: 14px;
    border-radius: var(--r); border: 1px solid var(--border);
    background: var(--sand);
}
.ticket-credit.impaye { background: var(--warn-pale); border-color: rgba(180, 83, 9, .3); }
.ticket-credit.solde  { background: var(--good-pale); border-color: rgba(21, 128, 61, .25); }
.ticket-credit p {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 0 0 6px; font-size: 14px; color: var(--ink-soft);
}
.ticket-credit strong { font-family: var(--num); color: var(--ink); }
.ticket-credit .grand { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ticket-credit .grand strong { font-size: 21px; }
.ticket-credit.impaye .grand strong { color: var(--warn); }
.ticket-credit.solde .grand strong  { color: var(--good); }

/* Champ « montant reçu » laissé vide par défaut : la note explique
   pourquoi, sinon le vendeur croit à un champ obligatoire. */
.credit-vide {
    margin: 6px 0 0; font-size: 12px; color: var(--ink-soft);
}
.credit-box .alert.error { margin: 8px 0 0; padding: 8px 10px; font-size: 12.5px; }


/* =====================================================================
   CONNEXION — onglets et rôles
   ---------------------------------------------------------------------
   « Créer ma boutique » était un lien discret en bas de page : personne
   ne le voyait. Les deux actions sont désormais au même niveau, en haut.
   ================================================================== */

.auth-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    background: rgba(0, 0, 0, .05); border-radius: var(--r); padding: 4px;
}
.auth-tab {
    flex: 1; text-align: center; padding: 11px 8px;
    border-radius: calc(var(--r) - 3px);
    font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.auth-tab:hover { text-decoration: none; color: var(--ink); }
.auth-tab.actif {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 3px rgba(18, 33, 31, .12);
}

/* Qui se connecte : patron ou vendeur */
.role-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.role-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 5px; padding: 13px 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 13px; font-weight: 600; color: var(--ink-soft);
    text-align: center; line-height: 1.25;
}
.role-tab:hover { text-decoration: none; border-color: var(--teal); }
.role-tab.actif {
    background: var(--teal-pale); border-color: var(--teal); color: var(--teal-dark);
}
.role-ico { display: block; opacity: .8; }
.role-tab.actif .role-ico { opacity: 1; }

/* Le code boutique se lit sur un papier : gros, espacé, en majuscules. */
.code-input {
    text-align: center; text-transform: uppercase;
    font-family: var(--num); font-size: 26px; font-weight: 700;
    letter-spacing: .22em; text-indent: .22em;
    height: 62px; padding: 0;
}

/* Le choix d'un patron est un bouton dans un formulaire : il doit
   occuper sa cellule de grille comme les autres pastilles. */
.users-grid form { display: contents; }


/* =====================================================================
   RTL — support de l'arabe (droite-à-gauche)
   ---------------------------------------------------------------------
   Ne touche à AUCUNE couleur : uniquement le sens de lecture et les
   positions physiques (left/right) qui ne s'inversent pas toutes
   seules avec dir="rtl". La plupart des lignes en flexbox se
   réorganisent déjà automatiquement grâce à dir="rtl" sur <html>.
   ================================================================== */

[dir="rtl"] .drawer {
    left: auto;
    right: 0;
}
@keyframes drawer-in-rtl { from { transform: translateX(12px); opacity: .6; } to { transform: none; opacity: 1; } }
[dir="rtl"] .drawer {
    animation-name: drawer-in-rtl;
}

[dir="rtl"] .drawer-close {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .pw-wrap input {
    padding-right: 16px;
    padding-left: 62px;
}
[dir="rtl"] .pw-toggle {
    right: auto;
    left: 6px;
}

[dir="rtl"] select {
    background-position: 18px 22px, 13px 22px;
    padding-right: 16px;
    padding-left: 36px;
}

[dir="rtl"] .mini-list {
    padding-left: 0;
    padding-right: 18px;
}

[dir="rtl"] .mini-table th,
[dir="rtl"] .mini-table td {
    text-align: right;
}

[dir="rtl"] .res-item {
    text-align: right;
}

[dir="rtl"] .tag {
    margin-left: 0;
    margin-right: 6px;
}

[dir="rtl"] label .req {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .credit-input {
    text-align: right;
    padding-left: 0;
    padding-right: 10px;
}

@media (min-width: 720px) {
    [dir="rtl"] .install-prompt {
        left: 20px;
        right: auto;
    }
}