/**
 * Admin-POS2026 — Stylesheet
 *
 * Faithful replica of the LineOne-themed Vue POS SPA.
 * Inter font, indigo primary (#4F46E5), accent (#5F5AF6).
 * 70px fixed dark sidebar (Alt 8), no header bar.
 * No frameworks — vanilla CSS only.
 */

/* ── Google Fonts ─────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Theme Variables ──────────────────────────────────────── */

:root {
    /* Core brand (from LineOne base.css) */
    --color-primary:       #4f46e5;
    --color-primary-focus:  #4338ca;
    --color-accent:        #5f5af6;
    --color-accent-focus:  #4e49d6;

    /* Semantic */
    --color-secondary:     #64748b;
    --color-info:          #0ea5e9;
    --color-success:       #10b981;
    --color-warning:       #f59e0b;
    --color-error:         #ff4444;

    /* Status shades (bg / text) */
    --color-primary-bg:    rgba(79, 70, 229, 0.1);
    --color-primary-bg2:   rgba(79, 70, 229, 0.2);
    --color-info-bg:       rgba(14, 165, 233, 0.1);
    --color-success-bg:    rgba(16, 185, 129, 0.1);
    --color-warning-bg:    rgba(245, 158, 11, 0.1);
    --color-error-bg:      rgba(255, 68, 68, 0.1);
    --color-secondary-bg:  rgba(100, 116, 139, 0.1);

    /* Nav icon fills */
    --nav-icon-fill:       #448dfd;
    --nav-icon-stroke:     #65768c;
    --nav-active-bg:       #5f5af6;
    --nav-active-color:    #fff;

    /* Surfaces (slate palette) */
    --slate-50:   #f8fafc;
    --slate-100:  #f1f5f9;
    --slate-150:  #e9eef5;
    --slate-200:  #e2e8f0;
    --slate-300:  #cbd5e1;
    --slate-400:  #94a3b8;
    --slate-500:  #64748b;
    --slate-600:  #475569;
    --slate-700:  #334155;
    --slate-800:  #1e293b;
    --slate-900:  #0f172a;

    /* Cashier */
    --cashier-confirm:       #53ce98;
    --cashier-confirm-hover: #35966b;
    --cashier-money-bg:      #99f6a1;
    --cashier-envelope-bg:   #ecebfb;
    --cashier-envelope-icon: #6360b6;
    --cashier-bill-bg:       #8ad1af;

    /* Crowd */
    --crowd-default-bg:      rgba(79, 70, 229, 0.1);
    --crowd-default-color:   #5550a2;
    --crowd-green-bg:        #e8f5d9;
    --crowd-green-color:     #5a7a30;
    --crowd-strong-bg:       #d4edaa;
    --crowd-strong-color:    #4a6e1f;
    --crowd-red-bg:          red;
    --crowd-red-color:       #fff;

    /* Primary (aliases used by radio-filters, buttons, pagination) */
    --primary-500:        #4f46e5;
    --primary-600:        #4338ca;

    /* Layout */
    --sidebar-width:      70px;
    --header-height:      0px;
    --main-pad:           16px;
    --main-mt:            16px;
    --sidebar-expanded:    240px;
    --main-ml:            calc(var(--sidebar-width) + var(--main-pad));
    --radius:             4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        9999px;

    /* Typography */
    /* TODO: Vue uses RobotoMono via @font-face. The font files are not
       available in this project. To match Vue exactly, download RobotoMono
       .woff2 files, place them in admin/public/fonts/, add @font-face
       declarations, and prepend 'RobotoMono' to --font-mono below. */
    --font-body: 'Poppins', ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        'Liberation Mono', 'Courier New', monospace;

    /* Shadows (LineOne defaults) */
    --shadow-soft:  0 3px 30px rgba(0, 0, 0, 0.04);
    --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
}


/* ── Reset (Tailwind Preflight) ───────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--slate-200);
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: var(--font-body);
    font-feature-settings: normal;
}

body {
    margin: 0;
    line-height: inherit;
    font-size: 15px;
    color: var(--slate-700);
    background-color: #efedfa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

hr { height: 0; color: inherit; border-top-width: 1px; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

a { color: inherit; text-decoration: inherit; }

b, strong { font-weight: 600; }

small { font-size: 80%; }

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

button, select { text-transform: none; }

button, [role="button"] { cursor: pointer; }

:disabled { cursor: default; }

input::placeholder, textarea::placeholder {
    opacity: 1;
    color: var(--slate-400);
}

img, svg, video, canvas {
    display: block;
    vertical-align: middle;
}

img, video { max-width: 100%; height: auto; }

[hidden] { display: none; }

table { border-collapse: collapse; border-spacing: 0; }

ul, ol { list-style: none; margin: 0; padding: 0; }


/* ── Sidebar ──────────────────────────────────────────────── */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 100;
    background: var(--slate-800);
    border-right: 1px solid var(--slate-700);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0;
    overflow: hidden;
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Expanded sidebar state (Alt 2 — 240px) ───────────── */
.sidebar.expanded {
    width: 240px;
}

/* Fixed-height header prevents layout shift while logo/crowd load */
.sidebar-header {
    min-height: 124px;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar-logo {
    padding: 0 4px 6px;
    padding-left: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    cursor: pointer;
}

.sidebar-logo img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    object-fit: contain;
    background: var(--color-accent);
    border-radius: var(--radius-md);
    padding: 6px;
    transition: opacity 0.3s ease, transform 500ms ease-in-out;
}

.sidebar-logo img:hover {
    transform: rotate(360deg);
}

.sidebar-logo .logo-label {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 80ms ease, max-width 80ms ease;
}
.sidebar.expanded .sidebar-logo .logo-label {
    opacity: 1;
    max-width: 200px;
    transition: opacity 200ms ease 120ms, max-width 320ms ease;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    width: 42px;
    min-width: 42px;
    text-align: center;
}

.sidebar-nav {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 13px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--slate-600) transparent;
    transition: padding 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--slate-600);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar.expanded .sidebar-nav {
    padding: 0 14px 8px;
}

.sidebar-nav li {
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 44px;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--slate-400);
    transition: background var(--transition-base), color var(--transition-base),
        padding 320ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    gap: 12px;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 11px;
}
.sidebar.expanded .sidebar-nav .nav-link {
    padding-left: 14px;
}

/* Nav label (visible only when expanded) */
.sidebar-nav .nav-link .nav-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 80ms ease;
}
.sidebar.expanded .sidebar-nav .nav-link .nav-label {
    opacity: 1;
    transition: opacity 200ms ease 140ms;
}

@keyframes fadeInLabel {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sidebar-nav .nav-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Tabler webfont icons in sidebar */
.sidebar-nav .nav-link .ti {
    font-size: 22px;
    line-height: 1;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav .nav-link.activeRoute {
    background: var(--color-accent);
    color: #fff;
}

.sidebar-nav .nav-link.activeRoute svg {
    stroke: #fff;
}

.sidebar-nav .nav-link.activeRoute .ti {
    color: #fff;
}

/* Filled SVG icons (payments, prepaids, badge) get fill instead of stroke */
.sidebar-nav .nav-link svg[fill="#448dfd"] {
    fill: var(--slate-400);
}

.sidebar-nav .nav-link:hover svg[fill="#448dfd"] {
    fill: #fff;
}

.sidebar-nav .nav-link.activeRoute svg[fill="#448dfd"] {
    fill: #fff;
}

.nav-divider {
    width: 36px;
    height: 1px;
    background: var(--slate-700);
    margin: 4px 0;
}

/* ── Sidebar Nav Badge (unmatched payments count) ────── */
.sidebar-nav .nav-link {
    position: relative;
}
.nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--red-500, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    display: none;
    pointer-events: none;
}
.nav-badge.visible {
    display: block;
}
.sidebar.expanded .nav-badge {
    right: 10px;
}

/* ── Sidebar Separator ──────────────────────────────────── */
.sidebar-sep {
    width: 44px;
    height: 1px;
    background: var(--slate-700);
    margin: 8px 13px;
    flex-shrink: 0;
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1),
        margin 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar.expanded .sidebar-sep {
    width: calc(100% - 28px);
    margin: 8px 14px;
}

/* ── Sidebar Crowd Indicator ──────────────────────────────── */
.sidebar-crowd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    width: 100%;
    padding-top: 4px;
    transition: opacity var(--transition-fast);
}
.sidebar-crowd:hover { opacity: 0.85; }

.sidebar-crowd-number-wrap {
    position: relative;
    display: inline-block;
}

.sidebar-crowd-number {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #a5b4fc;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.sidebar-crowd-number.visible {
    opacity: 1;
}

.sidebar-crowd-q-badge {
    position: absolute;
    top: -6px;
    left: calc(100% + 1px);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fbbf24;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}
.sidebar-crowd-q-badge.visible {
    opacity: 1;
}

.sidebar-crowd-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
    line-height: 1;
}

/* Crowd color states — bright pastels for dark sidebar */
.sidebar-crowd.green  .sidebar-crowd-number { color: #86efac; }
.sidebar-crowd.orange .sidebar-crowd-number { color: #fdba74; }
.sidebar-crowd.strong .sidebar-crowd-number { color: #fde68a; }
.sidebar-crowd.red    .sidebar-crowd-number { color: #fca5a5; }



/* ── Crowd Alert Modal ────────────────────────────────────── */

.crowd-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: crowdAlertFadeIn 0.2s ease-out;
}

@keyframes crowdAlertFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.crowd-alert-modal {
    background: #fff;
    border-radius: 16px;
    width: min(420px, 90vw);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: crowdAlertSlideIn 0.25s ease-out;
}

@keyframes crowdAlertSlideIn {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.crowd-alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    position: relative;
    overflow: hidden;
    background: #e63946;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.crowd-alert-voronoi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: blur(8px);
    transform: scale(1.15);
}

.crowd-alert-header > *:not(canvas) {
    position: relative;
    z-index: 1;
}

.crowd-alert-header svg {
    flex-shrink: 0;
}

.crowd-alert-body {
    padding: 28px 24px;
}

.crowd-alert-message {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--slate-700);
    white-space: pre-line;
}

.crowd-alert-actions {
    display: flex;
    gap: 10px;
    padding: 8px 24px 28px;
    justify-content: flex-end;
}

.crowd-alert-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.crowd-alert-btn-close {
    background: var(--slate-100);
    color: var(--slate-700);
}
.crowd-alert-btn-close:hover {
    background: var(--slate-200);
}

.crowd-alert-btn-snooze {
    background: var(--color-primary);
    color: #fff;
}
.crowd-alert-btn-snooze:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
}

/* Queue question (under-target & slow-pace alerts) */
.crowd-alert-question {
    font-weight: 600;
    font-size: 15px;
    color: var(--slate-800);
    margin: 24px 24px 8px;
    line-height: 1.4;
}

.crowd-alert-btn-queue-yes {
    background: #ef4444;
    color: #fff;
}
.crowd-alert-btn-queue-yes:hover {
    background: #dc2626;
}

.crowd-alert-btn-queue-no {
    background: var(--slate-100);
    color: var(--slate-700);
}
.crowd-alert-btn-queue-no:hover {
    background: var(--slate-200);
}

/* Queue size grid (6 options: 0, ~2, ~5, ~10, ~20, 20+) */
.crowd-alert-queue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 24px 24px;
}
.crowd-alert-btn-queue-size {
    padding: 12px 8px;
    border: 2px solid var(--slate-200);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    background: #fff;
    color: var(--slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
}
.crowd-alert-btn-queue-size:hover {
    border-color: var(--slate-400);
    background: var(--slate-50);
}
.crowd-alert-btn-queue-warn {
    border-color: #fecaca;
    color: #dc2626;
}
.crowd-alert-btn-queue-warn:hover {
    border-color: #ef4444;
    background: #fef2f2;
}

/* ── Boring Game Overlay ──────────────────────────────────── */

.boring-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
}

.boring-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.boring-overlay.boring-fade-out {
    opacity: 0;
    pointer-events: none;
}

.boring-modal {
    background: #fff;
    border-radius: 16px;
    width: min(460px, 92vw);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 68, 68, 0.15);
    overflow: hidden;
    animation: boringSlideIn 0.3s ease-out;
}

@keyframes boringSlideIn {
    from { transform: translateY(30px) scale(0.94); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Header — reuses crowd-alert-header + Voronoi */
.boring-header {
    font-size: 16px;
}

.boring-body {
    padding: 24px 28px 16px;
}

.boring-stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 20px;
}

.boring-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 12px 16px;
    background: var(--slate-50);
    border-radius: 10px;
    border: 1px solid var(--slate-150);
}

.boring-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--slate-800);
    line-height: 1;
}

.boring-stat-bad {
    color: var(--color-error);
}

.boring-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boring-message {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--slate-600);
}

.boring-message strong {
    color: var(--slate-800);
    font-weight: 600;
}

.boring-message em {
    font-style: italic;
    color: var(--color-error);
    font-weight: 500;
}

/* Progress bar */
.boring-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.boring-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--slate-100);
    border-radius: 4px;
    overflow: hidden;
}

.boring-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-error), #ff8a65);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.boring-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-500);
    min-width: 50px;
    text-align: right;
}

/* Button area */
.boring-actions {
    padding: 12px 28px 24px;
}

.boring-btn {
    position: relative;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-error);
    color: #fff;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

.boring-btn:hover:not(:disabled) {
    background: #d32f2f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}

.boring-btn:active:not(:disabled) {
    transform: translateY(0);
}

.boring-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Cooldown animation — progress bar sweeps across button background */
.boring-btn-cooldown {
    background: var(--slate-400);
}

.boring-btn-counting::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    animation: boringCooldownSweep var(--cooldown-duration, 1000ms) linear forwards;
}

@keyframes boringCooldownSweep {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

.boring-clicks-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
}

/* ── Boring Game Summary (Settings page) ── */
.boring-summary-tbl td { white-space: nowrap; }
.bs-sortable { cursor: pointer; user-select: none; }
.bs-sortable:hover { color: var(--primary); }
.bs-arrow { font-size: 11px; opacity: .7; }
.status--warning { background: #fff1e0; color: #c2410c; }

/* ── Sidebar User Section ─────────────────────────────────── */
.sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 25px 14px;
    max-height: 150px;
    overflow: hidden;
    transition: opacity 200ms ease 100ms, max-height 280ms ease, padding 280ms ease;
}
.sidebar.expanded .sidebar-user {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transition: opacity 120ms ease, max-height 250ms ease, padding 250ms ease;
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    border: none;
    cursor: default;
    margin-bottom: 6px;
}

.sidebar-user-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--slate-400);
    max-width: 62px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    text-transform: capitalize;
}

.sidebar-user-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.sidebar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: #ffb79b;
    background: transparent;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.sidebar-action:hover {
    background: transparent;
    color: #ff9a73;
}
.sidebar-action.logout:hover {
    color: #ff9a73;
}

/* ── Expanded User Row (visible when sidebar expanded) ──── */
.sidebar-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    width: 100%;
    flex-shrink: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, max-height 250ms ease, padding 250ms ease;
}
.sidebar.expanded .sidebar-user-row {
    opacity: 1;
    max-height: 120px;
    padding: 25px 14px;
    pointer-events: auto;
    transition: opacity 200ms ease 100ms, max-height 300ms ease, padding 300ms ease;
}
.sidebar-user-row .user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.sidebar-user-row .user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-200);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}
.sidebar-user-row .user-role {
    font-size: 10px;
    font-weight: 400;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sidebar-user-row .sidebar-handover {
    margin-top: 0;
    margin-left: auto;
}

/* ── Deploy Version Stamp ─────────────────────────────── */
/* ── POS in-context help hint (§11c) ─────────────────────────────── */
/* A small, calm explanation line under Save & Close telling the cashier why
   they can't close yet. Informational only; never a blocker. */
.pos-help-hint {
    margin-top: 8px;
    padding: 8px 12px;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    color: #4338ca;
    font-size: 13px;
    line-height: 1.4;
}

/* ── Avatar flyout (#userMenu) — anchored popover ───────────────── */
/* The flyout is a body-level child; give it a fixed anchor at the bottom-left
   (just above the sidebar user badge) with a high z-index so it is never
   clipped by any container. Hosts the logout action + the venue switcher. */
#userMenu:not(.hidden) {
    position: fixed;
    left: 12px;
    bottom: 64px;
    width: 240px;
    z-index: 4000;
}
#userMenu .popper-box {
    background: #fff;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .20);
    overflow: hidden;
}

/* ── Cross-venue switcher (nexus SSO) ───────────────────────────── */
/* The switcher lives INSIDE the avatar flyout (#userMenu), which is a
   body-level, unclipped, high-z-index popover — so no container clipping and
   no separate trigger button. It appears only when JS confirms 2+ venues. */
.venue-switch {
    margin-top: 0;
    padding-top: 0;
}
.venue-switch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 6px;
}
.venue-switch-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--slate-400, #94a3b8);
    padding: 0 2px;
}
.venue-switch-close {
    border: 0;
    background: transparent;
    color: var(--slate-400, #94a3b8);
    font-size: 20px;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.venue-switch-close:hover { background: var(--color-secondary-bg, #f1f5f9); color: var(--slate-700, #334155); }
.venue-switch-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.venue-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--slate-700, #334155);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
}
.venue-switch-item:hover { background: var(--color-secondary-bg, #f1f5f9); }
.venue-switch-item.loading { opacity: .55; pointer-events: none; }
.venue-switch-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #6366f1);
    flex-shrink: 0;
}
.venue-switch-name { flex: 1 1 auto; }
/* The diagonal arrow is its own button: clicking it opens the venue in a NEW
   tab, while clicking the rest of the row opens it in the SAME tab. */
.venue-switch-go {
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--slate-400, #94a3b8);
    font-size: 15px;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.venue-switch-go:hover {
    background: color-mix(in srgb, var(--color-accent, #6366f1) 16%, white);
    color: var(--color-accent, #6366f1);
}
/* Letter-badge on the avatar telling the user which venue they're in and that a
   cross-venue switch is available (Google-accounts style). Shows 1-2 letters
   (A = Antwerpen, Ni = Nice, Na = Nantes, Dx = Dubai, Dl = Dublin, B = Brussels). */
.venue-switch-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--color-accent, #6366f1);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
.sidebar-user-avatar { position: relative; }

.sidebar-version {
    width: 100%;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--slate-400);
    text-align: center;
    padding: 6px 0 10px;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.03em;
}

/* Register status indicator (managers only) */
.sidebar-register-status {
    display: flex;
    padding: 0 12px;
    font-size: 11px;
    color: var(--slate-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    gap: 6px;
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    transition: opacity 120ms ease, max-height 250ms ease, padding 250ms ease;
}
.sidebar.expanded .sidebar-register-status {
    opacity: 1;
    max-height: 40px;
    padding: 6px 12px;
    pointer-events: auto;
    transition: opacity 200ms ease 100ms, max-height 300ms ease, padding 300ms ease;
}
.register-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.register-status-dot.open { background: #22c55e; }
.register-status-dot.counting { background: #f59e0b; }
.register-status-dot.closed { background: #94a3b8; }


/* Mobile sidebar */
@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 300ms ease;
        z-index: 1060;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1055;
    }
}


/* ── Header Bar (REMOVED — elements moved to sidebar) ───── */

.header {
    display: none;
}

.header-container,
.header-left,
.header-right {
    display: none;
}

.burger-btn {
    display: none;
    background: var(--slate-800, #1e293b);
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.burger-btn:hover {
    background: var(--slate-700, #334155);
}

@media (max-width: 767.98px) {
    .burger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1070;
    }
}


/* ── Cashier Button (legacy — no longer in header) ────────── */

.cashier-btn {
    display: none;
}



/* ── Page Container / Layout ──────────────────────────────── */

.page-container {
    margin-top: var(--main-pad);
    margin-left: var(--main-ml);
    margin-right: var(--main-pad);
    margin-bottom: var(--main-pad);
    padding: 0;
    min-height: calc(100vh - var(--main-pad) * 2);
    transition: margin-left 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded sidebar pushes content right */
.sidebar.expanded ~ .page-container {
    margin-left: calc(var(--sidebar-expanded) + var(--main-pad));
}

@media (max-width: 767.98px) {
    .page-container {
        margin-top: 50px;
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 0;
    }
}

/* Login body — no sidebar / header */
.login-body {
    min-height: 100vh;
}

.login-body .page-container {
    margin: 0;
    padding: 0;
    min-height: auto;
}


/* ── Cards ────────────────────────────────────────────────── */

.card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--slate-150);
    padding: 16px 20px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--slate-150);
}

.card-header h2,
.card-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--slate-800);
    margin: 0;
}

.card-body {
    padding: 0;
}


/* ── Buttons ──────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base),
        border-color var(--transition-base), box-shadow var(--transition-base);
    outline: none;
    white-space: nowrap;
    text-decoration: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35);
}

.btn:disabled, .btn.disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Primary (indigo) */
.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-focus);
    border-color: var(--color-primary-focus);
}

/* Secondary (slate) */
.btn-secondary {
    background: var(--slate-200);
    color: var(--slate-700);
    border-color: var(--slate-200);
}

.btn-secondary:hover {
    background: var(--slate-300);
    border-color: var(--slate-300);
}

/* Outline */
.btn-outline {
    background: transparent;
    color: var(--slate-600);
    border-color: var(--slate-300);
}

.btn-outline:hover {
    background: var(--slate-100);
    border-color: var(--slate-400);
}

/* Success */
.btn-success {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}

.btn-success:hover {
    background: #0d9669;
    border-color: #0d9669;
}

/* Warning */
.btn-warning {
    background: var(--color-warning);
    color: #fff;
    border-color: var(--color-warning);
}

.btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
}

/* Danger / Error */
.btn-danger {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* Info */
.btn-info {
    background: var(--color-info);
    color: #fff;
    border-color: var(--color-info);
}

.btn-info:hover {
    background: #0284c7;
    border-color: #0284c7;
}

/* Ghost (icon-only or subtle) */
.btn-ghost {
    background: transparent;
    color: var(--slate-500);
    border: none;
    padding: 6px;
}

.btn-ghost:hover {
    color: var(--slate-700);
    background: var(--slate-100);
}

/* Sizes */
.btn-sm {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: var(--radius);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

.btn-full {
    width: 100%;
}

.btn-icon {
    padding: 8px;
    line-height: 1;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
}

/* Button groups */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }


/* ── Forms ────────────────────────────────────────────────── */

.form-group {
    margin-bottom: 16px;
}

.form-group label,
label.block {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    margin-bottom: 6px;
}

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--slate-700);
    background: var(--slate-150);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: background var(--transition-base), box-shadow var(--transition-base);
    outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.form-control:hover,
input:hover,
select:hover,
textarea:hover {
    background: var(--slate-200);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background: var(--slate-150);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--slate-400);
}

.form-control-sm {
    padding: 5px 10px;
    font-size: 13px;
}

/* Input groups */
.input-group {
    display: flex;
    align-items: center;
}

.input-group .input-prefix {
    padding: 8px 0 8px 12px;
    background: var(--slate-150);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    color: var(--slate-500);
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
    border-right: none;
}

.input-group input {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    flex: 1;
}

.input-group-sm .input-prefix {
    padding: 5px 0 5px 10px;
    font-size: 12px;
}

.input-group-sm input {
    padding: 5px 10px;
    font-size: 13px;
}

/* Toggle / Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--slate-300);
    border-radius: var(--radius-full);
    transition: background var(--transition-base);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-base);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Read-only toggle (visible to lower roles, modifiable by Super Admin only) */
.toggle-switch.is-readonly {
    cursor: not-allowed;
    opacity: 0.55;
}
.toggle-switch.is-readonly .toggle-slider {
    cursor: not-allowed;
}

/* Checkbox / Radio (larger, indigo) */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.checkbox-default {
    font-size: 30px;
    display: inline-block;
    accent-color: var(--color-primary);
}

.label-checkbox {
    margin: 12px;
}


/* ── Tables ───────────────────────────────────────────────── */

.table {
    width: 100%;
    font-size: 14px;
}

.table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--slate-200);
    background: transparent;
}

.table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--slate-150);
    color: var(--slate-700);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--slate-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Custom table (from Vue App.vue — no side borders, no top border on thead) */
.customtable tr {
    border-left: 0 !important;
    border-right: 0 !important;
}

.customtable thead tr {
    border-top: 0 !important;
}

/* Compact table */
.table-sm th,
.table-sm td {
    padding: 6px 8px;
}

/* Clickable rows */
.table-clickable tbody tr {
    cursor: pointer;
}

/* Table inside card */
.card .table {
    margin: -1px;
    width: calc(100% + 2px);
}

.card .table:first-child th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.card .table:first-child th:last-child  { border-radius: 0 var(--radius-lg) 0 0; }

/* Teal header (booking tables) */
.table-teal th {
    background: #50cdd2;
    color: #fff;
    border-bottom-color: #50cdd2;
}

/* Striped */
.table-striped tbody tr:nth-child(even) {
    background: var(--slate-50);
}


/* ── Badges ───────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1.4;
    white-space: nowrap;
}

.badge-primary {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-danger, .badge-error {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.badge-secondary {
    background: var(--color-secondary-bg);
    color: var(--color-secondary);
}

/* Outlined badge (login "TEAM" badge) */
.badge-outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

/* Dot badge */
.badge-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
}

/* Larger badges */
.badge-lg {
    padding: 5px 14px;
    font-size: 13px;
}


/* ── Modals ───────────────────────────────────────────────── */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base);
}

.modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    animation: modalSlideIn 200ms ease forwards;
}

.modal-big {
    max-width: 800px;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--slate-150);
}

.modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: var(--slate-800);
}

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--slate-400);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--slate-700);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Any direct child of .modal that isn't header/footer must scroll like
   .modal-body — otherwise toggled-in panels (e.g. the booking edit panel
   on bookings-manage) overflow the 85vh cap with no way to reach the
   buttons at the bottom. */
.modal > div:not(.modal-header):not(.modal-footer):not(.modal-body) {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--slate-150);
}

/* ── Cancel Group Booking Modal ───────────────────────────── */

.cancel-modal {
    overflow: hidden;
}

.cancel-modal-header {
    position: relative;
    height: 72px;
    overflow: hidden;
}

.cancel-modal-header canvas {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    filter: blur(10px) saturate(1.4);
}

.cancel-modal-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
}

.cancel-modal-header-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
    letter-spacing: -0.01em;
}

.cancel-modal-close {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms;
}

.cancel-modal-close:hover {
    background: rgba(255,255,255,0.35);
}

.cancel-modal-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 150ms ease;
}

.cancel-modal-btn--keep {
    background: #a78bfa;
    color: #fff;
}
.cancel-modal-btn--keep:hover {
    background: #8b5cf6;
}

.cancel-modal-btn--cancel {
    background: #dc2626;
    color: #fff;
    border: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cancel-modal-btn--cancel:hover {
    background: #b91c1c;
}


/* ── Toast Notifications ──────────────────────────────────── */

.toast-container {
    position: fixed;
    top: 16px;
    left: calc(var(--sidebar-width) + 16px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
}

@media (max-width: 767.98px) {
    .toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: toastSlideIn 250ms ease forwards;
    max-width: 380px;
    word-break: break-word;
}

.toast-success {
    background: #ecfdf5;
    color: #065f46;
    border-left: 4px solid var(--color-success);
}

.toast-error {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid var(--color-error);
}

.toast-info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid var(--color-info);
}

.toast-warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid var(--color-warning);
}

.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    font-size: 16px;
    padding: 0 2px;
}

.toast-close:hover { opacity: 1; }

.toast-msg {
    flex: 1;
    min-width: 0;
}

.toast-ok {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px 12px;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 150ms;
}

.toast-ok:hover { opacity: 1; }

.toast.removing {
    animation: toastFadeOut 300ms ease forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateX(-20px); }
}


/* ── Spinners / Loading ───────────────────────────────────── */

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--slate-200);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 600ms linear infinite;
    display: inline-block;
}

.spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.spinner-white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--slate-400);
    font-size: 14px;
}


/* ── Network Status Banner ────────────────────────────────── */

.network-banner {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 9999;
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.network-banner.offline {
    display: block;
    background: #fee2e2;
    color: #991b1b;
}

.network-banner.online {
    display: block;
    background: #d1fae5;
    color: #065f46;
    animation: fadeOut 2s 1s forwards;
}

@keyframes fadeOut {
    to { opacity: 0; display: none; }
}

@media (max-width: 767.98px) {
    .network-banner { left: 0; }
}


/* ── Numeric / Amount Styling ─────────────────────────────── */

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Align all price amounts in the cart to the same vertical edge */
.cart-position .mono {
    min-width: 68px;
    text-align: right;
    display: inline-block;
}

.amount-positive { color: var(--color-success); }
.amount-negative { color: var(--color-error); }

.text-lg { font-size: 20px; }
.text-xl { font-size: 24px; }
.text-2xl { font-size: 30px; }


/* ══════════════════════════════════════════════════════════════
   POS-SPECIFIC STYLES
   ══════════════════════════════════════════════════════════════ */

.pos-layout {
    display: flex;
    height: calc(100vh - var(--main-pad) * 2);
    min-height: 400px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

@media (max-width: 767.98px) {
    .pos-layout {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
}

/* Product area */
.pos-products {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 14px;
    /* Anchor for the social-gift floating button (.sg-fab) */
    position: relative;
}

/* Category tabs (horizontal scrollable) */
.category-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    flex-shrink: 0;
    padding: 10px 8px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: center;
    gap: 4px;
    transition: all var(--transition-base);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Tabler icon inside category tab */
.category-tab .cat-icon {
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.category-tab img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 6px;
}

.category-tab .cat-title {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.category-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.category-tab.active {
    border-color: var(--color-primary);
    background: rgba(79, 70, 229, 0.10);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

.category-tab .cat-count {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
}

.category-tab.active .cat-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Product grid */
.product-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
    grid-auto-rows: min-content;
    gap: 12px;
    overflow-y: auto;
    padding: 8px 2px;
    align-content: start;
}

.product-card {
    display: flex;
    flex-direction: column;
    max-width: 150px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.product-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    transform: translateY(-1px);
}

.product-card.out-of-stock {
    opacity: 0.45;
    pointer-events: none;
}

.product-card .product-card-img {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.product-card .product-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Default icon placeholder when no product image */
.product-card .product-card-icon {
    width: 100%;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0edff 0%, #e8e5fc 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--slate-500);
}

.product-card .product-card-icon .ti {
    font-size: 44px;
    line-height: 1;
}

.product-card .product-card-icon svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.product-card .product-card-body {
    padding: 8px 8px 10px;
}

.product-card .product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-700);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.product-card .product-desc {
    font-size: 11px;
    color: var(--slate-400);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: 1px;
}

.product-card .product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    font-family: var(--font-mono);
    text-align: right;
    margin-top: 4px;
}

.product-card .product-stock {
    font-size: 10px;
    color: var(--slate-400);
    margin-top: 2px;
}

/* Cart panel — part of the unified pos-layout container */
.pos-cart {
    width: 468px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--slate-150);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .pos-cart {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--slate-150);
    }
}

/* Cart header */
.pos-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--slate-150);
    flex-shrink: 0;
}

.pos-cart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-800);
}

.pos-cart-count {
    font-size: 12px;
    color: var(--slate-400);
    margin-right: 4px;
}

/* Strip .card styling inside pos-cart */
.pos-cart .cart-position {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Upper section: scrollable cart items */
.cart-upper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px;
}

/* Lower section: totals, payments, buttons — always visible on top */
.cart-lower {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--slate-150);
}

.cart-items {
    padding: 4px 0;
    min-height: 60px;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 10px;
    font-size: 13px;
}

.cart-item + .cart-item {
    border-top: 1px solid var(--slate-100);
}

.cart-item:hover {
    background: var(--slate-50);
}

.cart-item .item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cart-item .item-img-wrap {
    position: relative;
    flex-shrink: 0;
}

.cart-item .item-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
}

/* Tabler icon fallback for cart items without images */
.cart-item .item-img-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0edff 0%, #e8e5fc 100%);
    color: var(--slate-500);
}

.cart-item .item-qty-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    background: var(--slate-200);
    color: var(--slate-800);
    border-radius: 10px;
    border: 2px solid #fff;
}

.cart-item .item-details {
    min-width: 0;
}

.cart-item .item-name {
    font-weight: 500;
    color: var(--slate-700);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.cart-item .item-desc {
    font-size: 12px;
    color: var(--slate-400);
}

.cart-item .item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cart-item .qty-controls {
    display: flex;
    gap: 3px;
}

.cart-item .qty-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--slate-600);
}

.cart-item .qty-btn:hover {
    background: var(--slate-200);
}

/* ── Cart item removal animation ── */
.cart-item {
    transition: background-color 0.25s ease, opacity 0.35s ease, max-height 0.35s ease,
                padding 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    max-height: 120px;            /* generous upper bound for natural height */
    overflow: hidden;
}

.cart-item.cart-item-removing {
    background-color: rgba(249, 115, 22, 0.18) !important;   /* soft reddish-orange */
}

.cart-item.cart-item-collapsing {
    background-color: rgba(249, 115, 22, 0.18) !important;
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-color: transparent !important;
}

.cart-item .item-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--slate-700);
    font-size: 13px;
    min-width: 60px;
    text-align: right;
    white-space: nowrap;
}

/* Cart trash button */
.cart-trash-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: none;
    border: 1px solid var(--slate-200);
    cursor: pointer;
    color: var(--slate-400);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.cart-trash-btn:hover {
    background: var(--slate-50);
    border-color: var(--slate-300);
    color: var(--color-error);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--slate-400);
}

.empty-state-icon {
    margin-bottom: 8px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 14px;
}

/* Cart footer — divider + totals + payment grid + actions */
.cart-footer {
    border-top: 1px solid var(--slate-200);
    padding: 12px 16px;
    overflow-y: auto;
    max-height: 55vh;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: var(--slate-600);
}

.cart-total-row {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-800);
    padding: 8px 0;
    border-top: 1px solid var(--slate-200);
    margin-top: 4px;
}

.cart-total-amount {
    color: var(--color-primary);
}

/* Payment section */
.cart-payment-section {
    padding-top: 8px;
}

.payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.payment-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    min-width: 40px;
    margin: 0;
}

.payment-row .input-group {
    width: 140px;
}

.left-to-collect {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 600;
}

.left-to-collect-amount {
    color: var(--color-error);
}

.card-payment-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.card-payment-list::-webkit-scrollbar {
    display: none;
}

.card-payment-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    min-height: 52px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
    transition: all var(--transition-fast);
}

.card-payment-item:hover {
    border-color: var(--color-primary);
}

.card-payment-item.selected {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.card-payment-item.card-payment-matched {
    border-color: var(--color-warning, #f59e0b);
    border-style: dashed;
    opacity: 0.75;
}

.card-payment-item.card-payment-reversed {
    border-color: var(--color-danger, #dc2626);
    background: repeating-linear-gradient(
        135deg,
        rgba(220, 38, 38, 0.06),
        rgba(220, 38, 38, 0.06) 8px,
        rgba(220, 38, 38, 0.12) 8px,
        rgba(220, 38, 38, 0.12) 16px
    );
    color: var(--slate-500, #64748b);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.9;
}
.card-payment-item.card-payment-reversed .card-pay-amount,
.card-payment-item.card-payment-reversed b {
    text-decoration: line-through;
}

/* ── Partner picker rows ─────────────────────────────────────────
   Title + subtitle fill the left/middle, stepper controls hug the
   right. Single-line — controls never drop below the label.        */
.partner-row {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--slate-200);
}
.partner-row__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.partner-row__codes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.partner-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.partner-code-chip__axis {
    font-size: 10px;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
}
.partner-row__prompt {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}
.partner-code-input {
    flex: 1;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid var(--slate-300);
    border-radius: 6px;
}
.partner-row__prompt .btn {
    height: 40px;
}
.partner-row__label {
    flex: 1 1 auto;
    min-width: 0;
}
.partner-row__title {
    font-weight: 600;
    line-height: 1.25;
}
.partner-row__sub {
    font-size: 12px;
    color: var(--slate-600);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.partner-row__controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    margin-left: auto;
}
.partner-row__controls .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
}
.partner-stepper-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.partner-stepper-group__axis {
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.partner-stepper-group__divider {
    width: 1px;
    height: 22px;
    background: var(--slate-200);
}
.partner-qty-val {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
}

.card-pay-amount {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.card-pay-time {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    letter-spacing: -0.2px;
}

.card-pay-meta {
    font-size: 11px;
    color: var(--slate-400);
}

.card-pay-ago {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 11px;
    white-space: nowrap;
}

.card-pay-matched-tag {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    color: var(--color-warning, #f59e0b);
    border: 1px solid var(--color-warning, #f59e0b);
    border-radius: 3px;
    padding: 1px 4px;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.card-pay-reversed-tag {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    background: var(--color-danger, #dc2626);
    border: 1px solid var(--color-danger, #dc2626);
    border-radius: 3px;
    padding: 2px 5px;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.card-polling-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--slate-600);
}

/* ── No-match waiting animation ── */
.no-match-trigger {
    justify-content: center;
    color: var(--slate-500);
    font-weight: 500;
    border-style: dashed;
}

.no-match-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border: none;
    cursor: default;
}

.no-match-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.nm-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.3;
    animation: nmPulse 1.4s ease-in-out infinite;
}

.nm-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.nm-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes nmPulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.15); }
}

.no-match-status {
    font-size: 12px;
    color: var(--slate-400);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.no-match-done {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border: none;
}

/* New payment slide-in */
.card-payment-new {
    animation: cardNewSlide 0.4s ease-out;
    border-color: var(--color-primary) !important;
    background: var(--color-primary-bg);
}

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

.pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.pay-grid-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    aspect-ratio: 1;
    padding: 4px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    background: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pay-grid-btn:hover {
    border-color: var(--slate-400);
    background: var(--slate-50);
}

/* Tabler icon inside payment button */
.pay-grid-btn .pay-grid-icon {
    font-size: 28px;
    line-height: 1;
    color: var(--slate-500);
}

.pay-grid-btn svg {
    width: 28px;
    height: 28px;
    color: var(--slate-500);
    stroke: var(--slate-500);
}

.pay-grid-btn .pay-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-600);
}

.pay-grid-cell {
    aspect-ratio: 1;
}

/* Pay-grid expanded input (replaces button when open) */
.pay-grid-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    height: 100%;
    box-sizing: border-box;
}

.pay-grid-input.error-price {
    border-color: var(--color-warning);
}

.pay-grid-input label {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-600);
    cursor: pointer;
    margin: 0;
}

.pay-grid-input input {
    padding: 10px 6px;
    font-size: 14px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.pay-grid-input input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.pay-grid-input .btn-ok {
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
}

.pay-grid-input .btn-ok:hover {
    background: var(--slate-200);
}

/* ── Numeric Keypad (floating, draggable) ── */
.pos-numpad {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    background: linear-gradient(160deg, #f5f3ff, #ede9fe);
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 36px rgba(79,70,229,0.14), 0 3px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.numpad-side-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 26px;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    background: rgba(79,70,229,0.06);
    border-right: 1px solid rgba(79,70,229,0.08);
    border-radius: 20px 0 0 20px;
}
.numpad-side-grip:active { cursor: grabbing; }
.numpad-side-grip .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.25;
}

.numpad-main {
    padding: 12px 14px 14px 10px;
    display: flex;
    flex-direction: column;
    width: 232px;
}

.numpad-method {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 6px;
    text-align: center;
}

.numpad-display {
    position: relative;
    text-align: center;
    padding: 10px 8px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--slate-800);
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    border: 1.5px solid transparent;
}

/* Suggested (pre-filled) state: muted, with tag outline */
.numpad-display--suggested {
    color: var(--slate-400);
    border-color: var(--slate-300);
    background: rgba(255,255,255,0.35);
    border-style: dashed;
}

.numpad-display--suggested .numpad-value {
    opacity: 0.55;
}

.numpad-display--suggested .numpad-cur {
    opacity: 0.45;
}

/* Typed (user-entered) state: full contrast */
.numpad-display--typed {
    color: var(--slate-800);
    border-color: transparent;
    background: rgba(255,255,255,0.6);
}

.numpad-suggested-label {
    position: absolute;
    top: 2px;
    left: 8px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--slate-400);
    opacity: 0.7;
    pointer-events: none;
}
.numpad-cur {
    font-size: 13px;
    color: var(--slate-400);
}

/* ── Numpad receive / give toggle ── */
.numpad-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.numpad-toggle-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--slate-400);
    transition: color 0.25s, opacity 0.25s;
    user-select: none;
    -webkit-user-select: none;
}

.numpad-toggle-label.active {
    color: var(--color-primary);
    opacity: 1;
}

.numpad-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 13px;
    border: 2px solid rgba(79,70,229,0.25);
    background: rgba(79,70,229,0.10);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, border-color 0.25s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.numpad-toggle .numpad-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: left 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s;
}

.numpad-toggle[aria-pressed="true"] {
    background: rgba(249,115,22,0.12);
    border-color: rgba(249,115,22,0.35);
}

.numpad-toggle[aria-pressed="true"] .numpad-toggle-thumb {
    left: 24px;
    background: #f97316;
}

.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.numpad-key {
    padding: 11px 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    background: rgba(255,255,255,0.55);
    border-radius: 10px;
    color: var(--slate-700);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.numpad-key:active {
    background: var(--color-primary);
    color: #fff;
    transform: scale(0.94);
}
.numpad-key.numpad-accent {
    color: var(--slate-400);
    background: transparent;
}
.numpad-key.numpad-accent:active {
    background: var(--slate-200);
    color: var(--slate-700);
}
.numpad-key[data-k="back"] {
    font-size: 18px;
    font-weight: 800;
    color: var(--slate-800);
}

.numpad-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.numpad-actions button {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
}
.numpad-cancel {
    background: rgba(255,255,255,0.5);
    color: var(--slate-500);
}
.numpad-confirm {
    background: var(--color-primary);
    color: #fff;
}
.numpad-confirm:active {
    background: var(--color-primary-focus);
}

/* ── Group-ticket inline numpad ── */
.gt-numpad-field {
    cursor: pointer;
    caret-color: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gt-numpad-field.gt-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.pp-numpad-field {
    cursor: pointer;
    caret-color: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pp-numpad-field.pp-active {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.15);
}

#ppNumpad {
    grid-column: 1 / -1;
}

.gt-numpad {
    margin-top: 8px;
    background: linear-gradient(160deg, #f5f3ff, #ede9fe);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(79,70,229,0.10);
}
.gt-numpad-display {
    text-align: center;
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--slate-800);
}
.gt-numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.gt-numpad-key {
    padding: 11px 0;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    background: rgba(255,255,255,0.55);
    border-radius: 10px;
    color: var(--slate-700);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.gt-numpad-key:active {
    background: var(--color-primary);
    color: #fff;
    transform: scale(0.94);
}
.gt-numpad-key.gt-numpad-accent {
    color: var(--slate-400);
    background: transparent;
}
.gt-numpad-key.gt-numpad-accent:active {
    background: var(--slate-200);
    color: var(--slate-700);
}
.gt-numpad-key[data-gk="back"] {
    font-size: 18px;
    font-weight: 800;
    color: var(--slate-800);
}
.gt-numpad-key.gt-numpad-dot-hidden {
    visibility: hidden;
    pointer-events: none;
}
.gt-numpad-ok {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    background: var(--color-primary);
    color: #fff;
}
.gt-numpad-ok:active {
    background: var(--color-primary-focus);
}

/* Transaction display (paid-by lines) */
.show-transaction-wrapper {
    margin-bottom: 6px;
}

.show-transaction {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.show-transaction-label {
    font-size: 14px;
    color: var(--slate-500);
    flex: 1;
}

.show-transaction-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 68px;
    font-size: 14px;
    color: var(--color-primary);
}

.show-transaction-remove {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--slate-300);
    border-radius: 4px;
    background: transparent;
    color: var(--slate-400);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}

.show-transaction-remove:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: rgba(255,68,68,0.06);
}

@keyframes hintBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ── Note-required Voronoi blob button ──────────────────── */
.note-voronoi-btn {
    width: 100%;
    padding: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #ef4444;
}

.note-voronoi-btn canvas {
    position: absolute;
    pointer-events: none;
}

.note-voronoi-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 12px rgba(0,0,0,0.15);
}

.note-voronoi-label svg {
    flex-shrink: 0;
}

@keyframes noteVoronoiEnter {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}

/* Inline confirmation prompt — overlays the label */
.show-transaction-confirm {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--slate-600);
    z-index: 2;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.show-transaction-confirm-actions {
    display: flex;
    gap: 6px;
}

.show-transaction-confirm-actions button {
    padding: 2px 10px;
    border-radius: 4px;
    border: none;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
}

.show-transaction-confirm-actions .confirm-yes {
    background: var(--color-error);
    color: #fff;
}

.show-transaction-confirm-actions .confirm-yes:hover {
    opacity: 0.85;
}

.show-transaction-confirm-actions .confirm-no {
    background: var(--slate-200);
    color: var(--slate-600);
}

.show-transaction-confirm-actions .confirm-no:hover {
    background: var(--slate-300);
}

/* Note display (above left-to-collect) */
.cart-note-display {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--slate-600);
    margin-bottom: 6px;
}

.cart-note-display .note-label {
    color: var(--color-primary);
    font-weight: 500;
}

/* Finish confirmation — expanding green panel with scrolling gradient */
.finish-confirm {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(90deg, #53ce98, #3aaa7a, #2d9b6e, #53ce98);
    background-size: 300% 100%;
    border-radius: var(--radius-md);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s;
}

.finish-confirm.active {
    height: 82px;
    opacity: 1;
    pointer-events: auto;
    animation: finishGradientScroll 4s linear infinite;
}

@keyframes finishGradientScroll {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.finish-confirm-content {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.25s ease 0.25s;
}

.finish-confirm.active .finish-confirm-content {
    opacity: 1;
}

/* Confirmation question + buttons */
.cf-question {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.cf-btn {
    padding: 7px 20px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    flex-shrink: 0;
    transition: transform 0.1s ease, background var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cf-btn:active { transform: scale(0.95); }

.cf-yes { background: #fff; color: #2d9b6e; }
.cf-yes:hover { background: #e6fff0; }

.cf-no { background: rgba(255,255,255,0.2); color: #fff; }
.cf-no:hover { background: rgba(255,255,255,0.35); }

/* Print toggle — checkbox with strikethrough (alt 3) */
.cf-print {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.cf-print input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cf-print-box {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.7);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cf-print input:checked + .cf-print-box {
    background: #fff;
    border-color: #fff;
}

.cf-print-check {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cf-print input:checked + .cf-print-box .cf-print-check {
    opacity: 1;
}

.cf-print-label {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    transition: all 0.2s ease;
}

.cf-print input:not(:checked) ~ .cf-print-label {
    text-decoration: line-through;
    color: rgba(255,255,255,0.4);
}

/* Cart mobile toggle button */
.btn-cart-mobile {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 70;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-warning);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .btn-cart-mobile { display: flex; align-items: center; justify-content: center; }
}

/* Refund / orange text */
.orange-text {
    color: var(--color-warning);
}

/* Note section */
.cart-note-section {
    margin: 8px 0;
}

.cart-note-section label {
    font-size: 12px;
    color: var(--slate-500);
    margin-bottom: 4px;
}

/* Booking section */
.cart-booking-section {
    margin: 8px 0;
}

.cart-booking-section label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-500);
    margin-bottom: 4px;
    display: block;
}

.booking-input-wrapper {
    display: flex;
    gap: 4px;
}

.booking-input-wrapper input {
    flex: 1;
}

.booking-attached {
    margin-top: 4px;
}

/* Cart actions */
.cart-actions {
    margin-top: 8px;
    position: relative;
}

.cart-actions .btn-finish {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: var(--cashier-confirm);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: var(--font-body);
}

.cart-actions .btn-finish:hover {
    background: #45b888;
}

.cart-actions .btn-finish:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: all;
}

/* Refund-due escape hatch — shown next to (replaces) the disabled green
   "Save & Close" when an attached web booking has overpaid the till. */
.cart-actions .btn-finish-refund {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: #d97706;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: var(--font-body);
}

.cart-actions .btn-finish-refund:hover {
    background: #b45309;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Expandable discount */
.cart-expandable .cart-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.cart-expandable .cart-expand-btn:hover {
    text-decoration: underline;
}

.cart-expand-content {
    margin-top: 4px;
}

/* Bookings sidebar panel (POS page) */
.pos-bookings-sidebar {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: 320px;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
    z-index: 80;
    transform: translateX(100%);
    transition: transform 300ms ease;
    display: flex;
    flex-direction: column;
}

.pos-bookings-sidebar.open {
    transform: translateX(0);
}

.sidebar-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--slate-150);
    font-weight: 600;
    color: var(--slate-800);
}

.btn-close-sidebar {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--slate-400);
    cursor: pointer;
}

.btn-close-sidebar:hover {
    color: var(--slate-700);
}

.sidebar-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}


/* ══════════════════════════════════════════════════════════════
   CASHIER-SPECIFIC  (matches Cashier.vue / HandOver.vue / CashierCountList.vue)
   ══════════════════════════════════════════════════════════════ */

/* ── Centred wrapper cards ── */
.cashier-card {
    max-width: 56rem;           /* max-w-4xl */
    margin: 0 auto;
}

.handover-card {
    max-width: 30rem;           /* max-w-xl */
    margin: 2rem auto;
    text-align: center;
}

/* ── Steps indicator (pill bar) ── */
.cashier-steps-bar {
    display: flex;
    gap: 4px;
}

.cashier-step-pill {
    padding: 5px 14px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: 9999px;
    background: var(--slate-100);
    color: var(--slate-400);
    cursor: default;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cashier-step-pill.active {
    background: var(--color-primary);
    color: #fff;
}

.cashier-step-pill.completed {
    background: var(--color-success);
    color: #fff;
}

/* ── Close (X) button ── */
.cashier-close-btn {
    position: absolute;
    right: -10px;
    top: -10px;
    color: var(--color-primary);
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

.cashier-close-btn:hover { opacity: .7; }

/* ── Denomination form — CashierInput-style ── */
.denom-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

@media (max-width: 767.98px) {
    .denom-form { grid-template-columns: 1fr; }
}

.denom-row {
    display: flex;
    margin-bottom: 6px;
}

.denom-label {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--slate-200);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-600);
    background: var(--slate-50);
}

@media (max-width: 845px) {
    .denom-label { width: 80%; }
}

.denom-input {
    flex: 1;
    border: 1px solid var(--slate-200);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 8px 12px;
    font-size: 14px;
    background: transparent;
    transition: border-color var(--transition-fast);
}

.denom-input:hover { border-color: var(--slate-400); }
.denom-input:focus { border-color: var(--color-primary); outline: none; z-index: 1; }

/* ── grayForm — disable section ── */
.grayForm,
.grayed-form {
    pointer-events: none;
    opacity: 0.6;
}

/* ── Gray button ── */
.gray-default-btn {
    background: #8f9aa1;
    color: #fff;
    border-color: #8f9aa1;
}

.gray-default-btn:hover {
    background: #707C83;
    color: #fff;
}

/* ── Confirm button (cashier green) ── */
.btn-cashier-confirm,
.confirm-button {
    background: var(--cashier-confirm);
    color: #fff;
    border-color: var(--cashier-confirm);
}

.btn-cashier-confirm:hover,
.confirm-button:hover {
    background: var(--cashier-confirm-hover);
    border-color: var(--cashier-confirm-hover);
}

.confirm-button-disable {
    background: rgba(64, 184, 131, 0.28) !important;
    color: #fff;
    pointer-events: none;
}

/* ── Envelope section ── */
.envelope-save { padding: 16px 0; }

.message-envelope {
    font-weight: bold;
    text-align: center;
    padding: 16px;
    background: var(--slate-50);
    border-radius: var(--radius);
    margin-bottom: 16px;
    line-height: 2;
}

.message-whitelines { white-space: pre-line; }

/* Bill denomination badge inside envelope message */
.billSpan {
    display: inline-block;
    font-weight: 900;
    font-size: 1.1em;
    background: #ffe7a0;
    padding: 2px 10px;
    border-radius: 4px;
    min-width: 40px;
    text-align: center;
}

/* Envelope label shape — simulates what to write on the physical envelope */
.env-shape {
    display: inline-block;
    border: 3px dashed #555;
    border-radius: 12px;
    padding: 18px 32px;
    margin: 12px auto;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.6;
    background: #fffbe6;
    text-align: center;
}
.env-shape .env-message {
    font-size: 1.4em;
    font-weight: 900;
    color: #d32f2f;
}

/* Warning alert inside envelope instructions */
#alert-text-custom {
    margin: 14px 0;
    padding: 10px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    font-weight: 700;
    font-size: 0.95em;
}

/* Envelope confirmation checkbox — red bg like Vue */
.form-check-envelope {
    padding: 15px;
    background: #ea5e5e;
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-check-envelope input[type="checkbox"] {
    transform: scale(2);
    margin: 2px 10px;
    accent-color: #fff;
}

/* ── Bill span badge (denomination display) ── */
.bill-span {
    display: inline-block;
    background: var(--cashier-bill-bg);
    padding: 2px 8px;
    min-width: 73px;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

/* ── Bill counter (current PHP fallback layout) ── */
.bill-counter { margin-bottom: 16px; }

.bill-counter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

@media (max-width: 767.98px) {
    .bill-counter-grid { grid-template-columns: 1fr; }
}

.bill-counter-total {
    font-size: var(--font-size-sm);
    color: var(--slate-600);
}

.bill-row {
    display: flex;
    margin-bottom: 6px;
}

.bill-row .bill-span {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius) 0 0 var(--radius);
}

.bill-row input {
    flex: 1;
    border: 1px solid var(--slate-200);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 8px 12px;
    font-size: 14px;
}

.bill-row input:focus { border-color: var(--color-primary); outline: none; }

/* ── Cashier step cards ── */
.cashier-step-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-150);
    padding: 16px 20px;
    margin-top: 12px;
}

.cashier-step-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--slate-700);
}

/* ── Summary pair cards ── */
.cashier-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.cashier-summary-item {
    padding: 12px;
    background: var(--slate-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.cashier-summary-item .summary-label {
    font-size: 12px;
    color: var(--slate-500);
    margin-bottom: 4px;
}

.cashier-summary-item .summary-value {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--slate-800);
}

/* ── CashierCountList table tags ── */
.custom-tag {
    font-size: 12px;
    padding: 0 7px;
    text-align: center;
    height: 24px;
    vertical-align: middle;
    line-height: 23px;
    border-radius: 4px;
    display: inline-block;
}

.tag-red   { color: #fff; background: #f69999; }
.tag-yellow { color: #787455; background: #f4f699; }
.tag-gray  { color: #fff; background: #fff; opacity: 0; }

.pending-tag {
    color: #64758b !important;
    background: #cbf7ed !important;
}

.envelope-id {
    background: var(--cashier-envelope-bg);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
}

.envelope-id svg,
.envelope-content svg {
    color: var(--cashier-envelope-icon);
    width: 14px;
    height: 14px;
}

.amount-in-list {
    font-family: var(--font-mono);
}

.decimal-part {
    color: var(--slate-400);
    font-size: 12px;
}

.money-denom {
    padding: 8px 2px;
    margin: 4px;
    min-width: 70px;
    display: inline-block;
    text-align: center;
    border-radius: 4px;
    background: var(--cashier-money-bg);
    font-size: 13px;
}


/* ══════════════════════════════════════════════════
   Cashier Counted — Equation Layout (cc- prefix)
   Net (opening) + Cash In = Expected vs Counted
   ══════════════════════════════════════════════════ */

/* Fresh modern pastel tag variables */
:root {
    --cc-tag-green-bg:   #e0f5ec;
    --cc-tag-green-text: #6ee7b7;
    --cc-tag-amber-bg:   #fde68a;
    --cc-tag-amber-text: #78350f;
    --cc-tag-red-bg:     #fecdd3;
    --cc-tag-red-text:   #9f1239;
}

/* ── Base table ── */
.ct {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ct thead th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--slate-500);
    padding: 8px 6px;
    white-space: nowrap;
    text-align: center;
    border-bottom: 2px solid var(--slate-200);
}

.ct thead th.cc-th-l { text-align: left; }

.ct tbody td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--slate-100);
    text-align: center;
    vertical-align: middle;
}

.ct tbody td.cc-td-l { text-align: left; }

.ct tbody tr:hover td { background: rgba(0, 0, 0, 0.012); }

/* ── Group header row ── */
.ct .cc-grp th {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 6px;
    border-bottom: none;
}

/* ── Operator columns ── */
.ct .cc-op-col {
    width: 20px;
    padding: 0 2px !important;
}

.ct thead .cc-op-hdr {
    width: 20px;
    padding: 0 2px !important;
    border-bottom-color: transparent;
}

.cc-op-sym {
    font-weight: 800;
    font-size: 13px;
    color: var(--slate-400);
    line-height: 1;
}

.cc-op-vs {
    font-weight: 700;
    font-size: 10px;
    color: var(--slate-400);
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

/* ── Expected & Counted boxes ── */
.cc-exp-box {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 12px;
}

.cc-exp-expected {
    background: var(--cc-tag-green-bg);
    color: #5eae8b;
}

.cc-exp-counted {
    background: rgba(79, 70, 229, 0.08);
    color: var(--color-primary);
}

/* ── Fresh pastel tags ── */
.cc-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    line-height: 1.4;
    white-space: nowrap;
}

.cc-tag-green { background: none; color: var(--cc-tag-green-text); padding: 0; font-weight: 400; font-size: 12px; }
.cc-tag-amber { background: var(--cc-tag-amber-bg); color: var(--cc-tag-amber-text); }
.cc-tag-red   { background: var(--cc-tag-red-bg);   color: var(--cc-tag-red-text); }

/* Below-threshold discrepancies: text-only, no pill, muted colors */
.cc-minor-red   { font-size: 11px; font-weight: 500; color: #d4768a; }
.cc-minor-amber { font-size: 11px; font-weight: 500; color: #b8a070; }

/* ── N/A & decimal helpers ── */
.cc-na  { color: var(--slate-300); }
.cc-dec { font-size: 10px; color: var(--slate-400); }

/* ── Envelope badge ── */
.cc-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cashier-envelope-icon);
    background: var(--cashier-envelope-bg);
    padding: 2px 7px;
    border-radius: var(--radius);
}

.cc-env-icon {
    display: inline-flex;
    vertical-align: middle;
}

/* Envelope badge — flagged variants (supervisor re-count gap) */
.cc-env-badge--missing {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}
.cc-env-badge--surplus {
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #86efac;
}
.cc-env-gap {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
}

/* ── Active shift pulse badge ── */
.cc-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    animation: cc-pulse-badge 2s infinite;
}

@keyframes cc-pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Non-native tooltip (data-tip) ── */
/* Tooltip is rendered by JS (admin.js initTooltips) as a <div> appended to <body>,
   so it is never clipped by ancestor overflow.  The .cc-tip class is the trigger. */
.cc-tip-floating {
    position: fixed;
    background: var(--slate-800);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    /* Must sit above .tooltip-text (z-index 99999) so reason-tooltips on
       buttons inside the bk-noshow-tip are not occluded by the parent tip. */
    z-index: 100001;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.cc-tip-floating.cc-tip-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Denomination hover tooltip ── */
.cc-denom-hover {
    position: relative;
    cursor: default;
    text-decoration: underline dotted var(--slate-300);
    text-underline-offset: 3px;
}

/* When denom-hover is on an exp-box, skip the underline — use cursor + lift instead */
.cc-exp-box.cc-denom-hover {
    text-decoration: none;
    cursor: default;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cc-exp-box.cc-denom-hover:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* Tooltip is appended to <body> with position:fixed so it is never
   clipped by ancestor overflow.  JS positions it and adds
   .cc-denom-tooltip--above when it shows above the trigger. */
.cc-denom-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--slate-800);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top center;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Arrow pointing up (default — tooltip is below trigger) */
.cc-denom-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--slate-800);
}

/* Arrow pointing down (tooltip is above trigger) */
.cc-denom-tooltip.cc-denom-tooltip--above {
    transform-origin: bottom center;
}
.cc-denom-tooltip.cc-denom-tooltip--above::after {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: var(--slate-800);
}

.cc-denom-tooltip.show {
    opacity: 1;
    transform: scale(1);
}

/* When tooltip contains the denomination comparison grid, switch to white theme */
.cc-denom-tooltip:has(.env-cmp) {
    white-space: normal;
    min-width: 220px;
    background: #fff;
    color: var(--slate-700, #334155);
    border: 1px solid var(--slate-200, #e2e8f0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cc-denom-tooltip:has(.env-cmp)::after {
    border-bottom-color: #fff;
}
.cc-denom-tooltip.cc-denom-tooltip--above:has(.env-cmp)::after {
    border-bottom-color: transparent;
    border-top-color: #fff;
}

.cc-denom-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cc-denom-tooltip li {
    padding: 1px 0;
}

.cc-denom-tooltip li strong {
    font-weight: 700;
}

.cc-dt-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 3px;
    margin-bottom: 3px;
}

/* ── Cash transaction tooltip rows ── */
.cc-denom-tooltip li:has(.cc-cash-time) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.cc-cash-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    min-width: 36px;
}

.cc-cash-id {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    min-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-cash-amt {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #6ee7b7;
    margin-left: auto;
    white-space: nowrap;
}

.cc-cash-total {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 5px;
    padding-top: 5px;
    text-align: right;
    font-size: 12px;
    color: #fff;
}

.cc-cash-total strong {
    font-weight: 800;
    color: #6ee7b7;
}

/* ── Warning triangle for repeat offenders ── */
.cc-warn-tri {
    display: inline-block;
    color: #d97706;
    font-size: 14px;
    margin-left: 4px;
    cursor: default;
    vertical-align: middle;
}

/* Warning tooltip content */
.cc-warn-tip-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
    color: #92400e;
}
.cc-warn-tip-list {
    font-size: 11px;
    color: #78716c;
}
.cc-warn-tip-row {
    padding: 1px 0;
    font-family: var(--font-mono);
}

/* Triangle becomes a filter shortcut when it carries .cc-user-link */
.cc-warn-tri.cc-user-link {
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.cc-warn-tri.cc-user-link:hover {
    color: #b45309;
    transform: scale(1.15);
}

/* ── Clickable user name ── */
.cc-user-link {
    cursor: pointer;
    transition: color 0.15s;
}
.cc-user-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── User filter summary card ── */
.cc-user-summary {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.cc-user-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cc-user-summary-name {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.cc-user-summary-close {
    background: none;
    border: 1px solid #d4d4d8;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    color: #71717a;
    padding: 0 6px;
    line-height: 1.4;
}
.cc-user-summary-close:hover {
    background: #f4f4f5;
    color: #18181b;
}
.cc-user-summary-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 8px;
}
.cc-user-stat {
    text-align: center;
}
.cc-user-stat-val {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #1e293b;
}
.cc-user-stat-lbl {
    display: block;
    font-size: 11px;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cc-user-stat--warn .cc-user-stat-val {
    color: #dc2626;
}
.cc-user-stat--ok .cc-user-stat-val {
    color: #059669;
}
.cc-user-summary-incidents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.cc-user-incidents-label {
    font-size: 11px;
    font-weight: 600;
    color: #78716c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cc-incident-pill {
    display: inline-block;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 2px 8px;
    border-radius: 12px;
}
.cc-incident-pill--surplus {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* ── Rich recap (mirrors discrepancy email) ── */
.cc-user-summary--warn {
    background: #fef2f2;
    border-color: #fecaca;
}
.cc-recap-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}
.cc-recap-tile {
    flex: 1 1 110px;
    min-width: 110px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}
.cc-recap-tile-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #1e293b;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cc-recap-tile-lbl {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cc-recap-tile--loss .cc-recap-tile-val { color: #dc2626; }
.cc-recap-tile--surplus .cc-recap-tile-val { color: #d97706; }
.cc-recap-tile--ok .cc-recap-tile-val { color: #059669; }
.cc-recap-tile--count .cc-recap-tile-val { color: #92400e; }

.cc-recap-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    font-size: 12px;
    color: #334155;
}
.cc-recap-table thead th {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    padding: 6px 8px;
    border-bottom: 1px solid #fde68a;
}
.cc-recap-th-l { text-align: left; }
.cc-recap-th-r { text-align: right; }
.cc-recap-table tbody tr {
    border-bottom: 1px solid rgba(253, 230, 138, 0.4);
}
.cc-recap-table tbody tr:last-child { border-bottom: none; }
.cc-recap-table td {
    padding: 6px 8px;
    font-variant-numeric: tabular-nums;
}
.cc-recap-td-date {
    font-family: var(--font-mono);
    color: #64748b;
    white-space: nowrap;
}
.cc-recap-td-r { text-align: right; }
.cc-recap-amt-missing { color: #dc2626; font-weight: 600; }
.cc-recap-amt-surplus { color: #d97706; font-weight: 600; }
.cc-recap-type {
    font-size: 10px;
    font-weight: 400;
    color: #94a3b8;
}
.cc-recap-row--missing { background: rgba(239, 68, 68, 0.03); }
.cc-recap-row--surplus { background: rgba(245, 158, 11, 0.03); }

.cc-recap-src {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    : help;
}
.cc-recap-src--closing {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.cc-recap-src--cross {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #5b21b6;
}
.cc-recap-src--envelope {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.cc-recap-footnote {
    margin-top: 10px;
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
}

/* White tooltip override for warning triangle */
.cc-denom-tooltip:has(.cc-warn-tip-title) {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    color: #1e293b;
}
.cc-denom-tooltip:has(.cc-warn-tip-title)::after {
    border-bottom-color: #fff;
}
.cc-denom-tooltip.cc-denom-tooltip--above:has(.cc-warn-tip-title)::after {
    border-top-color: #fff;
    border-bottom-color: transparent;
}


/* ── Shift email ratio badge ── */
.cc-email-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    cursor: default;
    white-space: nowrap;
}
.cc-email-badge--clickable {
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.cc-email-badge--clickable:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}
.cc-email-badge--low {
    background: #fef2f2;
    color: #dc2626;
}
.cc-email-badge--empty {
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-400, #94a3b8);
}
.cc-email-icon {
    flex-shrink: 0;
}
.cc-email-pct {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
}
.cc-email-fake-mini {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}
/* Boring-game-fired marker on the email badge (clock icon) */
.cc-email-boring-mini {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 8px;
    background: #f97316;
    color: #fff;
    line-height: 1;
}

/* Email ratio tooltip content */
.cc-email-tip {
    font-size: 12px;
    min-width: 160px;
}
.cc-email-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
}
.cc-email-tip-label {
    color: #94a3b8;
}
.cc-email-tip-val {
    font-weight: 700;
    font-family: var(--font-mono);
    color: #fff;
}
.cc-email-tip-warn {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #fca5a5;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
}

/* White tooltip override for email ratio */
.cc-denom-tooltip:has(.cc-email-tip) {
    background: #1e293b;
    border: 1px solid #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.cc-denom-tooltip:has(.cc-email-tip)::after {
    border-bottom-color: #1e293b;
}
.cc-denom-tooltip.cc-denom-tooltip--above:has(.cc-email-tip)::after {
    border-top-color: #1e293b;
    border-bottom-color: transparent;
}

/* ── Shift alert: shared overlay base ── */
.shift-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
}
.shift-overlay.visible { display: flex; }

.shift-box {
    width: 480px;
    max-width: 90%;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,0.18);
    overflow: hidden;
    animation: shiftPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes shiftPopIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.shift-header {
    padding: 28px 28px 20px;
    text-align: center;
}
.shift-icon-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    margin-bottom: 12px;
}
.shift-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.shift-header .shift-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
}
.shift-body {
    padding: 24px 28px;
    text-align: center;
}
.shift-body p {
    color: #475569;
    font-size: 0.93rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.shift-progress {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 0 16px;
}
.shift-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.shift-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.shift-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 0 28px 24px;
}

/* ── Shift alert: WARNING (amber) ── */
.shift-overlay--warn  { background: rgba(0, 0, 0, 0.35); }
.shift-overlay--warn .shift-header  { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.shift-overlay--warn .shift-icon-ring { background: rgba(245, 158, 11, 0.15); }
.shift-overlay--warn .shift-header h3 { color: #92400e; }
.shift-overlay--warn .shift-header .shift-subtitle { color: #b45309; }
.shift-overlay--warn .shift-progress-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.shift-overlay--warn .shift-badge {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.shift-btn-outline {
    padding: 10px 22px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.shift-btn-outline:hover { border-color: #94a3b8; background: #f8fafc; }

.shift-btn-warn {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.shift-btn-warn:hover { background: #d97706; }

/* ── Shift alert: FORCED (red) ── */
.shift-overlay--force  { background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px); }
.shift-overlay--force .shift-header  { background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); }
.shift-overlay--force .shift-icon-ring { background: rgba(239, 68, 68, 0.12); }
.shift-overlay--force .shift-header h3 { color: #991b1b; }
.shift-overlay--force .shift-header .shift-subtitle { color: #b91c1c; }
.shift-overlay--force .shift-progress-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.shift-overlay--force .shift-badge {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.shift-btn-minute {
    padding: 10px 22px;
    border: 1.5px solid #fecaca;
    border-radius: 8px;
    background: #fff;
    color: #991b1b;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.shift-btn-minute:hover { border-color: #ef4444; background: #fef2f2; }

.shift-btn-danger {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.shift-btn-danger:hover { background: #dc2626; }

/* ── Shift alert: counting-mode banner (non-blocking) ── */
.shift-counting-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999998;
    display: none;
    justify-content: center;
    padding: 10px 20px;
    animation: shiftBannerSlide 0.4s ease;
}
.shift-counting-banner.visible { display: flex; }
.shift-counting-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    font-size: 0.85rem;
    font-weight: 500;
    color: #92400e;
}
.shift-counting-banner.force .shift-counting-banner-inner {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.shift-counting-banner .pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: shiftPulse 2s ease-in-out infinite;
}
.shift-counting-banner.force .pulse-dot { background: #ef4444; }
@keyframes shiftBannerSlide { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes shiftPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }


/* ───────────────────────────────────────────────────────────
   Hand-Over Page (ho- prefix)
   ─────────────────────────────────────────────────────────── */
.ho-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem 2rem;
    min-height: calc(100vh - 60px);
}

.ho-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 32px;
    animation: ho-fade-in 0.3s ease;
}

@keyframes ho-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ho-loading {
    text-align: center;
    padding: 24px 0;
}

.ho-loading-text {
    color: var(--slate-500);
    font-size: 14px;
    margin: 12px 0 16px;
}

.ho-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary-bg);
    margin: 0 auto 8px;
}

.ho-header {
    text-align: center;
    margin-bottom: 24px;
}

.ho-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 8px 0 4px;
}

.ho-subtitle {
    font-size: 13px;
    color: var(--slate-500);
    margin: 0;
}

.ho-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ── Searchable user list ── */
.ho-select-wrap {
    position: relative;
    margin-bottom: 16px;
}

.ho-search-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 2px solid var(--slate-200);
    border-radius: 8px;
    background: var(--slate-50);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.ho-search-input:focus {
    border-color: var(--color-primary);
    background: #fff;
    outline: none;
}

.ho-user-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
}

.ho-user-btn {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--slate-700);
    background: none;
    border: none;
    border-bottom: 1px solid var(--slate-100);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    font-family: inherit;
}

.ho-user-btn:last-of-type {
    border-bottom: none;
}

.ho-user-btn:hover {
    background: var(--color-primary-bg);
}

.ho-user-btn.active {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-weight: 600;
}

.ho-no-match {
    padding: 16px;
    text-align: center;
    color: var(--slate-400);
    font-size: 13px;
}

.ho-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: 1px dashed var(--slate-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 16px;
    font-family: inherit;
}

.ho-add-btn:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
}

/* ── New cashier sub-view ── */
.ho-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-500);
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    font-family: inherit;
    transition: color 0.15s;
}

.ho-back-btn:hover {
    color: var(--slate-700);
}

.ho-new-hint {
    font-size: 13px;
    text-align: center;
    margin: -4px 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
}

.ho-new-hint-info {
    color: var(--color-primary);
    background: var(--color-primary-bg);
}

.ho-btn-confirm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--cashier-confirm), #3cb580);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(83, 206, 152, 0.3);
}

.ho-btn-confirm:hover {
    background: linear-gradient(135deg, #3cb580, #2da06e);
    box-shadow: 0 4px 16px rgba(83, 206, 152, 0.4);
    transform: translateY(-1px);
}

.ho-btn-confirm:disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* ───────────────────────────────────────────────────────────
   Cashier Wizard (csh- prefix)
   ─────────────────────────────────────────────────────────── */
.csh-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.csh-wizard {
    width: 100%;
    max-width: 680px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 28px 32px 24px;
    position: relative;
    animation: ho-fade-in 0.3s ease;
}

@media (max-width: 767.98px) {
    .csh-wizard { padding: 20px 16px 16px; }
}

/* ── Header ── */
.csh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.csh-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.csh-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    flex-shrink: 0;
}

.csh-icon-opening { background: var(--color-success-bg); color: var(--color-success); }
.csh-icon-closing { background: var(--color-warning-bg); color: var(--color-warning); }

.csh-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0;
    line-height: 1.2;
}

.csh-subtitle {
    font-size: 12px;
    color: var(--slate-500);
    margin: 2px 0 0;
}

.csh-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    background: #fff;
    color: var(--slate-400);
    cursor: pointer;
    transition: all 0.15s;
}

.csh-close-btn:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-bg);
}

/* ── Steps progress bar ── */
.csh-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 0 20px;
}

.csh-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-400);
    transition: color 0.2s ease;
}

.csh-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--slate-300);
    color: var(--slate-400);
    background: #fff;
    transition: all 0.2s ease;
}

.csh-step.active .csh-step-num {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.csh-step.active { color: var(--color-primary); }

.csh-step.completed .csh-step-num {
    border-color: var(--color-success);
    background: var(--color-success);
    color: #fff;
}

.csh-step.completed { color: var(--color-success); }

.csh-step-line {
    flex: 1;
    height: 2px;
    background: var(--slate-200);
    margin: 0 8px;
    transition: background 0.2s ease;
    min-width: 24px;
}

.csh-step-line.completed { background: var(--color-success); }

/* ── Denomination grid ── */
.csh-denom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    padding-left: 80px;
}

@media (max-width: 600px) {
    .csh-denom-grid { grid-template-columns: 1fr; gap: 16px 0; }
}

.csh-denom-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--slate-500);
    margin-bottom: 10px;
    padding-left: 2px;
}

.csh-denom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    height: 38px;
}

.csh-denom-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 72px;
    flex-shrink: 0;
    padding: 0 10px;
    height: 100%;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    font-size: 14px;
    color: var(--slate-700);
    box-sizing: border-box;
}

.csh-denom-label b {
    font-weight: 700;
    font-size: 15px;
    min-width: 28px;
    text-align: right;
}

.csh-denom-label small {
    font-size: 10px;
    font-weight: 500;
    color: var(--slate-400);
    text-transform: uppercase;
}

/* Cent denominations: smaller number to visually distinguish from euros */
.csh-denom-cent .csh-denom-label b {
    font-size: 13px;
    color: var(--slate-500);
}

.csh-denom-cent .csh-denom-label small {
    font-size: 9px;
}

.csh-denom-input {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
    min-width: 0;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    padding: 0 6px;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    background: #fff;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.csh-denom-input::placeholder {
    color: var(--slate-300);
    font-weight: 400;
}

.csh-denom-input:hover { border-color: var(--slate-400); }

.csh-denom-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
    z-index: 1;
}

/* ── Live total bar ── */
.csh-total-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    margin: 12px 0 0;
    background: var(--slate-50);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-600);
}

.csh-total-amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--slate-800);
    font-family: var(--font-mono);
}

/* ── Action buttons ── */
.csh-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--slate-100);
}

.csh-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.csh-btn-primary:hover {
    background: var(--color-primary-focus);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.csh-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--slate-100);
    color: var(--slate-600);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.csh-btn-secondary:hover {
    background: var(--slate-200);
    color: var(--slate-800);
}

.csh-btn-confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--cashier-confirm), #3cb580);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(83, 206, 152, 0.25);
}

.csh-btn-confirm:hover {
    background: linear-gradient(135deg, #3cb580, #2da06e);
    box-shadow: 0 4px 12px rgba(83, 206, 152, 0.35);
    transform: translateY(-1px);
}

.csh-btn-confirm:disabled {
    opacity: 0.35;
    pointer-events: none;
    box-shadow: none;
}

/* ── Error card ── */
.csh-error-card {
    border: 1px solid #fecaca;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    animation: ho-fade-in 0.2s ease;
}

.csh-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}

.csh-error-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: #dc2626;
    margin: 0;
}

.csh-error-body {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--slate-700);
    background: #fff;
}

/* ── Transactions card ── */
.csh-transactions-card {
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    animation: ho-fade-in 0.2s ease;
}

.csh-transactions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-700);
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
    margin: 0;
}

.csh-tx-scroll {
    max-height: 280px;
    overflow-y: auto;
}

.csh-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.csh-tx-table thead th {
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--slate-500);
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
    text-align: left;
}

.csh-tx-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--slate-100);
    color: var(--slate-700);
}

.csh-tx-table tbody tr:hover td { background: var(--slate-50); }

.csh-tx-table code {
    font-size: 10px;
    color: var(--slate-500);
}

.csh-tx-hint {
    padding: 8px 16px 10px;
    font-size: 11px;
    font-style: italic;
    color: var(--slate-400);
    margin: 0;
}

/* ── Justification card ── */
.csh-justify-card {
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
    animation: ho-fade-in 0.2s ease;
}

.csh-justify-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-700);
    margin: 0 0 10px;
}

.csh-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 2px solid var(--slate-200);
    border-radius: 10px;
    background: var(--slate-50);
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.csh-textarea:focus {
    border-color: var(--color-primary);
    background: #fff;
    outline: none;
}

.csh-justify-footer {
    margin-top: 8px;
}

.csh-char-progress {
    height: 3px;
    background: var(--slate-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.csh-char-bar {
    height: 100%;
    width: 0%;
    background: var(--color-warning);
    border-radius: 3px;
    transition: width 0.15s ease, background 0.15s ease;
}

.csh-char-bar-full {
    background: var(--color-success);
}

.csh-char-hint {
    font-size: 11px;
    color: var(--slate-400);
}

/* ── Escalation warning ── */
.csh-escalation-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    margin-bottom: 8px;
    animation: ho-fade-in 0.2s ease;
}

.csh-escalation-card .csh-escalation-icon {
    flex-shrink: 0;
    color: #d97706;
    margin-top: 1px;
}

.csh-escalation-card p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    line-height: 1.5;
}

.csh-escalation--severe {
    background: #fef2f2;
    border-color: #ef4444;
}

.csh-escalation--severe .csh-escalation-icon {
    color: #dc2626;
}

.csh-escalation--severe p {
    color: #991b1b;
}

/* ── Structured reason list ── */
.csh-reason-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.csh-reason-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px solid var(--slate-200);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 13px;
    color: var(--slate-700);
}

.csh-reason-option label:hover {
    border-color: var(--slate-300);
    background: var(--slate-50);
}

.csh-reason-option input[type=radio] {
    display: none;
}

.csh-reason-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--slate-300);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
}

.csh-reason-option input[type=radio]:checked ~ .csh-reason-radio {
    border-color: var(--color-primary);
}

.csh-reason-option input[type=radio]:checked ~ .csh-reason-radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.csh-reason-option input[type=radio]:checked ~ span:last-child {
    font-weight: 600;
    color: var(--color-primary);
}

/* ── Co-sign card ── */
.csh-cosign-card {
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
    background: #eef2ff;
    animation: ho-fade-in 0.2s ease;
}

.csh-cosign-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #4338ca;
    margin: 0 0 6px;
}

.csh-cosign-desc {
    font-size: 12px;
    color: #6366f1;
    margin: 0 0 12px;
}

.csh-cosign-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.csh-sig-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    font-size: 16px;
    font-family: 'Brush Script MT', 'Segoe Script', cursive;
    border: 2px solid #c7d2fe;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
}

.csh-sig-input:focus {
    border-color: #6366f1;
    outline: none;
}

.csh-sig-expected {
    font-family: 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 15px;
    color: #4338ca;
}

.csh-cosign-status {
    font-size: 12px;
    color: var(--slate-400);
}

.csh-cosign-status.csh-sig-ok {
    color: #15803d;
    font-weight: 600;
}

.csh-cosign-status.csh-sig-bad {
    color: #b91c1c;
    font-weight: 600;
}

/* ── Terminal Check (shift handover reconciliation) ── */
.csh-tc-card {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    animation: ho-fade-in 0.2s ease;
}

.csh-tc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #92400e;
    margin-bottom: 8px;
}

.csh-tc-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.csh-tc-intro {
    font-size: 14px;
    color: #78350f;
    line-height: 1.5;
    margin: 0 0 14px 0;
}

.csh-tc-system-total {
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #78350f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.csh-tc-system-amount {
    font-weight: 700;
    font-size: 18px;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.csh-tc-tx-details {
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 14px;
}

.csh-tc-tx-details > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #78350f;
    user-select: none;
    list-style: none;
}

.csh-tc-tx-details > summary::-webkit-details-marker { display: none; }

.csh-tc-tx-count {
    display: inline-block;
    background: #fde68a;
    color: #78350f;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 700;
    margin-left: 6px;
}

.csh-tc-tx-scroll {
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid #fde68a;
}

.csh-tc-photo-card,
.csh-tc-typed-card,
.csh-tc-mismatch-card,
.csh-tc-sig-card {
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.csh-tc-subtitle {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 700;
    color: #78350f;
}

.csh-tc-hint {
    font-size: 12px;
    color: var(--slate-500);
    margin: 0 0 10px 0;
    line-height: 1.45;
}

.csh-tc-photo-btn {
    background: #fff;
    border: 2px dashed #fbbf24;
    color: #78350f;
    padding: 14px 18px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.csh-tc-photo-btn:hover {
    background: #fffbeb;
    border-color: #f59e0b;
}

.csh-tc-photo-preview {
    margin-top: 10px;
    text-align: center;
    position: relative;
}

.csh-tc-photo-preview img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
}

.csh-tc-photo-retake {
    background: #fff;
    border: 1px solid var(--slate-300);
    color: var(--slate-700);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 6px;
}

.csh-tc-skip-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #b45309;
    text-decoration: underline;
}

.csh-tc-typed-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #78350f;
    margin-bottom: 8px;
}

.csh-tc-typed-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.csh-tc-currency {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-700);
}

.csh-tc-typed-input {
    flex: 1;
    padding: 10px 14px;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    border: 2px solid #fcd34d;
    border-radius: 8px;
    background: #fff;
}

.csh-tc-typed-input:focus {
    outline: none;
    border-color: #f59e0b;
}

.csh-tc-match-status {
    margin-top: 8px;
    font-size: 13px;
    min-height: 18px;
}

.csh-tc-match-ok { color: #15803d; font-weight: 600; }
.csh-tc-match-bad { color: #b91c1c; font-weight: 600; }

.csh-tc-mismatch-card {
    border-color: #fca5a5;
    background: #fef2f2;
}

.csh-tc-sig-render {
    margin-top: 8px;
    min-height: 28px;
    font-family: 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 22px;
    color: #1e293b;
    border-bottom: 1px dashed var(--slate-300);
    padding: 4px 0;
}

/* Skip overlay */
.csh-tc-skip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.csh-tc-skip-modal {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.csh-tc-skip-modal h4 {
    margin: 0 0 6px 0;
    font-size: 17px;
    color: #b91c1c;
}

.csh-tc-skip-evidence {
    margin: 14px 0;
    padding: 12px;
    background: var(--slate-50);
    border-radius: 8px;
}

/* ── Envelope card ── */
.csh-envelope-card {
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    animation: ho-fade-in 0.2s ease;
}

.csh-envelope-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cashier-envelope-bg);
    border-bottom: 1px solid #c7d2fe;
}

.csh-envelope-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--cashier-envelope-icon);
    margin: 0;
}

.csh-envelope-body {
    padding: 16px;
    font-size: 14px;
    line-height: 2;
    color: var(--slate-700);
    text-align: center;
}

.csh-envelope-confirm-card {
    margin-bottom: 8px;
}

.csh-envelope-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.csh-envelope-check input[type="checkbox"] {
    display: none;
}

.csh-envelope-check-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    transition: all 0.15s;
}

.csh-envelope-check-box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.15s;
}

.csh-envelope-check input:checked + .csh-envelope-check-box {
    background: #fff;
    border-color: #fff;
}

.csh-envelope-check input:checked + .csh-envelope-check-box svg {
    opacity: 1;
    transform: scale(1);
    stroke: #dc2626;
}

/* ── Spinner overlay ── */
.csh-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    z-index: 10;
}


/* ══════════════════════════════════════════════════════════════
   INVENTORY-SPECIFIC
   ══════════════════════════════════════════════════════════════ */

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-150);
}

.inventory-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.inventory-item .inv-info {
    flex: 1;
    min-width: 0;
}

.inventory-item .inv-name {
    font-weight: 600;
    color: var(--slate-800);
    font-size: 14px;
}

.inventory-item .inv-stock {
    font-size: 13px;
    color: var(--slate-500);
    font-family: var(--font-mono);
}


/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination .page-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination .page-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pagination .page-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   WEEK SHIFTER (booking calendar)
   ══════════════════════════════════════════════════════════════ */

.week-shifter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.week-shifter .week-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-700);
    min-width: 160px;
    text-align: center;
}

.week-shifter .btn {
    padding: 6px 12px;
}

/* Calendar day grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-day {
    background: #fff;
    padding: 8px;
    min-height: 100px;
}

.calendar-day-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-500);
    margin-bottom: 4px;
}

.calendar-day.today {
    background: #eff6ff;
}

.calendar-slot {
    font-size: 12px;
    padding: 2px 6px;
    margin-bottom: 2px;
    border-radius: var(--radius);
    cursor: pointer;
}

.calendar-slot:hover {
    opacity: 0.8;
}


/* ══════════════════════════════════════════════════════════════
   GRAPHS (satisfaction / crowd)
   ══════════════════════════════════════════════════════════════ */

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding-top: 8px;
}

.bar-chart .bar {
    flex: 1;
    min-width: 20px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--color-primary);
    transition: height var(--transition-base);
    position: relative;
}

.bar-chart .bar-label {
    font-size: 10px;
    color: var(--slate-500);
    text-align: center;
    margin-top: 4px;
}

/* Stat cards (star rating, etc.) */
.stat-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 140px;
    padding: 16px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--slate-150);
    text-align: center;
}

.stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--slate-800);
    font-family: var(--font-mono);
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--slate-500);
    margin-top: 4px;
}

.stat-card .stat-sub {
    font-size: 12px;
    color: var(--slate-400);
    margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════
   BATCH SEPARATOR (orders)
   ══════════════════════════════════════════════════════════════ */

.batch-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    margin: 8px 0;
}

.batch-separator::before,
.batch-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--slate-200);
}

.batch-separator .batch-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-400);
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   LOAD MORE (floating)
   ══════════════════════════════════════════════════════════════ */

.load-more-btn {
    display: block;
    margin: 16px auto;
    padding: 8px 24px;
    font-size: 14px;
}


/* ══════════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════════ */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 12px;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-error, .alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}


/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */

/* Wrapper — full viewport, centered */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

/* Background — subtle gradient */
.login-body {
    background: linear-gradient(135deg, var(--slate-100) 0%, #e8e4f0 50%, var(--slate-100) 100%);
}

/* Card */
.login-card {
    width: 100%;
    max-width: 420px;
    padding: 40px 36px 32px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 40px -4px rgba(79, 70, 229, 0.10);
    border: 1px solid rgba(79, 70, 229, 0.06);
    text-align: center;
    animation: loginFadeIn 0.5s ease-out;
}

@keyframes loginFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Decorative lock icon circle */
.login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.30);
}

/* Title */
.login-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}

/* Subtitle */
.login-subtitle {
    font-size: 14px;
    color: var(--slate-400);
    margin: 0 0 28px;
    font-weight: 400;
}

/* Error alert inside login */
.login-alert {
    text-align: left;
    margin-bottom: 8px;
}

/* Form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

/* Field group */
.login-field {
    margin-bottom: 16px;
}
.login-field:last-of-type {
    margin-bottom: 0;
}
.login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Input wrapper with icon */
.login-input-wrap {
    position: relative;
}

.login-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-400);
    pointer-events: none;
    transition: color var(--transition-base);
}

.login-input-wrap:focus-within .login-input-icon {
    color: var(--color-primary);
}

.login-form input,
.login-input-wrap input {
    width: 100%;
    padding: 11px 12px 11px 40px;
    background: var(--slate-50);
    border: 1.5px solid var(--slate-200);
    border-radius: 6px;
    font-size: 15px;
    color: var(--slate-800);
    transition:
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
    outline: none;
}

.login-form input::placeholder,
.login-input-wrap input::placeholder {
    color: var(--slate-400);
    font-weight: 400;
}

.login-form input:hover,
.login-input-wrap input:hover {
    border-color: var(--slate-300);
    background: #fff;
}

.login-form input:focus,
.login-input-wrap input:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* Submit button — full width, taller */
.login-submit {
    margin-top: 16px;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-md);
    letter-spacing: 0.3px;
    transition:
        background var(--transition-base),
        box-shadow var(--transition-base),
        transform 100ms ease;
}

.login-submit:hover {
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.login-submit:active {
    transform: scale(0.98);
}

/* Forgot password link */
.login-forgot {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
}
.login-forgot a {
    color: var(--slate-400);
    text-decoration: none;
    transition: color 0.15s;
}
.login-forgot a:hover {
    color: #6c5ce7;
}

/* Footer text */
.login-footer {
    margin: 28px 0 0;
    font-size: 12px;
    color: var(--slate-400);
    font-weight: 400;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .login-card {
        padding: 32px 24px 24px;
    }
}


/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */

/* Display */
.hidden     { display: none !important; }
.block      { display: block; }
.inline     { display: inline; }
.inline-block { display: inline-block; }
.flex       { display: flex; }
.inline-flex { display: inline-flex; }
.grid       { display: grid; }

/* Flex */
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1 1 0%; }
.shrink-0       { flex-shrink: 0; }
.grow           { flex-grow: 1; }

/* Grid */
.place-items-center { place-items: center; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Gap */
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }

/* Spacing */
.space-x-2 > * + * { margin-left: 8px; }
.space-x-3 > * + * { margin-left: 12px; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }

/* Margin */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-20 { margin-top: 80px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.ml-0 { margin-left: 0; }
.ml-2 { margin-left: 8px; }
.ml-4 { margin-left: 16px; }
.ml-9 { margin-left: 36px; }
.mr-2 { margin-right: 8px; }
.mr-4 { margin-right: 16px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0  { padding: 0; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px;  padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pt-2 { padding-top: 8px; }
.pt-4 { padding-top: 16px; }
.pb-2 { padding-bottom: 8px; }

/* Width / Height */
.w-full { width: 100%; }
.w-6  { width: 24px; }
.w-7  { width: 28px; }
.w-8  { width: 32px; }
.w-10 { width: 40px; }
.w-11 { width: 44px; }
.h-6  { height: 24px; }
.h-7  { height: 28px; }
.h-10 { height: 40px; }
.h-11 { height: 44px; }
.min-w-0 { min-width: 0; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

/* Text */
.text-xs   { font-size: 12px; }
.text-sm   { font-size: 13px; }
.text-base { font-size: 15px; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.uppercase   { text-transform: uppercase; }
.capitalize  { text-transform: capitalize; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

/* Colors */
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger, .text-error { color: var(--color-error); }
.text-info     { color: var(--color-info); }
.text-muted    { color: var(--slate-500); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-700 { color: var(--slate-700); }
.text-slate-800 { color: var(--slate-800); }
.text-white    { color: #fff; }

/* Background */
.bg-primary    { background: var(--color-primary); }
.bg-success    { background: var(--color-success); }
.bg-warning    { background: var(--color-warning); }
.bg-danger     { background: var(--color-error); }
.bg-info       { background: var(--color-info); }
.bg-white      { background: #fff; }
.bg-slate-50   { background: var(--slate-50); }
.bg-slate-100  { background: var(--slate-100); }
.bg-slate-150  { background: var(--slate-150); }

/* Border */
.border    { border: 1px solid var(--slate-200); }
.border-t  { border-top: 1px solid var(--slate-200); }
.border-b  { border-bottom: 1px solid var(--slate-200); }
.border-l  { border-left: 1px solid var(--slate-200); }
.border-r  { border-right: 1px solid var(--slate-200); }
.border-primary { border-color: var(--color-primary); }
.rounded      { border-radius: var(--radius); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow     { box-shadow: var(--shadow-soft); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Transition */
.transition { transition: all var(--transition-base); }
.transition-colors { transition: color var(--transition-base), background-color var(--transition-base); }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Responsive display */
.d-none    { display: none; }
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-inline-flex { display: inline-flex; }

@media (min-width: 768px) {
    .d-md-none  { display: none; }
    .d-md-block { display: block; }
    .d-md-flex  { display: flex; }
}

@media (max-width: 767.98px) {
    .d-mobile-none { display: none; }
}

/* Print */
.print-hidden { }

@media print {
    .print-hidden,
    .print\:hidden {
        display: none !important;
    }

    .sidebar,
    .header,
    .toast-container,
    .network-banner,
    .modal-overlay {
        display: none !important;
    }

    .page-container {
        margin: 0 !important;
        padding: 10px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   SETTINGS / JSON EDITOR
   ══════════════════════════════════════════════════════════════ */

.json-editor {
    font-family: var(--font-mono);
    font-size: 13px;
    min-height: 300px;
    resize: vertical;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 12px;
}


/* ══════════════════════════════════════════════════════════════
   ORDERS — INCOME SUMMARY & TABLE (matching OrdersCart.vue)
   ══════════════════════════════════════════════════════════════ */

/* Income alert — Vue uses alert alert-info col-md-5 */
/* ══════════════════════════════════════════════════════════════
   ORDERS PAGE — Redesigned
   ══════════════════════════════════════════════════════════════ */

.orders-page {
    padding: 16px 10px 24px;
}

/* ── Page header ── */

.orders-page-header {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.orders-page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0;
    letter-spacing: -0.3px;
}

.orders-page-subtitle {
    font-size: 13px;
    color: var(--slate-400);
    margin: 0;
    font-weight: 400;
}

/* ── Income summary cards ── */

.income-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 1100px) {
    .income-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .income-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.income-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 6px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.income-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.income-card__icon {
    color: var(--slate-400);
    margin-bottom: 0;
}

.income-card__icon svg {
    width: 16px;
    height: 16px;
}

.income-card__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--slate-400);
    line-height: 1.2;
}

.income-card__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--slate-800);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

/* Card accent colors */
.income-card--total {
    background: linear-gradient(135deg, #faf9ff 0%, #fff 100%);
}
.income-card--total .income-card__value { color: var(--color-primary); }
.income-card--total .income-card__label { color: var(--color-primary); opacity: 0.7; }

.income-card--cash .income-card__icon { color: var(--color-success); }

.income-card--card .income-card__icon { color: #3b82f6; }

.income-card--bank .income-card__icon { color: var(--color-warning); }

.income-card--web .income-card__icon { color: #8b5cf6; }

.income-card--partner .income-card__icon { color: #4338ca; }


/* ── Orders table card ── */

.orders-table-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.orders-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.orders-tbl {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    width: 100%;
    min-width: 960px;
}

/* Round the top corners of the first header row */
.orders-tbl thead th:first-child { border-top-left-radius: var(--radius-lg); }
.orders-tbl thead th:last-child  { border-top-right-radius: var(--radius-lg); }

/* Round the bottom corners of the last body row */
.orders-tbl tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.orders-tbl tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-lg); }
.orders-tbl tbody tr:last-child td              { padding-bottom: 12px; }

/* ── Table head ── */

.orders-tbl thead tr {
    background: var(--slate-50);
}

.orders-tbl thead th {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--slate-500);
    vertical-align: bottom;
    white-space: nowrap;
    line-height: 1.3;
    padding: 26px 10px 6px;
    text-align: center;
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
    border-right: 3px solid rgba(0, 0, 0, 0.01);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.orders-tbl thead th:last-child {
    border-right: none;
}

.orders-tbl thead.is-stuck th {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.orders-tbl thead th.col-user,
.orders-tbl thead th.col-dt {
    text-align: left;
}

/* Vertical labels for ticket columns */
.v-label {
    writing-mode: vertical-rl;
    text-align: left;
    transform: rotate(-180deg);
    height: auto;
    line-height: 14px;
    display: block;
    font-weight: 600;
    margin: 0 auto;
    padding-top: 6px;
    white-space: nowrap;
}

/* Column widths */
.orders-tbl .col-user   { min-width: 80px; padding-left: 11px; }
.orders-tbl .col-dt     { min-width: 100px; }
.orders-tbl .col-qty    { width: 44px; padding: 5px 4px; }
.orders-tbl .col-amount { min-width: 56px; }
.orders-tbl .col-note   { width: 44px; }
.orders-tbl .col-status { min-width: 80px; }
.orders-tbl .col-action { width: 80px; padding-right: 16px; }

/* ── Table body ── */

.orders-tbl tbody tr {
    transition: background-color 0.15s ease;
}

.orders-tbl tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--slate-100);
}

.orders-tbl tbody tr:hover {
    background-color: #f8faff;
}

.orders-tbl tbody td {
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.3;
    padding: 5px 10px;
    text-align: center;
    color: var(--slate-700);
    height: 40px;
}

/* Cell variants */
.cell-user {
    text-align: left !important;
    font-weight: 500;
    color: var(--slate-800) !important;
    padding-left: 16px !important;
}

.cell-dt {
    text-align: left !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 12px !important;
    color: var(--slate-500) !important;
    font-family: var(--font-mono);
    font-weight: 600;
}

.cell-num {
    font-variant-numeric: tabular-nums;
}

.cell-total {
    font-weight: 600;
    color: var(--slate-800) !important;
}

.cell-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding-right: 16px !important;
}

/* ── Status pills ── */

.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6;
}

.status--saved {
    background: #dcfce7;
    color: #166534;
}

.status--pending {
    background: #fef3c7;
    color: #92400e;
}

.status--abandoned {
    background: #fffbeb;
    color: #fcd34d;
}

.status--cancelled {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Small pills (discount, bank) ── */

.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pill--red {
    background: #fee2e2;
    color: #b91c1c;
}

/* Compact manual-entry warning badge — red circle with "!" instead of the
   bulkier "manual" pill. Tooltip on hover provides the full context. */
.manual-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b91c1c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
}

/* Partner abbreviation badge — superscript on the discount pill.
   position:absolute so it never reflows the cell or shifts the pill. */
.discount-pill-wrap {
    position: relative;
    display: inline-block;
    /* Right-padding extends the wrap's hit area to cover the absolutely
       positioned partner badge — without this, hovering the badge falls
       outside the .cc-tip wrap and no tooltip fires. */
    padding-right: 18px;
}
.partner-abbr-badge {
    position: absolute;
    top: -6px;
    /* Anchor by the LEFT edge so 1-letter and 2-letter abbreviations both
       start at the same point (badge grows rightward, never leftward).
       Wrap has 18 px right-padding (hit-area for the badge), so the pill's
       right edge sits at calc(100% − 18px). Badge starts 4 px before that
       (was 8 px before in the previous version → 4 px further right). */
    left: calc(100% - 20px);
    text-align: left;
    background: #4338ca;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    /* Tooltip lives on the parent wrap — let hover bubble through. */
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ── Split card payment in the sales list ─────────────────────────────
   A sale settled with 2+ card charges (e.g. 81 € as 30 € + 51 €). The row
   must keep its exact height — stacking the charges under the amount made
   the row taller and broke the rhythm of the table — so the marker is
   absolutely positioned like .partner-abbr-badge above and the per-charge
   breakdown lives in the tooltip. Verified: every row stays 40 px, in both
   Chrome and Safari, from 1500 px down to 768 px. */
.split-wrap {
    position: relative;
    display: inline-block;
    /* Right-padding extends the hover area to cover the absolutely positioned
       badge, so pointing at the badge still fires the wrap's tooltip. The
       negative margin cancels that padding's effect on LAYOUT only: this
       column is right-aligned, so without it the amount shifts 10 px left and
       split rows stop lining up with the plain ones. Measured. */
    padding-right: 20px;
    margin-right: -20px;
    cursor: help;
}
.split-badge {
    position: absolute;
    top: -8px;
    /* Anchored by its LEFT edge so "2x" and "3x" start at the same point and
       the badge only ever grows rightwards, never back over the amount. */
    left: calc(100% - 20px);
    background: #4338ca;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 7px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    /* The white ring separates the badge from the amount behind it, which is
       what makes it findable when scanning a dense list. */
    border: 1.5px solid #fff;
    /* Tooltip lives on the parent wrap — let hover bubble through. */
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(67, 56, 202, 0.45);
}
.split-wrap .split-amount {
    color: #4338ca;
    border-bottom: 1px dashed #4338ca;
    padding-bottom: 1px;
}

.pill--amber {
    background: #fef3c7;
    color: #92400e;
}

/* Partner-receivable pill — same indigo family as the .partner-abbr-badge so
   the link between "discount applied by partner X" and "money owed by X" is
   visually obvious in the sales table. */
.pill--indigo {
    background: #e0e7ff;
    color: #4338ca;
}

.pill--orange {
    background: #ffedd5;
    color: #9a3412;
}

.pill--orange {
    background: #fff7ed;
    color: #c2410c;
}

/* ── Card warning (no match / double match) ── */
.cell-card-warning {
    color: #b91c1c;
    background: #fef2f2;
}

/* ── Reverted / abandoned sale rows ──
   Dim the money columns so the operator can still see the original payment
   method (cash / card / bank) that was attached before the sale was reverted
   or abandoned, without mistaking it for a live amount. */
.cart-row--reverted .cell-num,
.cart-row--reverted .cell-total {
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ── Crowd pill ── */

.crowd-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    min-width: 32px;
    background: rgba(79, 70, 229, 0.1);
    color: #5550a2;
}

/* Crowd color zones — matching production Vue (OrdersCart.vue) */
/* 4-tier crowd colors matching production PHP crowdColors(): */
/* Default (below suboptimal): #ebeaff / #6b6a91 — gray/purple */
/* Suboptimal (approaching min): #ffa052 / #fff — orange */
/* OK (within min–max ideal range): #7cff96 / #40874e — green */
/* Over (above max): #ff6b6b / #fff — red */
.crowd-default    { background: #ebeaff; color: #6b6a91; }
.crowd-suboptimal { background: #ffa052; color: #fff; }
.crowd-ok         { background: #7cff96; color: #40874e; }
.crowd-over       { background: #ff6b6b; color: #fff; }

/* Queue event indicator (speech bubble icon next to crowd pill) */
.queue-indicator {
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
    margin-left: 2px;
    cursor: help;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}
.queue-indicator:hover { opacity: 1; }
.queue-icon-yes { filter: hue-rotate(320deg) saturate(2); }
.queue-icon-no  { filter: hue-rotate(90deg) saturate(1.5); }

/* Queue size badge — top-right of crowd pill, absolute so it doesn't affect centering */
.crowd-pill-wrap {
    position: relative;
    display: inline-block;
}
.queue-badge {
    position: absolute;
    top: -5px;
    left: calc(100% - 4px);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: auto;
    cursor: help;
    color: #fff;
}
.queue-badge-ok   { background: #16a34a; }
.queue-badge-warn { background: #dc2626; }

/* ── Action buttons ── */

.act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.act-btn--cancel {
    background: #fff1f0;
    color: #dc2626;
}
.act-btn--cancel:hover {
    background: #fecaca;
}

.act-btn--print {
    background: #eff6ff;
    color: #2563eb;
}
.act-btn--print:hover {
    background: #dbeafe;
}

.act-btn--refund {
    background: #fffbeb;
    color: #b45309;
}
.act-btn--refund:hover {
    background: #fef3c7;
}

/* ── Tooltip (hover product detail) ── */

.has-tooltip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.has-tooltip .order-tt {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 888;
    padding: 10px 12px;
    background: #fff;
    color: var(--slate-700);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    white-space: nowrap;
    min-width: 200px;
}

.has-tooltip:hover .order-tt {
    display: block;
}

.order-tt table {
    width: 100%;
    font-size: 12px;
}

.order-tt td { padding: 3px 4px; }
.order-tt .tt-name { text-align: left; padding-left: 8px; }
.order-tt .tt-price { text-align: right; font-variant-numeric: tabular-nums; color: var(--slate-500); }
.order-tt .tt-img { width: 32px; }
.order-tt .tt-img img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; background: var(--slate-100); }

/* ── Note tooltip ── */

.note-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.note-trigger .note-bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 888;
    padding: 8px 12px;
    background: #fff;
    color: var(--slate-700);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    font-size: 12px;
    max-width: 280px;
    min-width: 120px;
    text-align: left;
    line-height: 1.5;
}

.note-trigger:hover .note-bubble {
    display: block;
}

/* ── Spinner ── */

.orders-spinner {
    text-align: center;
    padding: 60px 0;
}

/* ── Empty state ── */

.orders-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--slate-400);
}

.orders-empty svg { margin: 0 auto 12px; }

.orders-empty p {
    font-size: 14px;
    margin: 0;
}

/* ── Pagination ── */

.orders-pag {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 0;
}

.pag-center {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--slate-200);
    background: #fff;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1;
}

.pag-btn:hover:not(.pag-active):not(.pag-disabled) {
    background: var(--slate-50);
    border-color: var(--slate-300);
    color: var(--slate-800);
}

.pag-btn.pag-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

.pag-btn.pag-arrow {
    padding: 0 8px;
    color: var(--slate-500);
}

.pag-btn.pag-arrow:hover:not(.pag-disabled) {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(79, 70, 229, 0.04);
}

.pag-btn.pag-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Ellipsis dots button */
.pag-ellipsis {
    display: inline-flex;
    align-items: center;
}

.pag-dots-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--slate-400);
    font-size: 16px;
    letter-spacing: 2px;
    min-width: 36px;
    cursor: pointer;
}

.pag-dots-btn:hover {
    border-color: var(--slate-200);
    background: var(--slate-50);
    color: var(--color-primary);
    border-radius: var(--radius-md);
}

/* Jump-to input (appears when ellipsis is clicked) */
.pag-jump {
    width: 56px;
    height: 36px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-800);
    outline: none;
    background: #fff;
    -moz-appearance: textfield;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.pag-jump::-webkit-inner-spin-button,
.pag-jump::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Hide native number-input spinners on inputs marked .no-spin. */
input.no-spin { -moz-appearance: textfield; appearance: textfield; }
input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* "Page X of Y" label */
.pag-info {
    font-size: 12px;
    color: var(--slate-400);
    margin-left: 12px;
    white-space: nowrap;
    font-weight: 400;
}

/* ── Cancel modal (redesigned) ── */

.orders-cancel-modal {
    max-width: 440px;
}

.cancel-step {
    padding: 8px 0;
}

.cancel-prompt {
    font-size: 14px;
    color: var(--slate-600);
    margin: 0 0 20px;
    line-height: 1.5;
}

.cancel-actions {
    display: flex;
    gap: 10px;
}

.btn-confirm-yes {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-error);
    background: var(--color-error);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-confirm-yes:hover { opacity: 0.9; }

.btn-confirm-no {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    background: #fff;
    color: var(--slate-600);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-confirm-no:hover { background: var(--slate-50); }

.cancel-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: var(--font-body);
    resize: vertical;
    color: var(--slate-700);
    transition: border-color var(--transition-fast);
    margin-bottom: 16px;
}
.cancel-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.btn-revert {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-error);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-revert:hover { opacity: 0.9; }
.btn-revert:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Refund modal ── */

.orders-refund-modal {
    max-width: 480px;
}

.refund-context {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-100);
    font-size: 12px;
    color: var(--slate-500);
}
.refund-context strong { color: var(--slate-700); }

.orders-refund-modal .refund-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
}

.orders-refund-modal .refund-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--slate-500);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
}
.orders-refund-modal .refund-tab:hover { background: var(--slate-50); color: var(--slate-700); }
.orders-refund-modal .refund-tab.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.orders-refund-modal .refund-tab.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.card-unavailable-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--slate-400);
    background: var(--slate-50);
    border-radius: var(--radius-md);
}

.card-confirm-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.card-confirm-banner p { margin: 0; font-size: 12px; color: #1e40af; line-height: 1.5; }
.card-digits {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: 0.1em;
}
.card-brand { font-size: 11px; color: #3b82f6; font-weight: 500; }

.refund-form-group {
    margin-bottom: 16px;
}
.refund-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    margin-bottom: 6px;
}

.refund-input,
.refund-textarea,
.refund-amount-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--slate-700);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    outline: none;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}
.refund-input:focus,
.refund-textarea:focus,
.refund-amount-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.refund-input--mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.refund-textarea { resize: vertical; min-height: 56px; }
.refund-amount-input {
    font-size: 16px;
    text-align: center;
    max-width: 200px;
    padding: 8px;
}
.refund-hint {
    font-size: 11px;
    color: var(--slate-400);
    margin-top: 4px;
}

.refund-success {
    text-align: center;
    padding: 32px 24px;
}
.refund-success-icon {
    width: 56px;
    height: 56px;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.refund-success h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--slate-800);
    margin: 0 0 6px;
}
.refund-success p {
    font-size: 13px;
    color: var(--slate-500);
    margin: 0 0 20px;
}
.refund-success-details {
    background: var(--slate-50);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    text-align: left;
    margin-bottom: 16px;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: var(--slate-600);
    border-bottom: 1px solid var(--slate-100);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--slate-400); }
.detail-value {
    font-weight: 600;
    color: var(--slate-700);
    max-width: 220px;
    text-align: right;
}

.spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 600ms linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}


/* ══════════════════════════════════════════════════════════════
   BOOKINGS MANAGE PAGE — Redesigned (orders-style table)
   ══════════════════════════════════════════════════════════════ */

.bookings-page {
    padding: 16px 10px 24px;
}

/* ── Page header ── */

.bookings-page-header {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.bookings-page-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.bookings-page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0;
    letter-spacing: -0.3px;
}

.bookings-page-subtitle {
    font-size: 13px;
    color: var(--slate-400);
    margin: 0;
    font-weight: 400;
}

.bookings-page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Date filter pill (inline date jump) ── */

.bookings-date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bookings-date-filter input[type="date"] {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--slate-700);
    background: #fff;
    outline: none;
    transition: border-color var(--transition-fast);
}

.bookings-date-filter input[type="date"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* ── Filter bar ── */

.bookings-filter-bar {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
}
.bookings-filter-bar .filter-btn {
    padding: 7px 16px;
    border: 1px solid var(--slate-200);
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-500);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.15s ease;
}
.bookings-filter-bar .filter-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.bookings-filter-bar .filter-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.bookings-filter-bar .filter-btn:not(:first-child) {
    margin-left: -1px;
}
.bookings-filter-bar .filter-btn:hover {
    background: var(--slate-50);
    color: var(--slate-700);
}
.bookings-filter-bar .filter-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    position: relative;
    z-index: 1;
}
.bookings-filter-bar .filter-btn--postpaid.active {
    background: #d97706;
    border-color: #d97706;
}

/* ── Table card ── */

.bookings-table-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bookings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table ── */

.bookings-tbl {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    width: 100%;
    min-width: 1100px;
}

/* Rounded corners on header */
.bookings-tbl thead th:first-child { border-top-left-radius: var(--radius-lg); }
.bookings-tbl thead th:last-child  { border-top-right-radius: var(--radius-lg); }

/* Rounded corners on last row */
.bookings-tbl tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.bookings-tbl tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-lg); }
.bookings-tbl tbody tr:last-child td              { padding-top: 10px; padding-bottom: 12px; }

/* ── Table head (thick, matching orders-tbl style) ── */

.bookings-tbl thead tr {
    background: var(--slate-50);
}

.bookings-tbl thead th {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--slate-500);
    vertical-align: bottom;
    white-space: nowrap;
    line-height: 1.3;
    padding: 20px 10px 8px;
    text-align: center;
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    border-right: 3px solid rgba(0, 0, 0, 0.01);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.bookings-tbl thead th:last-child {
    border-right: none;
}

.bookings-tbl thead.is-stuck th {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10);
}

/* Column widths */
.bookings-tbl .bk-col-actions   { width: 90px; text-align: center; padding-left: 6px; }
.bookings-tbl .bk-col-date     { width: 82px; text-align: left; }
.bookings-tbl .bk-col-time     { width: 50px; text-align: center; }
.bookings-tbl .bk-col-code     { min-width: 100px; text-align: center; }
.bookings-tbl .bk-col-tags     { min-width: 100px; text-align: center; }
.bookings-tbl .bk-col-visitor-count  { width: 60px; text-align: right; padding-right: 10px; }
.bookings-tbl .bk-col-visitor-detail { min-width: 160px; text-align: center; }
.bookings-tbl .bk-col-visit    { width: 44px; text-align: center; }
.bookings-tbl .bk-cell-visit   { text-align: center; }
.bookings-tbl .bk-col-amount   { width: 68px; text-align: right; padding-right: 10px; }
.bookings-tbl .bk-col-name     { min-width: 130px; text-align: left; padding-left: 10px; }
.bookings-tbl .bk-col-email    { min-width: 160px; text-align: left; }
.bookings-tbl .bk-col-phone    { min-width: 110px; text-align: left; }
.bookings-tbl .bk-col-id       { width: 52px; text-align: center; }
.bookings-tbl .bk-col-bankref  { min-width: 150px; text-align: center; }

.bk-cell-bankref {
    text-align: center !important;
    font-family: var(--font-mono);
    font-size: 10.5px !important;
    color: var(--slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* ── Table body ── */

.bookings-tbl tbody tr {
    transition: background-color 0.15s ease;
}

.bookings-tbl tbody tr:not(:last-child):not(.bk-separator-row):not(.bk-today-divider) td {
    border-bottom: 1px solid var(--slate-100);
}

.bookings-tbl tbody tr:hover:not(.bk-separator-row):not(.bk-today-divider) {
    background-color: #f8faff;
}

.bookings-tbl tbody td {
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.2;
    padding: 2px 6px;
    color: var(--slate-700);
    height: 30px;
}

/* ── Cell variants ── */

.bk-cell-actions {
    text-align: center !important;
    padding: 2px 4px !important;
    white-space: nowrap;
}

.bk-cell-actions .act-btn {
    margin: 0 1px;
}

.bk-cell-id {
    text-align: center !important;
    font-family: var(--font-mono);
    font-size: 12px !important;
    color: var(--slate-400) !important;
    font-variant-numeric: tabular-nums;
}

.bk-cell-dt {
    text-align: left !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 12px !important;
    color: var(--slate-600) !important;
    font-family: var(--font-mono);
    font-weight: 600;
}

.bk-cell-time {
    text-align: center !important;
    font-family: var(--font-mono);
    font-size: 13px !important;
    font-weight: 600;
    color: var(--slate-700) !important;
}

.bk-cell-code {
    text-align: center !important;
    font-size: 12px !important;
}

.bk-cell-code b {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--slate-500);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.bk-cell-tags {
    text-align: center !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.bk-cell-visitor-count {
    text-align: right !important;
    padding-right: 10px;
}

.bk-cell-visitor-detail {
    text-align: center !important;
}

.bk-cell-amount {
    text-align: right !important;
    padding-right: 10px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
}

/* Name cell — narrow visible width but full text remains scrollable.
   The <td> just sets the width; the inner <div.bk-cell-name-inner> is the
   real scroll container (overflow-x:auto on a <td> is unreliable across
   browsers). Browser Cmd+F auto-scrolls overflow:auto containers to bring
   the highlighted match into view, even when it sits past the visible edge.
   Scrollbar hidden for a clean look; a right-edge fade mask replaces the
   ellipsis as the "more text" affordance. */
.bk-cell-name {
    text-align: left !important;
    font-weight: 500;
    color: var(--slate-800) !important;
    max-width: 180px;
    padding-left: 10px !important;
}
.bk-cell-name-inner {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.bk-cell-name-inner::-webkit-scrollbar { display: none; }

.bk-cell-email {
    text-align: left !important;
    font-size: 12px !important;
    color: var(--slate-500) !important;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-cell-phone {
    text-align: left !important;
    font-family: var(--font-mono);
    font-size: 12px !important;
    color: var(--slate-500) !important;
    white-space: nowrap;
}

/* ── Cancelled row ── */

.bookings-tbl tbody tr.bk-cancelled {
    opacity: 0.40;
}

.bookings-tbl tbody tr.bk-cancelled:hover {
    opacity: 0.60;
}

.bookings-tbl tbody tr.bk-cancelled td {
    text-decoration-color: var(--slate-300);
}

/* ── Week separator (between past-week batches) ──
   Subtle grey gap band. No line — the visual break is purely the
   small empty band between rows. */

.bk-separator-row td {
    background: #fafafa !important;
    height: 30px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 30px !important;
}

/* ── TODAY divider ──
   Tapered indigo "plane-wing" line that fades to transparent at both
   edges, with the TODAY label cutting the line on a white background.
   The row is vertically centered with even spacing above and below. */

.bk-today-divider td {
    position: relative;
    height: 38px;
    background: #fff !important;
    text-align: center;
    vertical-align: middle;
    padding: 0 !important;
    border: none !important;
}

.bk-today-divider .bk-today-wing {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(79, 70, 229, 0)   0%,
        rgba(79, 70, 229, .5) 35%,
        rgba(79, 70, 229, .5) 65%,
        rgba(79, 70, 229, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.bk-today-divider .bk-today-lbl {
    position: relative;
    display: inline-block;
    padding: 0 18px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    z-index: 2;
}

/* ── Action buttons for bookings ── */

.act-btn--edit {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.act-btn--edit:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.act-btn--invite {
    background: #f3f0ff;
    color: #6c5ce7;
    border: 1px solid #ddd6fe;
}
.act-btn--invite:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.act-btn--info {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.act-btn--info:hover {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

.act-btn--move {
    background: #f3f0ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}
.act-btn--move:hover {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #c4b5fd;
}

/* Edit Slot icon button */
.edit-slot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--slate-400);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.edit-slot-btn:hover {
    background: var(--slate-100);
    color: var(--slate-600);
}
.edit-slot-btn svg {
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   BOOKINGS AGENDA
   ══════════════════════════════════════════════════════════════ */

.booking-agenda-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.booking-agenda-table th {
    background: #50cdd2;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.booking-agenda-table td {
    padding: 8px 12px;
    font-size: 14px;
    vertical-align: middle;
}

.booking-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

/* Booking form inline */
.booking-form-inline {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.booking-form-inline .form-group {
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════
   STAT CARDS (Payments Summary)
   ══════════════════════════════════════════════════════════════ */

.payment-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.payment-stat-card {
    padding: 14px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-150);
    box-shadow: var(--shadow-soft);
}

.payment-stat-card .stat-label {
    font-size: 12px;
    color: var(--slate-500);
    margin-bottom: 4px;
}

.payment-stat-card .stat-value {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--slate-800);
}


/* ══════════════════════════════════════════════════════════════
   NEW VERSION ALERT (from Vue App.vue)
   ══════════════════════════════════════════════════════════════ */

.new_version_block {
    background-color: red;
    width: 40%;
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 30px;
    color: #fff;
    z-index: 99999;
    padding: 20px;
    border-radius: var(--radius-md);
    text-align: center;
}

.new_version_block a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .new_version_block {
        width: calc(100% - 20px);
        margin: 10px;
        bottom: 10px;
        right: 0;
        left: 0;
        font-size: 13px;
        padding: 12px;
    }
}


/* ══════════════════════════════════════════════════════════════
   BLINK ANIMATION (from NavBar.vue — alert indicator)
   ══════════════════════════════════════════════════════════════ */

.blinkButton {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49%  { opacity: 0.4; }
    50%, 100% { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════
   SATISFACTION (star ratings + period table)
   ══════════════════════════════════════════════════════════════ */

.star-rating {
    display: inline-flex;
    gap: 2px;
}

.star-rating .star {
    color: #fbbf24;
    font-size: 18px;
}

.star-rating .star.empty {
    color: var(--slate-300);
}

.nps-score {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-mono);
}

.response-rate {
    font-size: 14px;
    color: var(--slate-500);
}

/* ── Satisfaction page layout ── */

.sat-page {
    padding: 16px 10px 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.sat-cards {
    margin-bottom: 20px;
}

/* ── Period toggle ── */

.sat-period-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}

.sat-period-btn {
    background: rgba(79, 70, 229, 0.1);
    color: #448dfd;
    border: none;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.sat-period-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.sat-period-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.sat-period-btn:hover {
    background: #448dfd;
    color: #fff;
}

.sat-period-btn--active {
    background: #448dfd;
    color: #fff;
}

/* ── Sparkline chart card ── */

.sat-chart-card {
    margin-bottom: 12px;
    padding: 12px 0 0;
}

.sat-chart-area {
    padding: 0 16px 12px;
}

.sat-chart-area svg {
    display: block;
    max-width: 100%;
}

.sat-chart-legend {
    display: flex;
    gap: 14px;
    padding: 0 16px 10px;
    font-size: 10px;
    color: var(--slate-500);
    flex-wrap: wrap;
}

.sat-legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

/* ── Satisfaction table (zoomed bar) ── */

.sat-tbl {
    min-width: 500px;
}

.sat-tbl thead th {
    padding: 8px 16px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--slate-400);
}

.sat-col-date {
    text-align: left !important;
    width: 120px;
}

.sat-col-rating {
    text-align: right !important;
    width: 48px;
}

.sat-col-bar {
    text-align: left !important;
}

.sat-bar-scale {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--slate-400);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* ── Table body cells ── */

.sat-cell-date {
    text-align: left !important;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 400;
    color: var(--slate-500);
    white-space: nowrap;
    padding: 5px 16px !important;
}

.sat-cell-rating {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 5px 16px !important;
}

.sat-cell-bar {
    padding: 5px 16px !important;
}

/* ── Zoomed bar (4.0–5.0 mapped to 0–100%) ── */

.sat-bar-wrap {
    position: relative;
    height: 16px;
    background: var(--slate-100);
    border-radius: 3px;
    overflow: hidden;
}

.sat-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Tick at 50% (= 4.5 on the 4.0–5.0 scale) */
.sat-bar-wrap::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148, 163, 184, 0.3);
    z-index: 2;
}

/* ── Table row hover ── */
.sat-tbl tbody tr {
    transition: background 150ms ease;
}

.sat-tbl tbody tr:hover {
    background: var(--slate-50);
}

/* ── Sticky header shadow for sat table ── */

.sat-tbl thead.is-stuck th {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ── Satisfaction: Side-by-side layout (Alt 3) ── */
.sat-split {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.sat-split-left {
    flex: 1;
    min-width: 0;
}
.sat-split-right {
    flex: 0 0 360px;
    position: sticky;
    top: 72px;
}
@media (max-width: 960px) {
    .sat-split { flex-direction: column; }
    .sat-split-right { flex: none; width: 100%; position: static; }
}

/* ── Comment panel ── */
.sat-comment-header {
    padding: 12px 16px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--slate-400);
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sat-comment-header svg { width: 14px; height: 14px; flex-shrink: 0; }
.sat-comment-header .sat-comment-count {
    margin-left: auto;
    font-weight: 400;
    color: var(--slate-300);
}
.sat-comment-feed {
    max-height: 520px;
    overflow-y: auto;
}
.sat-comment-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--slate-100);
    transition: background var(--transition-fast);
}
.sat-comment-item:last-child { border-bottom: none; }
.sat-comment-item:hover { background: var(--slate-50); }
.sat-comment-item.sat-comment-recent {
    background: rgba(79, 70, 229, 0.03);
}
.sat-comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--slate-400);
}
.sat-comment-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate-700);
}
.sat-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    border-radius: var(--radius);
    color: #fff;
    padding: 0 5px;
}
.sat-comment-date {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--slate-400);
}
.sat-comment-date strong {
    font-weight: 600;
    color: var(--slate-700);
}
.sat-comment-meta--sub {
    margin-top: -2px;
    margin-bottom: 6px;
}
.sat-review-chip {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 500;
    /* slate-400 on slate-100 measured 2.34:1, below the 4.5:1 AA floor,
       so the caption is darkened to stay readable at 10px. */
    color: var(--slate-600);
    background: var(--slate-100);
    border-radius: var(--radius);
    padding: 1px 6px;
}
.sat-days-ago {
    font-size: 10px;
    font-weight: 500;
    color: var(--slate-400);
    white-space: nowrap;
}
.sat-days-ago.recent {
    color: var(--color-accent);
    font-weight: 600;
}
.sat-lang-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--slate-400);
    background: var(--slate-100);
    border-radius: var(--radius);
    padding: 1px 5px;
}
.sat-recent-tag {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-accent);
    border-radius: var(--radius);
    padding: 1px 5px;
    line-height: 1.4;
    vertical-align: middle;
    margin-left: 2px;
}
.sat-comment-note {
    padding: 10px 14px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--slate-400);
    background: var(--slate-50);
    border-top: 1px solid var(--slate-100);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sat-comment-note svg {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(232, 148, 190, 0.45));
    animation: sat-heart-glow 3s ease-in-out infinite;
}
@keyframes sat-heart-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(232, 148, 190, 0.3)); }
    50%      { filter: drop-shadow(0 0 10px rgba(196, 148, 240, 0.55)); }
}
.sat-comment-note strong {
    font-weight: 600;
    color: var(--slate-500);
}


/* ══════════════════════════════════════════════════════════════
   CROWD & ALERTS (from CrowdAndAlerts.vue)
   ══════════════════════════════════════════════════════════════ */

.crowd-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crowd-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 60px;
    height: 36px;
    padding: 0 8px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    background: var(--crowd-default-bg);
    color: var(--crowd-default-color);
    cursor: pointer;
    border: none;
}

.crowd-count.green {
    background: var(--crowd-green-bg);
    color: var(--crowd-green-color);
}

.crowd-count.strong {
    background: var(--crowd-strong-bg);
    color: var(--crowd-strong-color);
}

.crowd-count.red {
    background: var(--crowd-red-bg);
    color: var(--crowd-red-color);
}

/* ══════════════════════════════════════════════════════════════
   HAND-OVER PAGE
   ══════════════════════════════════════════════════════════════ */

.handover-status {
    text-align: center;
    padding: 32px 20px;
}

.handover-status .status-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.handover-status .status-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 8px;
}

.handover-status .status-sub {
    font-size: 14px;
    color: var(--slate-500);
    margin-bottom: 20px;
}

.user-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.user-select-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: #fff;
    border: 2px solid var(--slate-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.user-select-card:hover {
    border-color: var(--color-primary);
}

.user-select-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.user-select-card .user-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.user-select-card .user-card-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-700);
}


/* ══════════════════════════════════════════════════════════════
   ENVELOPE CHECK (verification with counting)
   ══════════════════════════════════════════════════════════════ */

.envelope-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.envelope-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--cashier-envelope-bg);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
}

.envelope-card:hover {
    box-shadow: var(--shadow-md);
}

.envelope-card .env-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: rgba(99, 96, 182, 0.15);
    color: var(--cashier-envelope-icon);
}

.envelope-card .env-info {
    flex: 1;
}

.envelope-card .env-user {
    font-weight: 600;
    color: var(--slate-800);
}

.envelope-card .env-date {
    font-size: 12px;
    color: var(--slate-500);
}

.envelope-card .env-amount {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    color: var(--slate-800);
}

.envelope-card.verified {
    background: var(--color-success-bg);
}

.envelope-card.discrepancy {
    background: var(--color-error-bg);
}


/* ══════════════════════════════════════════════════════════════
   CASHIER COUNTED LIST
   ══════════════════════════════════════════════════════════════ */

.counted-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.counted-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-150);
}

.counted-item .counted-user {
    font-weight: 600;
    color: var(--slate-800);
}

.counted-item .counted-date {
    font-size: 12px;
    color: var(--slate-500);
}

.counted-item .counted-amount {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
}


/* ══════════════════════════════════════════════════════════════
   POS-TABLE  (spreadsheet-like, from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

.pos-table {
    border-collapse: collapse;
    width: 100%;
    background-color: white;
    font-family: Arial, sans-serif;
    font-size: 13px;
    border: 1px solid #e0e0e0;
}

.pos-table thead {
    position: sticky;
    top: -1px;
    background-color: #f8f9fa;
    z-index: 2;
}

.pos-table th {
    white-space: nowrap;
    text-align: left;
    padding: 3px 8px;
    font-weight: 500;
    color: #202124;
    border: 1px solid #d0d0d0;
    background-color: #f8f9fa;
    height: 21px;
    line-height: 21px;
    font-size: 11px;
}

.pos-table td {
    white-space: nowrap;
    padding: 3px 8px;
    text-align: left;
    border: 1px solid #d0d0d0;
    background-color: white;
    height: 21px;
    line-height: 21px;
    vertical-align: middle;
    position: relative;
}

.pos-table tbody tr:hover td {
    background-color: #f5f5f5;
}

.pos-table .amount-class {
    font-family: var(--font-mono);
    text-align: right;
}


/* ══════════════════════════════════════════════════════════════
   VISITOR BADGES (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

.visitor-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    gap: 3px;
    transition: opacity 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.visitor-badge-adults {
    background-color: rgba(70, 120, 229, 0.12);
    color: #3b5cc6;
}

.visitor-badge-children {
    background-color: rgba(229, 120, 70, 0.12);
    color: #c06028;
}

.visitor-badge-free-adults {
    background-color: rgba(120, 229, 70, 0.12);
    color: #4a9e2a;
}

.visitor-badge-free-children {
    background-color: rgba(229, 70, 229, 0.12);
    color: #a03aa0;
}

.visitor-badge-reduced {
    background-color: rgba(255, 193, 7, 0.14);
    color: #9a7406;
}

.visitor-badge-total {
    background-color: rgba(100, 100, 110, 0.14);
    color: #555;
}

.visitor-badge.faded {
    opacity: 0.20;
}


/* ══════════════════════════════════════════════════════════════
   TOOLTIP WRAPPER (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

/* Tooltip uses position:fixed so it escapes any ancestor with
   overflow:hidden / overflow-x:auto (e.g. .bookings-table-wrap).
   JS sets the actual top/left on hover via positionTooltipWrapper(). */
.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px 8px;
    border-radius: 4px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.18s;
    font-size: 12px;
    pointer-events: none;
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   BOOKING CODE BADGES (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

.code-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    margin: 1px 2px;
    letter-spacing: 0.2px;
}

.code-badge-group      { background-color: #dbeafe; color: #1e40af; }
.code-badge-underpaid  { background-color: #ffedd5; color: #9a3412; }
.code-badge-overpaid   { background-color: #fef9c3; color: #854d0e; }
.code-badge-paid       { background-color: #dcfce7; color: #166534; }
.code-badge-cancelled  { background-color: #fee2e2; color: #991b1b; }
.code-badge-toobig     { background-color: #fee2e2; color: #991b1b; text-align: center; }
.code-badge-manual     { background-color: #f3e8ff; color: #6b21a8; }
.code-badge-refunded   { background-color: #fff7ed; color: #9a3412; }
.code-badge-postpaid           { background-color: #fed7aa; color: #9a3412; }
.code-badge-postpaid-converted { background-color: #fecaca; color: #7f1d1d; }

/* ══════════════════════════════════════════════════════════════
   REFUND MODAL — tab switcher + panels
   ══════════════════════════════════════════════════════════════ */

.refund-tabs {
    display: flex;
    gap: 0;
    padding-top: 8px;
}

.refund-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-400);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}

.refund-tab:hover {
    color: var(--slate-600);
}

.refund-tab.active {
    color: #9a3412;
    border-bottom-color: #9a3412;
}

.refund-tab.refund-tab--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════════
   BATCH SEPARATOR (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

.separator-row td {
    background-color: #ef4444 !important;
    height: 4px !important;
    padding: 0 !important;
    border-color: #ef4444 !important;
    line-height: 4px !important;
}


/* ══════════════════════════════════════════════════════════════
   TODAY'S BOOKINGS (from Vue Bookings.vue)
   ══════════════════════════════════════════════════════════════ */

.booking-hour-group {
    margin-bottom: 0;
}

.booking-hour-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-bottom: none;
    font-size: 13px;
}

.booking-hour-header.current-hour {
    background: #c2f6c3;
    font-weight: bold;
}

.booking-hour-label {
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-mono);
    min-width: 50px;
}

.booking-hour-count {
    font-size: 12px;
    color: var(--slate-500);
}

.booking-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.booking-list-table td {
    padding: 4px 8px;
    border: 1px solid var(--slate-200);
    vertical-align: middle;
    white-space: nowrap;
}

.booking-list-table tr:hover td {
    background-color: #f5f5f5;
}

.booking-list-table tr.taked td {
    background-color: #e3eef6;
    opacity: 0.4;
}

.booking-list-table tr.hour-found td {
    background: #c2f6c3;
    font-weight: bold;
}

.booking-list-scrollable {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: auto;
}


/* ══════════════════════════════════════════════════════════════
   WEB BOOKING LIST (POS — overlays pay-grid)
   ══════════════════════════════════════════════════════════════ */

.booking-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.booking-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 1px solid var(--slate-150);
    flex-shrink: 0;
}

.booking-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.booking-overlay-close:hover {
    background: var(--slate-200);
    color: var(--slate-700);
}

/* Soft-red close button — only on the partner picker overlay.
   Operators were missing the default grey ×, so this variant makes
   the affordance unmistakable. Other overlays (web bookings, card
   selection) keep the original neutral close button. */
.partner-overlay .booking-overlay-close {
    width: 30px;
    height: 30px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 18px;
    font-weight: 700;
}
.partner-overlay .booking-overlay-close:hover {
    background: #fecaca;
    color: #b91c1c;
}

.web-booking-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.web-booking-list::-webkit-scrollbar {
    display: none;
}

.web-booking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.web-booking-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--slate-200);
    vertical-align: middle;
    white-space: nowrap;
}

.web-booking-table tr:hover td {
    background: #f5f5f5;
}

.web-booking-table tr.taked {
    pointer-events: none;
    cursor: default;
}
.web-booking-table tr.taked td {
    background: #e3eef6;
    opacity: 0.5;
}

.web-booking-table tr.hour-found td {
    background: #c2f6c3;
    font-weight: bold;
}

.web-booking-table tr.hour-found .web-booking-time {
    color: green;
    font-weight: 700;
}

.web-booking-btn-cell {
    width: 34px;
    text-align: center;
    vertical-align: middle;
}

.btn-attach-booking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    color: var(--slate-300);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

.btn-attach-booking:hover:not(:disabled) {
    color: var(--color-primary);
}

.btn-attach-booking:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.web-booking-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.web-booking-time {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--slate-600);
}

.web-booking-amount {
    text-align: right;
    font-family: var(--font-mono);
}

.web-booking-persons {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--slate-600);
    white-space: nowrap;
}

.web-booking-empty {
    border: 1px solid #dee2e6;
    border-top: 0;
    padding: 10px 20px;
    border-radius: 0 0 8px 8px;
    color: var(--slate-400);
    text-align: center;
    font-size: 13px;
}

/* Ghost booking rows (rescheduled away from today) */
.web-booking-table tr.ghost-booking {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.02) 4px,
        rgba(0, 0, 0, 0.02) 8px
    );
    cursor: pointer;
}
.web-booking-table tr.ghost-booking td {
    opacity: 0.55;
    font-style: italic;
    border-bottom: 1px dashed var(--slate-200);
}
.web-booking-table tr.ghost-booking:hover td {
    opacity: 0.8;
    background: rgba(99, 102, 241, 0.06);
}
.ghost-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    background: var(--slate-200);
    color: var(--slate-500);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

/* Ghost booking popup */
.ghost-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ghost-popup {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.ghost-popup h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--slate-800);
}
.ghost-popup p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--slate-600);
    line-height: 1.5;
}
.ghost-popup .ghost-detail {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0 16px;
    font-size: 12px;
}
.ghost-popup .ghost-detail dt {
    display: inline;
    font-weight: 600;
    color: var(--slate-500);
}
.ghost-popup .ghost-detail dd {
    display: inline;
    margin: 0 12px 0 4px;
    color: var(--slate-700);
}
.ghost-popup-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
.ghost-popup-actions button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background var(--transition-fast);
}
.ghost-btn-dismiss {
    background: var(--slate-100);
    color: var(--slate-600);
}
.ghost-btn-dismiss:hover {
    background: var(--slate-200);
}
.ghost-btn-accept {
    background: var(--color-primary);
    color: #fff;
}
.ghost-btn-accept:hover {
    background: var(--color-primary-hover, #4338ca);
}


/* ══════════════════════════════════════════════════════════════
   RADIO FILTER BUTTONS (from Vue Payments/index.vue)
   ══════════════════════════════════════════════════════════════ */

.radio-filter-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.radio-filter-group input[type="radio"] {
    display: none;
}

.radio-filter-group label {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--primary-500);
    border-radius: var(--radius-md);
    color: var(--primary-500);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.radio-filter-group input[type="radio"]:checked + label {
    background: var(--primary-500);
    color: #fff;
}

.radio-filter-group label:hover {
    background: rgba(79, 70, 229, 0.08);
}


/* ══════════════════════════════════════════════════════════════
   ACTIONS DROPDOWN (from Vue Payments/index.vue)
   ══════════════════════════════════════════════════════════════ */

.actions-dropdown {
    position: relative;
    display: inline-block;
}

.actions-dropdown .dropdown-toggle {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: #fff;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
}

/* Dropdown caret arrow (matches production blue dropdown buttons) */
.actions-dropdown .dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px solid #fff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.actions-dropdown .dropdown-toggle:hover {
    background: var(--primary-600);
}

.actions-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 100;
    padding: 6px;
    margin-top: 4px;
}

.actions-dropdown.open .dropdown-menu {
    display: block;
}

.actions-dropdown .dropdown-item {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: #333;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.actions-dropdown .dropdown-item:hover {
    background: #f3f4f6;
}

.actions-dropdown .dropdown-item--danger {
    color: #b91c1c;
    font-weight: 500;
}

.actions-dropdown .dropdown-item--danger:hover {
    background: #fee2e2;
    color: #991b1b;
}


/* ══════════════════════════════════════════════════════════════
   INVENTORY PAGE — Redesigned (orders-style table)
   ══════════════════════════════════════════════════════════════ */

/* ── Inventory-specific table overrides ── */

.inv-tbl {
    min-width: 1060px;
    table-layout: fixed;
}

.inv-tbl td,
.inv-tbl th {
    white-space: nowrap;
    vertical-align: middle;
}

/* Column widths (table-layout:fixed — widths are strict, title takes remaining space) */
.inv-tbl .col-inv-eye     { width: 100px; text-align: center; padding: 0 6px; }
.inv-tbl .col-inv-pic     { width: 100px; text-align: center; }
.inv-tbl .col-inv-title   { width: auto; text-align: left; padding-left: 14px; }
.inv-tbl .col-inv-actions { width: 300px; white-space: nowrap; padding-right: 10px; }
.inv-tbl .col-qty         { width: 72px; }

.inv-tbl thead th.col-inv-eye     { text-align: center; }
.inv-tbl thead th.col-inv-pic     { text-align: center; }
.inv-tbl thead th.col-inv-title   { text-align: left; padding-left: 14px; }
.inv-tbl thead th.col-inv-actions { text-align: center; }

/* ── Per-row action buttons ── */

.cell-inv-actions {
    white-space: nowrap;
}

.cell-inv-actions .inv-act {
    margin-left: 4px;
}

.cell-inv-eye {
    text-align: center;
    vertical-align: middle !important;
    padding: 0 4px !important;
}

.inv-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.inv-act--eye {
    background: #eff6ff;
    color: #3b82f6;
}
.inv-act--eye:hover {
    background: #dbeafe;
}
.inv-act--eye.inv-act--off {
    background: var(--slate-100);
    color: var(--slate-400);
}

.inv-act--add {
    background: #f0fdf4;
    color: #22c55e;
}
.inv-act--add:hover {
    background: #dcfce7;
}

.inv-act--history {
    background: #eff6ff;
    color: #3b82f6;
}
.inv-act--history:hover {
    background: #dbeafe;
}

.inv-act--edit {
    background: #f5f3ff;
    color: var(--color-primary);
}
.inv-act--edit:hover {
    background: #ede9fe;
}

/* ── Picture thumbnail ── */

.cell-inv-pic {
    text-align: center !important;
    vertical-align: middle !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.inv-thumb {
    width: 38px;
    height: 38px;
    overflow: hidden;
    background: var(--slate-100);
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
}

.inv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.inv-thumb__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 15px;
    line-height: 38px;
    color: var(--slate-400);
    position: absolute;
    top: 0;
    left: 0;
}

.inv-thumb--empty {
    cursor: default;
}



/* ── Title cell ── */

.cell-inv-title {
    text-align: left !important;
    padding-left: 14px !important;
    font-weight: 500;
    color: var(--slate-800) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Inventory color tags (modernised) ── */

.inv-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: center;
    line-height: 1.6;
}

.inv-tag--green {
    background: #dcfce7;
    color: #166534;
}

.inv-tag--orange {
    background: #fef3c7;
    color: #92400e;
}

.inv-tag--red {
    background: #fee2e2;
    color: #991b1b;
}

.inv-tag--neutral {
    background: var(--slate-100);
    color: var(--slate-500);
}

/* ── Statistics skeleton loaders (shimmer placeholders) ─────────── */
.stats-skel {
    display: block;
    position: relative;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.10) 40%,
        rgba(0, 0, 0, 0.06) 80%);
    background-size: 200% 100%;
    animation: statsSkelShimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    overflow: hidden;
}
.stats-skel-line {
    height: 12px;
    margin: 8px 0;
    width: 100%;
}
.stats-skel-line--short  { width: 35%; }
.stats-skel-line--medium { width: 60%; }
.stats-skel-line--title  { height: 18px; width: 30%; margin-bottom: 14px; }
.stats-skel-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.stats-skel-chart {
    height: 220px;
    border-radius: 8px;
}
.stats-skel-chart--tall {
    height: 320px;
}
.stats-skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
@keyframes statsSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading placeholder — shimmer bar */
.inv-loading-placeholder {
    display: inline-block;
    width: 36px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
    background-size: 200% 100%;
    animation: inv-shimmer 1.4s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes inv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade-in when data arrives */
.inv-cell-loaded {
    animation: inv-fadeIn 0.3s ease-out;
}

@keyframes inv-fadeIn {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

/* ── Discontinued row ── */

.inv-row--discontinued {
    opacity: 0.45;
}

/* ── Bottom action bar ── */

.inv-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.inv-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    background: #fff;
    color: var(--slate-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.3;
}

.inv-bar-btn:hover {
    background: var(--slate-50);
    border-color: var(--slate-300);
}

.inv-bar-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.inv-bar-btn--primary:hover {
    background: var(--color-primary-focus);
    border-color: var(--color-primary-focus);
    color: #fff;
}

.inv-bar-btn--add {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}
.inv-bar-btn--add:hover {
    background: #dcfce7;
}

.inv-bar-btn--toggle {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.inv-bar-btn--toggle:hover {
    background: #dbeafe;
}

.inv-bar-btn--go {
    padding: 6px 14px;
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.inv-bar-btn--go:hover {
    background: var(--color-primary-focus);
    border-color: var(--color-primary-focus);
    color: #fff;
}

.inv-bar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
}

.inv-bar-group__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.inv-bar-select {
    padding: 4px 8px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--slate-700);
    background: #fff;
    cursor: pointer;
}

/* Legacy tag classes (kept for backward compatibility) */
.custom-tag-color {
    border-radius: 4px;
    padding: 4px;
}
.orange-pale { background-color: #ffce77; }
.green-pale  { background-color: #adff77; }
.red-pale    { background-color: #ff8277; }

/* Vertical header cells (legacy, kept for other pages) */
.vertical-title-cell {
    text-align: center;
    height: 96px;
    vertical-align: bottom;
    padding-bottom: 4px !important;
}

/* ── Inline restocking input (right column) ── */

.inv-inline-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

input.inv-inline-field {
    width: 46px;
    height: 28px;
    padding: 2px 4px;
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: #fff;
}

.inv-inline-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.inv-act--save {
    background: #f0fdf4;
    color: #22c55e;
}
.inv-act--save:hover {
    background: #dcfce7;
}

.inv-act--cancel {
    background: #fef2f2;
    color: #ef4444;
}
.inv-act--cancel:hover {
    background: #fee2e2;
}

/* ── Hide / Discontinue Product Modal — Glass Morph Toggles ── */

.inv-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--slate-100);
}

.inv-toggle-row:last-child {
    border-bottom: none;
}

.inv-glass-toggle {
    display: inline-flex;
    position: relative;
    background: linear-gradient(135deg, var(--slate-100) 0%, var(--slate-150) 100%);
    border-radius: var(--radius-lg);
    padding: 4px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    width: 100%;
}

.inv-glass-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    left: 4px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 0 1px rgba(79,70,229,0.08);
    transition: left var(--transition-base);
    z-index: 0;
}

.inv-glass-toggle.checked .inv-glass-slider {
    left: calc(50%);
}

.inv-glass-label {
    position: relative;
    z-index: 1;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-400);
    width: 50%;
    text-align: center;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.inv-glass-label.active {
    color: var(--color-primary);
    font-weight: 700;
}

/* ── Product History Modal ── */

.hist-modal {
    max-width: 1340px;
    width: 96vw;
}

.hist-modal__header {
    padding: 10px 20px !important;
}

.hist-modal__title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hist-modal__subtitle {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
}

.hist-modal__body {
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    padding: 0 !important;
}

.hist-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--color-primary, #6c5ce7);
    gap: 10px;
    font-size: 13px;
}

.hist-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

/* ── Summary cards (compact) ── */

.hist-summary {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.hist-card {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.hist-card__value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hist-card__value--neg {
    color: #dc2626;
}

.hist-card__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.hist-card--purchased { background: #f0fdf4; }
.hist-card--purchased .hist-card__value,
.hist-card--purchased .hist-card__label { color: #16a34a; }

.hist-card--removed { background: #fef2f2; }
.hist-card--removed .hist-card__value,
.hist-card--removed .hist-card__label { color: #dc2626; }

.hist-card--disappeared { background: #fefce8; }
.hist-card--disappeared .hist-card__value,
.hist-card--disappeared .hist-card__label { color: #a16207; }

.hist-card--sales { background: #fff7ed; }
.hist-card--sales .hist-card__value,
.hist-card--sales .hist-card__label { color: #ea580c; }

.hist-card--stock { background: #eff6ff; }
.hist-card--stock .hist-card__value,
.hist-card--stock .hist-card__label { color: #2563eb; }

/* ── Product History Timeline Table ── */

.tl-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tl-th {
    padding: 4px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 26px;
}
.tl-th--type { width: 90px; }
.tl-th--date { width: 110px; }
.tl-th--desc { }
.tl-th--qty  { width: 48px; text-align: right; }
.tl-th--run  { width: 62px; text-align: right; }
.tl-th--stock { font-weight: 700; }

.tl-row {
    height: 28px;
    max-height: 30px;
}
.tl-row:hover {
    background: #f8fafc !important;
}

.tl-td {
    padding: 2px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    line-height: 1.3;
    height: 28px;
    max-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tl-td--type { white-space: nowrap; }
.tl-td--date {
    font-variant-numeric: tabular-nums;
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.tl-td--desc {
    color: #475569;
    font-size: 11px;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-desc__note {
    margin-left: 2px;
    font-size: 10px;
    color: #94a3b8;
    cursor: help;
    padding: 4px;
    display: inline-block;
}
.tl-desc__note svg {
    vertical-align: -1px;
}
.tl-desc__note--warn {
    color: #dc2626;
}
.tl-desc__note--warn svg {
    stroke: #dc2626;
}

.tl-td--qty {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
}

.tl-qty--pos { color: #16a34a; }
.tl-qty--neg { color: #dc2626; }

.tl-td--run {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
    font-size: 11px;
}

/* Highlighted running total = value changed on this row */
.tl-run--changed {
    color: #334155 !important;
    font-weight: 600;
}

.tl-td--stock {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
    font-size: 12px;
}

/* Per-location stock columns */
.tl-th--loc {
    width: 56px;
    text-align: right;
    font-size: 9px;
    border-left: 1px solid #e2e8f0;
}
.tl-td--loc {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
    font-size: 11px;
    border-left: 1px solid #f1f5f9;
}

.tl-neg {
    color: #dc2626 !important;
}

.tl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
}

.tl-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Constrain ALL SVGs inside the timeline table to prevent giant icons */
.tl-tbl svg {
    width: 12px;
    height: 12px;
    max-width: 14px;
    max-height: 14px;
    display: inline;
    vertical-align: -2px;
    flex-shrink: 0;
}

.tl-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   SETTINGS (from Vue Settings.vue)
   ══════════════════════════════════════════════════════════════ */

.json-editor textarea {
    width: 100%;
    height: 400px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    border: 1px solid #555;
    padding: 10px;
    border-radius: 6px;
    resize: vertical;
    white-space: pre;
    overflow: auto;
}


/* ══════════════════════════════════════════════════════════════
   FRONTEND TABLE — BookingAgenda (compact, indigo)
   ══════════════════════════════════════════════════════════════ */

.frontend-table {
    font-size: 11px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.frontend-table th {
    background: var(--primary, #4F46E5);
    color: #fff;
    padding: 5px 4px;
    font-weight: 500;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid color-mix(in srgb, var(--primary, #4F46E5) 80%, #000);
}

.frontend-table th:first-child {
    border-radius: 6px 0 0 0;
}

.frontend-table th:last-child {
    border-radius: 0 6px 0 0;
}

.frontend-table td {
    height: auto;
    padding: 0;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.frontend-table td.slot-container {
    background-color: #fff;
    padding: 1px 2px;
    text-align: center;
    font-size: 11px;
    min-width: 40px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.frontend-table td.slot-container:hover {
    background-color: #f5f3ff;
}

.frontend-table td.slot-container.selected-container {
    background-color: #e0e7ff;
}

.frontend-table .slot {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    background-color: transparent;
    color: #444;
    font-weight: 400;
    height: 18px;
    line-height: 18px;
    margin: 0;
    border-radius: 3px;
    font-size: 10.5px;
    padding: 0 2px;
    text-decoration: none;
    transition: all 0.15s;
}

.frontend-table .slot:hover {
    color: #fff;
    background-color: var(--primary, #4F46E5);
}

.frontend-table .slot.selected-slot {
    background-color: var(--primary, #4F46E5) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--primary, #4F46E5) 60%, #000);
}

.frontend-table .unavailable {
    color: #d4d4d4;
    display: block;
    height: 18px;
    line-height: 18px;
    margin: 0;
    padding: 0 2px;
    font-size: 10.5px;
}

.blocked-day {
    min-width: 80px;
    width: 14.285%;
    background-color: #fafafa;
    border: none;
}

.blocked-day-div {
    width: 100%;
    padding: 6px;
    text-align: center;
    font-weight: 500;
    color: #b0b0b0;
    font-size: 10px;
}

.week-shifter {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.week-shifter a {
    color: var(--primary, #4F46E5);
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid var(--primary, #4F46E5);
    border-radius: 4px;
    transition: all 0.15s;
    font-size: 11px;
}

.week-shifter a:hover:not(.inactive) {
    background-color: var(--primary, #4F46E5);
    color: white;
}

.week-shifter a.inactive {
    opacity: 0.3;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   BOOKING AGENDA MODAL
   ══════════════════════════════════════════════════════════════ */

.booking-agenda-modal .modal {
    max-width: 820px !important;
    width: 96vw !important;
    height: 88vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-height: 88vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px !important;
}

.booking-agenda-modal .modal-header {
    padding: 6px 14px !important;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    min-height: 30px;
    background: #fafafa;
}

.booking-agenda-modal .modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
}

.booking-agenda-modal .modal-footer {
    display: none !important;
}

.booking-agenda {
    padding: 0.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.agenda-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.agenda-footer {
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 1rem;
}

.selected-info {
    color: #198754;
    font-weight: 500;
    font-size: 0.9rem;
}


/* ══════════════════════════════════════════════════════════════
   INVENTORY HISTORY MODAL (from Vue InventoryHistory.vue)
   ══════════════════════════════════════════════════════════════ */

.history-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    background: white;
    font-size: 13px;
    font-family: Arial, sans-serif;
}

.history-table thead {
    background-color: #f3f3f3;
    position: sticky;
    top: 0;
    z-index: 10;
}

.history-table th {
    padding: 4px 8px;
    text-align: left;
    font-weight: 700;
    border: 1px solid #e0e0e0;
    color: #000;
    font-size: 13px;
    background-color: #f3f3f3;
    height: 22px;
    line-height: 14px;
}

.history-table td {
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    font-size: 13px;
    background: white;
    height: 22px;
    line-height: 14px;
}

.history-table tbody tr:hover td {
    background-color: #f5f5f5;
}

.history-table .gray-field {
    background-color: #f6f6f6 !important;
    font-size: 10px !important;
}

.history-table .gray-field-header {
    background-color: #e7e7e7 !important;
    font-size: 10px !important;
}


/* ══════════════════════════════════════════════════════════════
   INFO BUTTON (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
}

.info-button svg {
    width: 15px;
    height: 15px;
}


/* ══════════════════════════════════════════════════════════════
   MATCHING STATUS BADGES (Payments, from Vue)
   ══════════════════════════════════════════════════════════════ */

.match-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* Colour coding matching Bootstrap badge classes used in Vue production:
   bg-dark  → dark grey     | bg-info   → cyan/info
   bg-green → green/success  | bg-danger → red */
/* Vivid-pastel palette — modern, cohesive gamma */
.match-badge-unmatched       { background: #ff6b6b; color: #fff; }  /* orange-red */
.match-badge-ignored         { background: #cbd5e1; color: #475569; } /* light grey */
.match-badge-prepaid         { background: #d6f9d6; color: #1a5c2a; } /* soft mint */
.match-badge-booking         { background: #d6f9d6; color: #1a5c2a; } /* soft mint */
.match-badge-expenses        { background: #c4b5fd; color: #3b0764; } /* soft violet */
.match-badge-other-venue     { background: #a8a29e; color: #292524; } /* brown-grey */

/* Origin sub-label inside status badge (auto / manual) */
.match-origin {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}
.match-origin-auto   { background: rgba(0,0,0,.10); color: inherit; }
.match-origin-manual { background: rgba(0,0,0,.18); color: inherit; }


/* ══════════════════════════════════════════════════════════════
   MANUAL PAYMENT BADGE
   ══════════════════════════════════════════════════════════════ */

.pay-manual-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(79, 70, 229, 0.12);
    color: #4338ca;
    vertical-align: middle;
    margin-left: 4px;
}


/* ══════════════════════════════════════════════════════════════
   PAYMENT LOG — info icon + popup
   ══════════════════════════════════════════════════════════════ */

.pay-log-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--slate-400, #94a3b8);
    line-height: 0;
    transition: color 0.15s;
    flex-shrink: 0;
    width: 18px;
}
.pay-log-btn:hover {
    color: var(--color-primary, #6366f1);
}

/* ── Load More button ── */
.pay-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0 8px;
}
.pay-load-more-btn {
    padding: 8px 28px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1.5px solid var(--slate-300, #cbd5e1);
    background: var(--white, #fff);
    color: var(--slate-600, #475569);
    cursor: pointer;
    transition: all .15s;
}
.pay-load-more-btn:hover {
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
    background: var(--slate-50, #f8fafc);
}
.pay-load-more-btn:disabled {
    opacity: .5;
    cursor: wait;
}
.pay-load-more-info {
    font-size: 13px;
    color: var(--slate-400, #94a3b8);
}

.pay-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--slate-500, #64748b);
    line-height: 1.6;
}
.pay-log-list li {
    padding: 2px 0;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.pay-log-list li:last-child {
    border-bottom: none;
}
.pay-log-list li strong {
    color: var(--indigo-600, #4f46e5);
    font-weight: 600;
}

/* "Currently matched to" header card inside the payment-log popup */
.pay-log-match-card {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.pay-log-match-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 4px;
}
.pay-log-match-customer {
    font-size: 16px;
    font-weight: 600;
    color: #1e1b4b;
    margin-bottom: 4px;
    line-height: 1.3;
}
.pay-log-match-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 13px;
    color: #475569;
}
.pay-log-match-pill {
    display: inline-block;
    padding: 1px 8px;
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 11px;
    color: #4338ca;
    font-weight: 500;
}
.pay-log-match-code {
    font-size: 12px;
    color: #64748b;
}


/* ══════════════════════════════════════════════════════════════
   IGNORE-ACCOUNT BUTTON (inline, in bank-account cell)
   ══════════════════════════════════════════════════════════════ */

.pay-ignore-acct-btn {
    opacity: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    padding: 2px;
    cursor: pointer;
    color: var(--slate-400, #94a3b8);
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 0;
    flex-shrink: 0;
}
tr:hover .pay-ignore-acct-btn {
    opacity: 1;
}
.pay-ignore-acct-btn:hover {
    color: #e11d48;
    border-color: #e11d48;
    background: rgba(225, 29, 72, 0.08);
}


/* ══════════════════════════════════════════════════════════════
   IGNORE-ACCOUNT MODAL
   ══════════════════════════════════════════════════════════════ */

.ignore-acct-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md, 8px);
    background: var(--slate-50, #f8fafc);
    border: 1px solid var(--slate-200, #e2e8f0);
    margin-bottom: 16px;
}
.ignore-acct-icon {
    flex-shrink: 0;
    line-height: 0;
}
.ignore-acct-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--slate-400, #94a3b8);
    margin-bottom: 2px;
}
.ignore-acct-number {
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-700, #334155);
    letter-spacing: 0.5px;
}
.ignore-acct-desc {
    font-size: 13px;
    color: var(--slate-500, #64748b);
    line-height: 1.5;
    margin: 0 0 16px;
}
.ignore-acct-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--slate-200, #e2e8f0);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 13px;
    color: var(--slate-600, #475569);
    line-height: 1.4;
}
.ignore-acct-toggle:hover {
    border-color: #e11d48;
    background: rgba(225, 29, 72, 0.04);
}
.ignore-acct-toggle input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #e11d48;
    flex-shrink: 0;
}

.btn-warning {
    background: #e11d48;
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-warning:hover {
    background: #be123c;
}


/* ══════════════════════════════════════════════════════════════
   MATCHED AMOUNT HIGHLIGHTING (Payments code/booking matching)
   ══════════════════════════════════════════════════════════════ */

.matched-amount-row {
    background-color: rgba(34, 197, 94, 0.15);
}

.matched-amount-cell {
    background-color: rgba(34, 197, 94, 0.7);
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   MATCH-BOOKING MODAL — Banner header
   ══════════════════════════════════════════════════════════════ */

.match-modal-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-focus) 100%);
    color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0;
}

.match-banner-top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 4px;
    position: relative;
}

.match-banner-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.match-banner-top .modal-close {
    position: absolute;
    right: 16px;
    top: 10px;
}

.match-banner-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 20px 14px;
    justify-content: center;
}

.match-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    white-space: nowrap;
}
.match-pill b {
    font-weight: 600;
    opacity: 0.65;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.match-pill--amount {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.4);
    font-weight: 700;
    font-size: 15px;
    font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════
   MATCH-BOOKING TABLE (modern, compact, rounded)
   ══════════════════════════════════════════════════════════════ */

.match-tbl {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 12.5px;
    font-family: Arial, sans-serif;
}

/* Rounded outer corners */
.match-tbl thead th:first-child { border-top-left-radius: var(--radius-md); }
.match-tbl thead th:last-child  { border-top-right-radius: var(--radius-md); }
.match-tbl tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); }
.match-tbl tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-md); }

/* Header — sticky (inside .table-scroll-container, which is the sole scroll context in the match modal) */
.match-tbl thead th {
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--slate-500);
    white-space: nowrap;
    padding: 5px 8px 4px;
    text-align: left;
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    position: sticky;
    top: 0;
    z-index: 2;
    z-index: 2;
}
.match-th-name { min-width: 120px; }

/* Body rows — compact */
.match-tbl tbody td {
    padding: 2px 8px;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--slate-700);
    border-bottom: 1px solid var(--slate-100);
    height: 21px;
    line-height: 1.2;
    font-size: 12px;
}

.match-tbl tbody tr:hover td {
    background-color: #f0f5ff;
}

/* Relative date badge */
.match-rel-date {
    font-weight: 700;
    color: #7c3aed;
    font-size: inherit;
    margin-left: 4px;
    white-space: nowrap;
}

/* Date column in tabular mono */
.match-tbl .match-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 600;
}

/* Booking code: use a more classical serif-mono feel */
.match-tbl .mono {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11.5px;
    letter-spacing: -0.2px;
    font-weight: 600;
}

/* Compact match button */
.match-tbl .btn-sm {
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.3;
}

/* Controls row above match table: search input + toggle-past button */
.match-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 10px;
}
.match-search-input {
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    background: #fff;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.match-search-input:focus {
    border-color: var(--violet-500, #8b5cf6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Rows hidden by the client-side search filter */
.match-row-filtered {
    display: none !important;
}

/* Past unpaid bookings — hidden by default, shown via toggle */
.match-row-past--hidden {
    display: none;
}
.match-row-past:not(.match-row-separator) td {
    background-color: rgba(139, 92, 246, 0.07); /* subtle violet tint */
}
.match-row-past .match-date {
    color: var(--slate-400);
}

/* Match modals: flex column layout so the banner is fixed and only the
   inner .table-scroll-container scrolls (sticky thead then works correctly).
   Applies to both the booking→payment modal and the payment→booking modal. */
#matchPaymentModal .modal,
#matchBookingModal .modal {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
#matchPaymentModal .match-modal-banner,
#matchBookingModal .match-modal-banner {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
}

/* Separator row between present and past bookings */
.match-row-separator td {
    padding: 6px 12px !important;
    background: transparent !important;
    border: none !important;
}
.match-separator-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--slate-400);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.match-separator-line::before,
.match-separator-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--slate-300), transparent);
}

/* Cascade reveal animation for past rows */
.match-row-revealing td {
    opacity: 0;
    transform: translateY(-6px);
}
.match-row-reveal td {
    animation: matchRowReveal 280ms ease-out both;
}
@keyframes matchRowReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Dismiss buttons (mark-paid / archive) inside match modal rows */
.match-dismiss-btn {
    font-size: 10px;
    padding: 3px 8px;
    background: var(--slate-100);
    color: var(--slate-500);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    cursor: pointer;
    margin-left: 4px;
    white-space: nowrap;
}
.match-dismiss-btn:hover:not(:disabled) {
    background: var(--slate-200);
    color: var(--slate-700);
}
.match-dismiss-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
tr.match-row-dismissed {
    transition: opacity 0.4s ease;
    opacity: 0;
}

/* Booking-match inline highlights (inside cells) */
mark.match-exact {
    background-color: rgba(34, 197, 94, 0.35);
    color: inherit;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 700;
}
mark.match-close {
    background-color: rgba(190, 215, 80, 0.40);
    color: inherit;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
}

/* Amount cell highlight when it matches the payment amount */
.match-amount {
    background-color: rgba(34, 197, 94, 0.25) !important;
    border-radius: 3px;
    font-weight: 700;
}

/* Remaining pill (shows running balance during split matching) */
.match-pill--remaining {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.4);
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-mono);
    transition: all 200ms ease;
}
.match-pill--remaining.split-exhausted {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Row already matched in this split session */
tr.matched-this-session td {
    background: rgba(16, 185, 129, 0.08);
}
tr.matched-this-session td:first-child::before {
    content: '\2713  ';
    color: var(--color-success);
    font-weight: 700;
}
tr.matched-this-session .btn { display: none; }


/* ══════════════════════════════════════════════════════════════
   SCROLLABLE TABLE CONTAINER
   ══════════════════════════════════════════════════════════════ */

.table-scroll-container {
    max-height: 88vh;
    overflow: auto;
    position: relative;
}

/* Match-booking modal: the table-scroll-container is the ONLY scroll context —
   the modal-body must not scroll independently, otherwise sticky THs detach. */
.match-modal-body {
    overflow: hidden !important;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.match-modal-body #matchBookingResults {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.match-modal-body .table-scroll-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none; /* flex box decides the height */
}

@media (max-width: 767.98px) {
    .table-scroll-container {
        max-height: calc(100vh - 160px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pos-table {
        font-size: 11px;
        min-width: 800px;
    }

    .pos-table th,
    .pos-table td {
        padding: 3px 4px;
    }

    .inventory-table {
        font-size: 11px;
        min-width: 700px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   POS Modals (product edit, group ticket)
   ═══════════════════════════════════════════════════════════════ */

.pos-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* dvh, not vh: on a tablet the browser toolbars shrink the visible area, and
   vh resolves against the taller toolbar-hidden viewport, which pushes the
   bottom of the modal (Cancel / Confirm) off screen with no way to reach it.
   The body scrolls; the header and footer stay pinned. Measured at 1024x664
   and 820x553. Same pattern as .opb-modal. */
.pos-modal {
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    width: 90%;
    max-width: 400px;
    max-height: 90dvh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pos-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    flex: 0 0 auto;
}

.pos-modal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.pos-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--slate-400, #94a3b8);
    line-height: 1;
    padding: 0;
}

.pos-modal-close:hover {
    color: var(--slate-700, #334155);
}

.pos-modal-body {
    padding: 20px;
    text-align: center;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.pos-modal-footer {
    padding: 12px 20px 20px;
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.edit-modal-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-200, #e2e8f0);
    color: var(--slate-800, #1e293b);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 13px;
    font-weight: 600;
}

/* Group ticket card styling — uses same .product-card base as production */
/* (no special dashed border — matches production Vue card style) */


/* ══════════════════════════════════════════════════════════════
   iOS SCROLL-LOCK (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    touch-action: none;
    -webkit-overflow-scrolling: none;
}


/* ══════════════════════════════════════════════════════════════
   BOOKINGS MOBILE RESPONSIVE (from Vue Bookings/index.vue)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Bookings page */
    .booking-list-scrollable {
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px); /* iOS-safe */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .booking-list-table {
        font-size: 11px;
        min-width: 600px; /* Force horizontal scroll rather than squishing */
    }

    .booking-list-table td {
        padding: 3px 4px;
    }

    .booking-hour-header {
        padding: 4px 8px;
        font-size: 12px;
    }

    .booking-hour-label {
        font-size: 12px;
        min-width: 40px;
    }

    .booking-hour-count {
        font-size: 11px;
    }

    /* Booking detail modal: full-screen on mobile */
    #bookingModal .modal {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* iOS-safe */
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }

    #bookingModal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }

    /* Page header adjustments */
    .page-header {
        flex-direction: column;
        gap: 8px;
        align-items: stretch !important;
    }

    .page-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .page-header-actions input {
        width: 100% !important;
    }

    /* Agenda modal full-screen on mobile */
    .booking-agenda-modal .modal {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   INVENTORY STICKY HEADER VERIFICATION
   The CSS position:sticky approach is modern-browser-compatible and
   functionally equivalent to Vue's JS-cloned thead approach.
   Verified: works in Safari 16+, Chrome 108+, Firefox 110+.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   PAYMENTS PAGE — orders-style table overrides
   ══════════════════════════════════════════════════════════════ */

.payments-page .radio-filter-group {
    margin-bottom: 16px;
}

/* Create button */
.pay-create-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: var(--radius-md);
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

/* Table needs fewer columns so slightly lower min-width */
.pay-tbl {
    min-width: 840px;
}

/* Column widths */
.pay-tbl .pay-col-fetched  { width: 110px; min-width: 100px; text-align: left; padding-left: 16px; }
.pay-tbl .pay-col-date     { width: 100px; min-width: 90px; text-align: left; }
.pay-tbl .pay-col-amount   { width: 90px; min-width: 80px; text-align: right; }
.pay-tbl .pay-col-from     { min-width: 140px; text-align: left; }
.pay-tbl .pay-col-bank     { min-width: 140px; text-align: left; }
.pay-tbl .pay-col-comm     { min-width: 200px; text-align: left; }
.pay-tbl .pay-col-status   { width: 130px; min-width: 120px; text-align: center; }
.pay-tbl .pay-col-actions  { width: 100px; min-width: 90px; text-align: center; padding-right: 16px; }

/* Horizontal alignment in thead to match the body */
.pay-tbl thead th.pay-col-fetched,
.pay-tbl thead th.pay-col-date,
.pay-tbl thead th.pay-col-from,
.pay-tbl thead th.pay-col-bank,
.pay-tbl thead th.pay-col-comm { text-align: left; }
.pay-tbl thead th.pay-col-amount { text-align: right; padding-right: 14px; }

/* Sortable column headers */
.pay-sortable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.pay-sortable:hover {
    color: var(--primary-500, #4f7df9);
}
.pay-sort-label {
    vertical-align: middle;
}
.pay-sort-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 0;
}

/* Cell styling */
.pay-cell-fetched {
    text-align: left !important;
    font-weight: 500;
    color: var(--slate-500) !important;
    padding-left: 16px !important;
    font-variant-numeric: tabular-nums;
    font-size: 12px !important;
    font-family: var(--font-mono);
    white-space: nowrap;
    cursor: default;
}

.pay-cell-date {
    text-align: left !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 12px !important;
    color: var(--slate-600) !important;
    font-family: var(--font-mono);
    font-weight: 600;
}

.pay-cell-amount {
    text-align: right !important;
    white-space: nowrap;
    font-weight: 600;
    color: var(--slate-800) !important;
    padding-right: 14px !important;
}

.pay-cell-amount .mono {
    font-variant-numeric: tabular-nums;
}

.pay-cell-from {
    text-align: left !important;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--slate-800) !important;
}

.pay-cell-bank {
    text-align: left !important;
    max-width: 180px;
    white-space: nowrap;
    font-size: 12px !important;
    color: var(--slate-500) !important;
    font-variant-numeric: tabular-nums;
    position: relative;
}

.pay-bank-wrap {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 4px;
}

/* Truncate only the account text, not the badge */
.pay-bank-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.pay-cell-comm {
    text-align: left !important;
    max-width: 340px;
    max-height: 2.7em;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    font-size: 12px !important;
    color: var(--slate-500) !important;
    scrollbar-width: none;         /* Firefox */
}
.pay-cell-comm::-webkit-scrollbar {
    display: none;                 /* Chrome/Safari */
}

.pay-cell-status {
    text-align: center !important;
    white-space: nowrap;
}

.pay-cell-actions {
    text-align: center !important;
    padding-right: 16px !important;
    white-space: nowrap;
}

.pay-actions-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pay-log-placeholder {
    display: inline-block;
    width: 18px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Text Keyboard (floating, draggable — Belgian AZERTY)
   ═══════════════════════════════════════════════════════════ */
.pos-textkb {
    position: fixed;
    /* Must sit above every .pos-modal-overlay (9999) and the
       confirm overlay (10100) — otherwise the keyboard pops up
       behind the modal that triggered it (e.g. Solve Unpaid →
       Manager authorised name field). */
    z-index: 10500;
    display: none;
    flex-direction: row;
    background: linear-gradient(160deg, #f5f3ff, #ede9fe);
    border: none;
    border-radius: clamp(16px, 1.5vw, 22px);
    box-shadow: 0 10px 36px rgba(79,70,229,0.14), 0 3px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    --ku: clamp(36px, 3.3vw, 48px);
    --kg: clamp(3px, 0.3vw, 5px);
    --kf: clamp(13px, 1.15vw, 16px);
    --kp: clamp(10px, 1vw, 14px);
    --kr: clamp(6px, 0.5vw, 10px);
}
.pos-textkb.active { display: flex; }

/* Side grip */
.textkb-side-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: clamp(24px, 2.2vw, 32px);
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(79,70,229,0.06);
    border-right: 1px solid rgba(79,70,229,0.08);
    border-radius: clamp(16px,1.5vw,22px) 0 0 clamp(16px,1.5vw,22px);
}
.textkb-side-grip:active { cursor: grabbing; }
.textkb-side-grip .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.25;
}

/* Main container */
.textkb-main {
    padding: var(--kp);
    display: flex;
    flex-direction: column;
    width: calc(11 * var(--ku) + 10 * var(--kg) + 2 * var(--kp));
}

/* Header */
.textkb-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 4px;
    text-align: center;
}
/* Format hint under the label (e.g. expected voucher-code format, or an
   instruction telling the cashier which number to read off the voucher).
   max-width is load-bearing: .pos-textkb is a fixed-position flex box with no
   width of its own, so a long single-line hint would stretch the whole
   keyboard across the screen instead of wrapping. Aligned to the key rows. */
.textkb-hint {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: var(--slate-500);
    margin: -2px auto 6px;
    max-width: calc(var(--ku) * 10);
    text-align: center;
}
.textkb-hint--error {
    color: var(--color-danger, #dc2626);
    font-weight: 600;
}
/* ── QR scan button on the code keyboard ──
   Sits under the hint, above the display. Only rendered for partners that
   expect a code (needs_voucher_ref), and only when the device can actually
   decode — see qrScanSupported() in pos.php. Full width so it reads as the
   primary shortcut, with typing still available right below it. */
.textkb-scan {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: calc(var(--ku) * 10); margin: 0 auto 8px;
    padding: 10px 14px; border: none; border-radius: var(--radius-md, 8px);
    background: var(--color-primary); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.textkb-scan:hover { filter: brightness(1.08); }
.textkb-scan:active { transform: scale(0.98); }

/* ── QR scanner overlay ──
   Full-screen so the cashier can aim the tablet without hunting a small
   window. Same visual language as the social-gift camera stage. */
.qrscan-overlay {
    position: fixed; inset: 0; z-index: 11000;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(3px);
}
.qrscan-overlay.active { display: flex; }
.qrscan-box {
    width: min(560px, 92vw); background: #fff;
    border-radius: var(--radius-lg, 14px); overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.qrscan-head {
    padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--slate-200);
}
.qrscan-title { font-size: 15px; font-weight: 700; color: var(--slate-800); }
.qrscan-sub   { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.qrscan-close {
    width: 36px; height: 36px; border: none; border-radius: var(--radius-full);
    background: var(--slate-100); color: var(--slate-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.qrscan-close:hover { background: var(--slate-200); }
/* The stage must show the WHOLE camera view. It previously used a 4:3 box with
   object-fit:cover over a 16:9 stream, which hid 25% of the width — measured in
   a real browser. The detector reads the full frame, so the cashier was aiming
   with a picture that did not match what was being scanned, and a code just
   outside the visible edges looked like a failure for no reason.
   `contain` + a matching 16:9 box means what you see IS what is read. */
.qrscan-stage { position: relative; background: var(--slate-900); aspect-ratio: 16/9; overflow: hidden; }
.qrscan-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The dashed frame is a GUIDE, not a scan area: the detector reads the entire
   frame. It used to cover only 46% of the stage, which taught cashiers to aim
   far too tightly. Now it hugs the edges and is faint, so it frames without
   implying that anything outside it is ignored. */
.qrscan-reticle {
    position: absolute; inset: 4%; border: 2px dashed rgba(255,255,255,0.35);
    border-radius: 10px; pointer-events: none;
}
/* The hint sits ON the video, so a soft gradient is not enough: against a bright
   scene (a phone screen, a lit counter) the white text washed out and became
   unreadable — visible in a screenshot of the real overlay. A solid dark band
   plus a shadow keeps it legible over any camera image. */
.qrscan-status {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px;
    background: linear-gradient(transparent, rgba(15,23,42,0.5) 35%, rgba(15,23,42,0.92));
    color: #fff; font-size: 13px; font-weight: 600; text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.qrscan-fallback {
    position: absolute; inset: 0; display: none; flex-direction: column; gap: 8px;
    align-items: center; justify-content: center; color: var(--slate-300);
    font-size: 13px; text-align: center; padding: 24px;
    background: linear-gradient(160deg, #1e293b, #0f172a);
}
.qrscan-foot { padding: 12px 18px; display: flex; justify-content: flex-end; }
.qrscan-type-btn {
    padding: 10px 18px; border: 1px solid var(--slate-300); border-radius: var(--radius-md, 8px);
    background: #fff; color: var(--slate-700); font-size: 13px; font-weight: 600; cursor: pointer;
}
.qrscan-type-btn:hover { background: var(--slate-50); }
.textkb-display {
    text-align: left;
    padding: 8px 12px;
    margin-bottom: 8px;
    min-height: 42px;
    background: rgba(255,255,255,0.6);
    border-radius: var(--kr);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 500;
    color: var(--slate-800);
    overflow: hidden;
    white-space: nowrap;
}
@keyframes textkb-blink { 50% { opacity: 0; } }
.textkb-cursor {
    animation: textkb-blink 1s step-end infinite;
    font-weight: 300;
    color: var(--color-primary);
    margin-left: 1px;
}

/* ── Suffix entry (GetYourGuide: type only the LAST 4 characters) ──
   Replaces the free-text line with a lead-in and N boxes. The partner prefix
   is deliberately NOT drawn: "GYG" sitting next to the caret reads as "type
   what comes after me", which sends the cashier to the FIRST characters of the
   reference. Those collide across bookings, so the display has to say END. */
.textkb-suffix {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 42px;
}
.textkb-suffix-lead {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-400);
    white-space: nowrap;
}
.textkb-slots { display: flex; gap: 6px; }
.textkb-slot {
    width: 38px;
    height: 42px;
    border-radius: var(--kr);
    background: rgba(255,255,255,0.6);
    border: 2px dashed rgba(79,70,229,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
    color: var(--slate-800);
    /* Voucher references are uppercase, and the code is stored uppercase, so
       the boxes must show what will actually be saved. Without this a cashier
       reads "hzq3" on screen and "HZQ3" on the voucher and hesitates. */
    text-transform: uppercase;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.textkb-slot--filled {
    border-style: solid;
    border-color: var(--color-primary);
    background: #fff;
}

/* Rows */
.textkb-rows {
    display: flex;
    flex-direction: column;
    gap: var(--kg);
    align-items: flex-start;
}
.textkb-row { display: flex; gap: var(--kg); }

/* Stagger offsets */
.textkb-row-1 { padding-left: calc(var(--ku) * 0.4); }
.textkb-row-2 { padding-left: calc(var(--ku) * 0.7); }

/* Base key (square) */
.textkb-key {
    width: var(--ku);
    height: var(--ku);
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kf);
    font-weight: 600;
    background: rgba(255,255,255,0.55);
    border-radius: var(--kr);
    color: var(--slate-700);
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-body);
    transition: background var(--transition-fast), color var(--transition-fast), transform 80ms ease;
}
.textkb-key:active {
    background: var(--color-primary);
    color: #fff;
    transform: scale(0.93);
}

/* Dual-label number/accent keys */
.textkb-na {
    flex-direction: column;
    gap: 4px;
    padding: 2px;
    justify-content: center;
    align-items: center;
}
.textkb-na .na-digit {
    font-size: 9px;
    font-weight: 500;
    color: var(--slate-400);
    line-height: 1;
    font-family: var(--font-mono);
    transition: all var(--transition-fast);
}
.textkb-na .na-accent {
    font-size: calc(var(--kf) - 1px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
    transition: all var(--transition-fast);
}
/* Shifted → digits emphasised, accents dimmed */
.textkb-main.textkb-shifted .na-digit {
    font-size: calc(var(--kf) - 1px);
    font-weight: 700;
    color: var(--color-primary);
}
.textkb-main.textkb-shifted .na-accent {
    font-size: 9px;
    font-weight: 500;
    color: var(--slate-400);
}

/* Shift key */
.textkb-shift {
    width: calc(var(--ku) * 1.2);
    font-size: calc(var(--kf) + 2px);
}
.textkb-shift.active {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Backspace key */
.textkb-back {
    font-size: calc(var(--kf) + 2px);
    font-weight: 800;
    color: var(--slate-600);
}

/* Underscore key — optical nudge.
   The _ glyph is drawn entirely below the baseline, so with plain
   centring its ink lands 5.5px BELOW the key centre (the hyphen beside
   it lands 2px above) and the key reads as if the character had fallen
   out of it. Padding-bottom on a centred flex box lifts the glyph by
   half its value, so 8px lifts it 4px. That is deliberately NOT a full
   correction: levelling it completely makes it look like a second
   hyphen. It stays visibly the lower of the two, which is what tells
   the two keys apart at a glance. Padding rather than transform, so it
   cannot fight the :active scale(0.93). */
.textkb-underscore { padding-bottom: 8px; }

/* Space row */
.textkb-row-space { align-self: stretch; }
.textkb-space {
    flex: 1;
    width: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--slate-400);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Extras row */
.textkb-row-extras { align-self: stretch; }
.textkb-flex-spacer { flex: 1; }

/* Action buttons (small pills) */
.textkb-act {
    height: calc(var(--ku) * 0.72);
    padding: 0 clamp(10px, 1vw, 14px);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
.textkb-act-cancel {
    background: rgba(255,255,255,0.5);
    color: var(--slate-500);
}
.textkb-act-cancel:hover {
    background: rgba(255,255,255,0.75);
    color: var(--slate-700);
}
.textkb-act-ok {
    background: var(--color-primary);
    color: #fff;
}
.textkb-act-ok:active {
    background: var(--color-primary-focus);
}


/* ══════════════════════════════════════════════════════════════
   ENVELOPE CHECK PAGE — Redesigned (orders-tbl style)
   ══════════════════════════════════════════════════════════════ */

.envelope-page {
    padding: 16px 10px 80px; /* extra bottom for floating bar */
}

/* ── Role badge in page header ── */

.env-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-left: auto;
}

.env-role-badge--admin {
    background: linear-gradient(135deg, #faf9ff 0%, #f0eeff 100%);
    color: var(--color-primary);
}

.env-role-badge--manager {
    background: #eff6ff;
    color: #2563eb;
}

.env-role-badge--supervisor {
    background: #fef3c7;
    color: #92400e;
}

/* ── Table column widths ── */

.env-tbl .env-col-select  { width: 80px; text-align: center; }
.env-tbl .env-col-id      { width: 100px; text-align: center; }
.env-tbl .env-col-user    { min-width: 110px; text-align: center; }
.env-tbl .env-col-amount  { min-width: 100px; text-align: center; }
.env-tbl .env-col-action  { min-width: 110px; text-align: center; }
.env-tbl .env-col-diff    { min-width: 120px; text-align: center; }
.env-tbl .env-col-details { width: 60px; text-align: center; }

/* All cells centered */
.env-tbl td,
.env-tbl th {
    text-align: center;
    vertical-align: middle;
}

/* ── Table cell styles ── */

.env-cell-select {
    text-align: center !important;
    vertical-align: middle;
    position: relative;
    padding-left: 36px !important;
}

.env-cell-id {
    text-align: center !important;
}

.env-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--cashier-envelope-bg, #ecebfb);
    color: var(--cashier-envelope-icon, #6360b6);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.6;
}

.env-id-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #6360b6;
}

.env-cell-user {
    text-align: center !important;
    vertical-align: middle;
}

.env-cell-amount {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.env-cell-action {
    text-align: center !important;
    vertical-align: middle;
}

/* Checkcount button */
.env-checkcount-btn {
    background: #5046e5 !important;
    color: white !important;
    font-size: 12px;
    padding: 1px 10px;
    border-radius: 4px;
    line-height: 19px;
    border: none;
    cursor: pointer;
}

/* Verified tag */
.env-verified-tag {
    display: inline-block;
    background: rgba(79, 70, 229, 0.1) !important;
    color: #555464 !important;
    font-size: 12px;
    border-radius: 4px;
    padding: 1px 10px;
    line-height: 19px;
}

.env-cell-diff {
    text-align: center !important;
    vertical-align: middle;
}

.env-diff-wrap {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.env-diff--missing {
    background: #fef2f2;
    color: #dc2626;
}

.env-diff--excess {
    background: #eff6ff;
    color: #2563eb;
}

.env-cell-details {
    text-align: center !important;
    vertical-align: middle;
    position: relative;
}

/* Detail action buttons — soft purple */
.act-btn--detail {
    background: #f0eeff;
    color: #6360b6;
}

.act-btn--detail:hover {
    background: #e4e1ff;
    color: var(--color-primary);
}

/* ── Checkbox styling (checkbox-wrapper-42) ── */

.checkbox-wrapper-42 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
}

.checkbox-wrapper-42 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.checkbox-wrapper-42 label {
    display: block;
    line-height: 0;
}

.checkbox-wrapper-42 .cbx {
    display: block;
    width: 17px;
    height: 17px;
    position: relative;
    border: 1px solid #c8ccd4;
    border-radius: 3px;
    transition: background 0.1s ease;
    cursor: pointer;
}

.checkbox-wrapper-42 .cbx:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 5px;
    width: 5px;
    height: 11px;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all 0.3s ease;
    transition-delay: 0.15s;
}

.checkbox-wrapper-42 input[type="checkbox"]:checked ~ .cbx {
    border-color: transparent;
    background: #6871f1;
    animation: jelly-42 0.6s ease;
}

.checkbox-wrapper-42 input[type="checkbox"]:checked ~ .cbx:after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

@keyframes jelly-42 {
    from { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    to { transform: scale(1, 1); }
}

/* Bank deposit validated indicator dot */
.env-confirmed-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #5046e5;
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px rgba(80, 70, 229, 0.25);
}

/* ── Floating confirm bar ── */

.env-confirm-bar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width, 56px);
    right: 0;
    background: #fff;
    border-top: 1px solid var(--slate-200);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    transition: left var(--transition-base, 0.2s);
}

.env-confirm-bar__info {
    font-size: 14px;
    color: var(--slate-600);
}

.env-confirm-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Verify modal ── */

.env-verify-modal {
    max-width: 680px;
    width: 90vw;
}

.env-verify-modal .modal-close-x,
.env-deposit-modal .modal-close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-500, #64748b);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.env-verify-modal .modal-close-x:hover,
.env-deposit-modal .modal-close-x:hover {
    background: var(--slate-200, #e2e8f0);
    color: var(--slate-800, #1e293b);
}

/* Envelope tag shown in verify modal */
.env-verify-envelope-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--cashier-envelope-bg, #ecebfb);
    color: var(--cashier-envelope-icon, #6360b6);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

/* Form dimmed state (production: grayForm) */
.env-form-dimmed {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
    filter: grayscale(40%);
    transition: opacity 0.3s, filter 0.3s;
}

.env-bill-grid {
    display: flex;
    gap: 24px;
}

.env-bill-col {
    flex: 1;
}

.env-bill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.env-bill-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    flex: 1;
}

.env-bill-row input[type="number"] {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.env-bill-row input[type="number"]:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.env-verify-actions {
    margin-top: 16px;
    text-align: center;
}

.env-verify-actions .btn svg {
    vertical-align: -2px;
    margin-right: 4px;
}

/* ── Back to counting button ── */
.env-error-back {
    text-align: center;
    margin-bottom: 16px;
    padding-top: 4px;
}

.env-back-btn {
    background-color: var(--slate-600, #475569);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.env-back-btn:hover {
    background-color: var(--slate-700, #334155) !important;
    color: white;
}

/* ── Mismatch card ── */
.env-mismatch-card {
    border: 1px solid #fed7aa;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.env-mismatch-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #fed7aa;
}

.env-mismatch-header svg {
    flex-shrink: 0;
    color: #ea580c;
}

.env-mismatch-body {
    padding: 14px 16px;
    background: #fffbf5;
}

/* Amount rows */
.env-mismatch-amounts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.env-mismatch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(253, 186, 116, 0.25);
}

.env-mismatch-row:last-child {
    border-bottom: none;
}

.env-mismatch-label {
    font-size: 13px;
    color: #78350f;
    font-weight: 500;
}

.env-mismatch-value {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    font-variant-numeric: tabular-nums;
}

.env-mismatch-row--result {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #fed7aa;
}

.env-mismatch-missing .env-mismatch-value {
    color: #dc2626;
}

.env-mismatch-too-much .env-mismatch-value {
    color: #2563eb;
}

/* Denomination differences section */
.env-mismatch-denoms {
    margin-top: 12px;
}

.env-denom-diff-header {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.env-denom-diff-header small {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: #b45309;
}

.env-denom-diff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.env-denom-diff-vals {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.env-denom-exp {
    color: #92400e;
    font-weight: 600;
    min-width: 20px;
    text-align: right;
}

.env-denom-arrow {
    color: #d97706;
    font-size: 11px;
}

.env-denom-ver {
    color: #dc2626;
    font-weight: 700;
    min-width: 20px;
    text-align: left;
}

/* ── Justification section ── */
.env-justification-section {
    margin-bottom: 4px;
}

.env-justification-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600, #475569);
    margin-bottom: 8px;
}

.env-justification-label svg {
    color: var(--slate-400, #94a3b8);
}

.env-justification-textarea {
    width: 100%;
    resize: none;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--slate-200, #e2e8f0);
    padding: 10px;
    font-size: 13px;
}

.env-justification-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.env-justification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 12px;
}

.env-justification-hint {
    font-size: 12px;
    color: var(--slate-400);
    font-style: italic;
    white-space: nowrap;
    transition: color 0.2s;
}

.env-justification-ready {
    color: #16a34a;
    font-style: normal;
    font-weight: 500;
}

.env-justification-bar {
    flex: 1;
    max-width: 120px;
    height: 4px;
    background: var(--slate-100, #f1f5f9);
    border-radius: 2px;
    overflow: hidden;
}

.env-justification-progress {
    height: 100%;
    width: 0%;
    background: var(--color-primary, #5046e5);
    border-radius: 2px;
    transition: width 0.15s ease;
}

.env-justification-progress--ok {
    background: #16a34a;
}

.message-whitelines {
    white-space: pre;
    font-family: inherit;
    margin: 0;
    background: transparent;
    font-size: 13px;
}

/* ── Deposit modal ── */

.env-deposit-modal {
    max-width: 340px;
    width: 90vw;
}

.env-deposit-content {
    font-size: 14px;
    line-height: 1.6;
}

/* Deposit summary grid */
.env-deposit-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.env-deposit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
}

.env-deposit-row:last-child {
    border-bottom: none;
}

.env-deposit-label {
    font-size: 13px;
    color: var(--slate-500);
    font-weight: 500;
}

.env-deposit-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-800);
    font-variant-numeric: tabular-nums;
}

.env-deposit-row--diff .env-deposit-value {
    color: var(--color-primary, #5046e5);
}

/* ── Hover tooltip for bill comparison ── */

.env-tooltip-wrap {
    position: relative;
    display: inline-block;
}

.env-tooltip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: -8px;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
    padding: 10px 12px;
    min-width: 230px;
    white-space: nowrap;
    pointer-events: none;
}

.env-tooltip-box::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid var(--slate-200, #e2e8f0);
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
    transform: rotate(45deg);
}

.env-tooltip-wrap:hover .env-tooltip-box {
    display: block;
}

/* ── Comparison tooltip (redesigned) ── */

.env-cmp {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-variant-numeric: tabular-nums;
}

/* Header */
.env-cmp-head {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
    margin-bottom: 4px;
}

.env-cmp-h-label {
    /* empty first column */
}

.env-cmp-h-col {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--slate-400, #94a3b8);
    text-align: center;
    min-width: 42px;
}

/* Each denomination row */
.env-cmp-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0 6px;
    padding: 4px 0;
}

/* Denomination tags */
.env-cmp-denom {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    justify-self: start;
}

/* Bill tag — small rounded rectangle mimicking a banknote */
.env-cmp-bill {
    display: inline-block;
    background: #f0eeff;
    color: #5046e5;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(80, 70, 229, 0.15);
    font-size: 10px;
    letter-spacing: 0.2px;
}

/* Coin tag — circle / pill shape */
.env-cmp-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef9ee;
    color: #b45309;
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid rgba(180, 83, 9, 0.15);
    font-size: 10px;
}

/* Values — matching / ok state (muted) */
.env-cmp-val {
    font-size: 12px;
    text-align: center;
    min-width: 42px;
    padding: 0 4px;
    color: var(--slate-700, #334155);
}

.env-cmp-val.env-cmp-ok {
    color: var(--slate-400, #94a3b8);
}

/* Mismatch value — individual red-highlighted cell */
.env-cmp-val.env-cmp-bad {
    color: #dc2626;
    font-weight: 700;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 5px;
    padding: 2px 6px;
}

.env-cmp-sep {
    color: #f87171;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
}

/* Empty state */
.env-cmp-empty {
    text-align: center;
    color: var(--slate-400, #94a3b8);
    font-size: 12px;
    padding: 12px 0;
    font-style: italic;
}

/* Footer / Total row */
.env-cmp-footer {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0 6px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--slate-200, #e2e8f0);
}

.env-cmp-total-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--slate-700, #334155);
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.env-cmp-footer .env-cmp-val {
    font-weight: 700;
    font-size: 12px;
    color: var(--slate-800, #1e293b);
}



.env-cmp-footer .env-cmp-val.env-cmp-ok {
    color: var(--slate-500, #64748b);
}

/* ── Envelope page responsive — rotated headers ── */
@media (max-width: 1100px) {
    .env-tbl thead th {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        vertical-align: bottom;
        padding: 12px 4px 8px;
        font-size: 11px;
        height: 90px;
        line-height: 1;
    }
    .env-tbl .env-col-select,
    .env-tbl .env-col-id,
    .env-tbl .env-col-user,
    .env-tbl .env-col-amount,
    .env-tbl .env-col-action,
    .env-tbl .env-col-diff,
    .env-tbl .env-col-details {
        min-width: 0;
        width: auto;
    }
}

/* ── Envelope page responsive — small screens ── */
@media (max-width: 767.98px) {
    #envelopeCheckPage {
        margin: 60px 8px 80px 8px !important;
        padding: 10px !important;
    }
    .env-tbl {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .env-bill-grid {
        flex-direction: column;
        gap: 8px;
    }
    .env-tooltip-box {
        right: -4px;
        min-width: 200px;
    }
}


/* ══════════════════════════════════════════════════════════════
   SETTINGS PAGE — Redesigned (orders-tbl style)
   ══════════════════════════════════════════════════════════════ */

.settings-page {
    padding: 16px 10px 24px;
}

/* ── Page header ── */

.settings-page-header {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.settings-page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0;
    letter-spacing: -0.3px;
}

.settings-page-subtitle {
    font-size: 13px;
    color: var(--slate-400);
    margin: 0;
    font-weight: 400;
}

/* ── Settings table column widths ── */

.settings-tbl .col-settings-cat    { min-width: 100px; width: 120px; text-align: left; padding-left: 16px; }
.settings-tbl .col-settings-key    { min-width: 140px; width: 180px; text-align: left; }
.settings-tbl .col-settings-val    { min-width: 260px; width: 35%; text-align: left; }
.settings-tbl .col-settings-desc   { min-width: 160px; text-align: left; }
.settings-tbl .col-settings-action { width: 80px; text-align: center; padding-right: 16px; }

/* Settings table header alignment overrides */
.settings-tbl thead th {
    text-align: left;
}

.settings-tbl thead th.col-settings-action {
    text-align: center;
}

/* ── Settings cell variants ── */

.cell-settings-cat {
    text-align: left !important;
    vertical-align: middle;
    padding-left: 16px !important;
}

.settings-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.settings-cat-badge svg {
    flex-shrink: 0;
}

.cell-settings-key {
    text-align: left !important;
    font-size: 13px;
    color: var(--slate-800) !important;
}

.cell-settings-key strong {
    font-weight: 600;
}

.cell-settings-key code {
    font-family: var(--font-mono, 'Monaco', monospace);
    font-size: 12px;
    background: var(--slate-100);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--slate-600);
}

.cell-settings-val {
    text-align: left !important;
    font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}

.settings-val-num {
    font-size: 13px;
    color: var(--slate-700);
    font-variant-numeric: tabular-nums;
}

.settings-val-text {
    font-size: 13px;
    color: var(--slate-700);
    white-space: pre-wrap;
    word-break: break-word;
}

.settings-val-truncate {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Expandable value wrapper */
.settings-val-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.settings-val-wrap .settings-val-full {
    display: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.settings-val-wrap.expanded .settings-val-truncate {
    display: none;
}

.settings-val-wrap.expanded .settings-val-full {
    display: inline;
}

.settings-val-eye {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 3px 4px;
    cursor: pointer;
    color: var(--slate-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
    margin-top: 1px;
}

.settings-val-eye:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: #f0eeff;
}

.settings-val-wrap.expanded .settings-val-eye {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: #f0eeff;
}

.cell-settings-desc {
    text-align: left !important;
    font-size: 12px;
    color: var(--slate-400) !important;
    font-style: italic;
}

.cell-settings-action {
    text-align: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* Edit button — soft indigo */
.act-btn--edit {
    background: #f0eeff;
    color: #6360b6;
}

.act-btn--edit:hover {
    background: #e4e1ff;
    color: var(--color-primary);
}

/* ── Actions row ── */

.settings-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 16px 0;
}

.settings-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── JSON editor card ── */

.settings-json-card {
    margin-top: 6px;
}

.settings-json-header {
    padding: 16px 20px 8px;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section-title svg {
    color: var(--slate-400);
    flex-shrink: 0;
}

.settings-json-desc {
    font-size: 12px;
    color: var(--slate-400);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ── Users table card section header ── */

.settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
}

/* ── Users table column widths ── */

.settings-users-tbl { min-width: 480px; }
.settings-users-tbl .col-settings-user   { min-width: 90px; text-align: left; padding-left: 16px; }
.settings-users-tbl .col-settings-email  { min-width: 120px; text-align: left; }
.settings-users-tbl .col-settings-role   { min-width: 80px; text-align: center; }
.settings-users-tbl .col-settings-status { min-width: 70px; text-align: center; }
.settings-users-tbl .col-settings-action { width: 70px; text-align: center; padding-right: 12px; }

/* Users table header alignment */
.settings-users-tbl thead th {
    text-align: left;
}

.settings-users-tbl thead th.col-settings-role,
.settings-users-tbl thead th.col-settings-status,
.settings-users-tbl thead th.col-settings-action {
    text-align: center;
}

/* Spacing between cards */
.settings-page .orders-table-card + .orders-table-card {
    margin-top: 20px;
}

/* ── Users + Role Permissions — side-by-side row ── */

.settings-users-rp-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
}

.settings-users-rp-row > #usersTableCard {
    flex: 1;
    min-width: 0;
}

.settings-users-rp-row > #rolePermissionsCard {
    flex: 0 0 auto;
}

@media (max-width: 1100px) {
    .settings-users-rp-row {
        flex-direction: column;
    }
    .settings-users-rp-row > #rolePermissionsCard {
        width: 100%;
    }
    .rp-card {
        max-width: 540px;
    }
}

/* ── Role Permissions — Tier Comparison ── */

/* ── Scheduler Status Section ── */

.scheduler-tbl { min-width: 640px; }

.scheduler-tbl .col-sched-task     { min-width: 200px; text-align: left; padding-left: 16px; }
.scheduler-tbl .col-sched-interval { min-width: 100px; text-align: center; }
.scheduler-tbl .col-sched-last     { min-width: 110px; text-align: center; }
.scheduler-tbl .col-sched-next     { min-width: 110px; text-align: center; }
.scheduler-tbl .col-sched-status   { min-width: 80px; text-align: center; padding-right: 16px; }

.scheduler-tbl thead th { text-align: center; }
.scheduler-tbl thead th.col-sched-task { text-align: left; }

.scheduler-tbl td { vertical-align: middle; }

.cell-sched-task { padding: 10px 12px 10px 16px !important; }

.scheduler-task-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--slate-800);
}

.scheduler-task-desc {
    font-size: 11px;
    color: var(--slate-400);
    margin-top: 2px;
    line-height: 1.4;
}

.cell-sched-interval,
.cell-sched-last,
.cell-sched-next {
    text-align: center;
    font-size: 13px;
    color: var(--slate-600);
    font-variant-numeric: tabular-nums;
}

.scheduler-interval-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: 11px;
    font-weight: 500;
}

.scheduler-never {
    color: var(--slate-400);
    font-style: italic;
}

.scheduler-desc {
    font-size: 12px;
    color: var(--slate-400);
    margin: 0;
    padding: 0 20px 12px;
    line-height: 1.5;
}

.scheduler-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid var(--slate-100);
    font-size: 11px;
    min-height: 20px;
}

.scheduler-server-time {
    color: var(--slate-400);
    font-variant-numeric: tabular-nums;
}

.scheduler-health {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.scheduler-health--ok {
    color: #16a34a;
}

.scheduler-health--ok::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
}

.scheduler-health--warn {
    color: #dc2626;
}

.scheduler-health--warn::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
}

/* ── Scheduler task inline description (after colon) ── */
.scheduler-task-desc-inline {
    font-weight: 400;
    font-size: 12px;
    color: var(--slate-400);
}

/* ── Scheduler report button (document icon) ── */
.sched-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    background: #fff;
    color: var(--slate-400);
    cursor: pointer;
    vertical-align: middle;
    transition: all var(--transition-fast);
}

.sched-report-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-bg);
}

.sched-report-btn--dim {
    opacity: 0.35;
    cursor: not-allowed;
}

.sched-report-btn--dim:hover {
    border-color: var(--slate-200);
    color: var(--slate-400);
    background: #fff;
}

/* ── See fetch report button (payments page) ── */
.pay-fetch-report-btn {
    width: auto;
    padding: 0 10px;
    gap: 5px;
    font-size: var(--text-sm);
}

/* ── Scheduler report modal (wider) ── */
.sched-report-modal {
    max-width: 900px;
}

/* ── Report summary bar ── */
.sched-report-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0 14px;
    font-size: 13px;
    color: var(--slate-600);
}

.sched-report-summary b {
    font-weight: 700;
    color: var(--slate-800);
}

/* ── Report error block ── */
.sched-report-error {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

/* ── Report table wrapper ── */
.sched-report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 4px;
}

/* ── Report table ── */
.sched-report-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sched-report-tbl thead th {
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--slate-500);
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
    white-space: nowrap;
    text-align: left;
}

.sched-report-tbl tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--slate-100);
    vertical-align: middle;
    color: var(--slate-700);
}

.sched-report-tbl tbody tr:hover td {
    background: var(--slate-50);
}

/* Row coloring */
.sched-row-inserted td { background: rgba(22, 163, 74, 0.04); }
.sched-row-skipped td  { background: rgba(148, 163, 184, 0.04); }

/* Wording column — truncate long text */
.sched-report-wording {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detail column — small mono text */
.sched-report-detail {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--slate-500);
    white-space: nowrap;
}

/* ── Direction badges (IN / OUT) ── */
.pay-dir-in,
.pay-dir-out {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.pay-dir-in {
    background: #dcfce7;
    color: #166534;
}

.pay-dir-out {
    background: #fee2e2;
    color: #991b1b;
}

.amount-in  { color: #16a34a; }
.amount-out { color: #dc2626; }

/* ── Fetch-now button on payments page ── */
.pay-fetch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
}

.pay-fetch-btn:hover {
    background: rgba(79, 70, 229, 0.12);
    border-color: var(--color-primary);
}

.pay-fetch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pay-fetch-btn .spinner-sm {
    border-color: rgba(79, 70, 229, 0.2);
    border-top-color: var(--color-primary);
}

/* ── Ignore Rules Panel ──────────────────────────────────── */
.ignore-rules-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 460px;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--slate-200, #e5e7eb);
    padding: 16px;
    z-index: 200;
}
.ignore-rules-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.ignore-rules-panel-header strong {
    font-size: 14px;
}
.ignore-rules-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--slate-400);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.ignore-rules-close:hover {
    color: var(--slate-700);
}
.ignore-rules-desc {
    font-size: 12px;
    color: var(--slate-500);
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.ignore-rules-section {
    margin-bottom: 14px;
}
.ignore-rules-section:last-child {
    margin-bottom: 0;
}
.ignore-rules-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    margin-bottom: 4px;
    display: block;
}
.ignore-rules-hint {
    font-size: 11px;
    color: var(--slate-400);
    margin: 0 0 6px 0;
    line-height: 1.3;
}
.ignore-accounts-list {
    max-height: 180px;
    overflow-y: auto;
}
.ignore-account-row {
    position: relative;
    padding: 6px 22px 6px 0;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.ignore-account-row:last-child {
    border-bottom: none;
}
.ignore-account-iban {
    display: block;
    font-size: 12px;
    font-family: monospace;
    word-break: break-all;
    line-height: 1.4;
}
.ignore-account-meta {
    display: block;
    font-size: 10px;
    color: var(--slate-400);
    margin-top: 2px;
}
.ignore-account-remove {
    position: absolute;
    top: 6px;
    right: 0;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--slate-400);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.ignore-account-remove:hover {
    color: var(--red-500, #ef4444);
}

.rp-card {
    background: #fff;
    border-radius: 14px;
    padding: 12px 10px 8px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    overflow-x: auto;
}

.rp-tier-grid {
    display: grid;
    grid-template-columns: 90px repeat(5, 80px);
    gap: 0;
    padding-top: 16px;
    align-items: start;
}

/* Column cards */
.rp-tier-col {
    position: relative;
}

.rp-tier-col:last-child {
    border-right: none;
}

.rp-features-col {
}

/* Tier header banners */
.rp-tier-header {
    padding: 10px 6px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 46px;
    box-sizing: border-box;
}

.rp-features-header {
    text-align: right;
    padding-right: 10px;
}

.rp-tier-title {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.rp-tier-sub {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
}

.rp-features-header .rp-tier-title {
    font-size: 12px;
    color: #1e293b;
    text-transform: none;
}

.rp-features-header .rp-tier-sub {
    color: #94a3b8;
}

/* Per-tier header colours — greenish-blue → blue → indigo → violet */
.rp-tier-cashier {
    background: linear-gradient(135deg, #6ee7b7, #34d399);
    border-radius: 12px 12px 0 0;
}

.rp-tier-supervisor {
    background: linear-gradient(135deg, #7dd3fc, #38bdf8);
    border-radius: 12px 12px 0 0;
}

.rp-tier-manager {
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    border-radius: 12px 12px 0 0;
}

.rp-tier-admin {
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    border-radius: 12px 12px 0 0;
}

.rp-tier-analytics {
    background: linear-gradient(135deg, #fbcfe8, #f9a8d4);
    border-radius: 12px 12px 0 0;
}

/* ── Analytics role: hide all revenue/financial UI ──
   Server already strips the data; this hides the empty cards/charts. */
body.is-analytics-user #statsTotalRevenue,
body.is-analytics-user #statsTotalPosRevenue,
body.is-analytics-user [data-revenue-card],
body.is-analytics-user #statsRevenueChart,
body.is-analytics-user #statsProductsSection,
body.is-analytics-user #statsDeltaRevenue,
body.is-analytics-user #statsDeltaPos {
    display: none !important;
}
/* Hide the parent income-card containers for the two revenue tiles */
body.is-analytics-user #statsTotalRevenue,
body.is-analytics-user #statsTotalPosRevenue {
    /* the inner value is hidden — also hide the whole card via :has() */
}
body.is-analytics-user .income-card:has(#statsTotalRevenue),
body.is-analytics-user .income-card:has(#statsTotalPosRevenue),
body.is-analytics-user .income-card:has(#statsDeltaRevenue),
body.is-analytics-user .income-card:has(#statsDeltaPos) {
    display: none !important;
}

/* Rows */
.rp-row {
    padding: 4px 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: calc(50% - 9px);
    gap: 3px;
    height: 30px;
    box-sizing: border-box;
    color: #475569;
    border-right: 1px solid #eee;
}

.rp-tier-col:last-child .rp-row {
    border-right: none;
}

.rp-features-col .rp-row {
    justify-content: flex-end;
    margin-left: 0;
    padding-right: 10px;
    padding-left: 0;
    font-weight: 600;
    color: #1e293b;
}

.rp-row-odd {
    background: #fff;
}

.rp-row-even {
    background: #fff;
}

.rp-row-last {
    border-radius: 0 0 14px 14px;
}

/* Check / Cross / Limited icons */
.rp-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #bbf7d0;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
}

.rp-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
}

.rp-limit {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #854d0e;
    background: #fde68a;
    border-radius: 10px;
    cursor: help;
    white-space: nowrap;
}

.rp-spec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    cursor: help;
}

/* ── Role Permissions custom tooltips (JS-driven, fixed position) ── */
.rp-tooltip {
    position: fixed;
    background: var(--slate-800);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.rp-tooltip.is-visible {
    opacity: 1;
    transform: scale(1);
}

.rp-footnote {
    padding: 8px 12px 4px;
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .rp-tier-grid {
        grid-template-columns: 1fr;
    }
    .rp-features-col {
        display: none;
    }
}

/* ── Category filter bar ── */

.settings-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0 2px;
}

.settings-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-400);
    background: var(--slate-800);
    border: 1px solid var(--slate-700);
    border-radius: 20px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.settings-filter-btn:hover {
    color: var(--slate-200);
    border-color: var(--slate-500);
}

.settings-filter-btn.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.settings-filter-btn svg {
    flex-shrink: 0;
}

/* ── Secrets & Infrastructure ── */

.settings-secrets-hint {
    font-size: 12px;
    color: var(--slate-400);
    line-height: 1.4;
}

.settings-secrets-hint code {
    font-size: 11px;
    background: var(--slate-800);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--slate-300);
}

.secrets-tbl code {
    font-size: 12px;
    background: var(--slate-800);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--slate-300);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ── Branding Assets Section ── */

.branding-desc {
    font-size: 12px;
    color: var(--slate-400);
    margin: 0;
    padding: 0 20px 12px;
    line-height: 1.5;
}

.branding-desc code {
    font-size: 11px;
    background: var(--slate-100);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--slate-600);
}

.branding-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
}

.branding-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--slate-100);
    transition: background .15s;
}

.branding-card:hover {
    background: var(--slate-50, #f8fafc);
}

.branding-card--missing {
    background: #fef2f2;
}

.branding-card--missing:hover {
    background: #fee2e2;
}

/* Preview area */
.branding-preview {
    flex: 0 0 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-100);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--slate-200);
}

.branding-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.branding-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branding-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--slate-300);
}

.branding-preview-empty span {
    font-size: 10px;
    font-weight: 500;
}

/* Info area */
.branding-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.branding-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.branding-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-800);
}

.branding-desc-text {
    font-size: 12px;
    color: var(--slate-400);
    margin: 0;
    line-height: 1.4;
}

.branding-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.branding-path {
    font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    background: var(--slate-100);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--slate-500);
}

.branding-file-info {
    font-size: 11px;
    color: var(--slate-400);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.branding-file-size {
    font-variant-numeric: tabular-nums;
}

.branding-file-date {
    font-variant-numeric: tabular-nums;
}

/* Actions row */
.branding-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.branding-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
}

.branding-upload-btn.branding-uploading {
    pointer-events: none;
    opacity: 0.7;
}

.branding-format-hint {
    font-size: 11px;
    color: var(--slate-400);
}

/* Responsive: stack preview above info on narrow screens */
@media (max-width: 640px) {
    .branding-card {
        flex-direction: column;
        gap: 10px;
    }
    .branding-preview {
        flex: none;
        width: 100%;
        height: 100px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CHECK COUNT / STOCK SHIFTING — shared table UI
   ═══════════════════════════════════════════════════════════════ */

.sc-page {
    padding: 20px 28px;
}

.sc-page .card-title h1 {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--slate-500, #64748b);
    letter-spacing: -0.01em;
}

.sc-page .card-title h1 strong {
    color: var(--slate-700, #334155);
    font-weight: 600;
}

.sc-page hr {
    border: none;
    border-top: 1px solid #ebebeb;
    margin: 10px 0 0;
}

/* ── Table ── */
.sc-table {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.sc-table .head-custom th {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--slate-400, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px;
    border-bottom: 1px solid #ebebeb;
    background: transparent;
}

.sc-table td {
    border-bottom: 1px solid #f1f1f1;
    padding: 5px 10px;
    vertical-align: middle;
    transition: background 0.12s;
}

.sc-table tbody tr:hover td {
    background: #fafafa;
}

.sc-table th:nth-child(1),
.sc-table td:nth-child(1) { width: auto; overflow: hidden; text-overflow: ellipsis; }
.sc-table th:nth-child(2),
.sc-table td:nth-child(2) { width: 48px; text-align: center; }
.sc-table th:nth-child(3),
.sc-table td:nth-child(3) { width: 64px; text-align: center; }
.sc-table th:nth-child(4),
.sc-table td:nth-child(4) { width: 280px; text-align: center; }

/* ── Title cell ── */
.sc-title {
    font-size: 0.85rem;
    color: var(--slate-600, #475569);
    white-space: nowrap;
    font-weight: 400;
}

/* ── Image cell — fixed height ── */
.sc-img-container {
    height: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-img-container img {
    height: 30px;
    width: auto;
    max-width: 44px;
    display: block;
    border-radius: 4px;
    object-fit: contain;
}

/* ── Quantity badge ── */
.sc-quantity-info {
    color: var(--slate-500, #64748b);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    background: #f4f3ff;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    min-width: 28px;
}

/* ── Purchasing date details (inline below qty on stock-shifting) ── */
.ss-purch-dates {
    font-size: 0.7rem;
    color: var(--slate-400, #94a3b8);
    margin-top: 4px;
    line-height: 1.4;
}

/* ── SELECT button — ghost style ── */
.sc-select-btn {
    background: transparent;
    color: var(--color-primary, #4f46e5);
    border: 1.5px solid var(--color-primary, #4f46e5);
    padding: 3px 14px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 18px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    transition: all 0.15s;
}
.sc-select-btn:hover {
    background: var(--color-primary, #4f46e5);
    color: #fff;
}

/* ── Active row ── */
.sc-active {
    background-color: #f8f8fa !important;
}
.sc-active td {
    border-bottom-color: #e5e5e9;
}
.sc-active .sc-title {
    padding-left: 8px;
    color: var(--slate-700, #334155);
    font-weight: 500;
}
.sc-active .sc-img-container {
    height: 64px;
}
.sc-active .sc-img-container img {
    height: 64px;
    max-width: 100px;
}
.sc-active .sc-quantity-info {
    font-size: 1rem;
    padding: 3px 10px;
}

/* ── Done row ── */
.sc-done {
    opacity: 0.45;
}
.sc-done td {
    background: transparent !important;
}

/* ── Inline form ── */
.sc-inline-form {
    display: inline-block;
    text-align: left;
}
.sc-form-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.sc-field {
    display: flex;
    flex-direction: column;
}
.sc-field label {
    font-size: 10px;
    color: var(--slate-400, #94a3b8);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
    white-space: nowrap;
}
input.sc-input {
    width: 80px;
    display: inline-block;
    padding: 5px 8px;
    border: 1.5px solid #d0d0d8;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    line-height: 1.4;
    transition: border-color 0.15s;
}
input.sc-input:hover {
    background: #fff;
}
input.sc-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.08);
}

/* ── CONFIRM button ── */
.sc-confirm-btn {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    border: none;
    padding: 5px 14px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 18px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}
.sc-confirm-btn:hover {
    background: #3730a3;
    color: #fff;
}

/* ── Close (X) button ── */
.sc-close-btn {
    background: transparent;
    padding: 0;
    color: var(--slate-400, #94a3b8);
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.12s;
}
.sc-close-btn:hover {
    background: #f1f1f1;
    color: var(--slate-600, #475569);
}

/* ── Show All / Hide All toggle ── */
.sc-toggle-btn {
    background: transparent;
    color: var(--slate-400, #94a3b8);
    border: 1px dashed #d0d0d0;
    padding: 5px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.78rem;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.15s;
}
.sc-toggle-btn:hover {
    border-color: var(--slate-400, #94a3b8);
    color: var(--slate-600, #475569);
    background: #fafafa;
}

/* ── Alert messages ── */
.sc-error-row { line-height: 18px; }

.sc-confirm-td .alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: -10px;
    font-size: 0.82rem;
}
.sc-confirm-td .alert-danger {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.sc-confirm-td .alert-slightly {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.sc-confirm-td .alert-slightly .btn-danger {
    background-color: #d97706;
    border-color: #b45309;
}
.sc-error-phrase {
    line-height: 20px;
    font-size: 0.82rem;
}

/* ── Environment Banner (local / staging) ─────────────────── */

.env-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    min-width: 220px;
    height: 25px;
    z-index: 9998;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    padding: 0 16px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(135deg, #f43f5e, #fb7185, #f97316);
    background-size: 200% 200%;
    animation: envBannerGlow 4s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.3), 0 2px 8px rgba(249, 115, 22, 0.15);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    cursor: default;
    transition: height 0.25s ease, padding 0.25s ease, border-radius 0.25s ease;
    /* Let clicks pass through the banner to the elements behind it (the
       period toggle on Statistics sits exactly under the banner). The
       banner itself is purely decorative; only the inner Email-Log button
       needs pointer events, which we re-enable below. */
    pointer-events: none;
}
.env-banner:hover { pointer-events: auto; }
.env-banner-btn { pointer-events: auto; }

.env-banner:hover {
    height: 52px;
    padding: 4px 16px;
    border-radius: 0 0 12px 12px;
}

@keyframes envBannerGlow {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 0 14px rgba(244, 63, 94, 0.3), 0 2px 8px rgba(249, 115, 22, 0.15);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 20px rgba(251, 113, 133, 0.4), 0 2px 12px rgba(244, 63, 94, 0.2);
    }
}

.env-banner-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 25px;
}

.env-banner-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.env-banner:hover .env-banner-detail {
    opacity: 1;
}

.env-banner-hint {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
}

.env-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.env-banner-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 767.98px) {
    .env-banner { width: 60%; min-width: 180px; }
}


/* ── Email Log Page ───────────────────────────────────────── */

.email-log-search {
    margin-bottom: 16px;
}

.email-log-search-fields {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.email-log-search-field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    padding: 6px 10px;
    flex: 1;
    min-width: 180px;
    max-width: 340px;
}

.email-log-search-field i {
    color: var(--color-muted);
    font-size: 16px;
    flex-shrink: 0;
}

.email-log-search-field input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: var(--color-text, #1a1a1a);
}

.email-log-search-field input::placeholder {
    color: var(--color-muted);
}

.email-log-table {
    width: 100%;
    border-collapse: collapse;
}

.email-log-table th,
.email-log-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}

.email-log-table th {
    font-weight: 600;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-card-bg);
    position: sticky;
    top: 0;
}

.email-log-table tr:hover td {
    background: var(--color-hover);
}

.email-log-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.email-log-preview-btn:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.email-preview-wrapper {
    width: 70%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .email-preview-wrapper {
        width: 90%;
    }
}

@media (max-width: 640px) {
    .email-preview-wrapper {
        width: 100%;
    }
}

.email-preview-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
}

.email-log-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-muted);
}

.email-log-empty i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.4;
}

.email-log-meta {
    padding: 20px 24px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
}

.email-meta-subject {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 14px;
    line-height: 1.3;
}

.email-meta-row {
    display: flex;
    align-items: baseline;
    padding: 4px 0;
    gap: 8px;
}

.email-meta-label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
    min-width: 44px;
    flex-shrink: 0;
}


/* Hidden utility */
.hidden {
    display: none !important;
}

/* Responsive — mobile */
@media (max-width: 767.98px) {
    .sc-table { width: 100% !important; }
    .sc-table td, .sc-table th { padding: 3px 4px; font-size: 12px; }
    .sc-table .head-custom th { font-size: 0.62rem; }
    .sc-img-container { height: 24px !important; }
    .sc-img-container img { height: 24px !important; max-width: 32px !important; }
    .sc-active .sc-img-container { height: 44px !important; }
    .sc-active .sc-img-container img { height: 44px !important; max-width: 70px !important; }
    .sc-active .sc-title { padding-left: 4px; }
    .sc-form-table { margin: 2px 0; }
    .sc-select-btn { padding: 3px 10px; font-size: 0.68rem; }
    .sc-form-row { gap: 4px; }
    input.sc-input { width: 60px; padding: 4px 6px; font-size: 13px; }
    .sc-confirm-btn { padding: 4px 8px; font-size: 0.68rem; }
    .sc-close-btn { width: 24px; height: 24px; font-size: 13px; }
    .sc-page { padding: 8px 10px !important; }
    .sc-page .card-title h1 { font-size: 0.95rem; }
    .sc-title { white-space: normal; font-size: 0.78rem; }
    .sc-quantity-info { font-size: 0.78rem; padding: 1px 5px; }
    .sc-table { width: 100% !important; max-width: 100%; table-layout: auto; }
    .sc-table th:nth-child(4),
    .sc-table td:nth-child(4) { width: auto; }
    .sc-table th:nth-child(1),
    .sc-table td:nth-child(1) { overflow: visible; text-overflow: unset; }
}


/* ══════════════════════════════════════════════════════════════
   Venue Builder
   ══════════════════════════════════════════════════════════════ */

.vb-header {
    margin-bottom: 24px;
}

.vb-subtitle {
    color: var(--slate-400);
    font-size: 14px;
    margin-top: 6px;
}

/* ── Progress bar ── */

.vb-progress-wrap {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 28px;
}

.vb-progress-bar {
    height: 10px;
    background: var(--slate-100);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.vb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #7c3aed);
    border-radius: 5px;
    transition: width 0.4s ease;
}

.vb-progress-stats {
    font-size: 13px;
    color: var(--slate-500);
}

.vb-on-hold-count {
    color: #f59e0b;
    font-weight: 600;
}

.vb-empty-count {
    color: var(--slate-400);
}

/* ── Sections ── */

.vb-section {
    margin-bottom: 36px;
}

.vb-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--slate-700);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.vb-section-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-400);
    background: var(--slate-100);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

.vb-section-hint {
    color: var(--slate-400);
    font-size: 13px;
    margin-bottom: 16px;
}

.vb-section-hint code {
    background: var(--slate-100);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
}

/* ── Credentials groups ── */

.vb-cred-group {
    margin-bottom: 20px;
}

.vb-cred-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.vb-cred-tbl {
    margin-bottom: 0 !important;
}

.vb-cred-tbl td code {
    font-size: 12px;
    color: var(--slate-600);
}

/* ── Status icons ── */

.vb-status-icon {
    text-align: center !important;
    width: 30px;
}

.vb-check {
    display: inline-flex;
}

.vb-check--ok {
    color: #16a34a;
}

.vb-check--empty {
    color: var(--slate-300);
}

.vb-check--hold {
    color: #f59e0b;
}

/* ── Example column ── */

.vb-example {
    color: var(--slate-400) !important;
    font-size: 12px !important;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Settings table ── */

.vb-settings-tbl .vb-desc {
    color: var(--slate-400);
    font-size: 11px;
    font-weight: 400;
}

.vb-row-on-hold {
    background: #fffbeb !important;
}

.vb-row-on-hold:hover {
    background: #fef3c7 !important;
}

/* ── On-hold toggle ── */

.act-btn--hold {
    background: var(--slate-50);
    color: var(--slate-400);
}

.act-btn--hold:hover {
    background: #fffbeb;
    color: #f59e0b;
}

.act-btn--hold-active {
    background: #fef3c7;
    color: #f59e0b;
    border-color: #fbbf24;
}

.act-btn--hold-active:hover {
    background: #fde68a;
    color: #d97706;
}

/* ── Actions column ── */

.vb-actions {
    text-align: center !important;
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* ── Ready card ── */

.vb-ready-wrap {
    margin-top: 16px;
    margin-bottom: 36px;
}

.vb-ready-card {
    background: linear-gradient(135deg, #f8fafc, #f0f4ff);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    text-align: center;
}

.vb-ready-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--slate-700);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.vb-ready-card p {
    color: var(--slate-500);
    font-size: 13px;
    max-width: 480px;
    margin: 0 auto 16px;
}

.vb-ready-actions {
    display: flex;
    justify-content: center;
}

.btn-lg {
    padding: 10px 28px;
    font-size: 15px;
}

/* ── Inline editing ── */

.vb-inline-cell {
    cursor: default;
    position: relative;
    min-width: 160px;
}

.vb-inline-cell:not(.vb-editing):hover {
    background: #f8f7ff;
    cursor: text;
}

.vb-inline-cell.vb-editing {
    padding: 4px 6px !important;
    background: #fafafe;
}

.vb-inline-input {
    width: 100%;
    border: 1.5px solid var(--color-primary);
    border-radius: 2px;
    padding: 5px 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 150ms;
}

.vb-inline-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}

.vb-inline-textarea {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    resize: vertical;
    min-height: 60px;
}

select.vb-inline-input {
    appearance: auto;
    padding: 4px 6px;
}

.vb-inline-actions {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    justify-content: flex-end;
}

.vb-inline-ok,
.vb-inline-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 120ms;
    padding: 0;
}

.vb-inline-ok {
    color: #16a34a;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.vb-inline-ok:hover {
    background: #dcfce7;
    border-color: #16a34a;
}

.vb-inline-cancel {
    color: var(--slate-400);
}

.vb-inline-cancel:hover {
    background: var(--slate-100);
    color: var(--slate-600);
}

/* ═══════════════════════════════════════════════════════════════
   STATISTICS PAGE
   ═══════════════════════════════════════════════════════════════ */

.stats-page {
    max-width: 1400px;
}

/* ── Section headers ── */
.stats-section {
    margin-top: 32px;
}

.stats-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--slate-700);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--slate-200);
}

.stats-section-title svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ── Grid layouts ── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.stats-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.stats-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.stats-grid--1 {
    grid-template-columns: 1fr;
}

@media (max-width: 1100px) {
    .stats-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .stats-grid,
    .stats-grid--3,
    .stats-grid--2 { grid-template-columns: 1fr; }
}

/* ── Card headers ── */
.stats-card-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.stats-card-hint {
    font-size: 10px;
    font-weight: 400;
    color: var(--slate-400);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Chart legend ── */
.stats-legend {
    display: flex;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--slate-500);
}

.stats-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Summary cards (reuses income-cards) ── */
.stats-summary-cards {
    margin-bottom: 20px;
}

/* ── Bar chart ── */
.stats-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 180px;
    padding: 0 4px;
}

.stats-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
}

.stats-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height 0.3s ease;
}

.stats-bar-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--slate-500);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stats-bar-label {
    font-size: 8px;
    color: var(--slate-400);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* ── Dual-bar column (two bars side by side per period) ── */
.stats-bar-col--dual {
    gap: 0;
}

.stats-dual-values {
    display: flex;
    gap: 4px;
    font-size: 8px;
    font-weight: 600;
    margin-bottom: 3px;
    white-space: nowrap;
}

.stats-dual-bars {
    display: flex;
    gap: 2px;
    width: 100%;
    height: 100%;
    align-items: flex-end;
}

.stats-dual-bars .stats-bar {
    flex: 1;
}

/* ── Stacked bar chart ── */
.stats-bar-chart--stacked {
    gap: 2px;
}

.stats-bar-col--stacked {
    cursor: default;
    gap: 0;
}

.stats-stacked-bars {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.stats-bar--top,
.stats-bar--bottom {
    width: 100%;
    min-height: 0;
    border-radius: 0;
}

/* Future periods: translucent + dashed border hint */
.stats-bar-col--future {
    opacity: 0.35;
}

.stats-bar-col--future .stats-bar-label {
    font-style: italic;
}

/* "Now" vertical marker */
.stats-now-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2px;
    flex-shrink: 0;
    position: relative;
    margin: 0 1px;
}

.stats-now-line {
    width: 2px;
    flex: 1;
    background: var(--color-accent);
    border-radius: 1px;
}

.stats-now-label {
    font-size: 8px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-top: 4px;
}

/* ── Revenue controls (date-by toggle + legend) ── */
.stats-rev-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stats-dateby-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    overflow: hidden;
}

.stats-dateby-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--white);
    color: var(--slate-500);
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.stats-dateby-btn + .stats-dateby-btn {
    border-left: 1px solid var(--slate-200);
}

.stats-dateby-btn--active {
    background: var(--color-accent);
    color: #fff;
}

/* Traffic-metric toggle (Visitors / Page views) — same look as date-by toggle */
.stats-trafmetric-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--white);
    color: var(--slate-500);
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.stats-trafmetric-btn + .stats-trafmetric-btn {
    border-left: 1px solid var(--slate-200);
}
.stats-trafmetric-btn--active {
    background: var(--color-accent);
    color: #fff;
}

/* ── Horizontal breakdown bars ── */
.stats-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-bk-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-bk-label {
    width: 80px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-600);
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-bk-bar-wrap {
    flex: 1;
    height: 18px;
    background: var(--slate-100);
    border-radius: 4px;
    overflow: hidden;
}

.stats-bk-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}

.stats-bk-value {
    width: 220px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-600);
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
}

.stats-bk-pct {
    color: var(--slate-400);
    font-weight: 400;
}

/* Conversion-rate variant: narrower value column → wider bar */
.stats-bk-row--conv .stats-bk-value {
    width: 130px;
}
.stats-bk-row--conv .stats-bk-label {
    width: 110px;
}

.stats-bk-toggle {
    display: block;
    margin: 8px auto 0;
    padding: 4px 14px;
    background: none;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    color: var(--slate-500);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .15s ease;
}
.stats-bk-toggle:hover {
    background: var(--slate-50);
    color: var(--slate-700);
    border-color: var(--slate-300);
}

/* ── Funnel (horizontal bar steps) ── */
.stats-funnel {
    padding: 8px 0;
}

.fn-steps {
    display: flex;
    flex-direction: column;
}

/* Each funnel step */
.fn-step {
    padding: 0 4px;
}

.fn-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.fn-step-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.fn-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-700);
    flex: 1;
}

.fn-step-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--slate-800);
    font-variant-numeric: tabular-nums;
}

.fn-bar-track {
    height: 10px;
    background: var(--slate-100);
    border-radius: 5px;
    overflow: hidden;
}

.fn-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
    min-width: 3px;
}

/* Drop-off between steps — positioned to the right, arrow pointing right */
.fn-dropoff {
    display: flex;
    justify-content: flex-end;
    padding: 4px 4px 4px 16px;
}

.fn-dropoff--right {
    justify-content: flex-end;
}

.fn-dropoff-line {
    display: none;
}

.fn-dropoff-line--green {
    display: none;
}

.fn-dropoff--none {
    padding: 2px 4px 2px 16px;
}

.fn-dropoff-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 12px;
    white-space: nowrap;
}

.fn-dropoff-arrow {
    font-size: 12px;
    color: #e17055;
    font-weight: 700;
    line-height: 1;
}

.fn-dropoff-lost {
    font-size: 12px;
    font-weight: 600;
    color: #c0392b;
}

.fn-dropoff-pct {
    font-size: 11px;
    color: #e17055;
    font-weight: 500;
}

/* Conversion summary */
.fn-conversion {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid var(--slate-100);
}

.fn-conv-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-accent);
}

.fn-conv-label {
    font-size: 13px;
    color: var(--slate-500);
}

/* Drop-off reasons breakdown */
.fn-reasons {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--slate-100);
}

.fn-reasons-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.fn-reason-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.fn-reason-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fn-reason-label {
    color: var(--slate-600);
    min-width: 130px;
}

.fn-reason-bar-track {
    flex: 1;
    height: 6px;
    background: var(--slate-100);
    border-radius: 3px;
    overflow: hidden;
}

.fn-reason-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fn-reason-val {
    font-weight: 600;
    color: var(--slate-700);
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Heatmap ── */
.stats-heatmap {
    overflow-x: auto;
}

.stats-hm-grid {
    display: grid;
    /* Column count is dynamic — set by JS via --hm-cols to match the venue's
       opening-hours range. Falls back to 14 (legacy 8h-21h range). */
    grid-template-columns: 28px repeat(var(--hm-cols, 14), 1fr);
    gap: 2px;
    min-width: 420px;
}

.stats-hm-corner {
    /* empty top-left cell */
}

.stats-hm-hdr {
    font-size: 9px;
    font-weight: 500;
    color: var(--slate-400);
    text-align: center;
    padding: 2px 0;
}

.stats-hm-day {
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
}

.stats-hm-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    border-radius: 3px;
    cursor: default;
    min-height: 22px;
}

/* Revenue mode: keep the SAME square cells as the count grid (aspect-ratio
   inherited). Cells show a bare number now, so only a slightly smaller font is
   needed to fit larger values. */
.stats-hm-grid--money .stats-hm-cell {
    font-size: 7px;
    padding: 0 1px;
}

/* Groups/Revenue metric dropdown in each heatmap card header. The header is a
   flex space-between, so this sits flush right. text-transform:none keeps the
   option labels readable against the uppercased header. */
.stats-hm-metric {
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--slate-600);
    background: var(--slate-50, #f8fafc);
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    padding: 3px 6px;
    cursor: pointer;
}
.stats-hm-metric:hover {
    border-color: var(--slate-300);
}

.stats-hm-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 8px 0 2px;
    font-size: 11px;
    color: var(--slate-500);
}

.stats-hm-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stats-hm-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Continuous single-hue scale legend below heatmap */
.stats-hm-scale-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--slate-500);
}
.stats-hm-scale-lbl {
    min-width: 16px;
    text-align: center;
}
.stats-hm-scale {
    display: flex;
    flex: 1;
    height: 10px;
    border-radius: 99px;
    overflow: hidden;
    max-width: 240px;
}
.stats-hm-scale span {
    flex: 1;
}

/* ── Empty state ── */
.stats-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--slate-400);
    font-size: 13px;
    line-height: 1.6;
}

.stats-empty strong {
    color: var(--slate-600);
}

/* ── Chart card min-height ── */
.stats-chart-card,
.stats-breakdown-card {
    min-height: 240px;
    padding: 20px;
}

/* ── Chart.js canvas wrapper ── */
.stats-chart-wrap {
    position: relative;
    height: 260px;
    width: 100%;
}
.stats-chart-wrap--tall {
    height: 360px;
}
.stats-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ── Floating tooltip box (rendered via Chart.js external callback)
   Sits absolutely at the top-right corner of the chart wrap, stacked on
   top of any surrounding content. Never overlaps the chart canvas, never
   moves between hovers (only its content reorders by value).
   ──────────────────────────────────────────────────────────────── */
.stats-chart-tip {
    position: absolute;
    bottom: 100%;
    right: 12px;
    margin-bottom: 8px;
    z-index: 10;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    width: 240px;
    pointer-events: none;
    visibility: hidden;
    font-family: 'Inter', sans-serif;
}
.stats-chart-tip.visible { visibility: visible; }
.stats-chart-tip-title { font-weight: 600; margin-bottom: 6px; font-size: 12px; }
.stats-chart-tip-row {
    display: flex; align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums;
}
.stats-chart-tip-swatch {
    width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px;
}
.stats-chart-tip-label { flex: 1; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-chart-tip-val { font-weight: 600; }
.stats-chart-tip-after {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Stacked-history section (Traffic over time, by dimension) ── */
.stats-history-section {
    margin-top: 24px;
}
.stats-subsection-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--slate-800);
    margin: 32px 0 4px;
}
.stats-subsection-hint {
    font-size: 13px;
    color: var(--slate-500);
    margin: 0 0 12px;
}
.stats-history-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--slate-400);
    font-size: 13px;
    font-style: italic;
}
.stats-history-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.stats-history-tab {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    color: var(--slate-700);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stats-history-tab:hover {
    background: var(--slate-50);
    color: var(--slate-700);
    border-color: var(--slate-300);
}
.stats-history-tab--active,
.stats-history-tab--active:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Metric toggle (Visitors / Bookings / Booking rate / Booking revenue) */
.stats-history-metric-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.stats-history-metric-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    background: var(--slate-50);
    color: var(--slate-600);
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stats-history-metric-btn:hover {
    background: var(--slate-100);
    color: var(--slate-800);
    border-color: var(--slate-300);
}
.stats-history-metric-btn--active,
.stats-history-metric-btn--active:hover {
    background: var(--slate-800);
    color: #fff;
    border-color: var(--slate-800);
}

/* ── Date range controls ── */
.stats-date-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.stats-date-inputs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.stats-range-select {
    padding: 7px 30px 7px 12px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-700);
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.stats-range-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.stats-custom-dates {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.stats-date-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-500);
}

.stats-date-input {
    padding: 6px 10px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    color: var(--slate-700);
    background: #fff;
    font-family: inherit;
    min-width: 140px;
}

.stats-date-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.stats-date-apply {
    padding: 6px 14px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.stats-date-apply:hover {
    opacity: 0.85;
}

.stats-date-range-label {
    font-size: 13px;
    color: var(--slate-500);
    font-style: italic;
    white-space: nowrap;
}

/* ── Period-comparison: warning banner when previous range pre-dates tracking ── */
.stats-compare-warning {
    margin-top: 8px;
    padding: 8px 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

/* ── Period-comparison: mini delta line under each summary card value ── */
.stats-mini-delta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    min-height: 14px; /* avoid layout jump when empty */
}
.stats-mini-delta--up    { color: #059669; }
.stats-mini-delta--down  { color: #dc2626; }
.stats-mini-delta--flat  { color: var(--slate-500); }
.stats-mini-delta--na    { color: var(--slate-500); font-style: italic; font-weight: 500; }

@media (max-width: 768px) {
    .stats-date-range {
        flex-direction: column;
        align-items: stretch;
    }
    .stats-date-inputs {
        flex-direction: column;
    }
    .stats-custom-dates {
        flex-direction: column;
    }
    .stats-date-input {
        min-width: 100%;
    }
    .stats-range-select {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Statistics — Extended Sections (Products, Satisfaction, Conversion, Ops)
   ═══════════════════════════════════════════════════════════════════ */

/* Two-column grid variant */
.stats-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Stacked vertical bar columns (used for online/walk-in, crowd, errors) */
.stats-bar-chart--stacked {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    min-height: 140px;
    padding: 8px 4px 0;
}

.stats-stacked-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.stats-stacked-label {
    font-size: 9px;
    color: var(--slate-400);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-stacked-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 28px;
    height: 120px;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.stats-stacked-seg {
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

/* ── Diverging (population-pyramid) variant ── */
/* Pre-booked extends up from the centre axis, Walk-in extends down.
   The shared centre line is the visual zero — like male-vs-female natality charts. */
.stats-stacked-bar--diverging {
    height: 240px;
    border-radius: 0;
    overflow: visible;
    border-bottom: none;
    position: relative;
}
.stats-stacked-bar--diverging::after {
    /* The centre axis line that both bars hug. */
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 1px;
    background: var(--slate-200, #e2e8f0);
    pointer-events: none;
}
.stats-diverging-top {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.stats-diverging-bottom {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.stats-diverging-seg-up {
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}
.stats-diverging-seg-down {
    width: 100%;
    min-height: 2px;
    border-radius: 0 0 2px 2px;
    transition: height 0.3s ease;
}

/* ── Sparse-period notice (shown above charts when bucket count < 3) ── */
.stats-sparse-notice {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #78350f;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.stats-sparse-switch {
    background: #fff;
    border: 1px solid #d97706;
    color: #92400e;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.stats-sparse-switch:hover {
    background: #d97706;
    color: #fff;
}

/* Rating stars (golden) */
.stats-rating-stars {
    color: #f59e0b;
    font-size: 11px;
    letter-spacing: -1px;
}

/* ── Rating breakdown — Proposal 1 layout ── */
/* Bar = average rating (0–5). Bar opacity = vote-count confidence.        */
/* Stars sit in a fixed-width column so they line up vertically per row.   */
.stats-rk-scale {
    flex: 1;
    position: relative;
    height: 18px;
}
.stats-rk-scale-track {
    position: absolute;
    inset: 0;
    background: var(--slate-100);
    border-radius: 4px;
    overflow: hidden;
}
.stats-rk-scale-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background: #6366f1;
    transition: width 0.3s ease, opacity 0.3s ease;
}
.stats-rk-tick {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--slate-300);
    pointer-events: none;
}
.stats-rk-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.stats-rk-score {
    width: 28px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-700);
}
.stats-rk-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* 5 stars × 18px + 4 gaps × 3px = 102px → identical column width every row */
    width: 102px;
    flex-shrink: 0;
}
.stats-rk-stars svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}
.stats-rk-votes {
    width: 78px;
    text-align: right;
    font-size: 12px;
    color: var(--slate-400);
    font-weight: 400;
}

/* Delta badges */
.stats-delta-value {
    font-size: 22px !important;
    font-weight: 700;
}

.stats-delta--up {
    color: #10b981 !important;
}

.stats-delta--down {
    color: #ef4444 !important;
}

.stats-delta--flat {
    color: var(--slate-400) !important;
}

/* A/B test section — intro description under the title */
.stats-section-desc {
    margin: -4px 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate-500);
    max-width: 720px;
}

/* A/B device segment toggle — sits above the headline cards */
.stats-ab-device-toggle {
    margin: 0 0 16px;
}

/* A/B sound-activation headline — prominent figure above the breakdown */
.stats-ab-sound-headline {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0 14px;
    flex-wrap: wrap;
}

.stats-ab-sound-big {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #6d28d9;
}

.stats-ab-sound-sub {
    font-size: 13px;
    color: var(--slate-500);
}

/* Section title with icon */
.stats-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-700);
    margin: 0 0 16px;
    padding: 0;
}

.stats-section-title svg {
    color: var(--slate-400);
    flex-shrink: 0;
}

/* Legend items (for stacked charts) */
.stats-legend {
    display: flex;
    gap: 12px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--slate-500);
}

.stats-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

@media (max-width: 768px) {
    .stats-grid--2,
    .stats-grid--3 {
        grid-template-columns: 1fr;
    }

    .stats-stacked-bar {
        height: 80px;
    }

    .stats-stacked-label {
        font-size: 8px;
    }

    .stats-legend {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FINANCIAL REPORTS PAGE (/reports)
   ═══════════════════════════════════════════════════════════════ */

.reports-page { padding: 14px 20px 40px; max-width: 1400px; }

.rep-controls { padding: 14px 16px; margin-bottom: 14px; }

.rep-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rep-field { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.rep-field-label { font-size: 11px; color: var(--slate-500, #64748b); font-weight: 500; }
.rep-select, .rep-date {
    padding: 7px 10px;
    border: 1px solid var(--slate-300, #cbd5e1);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    min-width: 130px;
}

.rep-btn {
    padding: 8px 16px;
    border: 1px solid var(--slate-300, #cbd5e1);
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}
.rep-btn:hover:not(:disabled) { background: var(--slate-100, #f1f5f9); }
.rep-btn:disabled { opacity: .5; cursor: not-allowed; }
.rep-btn--primary {
    background: var(--color-primary, #6c5ce7);
    color: #fff;
    border-color: var(--color-primary, #6c5ce7);
}
.rep-btn--primary:hover:not(:disabled) {
    background: var(--color-primary, #6c5ce7);
    opacity: .9;
}

.rep-controls-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--slate-500, #64748b);
}

.rep-state {
    margin: 14px 0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
}
.rep-state--error   { background: #fee2e2; color: #991b1b; }
.rep-state--info    { background: #f1f5f9; color: #475569; }

/* ── Loading state — animated wave + cycling caption ─────────
   Big, lively block shown while /api/reports is fetching.
   • 5 vertical bars doing a sound-equaliser pulse (CSS-only).
   • Indigo→violet gradient on each bar so the colour itself shifts.
   • Caption sits below and fades between phrases via JS.
*/
.rep-state--loading {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    color: #4338ca;
    padding: 48px 18px 44px;
    border: 1px solid #e0e7ff;
}
.rep-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.rep-loader-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 64px;
}
.rep-loader-bars span {
    display: block;
    width: 10px;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(180deg, #818cf8 0%, #6366f1 50%, #7c3aed 100%);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
    animation: rep-loader-pulse 1.05s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.rep-loader-bars span:nth-child(1) { animation-delay: 0.00s; }
.rep-loader-bars span:nth-child(2) { animation-delay: 0.12s; }
.rep-loader-bars span:nth-child(3) { animation-delay: 0.24s; }
.rep-loader-bars span:nth-child(4) { animation-delay: 0.36s; }
.rep-loader-bars span:nth-child(5) { animation-delay: 0.48s; }
@keyframes rep-loader-pulse {
    0%, 100% { transform: scaleY(0.30); opacity: 0.55; }
    50%      { transform: scaleY(1.00); opacity: 1.00; }
}
.rep-loader-caption {
    font-size: 15px;
    font-weight: 500;
    color: #4338ca;
    letter-spacing: 0.01em;
    min-height: 1.4em;
    transition: opacity 240ms ease;
}
.rep-loader-caption.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .rep-loader-bars span { animation: none; transform: scaleY(0.6); opacity: 0.85; }
    .rep-loader-caption   { transition: none; }
}

/* ── Partners table ──────────────────────────────────────────
   Small caption under a column header — used to clarify a money
   column's scope (e.g. "after discount", "to partner") without
   bloating the header label itself.
*/
.rep-th-sub {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    color: var(--slate-500, #64748b);
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Dual-stepper partners render as two rows (main + sub). The sub-row
   only carries the second ticket-type count; money columns above belong
   to the main row. Visually link them by removing the top border on
   the sub-row and indenting its first cell. */
.rep-table--partners tr.rep-partner-sub td {
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 10px;
}
.rep-table--partners tr.rep-partner-main td {
    padding-bottom: 4px;
}
.rep-table--partners tr.rep-partner-sub-label,
.rep-table--partners td.rep-partner-sub-label {
    padding-left: 22px;
    color: var(--slate-500, #64748b);
    font-size: 12px;
}

/* Influencer per-code table: family header row acts as a section divider;
   the subtotal reuses the generic .rep-total-row styling. */
.rep-table--influencers tr.rep-infl-family td {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
    background: var(--slate-50, #f8fafc);
    padding-top: 10px;
    padding-bottom: 6px;
}

.rep-cards { margin-bottom: 14px; }

.rep-card { padding: 14px 16px; margin-bottom: 14px; }

.rep-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.rep-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-800, #1e293b);
}

.rep-badge {
    font-size: 11px;
    color: var(--slate-500, #64748b);
    background: var(--slate-100, #f1f5f9);
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rep-table th, .rep-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.rep-table th {
    font-weight: 600;
    color: var(--slate-600, #475569);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--slate-50, #f8fafc);
}
.rep-table tfoot td,
.rep-table .rep-total-row td {
    font-weight: 600;
    background: var(--slate-50, #f8fafc);
    border-top: 2px solid var(--slate-200, #e2e8f0);
}
.rep-table .ta-r { text-align: right; }
.rep-table .ta-c { text-align: center; }
.rep-muted { color: var(--slate-400, #94a3b8); }
.rep-ok    { color: var(--color-success, #10b981); font-weight: 600; }
.rep-warn  { color: #e8590c; font-weight: 600; }

.rep-table-scroll { overflow-x: auto; }

.rep-pill {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
.rep-pill--postpaid {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

.rep-visitors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.rep-visitor-card {
    background: var(--slate-50, #f8fafc);
    border-radius: 10px;
    padding: 12px 14px;
}
.rep-visitor-card--total {
    background: linear-gradient(135deg, #faf9ff, #fff);
    border: 1px solid var(--color-primary, #6c5ce7);
}
.rep-visitor-card--total .rep-visitor-qty { color: var(--color-primary, #6c5ce7); }
.rep-visitor-label {
    font-size: 11px;
    color: var(--slate-500, #64748b);
    margin-bottom: 4px;
}
.rep-visitor-qty {
    font-size: 22px;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
}

.rep-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) {
    .rep-two-col { grid-template-columns: 1fr; }
}

.rep-anomalies { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--slate-200, #e2e8f0); }
.rep-anomalies h4 { margin: 0 0 8px 0; font-size: 13px; color: #e8590c; }

/* ── Franchise fee base (highlighted card — violet) ── */
.rep-fee-card {
    border-left: 4px solid #8b5cf6 !important;
    background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 60%) !important;
}
.rep-fee-card .rep-card-header h3 { color: #5b21b6; }
.rep-badge--accent {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}
.hidden-card { display: none !important; }
.rep-fee-body {
    padding: 14px 20px 10px;
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
.rep-fee-headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rep-fee-amount {
    font-size: 32px;
    font-weight: 700;
    color: #5b21b6;
    white-space: nowrap;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.rep-fee-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #5b21b6;
    opacity: 0.75;
}
.rep-fee-explain {
    font-size: 12px;
    color: var(--slate-600, #475569);
    max-width: 560px;
    line-height: 1.5;
    flex: 1 1 320px;
}
/* Reconciliation bridge inside the franchise-fee card */
.rep-fee-bridge {
    margin: 6px 14px 14px;
    padding: 12px 14px 8px;
    background: #fff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
}

/* ── Export rows (Full report / Official VAT) ────────────────── */
.export-row {
    display: grid;
    grid-template-columns: max-content max-content 1fr max-content;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--slate-200, #e2e8f0);
}
@media (max-width: 760px) {
    .export-row { grid-template-columns: 1fr; row-gap: 6px; }
    .export-row .rep-export-group { margin-left: 0; justify-self: start; }
}
.export-row-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 600;
}
.export-row--full .export-row-title { color: #3730a3; }
.export-row--vat  .export-row-title { color: #065f46; }
.export-row .export-reason {
    font-size: 12px; color: var(--slate-500, #64748b); font-style: italic;
    justify-self: end; text-align: right;
}
.export-row.is-disabled { opacity: .5; }
.export-row.is-disabled .rep-btn { pointer-events: none; }

.rep-export-group {
    display: inline-flex; gap: 0;
    border: 1px solid var(--slate-300, #cbd5e1);
    border-radius: 8px; overflow: hidden;
    justify-self: end;
}
.rep-export-group .rep-btn { border: 0; border-radius: 0; }
.rep-export-group .rep-btn + .rep-btn { border-left: 1px solid var(--slate-200, #e2e8f0); }
.rep-export-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 10px 12px; border-right: 1px solid var(--slate-200, #e2e8f0);
    display: flex; align-items: center;
}

/* Full report — indigo/blue */
.rep-export-group--full { border-color: #c7d2fe; }
.rep-export-group--full .rep-btn { background: #eef2ff; color: #3730a3; }
.rep-export-group--full .rep-btn + .rep-btn { border-left-color: #c7d2fe; }
.rep-export-group--full .rep-btn:hover:not(:disabled) { background: #e0e7ff; }
.rep-export-group--full .rep-export-label {
    background: #e0e7ff; color: #3730a3; border-right-color: #c7d2fe;
}

/* VAT report — emerald/green (official) */
.rep-export-group--vat { border-color: #a7f3d0; }
.rep-export-group--vat .rep-btn { background: #ecfdf5; color: #065f46; }
.rep-export-group--vat .rep-btn + .rep-btn { border-left-color: #a7f3d0; }
.rep-export-group--vat .rep-btn:hover:not(:disabled) { background: #d1fae5; }
.rep-export-group--vat .rep-export-label {
    background: #d1fae5; color: #065f46; border-right-color: #a7f3d0;
}

.rep-badge--full { background: #3730a3; color: #fff; border-color: #3730a3; }
.rep-badge--vat  { background: #10b981; color: #fff; border-color: #10b981; }
.rep-fee-bridge-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 8px;
}
.rep-table--bridge { width: 100%; font-size: 13px; }
.rep-table--bridge th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--slate-500, #64748b);
    font-weight: 600;
    padding: 4px 8px;
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.rep-table--bridge td { padding: 6px 8px; }
.rep-table--bridge tbody tr + tr td { border-top: 1px dashed var(--slate-100, #f1f5f9); }
.rep-fee-bridge-subtotal td {
    border-top: 1px solid var(--slate-200, #e2e8f0) !important;
    font-weight: 600;
    color: var(--slate-700, #334155);
    background: #fffbeb;
}
.rep-fee-bridge-adjust td {
    color: var(--slate-600, #475569);
    font-style: italic;
    background: #fffbeb;
}
.rep-fee-bridge-total td {
    border-top: 2px solid #f59e0b !important;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
}

/* Hidden on screen, shown in print */
.rep-print-header { display: none; }

/* ── Print stylesheet (the PDF export is window.print()) ── */
@media print {
    /* Landscape + tight margins give wide tables (per-period has 10 cols)
       enough horizontal room to render every cell on a single line. */
    @page { size: A4 landscape; margin: 10mm; }

    /* Hide everything except the report */
    body > *:not(.page-container),
    .sidebar,
    .burger-btn,
    .env-banner,
    .network-banner,
    .toast-container,
    .modal-overlay,
    .userMenu { display: none !important; }

    .page-container {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .reports-page { padding: 0; max-width: 100%; }

    /* Hide controls + buttons when printing */
    .rep-controls,
    .rep-btn,
    .orders-page-subtitle { display: none !important; }

    .orders-page-header { margin-bottom: 8px; }

    .rep-print-header {
        display: block;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
    }
    .rep-print-header h2 { margin: 0 0 4px 0; font-size: 18px; }
    .rep-print-header div { font-size: 12px; color: #444; }

    .income-cards {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        page-break-inside: avoid;
    }
    .income-card { box-shadow: none; border: 1px solid #ddd; }

    .rep-card,
    .orders-table-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    .rep-table { font-size: 10px; }
    .rep-table th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; }
    .rep-table th,
    .rep-table td { padding: 4px 6px; }

    /* Keep every cell on a single line — currency + amount must never wrap.
       The landscape page + reduced font size give enough horizontal room. */
    .rep-table th,
    .rep-table td { white-space: nowrap; }
    /* Free-text columns (cart notes, descriptions) may still wrap. */
    .rep-table--disc td:first-child,
    .rep-table--other td:nth-child(2),
    .rep-table--other td:nth-child(3) { white-space: normal; }

    /* Scroll wrappers must not clip in print. */
    .rep-table-scroll { overflow: visible !important; }

    .rep-two-col { grid-template-columns: 1fr 1fr; }

    a { color: #000 !important; text-decoration: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   POS — Email-collection gauge banner (above category tabs)
   Source of truth: demos/email-gauge-banner-final.html
   ══════════════════════════════════════════════════════════════ */
.email-gauge-banner {
    border-radius: 12px;
    padding: 14px 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: 1px solid #4f46e5;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
    color: #fff;
    margin-bottom: 12px;
    font-family: var(--font-body, 'Poppins', sans-serif);
    flex-shrink: 0;
}
.email-gauge-banner .egb-icn {
    width: 42px; height: 42px; border-radius: 50%;
    background: #fff; color: #0f172a;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.email-gauge-banner .egb-icn svg { width: 22px; height: 22px; }
.email-gauge-banner .egb-pct {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px; font-weight: 800; color: #fff;
    line-height: 1; letter-spacing: -.02em; flex-shrink: 0; min-width: 60px;
}
.email-gauge-banner .egb-pct small {
    font-size: 12px; color: rgba(255,255,255,.7); font-weight: 700;
}
.email-gauge-banner .egb-right { flex: 1; min-width: 0; }
.email-gauge-banner .egb-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; color: rgba(255,255,255,.85); margin-bottom: 6px;
}
.email-gauge-banner .egb-meta b {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800; color: #fff;
}
.email-gauge-banner .egb-meta .egb-lbl {
    font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.7); font-weight: 700;
}
.email-gauge-banner .egb-pb {
    position: relative; height: 10px; border-radius: 5px;
    background: rgba(255,255,255,.18); margin-top: 18px;
}
.email-gauge-banner .egb-fill {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
    background: linear-gradient(90deg, #fff, #e0e7ff);
    box-shadow: 0 0 12px rgba(255,255,255,.4);
    transition: width .6s ease;
}
.email-gauge-banner .egb-notch {
    position: absolute; top: -4px; bottom: -4px; width: 3px;
    transform: translateX(-50%); background: #fff; border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 14px rgba(255,255,255,.85);
    z-index: 3;
}
.email-gauge-banner .egb-notch::before,
.email-gauge-banner .egb-notch::after {
    content: ""; position: absolute; left: 50%; width: 9px; height: 9px;
    background: #fff; border-radius: 50%; transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255,255,255,.85);
}
.email-gauge-banner .egb-notch::before { top: -9px; }
.email-gauge-banner .egb-notch::after  { bottom: -9px; }

/* Milestone emojis on the bar */
.email-gauge-banner .egb-ms {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4; font-size: 18px; line-height: 1;
    pointer-events: none;
    filter: none;
    opacity: 1;
    transition: all .4s ease;
}
.email-gauge-banner .egb-ms.egb-crown { transform: translate(-50%, -58%); }
.email-gauge-banner .egb-ms.egb-reached {
    filter: none; opacity: 1; font-size: 18px;
    text-shadow: 0 0 6px rgba(255,255,255,.55);
}
@keyframes egb-pulse-scale {
    0%, 100% { transform: translate(-50%, -50%) scale(1.1); }
    50%      { transform: translate(-50%, -50%) scale(1.45); }
}
@keyframes egb-pulse-scale-crown {
    0%, 100% { transform: translate(-50%, -58%) scale(1.1); }
    50%      { transform: translate(-50%, -58%) scale(1.45); }
}
.email-gauge-banner .egb-ms.egb-reached.egb-best {
    text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.55);
    animation: egb-pulse-scale 1.6s ease-in-out infinite;
}
.email-gauge-banner .egb-ms.egb-reached.egb-best.egb-crown {
    animation-name: egb-pulse-scale-crown;
}

/* Fake-email red dots — one per Bouncer-rejected address in the window.
   Cluster at the right edge of the progress bar; never count toward KPI. */
.email-gauge-banner .egb-fake-wrap {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 5;
    pointer-events: auto;
}
.email-gauge-banner .egb-fake-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 0 6px rgba(239,68,68,.7);
}
.email-gauge-banner .egb-fake-more {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #ef4444;
    border-radius: 8px;
    padding: 1px 5px;
    line-height: 1.2;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.85);
}

/* ══════════════════════════════════════════════════════════════
   POS — Bonus orange popup (critical email-ratio dip)
   ══════════════════════════════════════════════════════════════ */
.email-popup-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    animation: egb-fade-in .25s ease;
}
@keyframes egb-fade-in { from { opacity: 0; } to { opacity: 1; } }
.email-popup {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74; border-radius: 16px;
    padding: 24px 28px; max-width: 480px;
    display: flex; gap: 16px; align-items: flex-start;
    box-shadow: 0 24px 60px rgba(249, 115, 22, 0.30);
    font-family: var(--font-body, 'Poppins', sans-serif);
    animation: egb-pop-in .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes egb-pop-in {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.email-popup .ep-icn {
    width: 48px; height: 48px; border-radius: 12px;
    background: #f97316; color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 6px 14px rgba(249, 115, 22, 0.35);
}
.email-popup .ep-body { flex: 1; }
.email-popup .ep-h {
    font-weight: 800; color: #9a3412; font-size: 17px; line-height: 1.25;
}
.email-popup .ep-h b {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.email-popup .ep-s {
    color: #9a3412; opacity: .92; margin-top: 8px;
    font-size: 13px; line-height: 1.5;
}
.email-popup .ep-s b {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800;
}
.email-popup .ep-actions {
    display: flex; gap: 10px; margin-top: 14px;
}
.email-popup .ep-btn {
    padding: 9px 16px; border-radius: 8px; font-size: 12.5px;
    font-weight: 700; cursor: pointer; border: none;
    font-family: inherit;
}
.email-popup .ep-btn-primary { background: #f97316; color: #fff; }
.email-popup .ep-btn-primary:hover { background: #ea580c; }
/* ══════════════════════════════════════════════════════════════
   Shift-emails inspection modal (cashier-counted page)
   Opens when clicking the email-ratio badge — lists all emails
   captured during the shift with auto-flags for likely junk.
   ══════════════════════════════════════════════════════════════ */
.shift-emails-overlay {
    position: fixed; inset: 0; z-index: 9100;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: se-fade .2s ease;
}
@keyframes se-fade { from { opacity: 0; } to { opacity: 1; } }
.shift-emails-modal {
    background: #fff; border-radius: 14px;
    width: 100%; max-width: 760px; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    font-family: var(--font-body, 'Poppins', sans-serif);
}
.shift-emails-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 22px 14px; border-bottom: 1px solid var(--slate-200);
    gap: 16px;
}
.shift-emails-ttl {
    font-size: 16px; font-weight: 700; color: var(--slate-900);
    margin-bottom: 4px;
}
.shift-emails-sub {
    font-size: 12px; color: var(--slate-500);
    font-family: var(--font-mono, monospace);
}
.shift-emails-close {
    background: transparent; border: none;
    font-size: 26px; line-height: 1; color: var(--slate-400);
    cursor: pointer; padding: 0 4px;
}
.shift-emails-close:hover { color: var(--slate-700); }
.shift-emails-body {
    flex: 1; overflow-y: auto; padding: 14px 22px 22px;
}
.shift-emails-body .spinner {
    margin: 32px auto;
}
.shift-emails-empty {
    text-align: center; padding: 32px 16px;
    color: var(--slate-500); font-size: 13px;
}
/* Zero emails despite served groups — loud warning banner */
.shift-emails-noemail {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 12px;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 10px;
    color: #b91c1c; font-size: 13px;
}
.shift-emails-summary {
    font-size: 13px; color: var(--slate-700);
    margin-bottom: 12px;
}
.shift-emails-summary b {
    font-family: var(--font-mono, monospace); font-weight: 700;
}
/* ── Overview raster header (event lanes on a shared shift clock) ── */
.se-rstr {
    border: 1px solid var(--slate-200); border-radius: 10px;
    padding: 10px 12px 8px; margin-bottom: 12px;
    background: var(--slate-50);
}
.se-rstr-grid { position: relative; }
.se-rstr-lane {
    position: relative; display: flex; align-items: center;
    height: 20px;
}
.se-rstr-lbl {
    width: 52px; flex: 0 0 52px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--slate-400);
}
.se-rstr-track {
    position: relative; flex: 1; height: 100%;
}
.se-rstr-dot {
    position: absolute; top: 50%; width: 9px; height: 9px;
    border-radius: 50%; border: 1.5px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
.se-rstr-reset {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #fdba74; transform: translateX(-50%);
    z-index: 0;
}
.se-rstr-axis {
    position: relative; height: 14px; margin-left: 52px; margin-top: 2px;
}
.se-rstr-tick {
    position: absolute; transform: translateX(-50%);
    font-family: var(--font-mono); font-size: 9.5px; color: var(--slate-400);
}
.se-rstr-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 8px; padding-top: 7px;
    border-top: 1px solid var(--slate-150);
    font-size: 10.5px; color: var(--slate-500);
}
.se-rstr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.se-rstr-key {
    width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
.se-rstr-key--line {
    width: 2px; height: 11px; border-radius: 1px; background: #fdba74;
}

.shift-emails-list {
    border: 1px solid var(--slate-200); border-radius: 10px;
    overflow: hidden;
}
.shift-emails-row {
    display: grid;
    /* Last column FIXED (not auto): a flag pill must not steal width from the
       email column, otherwise the Bouncer and Running-ratio columns shift left
       on rows that carry a "Fake · no point" pill, breaking alignment. */
    grid-template-columns: 46px 84px 1fr 78px 124px 116px;
    gap: 9px;
    align-items: center;
    padding: 3px 12px;
    border-bottom: 1px solid var(--slate-100);
    font-size: 12px;
    line-height: 1.25;
}
.shift-emails-row .se-bouncer {
    display: flex; justify-content: flex-start;
}
.shift-emails-row .se-ratio {
    display: flex; justify-content: flex-start;
    font-variant-numeric: tabular-nums;
}
/* Cumulative window breakdown chip (emails / denominator, ratio, group count).
   Fixed sub-columns so the fraction, the percentage and the group count line
   up vertically across every row instead of drifting with content width. */
.cum-chip {
    display: grid;
    grid-template-columns: 58px 38px auto;
    align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums; font-size: 11px;
    white-space: nowrap;
}
.cum-chip .cum-frac {
    color: var(--slate-600, #475569); font-weight: 600;
    display: inline-flex; align-items: center; gap: 3px;
    justify-content: flex-end;
}
.cum-chip .cum-ok   { color: #15803d; font-weight: 700; text-align: right; }
.cum-chip .cum-low  { color: #dc2626; font-weight: 700; text-align: right; }
.cum-chip .cum-grp  { color: var(--slate-400, #94a3b8); }
.cum-mail-ico {
    width: 11px; height: 11px; flex: 0 0 auto;
    color: var(--slate-400, #94a3b8);
    vertical-align: -1px;
}
.shift-emails-row:last-child { border-bottom: none; }
.shift-emails-row--head {
    background: var(--slate-50);
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--slate-500); font-weight: 700;
    padding: 6px 12px;
    position: sticky; top: 0; z-index: 1;
}
.shift-emails-row--flagged {
    background: #fff7ed;
}
/* Email that does not count toward the ratio (duplicate or fake) — dimmed,
   with the email struck through so it reads as "no point earned". */
.shift-emails-row--nocount {
    opacity: 0.72;
}
.shift-emails-row--nocount .se-mail {
    text-decoration: line-through;
    text-decoration-color: var(--slate-400, #94a3b8);
    color: var(--slate-500, #64748b);
}
/* Fake email (Bouncer-rejected) — orange wash so the dead addresses stand out
   from the real ones at a glance. Wins over the generic --flagged tint. */
.shift-emails-row--fake {
    background: #fff1e6;
}
.shift-emails-row--fake:hover {
    background: #ffe6d4;
}
.shift-emails-row .se-time {
    font-family: var(--font-mono, monospace);
    color: var(--slate-500);
    font-size: 11px;
}
.shift-emails-row .se-name {
    color: var(--slate-700);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shift-emails-row .se-mail {
    font-family: var(--font-mono, monospace);
    color: var(--slate-900);
    /* Always show the full address — even fakes. Wrap rather than truncate. */
    white-space: normal; word-break: break-all;
    font-size: 12px;
}
.shift-emails-row .se-flags {
    display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
}
/* Group-welcomed row — keeps the SAME 6-column grid as email rows so the
   time column and the running-ratio chip line up vertically across the whole
   table. The label spans the name+email+bouncer columns; the cum chip sits in
   the ratio column. */
.shift-emails-row.shift-emails-group {
    grid-template-columns: 46px 84px 1fr 78px 124px 116px;
    background: #f0f9ff;
    border-bottom: 1px solid #e0f2fe;
    cursor: help;
}
.shift-emails-row.shift-emails-group .se-group-label {
    grid-column: 2 / 5;          /* name + email + bouncer span */
    color: #0369a1;
    font-weight: 500;
    font-size: 12px;
    display: flex; align-items: center;
}
.shift-emails-row.shift-emails-group .se-group-run {
    grid-column: 5 / 7;          /* lands under the running-ratio column */
    color: #0369a1;
    font-weight: 700;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.shift-emails-row.shift-emails-group:hover {
    background: #e0f2fe;
}
/* Boring-game round row — full-width dark banner so it reads as a hard reset
   line between windows. Keeps the same 46px time column for alignment. */
.shift-emails-row.shift-emails-round {
    grid-template-columns: 46px 1fr;
    background: var(--slate-700, #334155);
    border-top: 1px solid var(--slate-800, #1e293b);
    border-bottom: 1px solid var(--slate-800, #1e293b);
    cursor: help;
}
.shift-emails-row.shift-emails-round .se-time {
    color: var(--slate-300, #cbd5e1);
}
.shift-emails-row.shift-emails-round .se-round-label {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    display: flex; align-items: center;
}
.shift-emails-row.shift-emails-round:hover {
    background: var(--slate-800, #1e293b);
}

.flag-pill {
    display: inline-block;
    padding: 2px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.flag-pill.flag-red {
    background: #fee2e2; color: #b91c1c;
}
.flag-pill.flag-amber {
    background: #fef3c7; color: #92400e;
}
.flag-pill.flag-green {
    background: #dcfce7; color: #15803d;
}
.flag-pill.flag-grey {
    background: var(--slate-100); color: var(--slate-500);
}
.flag-red { color: #b91c1c; }
.flag-amber { color: #92400e; }
.flag-green { color: #15803d; }
.flag-grey { color: var(--slate-500); }

/* CTA footer inside the existing email-ratio tooltip */
.cc-email-tip-cta {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--slate-200);
    font-size: 10.5px; color: var(--color-primary);
    text-align: center; letter-spacing: .04em;
}

/* ═══════════════ Social Gift — post & tag → souvenir ═══════════════ */

/* Floating gift button — bottom-right of the product area, never overlaps
   the cart column or the pay grid (both live in .pos-cart on the right). */
.sg-fab {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(95, 90, 246, 0.45);
    animation: sgFabBob 2.4s ease-in-out infinite;
    z-index: 50;
}
.sg-fab:active { transform: scale(0.94); }
@keyframes sgFabBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Flow modal steps */
.sg-step { display: none; }
.sg-step.active { display: block; }

.sg-title {
    font-size: 18px; font-weight: 700; margin: 0 0 2px;
    display: flex; align-items: center; gap: 10px; color: var(--slate-800);
}
.sg-sub { color: var(--slate-500); font-size: 13px; margin: 0 0 16px; }

.sg-platform-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sg-platform-btn {
    border: 2px solid var(--slate-200); background: #fff; border-radius: var(--radius-lg);
    padding: 18px 8px 14px; cursor: pointer; font-family: inherit; text-align: center;
    transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sg-platform-btn:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.sg-platform-btn span { font-size: 13px; font-weight: 600; color: var(--slate-700); }

/* Camera stage */
.sg-cam-holder { position: relative; background: var(--slate-900); overflow: hidden; aspect-ratio: 4/3; }
.sg-cam-holder video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-cam-holder video.sg-mirrored { transform: scaleX(-1); }
.sg-cam-fallback {
    position: absolute; inset: 0; display: none; flex-direction: column; gap: 8px;
    align-items: center; justify-content: center; color: var(--slate-300); font-size: 13px;
    background: linear-gradient(160deg, #1e293b, #0f172a); text-align: center; padding: 20px;
}
.sg-frame-hint {
    position: absolute; inset: 18px; border: 2.5px dashed rgba(255,255,255,0.55);
    border-radius: 14px; pointer-events: none;
    display: flex; align-items: flex-start; justify-content: center;
}
.sg-frame-hint span {
    background: rgba(15,23,42,0.72); color: #fff; font-size: 12.5px; font-weight: 500;
    padding: 5px 14px; border-radius: var(--radius-full); margin-top: -14px;
}
.sg-cam-controls {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(transparent, rgba(15,23,42,0.6));
}
.sg-shutter {
    width: 66px; height: 66px; border-radius: var(--radius-full); border: 4px solid #fff;
    background: rgba(255,255,255,0.25); cursor: pointer; transition: transform 0.1s;
    display: flex; align-items: center; justify-content: center;
}
.sg-shutter:active { transform: scale(0.92); }
.sg-shutter::after { content: ''; width: 48px; height: 48px; border-radius: var(--radius-full); background: #fff; }
.sg-cam-side-btn {
    width: 46px; height: 46px; border-radius: var(--radius-full); border: none;
    background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); transition: background 0.15s;
}
.sg-cam-side-btn:hover { background: rgba(255,255,255,0.3); }
.sg-cam-spacer { width: 46px; }

/* Courtesy tip under the camera — how to photograph without grabbing the phone */
.sg-cam-tip {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 11px 16px 13px; background: var(--slate-50);
    border-top: 1px solid var(--slate-150);
    color: var(--slate-500); font-size: 12.5px; line-height: 1.45;
}
.sg-cam-tip svg { flex-shrink: 0; margin-top: 1px; color: var(--slate-400); }

/* Visitor-facing banner (front camera / flipped tablet) */
.sg-visitor-banner {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color: #fff; padding: 14px 20px; text-align: center; display: none;
}
.sg-visitor-banner .sg-vb-big { font-size: 18px; font-weight: 700; }
.sg-visitor-banner .sg-vb-small { font-size: 12.5px; opacity: 0.85; }

/* Verify step */
.sg-verify-photo { position: relative; aspect-ratio: 4/3; background: var(--slate-900); }
.sg-verify-photo canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-retake-chip {
    position: absolute; top: 12px; left: 12px; border: none; cursor: pointer;
    background: rgba(15,23,42,0.7); color: #fff; font-family: inherit; font-size: 12.5px;
    font-weight: 600; padding: 7px 14px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 6px;
}
.sg-check-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 6px; }
.sg-check-item {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border: 2px solid var(--slate-200); border-radius: var(--radius-lg);
    cursor: pointer; font-family: inherit; background: #fff; text-align: left;
    font-size: 14.5px; font-weight: 500; color: var(--slate-700); transition: all 0.15s;
}
.sg-check-box {
    width: 26px; height: 26px; border-radius: var(--radius-md); border: 2px solid var(--slate-300);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; color: transparent;
}
.sg-check-item.checked { border-color: var(--color-success); background: var(--color-success-bg); }
.sg-check-item.checked .sg-check-box { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.sg-confirm-btn {
    width: 100%; border: none; font-family: inherit; margin-top: 14px;
    background: var(--color-success); color: #fff; font-size: 16px; font-weight: 700;
    padding: 15px; border-radius: var(--radius-lg); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: opacity 0.15s, transform 0.1s;
}
.sg-confirm-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sg-confirm-btn:not(:disabled):active { transform: scale(0.98); }
.sg-audit-note {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 11.5px; color: var(--slate-400); margin-top: 10px;
}

/* Success step */
.sg-success-wrap { padding: 40px 26px 34px; text-align: center; position: relative; overflow: hidden; }
.sg-success-badge {
    width: 86px; height: 86px; margin: 0 auto 16px; border-radius: var(--radius-full);
    background: var(--color-success-bg); display: flex; align-items: center; justify-content: center;
    animation: sgPopIn 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes sgPopIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.sg-success-title { font-size: 21px; font-weight: 700; margin: 0 0 4px; color: var(--slate-800); }
.sg-success-sub { color: var(--slate-500); font-size: 13.5px; margin: 0 0 20px; }
.sg-tally-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-primary-bg); color: var(--color-primary);
    font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-full);
}
.sg-confetti-bit {
    position: absolute; width: 9px; height: 9px; top: -12px; border-radius: 2px;
    animation: sgConfFall linear forwards;
}
@keyframes sgConfFall { to { transform: translateY(460px) rotate(720deg); opacity: 0; } }
.sg-success-done {
    margin-top: 22px; width: 100%; border: 1.5px solid var(--slate-300); background: #fff;
    color: var(--slate-600); font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 12px; border-radius: var(--radius-lg); cursor: pointer;
}
.sg-uploading {
    display: none; align-items: center; justify-content: center; gap: 10px;
    padding: 14px; color: var(--slate-500); font-size: 13.5px;
}

/* ── Announcement nudge in the cart (shown when cart has person tickets) ── */
.sg-nudge {
    border: 1.5px solid #e9d5ff;
    background: linear-gradient(135deg, #fdf4ff, #f5f3ff);
    border-radius: var(--radius-lg); padding: 10px 11px; margin: 8px 0;
}
.sg-nudge-top { display: flex; align-items: flex-start; gap: 9px; }
.sg-nudge-icon {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-md);
    background: #ede9fe; display: flex; align-items: center; justify-content: center;
    animation: sgNudgeWiggle 3.2s ease-in-out infinite;
}
@keyframes sgNudgeWiggle {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-9deg); } 92% { transform: rotate(8deg); } 95% { transform: rotate(-5deg); }
}
.sg-nudge-txt { flex: 1; font-size: 12px; line-height: 1.45; color: var(--slate-700); }
.sg-nudge-txt b { color: var(--slate-900); }
.sg-say-btn {
    border: none; background: none; color: var(--color-primary); font-family: inherit;
    font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 0 0;
    text-decoration: underline; text-underline-offset: 2px;
}
.sg-nudge-check {
    display: flex; align-items: center; gap: 9px; margin-top: 8px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--slate-200); border-radius: var(--radius-md);
    padding: 7px 10px; font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--slate-600); width: 100%; text-align: left; transition: all 0.15s;
}
.sg-nudge-check .sg-check-box { width: 20px; height: 20px; border-radius: 6px; }
.sg-nudge-check.checked { border-color: var(--color-success); background: var(--color-success-bg); color: #047857; }
.sg-nudge-check.checked .sg-check-box { background: var(--color-success); border-color: var(--color-success); color: #fff; }

/* ── Orphan card-payment BLOCKER ────────────────────────────────────────
   The terminal took money and no sale exists for it. This blocks the till
   until the cashier creates the ticket or formally refuses.

   REMOVED — the previous passive `.opn-nudge` amber card lived here. It was
   ignorable and listed several charges at once. Do not restore it. */

/* Overlay is deliberately darker than .modal-overlay: this is a stop sign,
   not a normal dialog. z-index sits above the POS modals (10100) so nothing
   can cover it. */
.opb-overlay {
    display: none; position: fixed; inset: 0; z-index: 10200;
    background: rgba(15, 23, 42, .72);
    align-items: center; justify-content: center; padding: 20px;
}
.opb-overlay.active { display: flex; }

/* dvh, not vh: on a tablet the browser toolbars shrink the visible area, and
   vh resolves against the taller toolbar-hidden viewport, which pushes the
   action buttons off screen. Measured at 1024x664 and 820x553. */
.opb-modal {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 520px; max-height: 90dvh;
    display: flex; flex-direction: column; overflow: hidden;
    animation: opbIn 200ms ease forwards;
}
@keyframes opbIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }

/* Shake when the cashier tries to click out or press Escape, so it reads as
   locked rather than broken. */
.opb-modal.shake { animation: opbShake 400ms ease; }
@keyframes opbShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); } 40% { transform: translateX(9px); }
    60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

.opb-top {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border-bottom: 1px solid #fcd9a4;
    padding: 20px 22px 18px; text-align: center;
}
.opb-icon {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: var(--radius-full);
    background: #fef3c7; border: 2px solid #fcd9a4;
    display: flex; align-items: center; justify-content: center; color: #b45309;
}
.opb-title { font-size: 19px; font-weight: 600; color: var(--slate-900); margin: 0 0 4px; }
.opb-sub   { font-size: 13.5px; color: var(--slate-600); margin: 0; }

/* Shown ONLY when more than one is queued: the cashier learns another follows
   without being handed a list to choose from. */
.opb-queue {
    display: none; margin-top: 12px; font-size: 12px; font-weight: 600;
    color: #92400e; background: #fde9c8; border-radius: var(--radius-full);
    padding: 4px 12px; text-transform: uppercase; letter-spacing: .4px;
}
.opb-queue.show { display: inline-block; }

.opb-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.opb-charge {
    border: 1.5px solid #fcd9a4; background: #fffbeb;
    border-radius: var(--radius-lg); padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.opb-charge-meta { font-size: 12.5px; color: var(--slate-600); line-height: 1.5; }
.opb-charge-meta b { display: block; color: var(--slate-800); font-size: 13.5px; font-weight: 600; }
.opb-amount { font-size: 26px; font-weight: 700; color: #b45309; white-space: nowrap; }

.opb-instruction { margin: 16px 0 0; font-size: 13.5px; color: var(--slate-600); line-height: 1.55; }
.opb-instruction b { color: var(--slate-800); font-weight: 600; }

/* Each step is its own flex column so its body scrolls while its actions stay
   pinned: without this the buttons fall below the fold on a tablet. */
#opbStepMain, #opbStepRefuse.show, #opbStepDone.show {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}

.opb-actions {
    padding: 14px 22px 20px; display: flex; flex-direction: column; gap: 10px;
    flex: 0 0 auto; border-top: 1px solid var(--slate-150); background: #fff;
}
.opb-actions .btn-primary, .opb-actions .btn-danger { width: 100%; }

/* Snooze: present but quiet. It buys 30 seconds, never a dismissal. */
.opb-snooze {
    background: none; border: none; font-family: inherit; font-size: 13px;
    color: var(--slate-500); cursor: pointer; padding: 7px;
    border-radius: var(--radius-md); align-self: center;
}
.opb-snooze:hover { background: var(--slate-100); color: var(--slate-700); }

/* Refusing is quieter and smaller than accepting, on purpose. */
.opb-refuse-link {
    background: none; border: none; font-family: inherit; font-size: 12.5px;
    color: var(--slate-400); text-decoration: underline; cursor: pointer;
    padding: 2px; align-self: center;
}
.opb-refuse-link:hover { color: var(--slate-600); }

.opb-refuse { display: none; }
.opb-refuse.show { display: block; }

.opb-recap {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    background: #fffbeb; border: 1.5px solid #fcd9a4;
    border-radius: var(--radius-md); padding: 10px 13px;
    font-size: 12.5px; color: var(--slate-600);
}
.opb-recap b { font-size: 17px; font-weight: 700; color: #b45309; }

.opb-reason-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.opb-reason {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    border: 1.5px solid var(--slate-200); border-radius: var(--radius-md);
    padding: 11px 13px; font-size: 13.5px; color: var(--slate-700);
    transition: border-color var(--transition-base), background var(--transition-base);
}
.opb-reason:hover { background: var(--slate-50); }
.opb-reason.selected { border-color: var(--color-primary); background: rgba(79, 70, 229, .06); }
.opb-reason input { margin-top: 3px; accent-color: var(--color-primary); }

.opb-textarea {
    width: 100%; margin-top: 12px; min-height: 84px; resize: vertical;
    font-family: inherit; font-size: 13.5px; color: var(--slate-700);
    border: 1.5px solid var(--slate-200); border-radius: var(--radius-md);
    padding: 10px 12px; outline: none;
}
.opb-textarea:focus { border-color: var(--color-primary); }
.opb-counter { font-size: 11.5px; color: var(--slate-400); margin-top: 5px; text-align: right; }
.opb-counter.ok { color: var(--color-success); }

.opb-warn {
    margin-top: 14px; font-size: 12.5px; color: #92400e;
    background: #fffbeb; border: 1px solid #fcd9a4;
    border-radius: var(--radius-md); padding: 10px 12px; line-height: 1.5;
}

.opb-done { display: none; text-align: center; padding: 8px 0 4px; }
.opb-done.show { display: block; }
.opb-done-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: var(--radius-full);
    background: rgba(16, 185, 129, .12); color: var(--color-success);
    display: flex; align-items: center; justify-content: center;
}
.opb-done p { font-size: 13.5px; color: var(--slate-600); margin: 0 0 6px; }

/* Countdown shown while snoozed. */
.opb-snoozed {
    position: fixed; right: 18px; bottom: 18px; z-index: 10201;
    background: #fffbeb; border: 1.5px solid #fcd9a4; border-radius: var(--radius-lg);
    padding: 11px 14px; box-shadow: var(--shadow-lg); display: none;
    font-size: 12.5px; color: var(--slate-700); min-width: 234px;
}
.opb-snoozed.show { display: block; }
.opb-snoozed b { color: #b45309; }
.opb-snoozed-bar {
    height: 4px; border-radius: var(--radius-full); background: #fde9c8;
    margin-top: 8px; overflow: hidden;
}
.opb-snoozed-fill { height: 100%; width: 100%; background: #b45309; }

/* Speech / live-training card */
.sg-speech-card { padding: 24px 24px 20px; text-align: left; }
.sg-speech-quote {
    background: linear-gradient(135deg, #fdf4ff, #f5f3ff);
    border-left: 4px solid var(--color-accent); border-radius: var(--radius-md);
    padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--slate-800);
    font-weight: 500; margin: 14px 0;
}
.sg-speech-tips { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.sg-speech-tip { display: flex; gap: 10px; font-size: 12.5px; color: var(--slate-600); line-height: 1.5; }
.sg-speech-tip svg { flex-shrink: 0; margin-top: 1px; }
.sg-speech-close {
    margin-top: 18px; width: 100%; border: none; font-family: inherit;
    background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 600;
    padding: 12px; border-radius: var(--radius-md); cursor: pointer;
}

/* ── Social-gift review page (admin) ── */
.sg-review-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-end; }
.sg-review-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--slate-500); }
.sg-review-filters select, .sg-review-filters input {
    padding: 8px 10px; border: 1px solid var(--slate-300); border-radius: var(--radius-md);
    font-family: inherit; font-size: 13px; background: #fff; color: var(--slate-700);
}
.sg-review-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.sg-review-card {
    background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
    overflow: hidden; cursor: pointer; transition: box-shadow 0.15s;
}
.sg-review-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.sg-review-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--slate-900); }
.sg-review-meta { padding: 8px 10px; font-size: 11.5px; color: var(--slate-500); line-height: 1.5; }
.sg-review-meta b { color: var(--slate-700); font-size: 12px; }
.sg-platform-pill {
    display: inline-block; padding: 1px 8px; border-radius: var(--radius-full);
    font-size: 10.5px; font-weight: 600; text-transform: capitalize;
}
.sg-platform-pill.instagram { background: #fce7f3; color: #be185d; }
.sg-platform-pill.tiktok    { background: var(--slate-100); color: var(--slate-700); }
.sg-platform-pill.facebook  { background: #dbeafe; color: #1d4ed8; }
.sg-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px; }
.sg-summary-table th, .sg-summary-table td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--slate-150); }
.sg-summary-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.sg-lightbox {
    position: fixed; inset: 0; background: rgba(15,23,42,0.85); z-index: 10001;
    display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.sg-lightbox.open { display: flex; }
.sg-lightbox img { max-width: 92%; max-height: 92%; border-radius: var(--radius-md); }

/* Photo-proof reminder line inside the nudge. Announcing the offer and
   photographing the proof are two different actions; this introduces the
   gift FAB at the moment the cashier is already being told to announce. */
.sg-nudge-proof {
    display: flex; align-items: center; gap: 9px;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px dashed #ddd6fe;
}
.sg-nudge-proof-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(95, 90, 246, 0.4);
}
.sg-nudge-proof-txt {
    font-size: 11px; line-height: 1.45; color: #6d28d9; min-width: 0;
}
.sg-nudge-proof-txt b { color: #5b21b6; font-weight: 600; }

/* Nudge choice row — "I told them" / "We're out of gifts" side by side.
   One of the two is REQUIRED to close an entry sale (Finish gate). */
.sg-nudge-choices { display: flex; gap: 6px; margin-top: 8px; }
.sg-nudge-choices .sg-nudge-check { margin-top: 0; flex: 1; }
.sg-nudge-check.sg-nudge-nogifts.checked {
    border-color: var(--color-warning); background: var(--color-warning-bg); color: #92400e;
}
.sg-nudge-check.sg-nudge-nogifts.checked .sg-check-box {
    background: var(--color-warning); border-color: var(--color-warning); color: #fff;
}
/* Pulse the nudge when it is the only thing blocking Save & Close */
.sg-nudge.sg-nudge-blocking {
    animation: sgNudgeBlockPulse 1.6s ease-in-out infinite;
}
@keyframes sgNudgeBlockPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
}

/* Nudge collapse — small chevron top-right; collapsed shows a one-line bar */
.sg-nudge { position: relative; }
.sg-nudge-collapse {
    position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
    border: none; background: none; color: var(--slate-400); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius); transition: color 0.15s;
}
.sg-nudge-collapse:hover { color: var(--slate-600); }
.sg-nudge-mini {
    display: none; width: 100%; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; color: #6d28d9;
    align-items: center; gap: 7px; padding: 2px 0; text-align: left;
}
.sg-nudge-mini svg:last-child { margin-left: auto; color: var(--slate-400); }
.sg-nudge.sg-collapsed { padding: 7px 11px; }
.sg-nudge.sg-collapsed .sg-nudge-top,
.sg-nudge.sg-collapsed .sg-nudge-choices,
.sg-nudge.sg-collapsed .sg-nudge-proof,
.sg-nudge.sg-collapsed .sg-nudge-collapse { display: none; }
.sg-nudge.sg-collapsed .sg-nudge-mini { display: flex; }

/* Save & Close while the social-announcement gate blocks it: looks disabled
   but stays clickable so the tap can auto-expand the collapsed nudge.
   (A real `disabled` attribute would suppress the click event entirely.) */
.cart-actions .btn-finish.sg-locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.cart-actions .btn-finish.sg-locked:hover { background: var(--cashier-confirm); }

/* Social-gift announce badge on cashier-counted — purple sibling of the
   email-ratio badge. Hover shows told / out-of-gifts / entry-sales. */
.cc-email-badge.cc-social-badge {
    background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe;
}
.cc-email-badge.cc-social-badge.cc-email-badge--empty {
    background: var(--slate-100); color: var(--slate-400); border-color: var(--slate-200);
}

/* Gift-drawer stock card on the cashier count wizard */
.csh-gift-card {
    margin-top: 14px; padding: 14px 16px;
    background: #fdf4ff; border: 1.5px solid #e9d5ff; border-radius: var(--radius-lg);
}
.csh-gift-card .csh-denom-heading { color: #6d28d9; }
.csh-gift-card .csh-denom-row { margin-top: 8px; }
.csh-gift-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--slate-400); }

/* Gift rows are prose + one input, NOT a denomination chip. Undo the fixed
   72px grey pill styling inherited from .csh-denom-label, which otherwise
   stretches into a wide right-aligned bar across the card. */
.csh-gift-card .csh-denom-label {
    width: auto; justify-content: flex-start; text-align: left;
    background: none; border: none; padding: 0; height: auto;
    font-size: 13px; font-weight: 500; color: var(--slate-600);
    min-width: 0;
}

/* The gift count is mandatory. The red state is applied only after a failed
   submit (class toggled in JS), never on a freshly loaded blank form. */
.csh-gift-card--missing { border-color: #fca5a5; }
.csh-gift-card--missing #giftStock { border-color: #fca5a5; }

/* ── Gift drawer reconciliation (closing count) ──
   Mid-shift refill declaration + the live "opened + refilled − photos"
   strip + the shortfall reason picker. Everything is width-constrained so
   it cannot push the count layout out of a tablet viewport. */
.sg-restock { margin-top: 11px; padding-top: 11px; border-top: 1px dashed #ddd6fe; }
.sg-restock-toggle {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; color: #6d28d9;
    text-align: left;
}
.sg-restock-plus {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-full);
    background: #ede9fe; color: #6d28d9;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.sg-restock-toggle.open .sg-restock-plus { transform: rotate(45deg); }
.sg-restock-body { display: none; margin-top: 10px; }
.sg-restock-body.open { display: block; }
.sg-restock-hint { margin: 7px 0 0; font-size: 11px; color: var(--slate-400); line-height: 1.45; }
.sg-restock-note {
    width: 100%; margin-top: 8px; padding: 8px 10px; box-sizing: border-box;
    border: 1.5px solid var(--slate-200); border-radius: var(--radius-md);
    font-family: inherit; font-size: 12.5px; color: var(--slate-700);
    background: #fff; resize: vertical; min-height: 34px;
}
.sg-restock-note:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); outline: none;
}

/* Live maths strip. Cells shrink rather than overflow on a narrow tablet. */
.sg-live {
    display: flex; align-items: stretch; gap: 7px;
    margin-top: 11px; padding: 10px;
    background: #fff; border: 1px solid #e9d5ff; border-radius: var(--radius-md);
}
.sg-live-cell { flex: 1 1 0; min-width: 0; text-align: center; }
.sg-live-num { font-size: 17px; font-weight: 700; color: var(--slate-900); line-height: 1.15; }
.sg-live-num--add { color: var(--color-success); }
.sg-live-lbl {
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--slate-400); font-weight: 600; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-live-op {
    display: flex; align-items: center; flex: 0 0 auto;
    color: var(--slate-300); font-size: 15px; font-weight: 600;
}

.sg-verdict {
    margin-top: 9px; padding: 9px 11px; border-radius: var(--radius-md);
    font-size: 11.5px; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start;
}
.sg-verdict-icon { flex-shrink: 0; display: flex; margin-top: 1px; }
.sg-verdict--ok { background: var(--color-success-bg); color: #047857; }
.sg-verdict--warn { background: var(--color-warning-bg); color: #92400e; }
.sg-verdict b { font-weight: 600; }

/* Shortfall block: the "this is the button" reminder + reason picker */
.sg-shortfall { margin-top: 11px; }
.sg-remind {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; background: #fdf4ff;
    border: 1.5px solid #e9d5ff; border-radius: var(--radius-md);
}
.sg-remind-fab {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-full);
    background: var(--color-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(95, 90, 246, 0.45);
    animation: sgFabBob 2.4s ease-in-out infinite;
}
.sg-remind-txt { font-size: 11.5px; line-height: 1.5; color: #6d28d9; min-width: 0; }
.sg-remind-txt b { color: #5b21b6; }
.sg-reason-lbl {
    font-size: 11px; font-weight: 600; color: var(--slate-600); margin: 11px 0 7px;
}
.sg-reason-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-reason-opt {
    padding: 6px 11px; border-radius: var(--radius-full);
    border: 1.5px solid var(--slate-200); background: #fff;
    font-family: inherit; font-size: 11.5px; font-weight: 500;
    color: var(--slate-600); cursor: pointer; transition: all 0.15s;
}
.sg-reason-opt:hover { border-color: var(--color-accent); color: var(--color-accent); }
.sg-reason-opt.selected {
    border-color: var(--color-accent); background: rgba(95, 90, 246, 0.08);
    color: var(--color-accent);
}

/* Gift-reconciliation badge on cashier-counted */
.cc-email-badge.cc-gift-badge--ok {
    background: #ecfdf5; color: #047857; border-color: #a7f3d0;
}

/* FAB counter chip — gifts handed out this shift */
.sg-fab-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 21px; height: 21px; padding: 0 5px;
    border-radius: var(--radius-full);
    background: #fff; color: var(--color-accent);
    border: 2px solid var(--color-accent);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Success screen — "your shift" ratio line */
.sg-shift-stats {
    margin-top: 10px; font-size: 12.5px; color: var(--slate-500); font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   Partner statements — per-table export (PDF / CSV / XLS)
   Each partner card exports only its own table.
   ══════════════════════════════════════════════════════════════ */
.ps-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ps-export-group .rep-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    font-size: 13px;
}
/* Narrow screens: let the header stack instead of squeezing the title. */
@media (max-width: 760px) {
    .ps-card-head { flex-wrap: wrap; align-items: flex-start !important; }
    .ps-card-actions { width: 100%; justify-content: flex-start; }
}

/* Month picker — white field with a visible border (the global select style
   is grey-on-grey, which disappears against the page background). */
.ps-month-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--slate-600, #475569);
}
select.ps-month-select {
    display: inline-block;
    width: auto;
    min-width: 130px;
    padding: 7px 32px 7px 12px;
    background-color: #fff;
    border: 1px solid var(--slate-300, #cbd5e1);
    border-radius: 8px;
    color: var(--slate-700, #334155);
    font-size: 14px;
}
select.ps-month-select:hover { background-color: var(--slate-50, #f8fafc); }
select.ps-month-select:focus { background-color: #fff; }
/* Month line shown only on the printed sheet (on screen it's in the picker). */
.ps-print-only { display: none; }

@media print {
    /* When exporting ONE card to PDF, everything else disappears: the other
       partner cards, the influencer block, the page header and the controls. */
    body.ps-printing .ps-partner-card:not(.ps-print-target),
    body.ps-printing .orders-table-card:not(.ps-partner-card),
    body.ps-printing .orders-page-header,
    body.ps-printing form,
    body.ps-printing .ps-card-actions,
    body.ps-printing .partner-settle-btn { display: none !important; }

    body.ps-printing .ps-print-only { display: inline; }

    body.ps-printing .ps-print-target {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.ps-printing .ps-print-target h2 { font-size: 16px; }
    body.ps-printing .ps-print-target .orders-table { font-size: 10px; }
    body.ps-printing .ps-print-target .orders-table th,
    body.ps-printing .ps-print-target .orders-table td {
        padding: 4px 6px;
        white-space: nowrap;
    }
    /* Notes are free text and may wrap. */
    body.ps-printing .ps-print-target .orders-table td:nth-child(3) { white-space: normal; }
}

/* ── Build-update prompt ──
   Shown when a new deploy is detected while a page is open (see initBuildWatch
   in admin.js). Bottom-centre so it never covers the sidebar or the till's
   right-hand payment column, and above everything else because a stale build
   is exactly what makes a "deployed" fix look broken. */
.build-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(16px);
    z-index: 12000;
    display: none;
    align-items: center;
    gap: 14px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.build-toast.active { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.build-toast__icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    color: var(--color-primary);
}
.build-toast__body  { flex: 1 1 auto; min-width: 0; }
.build-toast__title { font-size: 14px; font-weight: 700; color: var(--slate-800); }
.build-toast__msg   { font-size: 13px; color: var(--slate-600); margin-top: 2px; }
.build-toast__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.build-toast__later, .build-toast__now {
    padding: 9px 16px; border-radius: var(--radius-md, 8px);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
/* "Not now" stays big enough to hit reliably on a busy touchscreen: a cashier
   mid-payment must be able to dismiss this instantly. */
.build-toast__later { border: 1px solid var(--slate-300); background: #fff; color: var(--slate-700); }
.build-toast__later:hover { background: var(--slate-50); }
.build-toast__now   { border: none; background: var(--color-primary); color: #fff; }
.build-toast__now:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
    /* Stretch edge-to-edge instead of shrink-wrapping the text: a shrink-wrapped
       box wraps the message into a narrow column and the two buttons stack, which
       is exactly the cramped layout a cashier is most likely to mis-tap. */
    .build-toast {
        flex-wrap: wrap;
        gap: 10px;
        bottom: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-width: none;
    }
    .build-toast.active { transform: none; }
    .build-toast__body    { flex: 1 1 100%; }
    .build-toast__actions { width: 100%; justify-content: flex-end; }
    .build-toast__later, .build-toast__now { flex: 1 1 0; text-align: center; padding: 12px 16px; }
}