/* 1. IMPORT FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');

/* 2. DESIGN TOKENS */
:root {
    /* Brand Colors */
    --color-primary-dark: #2D3A3A;
    /* The Deep Charcoal */
    --color-accent: #EA7845;
    /* The Logo Orange */
    --color-accent-hover: #C65D2E;
    /* Backgrounds */
    --color-background: #F9F6F1;
    /* Cream Page Background */
    --color-surface: #FFFFFF;
    /* White Card Background */
    --color-border: #E5E7EB;
    /* Status Colors */
    --color-success-text: #047857;
    --color-success-bg: #D1FAE5;
    /* Typography */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    /* Spacing */
    --radius-xl: 1rem;
    --radius-lg: 0.75rem;
    --sidebar-width: 260px;
    --header-height: 80px;
}

/* 3. RESET & TYPOGRAPHY */
body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-primary-dark);
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.serif {
    font-family: var(--font-serif);
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* 4. LAYOUT STRUCTURE */
.page {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    background-color: var(--color-background);
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--color-background);
}

/* 5. SIDEBAR STYLING (The Dark Theme) */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--color-primary-dark);
    /* Dark Charcoal */
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 200;
}

/* The Logo Area inside Sidebar - White to make Logo POP */
.sidebar-header {
    height: var(--header-height);
    background-color: #FFFFFF;
    /* White background for logo */
    border-bottom: 1px solid var(--color-primary-dark);
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
}

.sidebar-logo {
    height: 70px;
    width: auto;
}

/* Navigation Links */
.nav-scrollable {
    padding: 1rem 0.75rem;
    flex-grow: 1;
}

.nav-item {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.nav-item ::deep a {
    color: rgba(255, 255, 255, 0.7) !important;
    /* Light Gray text */
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
}

/* Hover State */
.nav-item ::deep a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    transform: translateX(5px);
}

/* ACTIVE STATE: Orange Background */
.nav-item ::deep a.active {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(234, 120, 69, 0.3);
    /* Orange Glow */
    font-weight: 600;
}

.nav-item ::deep a .bi {
    margin-right: 1.2rem;
    font-size: 1.5rem;
    opacity: 1;
    line-height: 1;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.2);
}

/* 6. MAIN HEADER STYLING */
.top-row {
    background-color: var(--color-surface);
    height: var(--header-height);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    flex-shrink: 0;
}

/* 7. COMPONENT: BUTTONS */
.btn-primary {
    background-color: var(--color-accent) !important;
    border: none !important;
    color: white !important;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    border-radius: 2rem;
    transition: transform 0.1s ease;
}

.btn-primary:hover {
    background-color: var(--color-accent-hover) !important;
    transform: translateY(-1px);
}

/* 8. COMPONENT: CARDS */
.prox-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Very subtle border */
    box-shadow: var(--shadow-soft);
    height: 100%;
}

.badge-trend {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    padding: 0.35em 0.8em;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Remove the black selection box when page loads */
h1:focus {
    outline: none;
}


/* =========================================
   SYNCFUSION SCHEDULER THEME OVERRIDES
   ========================================= */

/* 1. Main Container & Headers */
.e-schedule {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border) !important;
    font-family: var(--font-sans) !important;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items {
    background-color: var(--color-surface) !important;
}

/* 2. Work Cells (The Grid) */
.e-schedule .e-vertical-view .e-work-cells,
.e-schedule .e-month-view .e-work-cells {
    background-color: var(--color-surface) !important;
}

/* 3. Today Highlight */
.e-schedule .e-vertical-view .e-current-time {
    background-color: var(--color-accent) !important;
}

.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text {
    color: var(--color-accent) !important;
    font-weight: 700;
}

/* 4. Appointments */
.e-schedule .e-appointment {
    background-color: var(--color-primary-dark) !important;
    /* Charcoal appointments */
    border-radius: 6px !important;
    border-left: 4px solid var(--color-accent) !important;
    /* Orange accent strip */
    color: white !important;
    font-size: 13px;
    opacity: 0.95;
}

.e-schedule .e-appointment:hover {
    opacity: 1;
    transform: scale(1.01);
    transition: all 0.1s ease;
}

/* 5. Header Days */
.e-schedule .e-header-cells .e-header-day {
    font-family: var(--font-serif) !important;
    font-weight: bold;
    color: var(--color-primary-dark);
}

/* 6. Current Day Header */
.e-schedule .e-header-cells.e-current-day .e-header-day {
    color: var(--color-accent) !important;
}


/* =========================================
   SYNCFUSION GRID (CUSTOM THEME)
   ========================================= */

.e-grid {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-sans) !important;
    overflow: hidden;
}

.e-grid .e-gridheader {
    background-color: var(--color-primary-dark) !important;
    border-bottom: none !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Target all header cells directly with the background color */
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: var(--color-primary-dark) !important;
    color: #FFFFFF !important;
    font-family: var(--font-sans);
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    padding: 1.2rem 1.5rem !important;
    border: none !important;
}

.e-grid .e-headercelldiv {
    color: #FFFFFF !important;
}

/* Re-style Syncfusion Filter icons if they are active */
.e-grid .e-icon-filter,
.e-grid .e-icon-ascending,
.e-grid .e-icon-descending {
    color: #FFFFFF !important;
}

/* Pagination row matching */
.e-grid .e-gridpager {
    background-color: #F9FAFB !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 0.8rem !important;
}

/* =========================================
   DATA TABLES (CUSTOM THEME)
   ========================================= */

.prox-table {
    width: 100%;
    border-collapse: separate;
    /* Allows border-radius on rows */
    border-spacing: 0;
}

.prox-table thead th {
    background-color: var(--color-primary-dark);
    /* The Sidebar Charcoal */
    color: #FFFFFF;
    /* White Text */
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    padding: 1.2rem 1.5rem;
    border: none;
}

.prox-table tbody tr {
    transition: background-color 0.2s;
}

.prox-table tbody tr:hover {
    background-color: #F9F6F1;
    /* Cream hover effect */
    cursor: pointer;
}

.prox-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
    color: #4B5563;
    font-size: 0.9rem;
}

/* Avatar Circle */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFF8F1;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Badge for "Visits" */
.badge-neutral {
    background-color: #F3F4F6;
    color: #6B7280;
    padding: 0.35em 0.8em;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* =========================================
   SYNCFUSION DIALOG (MODAL) THEME
   ========================================= */

/* The Modal Box */
.e-dialog {
    border-radius: var(--radius-xl) !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Header */
.e-dialog .e-dlg-header-content {
    background-color: var(--color-primary-dark) !important;
    border-bottom: none !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    padding: 1.5rem !important;
}

.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header-content .e-title-text,
.e-dialog .e-dlg-header-content .e-subject {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    color: #FFFFFF !important;
}

/* Close Button */
.e-dialog .e-btn-icon.e-icon-dlg-close {
    color: #FFFFFF !important;
}

/* Content Body */
.e-dialog .e-dlg-content {
    background-color: var(--color-surface) !important;
    padding: 2rem 1.5rem !important;
}

/* Footer */
.e-dialog .e-footer-content {
    background-color: #F9FAFB !important;
    border-top: 1px solid var(--color-border) !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    align-items: center;
}

/* =========================================
   SIDE-BY-SIDE PANELS (Left & Right framing)
   ========================================= */

/* HIDE OVERLAY and neutralise container for side panels */
.e-dlg-container:has(.slide-panel-left),
.e-dlg-container:has(.slide-panel-right) {
    pointer-events: none !important;
    background: transparent !important;
    display: block !important;
    /* Neutralise Syncfusion flex-center positioning */
}

/* PREVENT JITTER: Neutralise dialogs while still inside the editor DOM */
.custom-event-editor .e-dialog {
    position: absolute !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* HARDEN MAIN EDITOR CENTERING: Ensure the schedule dialog container remains rock-solid */
.e-dlg-container:has(.e-schedule-dialog) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10001 !important;
    /* Ensure it stays behind the side panels but above everything else */
}

/* STABILIZE OVERLAY: Prevent the "grey flash" flicker when side panels open */
.e-dlg-container:has(.e-schedule-dialog)~.e-dlg-overlay,
.e-dlg-overlay[style*="z-index: 10000"],
body:has(.e-schedule-dialog) .e-dlg-overlay {
    display: block !important;
    opacity: 0.5 !important;
    background-color: #000 !important;
    visibility: visible !important;
    transition: none !important;
    /* Kill the flickering transition */
}

/* Base style for framing panels */
.slide-panel-left,
.slide-panel-right {
    position: fixed !important;
    top: 50% !important;
    margin-top: -300px !important;
    /* Half of 600px height for centering */
    height: 600px !important;
    width: 380px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: white !important;
    z-index: 10002 !important;
    /* Above main modal overlay if necessary */
    pointer-events: auto !important;
}

/* Position Left (Anchored specifically relative to the 500px center modal) */
.slide-panel-left {
    left: calc(50% - 250px - 380px - 20px) !important;
    /* 50% - half main - panel width - gap */
    margin-left: 0 !important;
}

/* Position Right (Anchored specifically relative to the 500px center modal) */
.slide-panel-right {
    left: calc(50% + 250px + 20px) !important;
    /* 50% + half main + gap */
    margin-left: 0 !important;
}

/* Hide the overlay specifically for these containers to kill the "grey box" ghost */
.e-dlg-container:has(.slide-panel-left) .e-dlg-overlay,
.e-dlg-container:has(.slide-panel-right) .e-dlg-overlay {
    display: none !important;
}

/* Main Schedule Dialog Header - White with Dark Text */
.e-schedule-dialog .e-dlg-header-content,
.e-schedule-dialog .e-dlg-header {
    color: #333 !important;
}

.e-schedule-dialog .e-dlg-header-content {
    border-bottom: 1px solid #eee !important;
}

/* Restoring the Title Text specifically */
.e-schedule-dialog .e-dlg-header {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

/* Ensure the Close 'X' is also dark */
.e-schedule-dialog .e-btn.e-dlg-closeicon-btn .e-icon-dlg-close {
    color: #333 !important;
}

/* Side Panel Headers - Keep Dark for distinction */
.slide-panel-left .e-dlg-header-content,
.slide-panel-right .e-dlg-header-content {
    background: var(--color-primary-dark) !important;
    color: white !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 20px !important;
}

/* Footer fix - NO ABSOLUTE/STRETCHING */
.slide-panel-left .e-footer-content,
.slide-panel-right .e-footer-content {
    border-top: 1px solid #eee !important;
    padding: 10px 15px !important;
    background: #fff !important;
    border-radius: 0 0 12px 12px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 70px !important;
}



/* =========================================
   GLOBAL DIALOG BUTTON STYLING (SAVE/CANCEL/DELETE)
   ========================================= */

/* Save / Primary Button (Orange) */
.e-dialog .e-footer-content button.e-primary,
.e-dialog .e-footer-content button.btn-primary,
.e-dialog .e-footer-content button[type="submit"] {
    background-color: var(--color-accent) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    padding: 0.5rem 1.5rem !important;
    box-shadow: 0 4px 6px rgba(234, 120, 69, 0.2) !important;
    order: 3 !important;
    /* Force to far right */
    transition: all 0.2s ease;
}

.e-dialog .e-footer-content button.e-primary:hover {
    background-color: var(--color-accent-hover) !important;
    transform: translateY(-1px);
}

/* Cancel / Secondary Button (Light Grey + Black Text) */
.e-dialog .e-footer-content button.e-btn:not(.e-primary):not(.e-event-delete),
.e-dialog .e-footer-content button.btn-secondary {
    background-color: #E5E7EB !important;
    /* Light Grey */
    color: #1F2937 !important;
    /* Black/Dark Grey Text */
    border: none !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    padding: 0.5rem 1.5rem !important;
    order: 2 !important;
    /* Left of Save */
    transition: all 0.2s ease;
}

.e-dialog .e-footer-content button.e-btn:not(.e-primary):not(.e-event-delete):hover {
    background-color: #D1D5DB !important;
    /* Slightly darker grey hover */
}

/* Delete / Remove Button (Red Outline) */
.e-dialog .e-footer-content button.e-event-delete {
    background-color: transparent !important;
    color: #DC2626 !important;
    /* Red Text */
    border: 1px solid #DC2626 !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    padding: 0.5rem 1.5rem !important;
    margin-right: auto !important;
    /* Pushes everything else to the right, keeping Delete on Left */
    order: 1 !important;
    /* Far Left */
    transition: all 0.2s ease;
}

.e-dialog .e-footer-content button.e-event-delete:hover {
    background-color: #FEF2F2 !important;
    /* Light red tint hover */
}

/* =========================================
   SERVICES PAGE STYLES
   ========================================= */

/* Category Badge (e.g. "Hair", "Beard") */
.badge-category {
    background-color: #F3F4F6;
    color: #4B5563;
    border: 1px solid #E5E7EB;
    padding: 0.25em 0.75em;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Price Tag Style */
.text-price {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 1rem;
}

/* Duration Icon/Text */
.text-duration {
    color: #6B7280;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* =========================================
   ONBOARDING & STEPPER
   ========================================= */

/* 1. Stepper Container */
.e-stepper {
    background: transparent !important;
    font-family: var(--font-sans) !important;
}

/* 2. Step Circle (Default) */
.e-stepper .e-step-collection .e-step-item .e-step-icon {
    width: 50px !important;
    /* Slightly larger for better touch target */
    height: 50px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    border: 2px solid #E5E7EB !important;
    color: #9CA3AF !important;
    /* Gray icon */
    font-size: 1.4rem !important;
    /* Icon size */
    /* Center the Bootstrap Icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto;
    /* Ensure Bootstrap Font is used */
    font-family: 'bootstrap-icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
}

/* 3. Step Circle (Active & Completed) */
.e-stepper .e-step-collection .e-step-item.e-active .e-step-icon,
.e-stepper .e-step-collection .e-step-item.e-completed .e-step-icon {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(234, 120, 69, 0.3);
}

/*Labels */
.e-stepper .e-step-collection .e-step-item .e-step-text {
    font-weight: 600 !important;
    margin-top: 0.75rem;
    color: #9CA3AF !important;
    font-size: 0.9rem !important;
}

.e-stepper .e-step-collection .e-step-item.e-active .e-step-text {
    color: var(--color-primary-dark) !important;
    font-weight: 700 !important;
}

/* 5. Progress Bar (The line between steps) */
.e-stepper .e-step-collection .e-step-item .e-step-separator {
    height: 2px !important;
    background-color: #E5E7EB !important;
    /* Adjust margin to align with the center of the 50px circle */
    margin-top: 25px !important;
}

.e-stepper .e-step-collection .e-step-item.e-completed .e-step-separator {
    background-color: var(--color-accent) !important;
}

/* 6. Content Card */
.onboarding-card {
    background-color: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    padding: 3rem;
    min-height: 500px;
}

/* =========================================
   LAYOUT UTILITIES
   ========================================= */

/* 90% Width Container */
.container-90 {
    width: 90%;
    max-width: 1800px;
    /* Prevent it from getting absurdly wide on 4k screens */
    margin: 0 auto;
}

/* Map Container */
.map-container {
    height: 100%;
    min-height: 600px;
    /* Ensure map has height */
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

/* Onboarding Layout Adjustments */
.onboarding-split-card {
    background-color: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    /* Ensures content respects rounded corners */
    border: 1px solid var(--color-border);
    height: calc(100vh - 280px);
    min-height: 650px;
    display: flex;
    flex-direction: column;
}

.onboarding-form-panel {
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
}

.onboarding-scrollable-step {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.onboarding-step-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
}

.onboarding-step-footer {
    padding: 1rem 2rem;
    background-color: #fff;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.onboarding-map-panel {
    padding: 0;
    height: 100%;
    background-color: #f0f0f0;
    /* Placeholder color while map loads */
}

/* =========================================
   AUTH PAGES (LOGIN / REGISTER)
   ========================================= */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
}

.auth-card {
    background-color: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 450px;
    padding: 3rem;
    border: 1px solid var(--color-border);
}

.auth-logo {
    height: 60px;
    margin-bottom: 1.5rem;
}

/* =========================================
   DROPDOWN TREE STYLES
   ========================================= */

/* 1. Make Parent Items Bold & Darker */
.e-treeview .e-list-item.e-has-child>.e-fullrow .e-list-text {
    font-weight: 800 !important;
    color: var(--color-primary-dark) !important;
    font-size: 0.95rem;
}

/* 2. Style the Children (Sub-categories) */
.e-treeview .e-list-item:not(.e-has-child)>.e-fullrow .e-list-text {
    font-weight: 400;
    color: #4B5563;
    /* Gray text */
}

/* FORCE GOOGLE AUTOCOMPLETE TO FRONT */
.pac-container {
    z-index: 10000 !important;
    /* Above everything */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    font-family: var(--font-sans);
}



/* Style the internal input of the Google Component */
gmp-place-autocomplete::part(input) {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    height: 42px;
    /* Match your other inputs */
}

gmp-place-autocomplete::part(input):focus {
    border-color: var(--color-accent);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(234, 120, 69, 0.25);
}


/* =========================================
   WORKING HOURS PAGE STYLING
   ========================================= */

/* 1. The Switch (Overrides Syncfusion) */
.e-switch-wrapper {
    width: 80px !important;
    /* Wider to fit text */
    height: 32px !important;
    border-radius: 20px !important;
}

/* "OPEN" STATE (Unchecked) - Green Theme */
.e-switch-wrapper:not(.e-switch-active) .e-switch-inner,
.e-switch-wrapper:not(.e-switch-active):hover .e-switch-inner {
    background-color: var(--color-success-bg) !important;
    /* Light Green */
    border-color: var(--color-success-bg) !important;
}

.e-switch-wrapper:not(.e-switch-active) .e-switch-off {
    color: var(--color-success-text) !important;
    /* Dark Green Text */
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
}

/* "CLOSED" STATE (Checked) - Charcoal Theme */
.e-switch-wrapper.e-switch-active .e-switch-inner,
.e-switch-wrapper.e-switch-active:hover .e-switch-inner {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.e-switch-wrapper.e-switch-active .e-switch-on {
    color: #fff !important;
    /* White Text */
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
}

/* The Toggle Circle */
.e-switch-wrapper .e-switch-handle {
    background-color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    height: 24px !important;
    width: 24px !important;
    top: 3px !important;
    /* Center the circle vertically */
}

/* 2. The Time Pickers */
.e-time-wrapper.e-input-group {
    background-color: #fff !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    height: 38px;
    box-shadow: none !important;
}

.e-switch-wrapper {
    margin-top: 4px;
}

/* Disabled Time Pickers (Closed Days) */
.e-time-wrapper.e-disabled {
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.5 !important;
}

.hours-card {
    background-color: #F9F9F9;
    /* Light gray background instead of pure white */
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* 3. Table Enhancements */
.hours-table {
    border-collapse: separate;
    border-spacing: 0;
}

.hours-table td,
.hours-table th {
    padding: 1rem 1.5rem !important;
    vertical-align: middle;
}

.hours-table thead th {
    background-color: var(--color-primary-dark);
    /* The Sidebar Charcoal */
    color: #FFFFFF;
    /* White Text */
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    padding: 1.2rem 1.5rem !important;
    border: none;
}

/* 3. Row Styling */
.hours-table tbody tr {
    transition: all 0.2s ease;
}

/* Fade out rows that are closed */
.row-closed {
    background-color: #F3F4F6;
    /* Gray background */
    opacity: 0.8;
}

.row-closed td {
    color: #9CA3AF;
    /* Muted text */
    border-bottom: 1px solid #E5E7EB;
}

.row-open {
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    /* Very subtle shadow */
}

.row-open:hover {
    transform: scale(1.005);
    /* Micro interaction */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 10;
    position: relative;
}

.row-open td {
    border-bottom: 1px solid #F3F4F6;
}


/* Add this to your site.css if not present */

/* Premium "Add" Button */
.btn-accent {
    background-color: var(--color-accent);
    color: white;
    font-weight: 600;
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
    border: none;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(234, 120, 69, 0.2);
}

.btn-accent:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(234, 120, 69, 0.3);
    color: white;
}

/* Re-use the row animation for services */
.service-row {
    background-color: #fff;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s;
}

.service-row:hover {
    background-color: #fff;
    transform: scale(1.005);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    z-index: 5;
    position: relative;
    border-radius: 4px;
}

/* =========================================
   SUMMARY / LAUNCH TAB STYLES
   ========================================= */

.summary-card {
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-xl);
    padding: 2rem;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.summary-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #9CA3AF;
    /* Muted Gray */
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.summary-value {
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

.summary-service-item {
    padding: 0.75rem 0;
    border-bottom: 1px dashed #E5E7EB;
    display: flex;
    justify-content: space-between;
}

.summary-service-item:last-child {
    border-bottom: none;
}

/* Small visual timeline for hours */
.mini-hour-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f9f9f9;
    font-size: 0.9rem;
}

/* =========================================
   LAUNCH TAB STYLING
   ========================================= */

/* 1. The Card Container */
.summary-card {
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* Keeps the header inside the rounded corners */
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* 2. Dark Header (Solves the "Too White" issue) */
.summary-header {
    background-color: var(--color-primary-dark);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-header h4 {
    color: #fff !important;
    /* Override default dark text */
    font-size: 1.1rem;
    margin: 0;
    font-family: var(--font-serif);
    letter-spacing: 0.5px;
}

/* 3. The "Edit" Button in the dark header */
.btn-edit-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.btn-edit-link:hover {
    color: #fff;
}

/* 4. Data Blocks (Gray backgrounds for data) */
.data-box {
    background-color: #F9FAFB;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
}

.data-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #9CA3AF;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.data-value {
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

/* 5. Compact Header Styling */
.launch-header-icon {
    font-size: 2rem;
    /* Much smaller than before */
    color: var(--color-accent);
}