/* ── Scroll-to-top button ────────────────────────────────────────────────── */
#stt-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    color: var(--bar-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    z-index: 50;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease,
                background .15s, color .15s, border-color .15s;
}

#stt-btn:hover {
    background: rgb(var(--b600));
    color: #fff;
    border-color: rgb(var(--b600));
}

#stt-btn.stt-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Brand accent: Blue (default) ───────────────────────────────────────── */
:root {
    --b50: 239 246 255;
    --b100: 219 234 254;
    --b200: 191 219 254;
    --b400: 96 165 250;
    --b500: 59 130 246;
    --b600: 37 99 235;
    --b700: 29 78 216;
    --b800: 30 64 175;
    --b900: 30 58 138;
    --b950: 23 37 84;
}
html.accent-amber   { --b50:255 251 235;--b100:254 243 199;--b200:253 230 138;--b400:251 191 36;--b500:245 158 11;--b600:217 119 6;--b700:180 83 9;--b800:146 64 14;--b900:120 53 15;--b950:69 26 3; }
html.accent-emerald { --b50:236 253 245;--b100:209 250 229;--b200:167 243 208;--b400:52 211 153;--b500:16 185 129;--b600:5 150 105;--b700:4 120 87;--b800:6 95 70;--b900:6 78 59;--b950:2 44 34; }
html.accent-rose    { --b50:255 241 242;--b100:255 228 230;--b200:254 205 211;--b400:251 113 133;--b500:244 63 94;--b600:225 29 72;--b700:190 18 60;--b800:159 18 57;--b900:136 19 55;--b950:76 5 25; }
html.accent-violet  { --b50:245 243 255;--b100:237 233 254;--b200:221 214 254;--b400:167 139 250;--b500:139 92 246;--b600:124 58 237;--b700:109 40 217;--b800:91 33 182;--b900:76 29 149;--b950:46 16 101; }
html.accent-cyan    { --b50:236 254 255;--b100:207 250 254;--b200:165 243 252;--b400:34 211 238;--b500:6 182 212;--b600:8 145 178;--b700:14 116 144;--b800:21 94 117;--b900:22 78 99;--b950:8 51 68; }

/* ── Sidebar semantic vars (light / dark) ───────────────────────────────── */
:root {
    --sb-bg:          #ffffff;
    --sb-border:      #e2e8f0;
    --sb-logo-color:  #0f172a;
    --sb-logo-sub:    #64748b;
    --sb-text:        #475569;
    --sb-hover-bg:    #f1f5f9;
    --sb-hover-text:  #0f172a;
    --sb-group:       #94a3b8;
    --sb-user-bg:     #f8fafc;
    --sb-user-border: #e2e8f0;
    --sb-user-text:   #0f172a;
    --sb-user-sub:    #64748b;
    /* Content area */
    --page-bg:        #f8fafc;
    --bar-bg:         #ffffff;
    --bar-border:     #e2e8f0;
    --bar-text:       #0f172a;
    --bar-sub:        #64748b;
    /* Skeleton shimmer highlight */
    --skel-shine:     #e8edf2;
    /* POS theme */
    --pos-bg1:        #f0f4f8;
    --pos-bg2:        #ffffff;
    --pos-bg3:        #e9edf2;
    --pos-bd:         #e2e8f0;
    --pos-bd2:        #cbd5e1;
    --pos-tx1:        #94a3b8;
    --pos-tx2:        #64748b;
    --pos-tx3:        #334155;
    --pos-tx4:        #1e293b;
    --pos-tx5:        #0f172a;
    --pos-inp:        #f8fafc;
}
html.dark {
    --sb-bg:          #0f172a;
    --sb-border:      #1e293b;
    --sb-logo-color:  #f1f5f9;
    --sb-logo-sub:    #475569;
    --sb-text:        #94a3b8;
    --sb-hover-bg:    #1e293b;
    --sb-hover-text:  #f1f5f9;
    --sb-group:       #64748b;
    --sb-user-bg:     rgba(30,41,59,.6);
    --sb-user-border: rgba(51,65,85,.4);
    --sb-user-text:   #e2e8f0;
    --sb-user-sub:    #64748b;
    --page-bg:        #0f172a;
    --bar-bg:         #1e293b;
    --bar-border:     #334155;
    --bar-text:       #f1f5f9;
    --bar-sub:        #94a3b8;
    /* Skeleton shimmer highlight */
    --skel-shine:     #273349;
    /* POS theme */
    --pos-bg1:        #0d1117;
    --pos-bg2:        #13171e;
    --pos-bg3:        #0a0e14;
    --pos-bd:         #21262d;
    --pos-bd2:        #30363d;
    --pos-tx1:        #484f58;
    --pos-tx2:        #7d8590;
    --pos-tx3:        #c9d1d9;
    --pos-tx4:        #e6edf3;
    --pos-tx5:        #f0f6fc;
    --pos-inp:        #0d1117;
}

/* ── Nav link CSS classes (theme-aware via CSS vars) ────────────────────── */
.nav-lnk {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500;
    color: var(--sb-text);
    transition: background .15s, color .15s;
    cursor: pointer; white-space: nowrap; overflow: hidden;
    text-decoration: none;
}
.nav-lnk:hover { background: var(--sb-hover-bg); color: var(--sb-hover-text); }
.nav-lnk.active {
    background: rgb(var(--b600) / .12);
    color: rgb(var(--b600));
    font-weight: 600; cursor: default;
}
html.dark .nav-lnk.active {
    background: rgb(var(--b600));
    color: #fff;
    box-shadow: 0 1px 4px rgb(var(--b900) / .35);
}
/* Collapsed: icon-only */
.nav-lnk.icon-only { padding: 9px; justify-content: center; gap: 0; }
/* Group label */
.nav-group {
    padding: 20px 12px 5px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--sb-group); user-select: none;
}

/* ── Dark-mode content overrides ────────────────────────────────────────── */
html.dark .bg-white         { background-color: #1e293b !important; }
html.dark .bg-slate-50      { background-color: #0f172a !important; }
html.dark .bg-slate-100     { background-color: #334155 !important; }
html.dark .text-slate-900   { color: #f1f5f9 !important; }
html.dark .text-slate-800   { color: #e2e8f0 !important; }
html.dark .text-slate-700   { color: #cbd5e1 !important; }
html.dark .text-slate-600   { color: #94a3b8 !important; }
html.dark .text-slate-500   { color: #64748b !important; }
html.dark .text-slate-400   { color: #475569 !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-slate-100 { border-color: #1e293b !important; }
html.dark .divide-slate-100 > * + * { border-color: #334155 !important; }
html.dark .hover\:bg-slate-50:hover  { background-color: #1e293b !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
html.dark input:not([type=checkbox]):not([type=radio]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #475569 !important; }

/* ── Action icon buttons ─────────────────────────────────────────────────── */
.btn-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    transition: all .15s; cursor: pointer; flex-shrink: 0;
}
.btn-action:active { transform: scale(.95); }

/* Edit — brand color */
.btn-edit { background: rgb(var(--b50)/1); color: rgb(var(--b600)/1); border-color: rgb(var(--b200)/1); }
.btn-edit:hover { background: rgb(var(--b100)/1); border-color: rgb(var(--b300)/1); }
html.dark .btn-edit { background: rgb(var(--b900)/.18); color: rgb(var(--b400)/1); border-color: rgb(var(--b800)/.45); }
html.dark .btn-edit:hover { background: rgb(var(--b900)/.32); border-color: rgb(var(--b700)/.65); }

/* Delete — red */
.btn-delete { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
.btn-delete:hover { background: #fee2e2; border-color: #fca5a5; }
html.dark .btn-delete { background: rgba(239,68,68,.12); color: #fb7185; border-color: rgba(185,28,28,.35); }
html.dark .btn-delete:hover { background: rgba(239,68,68,.22); border-color: rgba(185,28,28,.55); }

/* Unlock — amber */
.btn-unlock { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.btn-unlock:hover { background: #fef3c7; border-color: #fcd34d; }
html.dark .btn-unlock { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(180,83,9,.35); }
html.dark .btn-unlock:hover { background: rgba(245,158,11,.22); border-color: rgba(180,83,9,.55); }

/* Stock history — cyan */
.btn-stock { background: #ecfeff; color: #0891b2; border-color: #a5f3fc; }
.btn-stock:hover { background: #cffafe; border-color: #67e8f9; }
html.dark .btn-stock { background: rgba(8,145,178,.12); color: #22d3ee; border-color: rgba(8,145,178,.35); }
html.dark .btn-stock:hover { background: rgba(8,145,178,.22); border-color: rgba(8,145,178,.55); }

/* Sales history — emerald */
.btn-sales { background: #f0fdf4; color: #059669; border-color: #a7f3d0; }
.btn-sales:hover { background: #dcfce7; border-color: #6ee7b7; }
html.dark .btn-sales { background: rgba(5,150,105,.12); color: #34d399; border-color: rgba(5,150,105,.35); }
html.dark .btn-sales:hover { background: rgba(5,150,105,.22); border-color: rgba(5,150,105,.55); }

/* View — ghost, brand on hover */
.btn-ghost-view { background: transparent; color: #94a3b8; border-color: transparent; }
.btn-ghost-view:hover { color: rgb(var(--b600)/1); background: rgb(var(--b50)/1); border-color: rgb(var(--b200)/1); }
html.dark .btn-ghost-view { color: #475569; }
html.dark .btn-ghost-view:hover { color: rgb(var(--b400)/1); background: rgb(var(--b900)/.2); border-color: rgb(var(--b800)/.4); }

/* Delete ghost — transparent, red on hover */
.btn-ghost-delete { background: transparent; color: #94a3b8; border-color: transparent; }
.btn-ghost-delete:hover { color: #ef4444; background: #fef2f2; border-color: #fecaca; }
html.dark .btn-ghost-delete { color: #475569; }
html.dark .btn-ghost-delete:hover { color: #fb7185; background: rgba(239,68,68,.12); border-color: rgba(185,28,28,.35); }

/* Deactivate — amber */
.btn-deactivate { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.btn-deactivate:hover { background: #fef3c7; border-color: #fcd34d; }
html.dark .btn-deactivate { background: rgba(217,119,6,.12); color: #fbbf24; border-color: rgba(180,83,9,.35); }
html.dark .btn-deactivate:hover { background: rgba(217,119,6,.22); border-color: rgba(180,83,9,.55); }

/* Activate — emerald */
.btn-activate { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.btn-activate:hover { background: #d1fae5; border-color: #6ee7b7; }
html.dark .btn-activate { background: rgba(5,150,105,.12); color: #34d399; border-color: rgba(4,120,87,.35); }
html.dark .btn-activate:hover { background: rgba(5,150,105,.22); border-color: rgba(4,120,87,.55); }

/* Confirm (text+icon button) — emerald */
.btn-confirm {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .625rem; border-radius: .5rem;
    font-size: .75rem; font-weight: 600;
    background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
    transition: all .15s; cursor: pointer;
}
.btn-confirm:hover { background: #d1fae5; border-color: #6ee7b7; }
.btn-confirm:active { transform: scale(.95); }
html.dark .btn-confirm { background: rgba(5,150,105,.12); color: #34d399; border-color: rgba(4,120,87,.35); }
html.dark .btn-confirm:hover { background: rgba(5,150,105,.22); border-color: rgba(4,120,87,.55); }

/* ── Typography & scrollbar ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui; }
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none; line-height: 1;
    display: inline-flex; align-items: center;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--b400) / .45); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--b500) / .8); }
html.dark ::-webkit-scrollbar-thumb { background: rgb(var(--b600) / .45); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(var(--b500) / .8); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--b400) / .45) transparent; }

/* ── Sticky table columns ────────────────────────────────────────────────── */
/*
 * Use .sticky-col-th on <th> and .sticky-col-td on <td> for right-side sticky
 * action columns.
 *
 * Light  → rows are #ffffff; sticky gets #f1f5f9 / #f8fafc (slightly off-white)
 * Dark   → rows are #1e293b; sticky gets #253347 / #1a2537 (slightly lighter)
 */
.sticky-col-th,
.sticky-col-td {
    position: sticky;
    right: 0;
    z-index: 1;
}

/* Light-mode: subtle cool-gray tint vs pure-white rows */
.sticky-col-th { background: #f1f5f9; }
.sticky-col-td { background: #f8fafc; }

/* Dark-mode: one step lighter than the --bar-bg (#1e293b) table rows */
html.dark .sticky-col-th { background: #1a2537; }
html.dark .sticky-col-td { background: #253347; }

/* Left separator + depth shadow */
.sticky-col-th,
.sticky-col-td {
    box-shadow:
        -1px 0 0 var(--bar-border),
        -8px 0 20px rgba(0, 0, 0, .07);
}

html.dark .sticky-col-th,
html.dark .sticky-col-td {
    box-shadow:
        -1px 0 0 var(--bar-border),
        -10px 0 28px rgba(0, 0, 0, .45);
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes ping {
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.modal-in  { animation: modalIn  .22s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

@keyframes modalOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(14px) scale(0.97); }
}
.modal-out { animation: modalOut .18s cubic-bezier(0.4, 0, 1, 1) both; }

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.dash-card { animation: slideInUp .4s cubic-bezier(.16,1,.3,1) both; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0); }
}
.toast-in { animation: toastIn .3s cubic-bezier(.16,1,.3,1) both; }

/* ── Data grids ──────────────────────────────────────────────────────────── */
/* Prevent cell text from wrapping to multiple lines in any data grid table  */
.overflow-x-auto table tbody td { white-space: nowrap; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
/* Resize cursor on drag handle */
.sidebar-drag-handle { cursor: col-resize; width: 12px; transition: background .15s; }
.sidebar-drag-handle:hover { background: rgb(var(--b600) / .07); }
.drag-grip {
    font-size: 14px !important; line-height: 1;
    color: transparent;
    transition: color .2s, transform .2s;
    user-select: none;
}
.sidebar-drag-handle:hover .drag-grip { color: rgb(var(--b600) / .55); }
.sidebar-drag-handle:active .drag-grip { color: rgb(var(--b600)); transform: scaleY(1.15); }

*:focus-visible { outline: 2px solid rgb(var(--b600)); outline-offset: 2px; }
#blazor-error-ui { display: none; }

/* ── Blazor reconnect modal ──────────────────────────────────────────────── */
#components-reconnect-modal {
    display: none;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Card */
.rcn-card {
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: 1.25rem;
    padding: 2.25rem 2rem;
    max-width: 21rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);
    animation: modalIn .25s cubic-bezier(.16, 1, .3, 1) both;
}

/* State panels — hidden by default, revealed by the modal's class */
.rcn-connecting, .rcn-failed, .rcn-rejected {
    display: none;
    flex-direction: column;
    align-items: center;
}
#components-reconnect-modal.components-reconnect-show    .rcn-connecting { display: flex; }
#components-reconnect-modal.components-reconnect-failed  .rcn-failed     { display: flex; }
#components-reconnect-modal.components-reconnect-rejected .rcn-rejected  { display: flex; }

/* Spinner */
@keyframes rcn-spin { to { transform: rotate(360deg); } }
.rcn-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid var(--bar-border);
    border-top-color: rgb(var(--b600));
    border-radius: 50%;
    animation: rcn-spin .75s linear infinite;
    margin-bottom: 1.25rem;
}

/* Icon (for failed / rejected) */
.rcn-icon {
    font-size: 42px !important;
    margin-bottom: 1rem;
}

/* Text */
.rcn-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bar-text);
    margin: 0 0 .5rem;
}
.rcn-sub {
    font-size: .8125rem;
    color: var(--bar-sub);
    line-height: 1.55;
    margin: 0 0 1.5rem;
}

/* Action button */
.rcn-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.25rem;
    background: rgb(var(--b600));
    color: #fff;
    border: none;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.rcn-btn:hover  { background: rgb(var(--b700)); }
.rcn-btn:active { transform: scale(.96); }

/* ── POS Daily Sales slide-up sheet ─────────────────────────────────────── */
@keyframes posSlideUp {
    from { transform: translateY(48px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes posSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(48px); opacity: 0; }
}
@keyframes posFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes posFadeOut { from { opacity: 1; } to { opacity: 0; } }
.pos-sheet-enter { animation: posSlideUp   .32s cubic-bezier(.16,1,.3,1) both; }
.pos-sheet-exit  { animation: posSlideDown .22s cubic-bezier(.4,0,1,1)   both; }
.pos-bd-enter    { animation: posFadeIn    .2s  ease both; }
.pos-bd-exit     { animation: posFadeOut   .25s ease both; }

/* ── POS Toast ────────────────────────────────────────────────────────────── */
@keyframes posToastIn {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.94); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);  }
}
@keyframes posToastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
.pos-toast {
    position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; align-items: center; gap: 12px;
    padding: 13px 20px 15px; border-radius: 14px; overflow: hidden;
    background: var(--pos-bg2); border: 1px solid var(--pos-bd);
    box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15);
    min-width: 260px; max-width: 520px;
    animation: posToastIn .28s cubic-bezier(.16,1,.3,1) both;
    pointer-events: none;
}
.pos-toast-icon { font-size: 22px !important; flex-shrink: 0; }
.pos-toast-msg  { font-size: 13px; font-weight: 600; color: var(--pos-tx5); line-height: 1.3; }
.pos-toast-bar  {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    transform-origin: left; animation: posToastProgress 3s linear both;
    border-radius: 0 0 14px 14px;
}
.pos-toast--ok .pos-toast-icon { color: #3fb950; }
.pos-toast--ok .pos-toast-bar  { background: #3fb950; }
.pos-toast--err .pos-toast-icon { color: #f87171; }
.pos-toast--err .pos-toast-bar  { background: #f87171; }

@keyframes posModalShake {
    0%,100% { transform: translateX(0)    rotate(0deg);   }
    15%     { transform: translateX(-9px) rotate(-.4deg); }
    30%     { transform: translateX( 8px) rotate( .4deg); }
    45%     { transform: translateX(-6px) rotate(-.3deg); }
    60%     { transform: translateX( 5px) rotate( .3deg); }
    75%     { transform: translateX(-3px) rotate(-.1deg); }
    90%     { transform: translateX( 2px) rotate(  0deg); }
}
.pos-modal-shake { animation: posModalShake .42s cubic-bezier(.36,.07,.19,.97) both; }

/* ── POS Function Key Buttons ────────────────────────────────────────────── */
.pos-fn-btn {
    --btn-rgb: 96, 165, 250;
    --btn-color: #60a5fa;
    width: calc(100% - 16px); margin: 3px 8px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 11px;
    border: 1px solid rgb(var(--btn-rgb)/.18);
    background: rgb(var(--btn-rgb)/.06);
    cursor: pointer; text-align: left;
    transition: background .16s, border-color .16s, box-shadow .16s, transform .1s;
}
.pos-fn-btn:hover {
    background: rgb(var(--btn-rgb)/.13);
    border-color: rgb(var(--btn-rgb)/.45);
    box-shadow: 0 4px 18px rgb(var(--btn-rgb)/.14);
}
.pos-fn-btn:active { transform: scale(.97); }

.pos-fn-icon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    background: rgb(var(--btn-rgb)/.14);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.pos-fn-icon .material-symbols-outlined { font-size: 21px; color: var(--btn-color); }
.pos-fn-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--btn-color); color: white;
    border: 2px solid var(--pos-bg2);
    border-radius: 999px; font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; letter-spacing: -.02em;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    animation: badgePop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.pos-fn-label { flex: 1; min-width: 0; }
.pos-fn-title { font-size: 13px; font-weight: 700; color: var(--btn-color); line-height: 1.25; }
.pos-fn-sub   { font-size: 10px; color: var(--pos-tx1); margin-top: 1px; line-height: 1.2; }
.pos-fn-key   {
    font-size: 10px; font-weight: 700; font-family: monospace; flex-shrink: 0;
    color: var(--btn-color); background: rgb(var(--btn-rgb)/.18);
    padding: 3px 7px; border-radius: 6px;
}

.pos-cart-row { cursor: pointer; border-bottom: 1px solid var(--pos-bd); transition: background .1s; }
.pos-cart-row:hover   { background: rgba(128,128,128,.06) !important; }
.pos-cart-row.pos-sel { background: rgba(88,166,255,.09) !important; }
.pos-cart-row.pos-sel:hover { background: rgba(88,166,255,.13) !important; }

.pos-qty-btn {
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--pos-bd2);
    background: var(--pos-bg3); color: var(--pos-tx3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; transition: all .1s;
}
.pos-qty-btn:hover { background: var(--pos-bd); color: var(--pos-tx5); }

.pos-del-btn {
    width: 28px; height: 28px; border-radius: 7px; border: none;
    background: transparent; color: var(--pos-tx1); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.pos-del-btn:hover { background: rgba(239,68,68,.15); color: #ef4444; }

.pos-settle-btn {
    width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg,#22c55e,#16a34a); color: white;
    font-size: 14px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; gap: 8px; transition: all .15s;
    box-shadow: 0 4px 12px rgba(34,197,94,.3);
}
.pos-settle-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,197,94,.4); }
.pos-settle-btn:disabled { background: var(--pos-bg3); color: var(--pos-tx1); box-shadow: none; cursor: not-allowed; }

.pos-clear-btn {
    width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--pos-bd2);
    cursor: pointer; background: transparent; color: var(--pos-tx3);
    font-size: 13px; font-weight: 600; display: flex; align-items: center;
    justify-content: center; gap: 6px; transition: all .15s;
}
.pos-clear-btn:hover:not(:disabled) { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: #ef4444; }
.pos-clear-btn:disabled { color: var(--pos-tx1); cursor: not-allowed; }

.pos-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.pos-modal-card {
    background: var(--pos-bg2); border: 1px solid var(--pos-bd); border-radius: 20px;
    box-shadow: 0 40px 80px rgba(0,0,0,.55); overflow: hidden;
}
#pos-cash-input::-webkit-outer-spin-button,
#pos-cash-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#pos-cash-input { -moz-appearance: textfield; }

/* POS structural elements */
.pos-outer    { background: var(--pos-bg1); color: var(--pos-tx3); }
.pos-panel    { background: var(--pos-bg2); }
.pos-topbar   { background: var(--pos-bg2); border-color: var(--pos-bd); }
.pos-bd       { border-color: var(--pos-bd) !important; }

/* POS bottom icon buttons */
.pos-bottom-btn {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border: none; cursor: pointer;
    background: transparent; color: var(--pos-tx2); transition: background .15s, color .15s;
}
.pos-bottom-btn:hover { background: var(--pos-bg3); color: var(--pos-tx4); }
.pos-bottom-btn--danger { color: #ef4444; }
.pos-bottom-btn--danger:hover { background: rgba(239,68,68,.1); color: #ef4444; }

/* POS Appearance popup */
.pos-ap-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--pos-tx2); margin-bottom: 8px;
}
.pos-ap-mode-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 4px; border-radius: 7px; border: 1px solid transparent; cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--pos-tx2);
    background: transparent; transition: background .12s, color .12s, border-color .12s;
}
.pos-ap-mode-btn:hover { color: var(--pos-tx4); background: rgba(128,128,128,.08); }
.pos-ap-mode-active {
    background: var(--pos-bg2) !important; color: var(--pos-tx5) !important;
    border-color: var(--pos-bd) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.pos-ap-accents {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
}
.pos-ap-accent-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: transparent; border: none; cursor: pointer; padding: 2px 0;
}
.pos-ap-accent-circle {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s;
}
.pos-ap-accent-circle.active {
    outline: 2px solid var(--pos-tx5); outline-offset: 2px; transform: scale(1.12);
}
.pos-ap-accent-label { font-size: 9px; color: var(--pos-tx2); }

/* ── Daily Sales expandable rows ─────────────────────────────────────────── */
.pos-ds-row {
    border-bottom: 1px solid var(--pos-bd); cursor: pointer; transition: background .12s;
}
.pos-ds-row:hover { background: rgba(129,140,248,.06) !important; }
.pos-ds-row.expanded { background: rgba(129,140,248,.08) !important; }
.pos-ds-chevron {
    display: inline-flex; align-items: center; transition: transform .22s cubic-bezier(.16,1,.3,1);
    color: var(--pos-tx1);
}
.pos-ds-chevron.open { transform: rotate(90deg); }

@keyframes dsExpand {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pos-ds-detail {
    background: var(--pos-bg1); border-bottom: 1px solid var(--pos-bd);
    animation: dsExpand .2s cubic-bezier(.16,1,.3,1);
}
.pos-ds-item-row { display: flex; align-items: center; padding: 8px 24px 8px 60px;
    border-bottom: 1px solid var(--pos-bd); gap: 12px; }
.pos-ds-item-row:last-child { border-bottom: none; }

.pos-void-btn::after {
    content: 'Void Transaction';
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) scale(.92);
    background: #0f172a;
    color: #f87171;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid rgba(239,68,68,.3);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s, transform .15s;
    z-index: 20;
}
.pos-void-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(239,68,68,.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 20;
}
.pos-void-btn:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.pos-void-btn:hover::before { opacity: 1; }

/* ── Flatpickr calendar theme (light + dark) ─────────────────────────────── */
.flatpickr-calendar {
    background:    var(--bar-bg) !important;
    border:        1px solid var(--bar-border) !important;
    border-radius: 14px !important;
    box-shadow:    0 8px 30px rgba(0,0,0,.14) !important;
    font-family:   Inter, 'Segoe UI', sans-serif !important;
    color:         var(--bar-text) !important;
    padding:       8px !important;
    min-width:     320px !important;
    overflow:      visible !important;
}
.flatpickr-days,
.dayContainer {
    min-width: 304px !important;
    max-width: 304px !important;
    width:     304px !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: var(--bar-border) !important;
    border-top-color:    var(--bar-border) !important;
}

/* ── Month / year navigation header ──────────────────────────────────────── */

/* Turn the months bar into a proper flex row so arrows flank the selects */
.flatpickr-months {
    display:     flex !important;
    align-items: center !important;
    gap:         2px !important;
    padding:     4px 0 6px !important;
}

/* Prev / next arrows become static flex items — no longer absolute */
.flatpickr-prev-month,
.flatpickr-next-month {
    position:        static !important;
    top:             auto !important;
    left:            auto !important;
    right:           auto !important;
    flex-shrink:     0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           28px !important;
    height:          28px !important;
    padding:         4px !important;
    border-radius:   8px !important;
    fill:            var(--bar-sub) !important;
    color:           var(--bar-sub) !important;
    transition:      background .15s !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover { background: var(--sb-hover-bg) !important; }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--bar-text) !important; }

/* Month container takes remaining space; allow overflow for select popups */
.flatpickr-months .flatpickr-month {
    flex:       1 !important;
    overflow:   visible !important;
    height:     auto !important;
    background: transparent !important;
}

/* Center month + year selects */
.flatpickr-current-month {
    position:        static !important;
    left:            auto !important;
    width:           auto !important;
    height:          auto !important;
    padding:         0 !important;
    line-height:     normal !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    font-size:       13px !important;
    font-weight:     700 !important;
    color:           var(--bar-text) !important;
    text-align:      center !important;
}

/* Shared style for both month <select> and injected year <select> */
.fp-nav-sel {
    appearance:         auto !important;
    -webkit-appearance: auto !important;
    background:    var(--bar-bg) !important;
    color:         var(--bar-text) !important;
    border:        1px solid var(--bar-border) !important;
    border-radius: 8px !important;
    padding:       3px 8px !important;
    font-size:     13px !important;
    font-weight:   700 !important;
    font-family:   inherit !important;
    cursor:        pointer !important;
    outline:       none !important;
    line-height:   1.4 !important;
    transition:    border-color .15s !important;
}
.fp-nav-sel:hover,
.fp-nav-sel:focus { border-color: rgb(var(--b500)) !important; }

/* Hide the original year input and its spin-arrows (replaced by fp-yr-sel) */
.flatpickr-current-month input.cur-year { display: none !important; }
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown { display: none !important; }
.flatpickr-current-month .numInputWrapper {
    width:      auto !important;
    background: transparent !important;
}
.numInputWrapper:hover { background: transparent !important; }

/* ── Day grid ─────────────────────────────────────────────────────────────── */
.flatpickr-weekdays            { background: transparent !important; }
span.flatpickr-weekday {
    background:     transparent !important;
    color:          var(--bar-sub) !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}
.flatpickr-day {
    color:         var(--bar-text) !important;
    border-radius: 8px !important;
    font-size:     13px !important;
}
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.today) {
    background:   rgb(var(--b500)/.12) !important;
    border-color: transparent !important;
    color:        rgb(var(--b700)) !important;
}
.flatpickr-day.today:not(.selected) {
    border-color: rgb(var(--b500)) !important;
    color:        rgb(var(--b600)) !important;
    font-weight:  700 !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background:   rgb(var(--b600)) !important;
    border-color: rgb(var(--b600)) !important;
    color:        #fff !important;
    font-weight:  700 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--bar-sub) !important; opacity: .4 !important; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay            { color: var(--bar-sub) !important; opacity: .45 !important; }

/* ── Mobile responsive — admin pages ────────────────────────────────────── */
@media (max-width: 639px) {

    /* Ensure all data tables scroll horizontally */
    .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Dashboard stat cards — stack to 2 columns on mobile */
    .dash-card { min-width: 0; }

    /* Page headers: wrap action buttons below title */
    .page-header-row {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Filter/search bars: full-width on mobile */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .filter-bar input,
    .filter-bar select { width: 100% !important; }

    /* Modal / dialog panels: full width on mobile */
    .modal-in { width: 100% !important; max-width: calc(100vw - 24px) !important; }

    /* Flatpickr: keep calendar visible on mobile */
    .flatpickr-calendar { min-width: 280px !important; }
    .flatpickr-days, .dayContainer {
        min-width: 260px !important;
        max-width: 260px !important;
        width:     260px !important;
    }

    /* Scroll-to-top button: smaller bottom offset on mobile */
    #stt-btn { bottom: 16px; right: 16px; }
}