/*  ============================================================
    TTBP Design Tokens — single source of truth for colors,
    typography, spacing, radii, and shadows across all pages.
    ============================================================ */

:root {
    /* ── Brand green (top bar base) ───────────────────────── */
    --ttbp-primary:          #4f8c6d;
    --ttbp-primary-dark:     #0d3a24;
    --ttbp-primary-hover:    #468066;
    --ttbp-primary-light:    #e6f7ee;
    --ttbp-topbar-grad-top:  #5a9b79;
    --ttbp-topbar-grad-bot:  #468066;

    /* ── Navy (subbar, booking header, chips) ─────────────── */
    --ttbp-navy:             #1b3a5c;
    --ttbp-navy-dark:        #0d2555;
    --ttbp-navy-light:       #274b73;
    --ttbp-navy-action:      #23508f;

    /* ── Blue accent (active day, today, now-line) ─────────── */
    --ttbp-blue-accent:      #4a90d9;

    /* ── Cream / warm surfaces (light concept) ────────────── */
    --ttbp-cream:            #FAF6EC;
    --ttbp-page-bg:          #F3EFE4;
    --ttbp-panel-bg:         #F1EBDD;
    --ttbp-cream-deep:       #E4D9BC;

    /* ── Text ─────────────────────────────────────────────── */
    --ttbp-text:             #1f2937;
    --ttbp-text-dim:         #6b7280;

    /* ── Accent / alert ───────────────────────────────────── */
    --ttbp-accent:           #E3987F;
    --ttbp-accent-hover:     #D97757;
    --ttbp-accent-light:     #fff0e6;

    /* ── Money / status greens ────────────────────────────── */
    --ttbp-money:            #1a7a45;
    --ttbp-register-text:    #123b25;

    /* ── App backgrounds (dark theme) ─────────────────────── */
    --ttbp-app-bg-dark:      #0d1b2e;
    --ttbp-app-bg-panel:     var(--ttbp-navy);

    /* ── Shared chrome (tee sheet + F&B shells) ────────────── */
    /* Soft green top bar (same concept on both pages) */
    --ttbp-topbar-bg:        linear-gradient(180deg, var(--ttbp-topbar-grad-top) 0%, var(--ttbp-topbar-grad-bot) 100%);
    --ttbp-topbar-bg-light:  var(--ttbp-topbar-bg);
    --ttbp-shell-bg:         #152840;
    --ttbp-shell-bg-light:   var(--ttbp-page-bg);
    --ttbp-chrome-border:    rgba(30, 70, 50, 0.35);
    --ttbp-chrome-border-light: var(--ttbp-border);

    /* ── Semantic actions / surfaces (pages must use these, not hex) ── */
    --ttbp-btn-chrome:       var(--ttbp-navy-light);
    --ttbp-btn-register-bg:  #065f46;
    --ttbp-btn-register-fg:  #6ee7b7;
    --ttbp-btn-eod-bg:       #DD6832;
    --ttbp-action:           #3a7ca5;
    --ttbp-text-on-dark:     #94b8d4;
    --ttbp-text-on-dark-dim: #b0c4d8;
    --ttbp-text-on-surface:     #94b8d4;
    --ttbp-text-on-surface-dim: #b0c4d8;
    --ttbp-open-slot:           #22c55e;
    --ttbp-on-accent:           #ffffff;
    --ttbp-modal-bg:         var(--ttbp-navy);
    --ttbp-modal-hdr:        #0a3020;

    /* ── iOS-style focus / popout (frosted mute + elevated card) ── */
    --ttbp-ios-scrim-bg:     rgba(8, 12, 20, 0.28);
    --ttbp-ios-scrim-blur:   blur(28px) saturate(1.35) brightness(0.92);
    --ttbp-ios-card-radius:  16px;
    --ttbp-ios-card-shadow:  0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --ttbp-ios-mute-filter:  blur(14px) brightness(0.72) contrast(0.92);
    --ttbp-ios-scrim-bg-light: rgba(255, 255, 255, 0.22);
    --ttbp-ios-scrim-blur-light: blur(28px) saturate(1.5) brightness(1.02);
    --ttbp-ios-card-shadow-light: 0 24px 64px rgba(30, 40, 55, 0.28), 0 0 0 0.5px rgba(255, 255, 255, 0.65);
    --ttbp-ios-mute-filter-light: blur(14px) brightness(0.88) contrast(0.95);

    /* ── Semantic ──────────────────────────────────────────── */
    --ttbp-success:          var(--ttbp-money);
    --ttbp-danger:           #8b1e1e;
    --ttbp-danger-light:     #fef2f2;
    --ttbp-warning:          #f57c00;
    --ttbp-warning-light:    #fff8e1;
    --ttbp-info:             var(--ttbp-blue-accent);
    --ttbp-info-light:       #e3f2fd;

    /* ── Neutral / Gray Scale ──────────────────────────────── */
    --ttbp-white:            #ffffff;
    --ttbp-gray-50:          var(--ttbp-cream);
    --ttbp-gray-100:         var(--ttbp-page-bg);
    --ttbp-gray-200:         #e5e7eb;
    --ttbp-gray-300:         #d1d5db;
    --ttbp-gray-400:         #9ca3af;
    --ttbp-gray-500:         var(--ttbp-text-dim);
    --ttbp-gray-600:         #4b5563;
    --ttbp-gray-700:         #374151;
    --ttbp-gray-900:         var(--ttbp-text);

    /* ── Typography ────────────────────────────────────────── */
    --ttbp-font:             'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ttbp-font-mono:        'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --ttbp-fs-xs:            14px;
    --ttbp-fs-sm:            15px;
    --ttbp-fs-base:          16px;
    --ttbp-fs-lg:            17px;
    --ttbp-fs-xl:            18px;
    --ttbp-fs-2xl:           20px;
    --ttbp-fs-3xl:           24px;
    --ttbp-fw-normal:        400;
    --ttbp-fw-medium:        500;
    --ttbp-fw-semibold:      600;
    --ttbp-fw-bold:          700;

    /* ── Spacing Scale ─────────────────────────────────────── */
    --ttbp-sp-1:             4px;
    --ttbp-sp-2:             8px;
    --ttbp-sp-3:             12px;
    --ttbp-sp-4:             16px;
    --ttbp-sp-5:             20px;
    --ttbp-sp-6:             24px;
    --ttbp-sp-8:             32px;

    /* ── Borders ───────────────────────────────────────────── */
    --ttbp-border:           #8b96a3;
    --ttbp-border-dark:      #8b96a3;
    --ttbp-radius-sm:        4px;
    --ttbp-radius:           6px;
    --ttbp-radius-lg:        8px;
    --ttbp-radius-xl:        12px;
    --ttbp-radius-full:      9999px;

    /* ── Named UI accents (son's mockup; wire in later passes) ─ */
    --ttbp-eod-text:         #ffe985;
    --ttbp-temp:             #8fd0ff;
    --ttbp-raincheck:        #3d6f8f;
    --ttbp-item-draft:       #14432b;
    --ttbp-item-hot:         #5c1a2b;
    --ttbp-item-snack:       #5c3a1a;
    --ttbp-player-tan-top:   #c4bb9c;
    --ttbp-player-tan-bot:   #a89c78;
    --ttbp-cat-favorites:    #FFC400;
    --ttbp-cat-canned:       #C41E3A;
    --ttbp-cat-cocktails:    #FFD500;
    --ttbp-cat-draft:        #A9DBA4;
    --ttbp-cat-hot:          #FF5A1F;
    --ttbp-cat-sides:        #2F6FED;
    --ttbp-cat-snacks:       #8B5A2B;
    --ttbp-cat-soft:         #FF9EC7;
    --ttbp-cat-wine:         #DC143C;
    --ttbp-cat-drinks:       #4A7FBF;
    --ttbp-cat-food:         #B25A2B;

    /* ── Shadows ───────────────────────────────────────────── */
    --ttbp-shadow-sm:        0 1px 2px rgba(0,0,0,0.05);
    --ttbp-shadow:           0 4px 12px rgba(0,0,0,0.08);
    --ttbp-shadow-lg:        0 12px 24px rgba(0,0,0,0.12);
    --ttbp-shadow-xl:        0 20px 40px rgba(0,0,0,0.16);

    /* ── Inputs / Form Controls ────────────────────────────── */
    --ttbp-input-h:          38px;
    --ttbp-input-px:         12px;
    --ttbp-input-border:     var(--ttbp-border);
    --ttbp-input-radius:     var(--ttbp-radius);
    --ttbp-input-focus:      0 0 0 2px rgba(54,122,37,0.15);

    /* ── Buttons ───────────────────────────────────────────── */
    --ttbp-btn-h:            38px;
    --ttbp-btn-px:           18px;
    --ttbp-btn-radius:       var(--ttbp-radius);
    --ttbp-btn-fw:           var(--ttbp-fw-semibold);

    /* ── Tables ────────────────────────────────────────────── */
    --ttbp-th-bg:            var(--ttbp-gray-50);
    --ttbp-td-py:            10px;
    --ttbp-td-px:            12px;
    --ttbp-table-border:     var(--ttbp-border);

    /* ── Toggle Switch ─────────────────────────────────────── */
    --ttbp-toggle-w:         40px;
    --ttbp-toggle-h:         24px;
    --ttbp-toggle-knob:      16px;
    --ttbp-toggle-off:       var(--ttbp-gray-300);
    --ttbp-toggle-on:        var(--ttbp-primary);
}

/*  ── Streamlined scrollbars (Tony, 2026-09-26) ─────────────────
    One thin, rounded scrollbar for the whole staff app: tee sheet / golf register (#M),
    F&B (#fnb_dash) and everything they open (manager panel, modals, overlays appended to
    <body>), plus the customer workspace. Scoped with :has() so the course's public site
    and WP admin keep their own scrollbars. The id in the scope outranks the older
    per-element rules in style.css, so every scroller looks the same. Areas that hide
    their bar on purpose (.tee-grid, .back9-grid, .ttbp_mp_tabs: display:none /
    scrollbar-width:none) stay hidden -- those win in Chromium.
    ------------------------------------------------------------ */
:is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
:is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) ::-webkit-scrollbar-track,
:is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) ::-webkit-scrollbar-corner {
    background: transparent;
}
:is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) ::-webkit-scrollbar-thumb {
    background-color: rgba(128, 136, 148, .45);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
    min-height: 32px;
}
:is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 136, 148, .8);
}
:is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
/* Firefox has no ::-webkit-scrollbar: thin + same colors. */
@supports not selector(::-webkit-scrollbar) {
    :is(body:has(#M), body:has(#fnb_dash), .ttbp-cw-shell) *:not(.tee-grid, .back9-grid, .ttbp_mp_tabs) {
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 136, 148, .6) transparent;
    }
}

/*  ── Contrast pass (Tony, 2026-10-02) ──────────────────────────
    Text that measured under 3:1 (most under 2:1) in one or more of the 6 color schemes on the
    tee sheet / Golf Shop items panel. Most of these rules live in JS-injected <style> blocks or
    inline styles in booking.js, which load after this file -- hence the #ttbp_dashboard scope
    and, where an inline style or an !important rule has to be beaten, !important.
    Skin-aware text tokens: --ttbp-skin-fg / --ttbp-skin-fg-dim = text that sits on the SKIN's
    base (dark skin: chrome/app-dark rows; light skin: the light panels). Measured live per scheme.
    ------------------------------------------------------------ */
#ttbp_dashboard {
    --ttbp-skin-fg:      var(--ttbp-text-on-dark);
    --ttbp-skin-fg-dim:  var(--ttbp-text-on-dark-dim);
    --p4-tint-text:      #f3f4f6;   /* item tiles tinted with the item's own color */
    --p4-var-price:      #fbbf24;   /* "Variable" price */
    --ttbp-wx-fg:        var(--ttbp-text-on-dark);
}
#ttbp_dashboard.ttbp-light {
    --ttbp-skin-fg:      var(--ttbp-text-on-surface);
    --ttbp-skin-fg-dim:  var(--ttbp-text-on-surface-dim);
    --p4-tint-text:      #0f1b2e;
    --p4-var-price:      #4a3500;
    --ttbp-wx-fg:        var(--ttbp-text-on-surface);
    --ttbp-wx-cell:      rgba(0, 0, 0, .06);
    --ttbp-wx-dim:       var(--ttbp-text-on-surface-dim);
}
/* Header bar (Brand gradient): logo "G" + course name were tinted grey/mint (1.7-3.2:1) */
#ttbp_dashboard #ttbp_topbar .course-name,
#ttbp_dashboard #ttbp_topbar .logo > span { color: #ffffff !important; }
/* Weather box: condition colors (sky blue, grey...) were inline and picked for one background;
   they read 1.7-3.5:1 on the light box and on the mid-grey Clean Slate / Soft Dusk box. */
#ttbp_dashboard #ttbp_weather_box .temp,
#ttbp_dashboard #ttbp_weather_box .cond,
#ttbp_dashboard #ttbp_weather_box [style*="font-weight"] { color: var(--ttbp-wx-fg) !important; }
/* Mini calendar: header row was dimmed twice (dim color + opacity) */
#ttbp_dashboard .mini-cal-header,
#ttbp_dashboard .mini-cal-header #mini-cal-month,
#ttbp_dashboard .mini-cal-header button { color: var(--ttbp-text-on-surface) !important; }
#ttbp_dashboard .mini-cal-grid .day-hdr { opacity: 1; }
#ttbp_dashboard .mini-cal-grid .day.other-month { opacity: .72 !important; }
/* Back-nine column header + BACK tab: fixed #6b7280 grey */
#ttbp_dashboard .b9-col-label .b9-title,
#ttbp_dashboard .b9-col-label .b9-close { color: var(--ttbp-text-on-surface-dim); }
#ttbp_dashboard .tee-sheet-back-label { color: var(--ttbp-text-on-dark); }
#ttbp_dashboard.ttbp-light .tee-sheet-back-label { color: var(--ttbp-text-on-surface-dim) !important; }
/* Group drag grip (dots): on-dark color at 50% on the light sheet */
#ttbp_dashboard .bk-group-grip { color: var(--ttbp-text-on-surface); opacity: .75; }
/* Pace label: surface-dim text sits on the dark header row on Soft Dusk */
#ttbp_dashboard #pace-of-play > span:first-child { color: var(--ttbp-skin-fg-dim) !important; }
/* Blocked seat dots: open-slot green on the block's navy */
#ttbp_dashboard .pl-bubble.pl-blockseat .pill-name { color: #e2e8f0 !important; }
/* Empty tee times were faded to 40%: the time labels read about 2.1:1 in every scheme */
#ttbp_dashboard .ts-empty { opacity: .72; }
/* Unpaid players were faded to 45% (names 2.3:1). Still visibly lighter than paid at 72%. */
#ttbp_dashboard .pl-bubble.is-unpaid { opacity: .72 !important; }
/* Items panel category tabs (not selected) at 70% read 3.6-3.9:1 on the light skin */
#ttbp_dashboard.ttbp-light #ttbp_p4 .cat-tab:not(.cat-hidden):not(.cat-active) { opacity: .88 !important; }
/* Items panel group headings ("RANGE", "GIFT & PREPAID"): surface text on the near-black panel of
   a dark-skin scheme with a light surface (Soft Dusk) read 1.3:1 */
#ttbp_dashboard #ttbp_p4 .p4-cat-bar { color: var(--ttbp-skin-fg-dim) !important; }
/* Open-seat "+" on the light skin (green on pale green inside a faded empty row) */
#ttbp_dashboard.ttbp-light .pl-bubble.pl-open span { color: #14532d !important; }
/* Employee menu (Tony menu) on the light skin: role line #9ca3af (1.7:1), Log Out #ef4444 (2.5:1) */
#ttbp_dashboard.ttbp-light #ttbp_emp_dropdown .emp-dd-role { color: var(--ttbp-text-on-surface-dim) !important; }
#ttbp_dashboard.ttbp-light #ttbp_emp_dropdown .emp-dd-item[style*="239, 68, 68"],
#ttbp_dashboard.ttbp-light #ttbp_emp_dropdown .emp-dd-item[style*="#ef4444"],
#ttbp_dashboard.ttbp-light #ttbp_emp_dropdown .emp-dd-item[style*="239, 68, 68"] .dd-icon,
#ttbp_dashboard.ttbp-light #ttbp_emp_dropdown .emp-dd-item[style*="#ef4444"] .dd-icon { color: #b91c1c !important; }
/* Manager PIN box on the light skin: the field's navy border/fill disappeared into the light dialog */
html[data-ttbp-mode="light"] input[name^="ttbp_mgr_pin_"],
html[data-ttbp-mode="light"] #ttbp_dashboard.ttbp-light input[name^="ttbp_mgr_pin_"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { background: #ffffff !important; border: 2px solid #4b5563 !important; color: #111827 !important; }
html[data-ttbp-mode="light"] .ttbp-mgr-pin-lbl { color: #4b5563 !important; }
/* F&B / Lounge register (#fnb_dash), same pass: logo "G" on the Brand bar; tile text on the
   mid-grey Clean Slate tiles (on-dark text 2.5:1); empty-cart line on the light skin (1.3:1). */
#fnb_dash #fnb_topbar .logo > span { color: #ffffff !important; }
#fnb_dash:not(.fnb-light) .fnb-tile-name { color: #f3f4f6; }
#fnb_dash:not(.fnb-light) .fnb-tile-price:not([style*="color"]) { color: #e5e7eb; }
#fnb_dash.fnb-light .fnb-cart-empty { color: var(--ttbp-text-on-surface-dim) !important; }