:root {
    /* --- BRAND DESIGN TOKENS --- */
    --color-primary: #135d66; /* Darker Teal */
    --color-primary-light: #40e0d0; /* Turquoise */
    --color-secondary: #b2dfdb; /* Lighter Teal */
    --color-background: #f0ffff; /* Azure */
    --color-text: #003c43; /* Dark Teal */
    --color-text-inverse: #ffffff;
    --color-danger: #ff7f50; /* Coral */
    --color-warning: #ffc107; /* Amber */
    --color-mint-white: #faffff; /* The Palette White */

    /* Active State Colors (Pressed) */
    --color-primary-pressed: #0a383d;
    --color-secondary-pressed: #80cbc4;
    --color-danger-pressed: #e66b40;
    --color-warning-pressed: #e5ad06;

    /* RGB variants for Bootstrap utility transparency support */
    --bs-primary-rgb: 19, 93, 102;
    --bs-danger-rgb: 255, 127, 80;
    --bs-warning-rgb: 255, 193, 7;
    --bs-success-rgb: 19, 93, 102;

    /* --- BOOTSTRAP VARIABLE OVERRIDES --- */
    --bs-primary: var(--color-primary);
    --bs-success: var(--color-primary);
    --bs-danger: var(--color-danger);
    --bs-warning: var(--color-warning);
    --bs-info: var(--color-primary);

    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-text);
    --bs-body-font-family:
        "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary);
    --bs-link-decoration: none;

    --bs-border-radius: 12px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 24px;

    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-border-color: rgba(19, 93, 102, 0.12);
    --bs-card-cap-bg: var(--color-secondary);
    --bs-card-bg: var(--color-mint-white);

    /* --- COMPONENT SPECIFIC TOKENS --- */
    --card-header-holiday: #f8d7da;
    --card-header-bridge: #cff4fc;
    --card-header-half: #fff3cd;
    --color-text-holiday: #842029;
    --color-text-bridge: #055160;
    --color-text-half: #664d03;
}

/* --- GLOBAL RESETS & TYPOGRAPHY --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-header,
.fw-bold {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

a {
    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
    transition: color 0.1s ease;
}

a:active {
    color: var(--color-primary-pressed);
}

/* --- BUTTONS: MOBILE OPTIMIZED (FLAT DESIGN) --- */
.btn {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--bs-border-radius);
    transition:
        background-color 0.1s,
        border-color 0.1s,
        color 0.1s;
    box-shadow: none !important;
    border: 1px solid transparent;
}

/* Eliminate Hover Effects */
.btn:hover {
    background-color: var(--bs-btn-bg, inherit) !important;
    border-color: var(--bs-btn-border-color, inherit) !important;
    color: var(--bs-btn-color, inherit) !important;
}

/* Primary variants (Teal) */
.btn-primary,
.btn-success,
.btn-info {
    --bs-btn-bg: var(--color-primary) !important;
    --bs-btn-border-color: var(--color-primary) !important;
    --bs-btn-color: var(--color-text-inverse) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-primary:focus,
.btn-success:focus,
.btn-info:focus {
    background-color: var(--color-primary-pressed) !important;
    border-color: var(--color-primary-pressed) !important;
}

/* Warning variant (Amber) */
.btn-warning {
    --bs-btn-bg: var(--color-warning) !important;
    --bs-btn-border-color: var(--color-warning) !important;
    --bs-btn-color: var(--color-text) !important;
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}

.btn-warning:active,
.btn-warning:focus {
    background-color: var(--color-warning-pressed) !important;
    border-color: var(--color-warning-pressed) !important;
}

/* Danger variant (Coral) */
.btn-danger {
    --bs-btn-bg: var(--color-danger) !important;
    --bs-btn-border-color: var(--color-danger) !important;
    --bs-btn-color: var(--color-text-inverse) !important;
    color: var(--color-text-inverse) !important;
}

.btn-danger:active,
.btn-danger:focus {
    background-color: var(--color-danger-pressed) !important;
    border-color: var(--color-danger-pressed) !important;
}

/* Secondary variant (Lighter Teal) */
.btn-secondary {
    --bs-btn-bg: var(--color-secondary) !important;
    --bs-btn-border-color: var(--color-secondary) !important;
    --bs-btn-color: var(--color-text) !important;
}

.btn-secondary:active,
.btn-secondary:focus {
    background-color: var(--color-secondary-pressed) !important;
    border-color: var(--color-secondary-pressed) !important;
}

/* Outline variants */
.btn-outline-primary {
    --bs-btn-color: var(--color-primary) !important;
    --bs-btn-border-color: var(--color-primary) !important;
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--color-primary-pressed) !important;
    border-color: var(--color-primary-pressed) !important;
    color: var(--color-text-inverse) !important;
}

/* Navigation Arrow Buttons */
#prev-week-btn,
#next-week-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background-color: var(--color-primary) !important;
    color: white !important;
}

#prev-week-btn:active,
#next-week-btn:active {
    background-color: var(--color-primary-pressed) !important;
}

/* --- CARDS & LIST GROUPS --- */
.card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid var(--bs-card-border-color) !important;
    background-color: var(--color-mint-white) !important;
    overflow: hidden;
    height: auto !important;
    position: relative;
}

.list-group {
    margin-bottom: 0 !important;
}

.card-header {
    border-bottom: none;
    font-size: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-secondary);
}

.list-group-item {
    min-height: 70px;
    padding: 1rem 1.5rem;
    border-left: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-group-item:last-child {
    border-bottom: none !important;
}

/* Enforce fixed height for time slots to prevent layout shift */
.time-slot {
    height: 4rem;
}

/* --- SLOT STATES (ICON-FREE VISUAL LANGUAGE) --- */

/* 1. Available Slot */
.slot-available {
    background-color: transparent !important;
}
.slot-available .slot-label {
    color: var(--color-text);
    font-weight: 700 !important;
}

/* 2. Booked by Someone Else (Subtle Teal Tint) */
.slot-booked {
    background-color: rgba(19, 93, 102, 0.05) !important;
}
.slot-booked .slot-label {
    color: var(--color-text);
    opacity: 0.6;
    font-weight: 700 !important;
}

/* 3. My Active Booking (Solid Primary Teal) */
.slot-my-booking {
    background-color: var(--color-primary) !important;
}
.slot-my-booking .slot-label {
    color: var(--color-text-inverse);
    font-weight: 700 !important;
}

/* 4. Passed / Administratively Blocked (Solid Gray) */
.slot-passed {
    background-color: #f1f5f9 !important;
}
.slot-passed .slot-label {
    color: #94a3b8;
    font-weight: 700 !important;
}

.slot-label {
    font-size: 1.1rem;
}

.special-day-label {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.1;
    display: inline-block;
}

/* --- SEMANTIC VARIANTS --- */
.holiday-card .card-header {
    background-color: var(--card-header-holiday) !important;
}
.holiday-card .card-header,
.holiday-card .card-header * {
    color: var(--color-text-holiday) !important;
}

.bridge-day-card .card-header {
    background-color: var(--card-header-bridge) !important;
}
.bridge-day-card .card-header,
.bridge-day-card .card-header * {
    color: var(--color-text-bridge) !important;
}

.half-day-card .card-header {
    background-color: var(--card-header-half) !important;
}
.half-day-card .card-header,
.half-day-card .card-header * {
    color: var(--color-text-half) !important;
}

/* Past/Disabled Day Cards */
.card.day-disabled {
    background-color: #f1f5f9 !important;
    filter: grayscale(1);
}
.day-disabled .card-header {
    background-color: #e2e8f0 !important;
}
.day-disabled .card-header,
.day-disabled .card-header * {
    color: #64748b !important;
}

/* --- MY BOOKING HIGHLIGHT --- */
.card.has-my-booking::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid var(--bs-primary);
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
}
.card.has-my-booking .card-header {
    background-color: var(--bs-primary);
}
.card.has-my-booking .card-header,
.card.has-my-booking .card-header * {
    color: var(--color-text-inverse);
}

/* Ensure white text on normal days (overrides text-muted), but respect special days */
.card.has-my-booking:not(.holiday-card):not(.bridge-day-card):not(
        .half-day-card
    )
    .card-header,
.card.has-my-booking:not(.holiday-card):not(.bridge-day-card):not(
        .half-day-card
    )
    .card-header
    * {
    color: var(--color-text-inverse) !important;
}

/* --- FORMS --- */
.form-label {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text);
    opacity: 0.8;
}
.form-control {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    transition: border-color 0.1s;
    box-shadow: none !important;
}
.form-control:focus {
    background-color: #fff;
    border-color: var(--bs-primary);
}
.input-group-text {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

/* --- UTILITIES & BRANDING --- */
.text-primary,
.text-info,
.text-success {
    color: var(--color-primary) !important;
}
.text-warning {
    color: var(--color-warning) !important;
}
.bg-primary,
.bg-info,
.bg-success {
    background-color: var(--color-primary) !important;
}
.bg-warning {
    background-color: var(--color-warning) !important;
}

/* Badges, Spinners, Alerts */
.badge.bg-info,
.badge.bg-success {
    color: var(--color-text-inverse) !important;
}
.badge.bg-warning {
    color: var(--color-text) !important;
}
.spinner-border.text-info,
.spinner-border.text-success {
    color: var(--color-primary) !important;
}
.spinner-border.text-warning {
    color: var(--color-warning) !important;
}

.alert-info,
.alert-success {
    background-color: #e0f2f1 !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-text) !important;
}
.alert-warning {
    background-color: #fff8e1 !important;
    border-color: var(--color-warning) !important;
    color: var(--color-text) !important;
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.letter-spacing-05 {
    letter-spacing: 0.05em;
}

.small.fw-bold.text-decoration-none,
.footer-link,
.link-primary {
    color: var(--color-primary) !important;
}
.small.fw-bold.text-decoration-none:active,
.footer-link:active,
.link-primary:active {
    color: var(--color-primary-pressed) !important;
}

.navbar {
    background-color: var(--color-primary-light) !important;
    box-shadow: none !important;
}

/* --- NAVIGATION DROPDOWN --- */
.dropdown-menu {
    animation: none !important;
    transition: none !important;
    border: 1px solid var(--bs-card-border-color) !important;
    background-color: var(--color-mint-white) !important;
}

.dropdown-item {
    color: var(--color-text) !important;
    font-weight: 700;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    background-color: var(--color-secondary) !important;
    color: var(--color-text) !important;
}

/* --- AUTH & ONBOARDING --- */
.auth-logo {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.auth-logo:hover {
    transform: scale(1.05) rotate(-5deg);
}

.auth-logo.auth-logo-sm {
    width: 80px;
}

.card-auth {
    background-color: #ffffff !important;
    border-radius: var(--bs-border-radius-xl);
}

.btn-step {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(19, 93, 102, 0.15) !important;
}

.form-control-lg-code {
    letter-spacing: 0.5em;
    font-size: 2rem;
    text-align: center;
}

.footer-link {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}