:root {
    /* Main Color Palette */
    --bg-page: #C0BBBC;
    --bg-card: #FFFFFF;
    --bg-callout: #f5f5f5;

    /* Text Colors */
    --text-main: #333333;
    --text-muted: #555555;

    /* Input Colors */
    --input-border: #cccccc;
    --input-focus: #7a7a7a;
    --input-bg: #ffffff;
    --input-text: #333333;

    /* Dropdowns */
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f1f5f9;

    /* Button Colors */
    --btn-bg: #222222;
    --btn-text: #FFFFFF;
    --btn-hover: #444444;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Gaps */
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;

    /* Typography */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-base: 16px;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Calendar colors*/
    --calendar-border: #e2e8f0;
    --calendar-bg-hover: #f8fafc;
    --calendar-header-bg: #3498db;
    --calendar-nav-bg: #e0e5ec;
    --calendar-nav-hover: #cdd4e0;

    /* Nav Bar*/
    --nav-bar-blue: #2c3e50;

    /* Badges */
    --badge-bg: #e74c3c;
    --badge-text: #ffffff;

    /* Modal */
    --modal-overlay: rgba(0, 0, 0, 0.6);
    --table-header-bg: #f1f5f9;

    /* Transitions */
    --transition-fast: 0.2s ease;

    /* Shadows */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Day Schedule */
    --day-header-bg: #f8fafc;
    --day-header-color: #2c3e50;
    --day-header-border: #e2e8f0;
    --bg-glass: rgba(255, 255, 255, 0.92);

    /* Shadows */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.05);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 15px 40px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 5px rgba(0, 0, 0, 0.1);

    /* Semantic Colors */
    --color-success: #27ae60;
    --color-warning: #f1c40f;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #92400e;
    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-danger-bg: rgba(220, 38, 38, 0.04);
    --color-danger-ring: rgba(220, 38, 38, 0.22);
    --color-danger-ring-focus: rgba(220, 38, 38, 0.35);
    --color-info: #3498db;
    --color-info-dark: #2980b9;
    --accent-primary: #3498db;
    --border-light: rgba(0, 0, 0, 0.04);

    /* Button Action Tokens */
    --btn-confirm-bg: #27ae60;
    --btn-confirm-hover: #219653;
    --btn-cancel-bg: #64748b;
    --btn-cancel-hover: #475569;

    /* Ride Types */
    --ride-public-bg: #e3f2fd;
    --ride-public-border: #2196f3;
    --ride-private-bg: #ffebee;
    --ride-private-border: #f44336;
    --ride-pencil-bg: #fffde7;
    --ride-pencil-border: #fbc02d;
    --ride-ghost-bg: #f3e8ff;
    --ride-ghost-border: #a855f7;

    /* Vendor Tags */
    --vendor-yellow: #fef08a;
    --vendor-pink: #fdf2f8;
    --vendor-black: #334155;
    --vendor-grey: rgb(94, 117, 148);
    --vendor-purple: #4c2673;
    --vendor-red: #b51a1a;
    --vendor-peach: #d4987f;
    --vendor-blue: #006989;

    /* Status Colors (Themable) */
    --status-poa: #4A5899;
    --status-ccof: #1589B7;
    --status-unpaid: #FF3366;
    --status-paid: #33673B;
    --status-voucher: #20BF55;
    --status-comp: #559CAD;
    --status-refunded: #800000;
    --status-no-show: #3AAED8;
    --status-new: #CA61C3;
    --status-hold: #4C1036;
    --status-confirmed: #33673B;
    --status-canceled: #DB2B39;
    --status-charge-m-o: #E24E1B;
    --status-public: #2563eb;
    --status-private: #9333ea;
    --status-ghost: #a855f7;

    /* Time Groups (Today Page) */
    --time-group-a-bg: #fff9c4;
    --time-group-b-bg: #d1ecf1;

    /* Grid Borders */
    --grid-border: #e2e8f0;
}

/* --- Global Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* MIDNIGHT THEME (Dark Mode) */
[data-theme='midnight'] {
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --bg-callout: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --input-border: #334155;
    --input-focus: #38bdf8;
    --btn-bg: #38bdf8;
    --btn-text: #0f172a;
    --btn-hover: #7dd3fc;
    --calendar-border: #334155;
    --calendar-bg-hover: #334155;
    --calendar-header-bg: #1e293b;
    --calendar-nav-bg: var(--btn-bg);
    --calendar-nav-hover: var(--btn-hover);
    --nav-bar-blue: #020617;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --bg-glass: rgba(30, 41, 59, 0.95);
    --day-header-bg: #1e293b;
    --day-header-color: #f8fafc;
    --day-header-border: #334155;
    --border-light: rgba(255, 255, 255, 0.05);
    --table-header-bg: #334155;
    --input-bg: #0f172a;
    --input-text: #ffffff;
    --dropdown-bg: #1e293b;
    --dropdown-hover: #334155;

    /* Darker Ride Types for Midnight */
    --ride-public-bg: #1e3a8a;
    --ride-public-border: #3b82f6;
    --ride-private-bg: #450a0a;
    --ride-private-border: #ef4444;
    --ride-pencil-bg: #422006;
    --ride-pencil-border: #f59e0b;

    /* Time Groups for Midnight */
    --time-group-a-bg: #1e293b;
    --time-group-b-bg: #0f172a;

    /* Darker Vendor Colors for Midnight Checkout */
    --vendor-yellow: #78350f; /* Golden Amber */
    --vendor-pink: #4a1439;
    --vendor-black: #020617;
    --vendor-purple: #2e1065;
    --vendor-red: #450a0a;
    --vendor-peach: #9a3412; /* Burnt Orange */
    --vendor-blue: #1e3a8a;
    --vendor-grey: #1e242d;

    /* Grid Borders */
    --grid-border: #334155;
}

/* FESTIVE THEME (Holiday Special) */
[data-theme='festive'] {
    --bg-page: #1a2a1a;
    /* Dark Forest Green */
    --bg-card: #ffffff;
    --bg-callout: #fffbeb;
    --text-main: #1e293b;
    --text-muted: #475569;
    --input-border: #22c55e;
    --btn-bg: #dc2626;
    /* Festive Red */
    --btn-text: #ffffff;
    --btn-hover: #b91c1c;
    --calendar-header-bg: #15803d;
    /* Forest Green */
    --nav-bar-blue: #064e3b;
    --accent-gold: #f59e0b;
    --color-info: #15803d;
}

/* PRINCESS THEME (Pink, Purple & Royal Sparkles) */
[data-theme='princess'] {
    /* Main Color Palette */
    --bg-page: #fdf2f8;           /* Soft Cotton Candy Pink */
    --bg-card: #ffffff;           /* Crisp White */
    --bg-callout: #fce7f3;        /* Light Bubblegum Accent */
    
    /* Text Colors */
    --text-main: #701a75;         /* Deep Royal Purple */
    --text-muted: #a21caf;        /* Vibrant Magenta */
    
    /* Input Colors */
    --input-bg: #ffffff;
    --input-text: #701a75;
    --input-border: #f9a8d4;      /* Pastel Pink Border */
    --input-focus: #ec4899;       /* Tiara Hot Pink */
    
    /* Dropdowns */
    --dropdown-bg: #ffffff;
    --dropdown-hover: #fce7f3;

    /* Button Colors */
    --btn-bg: #ec4899;            /* Hot Pink */
    --btn-text: #ffffff;
    --btn-hover: #db2777;         /* Deep Rose Pink */
    
    /* Calendar System */
    --calendar-border: #fbcfe8;
    --calendar-bg-hover: #fdf2f8;
    --calendar-header-bg: #db2777;
    --calendar-nav-bg: var(--btn-bg);
    --calendar-nav-hover: var(--btn-hover);
    
    /* Structural Elements */
    --nav-bar-blue: #86198f;      /* Midnight Magenta / Velvet Purple */
    --bg-glass: rgba(255, 255, 255, 0.95);
    --table-header-bg: #fbcfe8;   /* Soft Rose Header */
    --grid-border: #fbcfe8;
    
    /* Day Schedule */
    --day-header-bg: #fdf2f8;
    --day-header-color: #701a75;
    --day-header-border: #fbcfe8;

    /* Semantic / Accent Colors */
    --accent-gold: #f59e0b;       /* Crown Gold */
    --color-success: #ec4899;     
    --color-info: #db2777;

    /* Ride Types for Princess (Regal Pastels) */
    --ride-public-bg: #fae8ff;     /* Light Lavender */
    --ride-public-border: #d946ef; /* Bright Orchid */
    --ride-private-bg: #ffe4e6;    /* Soft Rose */
    --ride-private-border: #f43f5e;/* Rose Pink */
    --ride-pencil-bg: #fef9c3;     /* Pastel Shimmer Yellow */
    --ride-pencil-border: #eab308; /* Tiara Gold */

    /* Vendor Tags for Princess Checkout */
    --vendor-yellow: #fef08a;     /* Soft Gold */
    --vendor-pink: #fbcfe8;       /* Bubblegum */
    --vendor-black: #4a044e;      /* Deepest Plum */
    --vendor-purple: #f3e8ff;     /* Lavender Mist */
    --vendor-red: #fda4af;        /* Soft Coral */
    --vendor-peach: #fecdd3;      /* Blush */
    --vendor-blue: #e0f2fe;       /* Cinderella Ice Blue */
    --vendor-grey: #f1f5f9;

    /* Time Groups for Princess */
    --time-group-a-bg: #fdf2f8;   /* Tinted Pink Block */
    --time-group-b-bg: #fae8ff;   /* Tinted Lavender Block */
}

/* WOODSEY THEME (Earthy Browns & Forest Greens) */
[data-theme='woodsey'] {
    /* Main Color Palette */
    --bg-page: #1a130e;           /* Deep Bark Brown */
    --bg-card: #281e17;           /* Rich Walnut Timber */
    --bg-callout: #1e3124;        /* Deep Spruce Pine (Green #1) */
    
    /* Text Colors */
    --text-main: #f0e6d2;         /* Warm Birch Cream */
    --text-muted: #a89f88;        /* Tawny / Dried Pine Needle */
    
    /* Input Colors */
    --input-bg: #140e0a;          /* Dark Loam Soil */
    --input-text: #f0e6d2;        /* Warm Birch Cream */
    --input-border: #4a3729;      /* Cedar Bark Border */
    --input-focus: #4ade80;       /* Spring Fern Green */
    
    /* Dropdowns */
    --dropdown-bg: #281e17;       /* Rich Walnut Timber */
    --dropdown-hover: #362920;    /* Warm Wood */

    /* Button Colors */
    --btn-bg: #2d6a34;            /* Forest Pine Green */
    --btn-text: #ffffff;
    --btn-hover: #378340;         /* Vibrant Pine */
    
    /* Calendar System */
    --calendar-border: #443224;   /* Weathered Wood Border */
    --calendar-bg-hover: #362920; /* Wood Hover */
    --calendar-header-bg: #1c5225; /* Deep Evergreen Canopy */
    --calendar-nav-bg: var(--btn-bg);
    --calendar-nav-hover: var(--btn-hover);
    
    /* Structural Elements */
    --nav-bar-blue: #100b08;      /* Deep Midnight Earth */
    --bg-glass: rgba(40, 30, 23, 0.95);
    --table-header-bg: #223829;   /* Forest Pine Header (Green #2) */
    --grid-border: #443224;
    
    /* Day Schedule */
    --day-header-bg: #223829;     /* Forest Pine Day Header (Green #3) */
    --day-header-color: #f0e6d2;  /* Birch Cream */
    --day-header-border: #443224;

    /* Semantic / Accent Colors */
    --accent-gold: #d97706;       /* Amber Sap */
    --color-success: #38a169;     /* Forest Foliage */
    --color-info: #48bb78;        /* Soft Moss */

    /* Vendor Tags for Woodsey Checkout */
    --vendor-yellow: #a16207;     /* Pine Amber / Resin */
    --vendor-pink: #5a2e33;       /* Wild Berry */
    --vendor-black: #100b08;      /* Charcoal Soil */
    --vendor-purple: #3d2538;     /* Bramble Plum */
    --vendor-red: #7f1d1d;        /* Redwood Cedar */
    --vendor-peach: #9a4918;      /* Autumn Cedar */
    --vendor-blue: #1b4d3e;       /* Spruce Teal */
    --vendor-grey: #362c26;       /* Weathered Oak */

    /* Ride Types for Woodsey */
    --ride-public-bg: #1c3b24;     /* Deep Spruce Green */
    --ride-public-border: #4ade80; /* Bright Moss */
    --ride-private-bg: #4a2411;    /* Warm Cedar Chestnut */
    --ride-private-border: #f97316;/* Autumn Amber */
    --ride-pencil-bg: #3b3014;     /* Olive Ochre */
    --ride-pencil-border: #eab308; /* Sunlight Gold */

    /* Time Groups for Woodsey */
    --time-group-a-bg: #281e17;   /* Walnut Block */
    --time-group-b-bg: #1e2d21;   /* Forest Pine Block */
}

/* FIRE THEME (Volcanic Dark Mode) */
[data-theme='fire'] {
    --bg-page: #110402; /* Obsidian Red */
    --bg-card: #1c0906;
    --bg-callout: #2a0f0a;
    --text-main: #fdba74; /* Warm Glow */
    --text-muted: #ea580c;
    --input-border: #450a0a;
    --input-focus: #f97316;
    --btn-bg: #ea580c; /* Flame Orange */
    --btn-text: #ffffff;
    --btn-hover: #c2410c;
    --calendar-border: #450a0a;
    --calendar-bg-hover: #2a0f0a;
    --calendar-header-bg: #991b1b;
    --calendar-nav-bg: var(--btn-bg);
    --calendar-nav-hover: var(--btn-hover);
    --nav-bar-blue: #0c0201;
    --bg-glass: rgba(28, 9, 6, 0.95);
    --day-header-bg: #1c0906;
    --day-header-color: #fdba74;
    --day-header-border: #450a0a;
    --color-success: #f97316;
    --color-info: #ea580c;
    --grid-border: #450a0a;
    --table-header-bg: #450a0a;
    --vendor-yellow: #b45309; /* Deep Flame Orange */
    --vendor-peach: #ea580c; /* Vibrant Fire */
    --input-bg: #0c0201;
    --input-text: #fdba74;
    --dropdown-bg: #1c0906;
    --dropdown-hover: #2a0f0a;

    /* Ride Types for Fire */
    --ride-public-bg: #450a0a;
    --ride-public-border: #ef4444;
    --ride-private-bg: #7c2d12;
    --ride-private-border: #f97316;
    --ride-pencil-bg: #713f12;
    --ride-pencil-border: #eab308;
    --time-group-a-bg: #1c0906;
    --time-group-b-bg: #0c0201;
}

/* ICE THEME (Arctic Dark Mode) */
[data-theme='ice'] {
    --bg-page: #020617; /* Deep Arctic Night */
    --bg-card: #0f172a;
    --bg-callout: #1e293b;
    --text-main: #e0f2fe; /* Frosted Light Blue */
    --text-muted: #7dd3fc;
    --input-border: #1e293b;
    --input-focus: #0ea5e9;
    --btn-bg: #0ea5e9; /* Glacial Blue */
    --btn-text: #ffffff;
    --btn-hover: #0284c7;
    --calendar-border: #1e293b;
    --calendar-bg-hover: #1e293b;
    --calendar-header-bg: #075985;
    --calendar-nav-bg: var(--btn-bg);
    --calendar-nav-hover: var(--btn-hover);
    --nav-bar-blue: #010413;
    --bg-glass: rgba(15, 23, 42, 0.95);
    --day-header-bg: #0f172a;
    --day-header-color: #e0f2fe;
    --day-header-border: #1e293b;
    --color-success: #0ea5e9;
    --color-info: #0284c7;
    --grid-border: #1e293b;
    --table-header-bg: #1e3a8a;
    --vendor-yellow: #075985; /* Arctic Blue */
    --vendor-peach: #0891b2; /* Frosted Cyan */
    --input-bg: #010413;
    --input-text: #e0f2fe;
    --dropdown-bg: #0f172a;
    --dropdown-hover: #1e293b;

    /* Ride Types for Ice */
    --ride-public-bg: #1e3a8a;
    --ride-public-border: #3b82f6;
    --ride-private-bg: #1e40af;
    --ride-private-border: #60a5fa;
    --ride-pencil-bg: #164e63;
    --ride-pencil-border: #22d3ee;
    --time-group-a-bg: #0f172a;
    --time-group-b-bg: #020617;
}

html,
body {
    min-height: 100vh;
}

body {
    background-color: var(--bg-page);
    font-family: var(--font-family);
    color: var(--text-main);
    font-size: var(--font-base);
    line-height: 1.5;
    margin: 0;
    padding: var(--spacing-md);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

.hidden {
    display: none !important;
}

.poa {
    background-color: var(--status-poa);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.cc-on-file {
    background-color: var(--status-ccof);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.unpaid {
    background-color: var(--status-unpaid);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.paid {
    background-color: var(--status-paid);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.voucher {
    background-color: var(--status-voucher);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

/*Fix the color hehe */
.Charge-morning-of{
    background-color: var(--status-charge-m-o);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.complementary,
.comp {
    background-color: var(--status-comp);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.refunded {
    background-color: var(--status-refunded);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.no_show {
    background-color: var(--status-no-show);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.new {
    background-color: var(--status-new);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.hold {
    background-color: var(--status-hold);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.confirmed {
    background-color: var(--status-confirmed);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.canceled {
    background-color: var(--status-canceled);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.public {
    background-color: var(--status-public);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.private {
    background-color: var(--status-private);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

.Ghost, .ghost {
    background-color: var(--status-ghost);
    color: var(--badge-text);
    border-radius: var(--radius-md);
}

cap {
    text-transform: capitalize;
}

/* Utility Classes */
.hider2 {
    display: none !important;
}

/* Global Modal System */

#globalSearch {
    background-color: var(--bg-card);
}

#filterCriteria {
    background-color: var(--bg-card);
}

#table-filter {
    background-color: var(--bg-card);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay, rgba(0, 0, 0, 0.6));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: var(--bg-card, white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    position: relative;
    color: var(--text-main);
}

.btn-confirm {
    background-color: var(--btn-confirm-bg, var(--color-success));
    color: var(--btn-text, #ffffff);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
    transition: background-color var(--transition-fast), filter var(--transition-fast);
}

.btn-confirm:hover {
    background-color: var(--btn-confirm-hover, var(--color-success));
    filter: brightness(1.05);
}

.btn-cancel {
    background-color: var(--btn-cancel-bg, #64748b);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
    transition: background-color var(--transition-fast), filter var(--transition-fast);
}

.btn-cancel:hover {
    background-color: var(--btn-cancel-hover, #475569);
}

/* Global Text Alignment Utilities */
.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* Global Responsive Table Container */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Global Status & Feedback Utilities */
.status-msg-info {
    color: var(--color-info) !important;
}

.status-msg-success {
    color: var(--color-success) !important;
}

.status-msg-error {
    color: var(--color-danger) !important;
}