/* ── Theme CSS custom properties (defaults = Classic Baize) ── */
/* Base 4 colors set by theme presets; derived colors auto-calculated by JS */
:root {
    /* Base theme colors (set by presets) */
    --theme-accent: #22c55e;
    --theme-accent-rgb: 34, 197, 94;
    --theme-nav: #0F7A3F;
    --theme-nav-rgb: 15, 122, 63;
    --theme-body: #153520;
    --theme-body-rgb: 21, 53, 32;
    --theme-card: #2A5C3E;
    --theme-card-rgb: 42, 92, 62;

    /* Derived: Text colors */
    --theme-text-primary: #f0f0f0;
    --theme-text-secondary: #d0d0d0;
    --theme-text-muted: #9ca3af;
    --theme-text-heading: #22c55e;
    --theme-text-bright: #e2e8f0;

    /* Derived: Surface colors */
    --theme-input-bg: #0F2A18;
    --theme-surface-hover: #326A48;
    --theme-modal-bg: #13301E;
    --theme-modal-bg-rgb: 19, 48, 30;
    --theme-overlay-dark: #0A1E10;
    --theme-overlay-subtle: #0E2816;

    /* Overlay dimming �?used by confirmation modal backdrops (see-through dim) */
    --theme-overlay-dim: rgba(0, 0, 0, 0.55);

    /* Derived: Border colors */
    --theme-border: #48784E;
    --theme-border-subtle: #386848;

    /* Derived: Accent variants */
    --theme-accent-light: #86efac;
    --theme-accent-soft: #4ade80;
    --theme-accent-hover: #16a34a;
    --theme-accent-active: #15803d;
    --theme-accent-contrast: #ffffff;
    /* Text-on-accent chosen for CONTRAST, never force-overridden per preset. See the note
       beside --theme-accent-contrast-strict in theme/js/theme-colors.js. */
    --theme-accent-contrast-strict: #0b2413;

    /* Derived: Semantic status colors (vivid for operators) */
    --theme-success: #22c55e;
    --theme-success-rgb: 34, 197, 94;
    --theme-success-hover: #16a34a;
    --theme-success-soft: #4ade80;
    --theme-success-contrast: #0b2413;

    --theme-danger: #dc2626;
    --theme-danger-rgb: 220, 38, 38;
    --theme-danger-hover: #b91c1c;
    --theme-danger-soft: #f87171;
    --theme-danger-muted: #ef4444;
    --theme-danger-bg: #2f1a1a;

    --theme-warning: #f59e0b;
    --theme-warning-rgb: 245, 158, 11;
    --theme-warning-hover: #d97706;
    --theme-warning-soft: #fbbf24;
    --theme-warning-bg: #2a1f0e;

    --theme-info: #3b82f6;
    --theme-info-rgb: 59, 130, 246;
    --theme-info-hover: #2563eb;
    --theme-info-soft: #60a5fa;
    --theme-info-bg: #1e2a3a;

    --theme-cyan: #06b6d4;
    --theme-cyan-rgb: 6, 182, 212;
    --theme-cyan-hover: #0891b2;

    --theme-purple: #8b5cf6;
    --theme-purple-rgb: 139, 92, 246;
    --theme-purple-hover: #7c3aed;
    --theme-purple-soft: #a78bfa;
    --theme-purple-bg: #1e1a2e;

    --theme-orange: #f97316;
    --theme-orange-rgb: 249, 115, 22;
    --theme-orange-hover: #ea580c;

    --theme-pink: #ec4899;
    --theme-pink-rgb: 236, 72, 153;

    --theme-muted-bg: #366A48;
    --theme-muted-text: #48784E;
    --theme-muted-text-rgb: 72, 120, 78;
    --theme-disabled-border: #2E6040;

    /* Derived: FAB button colors (adapts to theme tone) */
    --theme-fab-notification: #ec4899;
    --theme-fab-chat: #25D366;
    --theme-fab-bookings: #63f50b;
    --theme-fab-bookings-hover: #4fdc05;
    --theme-fab-sound: #ff0000;
    --theme-fab-highlight: #ff2b85;
    --theme-fab-tournaments: #f5b50b;
    --theme-fab-tournaments-hover: #d99e05;
    --theme-fab-tournaments-contrast: #1a1204;

    /* Derived: Glass/overlay tints (adapt to body luminance) */
    --theme-glass-border: rgba(255, 255, 255, 0.08);
    --theme-glass-shine: rgba(255, 255, 255, 0.04);
    --theme-glass-divider: rgba(255, 255, 255, 0.06);
    --theme-glass-soft: rgba(255, 255, 255, 0.03);
    --theme-glass-hover: rgba(255, 255, 255, 0.05);
    --theme-glass-medium: rgba(255, 255, 255, 0.10);

    /* Derived: Login/auth surface */
    --theme-login-input-focus-bg: rgba(15, 15, 15, 0.95);
    --theme-login-card-bg: rgba(26, 26, 26, 0.95);
    --theme-login-overlay: rgba(0, 0, 0, 0.5);

    /* Derived: Messenger tints */
    --theme-messenger-hover: rgba(26, 61, 43, 0.35);
    --theme-messenger-active: rgba(26, 61, 43, 0.6);

    /* Derived: cd-toggle / filter-select open state */
    --theme-select-open-bg: rgba(34, 80, 48, 0.7);
    --theme-select-open-bg2: rgba(24, 50, 32, 0.9);

    /* Derived: Data table surfaces */
    --theme-table-header: #0f2a3d;
    --theme-table-row-odd: #162a2a;
    --theme-table-row-even: #122323;
    --theme-table-row-hover: #1c3836;

    /* ── Text-on-fill contrast pairs (WCAG AA 4.5:1) ──────────────────────────
       Pre-JS fallbacks ONLY. theme/js/theme-colors.js recomputes every one of
       these per preset on load; these values keep the first paint compliant and
       keep the buttons from losing their fill if that script fails to run.

       *-fill / *-fill-hover exist so a themed colour can be darkened WHERE IT
       SITS BEHIND TEXT without disturbing the same token's decorative uses. In
       particular --theme-accent stays #22c55e for the nav bottom border, focus
       rings, .nav-tab-indicator, chart series and the scrollbar thumb, while
       --theme-accent-fill (#17853f) carries the filled buttons and the active
       nav pill, where white-on-#22c55e was 2.28:1. */
    --theme-accent-fill: #17853f;
    --theme-accent-fill-hover: #136d34;
    --theme-nav-link: #e6ebf2;
    --theme-info-contrast: #111111;
    --theme-info-fill-hover: #5e99f8;
    --theme-danger-contrast: #ffffff;
    --theme-danger-fill-hover: #b41f1f;
    --theme-cyan-contrast: #111111;
    --theme-cyan-hover-contrast: #111111;
    --theme-cyan-fill-hover: #33c3dc;
    --theme-purple-contrast: #111111;
    --theme-purple-fill-hover: #a079f8;
    --theme-orange-contrast: #111111;
    --theme-orange-fill-hover: #fa8c40;
    --theme-pink-contrast: #111111;
    --theme-pink-fill-hover: #ef69ab;
    --theme-border-contrast: #ffffff;
    --theme-border-subtle-contrast: #ffffff;
    --theme-border-fill-hover: #2e553b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--theme-body);
    color: var(--theme-text-primary);
    min-height: 100vh;
    line-height: 1.5;
    padding-top: 60px;
    scrollbar-gutter: stable; /* Prevents layout shift when modal opens/closes */
}

.nav {
    background: var(--theme-nav);
    border-bottom: 2px solid var(--theme-accent);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.nav-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    height: 60px;
}

/* Logo pinned to the far left, absolutely positioned so it does NOT
   participate in the flex flow: the centered .nav-links stay exactly
   where they are regardless of the logo. */
.nav-logo {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 2;
}
.nav-logo img {
    width: 36px;
    height: 36px;
    display: block;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
    /* Pin the tab group to the true viewport center, independent of the
       logo. The logo stays absolutely positioned on the left and does not
       shift the tabs. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    max-width: calc(100% - 8rem);
}
.nav-links::-webkit-scrollbar { height: 4px; }
.nav-links::-webkit-scrollbar-thumb { background: rgba(34,197,94,0.35); border-radius: 2px; }

/* Sliding pill indicator behind active tab */
.nav-tab-indicator {
    position: absolute;
    background: var(--theme-accent, var(--theme-accent));
    border-radius: 6px;
    transition: left 300ms cubic-bezier(0.25, 0.1, 0.25, 1.0),
                width 300ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
    z-index: 0;
    pointer-events: none;
}

.nav-links a {
    padding: 0.5rem 0.75rem;
    color: var(--theme-nav-link);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    /* font-weight is NOT animatable — Chrome silently ignores it, Safari renders
       the weight change with more pronounced sub-pixel jitter. Removed from
       transition list; keep only animatable properties (color, border-color). */
    transition: color 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
    /* Force consistent text-smoothing across Chrome (default subpixel) and
       Safari (default grayscale-leaning). Without this, Safari's nav text
       looks noticeably heavier on hover. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Stabilize the hover-bold width using font-variation-settings if Inter
       variable is loaded (modern Safari/Chrome). For non-variable fonts this
       declaration is harmless. */
    font-variation-settings: "wght" 500;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links a:hover {
    background: transparent;
    color: var(--theme-nav-link);
    border-color: var(--theme-accent, var(--theme-accent));
    border-radius: 8px;
    /* Fake-bold via text-shadow stroke — adds visual weight without changing
       layout width. Real font-weight:600 caused text-width growth → reflow →
       cross-browser (Safari/Chrome) rendering divergence. text-shadow is
       glyph-rendered identically by all browsers. */
    text-shadow:
        0 0 0.7px currentColor,
        0 0 0.7px currentColor;   /* doubled for slightly more pronounced bold */
}

.nav-links a.active {
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    border-color: var(--theme-accent, var(--theme-accent));
    border-radius: 8px;
    /* Slightly stronger fake-bold on active — more distinctive than hover but
       still zero layout impact. Combined with the filled accent bg, the active
       tab reads clearly without weight-induced jitter. */
    text-shadow:
        0 0 0.9px currentColor,
        0 0 0.9px currentColor;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
	margin-left: auto;
}

.logout-btn {
    background: var(--theme-danger);
    color: var(--theme-danger-contrast);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.logout-btn:hover {
    background: var(--theme-danger-hover);
}

.filters {
    border-bottom: 0px solid var(--theme-accent);
    padding: 0.75rem 0;
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--theme-body);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filters-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-select {
    background: var(--theme-card);
    border: 1px solid var(--theme-glass-border);
    color: var(--theme-text-bright);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    min-width: 0;
    flex: 0 1 auto;
    max-width: none;
    transition: all 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca3af' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 8px 5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 var(--theme-glass-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tooltip for filter-select */
.filter-tooltip {
    position: fixed;
    background: var(--theme-card);
    color: var(--theme-accent);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.filter-tooltip.visible {
    opacity: 1;
}

.filter-select:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    background: linear-gradient(135deg, var(--theme-select-open-bg), var(--theme-select-open-bg2));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 8px rgba(var(--theme-accent-rgb), 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2322c55e' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 8px 5px;
}

.filter-select:focus {
    outline: none;
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--theme-accent-rgb), 0.15), 0 0 12px rgba(var(--theme-accent-rgb), 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2322c55e' d='M5 0l5 6H0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 8px 5px;
}

/* ── Custom Dropdown Component ── */
.cd-dropdown {
    position: relative;
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    /* 2026-04-23: removed max-width cap so full label text is always visible.
       Toggle now grows to fit content: no ellipsis clipping on client / organization / center filters. */
    max-width: none;
}

/* Hide native select when custom dropdown is active */
.cd-dropdown .filter-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cd-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: var(--theme-card);
    border: 1px solid var(--theme-glass-border);
    color: var(--theme-text-bright);
    padding: 0.5rem 0.65rem 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 var(--theme-glass-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    overflow: visible;
}

.cd-label {
    overflow: visible;
    white-space: nowrap;
}

.cd-toggle:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    background: linear-gradient(135deg, var(--theme-select-open-bg), var(--theme-select-open-bg2));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 8px rgba(var(--theme-accent-rgb), 0.08);
}

.cd-open .cd-toggle {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--theme-accent-rgb), 0.15), 0 0 12px rgba(var(--theme-accent-rgb), 0.1);
}

.cd-arrow {
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    color: var(--theme-text-muted);
    transition: transform 0.25s ease, color 0.25s ease;
}

.cd-toggle:hover .cd-arrow { color: var(--theme-accent); }
.cd-open .cd-arrow { transform: rotate(180deg); color: var(--theme-accent); }

.cd-disabled .cd-toggle {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Panel �?lives on document.body, positioned via JS */
.cd-panel {
    position: fixed;
    min-width: 200px;
    /* 2026-04-20: widened so dropdown options are not clipped. Respects viewport on
       narrow screens via min(). JS sets min-width = toggle rect.width so the panel
       is always at least as wide as the toggle, and can grow up to this cap. */
    max-width: min(520px, 92vw);
    background: var(--theme-overlay-subtle);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.12);
    border-radius: 10px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 var(--theme-glass-shine);
    z-index: 1001; /* base z-index, also set dynamically by JS */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.cd-panel.cd-panel-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 10001 !important;
}

/* Search */
.cd-search-wrap {
    position: relative;
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--theme-glass-divider);
}

.cd-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-border-subtle);
    pointer-events: none;
    margin-top: -2px;
}

.cd-search {
    width: 100%;
    background: var(--theme-glass-hover);
    border: 1px solid var(--theme-glass-border);
    border-radius: 6px;
    color: var(--theme-text-bright);
    padding: 8px 10px 8px 32px;
    font-size: 0.8rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.cd-search:focus {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    background: var(--theme-glass-medium);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.08);
}

.cd-search::placeholder {
    color: var(--theme-border-subtle);
}

/* List */
.cd-list {
    max-height: none;
    overflow-y: auto;
    padding: 4px;
    scroll-behavior: smooth;
}

/* Styled scrollbar */
.cd-list::-webkit-scrollbar {
    width: 4px;
}

.cd-list::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.cd-list::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-radius: 10px;
}

.cd-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--theme-accent-rgb), 0.3);
}

/* Items */
.cd-item {
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--theme-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
    /* 2026-04-20: allow long option labels to wrap to a new line instead of being
       ellipsis-clipped. Combined with the wider .cd-panel max-width, this guarantees
       every option is fully readable. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    margin: 1px 0;
}

.cd-item:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-text-bright);
}

.cd-item.cd-selected {
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-accent);
    font-weight: 500;
    position: relative;
}

.cd-item.cd-selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--theme-accent);
    border-radius: 2px;
}

.cd-item.cd-selected:hover {
    background: rgba(var(--theme-accent-rgb), 0.2);
}

.cd-item-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cd-empty {
    padding: 20px 12px;
    font-size: 0.8rem;
    color: var(--theme-border-subtle);
    text-align: center;
}

.cd-empty {
    padding: 16px 12px;
    font-size: 0.8rem;
    color: var(--theme-border);
    text-align: center;
}

/* Status filter checkbox labels */
.cd-status-label:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    color: var(--theme-text-bright) !important;
}

/* Date filter with calendar button - unified control */
.date-filter-wrapper {
    display: inline-flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--theme-glass-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 var(--theme-glass-soft);
    transition: border-color 0.25s ease;
}

.date-filter-wrapper:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
}

.date-filter-wrapper:focus-within {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--theme-accent-rgb), 0.15);
}

.date-filter-wrapper .date-filter-select {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--theme-card);
}

.date-filter-wrapper .date-filter-select:hover,
.date-filter-wrapper .date-filter-select:focus {
    border: none;
    box-shadow: none;
}

.date-filter-select.has-calendar {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.date-picker-btn {
    background: var(--theme-accent-fill);
    border: none;
    border-left: 1px solid rgba(255,255,255,0.15);
    color: var(--theme-accent-contrast);
    padding: 0 0.7rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.date-picker-btn:hover {
    background: var(--theme-accent-fill-hover);
}

.date-picker-btn:active {
    background: var(--theme-accent-active);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem;
    /* margin-top: 1rem; */
}

/* Breathing room below every top-nav page's data-table card so the
   table doesn't sit flush against the page bottom edge. Matches the
   inline padding-bottom on revenues-page.php's container. */
.page-content > .container { padding-bottom: 1.5rem; }

.card {
    background: var(--theme-card);
    border: 0px solid var(--theme-accent);
    border-radius: 8px;
    padding: 1.5rem;
    padding-top: 12px;
    /* margin: 1rem 0; */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 0px solid var(--theme-accent);
    padding-top: 0.5rem;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-text-heading);
}

/* Global button reset �?body inherits line-height:1.5 which makes button text appear
   above center even with flexbox alignment. Reset all buttons to line-height:1 so
   the line box equals the font size and glyphs sit at the true visual center. */
button {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-success {
    background: var(--theme-accent-fill);
    /* Back on --theme-accent-contrast. The earlier hardcoded #fff was chosen to
       match the white-on-red Close button, but white on the Classic Baize accent
       (#22c55e) is 2.28:1 — under AA for normal text (4.5:1) and under even the
       large-text bar (3:1). The white label is kept on Classic Baize and paid for
       on the FILL instead: the background is --theme-accent-fill (#17853f, 4.71:1),
       while --theme-accent keeps #22c55e for borders, rings and chart series. */
    color: var(--theme-accent-contrast);
}

.btn-success:hover {
    background: var(--theme-accent-fill-hover);
}

.btn-primary {
    background: var(--theme-info);
    color: var(--theme-info-contrast);
}

.btn-primary:hover {
    background: var(--theme-info-fill-hover);
}

.btn-secondary {
    background: var(--theme-border);
    color: var(--theme-border-contrast);
}

.btn-secondary:hover {
    background: var(--theme-border-fill-hover);
}

.btn-danger {
    background: var(--theme-danger);
    color: var(--theme-danger-contrast);
}

.btn-danger:hover {
    background: var(--theme-danger-fill-hover);
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}


.btn-warning {
    background: var(--theme-warning);
    color: var(--theme-warning-contrast);
}

.btn-warning:hover {
    background: var(--theme-warning-hover);
}

.btn-info {
    background: var(--theme-cyan);
    color: var(--theme-cyan-contrast);
}

.btn-info:hover {
    background: var(--theme-cyan-fill-hover);
}

/* Additional semantic button variants */
.btn-purple {
    background: var(--theme-purple);
    color: var(--theme-purple-contrast);
}

.btn-purple:hover {
    background: var(--theme-purple-fill-hover);
}

.btn-orange {
    background: var(--theme-orange);
    color: var(--theme-orange-contrast);
}

.btn-orange:hover {
    background: var(--theme-orange-fill-hover);
}

.btn-pink {
    background: var(--theme-pink);
    color: var(--theme-pink-contrast);
}

.btn-pink:hover {
    opacity: 0.85;
}

/* Outline variants (transparent bg, colored border+text) */
.btn-outline-success {
    background: transparent;
    border: 1px solid var(--theme-accent);
    color: var(--theme-accent);
}

.btn-outline-success:hover {
    background: rgba(var(--theme-accent-rgb), 0.12);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--theme-danger);
    color: var(--theme-danger);
}

.btn-outline-danger:hover {
    background: rgba(var(--theme-danger-rgb), 0.12);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--theme-info);
    color: var(--theme-info);
}

.btn-outline-primary:hover {
    background: rgba(var(--theme-info-rgb), 0.12);
}

.btn-outline-warning {
    background: transparent;
    border: 1px solid var(--theme-warning);
    color: var(--theme-warning);
}

.btn-outline-warning:hover {
    background: rgba(var(--theme-warning-rgb), 0.12);
}

/* Ghost button (minimal, text-only feel) */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

.btn-ghost:hover {
    background: var(--theme-surface-hover);
    border-color: var(--theme-border);
}

/* Muted button */
.btn-muted {
    background: var(--theme-muted-bg);
    color: var(--theme-text-muted);
    cursor: default;
    opacity: 0.7;
}

/* Modal header X close button */
.btn-close-x {
    margin-left: auto;
    background: var(--theme-danger);
    border: 1px solid var(--theme-danger);
    color: var(--theme-danger-contrast);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
}

.btn-close-x:hover {
    background: var(--theme-danger-fill-hover);
    border-color: var(--theme-danger-hover);
}

/* Disabled state for all buttons */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.search-bar {
    margin-bottom: 1rem;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--theme-card);
    border: 1px solid var(--theme-accent);
    border-radius: 4px;
    color: var(--theme-text-primary);
    font-size: 0.85rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--theme-accent-hover);
}

.data-table {
    width: 100%;
    table-layout: auto;
    background: transparent;
    border: none;
    border-collapse: collapse;
}

.data-table thead tr {
    background: var(--theme-table-header);
}

/* Uniform padding on every th + td so header text and data content share the
   same left edge (no asymmetric td:last-child override �?that was causing the
   Actions header to visually drift from its icons). */
.data-table th,
.data-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--theme-glass-shine);
    font-size: 0.8rem;
}
.data-table tbody td {
    vertical-align: top;
}

.data-table .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 60px;
}

.data-table .btn:last-child {
    margin-right: 0;
}

/* Vertical action button container (legacy) */
.actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.actions-vertical .btn {
    width: 100%;
    min-width: 70px;
    max-width: 90px;
    margin: 0;
}

/* Inline icon action buttons */
.actions-inline {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
}

/* Flat icon buttons �?no box/border/background; pure icon with hover color only.
   No width/height/padding so the icon's own glyph width is the button width,
   letting the first icon align exactly with the column header's text left edge. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--theme-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.btn-icon:hover { color: var(--theme-text-bright); }
.btn-icon-view:hover { color: var(--theme-info); }
.btn-icon-edit:hover { color: var(--theme-accent); }
.btn-icon-delete:hover { color: var(--theme-danger); }

/* Kebab actions dropdown for tables with >3 actions */
.actions-kebab {
    position: relative;
    display: inline-block;
}

.actions-kebab-toggle {
    background: transparent;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 2px;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.actions-kebab-toggle:hover {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.08);
}

.actions-kebab.active .actions-kebab-toggle {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.actions-kebab-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 100;
    overflow: hidden;
}

.actions-kebab.active .actions-kebab-menu {
    display: block;
}

.actions-kebab-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    text-align: left;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.actions-kebab-menu button:hover {
    background: rgba(var(--theme-accent-rgb), 0.12);
    color: var(--theme-text-primary);
}

.actions-kebab-menu button.action-danger:hover {
    background: rgba(var(--theme-danger-rgb), 0.15);
    color: var(--theme-danger-muted);
}

.actions-kebab-menu button.action-warning {
    color: var(--theme-warning);
}

.actions-kebab-menu button.action-warning:hover {
    background: rgba(var(--theme-warning-rgb), 0.15);
    color: var(--theme-warning);
}

.actions-kebab-menu .kebab-divider {
    height: 1px;
    background: var(--theme-glass-divider);
    margin: 2px 0;
}

.data-table th {
    background: var(--theme-table-header);
    font-weight: 600;
    color: var(--theme-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* padding inherited from .data-table th,td rule above (0.6rem 0.75rem) �?
       must NOT override horizontal padding here, or th and td would misalign. */
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.data-table td {
    color: var(--theme-text-secondary);
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
}

.data-table tbody tr:nth-child(odd) { background: var(--theme-table-row-odd); }
.data-table tbody tr:nth-child(even) { background: var(--theme-table-row-even); }
.data-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
.data-table tbody tr:hover { background: var(--theme-table-row-hover) !important; }

/* Table column widths - Admins (7 columns; Mobile merged into Name) */
#adminsTable th:nth-child(1), #adminsTable td:nth-child(1) { width: 11%; }   /* Created */
#adminsTable th:nth-child(2), #adminsTable td:nth-child(2) { width: 20%; }   /* Name (+mobile sub) */
#adminsTable th:nth-child(3), #adminsTable td:nth-child(3) { width: 25%; }   /* Email */
#adminsTable th:nth-child(4), #adminsTable td:nth-child(4) { width: 11%; }   /* Role */
#adminsTable th:nth-child(5), #adminsTable td:nth-child(5) { width: 15%; }   /* Last Login */
#adminsTable th:nth-child(6), #adminsTable td:nth-child(6) { width: 8%; }    /* Status */
#adminsTable th:nth-child(7), #adminsTable td:nth-child(7) { width: 10%; }   /* Actions - slim */

/* Table column widths - Clients (8 columns) */
/* Clients (6 cols; Mobile under Name; Last Login under Email) */
#clientsTable th:nth-child(1), #clientsTable td:nth-child(1) { width: 10%; }  /* Created */
#clientsTable th:nth-child(2), #clientsTable td:nth-child(2) { width: 18%; }  /* Client Name (+mobile) */
#clientsTable th:nth-child(3), #clientsTable td:nth-child(3) { width: 20%; }  /* Email (+last login) */
#clientsTable th:nth-child(4), #clientsTable td:nth-child(4) { width: 30%; }  /* Subscription Valid Until */
#clientsTable th:nth-child(5), #clientsTable td:nth-child(5) { width: 10%; }  /* Status */
#clientsTable th:nth-child(6), #clientsTable td:nth-child(6) { width: 12%; }  /* Actions */

/* Clients table - allow text wrap for non-badge columns */
#clientsTable td:nth-child(1),
#clientsTable td:nth-child(2),
#clientsTable td:nth-child(3),
#clientsTable td:nth-child(4),
#clientsTable td:nth-child(5) {
    white-space: normal;
    word-wrap: break-word;
}

/* Clients table - expiry column full display */
#clientsTable td:nth-child(7) {
    white-space: normal;
}

/* Clients table - badges stay on one line */
#clientsTable .status-badge,
#clientsTable .expiry-cell .badge,
#clientsTable .expiry-cell span[class*="badge"] {
    white-space: nowrap;
    display: inline-block;
}

/* Organizations (8 cols; Mobile merged into Name) */
#organizationsTable th:nth-child(1), #organizationsTable td:nth-child(1) { width: 10%; }  /* Created */
#organizationsTable th:nth-child(2), #organizationsTable td:nth-child(2) { width: 13%; }  /* Client */
#organizationsTable th:nth-child(3), #organizationsTable td:nth-child(3) { width: 17%; }  /* Name (+mobile) */
#organizationsTable th:nth-child(4), #organizationsTable td:nth-child(4) { width: 20%; }  /* Email */
#organizationsTable th:nth-child(5), #organizationsTable td:nth-child(5) { width: 9%; }   /* Centers */
#organizationsTable th:nth-child(6), #organizationsTable td:nth-child(6) { width: 9%; }   /* Employees */
#organizationsTable th:nth-child(7), #organizationsTable td:nth-child(7) { width: 9%; }   /* Status */
#organizationsTable th:nth-child(8), #organizationsTable td:nth-child(8) { width: 13%; }  /* Actions */

/* Centers (8 cols) */
#centersTable th:nth-child(1), #centersTable td:nth-child(1) { width: 9%; }   /* Created */
#centersTable th:nth-child(2), #centersTable td:nth-child(2) { width: 7%; }   /* Logo */
#centersTable th:nth-child(3), #centersTable td:nth-child(3) { width: 22%; }  /* Center Name (+vanity) */
#centersTable th:nth-child(4), #centersTable td:nth-child(4) { width: 8%; }   /* Tables */
#centersTable th:nth-child(5), #centersTable td:nth-child(5) { width: 9%; }   /* Employees */
#centersTable th:nth-child(6), #centersTable td:nth-child(6) { width: 21%; }  /* Subscription Valid Until */
#centersTable th:nth-child(7), #centersTable td:nth-child(7) { width: 9%; }   /* Status */
#centersTable th:nth-child(8), #centersTable td:nth-child(8) { width: 15%; }  /* Actions */

/* Employees (7 cols; Mobile merged into Name) */
#employeesTable th:nth-child(1), #employeesTable td:nth-child(1) { width: 11%; }  /* Created */
#employeesTable th:nth-child(2), #employeesTable td:nth-child(2) { width: 18%; }  /* Name (+mobile) */
#employeesTable th:nth-child(3), #employeesTable td:nth-child(3) { width: 22%; }  /* Email */
#employeesTable th:nth-child(4), #employeesTable td:nth-child(4) { width: 11%; }  /* Role */
#employeesTable th:nth-child(5), #employeesTable td:nth-child(5) { width: 17%; }  /* Centers */
#employeesTable th:nth-child(6), #employeesTable td:nth-child(6) { width: 10%; }  /* Status */
#employeesTable th:nth-child(7), #employeesTable td:nth-child(7) { width: 11%; }  /* Actions */

/* Table column widths - Members (9 columns).
   Was authored for an 11-column layout that no longer exists — rules 10/11 were
   dead and the percentages summed to 74% of the real table. Re-based on the
   actual columns: Subscribed | Member Name | Email | Subscribed Plan | Ranking |
   Credit | Points | Status | Action. Ranking is a short label (max 20 chars) so
   it takes the narrowest share. Sums to 100%. */
#membersTable th:nth-child(1), #membersTable td:nth-child(1) { width: 9%; }
#membersTable th:nth-child(2), #membersTable td:nth-child(2) { width: 18%; }
#membersTable th:nth-child(3), #membersTable td:nth-child(3) { width: 20%; }
#membersTable th:nth-child(4), #membersTable td:nth-child(4) { width: 14%; }
#membersTable th:nth-child(5), #membersTable td:nth-child(5) { width: 7%; }
#membersTable th:nth-child(6), #membersTable td:nth-child(6) { width: 10%; }
#membersTable th:nth-child(7), #membersTable td:nth-child(7) { width: 7%; }
#membersTable th:nth-child(8), #membersTable td:nth-child(8) { width: 8%; }
#membersTable th:nth-child(9), #membersTable td:nth-child(9) { width: 7%; }

/* Subscription card amount highlight */
.sub-card-amount {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Client table - compact rows with aligned actions */
#clientsTable tbody tr {
    vertical-align: top;
}

#clientsTable tbody td {
    vertical-align: top;
    padding: 0.5rem 0.8rem;
}

/* Clients action cell �?inherits global .data-table th,td padding (0.75rem).
   Flat icon buttons (no box) need no negative-margin hack; header + first
   icon now share col-left + 0.75rem. */
.client-actions-cell {
    vertical-align: top;
    text-align: left;
}

/* Client table - combined Status + Last Login cell */
.client-status-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.client-status-cell .client-status-primary {
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: none;
}
.client-status-cell .client-status-primary.client-status-active {
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-accent);
}
.client-status-cell .client-status-primary.client-status-inactive {
    background: rgba(239, 68, 68, 0.15);
    color: var(--theme-danger);
}
.client-status-cell .client-status-sub {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #9ca3af);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}
.client-status-cell .client-status-sub i {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Generic "Name + Mobile" two-line cell �?used across Clients, Admins,
   Employees, Organizations, etc. Primary row is the name; sub row shows
   a phone glyph + mobile number in muted style. */
.client-name-cell,
.name-mobile-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.client-name-cell .client-name-primary,
.name-mobile-cell .name-mobile-primary {
    font-weight: 500;
    color: var(--theme-text-primary, #e5e7eb);
}
.client-name-cell .client-name-sub,
.name-mobile-cell .name-mobile-sub,
.member-name-container .client-name-sub {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #9ca3af);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}
.client-name-cell .client-name-sub i,
.name-mobile-cell .name-mobile-sub i,
.member-name-container .client-name-sub i {
    font-size: 0.7rem;
    opacity: 0.8;
}

.client-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.data-table .client-action-extra {
    display: none !important;
}

.client-row-selected {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
}

.data-table .client-row-selected .client-action-extra {
    display: inline-block !important;
}

/* Client table - expiry column */
.expiry-cell {
    min-width: 120px;
}

.expiry-full-list {
    font-size: 11px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-badge {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: inline-block;
    width: fit-content;
    background: transparent;
    border: none;
}

/* Universal badge protection - prevent truncation */
.data-table .status-badge,
.data-table span[class*="badge"] {
    white-space: nowrap;
    display: inline-block;
    width: fit-content;
    overflow: visible;
}

/* Status pill variants �?tinted fill + solid text color, no border. */
.status-active  { background: rgba(var(--theme-accent-rgb), 0.15); color: var(--theme-accent); }
.status-inactive { background: rgba(239, 68, 68, 0.15);  color: var(--theme-danger); }
.status-warning  { background: rgba(245, 158, 11, 0.15); color: var(--theme-warning); }
.status-info     { background: rgba(59, 130, 246, 0.15); color: var(--theme-info); }
.status-muted    { background: rgba(156, 163, 175, 0.15); color: var(--theme-text-muted); }

.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    min-height: 536px; /* Height of 2 rows of table cards �?consistent across all pages/zones */
    align-content: start;
    padding-bottom: 18px; /* Space for booking tags that hang below bottom-row cards */
}

.table-card {
    background: var(--theme-body);
    border: 2px solid var(--theme-accent);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 200px; /* Fixed height for consistent layout */
    width: 176px; /* Fixed width */
}

/* Pool Table Theme - Compact Design */
.table-card.theme-pool {
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    height: 200px;
    width: 176px;
}

.table-card.theme-pool .pool-rail {
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border-radius: 6px;
    padding: 6px;
    height: 100%;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.table-card.theme-pool .pool-felt {
    background: linear-gradient(145deg, #1a6b2e 0%, #145224 50%, #0f3d1b 100%);
    border-radius: 3px;
    height: 100%;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.table-card.theme-pool .pool-cushion {
    border: 1px solid rgba(45, 122, 74, 0.4);
    border-radius: 3px;
    height: 100%;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Pool table pockets - smaller */
.table-card.theme-pool .pocket {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 5;
}

.table-card.theme-pool .pocket-tl { top: 2px; left: 2px; }
.table-card.theme-pool .pocket-tr { top: 2px; right: 2px; }
.table-card.theme-pool .pocket-bl { bottom: 2px; left: 2px; }
.table-card.theme-pool .pocket-br { bottom: 2px; right: 2px; }
.table-card.theme-pool .pocket-ml { top: 50%; left: 2px; transform: translateY(-50%); }
.table-card.theme-pool .pocket-mr { top: 50%; right: 2px; transform: translateY(-50%); }

/* Table name at top of felt area */
.table-card.theme-pool .table-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-accent-light);
    text-align: center;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Pool theme hover effects */
.table-card.theme-pool:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3);
}

/* Pool theme hover outline */
.table-card.theme-pool .hover-outline {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.table-card.theme-pool:hover .hover-outline {
    border-color: rgba(var(--theme-accent-rgb), 0.6);
}

/* Pool theme timer */
.table-card.theme-pool .table-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    margin-top: 8px; /* Push timer down from top */
    flex-shrink: 0;
}

/* Pool theme status */
.table-card.theme-pool .table-status {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--theme-accent-light);
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pool theme operation buttons */
.table-card.theme-pool .table-operations {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: auto;
    flex-shrink: 0;
}

.table-card.theme-pool .table-operations button {
    flex: 1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Pool theme status indicator - colored left border on cushion */
.table-card.theme-pool.available .pool-cushion {
    border-left: 3px solid var(--theme-accent);
}

.table-card.theme-pool.occupied .pool-cushion {
    border-left: 3px solid var(--theme-orange);
}

.table-card.theme-pool.checkedout .pool-cushion {
    border-left: 3px solid var(--theme-danger);
}

.table-card.theme-pool.maintenance .pool-cushion,
.table-card.theme-pool.inactive .pool-cushion {
    border-left: 3px solid var(--theme-border);
}

/* Pool theme status text colors */
.table-card.theme-pool.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-pool.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-pool.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-pool.maintenance .table-status,
.table-card.theme-pool.inactive .table-status { color: var(--theme-text-secondary); }

/* Pool Table Square Theme */
.table-card.theme-pool-square {
    background: transparent;
    border: none;
    padding: 0;
    height: 200px;
    width: 176px;
    display: flex;
    flex-direction: column;
}

.table-card.theme-pool-square .table-title-container {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    border: 2px solid;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    flex-shrink: 0;
}

.table-card.theme-pool-square .table-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-card.theme-pool-square .pool-felt-square {
    flex: 1;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.table-card.theme-pool-square .table-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    margin-top: 8px; /* Push timer down from top */
}

.table-card.theme-pool-square .table-status {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-card.theme-pool-square .table-operations {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: auto;
    flex-shrink: 0;
}

.table-card.theme-pool-square .table-operations button {
    flex: 1;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-card.theme-pool-square:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3);
}

/* Pool-square theme status indicator - colored left border on felt */
.table-card.theme-pool-square.available .pool-felt-square {
    border-left: 3px solid var(--theme-accent);
}

.table-card.theme-pool-square.occupied .pool-felt-square {
    border-left: 3px solid var(--theme-orange);
}

.table-card.theme-pool-square.checkedout .pool-felt-square {
    border-left: 3px solid var(--theme-danger);
}

.table-card.theme-pool-square.maintenance .pool-felt-square,
.table-card.theme-pool-square.inactive .pool-felt-square {
    border-left: 3px solid var(--theme-border);
}

/* ========================================
   SNOOKER TABLE THEME - Exact Design-6.txt
   Card IS the rail (no separate rail div)
   ======================================== */

/* Snooker ball shake animation (on click) */
@keyframes snookerBallShake {
    0%   { transform: translateX(-50%) translateY(0); }
    10%  { transform: translateX(-42%) translateY(0); }
    20%  { transform: translateX(-58%) translateY(0); }
    30%  { transform: translateX(-44%) translateY(0); }
    40%  { transform: translateX(-56%) translateY(0); }
    50%  { transform: translateX(-46%) translateY(0); }
    60%  { transform: translateX(-54%) translateY(0); }
    70%  { transform: translateX(-48%) translateY(0); }
    80%  { transform: translateX(-52%) translateY(0); }
    90%  { transform: translateX(-49%) translateY(0); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* [REMOVED] snookerBallRoll keyframes �?dead CSS removed 2026-03-16 */

/* Base snooker theme card - Card IS the rail (like Design-6.txt) */
.table-card.theme-snooker{
    /* rail-wood from Design-6.txt */
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border: none;
    border-radius: 8px; /* rounded-lg */
    padding: 12px; /* p-3 */
    width: 176px; /* w-44 */
    height: 240px; /* Fixed height for consistent layout */
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* shadow-lg */
    transition: all 0.3s ease;
    margin-top: 20px; /* Space for ball badge */
}

/* Ball badge - snooker ball style at top */
.table-card.theme-snooker .ball-badge {
    position: absolute;
    top: -16px; /* -top-4 */
    left: 50%;
    transform: translateX(-50%);
    min-width: 32px; /* w-8 */
    height: 32px; /* h-8 */
    padding: 0 10px; /* px-2.5 */
    border-radius: 9999px; /* rounded-full */
    background: radial-gradient(circle at 35% 35%, #f87171 0%, #dc2626 30%, #b91c1c 60%, #7f1d1d 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

/* Ball badge pill shape for longer names */
.table-card.theme-snooker .ball-badge.pill {
    border-radius: 9999px;
}

/* Ball badge text */
.table-card.theme-snooker .ball-badge span {
    color: white;
    font-size: 0.75rem; /* text-xs */
    font-weight: 700; /* font-bold */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* drop-shadow */
    white-space: nowrap;
}

/* Ball animation on hover */
.table-card.theme-snooker:hover .ball-badge {
    animation: snookerBallShake 0.4s ease-out;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(var(--theme-danger-rgb), 0.6);
}

/* Corner pockets - positioned on the card (rail) */
.table-card.theme-snooker .snooker-pocket {
    position: absolute;
    width: 16px; /* w-4 */
    height: 16px; /* h-4 */
    border-radius: 9999px; /* rounded-full */
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8); /* shadow-inner */
    z-index: 5;
}

/* Pocket positions: top-1 = 4px, left-1 = 4px */
.table-card.theme-snooker .snooker-pocket-tl { top: 4px; left: 4px; }
.table-card.theme-snooker .snooker-pocket-tr { top: 4px; right: 4px; }
.table-card.theme-snooker .snooker-pocket-bl { bottom: 4px; left: 4px; }
.table-card.theme-snooker .snooker-pocket-br { bottom: 4px; right: 4px; }
.table-card.theme-snooker .snooker-pocket-ml { top: 50%; left: 4px; transform: translateY(-50%); }
.table-card.theme-snooker .snooker-pocket-mr { top: 50%; right: 4px; transform: translateY(-50%); }

/* Clickable QR pocket button - always visible on all table states */
.table-card .pocket-qr-btn {
    cursor: pointer;
    z-index: 15;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .pocket-qr-btn:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.6);
}

.table-card .pocket-qr-btn::after {
    content: "\F6AE";
    font-family: "bootstrap-icons";
    font-size: 8px;
    color: rgba(var(--theme-accent-rgb), 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Clickable booking pocket button (top-left) */
.table-card .pocket-booking-btn {
    cursor: pointer;
    z-index: 15;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .pocket-booking-btn:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-purple-rgb), 0.6);
}

.table-card .pocket-booking-btn::after {
    content: "\F1E8";
    font-family: "bootstrap-icons";
    font-size: 8px;
    color: rgba(var(--theme-purple-rgb), 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Clickable history pocket button (bottom-right) �?same style as QR pocket */
.table-card .pocket-history-btn {
    cursor: pointer;
    z-index: 15;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .pocket-history-btn:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.6);
}

.table-card .pocket-history-btn::after {
    content: "\F292";
    font-family: "bootstrap-icons";
    font-size: 8px;
    color: rgba(var(--theme-accent-rgb), 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Clickable proforma pocket button (bottom-right) �?blue glow */
.table-card .pocket-proforma-btn {
    cursor: pointer;
    z-index: 15;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .pocket-proforma-btn:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-info-rgb), 0.6);
}

.table-card .pocket-proforma-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(96,165,250,0.8)' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Booking corner button (top-left) for non-pocket themes */
.table-card .btn-table-booking-corner {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .btn-table-booking-corner:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-purple-rgb), 0.6);
}

.table-card .btn-table-booking-corner i {
    font-size: 8px;
    color: rgba(var(--theme-purple-rgb), 0.8);
    line-height: 1;
}

/* History button for non-pocket themes (pool-square, snooker-square, classic) */
.table-card .btn-table-history-corner {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .btn-table-history-corner:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.6);
}

.table-card .btn-table-history-corner i {
    font-size: 8px;
    color: rgba(var(--theme-accent-rgb), 0.8);
    line-height: 1;
}

/* Proforma corner button (bottom-right) */
.table-card .btn-table-proforma-corner {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .btn-table-proforma-corner:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-info-rgb), 0.6);
}

.table-card .btn-table-proforma-corner i {
    font-size: 8px;
    color: rgba(var(--theme-info-rgb), 0.8);
    line-height: 1;
}

.table-card .btn-table-proforma-corner svg {
    width: 10px;
    height: 10px;
    stroke: rgba(var(--theme-info-rgb), 0.8);
}

/* QR corner button (bottom-left): available tables only */
.table-card .btn-table-qr-corner {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.table-card .btn-table-qr-corner:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.6);
}

.table-card .btn-table-qr-corner i {
    font-size: 8px;
    color: rgba(var(--theme-accent-rgb), 0.8);
    line-height: 1;
}

/* Felt surface - background set via inline style from surfaceStyles */
.table-card.theme-snooker .snooker-felt {
    border-radius: 4px; /* rounded */
    padding: 8px; /* p-2 */
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Hover outline effect */
.table-card.theme-snooker .hover-outline {
    position: absolute;
    inset: 0;
    border-radius: 8px; /* rounded-lg */
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.table-card.theme-snooker:hover {
    transform: translateY(-2px); /* hover:-translate-y-0.5 */
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3);
}

.table-card.theme-snooker:hover .hover-outline {
    border-color: rgba(var(--theme-accent-rgb), 0.6);
}

/* Timer display - text-2xl mb-2 from Design-6.txt */
.table-card.theme-snooker .table-timer {
    font-family: 'Courier New', monospace; /* font-mono */
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Status text - text-xs uppercase tracking-wide - fixed 2-line height */
.table-card.theme-snooker .table-status {
    font-size: 0.75rem; /* text-xs */
    text-transform: uppercase;
    color: var(--theme-accent-light);
    letter-spacing: 0.05em; /* tracking-wide */
    margin-bottom: 0;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
}

/* Flexible spacer - pushes buttons to bottom */
.table-card.theme-snooker .table-spacer {
    flex-grow: 1;
    min-height: 2px;
}

/* Placeholder for empty button row - maintains 2-row height */
.table-card.theme-snooker .btn-placeholder {
    height: 22px;  /* Match button height */
    flex-shrink: 0;
}

/* Operation buttons */
.table-card.theme-snooker .table-operations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    flex-shrink: 0;
    margin-top: auto;
}

.table-card.theme-snooker .table-operations button {
    flex: 1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Status text colors - no border-left, ball badge uses table type color */
.table-card.theme-snooker.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-snooker.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-snooker.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-snooker.maintenance .table-status,
.table-card.theme-snooker.inactive .table-status { color: var(--theme-text-secondary); }

/* ========================================
   SNOOKER SQUARE THEME - Exact Design-6.txt
   Card IS the rail (w-44 aspect-square)
   ======================================== */

/* Base snooker-square theme card - Card IS the rail */
.table-card.theme-snooker-square {
    /* rail-wood from Design-6.txt */
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border: none;
    border-radius: 8px; /* rounded-lg */
    padding: 12px; /* p-3 */
    width: 176px; /* w-44 */
    height: 176px; /* aspect-square */
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* shadow-lg */
    transition: all 0.3s ease;
    margin-top: 20px; /* Space for ball badge */
}

/* Ball badge for square theme */
.table-card.theme-snooker-square .ball-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    background: radial-gradient(circle at 35% 35%, #f87171 0%, #dc2626 30%, #b91c1c 60%, #7f1d1d 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

.table-card.theme-snooker-square .ball-badge.pill {
    border-radius: 9999px;
}

.table-card.theme-snooker-square .ball-badge span {
    color: white;
    font-size: 0.75rem; /* text-xs */
    font-weight: 700; /* font-bold */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.table-card.theme-snooker-square:hover .ball-badge {
    animation: snookerBallShake 0.4s ease-out;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(var(--theme-danger-rgb), 0.6);
}

/* Only corner pockets for square - positioned on card (rail) */
.table-card.theme-snooker-square .snooker-pocket {
    position: absolute;
    width: 16px; /* w-4 */
    height: 16px; /* h-4 */
    border-radius: 9999px; /* rounded-full */
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 5;
}

.table-card.theme-snooker-square .snooker-pocket-tl { top: 4px; left: 4px; }
.table-card.theme-snooker-square .snooker-pocket-tr { top: 4px; right: 4px; }
.table-card.theme-snooker-square .snooker-pocket-bl { bottom: 4px; left: 4px; }
.table-card.theme-snooker-square .snooker-pocket-br { bottom: 4px; right: 4px; }

/* Felt surface for square - p-3 h-full - background set via inline style */
.table-card.theme-snooker-square .snooker-felt {
    border-radius: 4px; /* rounded */
    padding: 8px; /* p-2 */
    height: 100%; /* h-full */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

/* Hover outline for square */
.table-card.theme-snooker-square .hover-outline {
    position: absolute;
    inset: 0;
    border-radius: 8px; /* rounded-lg */
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.table-card.theme-snooker-square:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3);
}

.table-card.theme-snooker-square:hover .hover-outline {
    border-color: rgba(var(--theme-accent-rgb), 0.6);
}

/* Timer for square - text-xl mb-1 */
.table-card.theme-snooker-square .table-timer {
    font-family: 'Courier New', monospace; /* font-mono */
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Status for square - text-xs uppercase tracking-wide - fixed 2-line height */
.table-card.theme-snooker-square .table-status {
    font-size: 0.75rem; /* text-xs */
    text-transform: uppercase;
    color: var(--theme-accent-light);
    letter-spacing: 0.05em; /* tracking-wide */
    margin-bottom: 0;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
}

/* Flexible spacer for square - pushes buttons to bottom */
.table-card.theme-snooker-square .table-spacer {
    flex-grow: 1;
    min-height: 2px;
}

/* Placeholder for empty button row in square theme */
.table-card.theme-snooker-square .btn-placeholder {
    height: 22px;  /* Match button height for square */
    flex-shrink: 0;
}

/* Operation buttons for square - flex-row gap-1 justify-center */
.table-card.theme-snooker-square .table-operations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px; /* gap-1 */
    justify-content: center;
    flex-shrink: 0;
}

.table-card.theme-snooker-square .table-operations button {
    padding: 4px 8px; /* px-2 py-1 */
    border-radius: 4px; /* rounded */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Status text colors for square - no border-left, ball badge uses table type color */
.table-card.theme-snooker-square.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-snooker-square.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-snooker-square.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-snooker-square.maintenance .table-status,
.table-card.theme-snooker-square.inactive .table-status { color: var(--theme-text-secondary); }

/* End Snooker Themes */

/* ===== Pool Themes �?Identical to Snooker, only felt color differs (via surface_color) ===== */
/* Pool Rectangle inherits all snooker rectangle styles */
.table-card.theme-pool {
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 176px;
    height: 240px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    margin-top: 20px;
}
.table-card.theme-pool:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-pool:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.6); }
.table-card.theme-pool:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-pool .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-pool .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
.table-card.theme-pool .snooker-pocket { position: absolute; width: 16px; height: 16px; border-radius: 9999px; background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); z-index: 5; }
.table-card.theme-pool .snooker-pocket-tl { top: 4px; left: 4px; }
.table-card.theme-pool .snooker-pocket-tr { top: 4px; right: 4px; }
.table-card.theme-pool .snooker-pocket-bl { bottom: 4px; left: 4px; }
.table-card.theme-pool .snooker-pocket-br { bottom: 4px; right: 4px; }
.table-card.theme-pool .snooker-pocket-ml { top: 50%; left: 4px; transform: translateY(-50%); }
.table-card.theme-pool .snooker-pocket-mr { top: 50%; right: 4px; transform: translateY(-50%); }
.table-card.theme-pool .snooker-felt { border-radius: 4px; padding: 8px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; }
.table-card.theme-pool .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
.table-card.theme-pool .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; }
.table-card.theme-pool .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; }
.table-card.theme-pool .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-pool .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-pool .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; }
.table-card.theme-pool .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.table-card.theme-pool.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-pool.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-pool.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-pool.maintenance .table-status,
.table-card.theme-pool.inactive .table-status { color: var(--theme-text-secondary); }

/* Pool Square inherits all snooker-square styles */
.table-card.theme-pool-square {
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 176px;
    height: 176px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    margin-top: 20px;
}
.table-card.theme-pool-square:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-pool-square:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.6); }
.table-card.theme-pool-square:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-pool-square .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-pool-square .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
.table-card.theme-pool-square .snooker-pocket { position: absolute; width: 16px; height: 16px; border-radius: 9999px; background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); z-index: 5; }
.table-card.theme-pool-square .snooker-pocket-tl { top: 4px; left: 4px; }
.table-card.theme-pool-square .snooker-pocket-tr { top: 4px; right: 4px; }
.table-card.theme-pool-square .snooker-pocket-bl { bottom: 4px; left: 4px; }
.table-card.theme-pool-square .snooker-pocket-br { bottom: 4px; right: 4px; }
.table-card.theme-pool-square .snooker-felt { border-radius: 4px; padding: 8px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; }
.table-card.theme-pool-square .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
.table-card.theme-pool-square .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; }
.table-card.theme-pool-square .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; }
.table-card.theme-pool-square .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-pool-square .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-pool-square .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; }
.table-card.theme-pool-square .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.table-card.theme-pool-square.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-pool-square.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-pool-square.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-pool-square.maintenance .table-status,
.table-card.theme-pool-square.inactive .table-status { color: var(--theme-text-secondary); }
/* End Pool Themes */

/* ===== Access Card Theme ===== */

/* Blink animation for status dots */
@keyframes classicBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Access Card �?exact clone of snooker card dimensions/padding/hover, only pure white bg differs */
.table-card.theme-access-card {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 176px;
    height: 240px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    margin-top: 20px;
}

.table-card.theme-access-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3);
}

/* Decorative stripe + chip hidden �?access card is now a pure white card */
.table-card.theme-access-card .ac-stripes { display: none !important; }
.table-card.theme-access-card .ac-bottom { display: none !important; }

/* Main card body �?mirrors .snooker-felt */
.table-card.theme-access-card .ac-inner {
    border-radius: 4px;
    padding: 8px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.table-card.theme-access-card .hover-outline {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
    z-index: 10;
}
.table-card.theme-access-card:hover .hover-outline {
    border-color: transparent;
}

/* Spacer + placeholder + operations �?exact clone of snooker */
.table-card.theme-access-card .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-access-card .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-access-card .table-operations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    flex-shrink: 0;
    margin-top: auto;
}
.table-card.theme-access-card .table-operations button {
    flex: 1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Outstanding chip (bug #156): the chip uses light text on its own translucent-red tint,
   legible on the dark game-table themes. The light-surface themes (access-card / bed) would
   wash that out, so give the chip an opaque dark-red background there so the light text stays
   readable. !important overrides the chip's inline background. Game tables never use these
   themes in practice (no game session, no outstanding bill) - this is defensive. */
.table-card.theme-access-card .table-outstanding-chip,
.table-card.theme-bed .table-outstanding-chip {
    background: rgba(120, 20, 20, 0.92) !important;
    border-color: rgba(120, 20, 20, 0.95) !important;
}

/* Ball badge — mirrors snooker, uses table label color as background */
.table-card.theme-access-card .ball-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}
.table-card.theme-access-card .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-access-card .ball-badge span {
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.table-card.theme-access-card:hover .ball-badge {
    animation: snookerBallShake 0.4s ease-out;
    box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(var(--theme-accent-rgb), 0.5);
}

/* Table name */
.table-card.theme-access-card .ac-table-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-overlay-subtle);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Status row: dot - STATUS - dot */
.table-card.theme-access-card .ac-status-line {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--theme-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 4px;
}

.table-card.theme-access-card .ac-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    animation: classicBlink 1.6s ease-in-out infinite;
}

/* Timer inside inner card �?force dark text on light background */
/* Timer �?snooker-style (large digital) on white card */
.table-card.theme-access-card .ac-inner .table-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2px;
    margin-top: 6px;
    flex-shrink: 0;
}
.table-card.theme-access-card.checkedout .ac-inner .table-timer,
.table-card.theme-access-card.pending_payment .ac-inner .table-timer {
    color: var(--theme-danger) !important;
}
.table-card.theme-access-card.occupied .ac-inner .table-timer {
    color: #c2410c !important;
}

/* Customer name / status text �?snooker-style, readable on white */
.table-card.theme-access-card .ac-inner .table-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
}
.table-card.theme-access-card.available .ac-inner .table-status { color: #166534; }
.table-card.theme-access-card.occupied .ac-inner .table-status { color: #c2410c; }
.table-card.theme-access-card.checkedout .ac-inner .table-status,
.table-card.theme-access-card.pending_payment .ac-inner .table-status { color: var(--theme-danger); }
.table-card.theme-access-card.inactive .ac-inner .table-status { color: #6b7280; }

/* Buttons: inherit inline styles from operationButtons HTML (identical to snooker/pool) �?no overrides */

/* Bottom row �?RFID chip indicator */
.table-card.theme-access-card .ac-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    padding: 4px 10px;
}

.table-card.theme-access-card .btn-table-booking-corner {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.2s ease;
    background: #8b5cf6 !important;
    border: none;
    color: white !important;
}

.table-card.theme-access-card .btn-table-booking-corner i {
    color: white !important;
    font-size: 10px;
}

.table-card.theme-access-card .btn-table-booking-corner:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.table-card.theme-access-card .btn-table-history-corner {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.2s ease;
    background: var(--theme-accent-fill) !important;
    border: none;
    color: var(--theme-accent-contrast) !important;
}

.table-card.theme-access-card .btn-table-history-corner i {
    color: #fff !important;
    font-size: 10px;
}

.table-card.theme-access-card .btn-table-history-corner:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.table-card.theme-access-card .btn-table-proforma-corner {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.2s ease;
    background: var(--theme-info) !important;
    border: none;
    color: var(--theme-info-contrast) !important;
}

.table-card.theme-access-card .btn-table-proforma-corner i {
    color: #fff !important;
    font-size: 10px;
}

.table-card.theme-access-card .btn-table-proforma-corner svg {
    width: 12px;
    height: 12px;
    stroke: #fff !important;
}

.table-card.theme-access-card .btn-table-proforma-corner:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.table-card.theme-access-card .btn-table-qr-corner {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    background: #1f2937;
    border: 1px solid #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background 0.15s, transform 0.15s;
}

.table-card.theme-access-card .btn-table-qr-corner i {
    color: #ffffff !important;
    font-size: 11px;
}

.table-card.theme-access-card .btn-table-qr-corner:hover {
    background: #111827;
    transform: scale(1.1);
}

/* (merged into main hover rule above) */

/* Classic status colors by state */
.table-card.theme-access-card.available .ac-status-dot { background: var(--theme-accent); }
.table-card.theme-access-card.available .ac-status-line { color: var(--theme-accent); }
.table-card.theme-access-card.occupied .ac-status-dot { background: var(--theme-orange); animation: none; }
.table-card.theme-access-card.occupied .ac-status-line { color: var(--theme-orange); }
.table-card.theme-access-card.checkedout { background: #ffffff !important; border-color: transparent !important; }
.table-card.theme-access-card.occupied,
.table-card.theme-access-card.pending_payment,
.table-card.theme-access-card.maintenance { background: #ffffff !important; }
.table-card.theme-access-card.checkedout .ac-status-dot { background: var(--theme-danger); }
.table-card.theme-access-card.checkedout .ac-status-line { color: var(--theme-danger); }
.table-card.theme-access-card.pending_payment .ac-status-dot { background: var(--theme-danger); }
.table-card.theme-access-card.pending_payment .ac-status-line { color: var(--theme-danger); }
.table-card.theme-access-card.maintenance .ac-status-dot { background: var(--theme-border); animation: none; }
.table-card.theme-access-card.maintenance .ac-status-line { color: var(--theme-border); }
.table-card.theme-access-card.inactive .ac-status-dot { background: var(--theme-border); animation: none; }
.table-card.theme-access-card.inactive .ac-status-line { color: var(--theme-border); }

/* ===== Bed Theme ===== */
/* Card = grey bed frame, padding creates the frame.
   Inside: sheet area (top) with pillow, blanket fold, blanket body (bottom). */
.table-card.theme-bed {
    background: linear-gradient(145deg, #9e9e9e 0%, #858585 50%, #6e6e6e 100%);
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 176px;
    height: 240px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    margin-top: 20px;
    overflow: visible;
}

/* --- Sheet area: white, contains pillow --- */
.table-card.theme-bed .bed-sheet-fold {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 52px;
    background: linear-gradient(180deg, #f8f7f4 0%, #f0efeb 100%);
    border-radius: 4px 4px 0 0;
    z-index: 1;
}

/* --- Pillow: centered rectangle on the sheet --- */
.table-card.theme-bed .bed-pillow {
    position: absolute;
    top: 20px;
    left: 26px;
    right: 26px;
    height: 32px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f6f2 40%, #edebe6 100%);
    border-radius: 6px;
    border: 1.5px solid rgba(0, 0, 0, 0.07);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.04),
        inset 0 1px 3px rgba(255, 255, 255, 0.9);
    z-index: 5;
    overflow: hidden;
}
.table-card.theme-bed .bed-pillow-shine {
    position: absolute;
    top: 3px;
    left: 12%;
    right: 12%;
    height: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%;
}

/* --- Blanket/duvet: white, below sheet area --- */
.table-card.theme-bed .bed-blanket {
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 0 0 4px 4px;
    padding: 8px;
    padding-top: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #faf9f6 30%, #f4f3ef 100%);
    z-index: 2;
}
/* Blanket fold - the turned-down edge at top of blanket */
.table-card.theme-bed .bed-blanket::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(180deg, #e8e6e0 0%, #f0efeb 60%, #f8f7f4 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 1;
}

/* Top-content overlay: holds only timer + chip + grand total on a layer above the bed.
   Positioned to land the timer at ~26px from card top (snooker baseline).
   Buttons remain inside .bed-blanket below. */
.table-card.theme-bed .bed-top-content {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 12px 8px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 6;
    pointer-events: none;
}
.table-card.theme-bed .bed-top-content > * {
    pointer-events: auto;
}

/* Ball badge - floats above card */
.table-card.theme-bed .ball-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}
.table-card.theme-bed .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-bed .ball-badge span {
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.table-card.theme-bed:hover .ball-badge {
    animation: snookerBallShake 0.4s ease-out;
}

/* Hover */
.table-card.theme-bed .hover-outline {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
    z-index: 10;
}
.table-card.theme-bed:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.table-card.theme-bed:hover .hover-outline {
    border-color: rgba(139, 100, 70, 0.6);
}

/* Corner buttons - solid white squares on grey frame */
.table-card.theme-bed .btn-table-booking-corner,
.table-card.theme-bed .btn-table-history-corner,
.table-card.theme-bed .btn-table-proforma-corner,
.table-card.theme-bed .btn-table-qr-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 15;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.table-card.theme-bed .btn-table-booking-corner:hover,
.table-card.theme-bed .btn-table-history-corner:hover,
.table-card.theme-bed .btn-table-proforma-corner:hover,
.table-card.theme-bed .btn-table-qr-corner:hover {
    background: #fff;
    color: #222;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.table-card.theme-bed .btn-table-booking-corner i,
.table-card.theme-bed .btn-table-history-corner i,
.table-card.theme-bed .btn-table-proforma-corner i,
.table-card.theme-bed .btn-table-qr-corner i { font-size: 10px; line-height: 1; }

.table-card.theme-bed .btn-table-proforma-corner svg {
    width: 12px;
    height: 12px;
    stroke: #555;
}
.table-card.theme-bed .btn-table-proforma-corner:hover svg {
    stroke: #222;
}

.table-card.theme-bed .btn-table-booking-corner { top: 5px; left: 5px; }
.table-card.theme-bed .btn-table-history-corner { top: 5px; right: 5px; }
.table-card.theme-bed .btn-table-qr-corner { bottom: 5px; left: 5px; }
.table-card.theme-bed .btn-table-proforma-corner { bottom: 5px; right: 5px; }

/* Timer */
.table-card.theme-bed .table-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
    margin-top: 2px;
    flex-shrink: 0;
    z-index: 3;
}

/* Status text */
.table-card.theme-bed .table-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    z-index: 3;
}

/* Operations */
.table-card.theme-bed .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-bed .btn-placeholder { height: 0; }
.table-card.theme-bed .table-operations {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 5;
    margin-top: 4px;
}
.table-card.theme-bed .table-operations button {
    flex: 1;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #444;
    padding: 0.3rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}
.table-card.theme-bed .table-operations button:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Status colors */
.table-card.theme-bed.available .table-status { color: var(--theme-accent-hover); }
.table-card.theme-bed.occupied .table-status { color: var(--theme-orange); }
.table-card.theme-bed.checkedout .table-status { color: var(--theme-danger); }
.table-card.theme-bed.maintenance .table-status,
.table-card.theme-bed.inactive .table-status { color: var(--theme-text-muted); }

/* ===== End Bed Theme ===== */

/* ===== Carrom Theme (square board, 176×176) ===== */
.table-card.theme-carrom {
    border: none; border-radius: 8px; padding: 12px; width: 176px; height: 176px;
    position: relative; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease; margin-top: 20px;
}
.table-card.theme-carrom:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-carrom:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.6); }
.table-card.theme-carrom:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-carrom .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-carrom .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-carrom .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
.table-card.theme-carrom .snooker-pocket { position: absolute; width: 16px; height: 16px; border-radius: 9999px; background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); z-index: 5; }
.table-card.theme-carrom .snooker-pocket-tl { top: 4px; left: 4px; }
.table-card.theme-carrom .snooker-pocket-tr { top: 4px; right: 4px; }
.table-card.theme-carrom .snooker-pocket-bl { bottom: 4px; left: 4px; }
.table-card.theme-carrom .snooker-pocket-br { bottom: 4px; right: 4px; }
.table-card.theme-carrom .snooker-felt { border-radius: 4px; padding: 8px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; position: relative; }
.table-card.theme-carrom .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
.table-card.theme-carrom .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; position: relative; z-index: 2; }
.table-card.theme-carrom .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; position: relative; z-index: 2; }
.table-card.theme-carrom .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-carrom .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-carrom .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; position: relative; z-index: 2; }
.table-card.theme-carrom .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.table-card.theme-carrom .carrom-marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* Center circles */
.table-card.theme-carrom .carrom-marks::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); }
.table-card.theme-carrom .carrom-marks::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); }
/* Baselines via inner div pseudo-elements */
.table-card.theme-carrom .carrom-baselines { position: absolute; inset: 18px; pointer-events: none; z-index: 1; border: 1px solid rgba(255,255,255,0.12); }
.table-card.theme-carrom .carrom-baselines::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
.table-card.theme-carrom .carrom-baselines::after { content: ''; position: absolute; bottom: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
.table-card.theme-carrom.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-carrom.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-carrom.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-carrom.maintenance .table-status,
.table-card.theme-carrom.inactive .table-status { color: var(--theme-text-secondary); }

/* ===== Mahjong Theme (square table, 176×176) ===== */
.table-card.theme-mahjong {
    border: none; border-radius: 8px; padding: 12px; width: 176px; height: 176px;
    position: relative; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease; margin-top: 20px;
}
.table-card.theme-mahjong:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-mahjong:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.6); }
.table-card.theme-mahjong:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-mahjong .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-mahjong .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-mahjong .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
.table-card.theme-mahjong .snooker-felt { border-radius: 4px; padding: 8px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; position: relative; }
.table-card.theme-mahjong .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
.table-card.theme-mahjong .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; position: relative; z-index: 2; }
.table-card.theme-mahjong .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; position: relative; z-index: 2; }
.table-card.theme-mahjong .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-mahjong .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-mahjong .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; position: relative; z-index: 2; }
.table-card.theme-mahjong .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
/* Tile racks on 4 sides */
.table-card.theme-mahjong .mj-tiles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.table-card.theme-mahjong .mj-tiles-top, .table-card.theme-mahjong .mj-tiles-bottom { position: absolute; left: 22px; right: 22px; height: 14px; display: flex; gap: 2px; justify-content: center; }
.table-card.theme-mahjong .mj-tiles-top { top: 4px; }
.table-card.theme-mahjong .mj-tiles-bottom { bottom: 4px; }
.table-card.theme-mahjong .mj-tiles-left, .table-card.theme-mahjong .mj-tiles-right { position: absolute; top: 22px; bottom: 22px; width: 14px; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.table-card.theme-mahjong .mj-tiles-left { left: 4px; }
.table-card.theme-mahjong .mj-tiles-right { right: 4px; }
.table-card.theme-mahjong .mj-tile { flex: 1; background: rgba(255,255,255,0.12); border-radius: 1px; max-width: 10px; max-height: 10px; }
/* Center dice area */
.table-card.theme-mahjong .mj-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.15); border-radius: 2px; z-index: 1; display: flex; align-items: center; justify-content: center; }
.table-card.theme-mahjong .mj-center::after { content: ''; width: 8px; height: 8px; background: rgba(255,255,255,0.15); border-radius: 1px; }
.table-card.theme-mahjong.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-mahjong.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-mahjong.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-mahjong.maintenance .table-status,
.table-card.theme-mahjong.inactive .table-status { color: var(--theme-text-secondary); }

/* ===== Darts Theme (square, 176×176) =====
   Bug #248. Structurally IDENTICAL to .theme-mahjong — same size, same rail/frame
   from the rail preset, same felt from the surface colour, same corner buttons
   (inherited from the generic .table-card rules), same timer/status/operations.
   The ONLY difference is the surface pattern: mahjong's tile racks + dice square
   are replaced by a regulation dartboard drawn purely with gradients. */
.table-card.theme-darts {
    border: none; border-radius: 8px; padding: 12px; width: 176px; height: 176px;
    position: relative; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    transition: all 0.3s ease; margin-top: 20px;
    background: linear-gradient(160deg, #23262b 0%, #15171a 45%, #0b0c0e 100%);
}
.table-card.theme-darts:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-darts:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.6); }
.table-card.theme-darts:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-darts .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-darts .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-darts .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
.table-card.theme-darts .snooker-felt {
    border-radius: 4px; padding: 8px; height: 100%; text-align: center;
    display: flex; flex-direction: column; justify-content: flex-start; position: relative;
    background: radial-gradient(circle at 50% 45%, #1c1f23 0%, #101215 62%, #08090b 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
.table-card.theme-darts .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
/* ---- Pattern: regulation dartboard (replaces mahjong's tile racks + dice) ---- */
.table-card.theme-darts .dt-board {
    position: absolute; top: 50%; left: 50%; width: 122px; height: 122px;
    transform: translate(-50%, -50%); border-radius: 50%; z-index: 1;
    pointer-events: none; background: #0d0e10;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 6px rgba(0,0,0,0.8);
}
.table-card.theme-darts .dt-board > div { position: absolute; border-radius: 50%; }
.table-card.theme-darts .dt-wedges { inset: 6px; background: repeating-conic-gradient(from -9deg, #17191c 0deg 18deg, #cabd97 18deg 36deg); }
.table-card.theme-darts .dt-double { inset: 6px; background: repeating-conic-gradient(from -9deg, #c62828 0deg 18deg, #2e7d32 18deg 36deg); }
.table-card.theme-darts .dt-inner { inset: 15px; background: repeating-conic-gradient(from -9deg, #17191c 0deg 18deg, #cabd97 18deg 36deg); }
.table-card.theme-darts .dt-treble { inset: 30px; background: repeating-conic-gradient(from -9deg, #c62828 0deg 18deg, #2e7d32 18deg 36deg); }
.table-card.theme-darts .dt-inner2 { inset: 37px; background: repeating-conic-gradient(from -9deg, #17191c 0deg 18deg, #cabd97 18deg 36deg); }
.table-card.theme-darts .dt-spider { inset: 6px; background: repeating-conic-gradient(from -9deg, rgba(226,232,240,0.30) 0deg 0.7deg, transparent 0.7deg 18deg); }
.table-card.theme-darts .dt-bull-outer { top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #2e7d32; box-shadow: 0 0 0 1px rgba(226,232,240,0.28); }
.table-card.theme-darts .dt-bull-inner { top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #c62828; }
/* Legibility only: soften the board behind the timer/status and the buttons.
   Deliberately light so the centre's chosen felt colour still reads. */
.table-card.theme-darts .dt-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 4px;
    background: linear-gradient(180deg,
        rgba(8,9,11,0.95) 0%,
        rgba(8,9,11,0.90) 30%,
        rgba(8,9,11,0.14) 46%,
        rgba(8,9,11,0.14) 60%,
        rgba(8,9,11,0.82) 78%,
        rgba(8,9,11,0.95) 100%);
}
/* ---- Everything below matches .theme-mahjong exactly ---- */
.table-card.theme-darts .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.table-card.theme-darts .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.table-card.theme-darts .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-darts .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-darts .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; position: relative; z-index: 2; }
.table-card.theme-darts .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.table-card.theme-darts.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-darts.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-darts.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-darts.maintenance .table-status,
.table-card.theme-darts.inactive .table-status { color: var(--theme-text-secondary); }
/* ===== End Darts Theme ===== */

/* ===== Karaoke Theme (rectangle, 176×240) ===== */
.table-card.theme-karaoke {
    background: linear-gradient(145deg, #1a1a2e 0%, #16162a 50%, #0f0f1f 100%);
    border: 2px solid var(--label-color, var(--theme-accent)); border-radius: 8px; padding: 0; width: 176px; height: 240px;
    position: relative; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease; margin-top: 20px; overflow: hidden;
}
.table-card.theme-karaoke:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-karaoke:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.6); }
.table-card.theme-karaoke .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-karaoke .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-karaoke .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
.table-card.theme-karaoke .karaoke-inner { padding: 8px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; position: relative; }
.table-card.theme-karaoke .karaoke-mic { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); opacity: 0.5; pointer-events: none; }
.table-card.theme-karaoke .karaoke-note { position: absolute; pointer-events: none; }
.table-card.theme-karaoke .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: #e0e0e0; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; position: relative; z-index: 2; }
.table-card.theme-karaoke .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; position: relative; z-index: 2; }
.table-card.theme-karaoke .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-karaoke .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-karaoke .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; position: relative; z-index: 2; }
.table-card.theme-karaoke .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.table-card.theme-karaoke.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-karaoke.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-karaoke.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-karaoke.maintenance .table-status,
.table-card.theme-karaoke.inactive .table-status { color: var(--theme-text-secondary); }
/* Corner buttons �?same as bed theme */
.table-card.theme-karaoke .btn-table-booking-corner,
.table-card.theme-karaoke .btn-table-history-corner,
.table-card.theme-karaoke .btn-table-proforma-corner,
.table-card.theme-karaoke .btn-table-qr-corner {
    position: absolute; width: 22px; height: 22px; border: none; border-radius: 4px;
    background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.15s, color 0.15s; z-index: 15;
}
.table-card.theme-karaoke .btn-table-booking-corner:hover,
.table-card.theme-karaoke .btn-table-history-corner:hover,
.table-card.theme-karaoke .btn-table-proforma-corner:hover,
.table-card.theme-karaoke .btn-table-qr-corner:hover { background: rgba(255,255,255,0.2); color: #fff; }
.table-card.theme-karaoke .btn-table-booking-corner i,
.table-card.theme-karaoke .btn-table-history-corner i,
.table-card.theme-karaoke .btn-table-proforma-corner i,
.table-card.theme-karaoke .btn-table-qr-corner i { font-size: 10px; line-height: 1; }
.table-card.theme-karaoke .btn-table-proforma-corner svg { width: 12px; height: 12px; stroke: rgba(255,255,255,0.5); }
.table-card.theme-karaoke .btn-table-proforma-corner:hover svg { stroke: #fff; }
.table-card.theme-karaoke .btn-table-booking-corner { top: 5px; left: 5px; }
.table-card.theme-karaoke .btn-table-history-corner { top: 5px; right: 5px; }
.table-card.theme-karaoke .btn-table-qr-corner { bottom: 5px; left: 5px; }
.table-card.theme-karaoke .btn-table-proforma-corner { bottom: 5px; right: 5px; }

/* ===== End Classic Theme ===== */

/* ===== Arcade Gaming Theme �?Pinball Playfield ===== */
/* Rectangle layout identical to snooker/pool �?rail, 6 pockets, size/dimensions unchanged */
/* Surface redesigned as a pinball playfield: black rail, yellow pockets, dark playfield with bumpers + flippers */
.table-card.theme-arcade {
    position: relative;
    border-radius: 8px;
    overflow: visible;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    border: none;
    padding: 12px;
    width: 176px;
    height: 240px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Pockets �?cyberpunk diamond nodes */
/* Base: rotated square (diamond), dark core, neon cyan border + glow, inner crosshair dot */
.table-card.theme-arcade .snooker-pocket {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: #03000f;
    border: 1.5px solid #00ffe0;
    box-shadow: 0 0 6px 1px rgba(0,255,224,0.7), 0 0 12px rgba(0,255,224,0.3), inset 0 0 4px rgba(0,255,224,0.15);
    z-index: 5;
    transform: rotate(45deg);
}
/* Inner centre dot �?neon cyan pip */
.table-card.theme-arcade .snooker-pocket::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #00ffe0;
    border-radius: 1px;
    box-shadow: 0 0 4px #00ffe0, 0 0 8px rgba(0,255,224,0.6);
}
/* Corner pockets �?4 corners, no transform override needed */
.table-card.theme-arcade .snooker-pocket-tl { top: 5px; left: 5px; }
.table-card.theme-arcade .snooker-pocket-tr { top: 5px; right: 5px; }
.table-card.theme-arcade .snooker-pocket-bl { bottom: 5px; left: 5px; }
.table-card.theme-arcade .snooker-pocket-br { bottom: 5px; right: 5px; }
/* Mid pockets (edge bars) �?magenta accent to distinguish from corners */
.table-card.theme-arcade .snooker-pocket-ml {
    top: 50%; left: 5px;
    transform: translateY(-50%) rotate(45deg);
    border-color: #ff2d78;
    box-shadow: 0 0 6px 1px rgba(255,45,120,0.7), 0 0 12px rgba(255,45,120,0.3), inset 0 0 4px rgba(255,45,120,0.15);
}
.table-card.theme-arcade .snooker-pocket-ml::before { background: #ff2d78; box-shadow: 0 0 4px #ff2d78, 0 0 8px rgba(255,45,120,0.6); }
.table-card.theme-arcade .snooker-pocket-mr {
    top: 50%; right: 5px;
    transform: translateY(-50%) rotate(45deg);
    border-color: #ff2d78;
    box-shadow: 0 0 6px 1px rgba(255,45,120,0.7), 0 0 12px rgba(255,45,120,0.3), inset 0 0 4px rgba(255,45,120,0.15);
}
.table-card.theme-arcade .snooker-pocket-mr::before { background: #ff2d78; box-shadow: 0 0 4px #ff2d78, 0 0 8px rgba(255,45,120,0.6); }
/* Hover glow boost on interactive pockets �?override shared hover for arcade */
.table-card.theme-arcade .pocket-qr-btn:hover,
.table-card.theme-arcade .pocket-booking-btn:hover,
.table-card.theme-arcade .pocket-history-btn:hover,
.table-card.theme-arcade .pocket-proforma-btn:hover {
    transform: rotate(45deg) scale(1.3);
    box-shadow: 0 0 10px 3px rgba(0,255,224,0.9), 0 0 20px rgba(0,255,224,0.5);
}
/* Suppress the shared ::after icon (QR/calendar/history) �?inherit but recolor */
.table-card.theme-arcade .pocket-qr-btn::after,
.table-card.theme-arcade .pocket-booking-btn::after,
.table-card.theme-arcade .pocket-history-btn::after { color: rgba(0,255,224,0.9); transform: translate(-50%, -50%) rotate(-45deg); }
.table-card.theme-arcade .pocket-proforma-btn::after { display: none; }

/* ---- Pinball Playfield (felt area) ---- */
.table-card.theme-arcade .arcade-felt {
    border-radius: 4px;
    padding: 8px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: radial-gradient(ellipse at 50% 30%, #1a0030 0%, #0d0018 50%, #080010 100%);
    position: relative;
    overflow: hidden;
}
/* Lane guide lines (vertical) */
.table-card.theme-arcade .arcade-felt::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, rgba(255,220,0,0.08) 1px, transparent 1px),
        linear-gradient(to right, rgba(255,80,200,0.07) 1px, transparent 1px);
    background-size: 100% 14px, 20px 100%;
    pointer-events: none;
    z-index: 0;
}
/* Playfield border glow */
.table-card.theme-arcade .arcade-felt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    border: 1px solid rgba(255,50,180,0.25);
    box-shadow: inset 0 0 18px rgba(120,0,255,0.15);
    pointer-events: none;
    z-index: 1;
}

/* ---- Timer & Status �?same flow layout as snooker ---- */
.table-card.theme-arcade .table-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffdd00;
    text-shadow: 0 0 10px rgba(255,220,0,0.9), 0 0 20px rgba(255,180,0,0.5);
    margin-bottom: 2px;
    margin-top: 6px;
    flex-shrink: 0;
}
.table-card.theme-arcade .table-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
}
.table-card.theme-arcade.available .table-status  { color: #a78bfa; text-shadow: 0 0 6px rgba(167,139,250,0.7); }
.table-card.theme-arcade.occupied .table-status   { color: #ff2d78; text-shadow: 0 0 6px rgba(255,45,120,0.7); }
.table-card.theme-arcade.checkedout .table-status { color: #fde047; text-shadow: 0 0 5px rgba(253,224,71,0.6); }
.table-card.theme-arcade.maintenance .table-status,
.table-card.theme-arcade.inactive .table-status   { color: var(--theme-text-secondary); }

/* ---- Ball badge ---- */
.table-card.theme-arcade .ball-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.6), 0 0 10px rgba(255,220,0,0.35);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}
.table-card.theme-arcade .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-arcade .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }

/* ---- Hover outline ---- */
.table-card.theme-arcade .hover-outline {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
    z-index: 10;
}
.table-card.theme-arcade:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(255,50,180,0.25), 0 10px 25px -5px rgba(0,0,0,0.7);
}
.table-card.theme-arcade:hover .hover-outline { border-color: rgba(255,50,180,0.5); }
.table-card.theme-arcade:hover .ball-badge { box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 14px rgba(255,220,0,0.6); }

/* ---- Operation buttons ---- */
.table-card.theme-arcade .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-arcade .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-arcade .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; }
.table-card.theme-arcade .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
/* ===== End Arcade Gaming Theme ===== */

.table-card.available {
    border-color: var(--theme-accent);
}

.table-card.occupied {
    border-color: var(--theme-orange);
}

.table-card.loading {
    border-color: var(--theme-border);
    opacity: 0.8;
    pointer-events: none;
}

.table-card.loading .table-timer {
    color: var(--theme-border);
}

.table-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.table-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-accent);
    margin-bottom: 0;
}

.table-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-accent);
}

.table-status {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

/* Grand total badge on table cards �?IKEA yellow price tag style */
.table-grand-total {
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    padding: 1px 4px;
    text-align: center;
    margin: 5px auto;
    white-space: nowrap;
    line-height: 1.4;
    display: inline-block;
    background: #ffdb00;
    border: 1px solid #ffdb00;
    border-radius: 0;
    letter-spacing: 0.02em;
    text-shadow: none;
}

/* Animation for table card updates */
@keyframes tableUpdate {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--theme-accent-rgb), 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb), 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--theme-accent-rgb), 0);
    }
}

@keyframes rateBadgePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Animation for session start float-up effect */
@keyframes sessionStartFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -70%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -180%) scale(0.9);
    }
}

/* === Table Card Overlay Effects === */
.table-card-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: var(--theme-accent);
    pointer-events: none;
}

.table-start-effect {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    animation: sessionStartFloat 1.5s ease-out forwards;
    text-shadow: 0 0 12px rgba(var(--theme-accent-rgb), 0.6), 0 0 24px rgba(var(--theme-accent-rgb), 0.3);
}

/* Float-down animation (for Countdown start) */
@keyframes sessionStartFloatDown {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -30%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 80%) scale(0.9);
    }
}
.table-start-effect-down {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    animation: sessionStartFloatDown 1.5s ease-out forwards;
    text-shadow: 0 0 12px rgba(var(--theme-accent-rgb), 0.6), 0 0 24px rgba(var(--theme-accent-rgb), 0.3);
}

/* Icon enlarge animation (for Item/Round) */
@keyframes tableIconEnlarge {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.table-icon-effect {
    font-size: 1.8rem;
    animation: tableIconEnlarge 1.5s ease-out forwards;
    text-shadow: 0 0 12px rgba(var(--theme-accent-rgb), 0.6), 0 0 24px rgba(var(--theme-accent-rgb), 0.3);
    line-height: 1;
}

/* Effect 5: Payment success �?green checkmark on table card */
@keyframes tableSuccessCheck {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.table-success-effect {
    font-size: 2rem;
    animation: tableSuccessCheck 1.8s ease-out forwards;
    text-shadow: 0 0 16px rgba(var(--theme-accent-rgb), 0.7), 0 0 32px rgba(var(--theme-accent-rgb), 0.3);
    line-height: 1;
}

.fab-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 50;
}

.fab {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--theme-accent);
    /* default contrast = accent-contrast (auto-picks black/white per theme).
       each .fab-{variant} below can override --fab-icon-color for its own bg. */
    --fab-icon-color: var(--theme-accent-contrast);
    color: var(--fab-icon-color);
    border: none;
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Operations-page right-side FABs always use solid white icons regardless of
   theme (user-explicit brand direction). The previous --fab-icon-color
   indirection let the icon go dark on bright bgs per WCAG, but the brand
   convention here is white-icon-on-colored-circle (notification pink, POS
   blue, add-member orange, bookings lime, sound red). */
.fab > i,
.fab > i.bi,
.fab > svg,
.fab > svg path,
.fab > svg rect,
.fab > svg circle {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}
/* <img> icons (e.g. .fab-orange notification scanner) — CSS `color` doesn't
   affect bitmap/SVG-file pixels, so force them to render solid white via a
   filter: brightness(0) inverts dark→white, invert(1) maps black→white.
   -webkit-filter for Safari ≤ 9 (paranoia: modern Safari supports unprefixed). */
.fab > img {
    -webkit-filter: brightness(0) invert(1) !important;
    filter: brightness(0) invert(1) !important;
}

.fab:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* [REMOVED] .fab-blue — dead CSS removed 2026-03-16 */

.fab-orange {
    background: var(--theme-fab-highlight);
    --fab-icon-color: var(--theme-fab-highlight-contrast);
    color: var(--fab-icon-color);
}

.fab-pos {
    background: var(--theme-info);
    --fab-icon-color: var(--theme-info-contrast);
    color: var(--fab-icon-color);
}

/* FR#65 pt3 running tabs. Rides the audited purple pair rather than a new hardcoded
   colour: --theme-purple-contrast is picked per theme by _bestTextOn() in
   theme/js/theme-colors.js, and --theme-purple-fill-hover darkens the FILL only, which
   is the pattern that fixed the 2026-08-27 contrast sweep. A literal here would fail AA
   on the light themes exactly as the 26 hardcoded #fff rules did. */
.fab-tabs {
    background: var(--theme-purple);
    --fab-icon-color: var(--theme-purple-contrast);
    color: var(--fab-icon-color);
}
.fab-tabs:hover {
    background: var(--theme-purple-fill-hover);
}

.fab-add-member {
    background: var(--theme-orange);
    --fab-icon-color: var(--theme-orange-contrast);
    color: var(--fab-icon-color);
}
.fab-add-member:hover {
    background: var(--theme-orange-hover);
}

.fab-bookings {
    background: var(--theme-fab-bookings);
    border-color: var(--theme-fab-bookings);
    /* Morandi-blended dark text against the actual lime bg per theme. */
    --fab-icon-color: var(--theme-fab-bookings-contrast);
    color: var(--fab-icon-color);
}
.fab-bookings:hover {
    background: var(--theme-fab-bookings-hover);
    border-color: var(--theme-fab-bookings-hover);
}

/* Tournament Host Console form helpers */
.tc-l { display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; color:var(--theme-text-secondary); flex:1; margin-bottom:.6rem; }
.tc-l input, .tc-l select, .tc-l textarea { width:100%; }
.tc-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.tc-row .tc-l { min-width:180px; }
.tc-check { display:flex; align-items:center; gap:.5rem; font-size:.88rem; cursor:pointer; }
.tc-inline { display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }

/* Tournaments FAB — gold trophy, sits above the Bookings FAB. */
.fab-tournaments {
    background: var(--theme-fab-tournaments);
    border-color: var(--theme-fab-tournaments);
    /* Morandi-blended dark/light icon picked by WCAG against the actual gold bg,
       exactly like every sibling FAB. */
    --fab-icon-color: var(--theme-fab-tournaments-contrast);
    color: var(--fab-icon-color);
}
.fab-tournaments:hover {
    background: var(--theme-fab-tournaments-hover);
    border-color: var(--theme-fab-tournaments-hover);
}

.fab-sound {
    background: var(--theme-fab-sound);
    /* Morandi-blended bright text against the actual red bg per theme. */
    --fab-icon-color: var(--theme-fab-sound-contrast);
    color: var(--fab-icon-color);
}

.fab-settings {
    background: var(--theme-muted-bg);
    /* Muted bg follows card lightness — text-bright is Morandi-tinted per theme. */
    --fab-icon-color: var(--theme-text-bright);
    color: var(--fab-icon-color);
    display: none; /* Hide by default */
}

/* ─────────────────────────────────────────────────────────────────────────
   Global Pulse: admin-only FAB (sits next to gear settings).

   Visual concept: a polished gold "coin" with a slowly orbiting dashed ring,
   matching the cinematic 3D-earth page it opens. The metallic sheen reads
   as "premium/admin tool" against the green operations theme, while the
   orbit ring telegraphs the live, rotating-globe nature of the destination.
   Visibility is server-gated in operations-page.php (admins only) so the
   element is never even emitted into a non-admin DOM.
   ───────────────────────────────────────────────────────────────────────── */
.fab-global-pulse {
    /* Brushed-gold radial gradient with an off-axis highlight — gives the
       button physical depth without requiring an image. */
    background:
        radial-gradient(circle at 30% 25%, #ffeab8 0%, #f4b942 42%, #a36c0e 100%);
    color: #fff;
    border: none !important;
    position: relative;
    overflow: visible;
    /* Layered shadows: inner highlight (top edge gloss) + inner shadow
       (bottom edge crease) + outer amber glow + crisp 1px ring. */
    box-shadow:
        inset 0  1px 0   rgba(255, 255, 255, 0.55),
        inset 0 -2px 6px rgba(120,  70, 5,  0.35),
        0 6px 18px -6px rgba(244, 185, 66, 0.55),
        0 0 0 1px rgba(244, 185, 66, 0.55);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.fab-global-pulse i { color: #fff; } /* legacy fallback if a future caller swaps the SVG */
.fab-global-pulse-icon {
    /* Bespoke inline SVG glyph — drop-shadow is on the SVG so each stroke
       gets the shadow, not just the icon's bounding box. */
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(60, 35, 0, 0.45));
    position: relative;
    z-index: 2;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.fab-global-pulse:hover .fab-global-pulse-icon {
    /* Tiny tilt on hover — feels like the planet is acknowledging you */
    transform: rotate(-8deg);
}
/* Orbiting dashed ring — sits 6px outside the button, rotates slowly so the
   motion is felt rather than seen. Hover speeds it up to reinforce intent. */
.fab-global-pulse::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 1px dashed rgba(244, 185, 66, 0.65);
    animation: fabGlobalPulseOrbit 9s linear infinite;
    pointer-events: none;
}
/* Soft halo that fades in on hover */
.fab-global-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 222, 150, 0.45), transparent 65%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 0;
}
.fab-global-pulse:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0  1px 0   rgba(255, 255, 255, 0.65),
        inset 0 -2px 6px rgba(120,  70, 5,  0.35),
        0 10px 24px -8px rgba(244, 185, 66, 0.85),
        0 0 0 1px rgba(244, 185, 66, 0.9);
}
.fab-global-pulse:hover::before { animation-duration: 3.5s; }
.fab-global-pulse:hover::after  { opacity: 1; }
.fab-global-pulse:active        { transform: translateY(0); }

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

.table-page-fab-container {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 50;
    max-height: calc(100vh - 7rem);
    overflow: visible;
}

/* Shrink zone pills on short viewports to prevent overflow */
@media (max-height: 650px) {
    .table-page-fab,
    .zone-pill-fab {
        width: 38px;
        height: 38px;
        font-size: 0.55rem;
    }
    .zone-pill-indicator {
        width: 38px;
        height: 38px;
    }
    .table-page-fab-container {
        gap: 0.35rem;
    }
}

/* Flying pill indicator �?absolutely positioned in container, animates top */
.zone-pill-indicator {
    position: absolute;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--theme-accent, #22c55e);
    box-shadow: 0 2px 12px rgba(var(--theme-accent-rgb), 0.4);
    pointer-events: none;
    z-index: 0;
    transition: top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* @DEPRECATED .zone-pill-slider �?replaced by .zone-pill-indicator */
.zone-pill-slider {
    display: none !important;
}

.zone-pill-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.zone-pill-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.zone-pill-dots .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--theme-accent, #22c55e);
    animation: dot-bounce 1.4s infinite ease-in-out both;
}

.zone-pill-dots .dot:nth-child(1) { animation-delay: 0s; }
.zone-pill-dots .dot:nth-child(2) { animation-delay: 0.16s; }
.zone-pill-dots .dot:nth-child(3) { animation-delay: 0.32s; }

.table-page-fab,
.zone-pill-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--theme-card);
    color: var(--theme-accent);
    border: 2px solid var(--theme-accent);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    word-break: break-word;
    position: relative;
    z-index: 1;
}

.table-page-fab:hover,
.zone-pill-fab:hover {
    transform: scale(1.08);
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-color: var(--theme-accent);
    color: var(--theme-text-bright);
}

.table-page-fab:hover {
    color: var(--theme-accent-contrast);
}

.table-page-fab-active,
.zone-pill-fab-active {
    background: transparent !important;
    /* Theme-tinted bright text (was hardcoded #fff which went invisible on light themes). */
    color: var(--theme-text-bright) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.zone-pill-fab-active:hover {
    transform: scale(1.08);
    background: transparent !important;
}



/* iOS-style page swipe viewport */
.tables-viewport {
    /* Static state: extend visible region by 30px so card hover shadows render fully
       on the .card base instead of being clipped at edges. Fallback for pre-2022
       browsers (no clip-margin support) keeps overflow:hidden behavior. */
    overflow: hidden;
    overflow: clip;
    overflow-clip-margin: 30px;
    position: relative;
    width: 100%;
}
/* Active swipe / drag / rubber-band: shrink clip back to viewport edge so the
   off-screen panel (or shifted panelA) does not peek past the edge. JS toggles
   .is-swipe-active in page-swipe.js at all swipe entry/exit points. */
.tables-viewport.is-swipe-active {
    overflow-clip-margin: 0px;
}

.tables-slider-track {
    display: flex;
    width: 200%;
    will-change: transform;
}

.tables-panel {
    width: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Display mode chip selector */
/* @DEPRECATED .display-mode-chip �?removed with page mode display feature */

.fab-notification {
    background: var(--theme-fab-notification);
    --fab-icon-color: var(--theme-fab-notification-contrast);
    color: var(--fab-icon-color);
    position: relative;
}

.notification-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--theme-danger);
    color: var(--theme-danger-contrast);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
}

.fab-chat {
    background: var(--theme-fab-chat);
    --fab-icon-color: var(--theme-fab-chat-contrast);
    color: var(--fab-icon-color);
    display: none; /* Hide by default */
}

/* Camera mirror */
.camera-mirrored {
    transform: scaleX(-1);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-overlay-dim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10000 !important;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    /* 2026-08-13: the overlay is itself a scroll container, so a wheel or touch
       that reaches its end used to chain straight through to the page behind it.
       Contain keeps the gesture inside the modal. Behaviour only, no visual
       change. Pairs with the global lock in shared/js/modal-scroll-lock.js. */
    overscroll-behavior: contain;
    /* Block all CSS transitions on the modal overlay �?backdrop-filter:blur is
       expensive to animate and any inherited/accidental transition:all would
       cause continuous GPU repaint on every modal open/close. CSS animations
       (glass-opening / glass-closing @keyframes) are unaffected by this. */
    transition: none !important;
}

/* Reusable confirmation/sub-modal overlay �?see-through dim with frosted blur */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: var(--theme-overlay-dim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
}
.confirm-overlay[style*="flex"] {
    display: flex !important;
}

/* POS modal must layer above splitBillGameModal & fnbModal (opened on top without hiding game modal) */
#posModal {
    z-index: 10030 !important;
}

/* Invoice-related modals must layer above splitBillGameModal & fnbModal & posModal */
#invoiceModal {
    z-index: 10050 !important;
}
#invoicePaymentModal {
    z-index: 10100 !important;
}
#invoicePaymentModal .modal-content {
    border: none !important;
}
#proformaPreviewModal {
    z-index: 10060 !important;
}
#editInvoiceModal {
    z-index: 10060 !important;
}
#editPaymentMethodModalV2,
#editPaymentMethodModal {
    z-index: 10060 !important;
}
/* Bug #396: Correct Payment Split (FR#47) can now be opened from #invoiceModal, which sits at
   10050. Left at the 10000 base it would open BEHIND the invoice and be unreachable. 10060 is the
   value every other modal opened from the invoice modal already uses. Raising it cannot regress
   the payment-success entry point, whose host modal sits at the 10000 base. */
#tenderRestateModal {
    z-index: 10060 !important;
}

/* Ensure modal uses flex display when shown */
.modal[style*="block"], .modal[style*="flex"] {
    display: flex !important;
}

/* Modals with Tabs - Full height with margin for consistent sizing */
#splitBillGameModal .modal-content,
#rentalGameModal .modal-content,
#viewCountingUpTableModal .modal-content,
#viewCountingDownTableModal .modal-content,
#settingsModal .modal-content,
#transactionModal .modal-content,
#tableInvoiceHistoryModal .modal-content,
#posModal .modal-content,
#fnbModal .modal-content,
#systemLogsModal .modal-content,
#organizationModal .modal-content,
#adminModal .modal-content,
#clientModal .modal-content,
#employeeModal .modal-content,
#centerModal .modal-content,
#campaignModal .modal-content,
#membershipModal .modal-content,
#memberModal .modal-content,
#faceSearchModal .modal-content,
#announcementModal .modal-content,
#bookingsListModal .modal-content,
#bookingCalendarModal .modal-content {
    height: calc(100vh - 40px);
    margin: 20px auto;
}

/* V2 modal width �?large modals */
#splitBillGameModal .modal-content,
#rentalGameModal .modal-content,
#tableInvoiceHistoryModal .modal-content,
#posModal .modal-content,
#fnbModal .modal-content,
#organizationModal .modal-content,
#centerModal .modal-content,
#clientModal .modal-content,
#campaignModal .modal-content,
#memberModal .modal-content,
#faceSearchModal .modal-content {
    width: 1080px !important;
}

/* Bookings modal widths */
#bookingsListModal .modal-content {
    width: 1200px !important;
}
#bookingCalendarModal .modal-content {
    width: 95vw !important;
    max-width: 1400px;
}

#splitBillGameModal .modal-body,
#rentalGameModal .modal-body,
#viewCountingUpTableModal .modal-body,
#viewCountingDownTableModal .modal-body,
#settingsModal .modal-body,
#transactionModal .modal-body,
#fnbModal .modal-body,
#systemLogsModal .modal-body,
#organizationModal .modal-body,
#adminModal .modal-body,
#clientModal .modal-body,
#employeeModal .modal-body,
#centerModal .modal-body,
#campaignModal .modal-body,
#memberModal .modal-body,
#announcementModal .modal-body,
#bookingsListModal .modal-body,
#bookingCalendarModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0;
}

#membershipModal .modal-body {
    flex: 1;
    overflow-y: auto;
}

/* V2 game + FnB modals �?slightly lighter body background */
#splitBillGameModal .modal-body,
#rentalGameModal .modal-body,
#fnbModal .modal-body {
    background: var(--theme-body);
}

#posModal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

#tableInvoiceHistoryModal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#tableInvoiceHistoryModal .data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-content {
    background: var(--theme-modal-bg);
    margin: 1rem auto;
    border-radius: 8px;
    max-width: 95vw;
    width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid var(--theme-accent);
    display: flex;
    flex-direction: column;
    position: relative; /* enables app-loader-overlay--scoped to scope to modal-content */
}

/* ===== Modal Styling �?All Modals ===== */
.modal .modal-content {
    background: var(--theme-modal-bg);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--theme-accent-rgb), 0.08),
        inset 0 1px 0 var(--theme-glass-shine);
}

.modal .modal-header {
    background: var(--theme-card);
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.2);
}

.modal .modal-footer {
    background: var(--theme-card);
    border-top: 1px solid rgba(var(--theme-accent-rgb), 0.2);
}

.modal .modal-content .tabs,
.modal .modal-content.has-sticky-tabs .tabs {
    background: var(--theme-body);
}
/* --- Open/close animation (overlay �?content animated via JS)
   Timings here match modal-glass.js OPEN_DURATION (420ms) and
   CLOSE_DURATION (260ms) so the overlay fade syncs with the content
   genie-zoom. iOS-style easing: slight overshoot on open, sharp pull-in
   on close. --- */
@keyframes glassOverlayOpen {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes glassOverlayClose {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.modal.glass-opening {
    animation: glassOverlayOpen 0.32s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.modal.glass-closing {
    animation: glassOverlayClose 0.20s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
/* --- iOS app-icon "press-down" effect on the card that launched the modal.
   Runs in parallel with the overlay fade-in so the card briefly dips as
   the content zooms out of it �?like tapping an icon on the home screen. */
@keyframes glassCardPress {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.table-card.glass-press-down,
.fnb-card.glass-press-down,
.rental-card.glass-press-down {
    animation: glassCardPress 0.26s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 2;
    position: relative;
    will-change: transform;
}

/* --- Card landing effect after modal closes back into card (iOS "receive" glow) --- */
@keyframes glassCardLand {
    0% {
        transform: scale(1.05);
        box-shadow: 0 0 14px rgba(var(--theme-accent-rgb), 0.40);
    }
    40% {
        transform: scale(0.99);
        box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.22);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.table-card.glass-land,
.fnb-card.glass-land,
.rental-card.glass-land {
    animation: glassCardLand 0.38s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    z-index: 2;
    position: relative;
}
/* ===== End Glassmorphism ===== */

.modal-content.has-sticky-tabs .modal-header {
    border-bottom: 1px solid var(--theme-accent);
    padding-bottom: 1rem;
}

.modal-content.has-sticky-tabs .modal-body {
    padding-top: 0;
}

.modal-content.has-sticky-tabs .tabs {
    position: sticky;
    top: 0;
    background: var(--theme-body);
    z-index: 10;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    margin: 0;
    padding: 12px 0 10px 0;
    flex-wrap: wrap;
    overflow-x: hidden;
}

.modal-content.has-sticky-tabs .tabs .tab-btn {
    font-size: 0.75rem;
    padding: 0.45rem 0.65rem;
}

.modal-content.has-sticky-tabs .modal-body {
    font-size: 0.8rem;
}

.modal-content.has-sticky-tabs .modal-body label,
.modal-content.has-sticky-tabs .modal-body input,
.modal-content.has-sticky-tabs .modal-body select,
.modal-content.has-sticky-tabs .modal-body textarea,
.modal-content.has-sticky-tabs .modal-body button,
.modal-content.has-sticky-tabs .modal-body .btn {
    font-size: 0.8rem;
}

.modal-content.has-sticky-tabs .modal-body h4,
.modal-content.has-sticky-tabs .modal-body h5 {
    font-size: 0.9rem;
}

.modal-content .tabs {
    position: sticky;
    top: 0;
    background: var(--theme-body);
    z-index: 10;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    margin: 0;
    padding: 12px 0 10px 0;
    border-top: none;
}

.modal-content-large {
    width: 1080px !important;
    max-height: 85vh;
}

/* V2 modals use fixed 85vh height so short content doesn't shrink the panel */
.modal[data-ui-version="v2"] .modal-content-large {
    height: 85vh;
}

/* Receipt/invoice preview modals �?fixed 90vh height, 80mm content centered */
.modal-content-large.modal-receipt-preview {
    height: 90vh;
    max-height: 90vh;
}
/* Receipt-preview body: horizontally centered 80mm content. Vertical
   alignment uses `safe center` so SHORT content centers (nice for tiny
   slips) while TALL content (long rental invoices, deposit slips with
   many rows, etc.) anchors to the top and is fully scrollable WITHOUT
   the flexbox-overflow clip bug that swallows the top of the receipt
   when align-items:center is used with overflow-y:auto.
   Older browsers fall back to `center` (still functional, with the clip
   bug). Padding gives breathing room around the receipt edges. */
.modal-receipt-preview .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: safe center;
    justify-content: safe center;
    padding: 20px;
}

.modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--theme-accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-card);
}

.modal-header h3 {
    color: var(--theme-text-heading);
    font-size: 1.2rem;
    font-weight: 600;
}

.close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.close:hover {
    color: var(--theme-danger-muted);
}

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

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    /* Removed position:fixed/width/height - they break sticky positioning and cause layout shift */
}

.modal-content.has-sticky-tabs .modal-body {
    padding: 0 1rem 1rem 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-content.has-sticky-tabs .tab-content {
    padding-top: 1rem;
}

.modal-footer {
    padding: 1rem;
    border-top: 1px solid var(--theme-accent);
    background: var(--theme-card);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    /* Now that a footer can wrap to several rows it must never be the thing that gets
       compressed inside the flex column of .modal-content (max-height 90vh, overflow
       hidden). Without this the footer could be squashed and clipped on short viewports,
       e.g. a landscape phone or an open on-screen keyboard. */
    flex-shrink: 0;
    /* Bug #358 family: pinned to nowrap, a footer with one action too many pushed
       its last buttons past the shell edge where they were clipped and unreachable.
       Measured across 98 footers at 760/1100/1400px shells, wrapping changes no
       geometry at all, because it only engages once the buttons no longer fit. */
    flex-wrap: wrap;
    row-gap: 0.8rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--theme-text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* @DEPRECATED �?Old 3-column POS layout (replaced by pos-v2-layout) */
/* .pos-content, .pos-categories, .pos-items, .pos-invoice �?replaced by pos-v2-* classes */

/* ============================================================
   POS V2 �?4-Column Flex Layout with Resizable Panels
   ============================================================ */
.pos-v2-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.pos-v2-categories {
    width: var(--pos-p1-width, 120px);
    min-width: 60px;
    flex-shrink: 0;
    padding: 0.6rem;
    overflow-y: auto;
    border-right: 1px solid rgba(var(--theme-accent-rgb), 0.15);
}

.pos-v2-items {
    width: var(--pos-p2-width, 200px);
    min-width: 100px;
    flex-shrink: 0;
    padding: 0.6rem;
    overflow-y: auto;
    border-right: 1px solid rgba(var(--theme-accent-rgb), 0.15);
}

.pos-v2-cart {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    padding: 0.6rem;
    overflow-y: auto;
    border-right: 1px solid rgba(var(--theme-accent-rgb), 0.15);
}

.pos-v2-right {
    width: 290px;
    min-width: 290px;
    max-width: 290px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem;
    padding-bottom: 0;
    overflow: hidden;
}
/* Scroll wrapper so paymentMethodSection sticks at the bottom of .pos-v2-right
   (matches .v2-split-right-scroll / .fnb-right-scroll pattern) */
.pos-v2-right-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* POS Resizer �?drag handle between panels (matches FnB pattern) */
.pos-resizer {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: background 0.15s;
}
.pos-resizer:hover,
.pos-resizer.active {
    background: rgba(var(--theme-accent-rgb), 0.4);
}
.pos-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 28px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    transition: background 0.15s;
}
.pos-resizer:hover::after,
.pos-resizer.active::after {
    background: rgba(var(--theme-accent-rgb), 0.6);
}

.category-btn {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.3rem;
    background: var(--theme-body);
    border: none;
    color: var(--theme-text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.category-btn:hover,
.category-btn.active {
    background: var(--theme-accent);
    color: var(--theme-overlay-subtle);
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.item-card {
    background: var(--theme-body);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    border-radius: 6px;
    padding: 0.6rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

.item-card:hover {
    background: var(--theme-body);
    border-color: var(--theme-accent);
}

.invoice-items {
    flex: 1;
    overflow-y: auto;
}

.invoice-item {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    font-size: 0.78rem;
}

.invoice-total {
    padding: 0.6rem 0;
    border-top: 1px dashed var(--theme-accent);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-accent);
    text-align: center;
}

/* ============================================================
   Document Designer �?Two-Panel Layout (POS-inspired)
   ============================================================ */
.doc-designer-layout {
    display: flex;
    height: calc(100% - 0px);
    min-height: 400px;
    overflow: hidden;
}

.doc-designer-preview-panel {
    display: flex;
    flex-direction: column;
    min-width: 330px;
    overflow: hidden;
    padding: 0.6rem;
}

.doc-designer-divider {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: rgba(var(--theme-accent-rgb), 0.15);
    transition: background 0.15s;
    flex-shrink: 0;
}
.doc-designer-divider:hover,
.doc-designer-divider.dragging {
    background: rgba(var(--theme-accent-rgb), 0.5);
}

.doc-designer-settings-panel {
    flex: 1;
    min-width: 280px;
    overflow-y: auto;
    padding: 0.6rem;
}

/* Preview Tabs �?chip style */
.doc-designer-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}
.doc-designer-preview-tab {
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 9999px;
    color: var(--theme-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.doc-designer-preview-tab:hover {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}
.doc-designer-preview-tab.active {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-overlay-subtle);
}

/* Preview Scroll Container */
.doc-designer-preview-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

/* 80mm Receipt Preview �?wrapper for the .t container */
.doc-designer-preview-receipt {
    min-height: 200px;
    align-self: flex-start;
    flex-shrink: 0;
}
/* Paper look �?exact same sizing as real 80mm invoice, rendered in iframe for isolation */
.doc-designer-preview-receipt {
    min-height: 200px;
    align-self: flex-start;
    flex-shrink: 0;
}
.doc-designer-preview-receipt iframe {
    border: none;
    width: 80mm;
    min-height: 400px;
    display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border-radius: 2px;
    background: #fff;
}

/* Settings Cards (POS style) */
.doc-designer-card {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb),0.08) 0%, rgba(var(--theme-accent-rgb),0.03) 100%);
    border: 1px solid rgba(var(--theme-accent-rgb),0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
}
.doc-designer-card-title {
    color: var(--theme-text-heading);
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 0.6rem 0;
}
.doc-designer-label {
    display: block;
    font-size: 0.78rem;
    color: var(--theme-text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.doc-designer-input {
    width: 100%;
    padding: 0.3rem 0.5rem;
    background: var(--theme-overlay-subtle);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 4px;
    color: var(--theme-text-primary);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.15s;
}
.doc-designer-input:focus {
    border-color: var(--theme-accent);
}
.doc-designer-checkbox-row {
    font-size: 0.82rem;
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--theme-accent);
    margin-bottom: 1rem;
    gap: 0.2rem;
    overflow-x: auto;
}

.tab-btn {
    padding: 0.6rem 0.8rem;
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tab-btn:hover,
.tab-btn.active {
    color: var(--theme-accent);
    border-bottom-color: var(--theme-accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.page-content {
    display: none;
}

.page-content.active {
    display: block;
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        height: auto;
        padding: 0.8rem;
        gap: 0.8rem;
    }
    
    .nav-links {
        /* Back to normal flow on mobile (logo stacks above the tabs) */
        position: static;
        left: auto;
        transform: none;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
    }
    
    .nav-links a {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .filters-container {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 0.8rem;
    }
    
    .container {
        padding: 0.8rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .card-header {
        flex-direction: column;
        gap: 0.8rem;
        align-items: stretch;
    }
    
    .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.8rem;
    }
    
.pos-content {
    display: grid;
    grid-template-columns: 120px 1fr 200px;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}
    
    .data-table {
        font-size: 0.75rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }
    
    .fab {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    .modal-content {
        margin: 0.5rem auto;
        max-width: 98vw;
        width: 95vw;
        max-height: 95vh;
    }
    
    .tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.6rem;
    }

    .modal-footer {
        gap: 0.8rem;
        row-gap: 0.6rem;
        /* Was nowrap !important, which on a 360px phone clipped buttons off the
           edge of 16 modals (the invoice footer lost 324px of actions, including
           Close and Make Payment). min-width:0 lets the action group shrink so its
           buttons wrap instead of overflowing. */
        flex-wrap: wrap !important;
    }
    
    .modal-footer > div {
        gap: 0.8rem;
        justify-content: center;
        flex-wrap: wrap !important;
        min-width: 0;
    }
    
    .modal-footer .btn {
        /* !important because the unconditioned `.modal-footer .btn { min-width: 120px }`
           further down this file has the SAME specificity and wins on source order, so this
           100px floor never applied on a phone. That cost a whole extra row on every wrapped
           footer at 360px, which is precisely where the room is scarcest. */
        min-width: 100px !important;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

 .data-table .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
        min-width: 50px;
    }
    
    .data-table td:last-child > div {
        gap: 0.3rem !important;
    }
    
    .data-table td:last-child {
        padding: 0.8rem 0.5rem;
    }


}

@media (max-width: 480px) {
    .nav-links a {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.4rem;
        font-size: 0.7rem;
    }
    
    .table-card {
        padding: 0.8rem;
    }
    
    .table-number {
        font-size: 1rem;
    }
    
    .table-timer {
        font-size: 1.1rem;
    }
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--theme-overlay-subtle);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 4px;
    border: 1px solid var(--theme-body);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-hover);
}

::-webkit-scrollbar-corner {
    background: var(--theme-overlay-subtle);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent) var(--theme-overlay-subtle);
}


.tabs {
    display: flex;
    border-bottom: 1px solid var(--theme-accent);
    margin-bottom: 1rem;
    gap: 0.2rem;
    overflow-x: auto;
    align-items: center;
}

.table-card.maintenance {
    border-color: var(--theme-orange);
}

.table-card.inactive {
    border-color: var(--theme-border);
    opacity: 0.6;
}

.table-card.maintenance .table-timer,
.table-card.inactive .table-timer {
    color: var(--theme-orange);
    font-size: 0.9rem;
}

.pos-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    font-size: 0.85rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.quantity-btn {
    background: none;
    border: 1px solid var(--theme-accent);
    color: var(--theme-accent);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.remove-btn {
    border-color: var(--theme-danger);
    color: var(--theme-danger);
}

.remove-btn:hover {
    background: rgba(var(--theme-danger-rgb), 0.1);
}

.items-tab-content {
    min-height: 400px;
}

.stock-warning {
    color: var(--theme-danger) !important;
    font-weight: 600;
}

.stock-ok {
    color: var(--theme-accent) !important;
}

.payment-method-btn {
    background: var(--theme-card);
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--theme-text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.payment-method-btn:hover {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.payment-method-btn.selected {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--theme-accent);
}

.payment-method-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--theme-danger);
}

.payment-method-btn:disabled:hover {
    border-color: var(--theme-danger);
    background: var(--theme-card);
}


.modal-footer > div {
    display: flex;
    gap: 1rem;
    /* See .modal-footer above: wrap plus min-width:0 so a nested action group can
       shrink into the footer and break onto a second row instead of overflowing. */
    flex-wrap: wrap;
    min-width: 0;
    /* Grow to fill its flex line. Roughly 20 footers use justify-content: space-between,
       and once the row wraps, a line holding a single item resolves that to flex-start,
       which threw the whole action group (the confirm/primary button included) to the
       bottom LEFT while the secondary button stayed top right. Filling the line lets the
       flex-end below right-align the buttons as intended. Inert when nothing wraps. */
    flex: 1 1 auto;
    justify-content: flex-end;
}

.modal-footer .btn {
    min-width: 120px;
    white-space: nowrap;
}


/* Invoice Preview Styles */
.invoice-preview {
    background: white;
    color: black;
    border: 1px solid #ddd;
    margin: 1rem 0;
    font-family: 'Courier New', monospace;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-80mm {
    width: 80mm;
    max-width: 80mm;
    font-size: 11px;
    line-height: 1.2;
    margin: 0 auto;
}

.invoice-preview-58mm {
    width: 58mm;
    max-width: 58mm;
    font-size: 9px;
    line-height: 1.1;
    margin: 0 auto;
}

.invoice-preview-a4 {
    width: 210mm;
    max-width: 500px;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 auto;
}

.invoice-header {
    text-align: center;
    border-bottom: 1px dashed #000;
    padding: 8px;
    margin-bottom: 10px;
}

.invoice-business-name {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 4px;
}

.invoice-info-section {
    margin-bottom: 10px;
    font-size: 0.95em;
}

.invoice-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 0 8px;
}

.invoice-items-section {
    border-top: 1px dashed #000;
    padding-top: 8px;
    margin: 10px 0;
}

.invoice-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    padding: 0 8px;
    font-size: 0.9em;
}

.invoice-totals-section {
    border-top: 1px dashed #000;
    padding-top: 8px;
    margin-top: 10px;
}

.invoice-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 0 8px;
    font-size: 0.9em;
}

.invoice-final-total {
    border-top: 1px dashed #000;
    padding-top: 4px;
    font-weight: bold;
    font-size: 1.1em;
}

.invoice-footer {
    text-align: center;
    margin-top: 15px;
    padding-top: 8px;
    border-top: 1px dashed #000;
    font-size: 0.8em;
    padding: 8px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

#invoiceDisplayContainer {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent) var(--theme-card);
}

#invoiceDisplayContainer::-webkit-scrollbar {
    width: 8px;
}

#invoiceDisplayContainer::-webkit-scrollbar-track {
    background: var(--theme-card);
    border-radius: 4px;
}

#invoiceDisplayContainer::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 4px;
}

#invoiceDisplayContainer .header {
    text-align: center;
    border-bottom: 1px dashed #000;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#invoiceDisplayContainer .final-total {
    border-top: 1px dashed #000;
    padding-top: 5px;
    font-weight: bold;
    font-size: 14px;
}

.items-subtabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--theme-overlay-subtle);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--theme-border-subtle);
}

.items-subtab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--theme-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.items-subtab-btn:hover {
    color: var(--theme-text-secondary);
    background: rgba(var(--theme-accent-rgb), 0.06);
}

.items-subtab-btn.active {
    background: var(--theme-surface-hover);
    color: var(--theme-accent);
    box-shadow: 0 2px 12px rgba(var(--theme-accent-rgb), 0.15), inset 0 1px 0 rgba(var(--theme-accent-rgb), 0.1);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
}

.items-subtab-btn.active::after {
    display: none;
}

.subtab-icon {
    font-size: 1.25rem;
    filter: grayscale(1) brightness(0.7);
    transition: all 0.25s ease;
    flex-shrink: 0;
    margin-bottom: 0;
}

.items-subtab-btn:hover .subtab-icon {
    filter: grayscale(0.5) brightness(0.9);
}

.items-subtab-btn.active .subtab-icon {
    filter: grayscale(0);
}

.subtab-label {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0;
    white-space: nowrap;
}

.items-subtab-btn.active .subtab-label {
    color: var(--theme-text-heading);
}

.subtab-description {
    display: none;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .items-subtabs {
        border-radius: 10px;
        padding: 3px;
    }

    .items-subtab-btn {
        padding: 10px 8px;
        gap: 6px;
    }

    .subtab-icon {
        font-size: 1.1rem;
    }

    .subtab-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .subtab-label {
        display: none;
    }

    .subtab-icon {
        font-size: 1.3rem;
    }
}

/* Animation for tab content switching */
.tab-content {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.tab-content.active {
    opacity: 1;
    transform: translateY(0);
}

.stats-card {
    background: var(--theme-card);
    border: 1px solid var(--theme-accent);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.stats-label {
    color: var(--theme-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.stats-value {
    color: var(--theme-accent);
    font-size: 1.5rem;
    font-weight: 700;
}

.member-credit-balance {
    transition: background-color 0.3s ease;
}

.credit-deduction-highlight {
    background-color: var(--theme-warning-bg) !important;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.table-timer.pay-status {
    background-color: var(--theme-danger-bg);
    color: var(--theme-danger);
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    animation: blink 1s infinite;
}

.table-card.checkedout {
    background: var(--theme-danger-bg);
    border-color: var(--theme-danger) !important;
}

.table-card.checkedout .table-timer {
    color: var(--theme-danger) !important;
    font-weight: bold;
    animation: blink 1s infinite;
}

/* Danger Zone Styling */
.danger-zone {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--theme-disabled-border);
    text-align: center;
}

.danger-zone h3 {
    color: var(--theme-danger-muted);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.danger-zone p {
    color: var(--theme-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.danger-zone .btn-danger {
    background: var(--theme-danger);
    border: 1px solid var(--theme-danger);
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.danger-zone .btn-danger:hover {
    background: var(--theme-danger-hover);
    border-color: var(--theme-danger-hover);
    transform: translateY(-1px);
}

/* Enhanced modal styles for new 6-modal system */
.modal-content-large {
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
}

.has-sticky-tabs {
    position: relative;
}

.has-sticky-tabs .tabs {
    position: sticky;
    top: 0;
    background: var(--theme-overlay-subtle);
    z-index: 10;
    border-bottom: 1px solid var(--theme-accent);
    padding: 0 0 10px 0;
    margin-bottom: 20px;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--theme-accent);
    padding-bottom: 0.5rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.tab-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

.tab-btn.active {
    background: var(--theme-accent-fill);
    border-color: var(--theme-accent);
    /* Was --theme-overlay-dark, which derives to rgba(0,0,0,0.5) on the five light
       presets — a 50%-opaque black label on the dark navy accent, 1.64:1. Uses the
       same accent-contrast pair as every other accent-filled surface. */
    color: var(--theme-accent-contrast);
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.payment-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--theme-card);
    border: 2px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 80px;
}

.payment-method-btn:hover {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.payment-method-btn.selected {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--theme-accent);
}

.package-selection-card {
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-warning-bg);
}

.package-selection-card:hover {
    border-color: var(--theme-warning-hover);
    background: rgba(146, 96, 15, 0.08);
}

.package-selection-card.selected {
    border-color: var(--theme-warning-hover);
    background: rgba(146, 96, 15, 0.15);
}

/* Responsive design for modals */
@media (max-width: 768px) {
    .modal-content-large {
        width: 95%;
        max-height: 95vh;
    }
    .tabs {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .tab-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .payment-method-btn {
        min-height: 60px;
        padding: 0.5rem;
    }
}

/* Enhanced form styling for new modals */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--theme-text-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--theme-card);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.2);
}

.form-input:readonly {
    background: var(--theme-input-bg);
    color: var(--theme-text-muted);
    cursor: not-allowed;
}

/* Button styling consistency */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: var(--theme-info);
    color: var(--theme-info-contrast);
}

.btn-primary:hover {
    background: var(--theme-info-fill-hover);
}

.btn-success {
    background: var(--theme-accent-fill);
    /* Back on --theme-accent-contrast. The earlier hardcoded #fff was chosen to
       match the white-on-red Close button, but white on the Classic Baize accent
       (#22c55e) is 2.28:1 — under AA for normal text (4.5:1) and under even the
       large-text bar (3:1). The white label is kept on Classic Baize and paid for
       on the FILL instead: the background is --theme-accent-fill (#17853f, 4.71:1),
       while --theme-accent keeps #22c55e for borders, rings and chart series. */
    color: var(--theme-accent-contrast);
}

.btn-success:hover {
    background: var(--theme-accent-fill-hover);
}

.btn-secondary {
    background: var(--theme-border);
    color: var(--theme-border-contrast);
}

.btn-secondary:hover {
    background: var(--theme-border-fill-hover);
}

.btn-danger {
    background: var(--theme-danger);
    color: var(--theme-danger-contrast);
}

.btn-danger:hover {
    background: var(--theme-danger-fill-hover);
}

.btn-info {
    background: var(--theme-cyan-hover);
    color: var(--theme-cyan-hover-contrast);
}

.btn-info:hover {
    background: var(--theme-cyan-fill-hover);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn:disabled {
    background: var(--theme-disabled-border);
    color: var(--theme-text-muted);
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: var(--theme-disabled-border);
}


/* Reset any default margins/padding that might interfere */
.login-page {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Input focus effects */
.login-input:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb), 0.15) !important;
    outline: none !important;
    background: var(--theme-login-input-focus-bg) !important;
}

.login-input::placeholder {
    color: var(--theme-text-muted) !important;
    font-weight: 400;
}

/* Button hover effects - desktop only */
@media (hover: hover) and (pointer: fine) {
    .login-submit-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--theme-accent-hover) 0%, var(--theme-accent-active) 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(var(--theme-accent-rgb), 0.4);
    }

    .login-submit-btn:active {
        transform: translateY(0);
    }
}

.login-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* VYROX AI link hover */
.login-page a[href*="vyrox.com"]:hover {
    color: var(--theme-accent-light) !important;
    text-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.6);
    transform: translateY(-1px);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

/* Responsive design */
@media (max-width: 768px) {
    .login-container {
        padding: 1rem 0.5rem !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .login-page h1 {
        font-size: 1.3rem !important;
    }

    .login-page p {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 0.75rem 0.25rem !important;
    }

    .login-page h1 {
        font-size: 1.2rem !important;
    }

    .login-page p {
        font-size: 0.85rem !important;
    }
}


/* Vanity mode filter styling */
.vanity-mode-filter {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border: 2px solid var(--theme-accent) !important;
    position: relative;
}

.vanity-mode-filter::after {
    content: "🔒";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-accent);
    font-size: 0.8rem;
}

.vanity-indicator {
    animation: vanityFadeIn 0.5s ease-in-out;
}

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

/* Responsive vanity indicator */
@media (max-width: 768px) {
    .vanity-indicator {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
    
    .vanity-indicator span:first-child {
        display: none;
    }
}

/* WeChat-style Login Loader Styles */
.wechat-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-overlay-dim);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.wechat-loader-box {
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: scaleIn 0.3s ease-out;
}

.wechat-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid #07C160;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.wechat-loader-text {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.5px;
}

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

@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Disabled button state */
#loginBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}


.btn-info {
    background-color: var(--theme-info);
    border: 1px solid var(--theme-info);
    color: var(--theme-info-contrast);
}

.btn-info:hover {
    background-color: var(--theme-info-hover);
    border-color: var(--theme-info-hover);
}

#qrCodeContainer img {
    max-width: 100%;
    height: auto;
}

   /* Fix bouncing / scroll stability on iOS */
    #memberPortal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }

   /* Prevent double-tap zoom on mobile devices */
    #memberPortal * {
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Allow text selection for input fields */
    #memberPortal input, #memberPortal textarea {
        -webkit-user-select: text !important;
        -khtml-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
    }
    
    /* Prevent text selection highlighting */
    #memberPortal *::selection {
        background: transparent;
    }
    
    #memberPortal *::-moz-selection {
        background: transparent;
    }
    
    /* Prevent image dragging */
    #memberPortal img {
        -webkit-user-drag: none !important;
        -khtml-user-drag: none !important;
        -moz-user-drag: none !important;
        -o-user-drag: none !important;
        user-drag: none !important;
    }
    
    /* Disable text selection on buttons */
    #memberPortal button {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }

/* Add this CSS to make disabled input text color match disabled select text color */
.form-input:disabled {
    color: var(--theme-muted-text) !important;
}

select.form-input:disabled {
    color: var(--theme-muted-text) !important;
}

#revenues > div.container > div.filters-container {
    margin-bottom: 1.0rem;
    padding-left: 0;
    padding-right: 0;
}


/* User Dropdown Styles */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-toggle {
    background: none;
    border: none;
    color: var(--theme-text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-dropdown-toggle:hover {
    background-color: var(--theme-glass-medium);
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.user-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--theme-card);
    border: 1px solid var(--theme-accent);
    border-radius: 6px;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--theme-text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background-color 0.2s ease;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.user-dropdown-item:hover {
    background-color: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-accent);
}

.dropdown-icon {
    font-size: 1rem;
    width: 16px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-dropdown-menu {
        right: -1rem;
        min-width: 160px;
    }
    
    .user-dropdown-toggle {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
    
    .user-dropdown-item {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* User dropdown styles */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-toggle {
    background: var(--theme-card);
    border: 1px solid var(--theme-glass-border);
    color: var(--theme-text-bright);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 var(--theme-glass-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.user-dropdown-toggle:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    background: linear-gradient(135deg, var(--theme-select-open-bg), var(--theme-select-open-bg2));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 8px rgba(var(--theme-accent-rgb), 0.08);
}

.user-dropdown.active .user-dropdown-toggle {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(var(--theme-accent-rgb), 0.15), 0 0 12px rgba(var(--theme-accent-rgb), 0.1);
}

.user-dropdown-arrow {
    font-size: 0;
    display: inline-block;
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23f0f0f0' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 10px 6px;
    transition: transform 0.3s ease;
}

.user-dropdown.active .user-dropdown-arrow {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2322c55e' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, var(--theme-select-open-bg2), var(--theme-select-open-bg2));
    border: 1px solid var(--theme-glass-border);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.user-dropdown.active .user-dropdown-menu {
    display: block;
}

.user-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    color: var(--theme-text-primary);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 0.9rem;
}

.user-dropdown-item:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-text-primary);
    text-decoration: none;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--theme-glass-medium);
    margin: 0.5rem 0;
}

/* Header icon buttons (Messenger, Notifications) */
.header-icon-btn {
    position: relative;
    background: var(--theme-card);
    border: 1px solid var(--theme-glass-border);
    color: var(--theme-text-bright);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 var(--theme-glass-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header-icon-btn:hover {
    border-color: color-mix(in srgb, var(--theme-accent, var(--theme-accent)) 35%, transparent);
    color: var(--theme-accent, var(--theme-accent));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.header-notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--theme-danger);
    color: var(--theme-danger-contrast);
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    line-height: 1;
}

/* Header WhatsApp CTA — quiet baseline, but flashes gold on first mount
   to draw the eye once, then settles into the muted state. */
/* Floating contact CTA — fixed pill at bottom-right, just left of the
   operations settings FAB. Lives as a direct <body> child (see
   ensureFloatingContactCta in login-user-profile.js). */
.header-whatsapp-cta {
    position: fixed;
    bottom: calc(1rem + 3px);
    right: calc(1rem + 58px);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.95) 0%, rgba(10, 14, 25, 0.96) 100%);
    border: 1px solid rgba(245, 197, 24, 0.30);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f3d27a;
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    animation: headerWhatsappCtaGoldText 4s ease-out 1;
}

.header-whatsapp-cta .header-cta-coin {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

.header-whatsapp-cta:hover {
    color: #ffe9a8;
    text-decoration: none;
    transform: translateY(-2px);
    border-color: rgba(245, 197, 24, 0.55);
    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@keyframes headerWhatsappCtaGoldText {
    0%, 55% {
        color: #ffd700;
        font-weight: 600;
        text-shadow: 0 0 6px rgba(255, 215, 0, 0.45);
    }
    100% {
        color: #f3d27a;
        font-weight: 600;
        text-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-whatsapp-cta {
        animation: none;
    }
}

/* Bug #316 — dismiss control. The pill floats over the bottom row of table cards
   on the operations screen, so operators need a way to get it out of the way
   mid-service. Session-only: it returns on the next page load, so this is a
   "not now" and never a permanent opt-out.
   Always visible rather than hover-only — the reporter is on Safari where a
   hover-revealed control is effectively invisible on a trackpad tap. */
.header-cta-dismiss {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1600;              /* above .header-cta-tooltip (1500) so it stays clickable */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    border: 1px solid rgba(245, 197, 24, 0.45);
    color: #f3d27a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.header-cta-dismiss:hover,
.header-cta-dismiss:focus-visible {
    background: #1f2937;
    color: #ffe9a8;
    border-color: rgba(245, 197, 24, 0.85);
    outline: none;
}

/* ============================================================
   Contact-card popover on hover: refined modern composition
   ============================================================ */
.header-cta-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    right: -8px;
    z-index: 1500;
    width: 268px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96) 0%, rgba(10, 14, 25, 0.97) 100%);
    color: #f9fafb;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.65),
        0 8px 16px -4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    font-family: inherit;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.94);
    transform-origin: bottom right;
    pointer-events: none;
    transition:
        opacity 0.16s ease-out,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0s linear 0.16s;
}

/* hit-area bridge across the 14px visual gap */
.header-cta-tooltip::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.header-whatsapp-cta:hover .header-cta-tooltip,
.header-whatsapp-cta:focus-visible .header-cta-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity 0.14s ease-out,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0s linear 0s;
}

.header-cta-tooltip-arrow {
    position: absolute;
    bottom: -6px;
    right: 26px;
    width: 12px;
    height: 12px;
    background: rgba(17, 24, 39, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
}

/* --- Header row: avatar + identity ----------------------- */
.header-cta-tooltip-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-cta-tooltip-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    cursor: pointer;
}

.header-cta-tooltip-avatar-clipper {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5c518 0%, #d4a017 55%, #a87800 100%);
    box-shadow:
        0 6px 14px -4px rgba(245, 197, 24, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        0 0 0 2px rgba(255, 255, 255, 0.10);
}

.header-cta-tooltip-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    backface-visibility: hidden;
}

/* --- Large preview that pops out on avatar hover ---------- */
.header-cta-tooltip-avatar-preview {
    position: absolute;
    top: -8px;
    right: calc(100% + 14px);
    width: 220px;
    height: 264px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(17, 24, 39, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.65),
        0 8px 16px -4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.86) translateX(8px);
    transform-origin: right center;
    pointer-events: none;
    z-index: 1600;
    transition:
        opacity 0.18s ease-out,
        transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0s linear 0.18s;
}

.header-cta-tooltip-avatar-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

/* hit-area bridge across the 14px gap to the avatar */
.header-cta-tooltip-avatar-preview::before {
    content: '';
    position: absolute;
    top: 0;
    right: -14px;
    width: 14px;
    height: 100%;
}

.header-cta-tooltip-avatar:hover .header-cta-tooltip-avatar-preview {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    transition:
        opacity 0.16s ease-out,
        transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .header-cta-tooltip-avatar-preview,
    .header-cta-tooltip-avatar:hover .header-cta-tooltip-avatar-preview {
        transform: none;
        transition: opacity 0.05s linear, visibility 0s linear;
    }
}

.header-cta-tooltip-identity {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
}

.header-cta-tooltip-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.005em;
}

.header-cta-tooltip-role {
    font-size: 0.72rem;
    font-weight: 400;
    color: #94a3b8;
    letter-spacing: 0.01em;
}

/* --- Hairline divider ----------------------------------- */
.header-cta-tooltip-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 25%,
        rgba(255, 255, 255, 0.10) 75%,
        transparent 100%
    );
}

/* --- Phone row ------------------------------------------ */
.header-cta-tooltip-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.025em;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Roboto Mono', monospace;
    padding: 2px 0;
}

.header-cta-tooltip-phone .bi {
    font-size: 0.85rem;
    color: #fbbf24;
    opacity: 0.85;
}

/* --- Primary action pill -------------------------------- */
.header-cta-tooltip-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #25d366 0%, #1ea952 100%);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow:
        0 6px 14px -4px rgba(37, 211, 102, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease;
}

.header-cta-tooltip-action .bi-whatsapp {
    font-size: 1.1rem;
}

.header-cta-tooltip-action .bi-arrow-right-short {
    font-size: 1.25rem;
    margin-left: auto;
}

.header-whatsapp-cta:hover .header-cta-tooltip-action {
    transform: translateY(-1px);
    box-shadow:
        0 10px 20px -4px rgba(37, 211, 102, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .header-cta-tooltip,
    .header-whatsapp-cta:hover .header-cta-tooltip,
    .header-whatsapp-cta:focus-visible .header-cta-tooltip,
    .header-whatsapp-cta:hover .header-cta-tooltip-action {
        transform: none;
        transition: opacity 0.05s linear, visibility 0s linear;
    }
}

/* Real-time table update animations */
@keyframes tableStatusUpdate {
    0% { 
        transform: scale(1); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    }
    25% { 
        transform: scale(1.02); 
        box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3); 
    }
    75% { 
        transform: scale(1.01); 
        box-shadow: 0 6px 16px rgba(var(--theme-accent-rgb), 0.4); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    }
}

/* Member name column styles */
.member-name-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.member-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gender-icon {
    font-size: 1rem;
    cursor: help;
    transition: opacity 0.2s ease;
    position: relative;
    z-index: 1000;
    pointer-events: auto !important;
    user-select: none;
}

.gender-icon:hover {
    opacity: 0.7;
}

.age-badge {
    font-size: 0.75rem;
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-accent);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    cursor: help;
    display: inline-block;
    font-weight: 500;
    position: relative;
    z-index: 1000;
    pointer-events: auto !important;
    user-select: none;
}

.age-badge:hover {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.5);
}

/* Ensure member name container allows tooltips to show */
.member-name-container {
    position: relative;
    z-index: 1;
}

.member-name-row {
    position: relative;
    z-index: 1;
}

/* Allow tooltips to show outside table cells */
.data-table td:has(.gender-icon), 
.data-table td:has(.age-badge) {
    overflow: visible !important;
    position: relative;
}

/* Fallback for browsers that don't support :has() */
.data-table td .member-name-container {
    overflow: visible;
}

/* Custom CSS tooltips as fallback */
.gender-icon::before,
.age-badge::before {
    content: attr(title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-card);
    color: var(--theme-text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--theme-accent);
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.gender-icon::after,
.age-badge::after {
    content: '';
    position: absolute;
    bottom: 112%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--theme-accent);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.gender-icon:hover::before,
.gender-icon:hover::after,
.age-badge:hover::before,
.age-badge:hover::after {
    opacity: 1;
}




/* ====================
   ANNOUNCEMENT SYSTEM STYLES
   ==================== */

/* Active Organizations Panel */
.active-orgs-panel {
    background: rgba(var(--theme-accent-rgb), 0.08);
    border: 2px solid var(--theme-accent);
    border-radius: 8px;
    padding: 1rem;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    align-content: flex-start;
    position: relative;
}

.active-orgs-panel .no-selection {
    color: var(--theme-text-muted);
    text-align: center;
    padding: 1.5rem;
    font-style: italic;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Organization Badge */
.org-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--theme-accent);
    color: var(--theme-overlay-subtle);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.org-badge:hover {
    background: var(--theme-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}

.org-badge .remove-btn {
    background: transparent;
    border: none;
    color: var(--theme-overlay-subtle);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.org-badge .remove-btn:hover {
    transform: scale(1.2);
    color: var(--theme-danger);
}

.btn-clear-all {
    background: var(--theme-danger);
    color: var(--theme-danger-contrast);
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-all:hover {
    background: var(--theme-danger-hover);
}

/* Available Organizations Panel */
.available-orgs-panel {
    background: var(--theme-glass-soft);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 8px;
    padding: 1rem;
}

.available-orgs-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.org-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.1);
    transition: background 0.2s ease;
}

.org-list-item:hover {
    background: rgba(var(--theme-accent-rgb), 0.05);
}

.org-list-item:last-child {
    border-bottom: none;
}

.org-name {
    color: var(--theme-text-primary);
    font-size: 0.9rem;
    flex: 1;
}

.btn-add {
    background: var(--theme-accent);
    color: var(--theme-overlay-subtle);
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-add:hover {
    background: var(--theme-accent-hover);
    transform: translateX(2px);
}

.btn-add:active {
    transform: translateX(0);
}

/* Spinner for loading */
.spinner-border {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .active-orgs-panel {
        min-height: 80px;
        padding: 0.75rem;
    }
    
    .org-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    
    .available-orgs-list {
        max-height: 250px;
    }
    
    .org-list-item {
        padding: 0.6rem;
    }
    
    .org-name {
        font-size: 0.85rem;
    }
    
    .btn-add {
        font-size: 0.8rem;
        padding: 0.35rem 0.8rem;
    }
}

/* =============================================
   CENTER PHOTOS & BANNER STYLES
   ============================================= */

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.photo-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--theme-card);
    border: 2px solid var(--theme-border-subtle);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.photo-card:hover {
    border-color: var(--theme-accent);
}

.photo-card.primary {
    border-color: var(--theme-accent);
    border-width: 3px;
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-card .primary-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.photo-card .photo-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #e5e7eb;
    font-size: 0.5rem;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.photo-card .photo-meta .photo-meta-dim {
    display: block;
    font-weight: 600;
}

.photo-card .photo-meta .photo-meta-size {
    display: block;
    opacity: 0.85;
}

/* On hover the action buttons take the bottom strip; hide the meta so they don't overlap. */
.photo-card:hover .photo-meta {
    opacity: 0;
}

.photo-card .photo-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 3px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-card:hover .photo-actions {
    opacity: 1;
}

.photo-card.add-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    cursor: pointer;
}

.photo-card.add-photo:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

/* Busy state while a photo is compressing + uploading. */
.photo-card.add-photo.busy {
    cursor: default;
}

.photo-card-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--theme-border-subtle);
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    animation: photoCardSpin 0.7s linear infinite;
}

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

/* Extra small button for photo actions */
.btn-xs {
    padding: 2px 6px;
    font-size: 0.65rem;
}

/* Default Banners Grid */
.default-banners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.default-banner-option {
    cursor: pointer;
    border: 2px solid var(--theme-border-subtle);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    padding: 5px;
    text-align: center;
}

.default-banner-option:hover {
    border-color: var(--theme-accent);
    transform: scale(1.02);
}

.default-banner-option.selected {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.default-banner-option img {
    width: 100%;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

/* Smaller photo grid variant for settings */
.photo-grid.photo-grid-sm {
    grid-template-columns: repeat(6, 80px);
    gap: 8px;
}

.photo-grid.photo-grid-sm .photo-card {
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
    border-radius: 6px;
}

.photo-grid.photo-grid-sm .photo-card.add-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--theme-border);
    background: var(--theme-glass-soft);
}

.photo-grid.photo-grid-sm .photo-card .primary-badge {
    top: 2px;
    left: 2px;
    padding: 1px 4px;
    font-size: 0.5rem;
}

.photo-grid.photo-grid-sm .photo-card .photo-actions {
    padding: 2px;
    gap: 2px;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .photo-grid.photo-grid-sm {
        grid-template-columns: repeat(3, 1fr);
    }

    .default-banners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================
   Theme Presets Grid
   ============================================= */

/* Theme Group Labels */
.theme-group-label {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
    padding: 0.3rem 0 0.1rem 0;
    border-bottom: 1px solid var(--theme-border-subtle);
    margin-bottom: -4px;
}
.theme-group-label:first-child {
    padding-top: 0;
}

/* Theme Presets Grid */
.theme-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.theme-preset-card {
    position: relative;
    border: 2px solid var(--theme-border-subtle);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--theme-overlay-subtle);
}

.theme-preset-card:hover {
    border-color: var(--theme-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-preset-card.selected {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 1px var(--theme-accent), 0 4px 12px rgba(var(--theme-accent-rgb), 0.15);
}

.theme-preview {
    border-radius: 4px;
    overflow: hidden;
    height: 70px;
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.theme-preview-nav {
    height: 12px;
    flex-shrink: 0;
}

.theme-preview-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 4px 5px;
}

.theme-preset-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    line-height: 1.2;
}

.theme-preset-desc {
    font-size: 0.62rem;
    color: var(--theme-text-muted);
    line-height: 1.2;
}

.theme-preset-check {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
}

.theme-custom-colors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 12px;
    padding: 12px;
    background: var(--theme-overlay-subtle);
    border-radius: 6px;
    border: 1px solid var(--theme-border-subtle);
}

.theme-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-color-picker label {
    font-size: 0.72rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.theme-color-picker input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* ========================================
   WhatsApp-Style Chat Modal
   ======================================== */

.whatsapp-chat-modal {
    max-width: 450px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}

.whatsapp-header {
    background: var(--theme-card);
    padding: 14px 16px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--theme-accent);
}

.whatsapp-header h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--theme-text-heading);
    margin: 0;
}

.whatsapp-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--theme-modal-bg);
    min-height: 0;
}

.whatsapp-msg-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 0 8px 8px 8px;
    background: var(--theme-card);
    align-self: flex-start;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Own messages - right aligned, different color */
.whatsapp-msg-own {
    align-self: flex-end;
    background: var(--theme-surface-hover);
    border-radius: 8px 0 8px 8px;
}

.whatsapp-msg-own .whatsapp-msg-sender {
    color: var(--theme-accent-soft);
}

.whatsapp-msg-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-accent);
    margin-bottom: 4px;
}

.whatsapp-msg-text {
    color: var(--theme-text-secondary);
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.whatsapp-msg-time {
    font-size: 10px;
    color: var(--theme-text-muted);
    text-align: right;
    margin-top: 4px;
}

.whatsapp-system-msg {
    text-align: center;
    margin: 8px 0;
    align-self: center;
}

.whatsapp-system-msg span {
    background: var(--theme-glass-medium);
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 12px;
    color: var(--theme-text-muted);
    font-style: italic;
    display: inline-block;
}

.whatsapp-input-area {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: var(--theme-card);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--theme-accent);
}

.whatsapp-input-area input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-accent);
    background: var(--theme-modal-bg);
    color: var(--theme-text-secondary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.whatsapp-input-area input:focus {
    border-color: var(--theme-accent-soft);
}

.whatsapp-input-area input::placeholder {
    color: var(--theme-text-muted);
}

.whatsapp-send-btn {
    padding: 10px 20px;
    border-radius: 20px;
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.whatsapp-send-btn:hover {
    background: var(--theme-accent-soft);
}

/* Mobile responsive */
@media (max-width: 500px) {
    .whatsapp-chat-modal {
        max-width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    .whatsapp-header {
        border-radius: 0;
    }

    .whatsapp-input-area {
        border-radius: 0;
    }
}

/* ========================================
   Messenger Modal �?WhatsApp Desktop Style
   Two-panel layout: conversation list + active chat
   ======================================== */

/* Modal container �?V2 style with fixed header/footer */
.messenger-modal {
    width: 1080px !important;
    height: 85vh !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 !important;
    margin: auto !important;
}

/* Body is the two-panel flex row container */
.messenger-body {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ---- LEFT PANEL ---- */
.messenger-left-panel {
    width: 340px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--theme-modal-bg);
    border-right: 1px solid rgba(var(--theme-accent-rgb), 0.15);
}

.messenger-left-header {
    padding: 10px 12px;
    background: var(--theme-body);
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.1);
}

.messenger-search-bar {
    position: relative;
}

.messenger-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-muted);
    font-size: 13px;
    pointer-events: none;
}

.messenger-search-bar input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border-radius: 8px;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    background: var(--theme-modal-bg);
    color: var(--theme-text-secondary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.messenger-search-bar input:focus { border-color: var(--theme-accent); }
.messenger-search-bar input::placeholder { color: var(--theme-text-muted); }

/* Conversation List */
.messenger-conversation-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.messenger-section-label {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-text-heading);
    letter-spacing: 0.8px;
}

.messenger-conv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--theme-glass-soft);
    transition: background 0.15s;
    border-left: 3px solid transparent;
}
.messenger-conv-item:hover { background: var(--theme-messenger-hover); }
.messenger-conv-item.active {
    background: var(--theme-messenger-active);
    border-left-color: var(--theme-accent);
}

.messenger-conv-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--theme-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--theme-accent);
}

.messenger-conv-info {
    flex: 1;
    min-width: 0;
}

.messenger-conv-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger-conv-preview {
    font-size: 12px;
    color: var(--theme-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.messenger-conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.messenger-conv-time {
    font-size: 11px;
    color: var(--theme-text-muted);
    white-space: nowrap;
}

.messenger-conv-badge {
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.messenger-conv-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* Loading state */
.messenger-loading {
    text-align: center;
    color: var(--theme-text-muted);
    padding: 40px 20px;
    font-size: 13px;
    line-height: 2;
}
.messenger-loading i { font-size: 2rem; color: var(--theme-accent)33; }

/* ---- RIGHT PANEL ---- */
.messenger-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--theme-modal-bg);
    min-width: 0;
}

/* Empty state */
.messenger-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted);
    gap: 8px;
    user-select: none;
}
.messenger-empty-state i {
    font-size: 5rem;
    color: rgba(var(--theme-accent-rgb), 0.12);
    margin-bottom: 8px;
}
.messenger-empty-state h4 {
    color: var(--theme-text-muted);
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0;
}
.messenger-empty-state p {
    color: var(--theme-text-muted);
    font-size: 13px;
    margin: 0;
}

/* Chat view */
.messenger-chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.messenger-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--theme-card);
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    flex-shrink: 0;
}

.messenger-chat-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--theme-accent-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-heading);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.messenger-chat-header-info {
    flex: 1;
    min-width: 0;
}

.messenger-chat-header-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger-chat-subtitle {
    font-size: 12px;
    color: var(--theme-text-muted);
}

.messenger-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--theme-accent);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

/* Messages area �?inherits whatsapp-messages styling */
.messenger-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    background: var(--theme-overlay-subtle);
}

/* Input bar */
.messenger-chat-input {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    background: var(--theme-card);
    border-top: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    flex-shrink: 0;
}

.messenger-chat-input input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 22px;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    background: var(--theme-modal-bg);
    color: var(--theme-text-secondary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.messenger-chat-input input:focus { border-color: var(--theme-accent-soft); }
.messenger-chat-input input::placeholder { color: var(--theme-text-muted); }

.messenger-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.messenger-send-btn:hover { background: var(--theme-accent-soft); }

/* Announcement cards in right panel */
.messenger-announcement-item {
    background: var(--theme-body);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 6px;
    border-left: 3px solid var(--theme-accent);
    transition: background 0.15s;
}
.messenger-announcement-item:hover { background: var(--theme-card); }
.messenger-announcement-item.urgent { border-left-color: var(--theme-danger-muted); }
.messenger-announcement-item.high { border-left-color: var(--theme-warning); }

.messenger-announcement-title {
    font-weight: 600;
    color: var(--theme-text-heading);
    font-size: 14px;
    margin-bottom: 6px;
}

.messenger-announcement-content {
    color: var(--theme-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.messenger-announcement-meta {
    font-size: 11px;
    color: var(--theme-text-muted);
    margin-top: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.messenger-announcement-priority {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}
.messenger-announcement-priority.urgent { background: rgba(var(--theme-danger-rgb), 0.15); color: var(--theme-danger-muted); }
.messenger-announcement-priority.high { background: rgba(var(--theme-warning-rgb), 0.15); color: var(--theme-warning); }
.messenger-announcement-priority.normal { background: rgba(var(--theme-accent-rgb), 0.15); color: var(--theme-accent); }

/* Section divider in conversation list */
.messenger-section-divider {
    height: 1px;
    background: rgba(var(--theme-accent-rgb), 0.1);
    margin: 4px 16px;
}

/* No results */
.messenger-no-results {
    text-align: center;
    color: var(--theme-text-muted);
    padding: 20px;
    font-size: 13px;
}

/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 768px) {
    .messenger-modal {
        width: 100vw !important;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        position: relative;
    }

    .messenger-left-panel {
        width: 100%;
        min-width: 100%;
    }

    .messenger-right-panel {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 2;
        display: none;
    }

    .messenger-right-panel.mobile-active {
        display: flex !important;
    }

    .messenger-back-btn {
        display: flex !important;
    }
}

/* ==================== Form Validation Error Styles ==================== */
.input-error {
    border-color: var(--theme-danger-muted) !important;
    background-color: rgba(var(--theme-danger-rgb), 0.1) !important;
}

.field-error-message {
    color: var(--theme-danger-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* ============================================
   SETUP WIZARD �?ProMax Design
   ============================================ */
#setupWizardPage {
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--theme-overlay-subtle);
    padding: 1rem;
}

.setup-wizard-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* Brand Header */
.setup-wizard-container .wizard-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.setup-wizard-container .wizard-brand-title {
    color: var(--theme-text-heading);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
}

.setup-wizard-container .wizard-brand-subtitle {
    color: var(--theme-text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}

/* Segmented Progress Bar */
.setup-wizard-container .wizard-progress-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 0.5rem;
}

.setup-wizard-container .wizard-progress-segment {
    flex: 1;
    height: 4px;
    background: var(--theme-input-bg);
    border-radius: 2px;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.setup-wizard-container .wizard-progress-segment.completed {
    background: var(--theme-accent);
}

.setup-wizard-container .wizard-progress-segment.active {
    background: var(--theme-accent);
    box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.4);
    animation: wizard-pulse 2s ease-in-out infinite;
}

@keyframes wizard-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.4); }
    50% { box-shadow: 0 0 14px rgba(var(--theme-accent-rgb), 0.6); }
}

/* Progress Labels */
.setup-wizard-container .wizard-progress-labels {
    display: flex;
    margin-bottom: 1.5rem;
}

.setup-wizard-container .wizard-progress-label {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: var(--theme-text-muted);
    transition: color 0.3s ease;
}

.setup-wizard-container .wizard-progress-label.active {
    color: var(--theme-text-heading);
    font-weight: 600;
}

.setup-wizard-container .wizard-progress-label.completed {
    color: var(--theme-text-heading);
}

/* Step Cards */
.setup-wizard-container .setup-panel {
    display: none;
    opacity: 0;
    transform: translateX(30px);
    background: rgba(var(--theme-body-rgb), 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--theme-input-bg);
    border-radius: 16px;
    padding: 2rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.setup-wizard-container .setup-panel.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.setup-wizard-container .setup-panel.exit-left {
    opacity: 0;
    transform: translateX(-30px);
}

.setup-wizard-container .setup-panel.exit-right {
    opacity: 0;
    transform: translateX(30px);
}

/* Step Badge */
.setup-wizard-container .wizard-step-badge {
    display: inline-block;
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
}

/* Step Title & Subtitle */
.setup-wizard-container .wizard-step-title {
    color: var(--theme-text-bright);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.setup-wizard-container .wizard-step-subtitle {
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    margin: 0 0 1.5rem 0;
}

/* Form Fields */
.setup-wizard-container .setup-field {
    margin-bottom: 1.25rem;
}

.setup-wizard-container .setup-field label {
    display: block;
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.setup-wizard-container .setup-field input,
.setup-wizard-container .setup-field select {
    width: 100%;
    padding: 0.75rem;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 12px;
    color: var(--theme-text-bright);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.setup-wizard-container .setup-field input:focus,
.setup-wizard-container .setup-field select:focus {
    outline: none;
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.15);
}

.setup-wizard-container .setup-field input.readonly-field {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Navigation */
.setup-wizard-container .setup-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
}

/* Continue Button */
.setup-wizard-container .wizard-btn-continue {
    width: 100%;
    padding: 0.85rem;
    background: var(--theme-accent-fill);
    color: var(--theme-accent-contrast);
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.setup-wizard-container .wizard-btn-continue:hover {
    background: var(--theme-accent-hover);
    transform: translateY(-1px);
}

.setup-wizard-container .wizard-btn-continue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Back Button */
.setup-wizard-container .wizard-btn-back {
    background: transparent;
    color: var(--theme-text-muted);
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.setup-wizard-container .wizard-btn-back:hover {
    color: var(--theme-text-bright);
}

/* Completion Checkmark */
.setup-wizard-container .wizard-checkmark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(var(--theme-accent-rgb), 0.15);
    border: 2px solid var(--theme-accent);
    margin: 0 auto 1.5rem;
    position: relative;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.setup-wizard-container .setup-panel.active .wizard-checkmark {
    transform: scale(1);
}

.setup-wizard-container .wizard-checkmark::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 28px;
    border-right: 3px solid var(--theme-accent);
    border-bottom: 3px solid var(--theme-accent);
    transform: rotate(45deg);
    top: 14px;
    left: 22px;
}

/* Completion Title & Subtitle */
.setup-wizard-container .wizard-complete-title {
    color: var(--theme-text-bright);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.setup-wizard-container .wizard-complete-subtitle {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

/* Summary */
.setup-wizard-container .wizard-summary {
    text-align: left;
    background: rgba(var(--theme-accent-rgb), 0.08);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* Skip Link */
.setup-wizard-container .setup-wizard-skip {
    text-align: center;
    margin-top: 1.5rem;
}

.setup-wizard-container .setup-wizard-skip a {
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.setup-wizard-container .setup-wizard-skip a:hover {
    color: var(--theme-text-muted);
}

/* Responsive */
@media (max-width: 600px) {
    .setup-wizard-container {
        max-width: 100%;
    }

    .setup-wizard-container .setup-panel {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .setup-wizard-container .wizard-progress-label {
        font-size: 0.6rem;
    }
}

/* ========================================
   UI VERSION TOGGLE SYSTEM
   Toggle between old (v1) and new (v2) modal UI versions.
   Toggle only visible in debug.php (hidden by default).
   ======================================== */

/* Toggle switch - hidden by default, shown via JS in debug mode */
.ui-version-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 0.75rem;
}

.ui-version-toggle-label {
    font-size: 0.7rem;
    color: var(--theme-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.ui-version-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--theme-muted-bg);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.ui-version-toggle-switch.active {
    background: var(--theme-accent);
}

.ui-version-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.ui-version-toggle-switch.active .ui-version-toggle-slider {
    transform: translateX(16px);
}

/* Printer visibility �?hides buttons regardless of inline style.display overrides */
.printer-hidden {
    display: none !important;
}

/* Printer Settings Toggle */
.printer-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--theme-muted-bg);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.printer-toggle-switch.active {
    background: var(--theme-accent);
}
.printer-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.printer-toggle-switch.active .printer-toggle-slider {
    transform: translateX(20px);
}

/* Version content switching via data attribute on modal */
.modal[data-ui-version="v1"] .ui-v2 {
    display: none !important;
}

.modal[data-ui-version="v2"] .ui-v1 {
    display: none !important;
}

/* V2 placeholder styling */
.ui-v2-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--theme-text-muted);
    text-align: center;
    min-height: 200px;
}

.ui-v2-placeholder-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-heading);
    margin-bottom: 0.5rem;
}

.ui-v2-placeholder-text {
    font-size: 0.85rem;
    color: var(--theme-border);
}

/* ============================================
   V2 Countup Game Modal �?Single-Page Layout
   ============================================ */

/* V2 Status Bar �?compact game info strip */
.v2-status-bar {
    display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1rem;
    background: var(--theme-card); border: 1px solid var(--theme-accent); border-radius: 8px;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.v2-status-item { display: flex; flex-direction: column; gap: 0.15rem; }
.v2-status-label { font-size: 0.65rem; color: var(--theme-border); text-transform: uppercase; letter-spacing: 0.5px; }
.v2-status-value { font-size: 0.85rem; color: var(--theme-text-primary); font-weight: 500; }
.v2-timer { color: var(--theme-accent); font-family: monospace; font-weight: 600; }

/* V2 Sections */
.v2-section { margin-bottom: 1rem; }
.v2-section-main { margin-bottom: 1.5rem; }
.v2-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.75rem;
}
.v2-section-title { color: var(--theme-text-heading); margin: 0; font-size: 1rem; }
.v2-section-toggle {
    font-size: 0.8rem; color: var(--theme-accent); cursor: pointer; padding: 0.25rem 0.5rem;
    border: 1px solid var(--theme-accent); border-radius: 4px; background: transparent;
}
.v2-section-toggle:hover { background: rgba(var(--theme-accent-rgb), 0.1); }

/* V2 Customer Summary */
.v2-customer-summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.v2-customer-name { color: var(--theme-text-primary); font-weight: 500; }
.v2-customer-mobile { color: var(--theme-text-muted); font-size: 0.85rem; }
.v2-customer-edit {
    padding: 1rem; background: var(--theme-card); border-radius: 8px; margin-top: 0.5rem;
    border: 1px solid var(--theme-border-subtle);
}

/* V2 Inline Customer Edit �?hover hints for clickable fields */
#splitBillV2CustomerDisplayName:hover,
#splitBillV2CustomerDisplayMobile:hover {
    text-decoration: underline;
}

/* V2 Member Card �?compact left-accent design */
.v2-member-card {
    border-left: 3px solid var(--theme-accent);
    padding: 0.4rem 0 0.4rem 0.6rem;
    margin-bottom: 0.75rem;
}
.v2-member-card-remove {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
}
.v2-member-card-remove:hover { color: var(--theme-danger); }

/* V2 Member Search Dropdown */
.v2-member-search-dropdown {
    position: absolute;
    width: 100%;
    z-index: 10;
    max-height: 350px;
    overflow-y: auto;
    background: var(--theme-overlay-subtle);
    border: 1px solid var(--theme-border-subtle);
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-top: -1px;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-border) transparent;
}
.v2-member-search-dropdown::-webkit-scrollbar {
    width: 5px;
}
.v2-member-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.v2-member-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--theme-border);
    border-radius: 3px;
}
.v2-member-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted);
}
.v2-member-search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--theme-border-subtle);
}
.v2-member-search-item:last-child { border-bottom: none; }
.v2-member-search-item:hover { background: rgba(var(--theme-accent-rgb), 0.08); }
.v2-member-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(var(--theme-accent-rgb), 0.15);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.4);
    display: flex; align-items: center; justify-content: center;
    color: var(--theme-accent); font-size: 0.7rem; font-weight: 600;
    flex-shrink: 0;
}

.remark-chip {
    display: inline-block;
    background: var(--theme-card);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.4);
    border-radius: 20px;
    padding: 0.4rem 0.8rem;
    color: var(--theme-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0.25rem;
}
.remark-chip:hover {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-text-primary);
}

/* V2 Invoice Table */
.v2-invoice-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.v2-invoice-table th {
    padding: 0.4rem 0.5rem; text-align: left; color: var(--theme-accent);
    border-bottom: 0px solid var(--theme-border-subtle); font-weight: 600;
}
.v2-invoice-table td { padding: 0.5rem; }
.v2-invoice-table .text-right,
.v2-totals-table .text-right { text-align: right; }
.v2-invoice-table .text-center { text-align: center; }
.v2-totals-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.v2-totals-table td { padding: 0.2rem 0.4rem; }
.v2-totals-table td.text-right { min-width: 100px; }
.v2-totals-row-total { border-top: none; }
.v2-totals-row-total td { padding: 0.35rem 0.4rem; font-weight: 600; color: var(--theme-accent); font-size: 0.95rem; }

/* V2 Split Layout �?Two-column invoice view */
#splitBillGameModal[data-ui-version="v2"] .modal-body,
#rentalGameModal[data-ui-version="v2"] .modal-body {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}
#splitBillGameModal .modal-body > .ui-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
/* rentalGameModal has no .ui-v2 wrapper �?.v2-split-layout is a direct child of .modal-body */
#rentalGameModal .modal-body {
    display: flex;
    flex-direction: column;
    position: relative;
}
.dot-loader {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    gap: 3px;
}
.dot-loader .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--theme-accent);
    animation: dot-bounce 1.4s infinite ease-in-out both;
}
.dot-loader .dot:nth-child(1) { animation-delay: 0s; }
.dot-loader .dot:nth-child(2) { animation-delay: 0.16s; }
.dot-loader .dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}
/* Paused game marker. Occupies the same slot as .dot-loader (the "playing" icon) so a
   paused game reads as still-live-but-held, never as an ended, selectable round.
   Deliberately STATIC: motion is what signals "running", so the paused state must not
   animate: the stillness is the message. */
.pause-loader {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    gap: 3px;
}
.pause-loader .pause-bar {
    width: 4px;
    height: 13px;
    border-radius: 1px;
    background: var(--theme-warning, #f59e0b);
}
.v2-split-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.v2-split-left {
    overflow-y: auto;
    min-height: 0;
    padding-top: 1rem;
    padding-right: 0.75rem;
}
.v2-split-right {
    display: flex;
    flex-direction: column;
    width: 310px;
    flex-shrink: 0;
    border-left: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    padding: 0.5rem 0.6rem;
    overflow: hidden;
    padding-bottom: 0px;
}
.v2-split-right-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ============================================================
   V2 GLOBAL UI TOGGLE
   ============================================================ */

.ui-version-toggle-global {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
}

/* ============================================================
   V2 PAYMENT METHOD BUTTONS
   ============================================================ */

.v2-payment-method-btn {
    padding: 0.4rem;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-muted-bg);
    border-radius: 4px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    text-align: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.v2-payment-method-btn:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

.v2-payment-method-btn.selected {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

/* V2 Sidebar Section Spacing */
.v2-sidebar-section {
    flex-shrink: 0;
}

/* Searchable Dropdown */
.searchable-dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.searchable-dropdown-arrow {
    color: var(--theme-text-muted);
    font-size: 14px;
    margin-left: 8px;
}
.searchable-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--theme-card);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 6px;
    z-index: 10;
    margin-top: 2px;
}
.searchable-dropdown-search-wrapper {
    position: sticky;
    top: 0;
    padding: 8px;
    border-bottom: 1px solid var(--theme-border-subtle);
    background: var(--theme-card);
}
.searchable-dropdown-search-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-muted-bg);
    border-radius: 4px;
    color: var(--theme-text-secondary);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.searchable-dropdown-search-input:focus {
    border-color: var(--theme-accent);
}
.searchable-dropdown-options-list {
    max-height: 300px;
    overflow-y: auto;
}
.searchable-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--theme-text-secondary);
}
.searchable-dropdown-item:hover {
    background: var(--theme-surface-hover);
}
.searchable-dropdown-region-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--theme-overlay-subtle);
    border-top: 1px solid var(--theme-border-subtle);
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: default;
    user-select: none;
}

/* Disable all hover effects for available (not started) tables �?except classic/access-card theme */
.table-card.available:not(.theme-access-card):hover,
.table-card.available.theme-pool:hover,
.table-card.available.theme-pool-square:hover,
.table-card.available.theme-snooker:hover,
.table-card.available.theme-snooker-square:hover,
.table-card.available.theme-bed:hover {
    transform: none !important;
    box-shadow: none !important;
}
.table-card.available:not(.theme-access-card):hover .hover-outline {
    border-color: transparent !important;
}

/* Access card hover — mirrors snooker (subtle lift + accent glow, no thick ring) */
.table-card.theme-access-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3) !important;
}
/* Rental cards: align with countup/countdown cards — plain dark shadow, no accent glow */
.table-card.rental-card:hover,
.table-card.rental-card.theme-access-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Unified button hover: slight brightness bump on ALL card action buttons
   (table-card countup/countdown, rental-card, fnb-card). Transition for smoothness. */
.table-card button,
.fnb-card button {
    transition: filter 0.15s ease;
}
.table-card button:hover,
.fnb-card button:hover {
    filter: brightness(1.1);
}
.table-card.available:hover .ball-badge {
    animation: snookerBallShake 0.4s ease-out !important;
}

/* Keyboard-focused table card */
.table-card.kb-focused .hover-outline {
    border-color: rgba(var(--theme-accent-rgb), 0.8) !important;
}
.table-card.kb-focused {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3);
}
.table-card.kb-focused .ball-badge {
    animation: snookerBallShake 0.4s ease-out;
}

/* Bounce countup/countdown buttons on available table hover & keyboard focus */
@keyframes tableButtonBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); box-shadow: 0 0 12px rgba(var(--theme-pink-rgb), 0.7); }
}
.table-card.available:hover button.btn-table-operation,
.table-card.available.kb-focused button.btn-table-operation {
    animation: tableButtonBounce 0.5s ease-in-out 3;
}

/* Rental cards: same hover/keyboard-focus bounce on the Rent button
   (available state only). Mirrors the countup/countdown button hover
   behavior on regular table cards. */
.rental-card[data-rental-status="available"]:hover .rt-actions button,
.rental-card[data-rental-status="available"].kb-focused .rt-actions button {
    animation: tableButtonBounce 0.5s ease-in-out 3;
}

/* ============================================================
   REVENUES PAGE + SETTINGS MODAL V2 REDESIGN
   ============================================================ */

/* --- REVENUES + DEPOSITS: Shared filter overrides (both pages share .rev-filters structure) --- */
#revenues .filters .rev-filters,
#deposits .filters .rev-filters {
    flex-wrap: wrap;
}

#revenues .rev-filters .filter-select,
#revenues .rev-filters .date-filter-select,
#revenues .rev-filters select.filter-select,
#deposits .rev-filters .filter-select,
#deposits .rev-filters .date-filter-select,
#deposits .rev-filters select.filter-select {
    min-width: 110px;
}

/* Uniform filter-control heights so every control in the filter rows lines up (2026-07-22).
   The VISIBLE controls are custom dropdowns (.cd-toggle inside .cd-dropdown), time-range
   inputs (.rev-time-range-input), the date wrapper, and the discounted-only toggle - the
   native .filter-select is hidden behind .cd-toggle. Align every visible control to 34px. */
#revenues .filters .rev-filters,
#deposits .filters .rev-filters {
    align-items: center;
}
#revenues .rev-filters .cd-dropdown,
#revenues .rev-filters .cd-toggle,
#revenues .rev-filters .rev-time-range-wrap,
#revenues .rev-filters .rev-time-range-input,
#revenues .rev-filters .rev-flag-toggle,
#revenues .rev-filters .date-filter-wrapper,
#revenues .rev-filters .filter-select,
#deposits .rev-filters .cd-dropdown,
#deposits .rev-filters .cd-toggle,
#deposits .rev-filters .rev-time-range-wrap,
#deposits .rev-filters .rev-time-range-input,
#deposits .rev-filters .rev-flag-toggle,
#deposits .rev-filters .date-filter-wrapper,
#deposits .rev-filters .filter-select {
    box-sizing: border-box;
    height: 34px;
    vertical-align: middle;
}
/* Discounted-only toggle: fixed height controls the size; keep horizontal padding only. */
#revenues .rev-filters .rev-flag-toggle,
#deposits .rev-filters .rev-flag-toggle {
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}
/* Wrappers center their inner control and let it fill the fixed height. */
#revenues .rev-filters .date-filter-wrapper,
#revenues .rev-filters .rev-time-range-wrap,
#deposits .rev-filters .date-filter-wrapper,
#deposits .rev-filters .rev-time-range-wrap {
    display: inline-flex;
    align-items: center;
}
#revenues .rev-filters .date-filter-wrapper .cd-toggle,
#revenues .rev-filters .date-filter-wrapper .filter-select,
#revenues .rev-filters .date-filter-wrapper .cd-dropdown,
#deposits .rev-filters .date-filter-wrapper .cd-toggle,
#deposits .rev-filters .date-filter-wrapper .filter-select,
#deposits .rev-filters .date-filter-wrapper .cd-dropdown {
    height: 34px;
}

#revenues .rev-filters .date-input,
#deposits .rev-filters .date-input {
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    border: 1px solid var(--theme-border);
    background: var(--theme-card);
    border-radius: 4px;
    color: var(--theme-text-primary);
    transition: border-color 0.2s ease;
}

#revenues .rev-filters .date-input:focus,
#deposits .rev-filters .date-input:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.2);
}

/* Status filter dropdown button */
/* @DEPRECATED �?status toggle now uses shared .cd-toggle styles */

/* --- REVENUES: Stats formula strip --- */
/* ══�?REVENUE STATS FORMULA BAR ══�?*/
.rev-stats-formula {
    /* The stat row owns hover tooltips that must overlay the content below it. The table headers
       under it are position:sticky with z-index:1, which put them in the root stacking context and
       let them paint straight through an open tooltip. Lifting the whole stat row above that layer
       fixes every stat-card tooltip on the page at once, without touching the sticky headers
       (they still need to sit above their own scrolling rows). */
    position: relative;
    z-index: 20;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto 0.5rem;
    padding: 0.4rem 0.5rem;
}


/* ── Stat card base (V2 style �?matches splitBill modal cards) ── */
.rev-stat-card {
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb),0.18) 0%, rgba(var(--theme-accent-rgb),0.10) 100%);
    border: 1px solid rgba(var(--theme-accent-rgb),0.30);
    transition: border-color 0.25s ease;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.rev-stat-card:hover {
    border-color: rgba(var(--theme-accent-rgb),0.45);
}

/* ── All stat cards use uniform V2 accent style (label text color provides differentiation) ── */

/* ── Separator (pipe between formula and info cards) ── */
.rev-stat-separator {
    flex-shrink: 0;
    width: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.rev-stat-separator::before {
    content: '';
    width: 1px;
    height: 60%;
    background: linear-gradient(180deg, transparent, var(--theme-border-subtle), transparent);
}

.rev-stat-separator ~ .rev-stat-card + .rev-stat-card {
    margin-left: 0.5rem;
}

/* ── Operator symbols (=, -, +) ── */
.rev-stat-operator {
    flex-shrink: 0;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    line-height: 1;
    user-select: none;
    opacity: 0.7;
}

.rev-stat-operator--minus { color: var(--theme-warning); opacity: 1; }
.rev-stat-operator--plus  { color: var(--theme-accent); opacity: 1; }

/* ── Label (uppercase title) ── */
/* bug #294: this label used to be white-space:nowrap. The cards around it are
   flex:1 1 auto with min-width:0, so they shrink freely as the viewport narrows,
   but a nowrap label cannot shrink with its card. Below the strip's natural
   width the labels overflowed and printed on top of one another (reported on an
   iPhone in portrait). Allowing the label to wrap keeps every heading inside its
   own card at ANY width; on wide screens these headings still fit on one line,
   so the desktop layout is unchanged. */
.rev-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.2rem;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    opacity: 0.9;
}

/* Narrow screens: the formula strip wraps instead of crushing (bug #294).
   The strip is one non-wrapping flex row of 6 cards plus the equals and minus
   glyphs, which needs roughly 1200px to breathe (hence its max-width). On a
   phone it must become a 2-up grid. The operator and separator glyphs are
   hidden here because they only read as a formula on a single line; once the
   cards wrap they would land in arbitrary positions and just consume width.
   The result card keeps the full width so the headline figure still leads. */
@media (max-width: 768px) {
    .rev-stats-formula {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.4rem 0.75rem 0.75rem;
    }

    .rev-stats-formula .rev-stat-card {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
    }

    .rev-stats-formula .rev-stat-card--result {
        flex-basis: 100%;
        min-width: 100%;
    }

    .rev-stats-formula .rev-stat-operator,
    .rev-stats-formula .rev-stat-separator {
        display: none;
    }

    /* the separator is gone, so its sibling spacing rule must go with it */
    .rev-stats-formula .rev-stat-separator ~ .rev-stat-card + .rev-stat-card {
        margin-left: 0;
    }
}

/* ── Value (the number) ── */
.rev-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-bright);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ══�?REVENUE HEADER BAR ══�?*/
/* The header carries two clusters: title + view tabs on the left, the report toolbar on
   the right. Without wrapping, the right cluster gets crushed at narrower widths and its
   label and hint collapse into 3 and 4 line columns. Wrapping lets the toolbar drop to its
   own full-width row instead, which is the only honest way to fit eight controls. */
.rev-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
}

.rev-header-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.25rem 0;
    /* Allowed to grow into the free space but never to force the header wider than its
       container, which is what produced the squeezed column in the first place. */
    flex: 1 1 auto;
    min-width: 0;
}

/* Report actions read as one group rather than eight loose buttons competing with the
   view tabs. A hairline and a little inset are enough; a filled container here would
   compete with the stat cards directly above. */
.rev-header-controls .rev-report-btn {
    flex: 0 0 auto;
}

.rev-report-btns {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rev-report-label {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    margin-right: 0.25rem;
}

.rev-header .btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.2;
    border-radius: 6px;
}

#selectedDateRange {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-muted);
    letter-spacing: 0.03em;
}

/* --- REVENUES: Search bar --- */
/* revenues search-bar: uses base .search-bar styles (aligned with Campaigns) */

/* --- REVENUES: Stat card label colors (themed) --- */
.rev-stat-label--green { color: var(--theme-text-heading); }
.rev-stat-label--blue { color: var(--theme-info); }
.rev-stat-label--red { color: var(--theme-danger-muted); }
.rev-stat-label--amber { color: var(--theme-warning); }
.rev-stat-label--cyan { color: var(--theme-cyan); }
.rev-stat-label--purple { color: var(--theme-purple); }
.rev-stat-label--orange { color: var(--theme-orange); }

/* --- REVENUES: Tooltip (info popup) --- */
.rev-tooltip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 3px;
    color: var(--theme-warning);
    font-size: 0.6rem;
    /* NO opacity on this element (2026-08-10). Any opacity below 1 creates a stacking context,
       which trapped .rev-tooltip-popup's z-index:9999 inside the icon: the popup then painted
       BELOW later page content and the commissions table header cut straight through it. The
       dimming now lives on the glyph, which has no descendants to trap. Applied here so every
       stat-card tooltip on the page is fixed, not just the one that exposed it. */
    transition: none;
}
.rev-tooltip-icon > i {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.rev-tooltip-icon:hover > i,
.rev-tooltip-icon:focus-visible > i { opacity: 1; }
.rev-tooltip-icon:focus-visible {
    outline: 2px solid var(--theme-warning);
    outline-offset: 2px;
    border-radius: 3px;
}
.rev-tooltip-icon--lg {
    font-size: 0.72rem;
    margin-left: 0;
}
.rev-tooltip-popup {
    display: none;
    position: absolute;
    top: 16px;
    right: 0;
    background: var(--theme-overlay-dark);
    border: 1px solid rgba(var(--theme-warning-rgb), 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    white-space: nowrap;
    z-index: 9999;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.04);
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--theme-text-secondary);
    font-weight: normal;
    text-align: left;
    text-transform: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.rev-tooltip-popup--wide {
    white-space: normal;
    width: 290px;
}
.rev-tooltip-popup--below {
    top: 26px;
}

/* --- REVENUES: Report buttons (Generate Report By) --- */
.rev-report-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.2;
    /* FR#32: two-word labels ("Export Excel") wrapped to a second line in the
       nowrap flex row, rendering that button taller than its siblings and
       breaking the row's vertical alignment. Keep every report button on one line. */
    white-space: nowrap;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-hover));
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.rev-report-btn:hover {
    background: linear-gradient(135deg, var(--theme-accent-soft), var(--theme-accent));
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--theme-accent-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.rev-report-btn:active {
    background: var(--theme-accent-active);
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 2px rgba(0,0,0,0.1);
}

/* --- REVENUES: Generate Report By label --- */
.rev-report-label-text {
    /* Was hardcoded #ffffff, which is invisible on the light themes. Uses the same
       secondary-text token as every other field label so it survives a theme switch. */
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* This is a label for the buttons beside it, not a sentence. Wrapping it across three
       lines was the single worst thing in this toolbar. */
    white-space: nowrap;
    margin-right: 0.1rem;
}

/* The "select a center" hint is a full sentence sharing a flex row with eight buttons, so
   it was collapsing into a narrow four-line column. It now stays on one line and, when the
   row runs out of width, takes a line of its own instead of squeezing. */
.rev-report-hint {
    white-space: nowrap;
    flex: 0 1 auto;
}

@media (max-width: 1500px) {
    /* Below this the toolbar cannot share a line with the title without crushing, so it
       takes a row of its own. Two clean rows beat an L-shape with a pocket of dead space
       under the title. The hint and its info icon are NOT given their own basis, so they
       wrap together as a pair onto the same line instead of stacking into three rows. */
    .rev-header-controls {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 900px) {
    /* On narrow screens the toolbar is its own block: left-aligned, full width, so the
       buttons wrap into a tidy grid instead of a ragged right edge. */
    .rev-header-controls {
        justify-content: flex-start;
        flex-basis: 100%;
    }
    .rev-header-controls .rev-report-hint {
        text-align: left;
    }
}

/* --- REVENUES: Status filter actions --- */
.rev-status-action {
    background: none;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
}
.rev-status-action--select { color: var(--theme-accent); }
.rev-status-action--clear { color: var(--theme-danger); }

/* --- REVENUES: Checkbox accent --- */
.rev-checkbox {
    margin-right: 0.5rem;
    accent-color: var(--theme-accent);
}

/* --- REVENUES: inline flag toggle (Discounted only) ---
   2026-07-20: styled to sit in the filter row as a peer of .filter-select, not
   as a bare checkbox. Same height, radius, border and font-size so the row reads
   as one control group. Gets an accented state when checked so an active filter
   is visible at a glance rather than needing the checkbox itself to be read. */
.rev-flag-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-glass-border);
    border-radius: 6px;
    background: var(--theme-card);
    color: var(--theme-text-bright);
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
}

.rev-flag-toggle:hover {
    border-color: var(--theme-accent);
}

.rev-flag-toggle:has(input:checked) {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

/* Keyboard focus must be visible on the label, since the input itself is small. */
.rev-flag-toggle:focus-within {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
}

/* --- REVENUES: Date range display --- */
#selectedDateRange {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* --- REVENUES: Table wrapper border --- */
.rev-table-wrapper {
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.12);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* --- REVENUES: Loading text --- */
.rev-loading-text {
    color: var(--theme-text-muted);
}

/* --- REVENUES: Table-specific overrides --- */
/* @DEPRECATED alternating rows/hover/cursor moved to base .data-table */

#revenuesTable.rev-table .status-badge {
    font-size: 0.75rem;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}

/* --- BOOKINGS: Table alternating rows + hover --- */
/* @DEPRECATED alternating rows/hover/transition moved to base .data-table */

/* --- SETTINGS MODAL: Tab bar --- */
/* @DEPRECATED stg-tabs �?settings modal now uses mt-tab-bar/mt-tab from maintab-modal */
#settingsModal .stg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    border-bottom: 2px solid rgba(var(--theme-accent-rgb), 0.25);
    background: transparent;
}

#settingsModal .stg-tabs .tab-btn {
    font-size: 0.78rem;
    padding: 0.6rem 1rem;
    border: 2px solid rgba(var(--theme-accent-rgb), 0.25);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--theme-border);
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: var(--theme-overlay-dark);
    margin-bottom: -2px;
    position: relative;
}

#settingsModal .stg-tabs .tab-btn:hover {
    color: var(--theme-text-secondary);
    background: rgba(var(--theme-accent-rgb), 0.05);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    border-bottom-color: transparent;
}

#settingsModal .stg-tabs .tab-btn.active {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
    border-bottom-color: var(--theme-overlay-dark);
    background: var(--theme-overlay-dark);
    font-weight: 600;
}

/* @DEPRECATED stg-form styles �?settings modal now uses maintab-modal base styles */

/* @DEPRECATED stg-section-title �?replaced by mt-section-title in maintab-modal */

/* @DEPRECATED stg-box �?replaced by mt-preview-box in maintab-modal */

/* --- SETTINGS MODAL: Items sub-tabs compact --- */
#settingsModal .items-subtabs {
    gap: 0.5rem;
    padding: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.2);
}

#settingsModal .items-subtab-btn {
    min-height: 60px;
    padding: 0.6rem 0.5rem;
    border-width: 1px;
    border-radius: 5px;
}

#settingsModal .subtab-icon {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

#settingsModal .subtab-label {
    font-size: 0.8rem;
}

/* ============================================================
   SETTINGS MODAL V2 DEEP REDESIGN �?Tab Content Enhancements
   ============================================================ */

/* --- Section containers: override heavy inline borders --- */
#settingsModal .stg-section {
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15) !important;
    border-radius: 5px !important;
    padding: 0.85rem !important;
    margin-bottom: 0.85rem !important;
    background: rgba(var(--theme-card-rgb), 0.4) !important;
}

/* --- Section dividers: match org modal mt-section style --- */
#settingsModal .stg-divider {
    border: none !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* --- Section header + button layout --- */
#settingsModal .stg-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 0.5rem;
}

/* --- Compact buttons inside settings --- */
#settingsModal .stg-btn {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.7rem !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

/* @DEPRECATED stg-info �?replaced by mt-preview-box in maintab-modal */

/* @DEPRECATED stg-grid-2/3 �?replaced by mt-grid-2/3 in maintab-modal */

/* --- Inline form with label + input on same row --- */
#settingsModal .stg-inline-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

#settingsModal .stg-inline-field label {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    font-weight: 500;
    white-space: nowrap;
    min-width: fit-content;
}

#settingsModal .stg-inline-field .form-input {
    max-width: 200px;
}

/* --- Checkbox styling in settings --- */
#settingsModal .stg-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

#settingsModal .stg-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-accent);
}

#settingsModal .stg-checkbox label {
    font-size: 0.75rem;
    color: var(--theme-text-bright);
    cursor: pointer;
    margin: 0;
}

/* --- Tooltip overrides for settings --- */
#settingsModal .stg-tooltip {
    background: var(--theme-card) !important;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3) !important;
    border-radius: 5px !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.72rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    max-width: 300px !important;
}

/* --- Data tables inside settings --- */
#settingsModal .data-table {
    border: none;
    border-radius: 4px;
    overflow: hidden;
}

#settingsModal .data-table th {
    background: var(--theme-card);
    color: var(--theme-accent);
    font-size: 0.68rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--theme-accent);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#settingsModal .data-table td {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.08);
}

#settingsModal .data-table tbody tr:hover {
    background: rgba(var(--theme-accent-rgb), 0.05);
}

/* --- Card grid items (tables, packages, etc.) --- */
#settingsModal .stg-card {
    background: rgba(var(--theme-card-rgb), 0.4);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    border-radius: 5px;
    padding: 0.65rem 0.75rem;
    transition: border-color 0.15s;
    cursor: pointer;
}

#settingsModal .stg-card:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    background: rgba(var(--theme-card-rgb), 0.6);
}

/* --- Preview/status badges --- */
#settingsModal .stg-badge {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#settingsModal .stg-badge--active {
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-accent);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
}

#settingsModal .stg-badge--inactive {
    background: rgba(var(--theme-muted-text-rgb), 0.15);
    color: var(--theme-text-muted);
    border: 1px solid rgba(var(--theme-muted-text-rgb), 0.3);
}

/* ============================================================
   Settings Modal �?Premium Redesign
   ============================================================ */

/* --- Modal chrome overrides --- */
#settingsModal .modal-content {
    border: 1px solid rgba(var(--theme-accent-rgb), 0.18);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(var(--theme-accent-rgb), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- Header: refined with subtle gradient bottom edge --- */
#settingsModal .modal-header,
#fullMovementsModal .modal-header {
    padding: 0.85rem 1.25rem;
    background: linear-gradient(180deg, var(--theme-card) 0%, rgba(var(--theme-card-rgb), 0.85) 100%);
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    position: relative;
}
#settingsModal .modal-header::after,
#fullMovementsModal .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--theme-accent-rgb), 0.25), transparent);
}
#settingsModal .modal-header h3,
#fullMovementsModal .modal-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--theme-text-bright);
}
#settingsModal .stg-header-subtitle,
#fullMovementsModal .stg-header-subtitle {
    font-size: 0.72rem;
    color: var(--theme-text-muted);
    font-weight: 400;
    margin-left: 0.6rem;
    opacity: 0.8;
}

/* --- Close button (header) �?solid red (matching modal pattern) --- */
#settingsModal .stg-close-btn,
#fullMovementsModal .stg-close-btn {
    background: var(--theme-danger);
    border: 1px solid var(--theme-danger);
    color: var(--theme-danger-contrast);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}
#settingsModal .stg-close-btn:hover,
#fullMovementsModal .stg-close-btn:hover {
    background: var(--theme-danger-hover);
    border-color: var(--theme-danger-hover);
    box-shadow: 0 2px 8px rgba(var(--theme-danger-rgb), 0.35);
}

/* --- Footer: refined --- */
#settingsModal .modal-footer {
    padding: 0.7rem 1.25rem;
    background: linear-gradient(0deg, var(--theme-card) 0%, rgba(var(--theme-card-rgb), 0.85) 100%);
    border-top: 1px solid rgba(var(--theme-accent-rgb), 0.12);
    position: relative;
}
#settingsModal .modal-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--theme-accent-rgb), 0.2), transparent);
}

/* --- Tab bar: refined underline style --- */
#settingsModal .mt-tab-bar {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 1rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: rgba(var(--theme-body-rgb), 0.6);
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.1);
    margin-bottom: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-accent-rgb), 0.25) transparent;
}
#settingsModal .mt-tab-bar::-webkit-scrollbar {
    height: 4px;
}
#settingsModal .mt-tab-bar::-webkit-scrollbar-track {
    background: transparent;
}
#settingsModal .mt-tab-bar::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-radius: 2px;
}

#settingsModal .mt-tab {
    font-size: 0.65rem;
    padding: 0.5rem 0.5rem;
    flex: 0 0 auto;
    text-align: center;
    white-space: nowrap;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--theme-text-muted);
    font-weight: 500;
    position: relative;
    top: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#settingsModal .mt-tab:hover {
    color: var(--theme-text-secondary);
    background: transparent;
    border-color: transparent;
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.25);
}

#settingsModal .mt-tab.active {
    color: var(--theme-accent);
    background: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--theme-accent);
    font-weight: 600;
}

/* --- Tab content spacing --- */
#settingsModal .mt-tab-content {
    padding-top: 1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* --- Body: lighter bg (matching V2 game/FnB modals) + refined scrollbar --- */
#settingsModal .modal-body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--theme-body);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-accent-rgb), 0.2) transparent;
}
#settingsModal .modal-body::-webkit-scrollbar {
    width: 5px;
}
#settingsModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
#settingsModal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-radius: 3px;
}
#settingsModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--theme-accent-rgb), 0.35);
}
#settingsModal .modal-body > .mt-tab-bar {
    flex-shrink: 0;
}

/* Tab content scrolling �?thin scrollbar */
#settingsModal .modal-body > .mt-tab-content.active {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-accent-rgb), 0.15) transparent;
}
#settingsModal .modal-body > .mt-tab-content.active::-webkit-scrollbar {
    width: 4px;
}
#settingsModal .modal-body > .mt-tab-content.active::-webkit-scrollbar-track {
    background: transparent;
}
#settingsModal .modal-body > .mt-tab-content.active::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-radius: 2px;
}

/* Point of Sale tab �?3-panel fills available modal height without scrolling */
#settingsModal .modal-body > .mt-tab-content#items.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#settingsModal #itemsContent {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
#settingsModal #itemsInventory.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Menu tab �?3-panel fills available modal height without scrolling (same as POS) */
#settingsModal .modal-body > .mt-tab-content#menu.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#settingsModal #menuContent {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
#settingsModal .mt-tab-content#menu {
    padding-top: 0;
}

/* --- Help text --- */
#settingsModal .stg-help {
    font-size: 0.68rem;
    color: var(--theme-text-muted);
    margin-top: 0.25rem;
    line-height: 1.45;
    opacity: 0.85;
}

/* --- Section cards: unified premium style (lighter than body, like V2 cards) --- */
#settingsModal .stg-section-card {
    border: 1px solid rgba(var(--theme-accent-rgb), 0.14);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    background: rgba(var(--theme-card-rgb), 0.45);
    transition: border-color 0.2s ease, background 0.2s ease;
}
#settingsModal .stg-section-card:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.25);
    background: rgba(var(--theme-card-rgb), 0.55);
}
#settingsModal .stg-section-card h4.mt-section-title {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Color-accent section variants */
#settingsModal .stg-section--amber {
    border-color: rgba(var(--theme-warning-rgb), 0.18) !important;
}
#settingsModal .stg-section--purple {
    border-color: rgba(var(--theme-purple-rgb), 0.18) !important;
}
#settingsModal .stg-section--cyan {
    border-color: rgba(var(--theme-cyan-rgb), 0.18) !important;
}

/* --- Section titles: refined --- */
#settingsModal .mt-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --- Section divider: gradient fade --- */
#settingsModal .stg-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--theme-accent-rgb), 0.15), transparent);
    margin: 1rem 0;
    border: none;
}

/* --- Business Opening Hours: per-day rows --- */
#settingsModal .biz-hours-row {
    display: grid;
    grid-template-columns: 88px 1fr 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.08);
}
#settingsModal .biz-hours-row:last-child {
    border-bottom: none;
}
#settingsModal .biz-hours-day {
    color: var(--theme-text-bright);
    font-size: 0.8rem;
    font-weight: 600;
}
#settingsModal .biz-hours-time {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--theme-border);
    background: rgba(var(--theme-card-rgb), 0.6);
    color: var(--theme-text-bright);
    font-size: 0.78rem;
    transition: opacity 0.2s ease;
}
#settingsModal .biz-hours-time:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
#settingsModal .biz-hours-closed-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--theme-text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
    cursor: pointer;
    justify-self: end;
}
@media (max-width: 640px) {
    #settingsModal .biz-hours-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "day closed" "open close";
        row-gap: 0.35rem;
    }
    #settingsModal .biz-hours-day { grid-area: day; }
    #settingsModal .biz-hours-closed-label { grid-area: closed; }
    #settingsModal .biz-hours-row .biz-hours-time:nth-of-type(1) { grid-area: open; }
    #settingsModal .biz-hours-row .biz-hours-time:nth-of-type(2) { grid-area: close; }
}

/* --- Toggle switch: proper CSS class --- */
#settingsModal .stg-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}
#settingsModal .stg-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
#settingsModal .stg-toggle-track {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--theme-disabled-border);
    border-radius: 20px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
#settingsModal .stg-toggle input:checked + .stg-toggle-track {
    background: var(--theme-accent);
    box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.3);
}
#settingsModal .stg-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--theme-text-bright);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#settingsModal .stg-toggle input:checked ~ .stg-toggle-thumb {
    transform: translateX(18px);
}

/* --- Form refinements --- */
#settingsModal .form-input,
#settingsModal select.form-input {
    background: rgba(var(--theme-body-rgb), 0.5);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.12);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Dropdown popup options need EXPLICIT contrast in both day and night themes.
   Bug fix 2026-04-28: was referencing `--theme-text` (no such variable) which
   fell through to a light-grey fallback (#e0e0e0): readable on dark themes
   but invisible against day-theme white-ish option panels. Use --theme-text-primary
   (which always tracks the active theme) and a safe dark fallback so options
   are legible regardless of whether the variable is set. Works for native browser
   dropdown popups across Chrome/Edge/Safari/Firefox. */
#settingsModal select.form-input option,
#settingsModal select.form-input optgroup {
    background: var(--theme-card, #ffffff);
    color: var(--theme-text-primary, #1a1a1a);
}
#settingsModal .form-input:focus,
#settingsModal select.form-input:focus {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.08);
    outline: none;
}

/* --- Preview box: refined --- */
#settingsModal .mt-preview-box {
    background: rgba(var(--theme-card-rgb), 0.4);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.14);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

/* --- No-center placeholder: refined --- */
#settingsModal [id$="NoCenter"] {
    color: var(--theme-text-muted) !important;
    font-size: 0.88rem;
    opacity: 0.7;
}

/* --- Inline setting rows (QR validity, sync intervals, etc.) --- */
#settingsModal .stg-inline-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--theme-card-rgb), 0.35);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.1);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}
#settingsModal .stg-inline-row:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.2);
}

/* --- Lighting test buttons grid --- */
#settingsModal .stg-test-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .rev-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .rev-stat-value {
        font-size: 0.95rem;
    }
    #settingsModal .mt-tab {
        font-size: 0.66rem;
        padding: 0.4rem 0.5rem;
    }
    #settingsModal .mt-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Membership Discounts Accordion ── */
.md-accordion-card {
    background: var(--theme-card);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}
.md-accordion-card:hover { border-color: var(--theme-accent); }
.md-accordion-card.md-orphaned { background: var(--theme-danger-bg); border-color: var(--theme-danger-muted); }
.md-accordion-card.md-orphaned:hover { border-color: var(--theme-danger-muted); }

.md-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    gap: 0.5rem;
    user-select: none;
}
.md-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.md-header-right {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.md-chevron {
    font-size: 0.7rem;
    color: var(--theme-border);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.md-plan-name {
    font-size: 0.85rem;
    font-weight: 600;
}
.md-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.md-badge-active { background: rgba(var(--theme-accent-rgb),0.15); color: var(--theme-accent); }
.md-badge-inactive { background: rgba(var(--theme-muted-text-rgb),0.2); color: var(--theme-border); }

.md-summary-chips {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-left: 0.25rem;
}
.md-chip {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 5px;
    border: 1px solid;
    border-radius: 3px;
    white-space: nowrap;
}

/* Accordion body */
.md-accordion-body {
    padding: 0 0.8rem 0.8rem;
    border-top: 1px solid rgba(var(--theme-accent-rgb), 0.25);
}
.md-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.8rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.md-line-discounts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.md-line-discount-card {
    border: 1px solid;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    background: rgba(0,0,0,0.2);
}
.md-ldc-header {
    font-weight: 600;
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.md-ldc-value {
    color: var(--theme-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.md-ldc-conditions {
    font-size: 0.6rem;
    color: var(--theme-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.md-ldc-target {
    margin-top: 0.3rem;
    font-size: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: baseline;
}
.md-target-badge {
    font-weight: 600;
    font-size: 0.6rem;
}
.md-target-names {
    color: var(--theme-text-secondary);
    font-size: 0.6rem;
    word-break: break-word;
}

/* Additional discount card */
.md-additional-discount-card {
    border: 1px solid var(--theme-warning-soft);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    background: rgba(var(--theme-warning-rgb),0.05);
}
.md-add-value {
    color: var(--theme-warning-soft);
    font-size: 0.85rem;
    font-weight: 600;
}
.md-calc-info {
    margin-top: 0.6rem;
    font-size: 0.65rem;
    color: var(--theme-border);
    padding: 0.4rem 0.5rem;
    background: var(--theme-glass-soft);
    border-radius: 4px;
    border: 1px solid var(--theme-glass-divider);
}

@media (max-width: 768px) {
    .md-line-discounts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .md-summary-chips { display: none; }
}

/* ── Membership Discounts Compact Row ── */
.md-row {
    background: var(--theme-card);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
    border-radius: 5px;
    margin-bottom: 0.35rem;
    transition: border-color 0.15s;
}
.md-row:hover { border-color: var(--theme-accent); }
.md-row--orphaned { background: var(--theme-danger-bg); border-color: var(--theme-danger-muted); }
.md-row--orphaned:hover { border-color: var(--theme-danger-muted); }

.md-row-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.md-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 130px;
    flex-shrink: 0;
}
.md-name-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    white-space: nowrap;
}
.md-name--orphaned { color: var(--theme-danger-muted); }

.md-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.md-dot--active { background: var(--theme-accent); }
.md-dot--inactive { background: var(--theme-border); }

.md-tags {
    display: flex;
    gap: 0.4rem;
    flex: 1;
    flex-wrap: wrap;
}
.md-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.72rem;
    white-space: nowrap;
}
.md-tag-label {
    font-weight: 500;
    opacity: 0.8;
}
.md-tag-val {
    font-weight: 700;
}
.md-tag--countup  { background: rgba(var(--theme-accent-rgb),0.1);  color: var(--theme-accent); }
.md-tag--countdown { background: rgba(var(--theme-info-rgb),0.1); color: var(--theme-info); }
.md-tag--items    { background: rgba(var(--theme-orange-rgb),0.1); color: var(--theme-orange); }
.md-tag--credit   { background: rgba(var(--theme-purple-rgb),0.1); color: var(--theme-purple); }

.md-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .md-row-inner { flex-wrap: wrap; }
    .md-name { min-width: auto; width: 100%; }
    .md-tags { width: 100%; }
}

/* Membership discount modal targeting controls */
.md-radio-label,
.md-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 0.1rem 0;
}
.md-radio-label:hover,
.md-checkbox-label:hover { color: var(--theme-text-primary); }
.md-checkbox-label {
    padding: 0.15rem 0;
}

/* ── Settings 2-Column Layout ── */
/* @DEPRECATED stg-2col - replaced by mt-grid-2 in maintab-modal */
.stg-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.stg-2col > .stg-full { grid-column: 1 / -1; }
.maintab-modal .mt-full { grid-column: 1 / -1; }

/* ── Settings Card Grid (POS Categories, etc.) ── */
.stg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}
.stg-mini-card {
    background: var(--theme-card);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    transition: border-color 0.15s;
}
.stg-mini-card:hover { border-color: var(--theme-accent); }
.stg-mini-card--inactive { opacity: 0.55; }

/* POS Keyboard Navigation Badges */
.pos-kb-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-warning);
    color: var(--theme-overlay-subtle);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    animation: posKbBadgeFadeIn 0.15s ease-out;
}
@keyframes posKbBadgeFadeIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
.pos-kb-mode-indicator {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.pos-kb-page-hint {
    font-size: 0.65rem;
    color: var(--theme-text-muted);
    text-align: center;
    margin-top: 0.3rem;
}

/* ============================================
   Organization Modal �?Tabbed Compact Layout
   ============================================ */

/* ============================================
   Shared Tab Bar Styles (used by org + center modals)
   ============================================ */
.maintab-modal .mt-tab-bar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    background: var(--theme-body);
    z-index: 2;
    padding: 0.5rem 1.5rem 0;
    border-bottom: 1px solid var(--theme-border-subtle);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    overflow: hidden;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* @2026-05-12: font shrunk from 0.88rem -> 0.75rem and padding tightened so that
   all 10 organisation-modal tabs (General … LHDN e-Invoicing) fit on a single row
   at the standard modal-content-large width. */
.maintab-modal .mt-tab {
    padding: 0.45rem 0.7rem;
    background: var(--theme-card);
    border: 1px solid var(--theme-border-subtle);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    position: relative;
    top: 1px;
}

.maintab-modal .mt-tab:hover {
    color: var(--theme-text-secondary);
    background: var(--theme-surface-hover);
    border-color: var(--theme-border);
}

.maintab-modal .mt-tab.active {
    color: var(--theme-accent);
    background: var(--theme-body);
    border-color: rgba(var(--theme-accent-rgb), 0.33);
    border-bottom: 1px solid var(--theme-body);
}

/* Tab content panels */
.maintab-modal .mt-tab-content {
    display: none;
}

.maintab-modal .mt-tab-content.active {
    display: block;
}

/* Grid layouts (org-specific aliases) */
#organizationModal .org-grid-2,
.maintab-modal .mt-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

#organizationModal .org-grid-3,
.maintab-modal .mt-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 1rem;
}

#organizationModal .org-grid-4,
.maintab-modal .mt-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 1rem;
}

/* ============================================
   Shared Maintab Modal Compact Styles
   ============================================ */
.maintab-modal .form-group {
    margin-bottom: 0.7rem;
}

.maintab-modal .form-group label {
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
    color: var(--theme-text-secondary);
}

.maintab-modal .form-input,
.maintab-modal select.form-input,
.maintab-modal .searchable-dropdown-trigger {
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    height: 38px;
    box-sizing: border-box;
    line-height: 1.4;
}

.maintab-modal textarea.form-input {
    height: auto;
    min-height: 70px;
}

/* Phone input prefix select �?override inline styles */
.maintab-modal .phone-input-wrapper .country-code-select {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.9rem !important;
    height: 38px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}

.maintab-modal .phone-input-wrapper {
    align-items: center;
}

/* Shared grid layouts */
.maintab-modal .mt-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.maintab-modal .mt-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 1rem;
}

.maintab-modal .mt-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 1rem;
}

/* Helper text */
.maintab-modal small {
    font-size: 0.78rem !important;
}

/* Checkbox labels */
.maintab-modal .form-group label span {
    font-size: 0.88rem;
}

/* Section titles */
.maintab-modal .mt-section-title {
    color: var(--theme-text-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.5rem 0 0.7rem 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--theme-border-subtle);
}

.maintab-modal .mt-section-title:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

@media (max-width: 768px) {
    .maintab-modal .mt-grid-2,
    .maintab-modal .mt-grid-3,
    .maintab-modal .mt-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Section dividers */
.maintab-modal .mt-section,
#organizationModal .org-section {
    border-bottom: 1px solid var(--theme-border-subtle);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
/* Drop the divider on the last section of a tab �?a trailing rule at the
   bottom of the tab page is visual noise, not a separator. */
.maintab-modal .mt-tab-content > .mt-section:last-child,
.maintab-modal .mt-tab-content > .org-section:last-child,
#organizationModal .mt-tab-content > .org-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#organizationModal .org-section-title {
    color: var(--theme-text-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.7rem 0;
}

/* Preview boxes */
.maintab-modal .mt-preview-box,
#organizationModal .org-preview-box {
    background: var(--theme-card);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    border-radius: 5px;
    padding: 0.7rem 0.9rem;
    margin: 0.3rem 0 0.6rem 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

.maintab-modal .mt-preview-box .mt-preview-title,
#organizationModal .org-preview-box .org-preview-title {
    color: var(--theme-text-heading);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}

/* Responsive: stack grids on narrow screens */
@media (max-width: 768px) {
    #organizationModal .org-grid-2,
    #organizationModal .org-grid-3,
    #organizationModal .org-grid-4 {
        grid-template-columns: 1fr;
    }

    .maintab-modal .mt-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .maintab-modal .mt-tab {
        font-size: 0.72rem;
        padding: 0.4rem 0.6rem;
    }
}

/* ── Inventory Tab Styles ── */
.inv-pill {
    background: transparent;
    border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
}
.inv-pill:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}
.inv-pill.active {
    background: transparent;
    border-color: var(--theme-accent);
    color: var(--theme-accent);
    font-weight: 600;
}
.inv-table-row {
    display: flex;
    padding: 0.3rem 0.5rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--theme-border-subtle);
    cursor: pointer;
    transition: background 0.15s;
    align-items: center;
}
.inv-table-row:hover {
    background: var(--theme-surface-hover);
}
.inv-table-row.selected {
    background: rgba(var(--theme-accent-rgb), 0.1);
    border-left: 3px solid var(--theme-accent);
}

/* Inventory Tab �?Fill available space in settings modal */
#settingsModal .mt-tab-content#items {
    padding-top: 0;
}
#itemsContent {
    height: 100%;
}
#itemsInventory {
    margin: -0.25rem -1rem -1rem -1rem;
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    height: calc(100vh - 195px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* Inventory Tab �?Sortable Column Headers */
.inv-sort-col {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    position: relative;
}
.inv-sort-col:hover {
    color: var(--theme-accent);
}

/* Inventory Movement Table �?Resizable Columns */
.inv-mv-col {
    flex-shrink: 0;
    position: relative;
    user-select: none;
}
.inv-mv-col::after {
    content: '';
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 1;
}
.inv-mv-col:hover::after {
    background: rgba(var(--theme-accent-rgb), 0.3);
}
.inv-mv-col.col-dragging::after {
    background: rgba(var(--theme-accent-rgb), 0.6);
}
.inv-mv-col:last-child::after {
    display: none;
}

/* Inventory Movement �?Sortable Column Headers */
.inv-mv-sortable {
    user-select: none;
    transition: color 0.15s;
}
.inv-mv-sortable:hover {
    color: var(--theme-accent) !important;
}

/* Inventory Panel Resizer Dividers */
.inv-panel-divider {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
}
.inv-panel-divider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 1px;
    background: var(--theme-border-subtle);
}
.inv-panel-divider:hover,
.inv-panel-divider.dragging {
    background: rgba(var(--theme-accent-rgb), 0.3);
}
.inv-panel-divider:hover::after,
.inv-panel-divider.dragging::after {
    background: var(--theme-accent);
}

/* Inventory Tab �?Category Panel */
.inv-cat-row {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0.5rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--theme-border-subtle);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.inv-cat-row:hover {
    background: var(--theme-surface-hover);
}
.inv-cat-row.inv-cat-selected {
    background: rgba(var(--theme-accent-rgb), 0.1);
    border-left: 3px solid var(--theme-accent);
}
.inv-cat-actions {
    display: none;
    gap: 0.3rem;
    margin-top: 0.2rem;
}
.inv-cat-row:hover .inv-cat-actions,
.inv-table-row:hover .inv-cat-actions {
    display: flex;
}
/* FR#36: the favourite star must be ALWAYS visible, unlike the hover-only edit/delete
   cluster above. It is a state indicator (which items are favourites) as much as a
   control, and on a touchscreen till there is no hover at all — a hover-gated star
   would be permanently unreachable. Kept outside .inv-cat-actions for that reason. */
.inv-fav-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.68rem;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    margin-left: 0.15rem;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.inv-fav-btn:hover {
    background: rgba(240, 180, 41, 0.15);
}
/* Grid variant: anchored to the card's top-right so it cannot collide with the
   bottom-row edit (left:6px) / delete (right:6px) buttons. */
.inv-grid-card-fav {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    cursor: pointer;
    font-size: 0.68rem;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
    z-index: 1;
}
.inv-grid-card-fav:hover {
    background: rgba(240, 180, 41, 0.15);
}
.inv-cat-action-btn {
    font-size: 0.65rem;
    color: var(--theme-text-muted);
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    transition: all 0.15s;
}
.inv-cat-action-btn:hover {
    color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.15);
}
.inv-cat-action-del:hover {
    color: var(--theme-danger-soft);
    background: rgba(var(--theme-danger-rgb), 0.15);
}
/* Drag-to-reorder styles */
.inv-cat-drag-handle {
    opacity: 0.4;
    transition: opacity 0.15s;
}
.inv-cat-row:hover .inv-cat-drag-handle {
    opacity: 1;
}
/* ===== Mini Table Cards (Settings Modal) ===== */
/* Base card �?mirrors .table-card at ~45% scale */
.mini-tc {
    background: var(--theme-body);
    border: 1px solid var(--theme-accent);
    border-radius: 5px;
    padding: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    aspect-ratio: 176 / 200;
}
.mini-tc:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(var(--theme-accent-rgb), 0.25);
}

/* Snooker theme */
.mini-tc.mt-snooker {
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border: none;
    border-radius: 5px;
    padding: 5px;
    aspect-ratio: 176 / 240;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.mini-tc.mt-snooker:hover {
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

/* Arcade theme �?cyberpunk, matches live .theme-arcade */
.mini-tc.mt-arcade {
    background: linear-gradient(145deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    border: none;
    border-radius: 5px;
    padding: 5px;
    aspect-ratio: 176 / 240;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.mini-tc.mt-arcade:hover {
    box-shadow: 0 4px 12px rgba(255, 50, 180, 0.3);
}
/* Arcade cyberpunk diamond pockets */
.mini-tc.mt-arcade .mt-pocket {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #03000f;
    border: 1px solid #00ffe0;
    box-shadow: 0 0 3px rgba(0,255,224,0.8);
    transform: rotate(45deg);
}
.mini-tc.mt-arcade .mt-p-ml,
.mini-tc.mt-arcade .mt-p-mr {
    border-color: #ff2d78;
    box-shadow: 0 0 3px rgba(255,45,120,0.8);
    transform: translateY(-50%) rotate(45deg);
}
/* Arcade felt �?cyberpunk surface. No border (would shift content); use inset box-shadow instead for zero-layout-impact neon ring */
.mini-tc.mt-arcade .mt-felt {
    background: radial-gradient(ellipse at 50% 30%, #1a0030 0%, #0d0018 50%, #080010 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,50,180,0.25);
}
.mini-tc.mt-arcade .mt-felt .mt-status {
    color: #ff2d78 !important;
    text-shadow: 0 0 3px rgba(255,45,120,0.6);
}
.mini-tc.mt-arcade .mt-felt .mt-timer {
    color: #ffdd00 !important;
    text-shadow: 0 0 4px rgba(255,220,0,0.7);
}

/* Ball badge �?exact replica of .ball-badge at ~56% scale (18px vs 32px) */
/* Actual card: solid background color + inset shadows for 3D sphere */
.mini-tc .mt-ball {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    box-shadow:
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}
.mini-tc .mt-ball span {
    color: white;
    font-size: 0.42rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.mini-tc:hover .mt-ball {
    box-shadow:
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(var(--theme-danger-rgb), 0.6);
}

/* Pockets */
.mini-tc .mt-pocket {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-overlay-dark) 40%, var(--theme-overlay-subtle) 100%);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
    z-index: 5;
}
.mini-tc .mt-p-tl { top: 2px; left: 2px; }
.mini-tc .mt-p-tr { top: 2px; right: 2px; }
.mini-tc .mt-p-bl { bottom: 2px; left: 2px; }
.mini-tc .mt-p-br { bottom: 2px; right: 2px; }
.mini-tc .mt-p-ml { top: 50%; left: 2px; transform: translateY(-50%); }
.mini-tc .mt-p-mr { top: 50%; right: 2px; transform: translateY(-50%); }

/* Felt surface */
.mini-tc .mt-felt {
    border-radius: 3px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3px;
    gap: 1px;
}
.mini-tc .mt-felt .mt-timer {
    font-family: 'Courier New', monospace;
    font-size: 0.5rem;
    font-weight: 700;
    color: white;
}
.mini-tc .mt-felt .mt-status {
    font-size: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Pool theme */
.mini-tc.mt-pool {
    background: transparent;
    border: none;
    padding: 0;
    aspect-ratio: 176 / 200;
}
.mini-tc .mt-rail {
    border-radius: 4px;
    padding: 3px;
    height: 100%;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.mini-tc .mt-pool-felt {
    border-radius: 2px;
    height: 100%;
    padding: 3px;
    display: flex;
    flex-direction: column;
}
.mini-tc .mt-cushion {
    border-radius: 2px;
    height: 100%;
    padding: 3px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 1px;
}
.mini-tc .mt-table-name {
    font-size: 0.45rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}

/* Pool-square theme �?square aspect ratio */
.mini-tc.mt-pool-square {
    background: var(--theme-modal-bg);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
    padding: 0;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
}
.mini-tc .mt-title-bar {
    padding: 1px 3px;
    border-radius: 3px 3px 0 0;
    text-align: center;
}
.mini-tc .mt-title-bar .mt-table-name {
    font-size: 0.45rem;
    font-weight: 600;
}

/* Snooker-square theme �?square aspect ratio */
.mini-tc.mt-snooker-square {
    background: linear-gradient(145deg, #6b4532 0%, #5c3d2e 50%, #4a3025 100%);
    border: none;
    border-radius: 5px;
    padding: 5px;
    aspect-ratio: 1 / 1;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.mini-tc.mt-snooker-square:hover {
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

/* Access Card theme �?pure white (2026-04-21: stripe + chip removed, see .theme-access-card). */
.mini-tc.mt-access-card {
    background: #ffffff;
    border: none;
    padding: 0;
    overflow: visible;
    border-radius: 6px;
    aspect-ratio: 176 / 240;
    margin-top: 10px; /* aligns row height with sibling .mt-snooker / .mt-arcade / .mt-fnb / .mt-rental (all 10px for ball-badge overhang) */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mini-tc.mt-access-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Karaoke mini card �?square, dark bg, label color border */
.mini-tc.mt-karaoke {
    background: linear-gradient(145deg, #1a1a2e 0%, #16162a 50%, #0f0f1f 100%);
    border: 2px solid var(--theme-accent);
    border-radius: 5px;
    padding: 5px;
    aspect-ratio: 1 / 1;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.mini-tc.mt-karaoke:hover {
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}
/* Bed mini card �?rectangular, rail bg, ball badge */
.mini-tc.mt-bed {
    border: none;
    border-radius: 5px;
    padding: 5px;
    aspect-ratio: 176 / 240;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    overflow: visible;
}
.mini-tc.mt-bed:hover {
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}
/* Rental mini card — square to match karaoke/snooker-square */
.mini-tc.mt-rental {
    background: var(--theme-body, #0f0f1a);
    border: 2px solid var(--theme-accent);
    border-radius: 5px;
    padding: 5px;
    aspect-ratio: 1 / 1;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.mini-tc.mt-rental:hover {
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}
/* Color band at top */
.mini-tc .mt-stripes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    z-index: 0;
    border-radius: 6px 6px 0 0;
}
/* Card body */
.mini-tc .mt-ac-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 3px;
    text-align: center;
}
.mini-tc .mt-ac-name {
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-overlay-subtle);
}
.mini-tc .mt-ac-status {
    font-size: 0.35rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-border);
    display: flex;
    align-items: center;
    gap: 2px;
}
.mini-tc .mt-ac-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    display: inline-block;
    animation: classicBlink 1.6s ease-in-out infinite;
}
/* RFID chip at bottom-left */
.mini-tc .mt-ac-bottom {
    position: relative;
    z-index: 1;
    height: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 4px 2px;
}

/* F&B card */
.mini-tc.mt-fnb {
    background: var(--theme-input-bg, #1a1a2e);
    border: 1px solid #2d4a35;
    border-radius: 6px;
    padding: 5px;
    aspect-ratio: 1 / 1;
    margin-top: 10px;
    overflow: visible;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mini-tc.mt-fnb:hover {
    border-color: var(--theme-orange);
    box-shadow: 0 4px 10px rgba(var(--theme-orange-rgb), 0.25);
}

/* Delete button �?hidden by default, shown on hover */
.mini-tc .mt-delete {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-danger);
    border: 1.5px solid var(--theme-overlay-subtle);
    color: var(--theme-danger-contrast);
    font-size: 0.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s;
}
/* Ensure grid containers don't clip delete buttons */
#tablesList, #tableTypesList {
    overflow: visible;
}
.mini-tc .mt-delete:hover {
    transform: scale(1.15);
    background: var(--theme-danger-hover);
}
.mini-tc:hover .mt-delete {
    display: flex;
}

/* Drag handle �?hidden by default, shown on hover (mirrors delete button style) */
.mini-tc .mt-drag {
    display: none;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-border-subtle);
    border: 1.5px solid var(--theme-overlay-subtle);
    color: var(--theme-border-subtle-contrast);
    font-size: 0.55rem;
    line-height: 1;
    cursor: grab;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s, background 0.1s;
}
.mini-tc .mt-drag:hover {
    transform: scale(1.15);
    background: var(--theme-accent);
}
.mini-tc .mt-drag:active {
    cursor: grabbing;
    background: var(--theme-accent-hover);
}
.mini-tc:hover .mt-drag {
    display: flex;
}

/* SortableJS ghost/chosen */
.sortable-ghost-table {
    opacity: 0.3;
    background: var(--theme-surface-hover) !important;
    border: 1px dashed var(--theme-accent) !important;
}
.sortable-chosen-table {
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3) !important;
    border-color: var(--theme-accent) !important;
}
.inv-cat-drag-ghost {
    opacity: 0.4;
    background: var(--theme-surface-hover) !important;
    border-left: 3px solid var(--theme-accent) !important;
}
.menu-sort-ghost {
    opacity: 0.4;
    background: var(--theme-surface-hover) !important;
    border-radius: 4px;
}
.inv-cat-drag-chosen {
    background: var(--theme-surface-hover) !important;
}
.inv-cat-drag-active {
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}
/* Item drag handle */
.inv-item-drag-handle {
    cursor: grab;
    color: var(--theme-text-muted);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s;
}
.inv-item-drag-handle:hover {
    color: var(--theme-accent);
}
.inv-item-drag-handle:active {
    cursor: grabbing;
}
/* Grid view styles */
.inv-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.35rem;
    padding: 0.35rem;
}
.inv-grid-card {
    background: var(--theme-card);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 6px;
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.inv-grid-card:hover {
    border-color: var(--theme-accent);
    background: var(--theme-surface-hover);
}
.inv-grid-card.inv-grid-selected {
    border-color: var(--theme-accent);
    background: var(--theme-surface-hover);
    box-shadow: 0 0 6px rgba(var(--theme-accent-rgb), 0.25);
}
.inv-grid-card-name {
    font-size: 0.68rem;
    color: var(--theme-text-bright);
    font-weight: 500;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.inv-grid-card-price {
    font-size: 0.65rem;
    color: var(--theme-accent);
    font-weight: 600;
}
.inv-grid-card-stock {
    font-size: 0.6rem;
    margin-top: 0.1rem;
}
.inv-grid-card-action {
    position: absolute;
    bottom: 6px;
    display: none;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--theme-text-muted);
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.inv-grid-card:hover .inv-grid-card-action {
    display: flex;
}
.inv-grid-card-action-edit {
    left: 6px;
}
.inv-grid-card-action-edit:hover {
    color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.15);
}
.inv-grid-card-action-del {
    right: 6px;
}
.inv-grid-card-action-del:hover {
    color: var(--theme-danger-soft);
    background: rgba(var(--theme-danger-rgb), 0.15);
}
.inv-grid-card > .inv-item-drag-handle {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 0.6rem;
    display: none;
}
.inv-grid-card:hover > .inv-item-drag-handle {
    display: flex;
}

/* New invoice line flash highlight */
@keyframes newLineFlash {
    0%   { background: rgba(var(--theme-accent-rgb), 0.25); }
    100% { background: transparent; }
}
tr.new-line-flash > td {
    animation: newLineFlash 1.5s ease-out forwards;
}

/* ── Admins page · Global Pulse header button ────────────────────────────
   Cyberpunk neon icon-button placed beside the green site-appearance gear
   in the Admins Management card header. Square 36×36 to match the gear's
   aspect ratio + height; hover shifts the colour from cyan→magenta with a
   stronger glow and a tilt on the globe glyph for tactile feedback. Server-
   gated: only emitted into the DOM when the session is admin (the page
   itself also 403s any non-admin request as defence-in-depth).
*/
#admins .card-header .admin-global-pulse-btn {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0, 240, 255, 0.55);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(255, 42, 109, 0.05));
    color: #00f0ff;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
    box-shadow:
        0 0 12px -4px rgba(0, 240, 255, 0.55),
        inset 0 0 8px rgba(0, 240, 255, 0.08);
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
    isolation: isolate;
}
#admins .card-header .admin-global-pulse-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    border: 1px dashed rgba(0, 240, 255, 0.5);
    pointer-events: none;
    animation: adminGlobalPulseOrbit 6s linear infinite;
    opacity: 0.55;
    transition: opacity 0.25s, border-color 0.25s;
}
#admins .card-header .admin-global-pulse-btn::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 42, 109, 0) 0%, rgba(255, 42, 109, 0) 78%, rgba(255, 42, 109, 0.55) 100%),
        linear-gradient(315deg, rgba(255, 42, 109, 0) 0%, rgba(255, 42, 109, 0) 92%, rgba(255, 42, 109, 0.45) 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.9;
}
#admins .card-header .admin-global-pulse-btn .admin-global-pulse-icon {
    color: #00f0ff;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6));
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(.2,.7,.2,1), filter 0.25s;
}
#admins .card-header .admin-global-pulse-btn:hover {
    color: #ff2a6d;
    background: linear-gradient(135deg, rgba(255, 42, 109, 0.14), rgba(0, 240, 255, 0.08));
    border-color: rgba(255, 42, 109, 0.7);
    box-shadow:
        0 0 0 3px rgba(255, 42, 109, 0.15),
        0 0 18px -2px rgba(255, 42, 109, 0.7),
        0 0 30px -8px rgba(0, 240, 255, 0.5),
        inset 0 0 10px rgba(255, 42, 109, 0.12);
    transform: translateY(-1px);
}
#admins .card-header .admin-global-pulse-btn:hover .admin-global-pulse-icon {
    color: #ff2a6d;
    transform: rotate(-12deg);
    filter: drop-shadow(0 0 6px rgba(255, 42, 109, 0.7));
}
#admins .card-header .admin-global-pulse-btn:hover::before {
    opacity: 1;
    border-color: rgba(255, 42, 109, 0.7);
    animation-duration: 2.4s;
}
#admins .card-header .admin-global-pulse-btn:active { transform: translateY(0); }
@keyframes adminGlobalPulseOrbit {
    to { transform: rotate(360deg); }
}

/* ===== Pickleball Theme (court, 176×240) — sports court: surround + boundary + center net + kitchen/service lines, NO pockets, NO wooden rail ===== */
.table-card.theme-pickleball {
    background: linear-gradient(145deg, #2b3a42 0%, #1f2b31 50%, #161f23 100%); /* court surround (asphalt/slate) */
    border: none; border-radius: 8px; padding: 12px; width: 176px; height: 240px;
    position: relative; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease; margin-top: 20px;
}
.table-card.theme-pickleball:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-pickleball:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(132,204,22,0.6); }
.table-card.theme-pickleball:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-pickleball .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-pickleball .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-pickleball .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
/* Felt = the court; white boundary = sidelines/baselines. Surface colour (green/blue) comes from surface_color inline. */
.table-card.theme-pickleball .snooker-felt { border-radius: 4px; padding: 8px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; position: relative; border: 2px solid rgba(255,255,255,0.55); box-sizing: border-box; }
.table-card.theme-pickleball .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
.table-card.theme-pickleball .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; position: relative; z-index: 2; }
.table-card.theme-pickleball .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; position: relative; z-index: 2; }
.table-card.theme-pickleball .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-pickleball .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-pickleball .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; position: relative; z-index: 2; }
.table-card.theme-pickleball .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
/* Court markings overlay (behind content, never blocks clicks) */
.table-card.theme-pickleball .pb-court { position: absolute; inset: 8px; pointer-events: none; z-index: 1; }
/* Kitchen (non-volley zone) — contrasting band across the net, the signature two-tone court look */
.table-card.theme-pickleball .pb-kitchen-zone { position: absolute; left: 0; right: 0; top: 31%; height: 38%; background: rgba(20, 150, 95, 0.32); }
/* Center net — dashed line across the middle with end posts */
.table-card.theme-pickleball .pb-net { position: absolute; left: -2px; right: -2px; top: 50%; height: 0; transform: translateY(-1px); border-top: 2px dashed rgba(255,255,255,0.9); }
.table-card.theme-pickleball .pb-post { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fff; transform: translateY(-50%); box-shadow: 0 0 3px rgba(0,0,0,0.4); }
.table-card.theme-pickleball .pb-post-l { left: -3px; }
.table-card.theme-pickleball .pb-post-r { right: -3px; }
/* Kitchen (non-volley zone) lines — parallel to the net on each side */
.table-card.theme-pickleball .pb-kitchen { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid rgba(255,255,255,0.55); }
.table-card.theme-pickleball .pb-kitchen-top { top: 31%; }
.table-card.theme-pickleball .pb-kitchen-bottom { top: 69%; }
/* Center service line — baseline to kitchen line on each half (skips the kitchen) */
.table-card.theme-pickleball .pb-center { position: absolute; left: 50%; width: 0; border-left: 1.5px solid rgba(255,255,255,0.5); transform: translateX(-0.75px); }
.table-card.theme-pickleball .pb-center-top { top: 0; height: 31%; }
.table-card.theme-pickleball .pb-center-bottom { bottom: 0; height: 31%; }
.table-card.theme-pickleball.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-pickleball.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-pickleball.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-pickleball.maintenance .table-status,
.table-card.theme-pickleball.inactive .table-status { color: var(--theme-text-secondary); }

/* ===== Golf Driving Range Themes (176×240 portrait) — sports facility cards, NO pockets, NO wooden rail ===== */
/* Two variants: 'golf-outdoor' (open-air range: grass + yardage lines + flags + tee deck) and
   'golf-indoor' (simulator bay: dark room + glowing projection screen + hitting mat + tee). */
/* Shared card chrome (mirrors the pickleball card structure) */
.table-card.theme-golf-outdoor,
.table-card.theme-golf-indoor {
    border: none; border-radius: 8px; padding: 12px; width: 176px; height: 240px;
    position: relative; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease; margin-top: 20px;
}
.table-card.theme-golf-outdoor { background: linear-gradient(145deg, #24361f 0%, #1a281a 50%, #121c12 100%); } /* earthy range surround */
.table-card.theme-golf-indoor  { background: linear-gradient(145deg, #171b24 0%, #10131a 50%, #0a0c11 100%); } /* dark simulator bay surround */
.table-card.theme-golf-outdoor:hover,
.table-card.theme-golf-indoor:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(var(--theme-accent-rgb), 0.3); }
.table-card.theme-golf-outdoor:hover .ball-badge,
.table-card.theme-golf-indoor:hover .ball-badge { animation: snookerBallShake 0.4s ease-out; box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 12px rgba(132,204,22,0.6); }
.table-card.theme-golf-outdoor:hover .hover-outline,
.table-card.theme-golf-indoor:hover .hover-outline { border-color: rgba(var(--theme-accent-rgb), 0.6); }
.table-card.theme-golf-outdoor .ball-badge,
.table-card.theme-golf-indoor .ball-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 20; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease; }
.table-card.theme-golf-outdoor .ball-badge.pill,
.table-card.theme-golf-indoor .ball-badge.pill { border-radius: 9999px; }
.table-card.theme-golf-outdoor .ball-badge span,
.table-card.theme-golf-indoor .ball-badge span { color: white; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
/* Felt = the scene container; per-variant background is supplied inline (like pickleball). Border differs per variant. */
.table-card.theme-golf-outdoor .snooker-felt,
.table-card.theme-golf-indoor .snooker-felt { border-radius: 6px; padding: 8px; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; position: relative; box-sizing: border-box; overflow: hidden; }
.table-card.theme-golf-outdoor .snooker-felt { border: 2px solid rgba(255,255,255,0.35); }
.table-card.theme-golf-indoor .snooker-felt { border: 2px solid rgba(120,200,255,0.25); }
.table-card.theme-golf-outdoor .hover-outline,
.table-card.theme-golf-indoor .hover-outline { position: absolute; inset: 0; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease; pointer-events: none; z-index: 10; }
.table-card.theme-golf-outdoor .table-timer,
.table-card.theme-golf-indoor .table-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 2px; margin-top: 6px; flex-shrink: 0; position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.table-card.theme-golf-outdoor .table-status,
.table-card.theme-golf-indoor .table-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; flex-shrink: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.table-card.theme-golf-outdoor .table-spacer,
.table-card.theme-golf-indoor .table-spacer { flex-grow: 1; min-height: 2px; }
.table-card.theme-golf-outdoor .btn-placeholder,
.table-card.theme-golf-indoor .btn-placeholder { height: 22px; flex-shrink: 0; }
.table-card.theme-golf-outdoor .table-operations,
.table-card.theme-golf-indoor .table-operations { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; flex-shrink: 0; margin-top: auto; position: relative; z-index: 2; }
.table-card.theme-golf-outdoor .table-operations button,
.table-card.theme-golf-indoor .table-operations button { flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
/* Scene overlay (behind content, never blocks clicks) */
.table-card.theme-golf-outdoor .gr-scene,
.table-card.theme-golf-indoor .gr-scene { position: absolute; inset: 8px; pointer-events: none; z-index: 1; overflow: hidden; border-radius: 4px; }
/* --- Outdoor range: distance/yardage lines, flag pins, tee deck --- */
.table-card.theme-golf-outdoor .gr-yard { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(255,255,255,0.4); }
.table-card.theme-golf-outdoor .gr-yard-1 { top: 40%; }
.table-card.theme-golf-outdoor .gr-yard-2 { top: 56%; }
.table-card.theme-golf-outdoor .gr-yard-3 { top: 72%; }
.table-card.theme-golf-outdoor .gr-tee { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(20,60,25,0) 0%, rgba(14,40,18,0.6) 100%); border-top: 2px solid rgba(255,255,255,0.5); }
.table-card.theme-golf-outdoor .gr-flag { position: absolute; width: 0; height: 0; }
.table-card.theme-golf-outdoor .gr-flag::before { content: ''; position: absolute; bottom: 0; left: 0; width: 1.5px; height: 16px; background: #f5f5f5; box-shadow: 0 0 2px rgba(0,0,0,0.45); }
.table-card.theme-golf-outdoor .gr-flag::after { content: ''; position: absolute; bottom: 11px; left: 1.5px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #e5372f; }
.table-card.theme-golf-outdoor .gr-flag-a { left: 26%; top: 34%; }
.table-card.theme-golf-outdoor .gr-flag-b { left: 66%; top: 51%; transform: scale(0.8); }
/* --- Indoor simulator: projection screen, beam, hitting mat, tee + ball --- */
.table-card.theme-golf-indoor .gr-screen { position: absolute; top: 30%; left: 10%; right: 10%; height: 32%; border-radius: 4px; border: 2px solid rgba(150,215,255,0.55); background: linear-gradient(180deg, #bfe3ff 0%, #8fd0f0 24%, #5bb04e 50%, #3f9a43 80%, #2f7d38 100%); box-shadow: 0 0 14px rgba(120,200,255,0.35), inset 0 0 10px rgba(255,255,255,0.15); overflow: hidden; }
.table-card.theme-golf-indoor .gr-screen-flag { position: absolute; top: 30%; left: 60%; width: 1.5px; height: 12px; background: #fff; }
.table-card.theme-golf-indoor .gr-screen-flag::after { content: ''; position: absolute; top: 0; left: 1.5px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #e5372f; }
.table-card.theme-golf-indoor .gr-beam { position: absolute; top: 22%; left: 50%; width: 2px; height: 8%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(150,215,255,0.55), rgba(150,215,255,0)); }
.table-card.theme-golf-indoor .gr-mat { position: absolute; left: 14%; right: 14%; bottom: 5%; height: 22%; border-radius: 3px; background: linear-gradient(180deg, #3aa856 0%, #2c8443 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.4); }
.table-card.theme-golf-indoor .gr-tee-peg { position: absolute; left: 50%; bottom: calc(5% + 11px); width: 2px; height: 8px; background: #e8d9a0; transform: translateX(-50%); }
.table-card.theme-golf-indoor .gr-ball { position: absolute; left: 50%; bottom: calc(5% + 18px); width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translateX(-50%); box-shadow: 0 0 4px rgba(255,255,255,0.6); }
/* Status text colours (both variants) */
.table-card.theme-golf-outdoor.available .table-status,
.table-card.theme-golf-indoor.available .table-status { color: var(--theme-accent-light); }
.table-card.theme-golf-outdoor.occupied .table-status,
.table-card.theme-golf-indoor.occupied .table-status { color: var(--theme-warning-soft); }
.table-card.theme-golf-outdoor.checkedout .table-status,
.table-card.theme-golf-indoor.checkedout .table-status { color: var(--theme-danger-soft); }
.table-card.theme-golf-outdoor.maintenance .table-status,
.table-card.theme-golf-outdoor.inactive .table-status,
.table-card.theme-golf-indoor.maintenance .table-status,
.table-card.theme-golf-indoor.inactive .table-status { color: var(--theme-text-secondary); }


/* ===== Mobile-responsive Inventory / Stock panel (updated 2026-07-13) =====
   The Inventory tab (Settings > Point of Sale > Stock) is a fixed-width 3-panel
   desktop layout (Categories | Items | Movements/Adjust). On narrow viewports it
   used to render all 3 panels squeezed side-by-side, making item names and the
   "Add" (stock adjustment) flow unusable. It briefly used a "drill-down + back
   button" mode; per owner request (2026-07-13) that back button was removed and
   replaced with a clean STACKED layout: on <=768px the 3 panels stack vertically,
   each full-width with its own bounded height + internal scroll, so every panel
   (incl. Panel-3's "Add" stock cluster) stays reachable with no back button and
   no Bug #205 regression. Desktop (viewport > 768px) is untouched. */

/* Bug #205 (round 2): the horizontal-scroll guard below was invisible in
   practice: it made .inv-detail-header technically scrollable, but that's a
   ~240px-wide strip with no visible scrollbar/affordance, so a real user has
   no way to discover the "Add" button is reachable by swiping sideways inside
   that thin row. Switched to wrap: whenever the header's title + dropdown +
   icon buttons + "Add" don't fit on one line, they now reflow onto a second
   line instead: same fix already proven for <=768px, now applied at ANY
   width (iPad landscape ~1024-1366px included). On a real wide desktop where
   everything already fits on one line, flex-wrap has zero visual effect. */
.inv-detail-header {
    flex-wrap: wrap;
    row-gap: 0.3rem;
    overflow-x: auto;
    min-width: 0;
}
.inv-detail-header #inventoryMovementFilterSelect {
    min-width: 0;
    flex: 1 1 auto;
}
@media (max-width: 768px) {
    #inventoryPanelContainer {
        flex-direction: column;
        height: auto;
        max-height: none;
        overflow-y: auto;
    }
    #inventoryPanelContainer .inv-panel-divider { display: none !important; }
    /* Stacked mobile layout (2026-07-13, replaces the old drill-down + back-button
       pattern). All three panels stay in the DOM, each full-width and vertically
       stacked; the container scrolls. Every panel is always reachable: no back
       button needed: while each keeps its own bounded height + internal scroll so
       one long list can't push the others off-screen. Panel-3's "Add" stock
       cluster stays reachable via the .inv-detail-header wrap fix above (Bug #205).
       Bug #205 (round 2): each panel is a column flexbox with a flex:1 child (the
       actual category/item/movement list) that needs a DEFINITE parent height to
       grow into. flex:none + max-height alone lets the panel shrink to hug only
       its non-flex children (header + toggle), leaving 0px for the list itself -
       that's why category names disappeared in portrait. Adding height: 62vh
       alongside max-height: 62vh gives the panel a real height so its flex:1
       child list actually renders. */
    #inventoryPanel1,
    #inventoryPanel2,
    #inventoryRightPanel {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        min-height: 0;
        height: 62vh;
        max-height: 62vh;
        border-bottom: 1px solid var(--theme-border-subtle);
    }
    #inventoryRightPanel { border-bottom: none; }

    /* Larger touch targets for rows/buttons inside the stock panels */
    #inventoryPanel1 .inv-cat-row,
    #inventoryPanel2 .inv-table-row,
    #inventoryPanel2 .inv-grid-card {
        min-height: 44px;
    }
    #inventoryPanel1 .inv-cat-row > div,
    #inventoryPanel2 .inv-table-row > div:first-child {
        font-size: 0.85rem !important;
    }
    #inventoryPanel2Toolbar {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    #inventoryPanel2ToolbarLeft {
        flex-wrap: wrap !important;
        width: 100%;
    }
    #inventoryPanel2ToolbarLeft #inventorySearchInput {
        width: 100% !important;
        flex: 1 1 100%;
        min-height: 38px;
        font-size: 0.85rem !important;
    }
    /* Movement table on mobile: allow horizontal scroll instead of clipping columns */
    #inventoryMovementsHeader,
    #inventoryMovementsList {
        overflow-x: auto;
    }
    #inventoryMovementsHeader > div,
    .inv-mv-row {
        min-width: 760px;
    }
    /* Stock adjustment ("Add") popup — comfortable touch sizing on phones */
    #stockAdjustmentModal .sa-input,
    #stockAdjustmentModal .sa-select {
        min-height: 42px;
        font-size: 0.95rem !important;
    }
    #stockAdjustmentModal button[type="submit"],
    #stockAdjustmentModal button[type="button"] {
        min-height: 42px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CLIENTS PAGE - WEEKLY SUMMARY CHIPS + SORTABLE COLUMNS          (2026-08-14)
   ------------------------------------------------------------------------------
   Built on the existing .rev-stats-formula / .rev-stat-card language from the
   Revenues page rather than a parallel system, so only the differences live here.
   Every colour is a theme variable: the theme engine rewrites these on :root when
   the user switches light/dark, so both themes are covered by construction and
   there is nothing hardcoded to regress. Normal document flow only, no sticky and
   no fixed positioning.
   ══════════════════════════════════════════════════════════════════════════════ */

.client-stats-strip {
    margin-bottom: 1rem;
}

/* .rev-stats-formula ships gap:0 and leans on its = / − operator elements for
   spacing. This strip has no operators, so it supplies its own gap. */
.client-stats-row {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.client-stat-chip {
    cursor: pointer;
    text-align: left;
    /* Response before behaviour: the press state is instant, the settle is short.
       Transform + border only, both compositor friendly. */
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}

.client-stat-chip:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.55);
}

/* Feedback lands on pointer-down, not on release. */
.client-stat-chip:active {
    transform: scale(0.985);
}

.client-stat-chip:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
}

.client-stat-chip--active {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 1px var(--theme-accent) inset;
}

/* A chip counting zero is a dead end. Dim it and take it out of the pointer path
   so it cannot be clicked into an empty table. */
.client-stat-chip--empty {
    opacity: 0.55;
    cursor: default;
}

.client-stat-chip--empty:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.30);
}

.client-stat-chip--empty:active {
    transform: none;
}

.client-stat-sub {
    font-size: 0.62rem;
    color: var(--theme-text-muted);
    margin-top: 0.15rem;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
}

/* ── Strip options: two segmented controls ────────────────────────────────────
   Deliberately quieter than the chips above them: smaller type, muted caption,
   no fill until a segment is active. The strip must still read as a summary
   first and a control second. These sit OUTSIDE every chip, so they can never
   land inside a chip's filter hit area. */
.client-stats-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.client-seg-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.client-seg-caption {
    font-size: 0.68rem;
    color: var(--theme-text-muted);
    letter-spacing: 0.2px;
}

.client-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.28);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--theme-card-rgb), 0.45);
}

.client-seg-btn {
    appearance: none;
    border: 0;
    border-left: 1px solid rgba(var(--theme-accent-rgb), 0.20);
    background: transparent;
    color: var(--theme-text-secondary);
    font-size: 0.7rem;
    font-family: inherit;
    line-height: 1.2;
    padding: 0.34rem 0.62rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.client-seg-btn:first-child {
    border-left: 0;
}

.client-seg-btn:hover:not(:disabled):not(.client-seg-btn--on) {
    background: rgba(var(--theme-accent-rgb), 0.10);
    color: var(--theme-text-primary);
}

.client-seg-btn:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: -2px;
}

.client-seg-btn--on {
    background: rgba(var(--theme-accent-rgb), 0.20);
    color: var(--theme-text-primary);
    font-weight: 600;
}

/* Named, visible, and plainly not selectable. An honest gap beats a wrong number. */
.client-seg-btn--unavailable,
.client-seg-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.client-stats-filterbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.30);
    background: rgba(var(--theme-accent-rgb), 0.08);
    color: var(--theme-text-secondary);
    font-size: 0.78rem;
}

.client-stats-filterbar[hidden] {
    display: none;
}

/* ── Sortable column headers (shares .inv-mv-sortable hover behaviour) ── */
.client-sortable {
    cursor: pointer;
    user-select: none;
}

.client-sortable--active {
    color: var(--theme-accent) !important;
}

.client-sortable:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: -2px;
}

.client-sort-caret {
    font-size: 0.55rem;
    margin-left: 0.25rem;
    color: var(--theme-accent);
    line-height: 1;
}

.client-empty-row {
    text-align: center;
    padding: 1.75rem 0.75rem;
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

/* Reduced motion: keep the colour feedback, drop the physical push. */
@media (prefers-reduced-motion: reduce) {
    .client-stat-chip {
        transition: border-color 0.18s ease, background-color 0.18s ease;
    }
    .client-stat-chip:active {
        transform: none;
    }
    .client-seg-btn {
        transition: none;
    }
}

/* Phones: two chips per row so labels never crush, and the strip keeps real
   breathing room above the search bar. */
@media (max-width: 768px) {
    .client-stats-row .rev-stat-card {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
    }
    .client-stats-row .rev-stat-separator {
        display: none;
    }
    .client-stats-row .client-stat-chip--money {
        flex-basis: 100%;
        min-width: 100%;
    }
    .client-stats-strip {
        margin-bottom: 1.25rem;
    }
    /* Stack the two option groups so neither segmented control has to shrink its
       labels, and keep real breathing room between them. */
    .client-stats-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .client-seg {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------
   Bug #358 (reopened): booking detail footer must never clip an action.

   In the check-in context this footer carries Close plus five actions
   (Cancel Booking, No-Show, Edit, Start walk-in game, Check In). The
   global rules above USED TO pin every modal footer to flex-wrap: nowrap,
   with the <=768px block re-asserting it via !important, so the row could
   not break and "Check In" was pushed past the right edge of the shell
   and clipped, leaving the primary action unreachable.

   Those global rules now wrap, so this block is a belt-and-braces guard
   rather than the fix itself: it keeps this specific footer wrapping even
   if the global rules are ever reverted, and min-width:0 is what actually
   lets the action group shrink into the footer so its buttons break onto
   a second row instead of overflowing.
   ------------------------------------------------------------------ */
#bookingDetailModal .modal-footer,
#bookingDetailModal .modal-footer > div {
    flex-wrap: wrap !important;
    row-gap: 0.5rem;
}

#bookingDetailModal .modal-footer > #bookingDetailActions {
    flex: 1 1 auto;
    min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Native <select> option popups: theme them portal-wide.

   Bug #373 (2026-08-21, Patrick). The option list of a native <select> is drawn
   by the OS, not by the page, so a themed <select> still pops a WHITE panel and
   the options inherit the select's LIGHT text colour — unreadable on the
   green/dark presets. Reported against Tournaments > Create Tournament > Format
   (Double Elimination / Round Robin / Swiss System / Group + Knockout), but it
   was portal-wide: every native dropdown outside the four scopes that already
   carried a local fix had it.

   This promotes the existing per-scope fix to every <select> in the staff
   portal. The four earlier narrow copies stay where they are — they are more
   specific, they set equivalent values, and leaving them avoids touching four
   files for no behavioural gain:
     - style.css:9892                    #settingsModal select.form-input option
     - shared/css/phone-input-styles.css .country-code-select option
     - revenue/css/revenue-charts.css    the two chart pickers
     - client-portal/css/client.css      .modal select option (separate portal)

   Uses the live theme tokens, which are always defined on :root and rewritten by
   the theme JS, so LIGHT presets render a light panel with dark text and dark
   presets render a dark panel with light text — no theme is hard-coded here.

   Only background-color and color are reliably honoured on <option> in
   Chromium and Firefox. Safari/iOS ignores them and falls back to the system
   menu, which is already legible; that is the accepted limit, same as the
   note on the revenue-charts rule.
   ────────────────────────────────────────────────────────────────────────── */
select option,
select optgroup {
    background-color: var(--theme-card, #1a2e22);
    color: var(--theme-text-primary, #f0f0f0);
}

select optgroup {
    font-weight: 700;
}

/* The highlighted row needs its own pair or Chromium keeps the OS blue with the
   inherited light text. The doubled linear-gradient is the documented Chromium
   workaround for forcing a background on a selected <option>.

   The foreground is --theme-accent-contrast-STRICT, not --theme-accent-contrast.
   Classic Baize, which is the shipped default, force-overrides the plain token to
   #ffffff for button and badge labels (theme-colors.js, "User preference 2026-05-24").
   White on #22c55e is 2.28:1 — fine for a large bold button, well under the floor for
   a dense list of small option labels, and it would have made the CURRENTLY SELECTED
   row the least readable one in every dropdown in the portal. The strict token carries
   the WCAG picker's own answer and is never overridden. */
select option:checked,
select option:hover {
    background: var(--theme-accent, #22c55e) linear-gradient(0deg, var(--theme-accent, #22c55e), var(--theme-accent, #22c55e));
    color: var(--theme-accent-contrast-strict, var(--theme-accent-contrast, #0b2413));
}

/* Setting an explicit colour on <option> above also wiped the user agent's own grey for
   disabled entries, so an unselectable option became pixel-identical to a selectable one.
   Live consumers include the POS tender list, booking durations that clash with an existing
   booking, and the tournament round-format rows. Restore a visibly muted state. */
select option:disabled,
select optgroup:disabled {
    color: var(--theme-text-muted, #9ca3af);
    opacity: 0.7;
}