/**
 * 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-y: auto;
    overflow-x: 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%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 13px 8px;
    transition: padding 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.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 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 {
    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-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);
}

/* ── 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%;
    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;
}

/* 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;
}

.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);
}

/* 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;
    overflow-y: auto;
    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;
}

.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;
}

/* 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: 4px 10px;
    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-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);
}

.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;
}

@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:   #d1fae5;
    --cc-tag-green-text: #047857;
    --cc-tag-amber-bg:   #fef3c7;
    --cc-tag-amber-text: #92400e;
    --cc-tag-red-bg:     #ffe4e6;
    --cc-tag-red-text:   #be123c;
}

/* ── 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: var(--cc-tag-green-text);
}

.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: var(--cc-tag-green-bg); color: var(--cc-tag-green-text); }
.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); }

/* ── 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;
}

/* ── 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;
    z-index: 9999;
    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);
}

.cc-denom-tooltip {
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transform-origin: bottom center;
    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;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cc-denom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--slate-800);
}

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

.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;
}


/* ── ForceCashier overlay ── */
.force-cashier-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(162, 162, 162, 0.9);
    z-index: 999999;
    display: none;
}

.force-cashier-overlay.visible { display: block; }

.force-cashier-box {
    width: 40%;
    position: relative;
    top: 45px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    background: #fff;
    line-height: 23px;
}

@media (max-width: 767.98px) {
    .force-cashier-box { width: 90%; }
}


/* ───────────────────────────────────────────────────────────
   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);
}

/* ── 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(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .income-cards { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) {
    .income-cards { grid-template-columns: repeat(5, 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; }


/* ── 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;
}

.pill--amber {
    background: #fef3c7;
    color: #92400e;
}

/* ── 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; }

/* ── 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;
}

/* ── 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; }

/* "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;
}


/* ══════════════════════════════════════════════════════════════
   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);
}

/* ── 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-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: center; }
.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: center; }
.bookings-tbl .bk-col-visitor-detail { min-width: 160px; text-align: center; }
.bookings-tbl .bk-col-amount   { width: 68px; text-align: center; }
.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; }

/* ── Table body ── */

.bookings-tbl tbody tr {
    transition: background-color 0.15s ease;
}

.bookings-tbl tbody tr:not(:last-child):not(.bk-separator-row) td {
    border-bottom: 1px solid var(--slate-100);
}

.bookings-tbl tbody tr:hover:not(.bk-separator-row) {
    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: center !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: center !important;
}

.bk-cell-visitor-detail {
    text-align: center !important;
}

.bk-cell-amount {
    text-align: center !important;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
}

.bk-cell-name {
    text-align: left !important;
    font-weight: 500;
    color: var(--slate-800) !important;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px !important;
}

.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);
}

/* ── Batch separator ── */

.bk-separator-row td {
    background: linear-gradient(90deg, var(--color-primary) 0%, #7c3aed 50%, var(--color-primary) 100%) !important;
    height: 3px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 3px !important;
}

/* ── 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-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-wrapper .tooltip-text {
    visibility: hidden;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    pointer-events: none;
    margin-bottom: 4px;
}

.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; }


/* ══════════════════════════════════════════════════════════════
   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);
}

.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 td {
    background: #e3eef6;
    opacity: 0.4;
}

.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;
}


/* ══════════════════════════════════════════════════════════════
   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;
}


/* ══════════════════════════════════════════════════════════════
   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);
}

/* 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;
}

/* ── History table (17-column Vue format) ── */

.inv-history-tbl {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    background: white;
    font-size: 13px;
    font-family: Arial, sans-serif;
}

.inv-history-tbl thead {
    background-color: #f3f3f3;
    position: sticky;
    top: 0;
    z-index: 10;
}

.inv-history-tbl 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;
    white-space: nowrap;
}

.inv-history-tbl td {
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    font-size: 13px;
    background: white;
    height: 22px;
    line-height: 14px;
    text-overflow: ellipsis;
    position: relative;
}

.inv-history-tbl tbody tr:hover td {
    background-color: #f5f5f5;
}

.inv-hist-type {
    font-variant-numeric: tabular-nums;
}

.inv-hist-mono {
    font-family: 'RobotoMono', 'SF Mono', 'Menlo', monospace;
    font-variant-numeric: tabular-nums;
}

.inv-hist-gray {
    background-color: #f6f6f6 !important;
    font-size: 10px !important;
}

.inv-hist-gray-h {
    background-color: #e7e7e7 !important;
    font-size: 10px !important;
}

.inv-hist-event {
    font-size: 12px;
    color: var(--slate-600);
}

/* History notes with tooltip */
.inv-hist-notes {
    display: inline-block;
    position: relative;
    cursor: pointer;
    color: #6b6b6b;
}

.inv-hist-notes:hover {
    color: #007bff;
}

.inv-hist-notes svg {
    vertical-align: middle;
}

.inv-hist-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    background: #333;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    width: 280px;
    max-width: 90vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.inv-hist-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.inv-hist-notes:hover .inv-hist-tooltip {
    visibility: visible;
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   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-prepaid-missing { background: #fca5a5; color: #7f1d1d; } /* soft red */
.match-badge-booking         { background: #d6f9d6; color: #1a5c2a; } /* soft mint */
.match-badge-booking-missing { background: #fca5a5; color: #7f1d1d; } /* soft red */
.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;
}


/* ══════════════════════════════════════════════════════════════
   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;
}


/* ══════════════════════════════════════════════════════════════
   SCROLLABLE TABLE CONTAINER
   ══════════════════════════════════════════════════════════════ */

.table-scroll-container {
    max-height: 88vh;
    overflow: auto;
    position: relative;
}

@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;
}

.pos-modal {
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

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

.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;
}

.pos-modal-footer {
    padding: 12px 20px 20px;
}

.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-id       { width: 60px; min-width: 60px; 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-id,
.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; }

/* Cell styling */
.pay-cell-id {
    text-align: left !important;
    font-weight: 500;
    color: var(--slate-500) !important;
    padding-left: 16px !important;
    font-variant-numeric: tabular-nums;
}

.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;
    z-index: 9999;
    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;
}
.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;
}

/* 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);
}

/* 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;
}

.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(4, 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;
}

/* 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;
}

/* ── 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;
}

.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);
}