/* =====================================================================================================
   RestoQR theme: crisp onyx / white / royal-blue on top of Bootstrap 5.3, light + dark, RTL-safe (logical
   properties only), motion that respects prefers-reduced-motion. Loaded after Bootstrap on every page.
   Contrast (WCAG AA 4.5:1 for text): white on #2563EB 5.17:1 · #1D4ED8 on white 6.70:1 · #1E40AF on white
   8.72:1 · #0B0B0F on #F7F8FA 18.6:1 · dark: #F5F5F7 on #0A0A0B 18.1:1 · #60A5FA on #141417 7.3:1.
   Fills use --app-primary (always white text on it); brand-coloured TEXT uses --app-primary-text.
   #3B82F6 (--app-blue-500) is for large text, borders and graphics only.
   ===================================================================================================== */

:root,
[data-bs-theme=light] {
    --app-blue-700: #1E40AF;
    --app-blue-600: #2563EB;
    --app-blue-500: #3B82F6;
    --app-onyx: #0B0B0F;

    --app-primary: var(--app-blue-600);
    --app-primary-rgb: 37, 99, 235;
    --app-primary-hover: var(--app-blue-700);
    --app-primary-soft: #E8EFFE;
    --app-primary-text: #1D4ED8;
    --app-ink: var(--app-onyx);
    --app-surface: #FFFFFF;
    --app-surface-2: #F2F4F7;
    --app-page: #F7F8FA;
    --app-line: #E4E7EC;
    --app-shadow: 0 1px 2px rgba(11, 11, 15, .05), 0 8px 24px rgba(16, 24, 40, .07);
    --app-shadow-lift: 0 2px 4px rgba(11, 11, 15, .07), 0 16px 36px rgba(16, 24, 40, .13);
    /* Decorative (bars, stripes, icons). */
    --app-gradient: linear-gradient(120deg, #1E40AF 0%, #2563EB 55%, #3B82F6 100%);
    /* Behind white text: every stop keeps at least 5.17:1 with white. */
    --app-gradient-strong: linear-gradient(120deg, #1E3A8A 0%, #1E40AF 45%, #2563EB 100%);
    /* For text: both ends keep 4.5:1 on the page background. */
    --app-gradient-text: linear-gradient(120deg, #1E40AF 0%, #2563EB 100%);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-text-emphasis: var(--app-blue-700);
    --bs-primary-bg-subtle: var(--app-primary-soft);
    --bs-primary-border-subtle: #BFD3FB;
    --bs-success: #15803d;
    --bs-success-rgb: 21, 128, 61;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #b91c1c;
    --bs-danger-rgb: 185, 28, 28;
    --bs-info: #0369A1;
    --bs-info-rgb: 3, 105, 161;
    --bs-dark: #0B0B0F;
    --bs-dark-rgb: 11, 11, 15;
    --bs-body-color: #0B0B0F;
    --bs-body-color-rgb: 11, 11, 15;
    --bs-emphasis-color: #000;
    --bs-secondary-color: rgba(11, 11, 15, .66);
    --bs-body-bg: var(--app-surface);
    --bs-tertiary-bg: var(--app-page);
    --bs-tertiary-bg-rgb: 247, 248, 250;
    --bs-secondary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line);
    --bs-link-color: var(--app-primary-text);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: var(--app-blue-700);
    --bs-link-hover-color-rgb: 30, 64, 175;
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), .35);
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Arabic", Tahoma, Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

[data-bs-theme=dark] {
    /* Buttons keep #2563EB with white text; brand-coloured text switches to lighter blues. */
    --app-primary: var(--app-blue-600);
    --app-primary-rgb: 37, 99, 235;
    --app-primary-hover: var(--app-blue-700);
    --app-primary-soft: #14213F;
    --app-primary-text: #60A5FA;
    --app-ink: #F5F5F7;
    --app-surface: #141417;
    --app-surface-2: #1C1C21;
    --app-page: #0A0A0B;
    --app-line: #2A2A31;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
    --app-shadow-lift: 0 2px 4px rgba(0, 0, 0, .55), 0 16px 36px rgba(0, 0, 0, .5);
    --app-gradient-text: linear-gradient(120deg, #60A5FA 0%, #93C5FD 100%);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-text-emphasis: #93C5FD;
    --bs-primary-bg-subtle: var(--app-primary-soft);
    --bs-primary-border-subtle: #1E3A8A;
    --bs-info: #38BDF8;
    --bs-info-rgb: 56, 189, 248;
    --bs-body-color: #F5F5F7;
    --bs-body-color-rgb: 245, 245, 247;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: rgba(245, 245, 247, .7);
    --bs-body-bg: var(--app-surface);
    --bs-tertiary-bg: var(--app-page);
    --bs-tertiary-bg-rgb: 10, 10, 11;
    --bs-secondary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line);
    --bs-link-color: #60A5FA;
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color: #93C5FD;
    --bs-link-hover-color-rgb: 147, 197, 253;
    --bs-focus-ring-color: rgba(96, 165, 250, .45);
    color-scheme: dark;
}

/* ---------- Base ---------- */
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { font-family: var(--bs-font-sans-serif); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.bg-body-tertiary {
    background-color: var(--app-page) !important;
    background-image:
        radial-gradient(60rem 30rem at 110% -10%, rgba(var(--app-primary-rgb), .08), transparent 60%),
        radial-gradient(50rem 26rem at -10% 110%, rgba(59, 130, 246, .06), transparent 60%);
    background-attachment: fixed;
}
h1, h2, h3, .h1, .h2, .h3, .display-6 { letter-spacing: -.01em; font-weight: 700; }
::selection { background: rgba(var(--app-primary-rgb), .22); }
.amount { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plate {
    display: inline-block; padding: .05em .45em; border: 2px solid currentColor; border-radius: .35rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: .04em;
}

/* Keyboard focus is always clearly visible. */
:focus-visible { outline: 3px solid rgba(var(--app-primary-rgb), .55); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--app-primary-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .22);
}
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-control, .form-select { border-radius: .65rem; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; border-radius: .7rem; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:not(:disabled):active { transform: scale(.97); }
.btn-primary {
    --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
    box-shadow: 0 4px 14px rgba(var(--app-primary-rgb), .28);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 6px 20px rgba(var(--app-primary-rgb), .38); transform: translateY(-1px); }
.btn-outline-primary {
    --bs-btn-color: var(--app-primary-text); --bs-btn-border-color: rgba(var(--app-primary-rgb), .55);
    --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover);
}
.btn-dark {
    --bs-btn-bg: var(--app-ink); --bs-btn-border-color: var(--app-ink); --bs-btn-color: var(--app-surface);
    --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-bg: var(--app-ink); --bs-btn-disabled-border-color: var(--app-ink); --bs-btn-disabled-color: var(--app-surface);
}
.btn-outline-dark {
    --bs-btn-color: var(--app-ink); --bs-btn-border-color: var(--app-line);
    --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-hover-border-color: rgba(var(--app-primary-rgb), .45); --bs-btn-hover-color: var(--app-ink);
    --bs-btn-active-bg: var(--app-primary-soft); --bs-btn-active-color: var(--app-ink); --bs-btn-active-border-color: var(--app-primary);
    background: var(--app-surface);
}
.btn-success { --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--app-line); --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: rgba(var(--app-primary-rgb), .4); }

/* ---------- Surfaces ---------- */
.card {
    --bs-card-border-color: var(--app-line);
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: calc(1rem - 1px);
    --bs-card-cap-bg: var(--app-surface-2);
    box-shadow: var(--app-shadow);
}
.card.border-danger { --bs-card-border-color: rgba(var(--bs-danger-rgb), .5); }
.card.border-warning { --bs-card-border-color: rgba(var(--bs-warning-rgb), .7); }
.list-group { --bs-list-group-border-color: var(--app-line); --bs-list-group-border-radius: 1rem; }
.table { --bs-table-border-color: var(--app-line); }
.table-light { --bs-table-bg: var(--app-surface-2); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--app-line); }
.text-bg-light { background-color: var(--app-surface-2) !important; color: var(--bs-body-color) !important; }
.modal { --bs-modal-border-radius: 1.25rem; --bs-modal-border-color: transparent; --bs-modal-bg: var(--app-surface); }
.dropdown-menu { --bs-dropdown-border-color: var(--app-line); --bs-dropdown-border-radius: .9rem; --bs-dropdown-link-active-bg: var(--app-primary); box-shadow: var(--app-shadow-lift); }
.alert { border-radius: .9rem; border-width: 0; border-inline-start: 4px solid currentColor; box-shadow: var(--app-shadow); }
.badge { font-weight: 650; letter-spacing: .01em; }
.badge.rounded-pill, .badge.fs-6 { border-radius: 999px; padding: .45em .9em; }
.text-bg-warning { color: #1f1300 !important; }
.text-bg-info, .text-bg-primary { color: #fff !important; }
[data-bs-theme=dark] .text-bg-info { color: var(--app-onyx) !important; }
.progress { --bs-progress-bar-bg: var(--app-primary); background-color: var(--app-surface-2); }
.progress-bar { background-image: var(--app-gradient); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }

/* Interactive cards lift a little under the pointer. */
a.card, .branch-choice, .menu-item {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
    a.card:hover, .branch-choice:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-lift); }
}

/* ---------- App bars ---------- */
.app-header {
    background: color-mix(in srgb, var(--app-surface) 88%, transparent) !important;
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--app-line) !important;
    position: relative;
}
.app-header::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--app-gradient); opacity: .9;
}
.app-header .nav-link { border-radius: 999px; padding-inline: .85rem !important; font-weight: 600; color: var(--bs-secondary-color); transition: background-color .2s ease, color .2s ease; }
.app-header .nav-link:hover { color: var(--bs-body-color); background: var(--app-surface-2); }
.app-header .nav-link.active, .app-header .nav-link.show { color: var(--app-primary-text) !important; background: var(--app-primary-soft); }
.brand-mark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.02em; }
.brand-mark::before {
    content: ""; inline-size: 1.75rem; block-size: 1.75rem; border-radius: .55rem; flex-shrink: 0;
    background: var(--app-gradient);
    -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat;
}
.text-gradient { background: var(--app-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.admin-header { background: linear-gradient(120deg, #0B0B0F 0%, #111827 55%, #1E3A8A 100%) !important; }
.admin-header::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--app-gradient); }
.admin-header { position: relative; }
.admin-header .nav-link.active { color: #fff !important; background: rgba(255, 255, 255, .14); border-radius: 999px; }
.admin-header .nav-link { border-radius: 999px; padding-inline: .85rem !important; }

/* ---------- Dashboard tiles: alternate blue / onyx accents ---------- */
.stat-grid > * > .card { border: 0; position: relative; overflow: hidden; }
.stat-grid > * > .card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--tile-bar, var(--app-primary)); }
.stat-grid > * { --tile-bar: var(--app-blue-600); --tile: var(--app-primary-text); --tile-soft: var(--app-primary-soft); }
.stat-grid > *:nth-child(4n+2) { --tile-bar: var(--app-ink); --tile: var(--app-ink); --tile-soft: var(--app-surface-2); }
.stat-grid > *:nth-child(4n+3) { --tile-bar: var(--app-blue-700); --tile: var(--bs-primary-text-emphasis); --tile-soft: var(--app-primary-soft); }
.stat-grid > *:nth-child(4n+4) { --tile-bar: var(--app-blue-500); --tile: var(--app-ink); --tile-soft: var(--app-surface-2); }
.stat-grid .card { background: linear-gradient(180deg, var(--tile-soft) 0%, var(--app-surface) 70%); }
.stat-grid .fs-2, .stat-grid .fs-4, .stat-grid .display-6 { color: var(--tile); }

/* ---------- Auth pages ---------- */
.auth-hero { text-align: center; margin-block: 1rem 1.5rem; }
.auth-hero .brand-mark { font-size: 1.5rem; }
.auth-hero .brand-mark::before { inline-size: 2.5rem; block-size: 2.5rem; }

/* ---------- Locked feature ---------- */
.feature-locked-icon { font-size: 3rem; display: inline-grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: 50%; background: var(--app-primary-soft); }
.feature-locked.card { background: linear-gradient(135deg, var(--app-primary-soft), var(--app-surface)); }

/* ---------- Order progress (guest order page) ---------- */
.order-progress { display: flex; gap: .4rem; margin-block: 1rem .25rem; list-style: none; padding: 0; }
.order-progress li { flex: 1; text-align: center; font-size: .75rem; color: var(--bs-secondary-color); }
.order-progress li::before {
    content: ""; display: block; height: 6px; border-radius: 999px; margin-bottom: .35rem;
    background: var(--app-line); transition: background-color .4s ease;
}
[data-status=Pending] .order-progress li:nth-child(-n+1)::before,
[data-status=Accepted] .order-progress li:nth-child(-n+1)::before,
[data-status=Preparing] .order-progress li:nth-child(-n+2)::before,
[data-status=Ready] .order-progress li:nth-child(-n+3)::before,
[data-status=Served] .order-progress li:nth-child(-n+4)::before { background: var(--app-gradient); }
[data-status=Pending] .order-progress li:nth-child(1),
[data-status=Preparing] .order-progress li:nth-child(2),
[data-status=Ready] .order-progress li:nth-child(3),
[data-status=Served] .order-progress li:nth-child(4) { color: var(--bs-body-color); font-weight: 700; }
[data-status=Preparing] .order-progress li:nth-child(2)::before,
[data-status=Pending] .order-progress li:nth-child(1)::before { animation: progress-glow 1.6s ease-in-out infinite; }
[data-status=Cancelled] .order-progress, [data-status=AwaitingPayment] .order-progress { display: none; }

/* =====================================================================================================
   Motion
   ===================================================================================================== */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: translateY(0); } 30% { transform: translateY(-6px); } 60% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--pulse, var(--app-primary-rgb)), .45); } 100% { box-shadow: 0 0 0 12px rgba(var(--pulse, var(--app-primary-rgb)), 0); } }
@keyframes progress-glow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Page content enters gently; lists stagger their first items. */
main > .alert, .flash .alert { animation: slide-down .35s ease-out both; }
.stagger > *, .menu-section .list-group > .menu-item, .branch-list > *, .row.g-3 > [class*=col] > .card, .row.g-4 > [class*=col] > .card {
    animation: rise-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.stagger > *:nth-child(2), .menu-section .list-group > .menu-item:nth-child(2), .branch-list > *:nth-child(2), .row > [class*=col]:nth-child(2) > .card { animation-delay: .04s; }
.stagger > *:nth-child(3), .menu-section .list-group > .menu-item:nth-child(3), .branch-list > *:nth-child(3), .row > [class*=col]:nth-child(3) > .card { animation-delay: .08s; }
.stagger > *:nth-child(4), .menu-section .list-group > .menu-item:nth-child(4), .branch-list > *:nth-child(4), .row > [class*=col]:nth-child(4) > .card { animation-delay: .12s; }
.stagger > *:nth-child(5), .menu-section .list-group > .menu-item:nth-child(5), .branch-list > *:nth-child(5), .row > [class*=col]:nth-child(5) > .card { animation-delay: .16s; }
.stagger > *:nth-child(n+6), .menu-section .list-group > .menu-item:nth-child(n+6), .branch-list > *:nth-child(n+6), .row > [class*=col]:nth-child(n+6) > .card { animation-delay: .2s; }

/* Dialogs rise and settle instead of only fading. */
.modal.fade .modal-dialog { transform: translateY(28px) scale(.97); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .45; }

/* Status and counters pop when they change (classes added by scripts). */
.status-pop { animation: pop .45s cubic-bezier(.2, .8, .2, 1); }
.badge.live-dot { position: relative; padding-inline-start: 1.6em; }
.badge.live-dot::before {
    content: ""; position: absolute; inset-inline-start: .65em; top: 50%; inline-size: .5em; block-size: .5em; margin-top: -.25em;
    border-radius: 50%; background: currentColor; animation: progress-glow 1.4s ease-in-out infinite;
}

/* Live boards re-render on every change: only cards that just appeared animate (marked .is-new by live-board.js). */
[data-live-board] .card:not(.is-new), [data-live-board] .row > [class*=col] > .card:not(.is-new) { animation: none; }
[data-live-board] .row > [class*=col] > .card.is-new, [data-live-board] [data-key].is-new { animation: rise-in .5s cubic-bezier(.2, .8, .2, 1) both; }
[data-live-board] .row > [class*=col] > .card.is-new.kds-pending, [data-live-board] .row > [class*=col] > .card.is-new.pickup-arrived,
[data-live-board] [data-key].is-new.kds-pending, [data-live-board] [data-key].is-new.pickup-arrived {
    animation: rise-in .5s cubic-bezier(.2, .8, .2, 1) both, pulse-ring 1.2s ease-out .5s 2;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .modal.fade .modal-dialog { transform: none; }
}