/* ════════════════════════════════════════════════════════════════════
   RestoBar — app.css (v2)
   Composants partagés : préférences (langue/thème), toasts, écran PIN,
   interface serveur mobile-first, panneau « Commandes serveur » du
   comptoir, et couverture complète du mode sombre.
   Les couleurs passent par des variables → bascule clair/sombre fiable.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --rb-sidebar-w: 260px;
    --rb-surface:   #ffffff;
    --rb-surface-2: #f6f7fb;
    --rb-surface-3: #eef1f6;
    --rb-line:      #e3e7ee;
    --rb-ink:       #1d2433;
    --rb-ink-2:     #5b6577;
    --rb-ink-3:     #8a93a3;
    --rb-ok:        #15803d;
    --rb-ok-bg:     #dcfce7;
    --rb-warn:      #a16207;
    --rb-warn-bg:   #fef3c7;
    --rb-err:       #b91c1c;
    --rb-err-bg:    #fee2e2;
    --rb-info:      #1d4ed8;
    --rb-info-bg:   #dbeafe;
    --rb-pending:   #c2410c;
    --rb-pending-bg:#ffedd5;
    --rb-focus:     0 0 0 3px color-mix(in srgb, var(--rb-primary) 35%, transparent);
    --rb-elev:      0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.06);
    --rb-elev-2:    0 10px 30px rgba(16,24,40,.16);
    --rb-r:         14px;
    --rb-tap:       48px;
}
html[data-bs-theme="dark"] {
    --rb-bg:        #0d1320;
    --rb-surface:   #151d2c;
    --rb-surface-2: #1b2436;
    --rb-surface-3: #232e44;
    --rb-line:      #2c3850;
    --rb-ink:       #e6ebf3;
    --rb-ink-2:     #a9b4c6;
    --rb-ink-3:     #7d899e;
    --rb-ok:        #4ade80;
    --rb-ok-bg:     rgba(34,197,94,.16);
    --rb-warn:      #fbbf24;
    --rb-warn-bg:   rgba(245,158,11,.16);
    --rb-err:       #f87171;
    --rb-err-bg:    rgba(239,68,68,.16);
    --rb-info:      #93c5fd;
    --rb-info-bg:   rgba(59,130,246,.18);
    --rb-pending:   #fb923c;
    --rb-pending-bg:rgba(249,115,22,.16);
    --rb-elev:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
    --rb-elev-2:    0 12px 34px rgba(0,0,0,.5);
    color-scheme: dark;
}

.rb-sidebar { width: var(--rb-sidebar-w); }
:focus-visible { outline: none; box-shadow: var(--rb-focus) !important; }
.btn, .nav-link, .form-control, .form-select { touch-action: manipulation; }

/* ── Préférences : langue + thème ─────────────────────────────── */
.rb-prefs { display: inline-flex; align-items: center; gap: .4rem; }
.rb-lang-switch { display: inline-flex; background: var(--rb-surface-3); border-radius: 999px; padding: 3px; }
.rb-lang-switch a {
    min-width: 38px; height: 30px; padding: 0 .55rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: var(--rb-ink-2);
}
.rb-lang-switch a.active { background: var(--rb-surface); color: var(--rb-ink); box-shadow: var(--rb-elev); }
.rb-theme-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rb-line);
    background: var(--rb-surface); color: var(--rb-ink); display: inline-flex;
    align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
}
.rb-theme-btn:hover { background: var(--rb-surface-3); }
.rb-ic-light { display: none; }
html[data-bs-theme="dark"] .rb-ic-dark { display: none; }
html[data-bs-theme="dark"] .rb-ic-light { display: inline; }
#themeToggleBtn .rb-ic-light { color: #fde68a; }

/* Intégration navigation : barre supérieure (≥ 992 px) et menu latéral */
.rb-prefs-top { margin-left: .5rem; align-items: center; flex-shrink: 0; }
.rb-prefs-side { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: center; }
.rb-prefs-side .rb-lang-switch { background: rgba(255,255,255,.08); }
.rb-prefs-side .rb-lang-switch a { color: #cbd5e1; }
.rb-prefs-side .rb-lang-switch a.active { background: #fff; color: #111827; }
.rb-prefs-side .rb-theme-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; }
@media (min-width: 992px) { .rb-prefs-side { display: none; } }
html.rb-has-prefs #themeToggleBtn, html.rb-has-prefs #langFab, html.rb-has-prefs #langMenu { display: none !important; }

/* ── Toasts ───────────────────────────────────────────────────── */
.rb-toasts {
    position: fixed; z-index: 2100; left: 50%; transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 24px));
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.rb-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem;
    padding: .75rem .9rem; border-radius: 12px; font-weight: 600; font-size: .9rem;
    background: var(--rb-surface); color: var(--rb-ink); box-shadow: var(--rb-elev-2);
    border-left: 5px solid var(--rb-info); animation: rbToastIn .25s ease;
}
.rb-toast i { font-size: 1.1rem; margin-top: 1px; }
.rb-toast span { flex: 1; }
.rb-toast button { border: 0; background: none; color: var(--rb-ink-3); font-size: 1.3rem; line-height: 1; padding: 0 .2rem; }
.rb-toast-success { border-left-color: var(--rb-ok); } .rb-toast-success i { color: var(--rb-ok); }
.rb-toast-danger  { border-left-color: var(--rb-err); } .rb-toast-danger i { color: var(--rb-err); }
.rb-toast-warning { border-left-color: var(--rb-warn); } .rb-toast-warning i { color: var(--rb-warn); }
.rb-toast-info i  { color: var(--rb-info); }
.rb-toast.out { opacity: 0; transform: translateY(8px); transition: .25s; }
@keyframes rbToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 992px) {
    .rb-toasts { left: auto; right: 20px; transform: none; top: 76px; bottom: auto; width: 380px; }
}

/* ── Badges d'état ────────────────────────────────────────────── */
.rb-status {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    font-size: .74rem; font-weight: 800; padding: .28rem .6rem; border-radius: 999px;
}
.rb-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rb-status-pending   { color: var(--rb-pending); background: var(--rb-pending-bg); }
.rb-status-pending::before { animation: rbPulse 1.4s infinite; }
.rb-status-validated { color: var(--rb-ok); background: var(--rb-ok-bg); }
.rb-status-rejected, .rb-status-cancelled { color: var(--rb-err); background: var(--rb-err-bg); }
.rb-status-info      { color: var(--rb-info); background: var(--rb-info-bg); }
@keyframes rbPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.rb-net { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; color: var(--rb-ok); }
.rb-net::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rb-net.off { color: var(--rb-err); }
.rb-net.off::before { animation: rbPulse 1s infinite; }

/* ════════════════════════════════════════════════════════════════
   ÉCRAN PIN
   ════════════════════════════════════════════════════════════════ */
body.pin-page {
    min-height: 100vh; min-height: 100dvh; margin: 0;
    background:
        radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--rb-primary) 28%, transparent), transparent 60%),
        linear-gradient(160deg, #111827, #1f2937 55%, #0b1220);
}
.pin-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.pin-card {
    width: min(400px, 100%); background: var(--rb-surface); color: var(--rb-ink);
    border-radius: 24px; padding: 18px 22px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
    text-align: center;
}
.pin-toolbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.pin-brand { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.pin-logo { max-height: 56px; max-width: 160px; object-fit: contain; }
.pin-logo-fallback {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem;
    color: var(--rb-primary); background: color-mix(in srgb, var(--rb-primary) 14%, transparent);
}
.pin-app { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rb-ink-3); }
.pin-title { font-size: 1.45rem; font-weight: 900; margin: .8rem 0 .15rem; letter-spacing: -.01em; }
.pin-sub { color: var(--rb-ink-2); font-size: .9rem; margin: 0 0 .8rem; }
.pin-alert { border-radius: 12px; padding: .55rem .8rem; font-size: .84rem; font-weight: 600; margin-bottom: .6rem; text-align: left; }
.pin-alert-info { background: var(--rb-info-bg); color: var(--rb-info); }
.pin-alert-err { background: var(--rb-err-bg); color: var(--rb-err); }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 1rem 0 .4rem; min-height: 22px; }
.pin-dots span {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rb-ink-3);
    transition: transform .12s, background .12s, border-color .12s;
}
.pin-dots span.on { background: var(--rb-primary); border-color: var(--rb-primary); transform: scale(1.12); }
.pin-dots.shake { animation: rbShake .38s; }
@keyframes rbShake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.pin-hidden-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pin-msg { min-height: 1.4rem; font-size: .86rem; font-weight: 700; margin-bottom: .4rem; }
.pin-msg-err { color: var(--rb-err); }
.pin-msg-ok { color: var(--rb-ok); }
.pin-msg-info { color: var(--rb-ink-2); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: .4rem 0 1rem; }
.pin-key {
    height: 64px; border-radius: 18px; border: 1px solid var(--rb-line); background: var(--rb-surface-2);
    color: var(--rb-ink); font-size: 1.55rem; font-weight: 800; cursor: pointer;
    transition: transform .06s, background .12s; user-select: none; -webkit-user-select: none;
}
.pin-key:active { transform: scale(.95); background: var(--rb-surface-3); }
.pin-key-alt { font-size: 1.2rem; color: var(--rb-ink-2); }
.pin-submit { border-radius: 14px; font-weight: 800; min-height: 52px; }
.pin-link { display: inline-block; margin-top: 1rem; font-size: .84rem; font-weight: 600; color: var(--rb-ink-2); }
.pin-link:hover { color: var(--rb-primary); }
@media (max-height: 700px) { .pin-key { height: 54px; } .pin-title { margin-top: .4rem; } }

/* ════════════════════════════════════════════════════════════════
   INTERFACE SERVEUR (mobile-first)
   ════════════════════════════════════════════════════════════════ */
body.srv-app { background: var(--rb-bg, #f4f6f9); }
.srv-top {
    position: sticky; top: 0; z-index: 1030; background: var(--rb-surface);
    border-bottom: 1px solid var(--rb-line); padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top));
    display: flex; align-items: center; gap: 10px;
}
.srv-who { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; }
.srv-avatar {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--rb-primary); color: #fff; font-weight: 900;
}
.srv-who-name { font-weight: 800; font-size: .95rem; color: var(--rb-ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-who-role { font-size: .72rem; color: var(--rb-ink-3); font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.srv-logout {
    height: 38px; border-radius: 12px; border: 1px solid var(--rb-line); background: var(--rb-surface-2);
    color: var(--rb-err); font-weight: 800; padding: 0 .75rem; display: inline-flex; align-items: center; gap: .35rem;
    font-size: .85rem;
}
.srv-context {
    position: sticky; top: 55px; z-index: 1020; background: var(--rb-surface-2);
    border-bottom: 1px solid var(--rb-line); padding: 8px 12px; display: flex; gap: 8px; overflow-x: auto;
}
.srv-chip {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem;
    border-radius: 12px; border: 1.5px solid var(--rb-line); background: var(--rb-surface); color: var(--rb-ink);
    text-align: left; cursor: pointer; min-height: var(--rb-tap);
}
.srv-chip i { font-size: 1.2rem; color: var(--rb-primary); }
.srv-chip small { display: block; font-size: .66rem; font-weight: 800; color: var(--rb-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.srv-chip strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-chip.is-set { border-color: color-mix(in srgb, var(--rb-primary) 55%, var(--rb-line)); }
.srv-chip.is-missing strong { color: var(--rb-err); }
.srv-chip .srv-chip-txt { min-width: 0; flex: 1; }

.srv-main { display: grid; grid-template-columns: 1fr; gap: 0; }
.srv-catalog { padding: 12px 12px 110px; min-width: 0; }
.srv-side { display: none; }

.srv-search { position: relative; margin-bottom: 10px; }
.srv-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--rb-ink-3); }
.srv-search input {
    width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid var(--rb-line);
    background: var(--rb-surface); color: var(--rb-ink); padding: 0 44px 0 42px; font-size: 1rem;
}
.srv-search button { position: absolute; right: 6px; top: 6px; height: 36px; width: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--rb-ink-3); }
.srv-seg { display: inline-flex; background: var(--rb-surface-3); border-radius: 12px; padding: 3px; margin-bottom: 10px; }
.srv-seg button { border: 0; background: transparent; padding: .45rem 1rem; border-radius: 10px; font-weight: 800; font-size: .86rem; color: var(--rb-ink-2); min-height: 38px; }
.srv-seg button.active { background: var(--rb-surface); color: var(--rb-ink); box-shadow: var(--rb-elev); }
.srv-seg .count { font-size: .7rem; opacity: .7; margin-left: .25rem; }
.srv-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.srv-cats::-webkit-scrollbar { display: none; }
.srv-cats button {
    flex-shrink: 0; border: 1.5px solid var(--rb-line); background: var(--rb-surface); color: var(--rb-ink-2);
    border-radius: 999px; padding: .4rem .9rem; font-weight: 700; font-size: .84rem; min-height: 38px;
}
.srv-cats button.active { background: var(--rb-ink); color: var(--rb-surface); border-color: var(--rb-ink); }

.srv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .srv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .srv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.srv-card {
    position: relative; display: flex; flex-direction: column; background: var(--rb-surface);
    border: 1.5px solid var(--rb-line); border-radius: var(--rb-r); overflow: hidden; text-align: left;
    padding: 0; color: var(--rb-ink); cursor: pointer; transition: transform .08s, border-color .15s, box-shadow .15s;
    content-visibility: auto; contain-intrinsic-size: 240px;
}
.srv-card:active { transform: scale(.98); }
.srv-card:hover { border-color: color-mix(in srgb, var(--rb-primary) 50%, var(--rb-line)); box-shadow: var(--rb-elev); }
.srv-card.in-cart { border-color: var(--rb-primary); }
.srv-card-img { aspect-ratio: 4 / 3; background: var(--rb-surface-3); display: grid; place-items: center; overflow: hidden; }
.srv-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv-card-img i { font-size: 2rem; color: var(--rb-ink-3); }
.srv-card-img.noimg { aspect-ratio: 5 / 2; background: linear-gradient(135deg, var(--rb-surface-2), var(--rb-surface-3)); }
.srv-card-img.noimg i { font-size: 1.6rem; opacity: .7; }
.srv-sheet .form-label, .srv-side .form-label { color: var(--rb-ink-2); }
.srv-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.srv-card-name { font-weight: 800; font-size: .92rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-card-desc { font-size: .74rem; color: var(--rb-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; gap: 6px; }
.srv-card-price { font-weight: 900; font-size: .98rem; color: var(--rb-primary); white-space: nowrap; }
.srv-card-add {
    width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--rb-primary); color: #fff; font-size: 1.2rem;
}
.srv-card-qty {
    position: absolute; top: 8px; right: 8px; min-width: 28px; height: 28px; border-radius: 999px; padding: 0 8px;
    background: var(--rb-primary); color: #fff; font-weight: 900; font-size: .85rem; display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.srv-card-tag {
    position: absolute; top: 8px; left: 8px; font-size: .66rem; font-weight: 900; padding: .2rem .5rem;
    border-radius: 999px; background: rgba(17,24,39,.78); color: #fff; letter-spacing: .03em;
}
.srv-card.is-out { cursor: not-allowed; border-style: dashed; }
.srv-card.is-out .srv-card-img img { filter: grayscale(1) opacity(.45); }
.srv-card.is-out .srv-card-name, .srv-card.is-out .srv-card-price { color: var(--rb-ink-3); }
.srv-card.is-out .srv-card-add { background: var(--rb-surface-3); color: var(--rb-ink-3); }
.srv-out-badge {
    position: absolute; left: 0; right: 0; top: 18%; text-align: center; transform: rotate(-6deg);
    font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
}
.srv-out-badge span { background: var(--rb-err); color: #fff; padding: .25rem .65rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

.srv-empty { text-align: center; padding: 3rem 1rem; color: var(--rb-ink-3); }
.srv-empty i { font-size: 2.6rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Sélection du comptoir */
.srv-counters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.srv-counter-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-height: 110px;
    padding: 16px; border-radius: 18px; border: 2px solid var(--rb-line); background: var(--rb-surface);
    color: var(--rb-ink); text-align: left; cursor: pointer; transition: border-color .15s, transform .08s;
}
.srv-counter-btn:active { transform: scale(.98); }
.srv-counter-btn:hover, .srv-counter-btn.active { border-color: var(--rb-primary); }
.srv-counter-btn i { font-size: 1.6rem; color: var(--rb-primary); }
.srv-counter-btn strong { font-size: 1.05rem; }
.srv-counter-btn small { color: var(--rb-ink-3); font-size: .78rem; }
.srv-step-title { font-weight: 900; font-size: 1.15rem; margin: 6px 0 2px; color: var(--rb-ink); }
.srv-step-sub { color: var(--rb-ink-2); font-size: .88rem; margin-bottom: 14px; }

/* Panier */
.srv-cart-lines { display: flex; flex-direction: column; }
.srv-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rb-line); }
.srv-line-main { flex: 1; min-width: 0; }
.srv-line-name { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-line-sub { font-size: .78rem; color: var(--rb-ink-3); }
.srv-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--rb-line); border-radius: 12px; overflow: hidden; }
.srv-stepper button { width: 40px; height: 40px; border: 0; background: var(--rb-surface-2); color: var(--rb-ink); font-size: 1.1rem; font-weight: 900; }
.srv-stepper span { min-width: 34px; text-align: center; font-weight: 900; }
.srv-line-total { font-weight: 900; min-width: 70px; text-align: right; font-size: .9rem; }
.srv-summary { background: var(--rb-surface-2); border-radius: 14px; padding: 12px; margin-top: 12px; }
.srv-summary-row { display: flex; justify-content: space-between; font-size: .88rem; color: var(--rb-ink-2); padding: 2px 0; }
.srv-summary-row strong { color: var(--rb-ink); }
.srv-summary-total { font-size: 1.25rem; font-weight: 900; color: var(--rb-ink); border-top: 1px dashed var(--rb-line); margin-top: 6px; padding-top: 8px; }
.srv-summary-total span:last-child { color: var(--rb-primary); }
.srv-send { min-height: 56px; font-size: 1.05rem; font-weight: 900; border-radius: 14px; }
.srv-lockinfo { font-size: .76rem; color: var(--rb-ink-3); display: flex; gap: .4rem; margin-top: 8px; }

/* Barre basse mobile */
.srv-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: var(--rb-surface);
    border-top: 1px solid var(--rb-line); box-shadow: 0 -6px 20px rgba(0,0,0,.08);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
.srv-bottom-row { display: flex; gap: 8px; align-items: stretch; }
.srv-tabbtn {
    flex: 0 0 auto; width: 64px; border: 0; background: transparent; color: var(--rb-ink-3); position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: .66rem; font-weight: 800; border-radius: 12px;
}
.srv-tabbtn i { font-size: 1.3rem; }
.srv-tabbtn.active { color: var(--rb-primary); background: color-mix(in srgb, var(--rb-primary) 10%, transparent); }
.srv-tabbtn .badge { position: absolute; top: 2px; right: 8px; font-size: .62rem; }
.srv-cartbar {
    flex: 1; min-height: 54px; border: 0; border-radius: 14px; background: var(--rb-primary); color: #fff;
    display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-weight: 900;
}
.srv-cartbar:disabled { background: var(--rb-surface-3); color: var(--rb-ink-3); }
.srv-cartbar .n { background: rgba(255,255,255,.22); border-radius: 999px; padding: .1rem .55rem; margin-right: .4rem; }

/* Feuilles (panier / client / commandes) en mobile */
.srv-sheet .offcanvas-body { padding: 12px 14px 18px; }
.offcanvas.offcanvas-bottom.srv-sheet { height: auto; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; }
.srv-sheet .offcanvas-header { padding: 14px 16px 6px; }
.srv-sheet .offcanvas-title { font-weight: 900; }
.srv-grabber { width: 44px; height: 5px; border-radius: 3px; background: var(--rb-line); margin: 8px auto 0; }

.srv-client-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.srv-client-item {
    display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; border-radius: 12px;
    border: 1.5px solid var(--rb-line); background: var(--rb-surface); color: var(--rb-ink); text-align: left; width: 100%;
}
.srv-client-item:hover, .srv-client-item.active { border-color: var(--rb-primary); }
.srv-client-item .ini {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--rb-surface-3); font-weight: 900; color: var(--rb-ink-2);
}
.srv-client-item small { display: block; color: var(--rb-ink-3); font-size: .75rem; }
.srv-client-walkin { border-style: dashed; }

/* Mes commandes (serveur) */
.srv-orders { display: flex; flex-direction: column; gap: 10px; }
.srv-order {
    background: var(--rb-surface); border: 1px solid var(--rb-line); border-radius: var(--rb-r);
    padding: 12px; box-shadow: var(--rb-elev);
}
.srv-order.is-new { animation: rbFlash 1.8s ease; }
@keyframes rbFlash { 0%,40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-primary) 55%, transparent); } 100% { box-shadow: var(--rb-elev); } }
.srv-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.srv-order-no { font-weight: 900; font-size: .95rem; }
.srv-order-meta { font-size: .78rem; color: var(--rb-ink-3); }
.srv-order-items { font-size: .82rem; color: var(--rb-ink-2); margin: 8px 0; padding-left: 0; list-style: none; }
.srv-order-items li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.srv-order-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--rb-line); padding-top: 8px; }
.srv-order-total { font-weight: 900; color: var(--rb-ink); }
.srv-order-reason { background: var(--rb-err-bg); color: var(--rb-err); border-radius: 10px; padding: .45rem .6rem; font-size: .8rem; font-weight: 700; margin-top: 8px; }
.srv-order-ok { background: var(--rb-ok-bg); color: var(--rb-ok); border-radius: 10px; padding: .45rem .6rem; font-size: .8rem; font-weight: 700; margin-top: 8px; }

/* Grand écran : panier en colonne permanente */
@media (min-width: 992px) {
    .srv-main { grid-template-columns: minmax(0, 1fr) 400px; min-height: calc(100vh - 120px); }
    .srv-catalog { padding: 16px 16px 30px; }
    .srv-side {
        display: flex; flex-direction: column; border-left: 1px solid var(--rb-line); background: var(--rb-surface);
        position: sticky; top: 120px; height: calc(100vh - 120px); min-height: 0;
    }
    .srv-side-tabs { display: flex; border-bottom: 1px solid var(--rb-line); }
    .srv-side-tabs button { flex: 1; border: 0; background: transparent; padding: 12px; font-weight: 800; color: var(--rb-ink-3); border-bottom: 3px solid transparent; }
    .srv-side-tabs button.active { color: var(--rb-ink); border-bottom-color: var(--rb-primary); }
    .srv-side-body { flex: 1; overflow-y: auto; padding: 12px 14px; min-height: 0; }
    .srv-side-foot { border-top: 1px solid var(--rb-line); padding: 12px 14px; }
    .srv-bottom { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   COMPTOIR : panneau « Commandes serveur » (sell.php + page dédiée)
   ════════════════════════════════════════════════════════════════ */
.so-navbtn { position: relative; }
.so-navbtn .so-count {
    position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px;
    background: #dc3545; color: #fff; font-size: .7rem; font-weight: 900; display: none; place-items: center;
    border: 2px solid var(--rb-surface);
}
.so-navbtn.has-pending .so-count { display: grid; }
.so-navbtn.has-pending { animation: soRing 2s infinite; }
@keyframes soRing { 0%,100% { box-shadow: 0 0 0 0 rgba(220,53,69,.0); } 50% { box-shadow: 0 0 0 5px rgba(220,53,69,.35); } }

.so-panel.offcanvas { width: min(560px, 100vw) !important; background: var(--rb-surface-2); color: var(--rb-ink); }
.so-panel .offcanvas-header { background: var(--rb-surface); border-bottom: 1px solid var(--rb-line); flex-wrap: wrap; gap: 6px; }
.so-head-title { font-weight: 900; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.so-live { font-size: .72rem; font-weight: 700; color: var(--rb-ink-3); display: flex; gap: .4rem; align-items: center; }
.so-tabs { display: flex; gap: 4px; background: var(--rb-surface-3); border-radius: 12px; padding: 3px; }
.so-tabs button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: .5rem .4rem; font-weight: 800; font-size: .84rem; color: var(--rb-ink-2); min-height: 40px; }
.so-tabs button.active { background: var(--rb-surface); color: var(--rb-ink); box-shadow: var(--rb-elev); }
.so-tabs .badge { font-size: .68rem; }
.so-list { display: flex; flex-direction: column; gap: 12px; }
.so-card {
    background: var(--rb-surface); color: var(--rb-ink); border: 1px solid var(--rb-line); border-radius: 16px;
    box-shadow: var(--rb-elev); overflow: hidden;
}
.so-card.is-pending { border-left: 5px solid var(--rb-pending); }
.so-card.is-validated { border-left: 5px solid var(--rb-ok); }
.so-card.is-rejected, .so-card.is-cancelled { border-left: 5px solid var(--rb-err); opacity: .92; }
.so-card.is-new { animation: rbFlash 2.4s ease; }
.so-card-head { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px 6px; align-items: flex-start; }
.so-card-no { font-weight: 900; font-size: 1rem; letter-spacing: .01em; }
.so-card-time { font-size: .76rem; color: var(--rb-ink-3); font-weight: 700; }
.so-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 0 14px 8px; font-size: .82rem; }
.so-meta div { min-width: 0; }
.so-meta small { display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; color: var(--rb-ink-3); letter-spacing: .04em; }
.so-meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-items { width: 100%; font-size: .84rem; border-top: 1px solid var(--rb-line); }
.so-items td { padding: 5px 14px; border-bottom: 1px dashed var(--rb-line); color: var(--rb-ink); }
.so-items td.q { font-weight: 900; width: 48px; white-space: nowrap; }
.so-items td.p, .so-items td.s { text-align: right; white-space: nowrap; color: var(--rb-ink-2); }
.so-items td.s { font-weight: 800; color: var(--rb-ink); }
.so-note { margin: 8px 14px 0; padding: .45rem .6rem; border-radius: 10px; background: var(--rb-warn-bg); color: var(--rb-warn); font-size: .82rem; font-weight: 700; }
.so-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; flex-wrap: wrap; }
.so-total { font-size: 1.15rem; font-weight: 900; }
.so-total small { font-size: .7rem; color: var(--rb-ink-3); font-weight: 800; display: block; text-transform: uppercase; }
.so-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.so-actions .btn { min-height: 44px; font-weight: 800; border-radius: 12px; }
.so-resolution { font-size: .78rem; color: var(--rb-ink-2); padding: 0 14px 12px; }
.so-empty { text-align: center; padding: 2.5rem 1rem; color: var(--rb-ink-3); }
.so-empty i { font-size: 2.4rem; display: block; margin-bottom: .4rem; opacity: .6; }
.so-page .so-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 575.98px) { .so-page .so-list { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   ADMIN : serveurs
   ════════════════════════════════════════════════════════════════ */
.adm-srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.adm-srv {
    background: var(--rb-surface); color: var(--rb-ink); border: 1px solid var(--rb-line); border-radius: 16px;
    padding: 14px; box-shadow: var(--rb-elev); display: flex; flex-direction: column; gap: 10px;
}
.adm-srv.off { opacity: .7; }
.adm-srv-head { display: flex; gap: 10px; align-items: center; }
.adm-srv-av { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--rb-primary); flex-shrink: 0; font-size: 1.1rem; }
.adm-srv.off .adm-srv-av { background: var(--rb-ink-3); }
.adm-srv-name { font-weight: 900; font-size: 1rem; }
.adm-srv-sub { font-size: .78rem; color: var(--rb-ink-3); }
.adm-srv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.adm-srv-stats div { background: var(--rb-surface-2); border-radius: 10px; padding: 6px 8px; }
.adm-srv-stats small { display: block; font-size: .64rem; text-transform: uppercase; font-weight: 800; color: var(--rb-ink-3); }
.adm-srv-stats strong { font-size: .92rem; }
.adm-srv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-srv-actions .btn { border-radius: 10px; font-weight: 700; }
.adm-pin-reveal {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2rem; font-weight: 900;
    letter-spacing: .3em; text-align: center; padding: .6rem; border-radius: 12px; background: var(--rb-surface-2);
    border: 2px dashed var(--rb-primary); color: var(--rb-ink);
}

/* ════════════════════════════════════════════════════════════════
   MODE SOMBRE — couverture des écrans existants
   (complète les règles de theme.php ; Bootstrap 5.3 gère ses composants
   via data-bs-theme="dark")
   ════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] body { background: var(--rb-bg) !important; color: var(--rb-ink); }
html[data-bs-theme="dark"] .rb-topbar,
html[data-bs-theme="dark"] .pos-topbar { background: var(--rb-surface) !important; box-shadow: 0 1px 0 var(--rb-line) !important; }
html[data-bs-theme="dark"] .rb-topbar .topbar-title,
html[data-bs-theme="dark"] .rb-topbar .sidebar-toggle { color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .accordion-item { background-color: var(--rb-surface) !important; color: var(--rb-ink); border-color: var(--rb-line); }
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .input-group-text { background-color: var(--rb-surface-2) !important; color: var(--rb-ink) !important; border-color: var(--rb-line) !important; }
html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-body { color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary { color: var(--rb-ink-3) !important; }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select { background-color: var(--rb-surface-2) !important; color: var(--rb-ink) !important; border-color: var(--rb-line) !important; }
html[data-bs-theme="dark"] .form-control::placeholder { color: var(--rb-ink-3) !important; }
html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--rb-ink); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.05); }
html[data-bs-theme="dark"] .table > :not(caption) > * > * { border-color: var(--rb-line); }
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end { border-color: var(--rb-line) !important; }
html[data-bs-theme="dark"] .alert-warning { background: var(--rb-warn-bg); color: var(--rb-warn); border-color: transparent; }
html[data-bs-theme="dark"] .alert-success { background: var(--rb-ok-bg); color: var(--rb-ok); border-color: transparent; }
html[data-bs-theme="dark"] .alert-danger { background: var(--rb-err-bg); color: var(--rb-err); border-color: transparent; }
html[data-bs-theme="dark"] .alert-info { background: var(--rb-info-bg); color: var(--rb-info); border-color: transparent; }
html[data-bs-theme="dark"] .badge.bg-light { color: var(--rb-ink) !important; background: var(--rb-surface-3) !important; }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background: var(--rb-surface) !important; color: var(--rb-ink) !important; border-color: var(--rb-line) var(--rb-line) var(--rb-surface) !important; }
html[data-bs-theme="dark"] .btn-light { background: var(--rb-surface-3); border-color: var(--rb-line); color: var(--rb-ink); }
html[data-bs-theme="dark"] .btn-outline-dark { color: var(--rb-ink); border-color: var(--rb-line); }
html[data-bs-theme="dark"] hr { border-color: var(--rb-line); opacity: 1; }
html[data-bs-theme="dark"] #langMenu { background: var(--rb-surface); }

/* Surfaces inline héritées (style="background:#fff" etc.) dans les écrans historiques */
html[data-bs-theme="dark"] [style*="background:#fff"],
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background:#ffffff"],
html[data-bs-theme="dark"] [style*="background:white"],
html[data-bs-theme="dark"] [style*="background:#f8f9fa"],
html[data-bs-theme="dark"] [style*="background: #f8f9fa"],
html[data-bs-theme="dark"] [style*="background:#f0f4ff"],
html[data-bs-theme="dark"] [style*="background:#f5f5f5"],
html[data-bs-theme="dark"] [style*="background:#fafafa"],
html[data-bs-theme="dark"] [style*="background:#f1f5f9"],
html[data-bs-theme="dark"] [style*="background:#f8fafc"],
html[data-bs-theme="dark"] [style*="background:#e8f4fd"],
html[data-bs-theme="dark"] [style*="background:#f0f8ff"] { background: var(--rb-surface-2) !important; color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] [style*="background:#fff3cd"],
html[data-bs-theme="dark"] [style*="background:#fff8e1"] { background: var(--rb-warn-bg) !important; color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] [style*="background:#d1e7dd"] { background: var(--rb-ok-bg) !important; color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] [style*="color:#1a1a2e"],
html[data-bs-theme="dark"] [style*="color: #1a1a2e"],
html[data-bs-theme="dark"] [style*="color:#333"],
html[data-bs-theme="dark"] [style*="color:#111"],
html[data-bs-theme="dark"] [style*="color:#0f172a"],
html[data-bs-theme="dark"] [style*="color:#1e293b"] { color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] [style*="color:#555"],
html[data-bs-theme="dark"] [style*="color:#666"],
html[data-bs-theme="dark"] [style*="color:#888"],
html[data-bs-theme="dark"] [style*="color:#64748b"] { color: var(--rb-ink-3) !important; }

/* ── Impression : aucun élément d'interface flottante ───────────── */
@media print {
    .rb-toasts, #themeToggleBtn, #langFab, #langMenu, #pwaInstallBtn, .rb-prefs, .srv-bottom { display: none !important; }
    html[data-bs-theme="dark"] body { background: #fff !important; color: #000 !important; }
}

/* ── Réduction des animations si demandé par le système ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Mode sombre : composants spécifiques des écrans historiques ── */
html[data-bs-theme="dark"] .product-card,
html[data-bs-theme="dark"] .menu-card,
html[data-bs-theme="dark"] .sales-card,
html[data-bs-theme="dark"] .kpi-card,
html[data-bs-theme="dark"] .stat-card:not([class*="bg-"]) { background: var(--rb-surface) !important; color: var(--rb-ink) !important; border-color: var(--rb-line) !important; }
html[data-bs-theme="dark"] .sales-card-footer { background: var(--rb-surface-2) !important; color: var(--rb-ink-2) !important; border-color: var(--rb-line) !important; }
html[data-bs-theme="dark"] .sales-card-title,
html[data-bs-theme="dark"] .rb-section-title,
html[data-bs-theme="dark"] .pc-name,
html[data-bs-theme="dark"] .mc-name { color: var(--rb-ink) !important; }
html[data-bs-theme="dark"] .sales-stat-value { filter: brightness(1.35); }
html[data-bs-theme="dark"] .sales-stat-label,
html[data-bs-theme="dark"] .sales-card-subtitle { color: var(--rb-ink-3) !important; }
html[data-bs-theme="dark"] .pos-col1,
html[data-bs-theme="dark"] .pos-col2,
html[data-bs-theme="dark"] .pos-col3,
html[data-bs-theme="dark"] .pos-main { background: var(--rb-bg) !important; }
html[data-bs-theme="dark"] .pf-btn, html[data-bs-theme="dark"] .df-btn, html[data-bs-theme="dark"] .qf-chip, html[data-bs-theme="dark"] .tab-col3 { color: var(--rb-ink-2); background: var(--rb-surface-2); border-color: var(--rb-line); }
html[data-bs-theme="dark"] .order-card { background: var(--rb-surface) !important; color: var(--rb-ink) !important; border-color: var(--rb-line) !important; }
html[data-bs-theme="dark"] .order-card .oc-info, html[data-bs-theme="dark"] .order-card .text-primary { color: var(--rb-ink-2) !important; }

/* Écran PIN — accès personnel / admin et reprise de session (application installée) */
.pin-continue { display:flex; align-items:center; gap:.75rem; padding:.65rem .85rem; margin-top:.75rem; border-radius:14px;
    background: color-mix(in srgb, var(--rb-primary) 9%, transparent); border:1px solid color-mix(in srgb, var(--rb-primary) 30%, transparent);
    color: var(--rb-ink); text-decoration:none; text-align:left; }
.pin-continue:hover { background: color-mix(in srgb, var(--rb-primary) 15%, transparent); color: var(--rb-ink); }
.pin-continue-av { flex-shrink:0; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800;
    background: var(--rb-primary); color:#fff; }
.pin-continue-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.pin-continue-txt small { font-size:.72rem; color: var(--rb-ink-2); font-weight:600; }
.pin-continue-txt b { font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-divider { display:flex; align-items:center; gap:.75rem; margin:1rem 0 .75rem; color: var(--rb-ink-3); font-size:.75rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.pin-divider::before, .pin-divider::after { content:""; flex:1; height:1px; background: var(--rb-line); }
.pin-staff-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; border-radius:14px;
    border:1.5px solid var(--rb-line); background: var(--rb-surface); color: var(--rb-ink); font-weight:700; font-size:.92rem;
    text-decoration:none; transition: border-color .15s, background .15s, color .15s; }
.pin-staff-btn i { font-size:1.1rem; color: var(--rb-primary); }
.pin-staff-btn:hover { border-color: var(--rb-primary); color: var(--rb-primary); background: color-mix(in srgb, var(--rb-primary) 6%, transparent); }
.pin-install { display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem; font-size:.8rem; font-weight:600;
    color: var(--rb-ink-3); text-decoration:none; }
.pin-install:hover { color: var(--rb-primary); }
@media (display-mode: standalone) { .pin-install { display:none !important; } }

/* ── Serveur : statut de la facture, modification, impression ── */
.rb-status-missing { color: #6f42c1; background: rgba(111,66,193,.12); }
html[data-bs-theme="dark"] .rb-status-missing { color: #c4a8ff; background: rgba(111,66,193,.25); }
.srv-order-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.srv-sale-badge { font-weight: 800; }
.srv-mod-badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 800; color: #7a4b00; background: #fff3cd; border: 1px solid #ffc107; border-radius: 999px; padding: .1rem .5rem; }
html[data-bs-theme="dark"] .srv-mod-badge { color: #ffcd39; background: #3a2c08; border-color: #a37a00; }
.srv-order-inv { font-weight: 700; font-size: .78rem; color: var(--rb-ink-3); }
.srv-order.is-locked { opacity: .92; }
.srv-order.is-locked .srv-order-items { opacity: .8; }
.srv-order.is-editing { outline: 2px solid #f59e0b; outline-offset: 2px; }
.srv-order-lock { background: var(--rb-surface-2); color: var(--rb-ink-2); border: 1px dashed var(--rb-line); border-radius: 10px; padding: .45rem .6rem; font-size: .8rem; font-weight: 700; margin-top: 8px; }
.srv-order-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.srv-order-actions .btn { min-height: 44px; border-radius: 12px; font-size: .88rem; }
.srv-ofilters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: none; }
.srv-ofilters::-webkit-scrollbar { display: none; }
.srv-ofilters button { flex: 0 0 auto; border: 1px solid var(--rb-line); background: var(--rb-surface); color: var(--rb-ink-2); border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 700; }
.srv-ofilters button span { display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: .2rem; border-radius: 999px; background: var(--rb-surface-3); font-size: .72rem; }
.srv-ofilters button.active { background: var(--rb-primary); border-color: var(--rb-primary); color: #fff; }
.srv-ofilters button.active span { background: rgba(255,255,255,.25); color: #fff; }
.srv-edit-banner { display: flex; gap: .6rem; align-items: flex-start; background: #fff7e6; border: 1px solid #f59e0b; color: #7a4b00; border-radius: 12px; padding: .55rem .7rem; margin-bottom: .6rem; }
.srv-edit-banner i { font-size: 1.2rem; }
.srv-edit-banner small { display: block; font-weight: 500; opacity: .85; }
html[data-bs-theme="dark"] .srv-edit-banner { background: #2a2312; border-color: #a37a00; color: #ffcd39; }
.srv-cartbar.is-editing:not(:disabled) { background: #f59e0b; color: #111; }
.srv-editbar { display: flex; align-items: center; gap: .6rem; background: #fff7e6; border: 1.5px solid #f59e0b; color: #7a4b00; border-radius: 14px; padding: .55rem .7rem; margin-bottom: .7rem; position: sticky; top: .5rem; z-index: 5; box-shadow: 0 6px 18px rgba(245,158,11,.18); }
.srv-editbar > i { font-size: 1.3rem; }
.srv-editbar small { display: block; font-weight: 500; opacity: .85; font-size: .74rem; }
.srv-editbar .btn { white-space: nowrap; border-radius: 10px; }
@media (max-width: 420px) { .srv-editbar small { display: none; } }
html[data-bs-theme="dark"] .srv-editbar { background: #2a2312; border-color: #a37a00; color: #ffcd39; }
.srv-editbar > div { min-width: 0; }
.srv-editbar strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    .srv-editbar { flex-wrap: wrap; }
    .srv-editbar > div { flex: 1 1 calc(100% - 2.2rem); }
    .srv-editbar [data-save-edit] { flex: 1 1 auto; }
}

/* ── Serveur 2.2 : nouveau client en un geste, lien client, annulation ── */
.srv-client-item.srv-client-new { border: 1.5px dashed var(--rb-primary, #e8500a); background: color-mix(in srgb, var(--rb-primary, #e8500a) 8%, transparent); }
.srv-client-item.srv-client-new .ini { background: var(--rb-primary, #e8500a); color: #fff; }
.srv-client-link { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.srv-client-link:hover { color: var(--rb-primary, #e8500a); }
.srv-order-actions .btn-outline-danger { flex: 1; }

/* ── Multi-restaurants : établissement sur l'écran PIN ── */
.pin-venue { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; margin: -.25rem 0 .75rem; color: var(--rb-ink-2, #475569); }
.pin-venue a { font-weight: 600; margin-left: .35rem; }
.pin-venue-form { text-align: left; margin-top: .5rem; }