body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; }
        .current-time-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #ef4444;
            z-index: 10;
            pointer-events: none;
        }
        .current-time-line::before {
            content: '';
            position: absolute;
            left: 0;
            top: -4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ef4444;
        }
        
        /* Splash Screen Styles */
        /* BUILD 280: Splash screen with progress bar */
        #splash-screen {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.3s ease-out;
        }
        
        .splash-logo {
            font-size: 6rem;
            font-weight: bold;
            background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }
        
        .sidebar-logo-container {
            position: relative;
            display: inline-block;
        }
        
        .sidebar-half-sun {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 120%;
            z-index: 0;
            opacity: 0.2;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }
        
        .splash-subtitle {
            color: #cbd5e0;
            font-size: 1.2rem;
            margin-bottom: 0.25rem;
        }
        
        .splash-version {
            color: #718096;
            font-size: 0.8rem;
            margin-bottom: 2rem;
        }
        
        .splash-progress-track {
            width: 280px;
            background: rgba(255,255,255,0.08);
            border-radius: 8px;
            height: 8px;
            overflow: hidden;
            margin-bottom: 1rem;
            position: relative;
        }
        
        .splash-progress-bar {
            height: 100%;
            border-radius: 8px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        /* Indeterminate shimmer - runs on GPU, loops forever */
        .splash-progress-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -40%;
            width: 40%;
            height: 100%;
            border-radius: 8px;
            background: linear-gradient(90deg, transparent, #f59e0b, #ea580c, transparent);
            animation: shimmer 1.8s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(0); opacity: 0.8; }
            50% { opacity: 1; }
            100% { transform: translateX(950%); opacity: 0.8; }
        }
        
        /* Once JS takes over, hide shimmer and show real bar */
        .splash-progress-bar.determinate::before {
            display: none;
        }
        
        .splash-progress-bar.determinate {
            background: linear-gradient(90deg, #f59e0b, #ea580c);
            transform-origin: left;
            transition: transform 0.4s ease-out;
        }
        
        .splash-status {
            color: #94a3b8;
            font-size: 0.8rem;
            margin: 0;
            text-align: center;
        }
        
        .splash-percent {
            display: none;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
		
		/* Smooth app initialization - prevents flash of unstyled content */
		#root {
			animation: smoothFadeIn 0.3s ease-in;
		}
		
		@keyframes smoothFadeIn {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		/* Prevent layout shift during load */
		#root > div {
			min-height: 100vh;
		}
		
		/* PREVENT FLASH: Force grey BEFORE FullCalendar renders */
		/* FIXED: Exclude events from grey background! */
		#root,
		#root > div,
		.fc,
		.fc-view,
		.fc-view-harness,
		.fc-scrollgrid {
			background-color: #f3f4f6 !important;
		}
		
		/* Specific override for body to stay white */
		.fc-timegrid-body,
		.fc-timegrid-cols,
		.fc-daygrid-body {
			background-color: white !important;
		}
		
		/* Hide briefly during initial render */
		.fc-view-harness {
			animation: fadeInGrey 0.1s ease-in;
		}
		
		@keyframes fadeInGrey {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		
		/* IMMEDIATE: Force grey on header elements - TARGETED, not all descendants */
		.fc-scrollgrid-section-header,
		.fc-scrollgrid-section-header > table,
		.fc-col-header,
		.fc-scrollgrid-section-header table,
		.fc-scrollgrid-section-header tbody,
		.fc-scrollgrid-section-header thead,
		.fc-scrollgrid-section-header tr,
		.fc-scrollgrid-section-header th.fc-col-header-cell,
		.fc-scrollgrid-section-header td,
		.fc-col-header-cell {
			background-color: #f3f4f6 !important;
			background: #f3f4f6 !important;
		}
		
		/* Ensure circles/badges maintain their blue background */
		.fc-col-header-cell div[style*="background-color: #3b82f6"] {
			background-color: #3b82f6 !important;
		}
		
		/* Prevent resource header from showing through modals */
		.fc-col-header,
		.fc-scrollgrid-section-header {
			z-index: 1 !important; /* Keep headers below modals */
		}
		
		/* FullCalendar Custom Styles */
		.fc {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
			border-left: none !important;
			border: 1.5px solid #cbd5e1 !important;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		}
		
		/* Remove ALL left borders from calendar */
		.fc *,
		.fc-view-harness,
		.fc-scrollgrid,
		.fc-timegrid {
			border-left: none !important;
		}
		
		/* Remove left border from calendar to eliminate line before time axis */
		.fc-view-harness,
		.fc-scrollgrid,
		.fc-timegrid,
		.fc-scrollgrid-section,
		.fc-scrollgrid-section > table,
		.fc-timegrid-body,
		.fc-timegrid-axis,
		.fc-scroller,
		.fc-scrollgrid-sync-inner,
		td:first-child,
		th:first-child {
			border-left: none !important;
		}
		
		/* Force no left border on time axis and its children */
		.fc-timegrid-axis *,
		.fc-timegrid-slot-label *,
		.fc-scrollgrid-shrink {
			border-left: none !important;
		}
		
		/* Event styling for timegrid view - IMPROVED READABILITY */
		.fc-timegrid-event {
			border-radius: 6px;
			border: 1px solid rgba(0,0,0,0.15) !important;
			box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
			padding: 8px 10px !important; /* Increased padding for taller slots */
			cursor: move;
			font-size: 0.85rem !important;
			font-weight: normal !important;
			line-height: 1.4 !important; /* Better spacing between lines */
			z-index: 10 !important; /* Ensure events appear above slot backgrounds */
			/* REMOVED: position: relative - let FullCalendar use absolute positioning */
			display: block !important;
			visibility: visible !important;
			opacity: 1 !important;
			/* CRITICAL: Remove bottom positioning constraint so height works correctly */
			bottom: auto !important;
			/* Don't override the backgroundColor set by FullCalendar */
		}
		
		/* Ensure the event background color shows through - DO NOT override with inherit! */
		.fc-timegrid-event.fc-event {
			/* Remove inherit - let the backgroundColor from event data apply directly */
			bottom: auto !important;
		}
		
		/* Event harness container */
		.fc-timegrid-event-harness {
			z-index: 10 !important;
			/* REMOVED: position: relative - let FullCalendar control positioning */
			bottom: auto !important;
		}
		
		/* Harness inset */
		.fc-timegrid-event-harness-inset {
			bottom: auto !important;
		}
		
		/* Event title text */
		.fc-event-title,
		.fc-event-title-container {
			font-size: 0.85rem !important;
			font-weight: normal !important;
			text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Subtle shadow for better contrast */
			margin-bottom: 2px;
			display: block !important;
			visibility: visible !important;
		}
		
		/* Event time text */
		.fc-event-time {
			font-size: 0.75rem !important;
			font-weight: normal !important;
			margin-right: 4px;
			display: block !important; /* Put time on its own line */
			margin-bottom: 2px;
			visibility: visible !important;
		}
		
		/* Event main content area - make transparent to show parent color */
		.fc-event-main {
			padding: 4px !important;
			background: none !important; /* Remove any default background */
		}
		
		/* These specific elements need transparent background to show parent color */
		.fc-event-main-frame {
			background: none !important;
		}
		
		.fc-timegrid-event-harness-inset {
			background: none !important;
		}
		
		/* Ensure text elements don't have backgrounds */
		.fc-event-title-container {
			background: none !important;
		}
		
		/* Ensure event text inherits the textColor property */
		.fc-event-title,
		.fc-event-time,
		.fc-event div {
			color: inherit !important;
		}
		
		/* Prevent text overflow and enable wrapping */
		.fc-event-title,
		.fc-event-main {
			white-space: normal !important; /* Allow text wrapping */
			overflow: visible !important;
			text-overflow: clip !important;
		}
		
		/* Force white background on calendar body BUT allow background events to show */
		.fc-timegrid-body,
		.fc-timegrid-cols,
		.fc-daygrid-body {
			background-color: white !important;
			overflow: visible !important;
		}
		
		/* CRITICAL: White background for calendar columns BUT allow background events to overlay */
		.fc-timegrid-col-frame {
			background-color: white !important;  /* White for clean appearance */
			overflow: visible !important;
			position: relative;
		}
		
		/* Ensure background events appear behind regular events */
		.fc-bg-event {
			z-index: 1 !important;
		}
		
		.fc-timegrid-event {
			z-index: 10 !important;
		}
		
		.fc-scrollgrid-sync-inner {
			background-color: white !important;
		}
		
		.fc-timegrid-event:hover {
			opacity: 0.9;
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		}
		
		.fc-event {
			border-radius: 4px;
			padding: 2px 4px;
			cursor: move;
		}
		
		.fc-event:hover {
			opacity: 0.9;
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		}
		
		/* Out of service resource styling - Enhanced visibility */
		.resource-out-of-service {
			background: repeating-linear-gradient(
				45deg,
				#fee2e2,
				#fee2e2 10px,
				#fca5a5 10px,
				#fca5a5 20px
			) !important;
			opacity: 0.8 !important;
			border: 2px solid #ef4444 !important;
			z-index: 2 !important;
		}
		
		.resource-maintenance {
			background: repeating-linear-gradient(
				45deg,
				#fef3c7,
				#fef3c7 10px,
				#fbbf24 10px,
				#fbbf24 20px
			) !important;
			opacity: 0.9 !important;
			border: 2px solid #f59e0b !important;
			z-index: 2 !important;
		}
		
		/* Resource column headers - Light grey background, NO vertical lines - NUCLEAR */
		.fc-col-header-cell,
		.fc-col-header-cell.fc-resource,
		th.fc-col-header-cell {
			padding: 12px 8px !important;
			font-weight: 600 !important;
			background-color: #f3f4f6 !important; /* Light grey background */
			border-right: 0px none transparent !important; /* FORCE remove vertical lines */
			border-top: 0px none transparent !important;
			border-bottom: 2px solid #d1d5db !important; /* Bottom separator */
			border-left: 0px none transparent !important;
			box-sizing: border-box !important;
		}
		
		/* Time axis header cell - GREY to match resource headers - NUCLEAR */
		.fc-col-header-cell.fc-timegrid-axis,
		th.fc-col-header-cell.fc-timegrid-axis {
			background-color: #f3f4f6 !important; /* Same grey as resource headers */
			border-right: 0px none transparent !important;
			border-bottom: 2px solid #d1d5db !important;
			border-top: 0px none transparent !important;
			border-left: 0px none transparent !important;
		}
		
		/* Header section - simple, clean */
		.fc-col-header {
			border-collapse: separate !important;
			border-spacing: 0 !important;
		}
		
		/* Resource columns in calendar body - THINNER vertical lines */
		.fc-timegrid-col {
			border-right: 1.5px solid #cbd5e1 !important; /* Thinner vertical line in body */
			overflow: visible !important; /* Don't clip events */
		}
		
		/* Day columns */
		.fc-day {
			border-right: 1.5px solid #cbd5e1 !important;
		}
		
		/* Time axis styling - FORCE VISIBILITY - WHITE BACKGROUND only for BODY - NO LINES BUT RIGHT BORDER */
		.fc-timegrid-body .fc-timegrid-axis,
		.fc-timegrid-axis:not(.fc-col-header-cell) {
			background-color: white !important;
			width: 80px !important;
			min-width: 80px !important;
			max-width: 80px !important;
			display: table-cell !important;
			visibility: visible !important;
			border-top: none !important;
			border-bottom: none !important;
			border-left: none !important;
			border-right: 2px solid #cbd5e1 !important; /* Add separator line to right of time axis */
		}
		
		/* OVERRIDE: Time axis in HEADER section MUST be grey - comes after white rule */
		.fc-scrollgrid-section-header th.fc-timegrid-axis,
		.fc-scrollgrid-section-header .fc-timegrid-axis,
		.fc-col-header th.fc-timegrid-axis,
		.fc-scrollgrid-section-header .fc-timegrid-axis-cushion,
		.fc-scrollgrid-section-header .fc-timegrid-axis-frame,
		.fc-scrollgrid-section-header th,
		.fc-scrollgrid-section-header td {
			background-color: #f3f4f6 !important;
			background: #f3f4f6 !important;
		}
		
		.fc-timegrid-axis-cushion,
		.fc-timegrid-axis-frame,
		.fc-timegrid-axis-chunk {
			width: 80px !important;
			min-width: 80px !important;
			display: table-cell !important;
			visibility: visible !important;
			background-color: white !important;
			border-top: none !important;
			border-bottom: none !important;
		}
		
		/* Remove borders from time labels */
		.fc-timegrid-slot-label,
		.fc-timegrid-slot-label-frame {
			border-top: none !important;
			border-bottom: none !important;
		}
		
		/* Prevent scrollgrid from collapsing time axis */
		.fc-scrollgrid-shrink {
			width: 80px !important;
			min-width: 80px !important;
		}
		
		/* NUCLEAR: Force ALL first columns in scrollgrid to show */
		.fc-scrollgrid-section > table > tbody > tr > td:first-child,
		.fc-scrollgrid-section > table > thead > tr > th:first-child {
			width: 80px !important;
			min-width: 80px !important;
			display: table-cell !important;
			visibility: visible !important;
		}
		
		/* Hide ONLY the empty header cell above time axis (keep bed headers visible) */
		.fc-col-header thead .fc-timegrid-axis,
		.fc-scrollgrid-section-header .fc-timegrid-axis {
			height: 0 !important;
			padding: 0 !important;
			line-height: 0 !important;
			font-size: 0 !important;
			border: none !important;
			overflow: hidden !important;
		}
		
		/* BUT: Force BODY time axis labels to be visible and properly sized */
		.fc-scrollgrid-section-body .fc-timegrid-axis,
		.fc-timegrid-body .fc-timegrid-axis,
		.fc-timegrid-body .fc-timegrid-slot-label,
		.fc-timegrid-body .fc-timegrid-slot-label-cushion {
			height: auto !important;
			padding: 4px 8px !important;
			line-height: normal !important;
			font-size: inherit !important;
			overflow: visible !important;
			display: block !important;
			visibility: visible !important;
		}
		
		/* Force time label visibility and styling */
		.fc-timegrid-slot-label,
		.fc-timegrid-slot-label-cushion,
		.fc-timegrid-slot-label-frame {
			display: block !important;
			visibility: visible !important;
			opacity: 1 !important;
		}
		
		/* Time label text styling */
		.fc-timegrid-slot-label-cushion {
			padding: 4px 8px !important;
			text-align: right !important;
			color: #374151 !important;
		}
		
		/* Ensure time text is visible */
		.fc-timegrid-slot-label span {
			display: inline-block !important;
			visibility: visible !important;
			opacity: 1 !important;
		}
		
		/* Force scrollgrid sync to show time axis */
		.fc-scrollgrid-sync-table {
			table-layout: fixed !important;
		}
		
		.fc-scrollgrid-sync-table colgroup col:first-child {
			width: 80px !important;
			min-width: 80px !important;
		}
		}
		
		/* Slot (time cell) styling - White for open hours, faint hour lines */
		.fc-timegrid-slot {
			height: 30px !important; /* 30px per 5-minute slot */
			min-height: 30px !important;
			background-color: white !important;
			border-top: none !important;
			border-bottom: none !important;
		}
		
		/* Faint line at the top of every major hour slot (like Fresha) */
		.fc-timegrid-slot.fc-timegrid-slot-lane:not(.fc-timegrid-slot-minor) {
			border-top: 1px solid rgba(0,0,0,0.07) !important;
		}
		
		/* Very faint minor slot lines */
		.fc-timegrid-slot.fc-timegrid-slot-lane.fc-timegrid-slot-minor {
			border-top: 1px solid rgba(0,0,0,0.03) !important;
		}

		/* Very faint minor slot lines */
		.fc-timegrid-slot.fc-timegrid-slot-lane.fc-timegrid-slot-minor {
			border-top: 1px solid rgba(0,0,0,0.03) !important;
		}
		
		/* Business hours styling - preserve faint lines */
		.fc-timegrid-slot.fc-slot-future,
		.fc-timegrid-slot.fc-slot-past {
			background-color: white !important;
		}
		
		/* Force all timegrid rows to have no horizontal borders EXCEPT slots */
		.fc-timegrid-body tr {
			border-top: none !important;
			border-bottom: none !important;
		}
		.fc-timegrid-slot-lane {
			border-bottom: none !important;
		}
		
		/* Remove ALL horizontal borders from entire timegrid except slot lanes */
		.fc-timegrid *:not(.fc-timegrid-slot-lane) {
			border-top: none !important;
			border-bottom: none !important;
		}
		
		/* Keep ONLY vertical borders on resource columns */
		.fc-timegrid-col,
		.fc-day {
			border-right: 1.5px solid #cbd5e1 !important;
			border-top: none !important;
			border-bottom: none !important;
		}
		
		/* Keep bold vertical borders on resource headers */
		.fc-col-header-cell {
			border-right: 3px solid #9ca3af !important;
			border-top: none !important;
		}
		
		/* Non-business hours (closed) - Grey background */
		.fc-non-business {
			background-color: #e5e7eb !important;
		}
		
		/* Current time indicator - GLO ORANGE LINE */
		.fc-timegrid-now-indicator-line {
			border-color: #f97316 !important;
			border-width: 1.5px !important;
			border-style: solid !important;
			z-index: 100 !important;
			box-shadow: 0 0 6px rgba(249, 115, 22, 0.4);
			display: block !important;
			visibility: visible !important;
		}
		
		.fc-timegrid-now-indicator-arrow {
			border-color: #f97316 !important;
			border-top-color: #f97316 !important;
			border-right-color: #f97316 !important;
			margin-top: -5px;
			margin-left: -6px;
			z-index: 100 !important;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 6px 5px 0;
			display: block !important;
			visibility: visible !important;
		}
		
		/* Resource column dividers */
		.fc-resource-timeline-divider {
			width: 2px !important;
			background-color: #e5e7eb;
		}
		
		/* Scrollbar styling */
		.fc-scroller {
			overflow-y: auto !important;
		}
		
		.fc-scroller::-webkit-scrollbar {
			width: 8px;
		}
		
		.fc-scroller::-webkit-scrollbar-track {
			background: #f1f1f1;
		}
		
		.fc-scroller::-webkit-scrollbar-thumb {
			background: #888;
			border-radius: 4px;
		}
		
		.fc-scroller::-webkit-scrollbar-thumb:hover {
			background: #555;
		}

		/* BUILD 279: Thin scrollbar for tab navigation containers */
		.overflow-x-auto::-webkit-scrollbar {
			height: 4px;
		}
		.overflow-x-auto::-webkit-scrollbar-track {
			background: transparent;
		}
		.overflow-x-auto::-webkit-scrollbar-thumb {
			background: #cbd5e1;
			border-radius: 4px;
		}
		.overflow-x-auto::-webkit-scrollbar-thumb:hover {
			background: #94a3b8;
		}
    
		@keyframes modalSlideIn {
			from { opacity: 0; transform: translateY(-10px) scale(0.98); }
			to { opacity: 1; transform: translateY(0) scale(1); }
		}

		/* ============================================================ */
		/* BUILD 279: Cookie Consent Banner & Policy Modals             */
		/* ============================================================ */
		
		.glo-cookie-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,0.6);
			z-index: 99998;
		}
		.glo-cookie-overlay.active { display: block; }

		.glo-cookie-banner {
			display: none;
			position: fixed;
			bottom: 0; left: 0; right: 0;
			background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
			border-top: 2px solid rgba(245, 158, 11, 0.3);
			padding: 24px 32px;
			z-index: 99999;
			box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
			animation: gloCookieSlideUp 0.3s ease-out;
		}
		.glo-cookie-banner.active { display: block; }

		@keyframes gloCookieSlideUp {
			from { transform: translateY(100%); }
			to { transform: translateY(0); }
		}

		.glo-cookie-banner-inner {
			max-width: 960px;
			margin: 0 auto;
		}
		.glo-cookie-banner h3 {
			margin: 0 0 8px 0;
			font-size: 18px;
			font-weight: 700;
			color: #f5f5f5;
		}
		.glo-cookie-banner p {
			margin: 0 0 20px 0;
			font-size: 14px;
			line-height: 1.6;
			color: #a0aec0;
		}
		.glo-cookie-banner a { color: #f59e0b; text-decoration: none; }
		.glo-cookie-banner a:hover { text-decoration: underline; }

		.glo-cookie-buttons {
			display: flex;
			gap: 12px;
			justify-content: center;
			flex-wrap: wrap;
		}
		.glo-cookie-btn {
			padding: 10px 24px;
			border-radius: 8px;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s;
			border: none;
			min-width: 140px;
		}
		.glo-cookie-btn-necessary {
			background: transparent;
			border: 1px solid rgba(255,255,255,0.2);
			color: #cbd5e0;
		}
		.glo-cookie-btn-necessary:hover {
			border-color: rgba(255,255,255,0.4);
			background: rgba(255,255,255,0.05);
		}
		.glo-cookie-btn-preferences {
			background: transparent;
			border: 1px solid rgba(255,255,255,0.2);
			color: #cbd5e0;
		}
		.glo-cookie-btn-preferences:hover {
			border-color: rgba(255,255,255,0.4);
			background: rgba(255,255,255,0.05);
		}
		.glo-cookie-btn-accept {
			background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
			color: #fff;
			box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
		}
		.glo-cookie-btn-accept:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 10px -1px rgba(245, 158, 11, 0.4);
		}

		/* Cookie Preferences Modal */
		.glo-cookie-prefs {
			display: none;
			position: fixed;
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
			border: 1px solid rgba(255,255,255,0.1);
			border-radius: 16px;
			padding: 32px;
			z-index: 100000;
			width: 90%;
			max-width: 480px;
			max-height: 85vh;
			overflow-y: auto;
			box-shadow: 0 25px 60px rgba(0,0,0,0.5);
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
			animation: gloCookieFadeIn 0.2s ease-out;
		}
		.glo-cookie-prefs.active { display: block; }

		@keyframes gloCookieFadeIn {
			from { opacity: 0; transform: translate(-50%, -48%); }
			to { opacity: 1; transform: translate(-50%, -50%); }
		}
		.glo-cookie-prefs-close {
			position: absolute;
			top: 16px; right: 16px;
			background: none; border: none;
			font-size: 24px; cursor: pointer;
			color: #718096;
			width: 32px; height: 32px;
			display: flex; align-items: center; justify-content: center;
			border-radius: 50%;
			transition: all 0.2s;
		}
		.glo-cookie-prefs-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
		.glo-cookie-prefs h2 {
			margin: 0 0 16px 0;
			font-size: 22px; font-weight: 700; color: #f5f5f5;
		}
		.glo-cookie-prefs > p {
			font-size: 14px; line-height: 1.6; color: #a0aec0; margin: 0 0 24px 0;
		}
		.glo-cookie-prefs a { color: #f59e0b; text-decoration: none; }
		.glo-cookie-prefs a:hover { text-decoration: underline; }
		.glo-cookie-category {
			padding: 16px 0;
			border-top: 1px solid rgba(255,255,255,0.08);
		}
		.glo-cookie-category-header {
			display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
		}
		.glo-cookie-category-name { font-size: 15px; font-weight: 600; color: #e2e8f0; }
		.glo-cookie-category-desc { font-size: 13px; color: #718096; line-height: 1.5; margin: 0; padding-right: 60px; }

		/* Toggle Switch */
		.glo-toggle { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
		.glo-toggle input { opacity: 0; width: 0; height: 0; }
		.glo-toggle-slider {
			position: absolute; cursor: pointer;
			inset: 0;
			background-color: #4a5568;
			border-radius: 26px; transition: 0.3s;
		}
		.glo-toggle-slider:before {
			content: ""; position: absolute;
			height: 20px; width: 20px;
			left: 3px; bottom: 3px;
			background: white; border-radius: 50%;
			transition: 0.3s;
			box-shadow: 0 1px 3px rgba(0,0,0,0.3);
		}
		.glo-toggle input:checked + .glo-toggle-slider { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); }
		.glo-toggle input:checked + .glo-toggle-slider:before { transform: translateX(22px); }
		.glo-toggle input:disabled + .glo-toggle-slider { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); opacity: 0.6; cursor: not-allowed; }
		.glo-toggle input:disabled:checked + .glo-toggle-slider:before { transform: translateX(22px); }

		.glo-cookie-prefs-save {
			display: block; width: 100%; margin-top: 24px; padding: 14px;
			background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
			color: #fff; border: none; border-radius: 10px;
			font-size: 15px; font-weight: 600; cursor: pointer;
			transition: all 0.2s;
			box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
		}
		.glo-cookie-prefs-save:hover { transform: translateY(-1px); box-shadow: 0 6px 10px -1px rgba(245, 158, 11, 0.4); }

		/* Policy Modal (Privacy / Cookie Policy) */
		.glo-policy-overlay {
			display: none;
			position: fixed; inset: 0;
			background: rgba(0,0,0,0.7);
			z-index: 100001;
			overflow-y: auto;
		}
		.glo-policy-overlay.active { display: flex; justify-content: center; padding: 2rem 1rem; }
		.glo-policy-modal {
			background: #fff;
			border-radius: 16px;
			max-width: 720px;
			width: 100%;
			padding: 0;
			position: relative;
			max-height: none;
			animation: gloCookieFadeIn 0.2s ease-out;
			margin: auto;
		}
		.glo-policy-modal-header {
			background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
			padding: 28px 32px;
			border-radius: 16px 16px 0 0;
			position: sticky; top: 0; z-index: 2;
		}
		.glo-policy-modal-header h1 { color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 4px 0; }
		.glo-policy-modal-header p { color: #718096; font-size: 13px; margin: 0; }
		.glo-policy-close {
			position: absolute; top: 20px; right: 20px;
			background: rgba(255,255,255,0.1); border: none;
			color: #fff; font-size: 20px; width: 36px; height: 36px;
			border-radius: 50%; cursor: pointer;
			display: flex; align-items: center; justify-content: center;
			transition: all 0.2s;
		}
		.glo-policy-close:hover { background: rgba(255,255,255,0.2); }
		.glo-policy-body {
			padding: 32px;
			color: #333;
			font-size: 15px; line-height: 1.7;
		}
		.glo-policy-body h2 {
			font-size: 19px; font-weight: 700; color: #1a202c;
			margin: 32px 0 10px 0;
			padding-top: 16px;
			border-top: 1px solid #eee;
		}
		.glo-policy-body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
		.glo-policy-body h3 { font-size: 15px; font-weight: 600; color: #1a202c; margin: 18px 0 6px 0; }
		.glo-policy-body p { margin-bottom: 12px; color: #444; }
		.glo-policy-body ul { margin: 8px 0 16px 24px; }
		.glo-policy-body li { margin-bottom: 6px; color: #444; }
		.glo-policy-body a { color: #f97316; }
		.glo-policy-body .policy-highlight {
			background: #fff7ed; border-left: 4px solid #f97316;
			padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 14px 0 20px 0;
		}
		.glo-policy-body .policy-highlight p { margin-bottom: 3px; color: #333; }
		.glo-policy-body .policy-highlight p:last-child { margin-bottom: 0; }
		.glo-policy-body table {
			width: 100%; border-collapse: collapse; font-size: 13px;
			margin: 12px 0 20px 0; border-radius: 8px; overflow: hidden;
			border: 1px solid #e5e5e5;
		}
		.glo-policy-body th {
			text-align: left; padding: 10px 14px; font-weight: 600; color: #333;
			background: #f9fafb; border-bottom: 2px solid #e5e5e5;
		}
		.glo-policy-body td {
			padding: 10px 14px; border-bottom: 1px solid #eee; color: #555; vertical-align: top;
		}
		.glo-policy-body tr:last-child td { border-bottom: none; }
		.glo-rights-grid {
			display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 20px 0;
		}
		.glo-right-card {
			background: #f9fafb; border: 1px solid #eee; border-radius: 8px; padding: 14px;
		}
		.glo-right-card h4 { font-size: 13px; font-weight: 700; color: #1a202c; margin: 0 0 4px 0; }
		.glo-right-card p { font-size: 12px; margin: 0; color: #666; }

		@media (max-width: 600px) {
			.glo-cookie-banner { padding: 20px 16px; }
			.glo-cookie-buttons { flex-direction: column; }
			.glo-cookie-btn { width: 100%; }
			.glo-cookie-prefs { padding: 24px 20px; width: 95%; }
			.glo-rights-grid { grid-template-columns: 1fr; }
			.glo-policy-body { padding: 20px; }
		}
	


/* =====================================================================
   BUILD 355-364: COMPREHENSIVE MOBILE + GLOBAL FIXES
   All rules are mobile-only (inside @media max-width:768px) UNLESS
   explicitly labelled as global or desktop. Desktop is unaffected.
   ===================================================================== */

/* =============================================================
   MOBILE: First block — layout, grids, containment, tables
   ============================================================= */
@media (max-width: 768px) {

  /* Global box-sizing so padding never adds to element width */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* FAB button above bottom nav */
  .glo-fab-container {
    bottom: 5rem !important;
  }

  /* Outer screen card: tighter padding */
  .bg-white.rounded-lg.shadow.p-6 {
    padding: 10px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Content area padding */
  .glo-content > div {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Modals above bottom nav + mobile header */
  .fixed.inset-0.bg-black,
  .fixed.inset-0.bg-opacity-50,
  .fixed.inset-0.bg-black.bg-opacity-50 {
    z-index: 2000 !important;
  }

  /* Modal inner containers: respect screen edges */
  [class*="bg-white rounded-lg"][class*="max-w"] {
    margin: 8px !important;
  }
  .fixed.inset-0 > [class*="bg-white"],
  .fixed.inset-0 > div > [class*="bg-white"] {
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box;
  }

  /* ---- Tailwind grid classes: collapse on mobile ---- */
  .grid.grid-cols-2:not(.glo-keep-cols),
  .grid.grid-cols-3:not(.glo-keep-cols),
  .grid.grid-cols-4:not(.glo-keep-cols),
  .grid.grid-cols-5:not(.glo-keep-cols) {
    grid-template-columns: 1fr !important;
  }

  /* ---- Named inline grid hooks ---- */
  /* Ensure all named grids are contained */
  .dashboard-stat-grid, .dashboard-charts-grid,
  .glo-appt-grid, .glo-checkout-grid,
  .glo-report-stat-grid, .glo-payment-breakdown-grid,
  .glo-revenue-summary-grid, .glo-audit-summary-grid,
  .glo-audit-filter-grid, .glo-inline-2col,
  .glo-name-grid, .glo-dob-age-grid,
  .glo-city-postcode-grid, .glo-eod-entry-grid,
  .glo-eod-variance-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Grid children never overflow their cell */
  .dashboard-stat-grid > *, .dashboard-charts-grid > *,
  .glo-inline-2col > *, .glo-checkout-grid > *,
  .glo-appt-grid > *, .glo-report-stat-grid > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Dashboard: 2×2 stat cards */
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }

  /* Dashboard charts: stack */
  .dashboard-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Appointment modal */
  .glo-appt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Checkout POS two-panel */
  .glo-checkout-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reports 5-col: 2-col */
  .glo-report-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }

  /* Payment breakdown: 2-col */
  .glo-payment-breakdown-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Revenue summary: single col */
  .glo-revenue-summary-grid {
    grid-template-columns: 1fr !important;
  }

  /* Audit summary: 2-col */
  .glo-audit-summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Audit filters: stack */
  .glo-audit-filter-grid {
    grid-template-columns: 1fr !important;
  }

  /* General 2-col grids: stack */
  .glo-inline-2col,
  .glo-name-grid,
  .glo-dob-age-grid,
  .glo-city-postcode-grid,
  .glo-eod-entry-grid {
    grid-template-columns: 1fr !important;
  }

  /* EOD variance: keep 3-col (values are short) */
  .glo-eod-variance-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    font-size: 0.8rem !important;
  }

  /* ---- Header button rows: wrap ---- */
  .flex.justify-between.items-center.mb-6 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .flex.justify-between.items-center.mb-6 > .flex.gap-2 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .flex.justify-between.items-center.mb-6 button {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
  }

  /* ---- Screen headings ---- */
  h2.text-2xl.font-bold {
    font-size: 1.2rem !important;
  }

  /* ---- Tables: horizontal scroll ---- */
  .glo-table-scroll,
  .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Reports/settings tables: scrollable not clipping */
  .mb-6 > table.w-full,
  .bg-white.border.rounded-lg.overflow-hidden > table.w-full,
  .border.rounded-lg > table,
  table.w-full {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Allow scroll on course minutes table wrapper */
  .bg-white.border.rounded-lg.overflow-hidden:has(> table.w-full) {
    overflow: visible !important;
  }

  /* Table cell padding reduction */
  .mb-6 > table.w-full th,
  .mb-6 > table.w-full td,
  .bg-white.border.rounded-lg.overflow-hidden > table.w-full th,
  .bg-white.border.rounded-lg.overflow-hidden > table.w-full td {
    white-space: nowrap;
    font-size: 0.78rem !important;
    padding: 6px 8px !important;
  }

  /* ---- Help screen ---- */
  /* Stack outer flex containers (scoped to .p-6 to not affect calendar toolbar) */
  .p-6 > .flex.gap-6 {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Category sidebar: full width */
  .w-56.flex-shrink-0 {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* Support card: stack text above buttons */
  [style*="linear-gradient(135deg, #1a202c"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Support buttons: wrap so New Ticket doesn't overflow right */
  [style*="linear-gradient(135deg, #1a202c"] > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* ---- Calendar toolbar ---- */
  .p-4.border-b.flex.items-center.justify-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .p-4.border-b.flex.items-center.justify-between > .flex.items-center.gap-4 {
    gap: 6px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .p-4.border-b.flex.items-center.justify-between .px-4.py-2.bg-blue-500 {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }
  /* Notification + SOS: always visible */
  .p-4.border-b.flex.items-center.justify-between > div:last-child {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* ---- FullCalendar horizontal scroll ---- */
  .fc .fc-scroller {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
  }
  .fc .fc-scroller::-webkit-scrollbar { height: 6px; }
  .fc .fc-scroller::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
  .fc .fc-scroller::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
  .fc .fc-scroller::-webkit-scrollbar-thumb:hover { background: #64748b; }

  /* Time axis: sticky left */
  .fc .fc-timegrid-axis,
  .fc .fc-scrollgrid-shrink,
  .fc th.fc-timegrid-axis {
    position: sticky !important;
    left: 0 !important;
    z-index: 4 !important;
    background: #f3f4f6 !important;
  }
  .fc .fc-timegrid-slot-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 4 !important;
    background: white !important;
  }

  /* FullCalendar toolbar */
  .fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
  .fc .fc-toolbar-title { font-size: 1rem !important; }
  .fc .fc-button { padding: 4px 8px !important; font-size: 12px !important; }
}

/* =============================================================
   GLOBAL (ALL SCREEN SIZES): Mobile header always visible
   BUILD 364: Hamburger always shown; positioned correctly per breakpoint
   ============================================================= */
.glo-mobile-header {
  display: flex !important;
}

/* Desktop sidebar always visible */
@media (min-width: 769px) {
  .glo-sidebar {
    transform: translateX(0) !important;
  }

  /* Header floats above content area only (right of sidebar) */
  .glo-mobile-header {
    left: 16rem !important;
    height: 48px !important;
    z-index: 100 !important;
  }

  /* Content top padding clears the header */
  .glo-content {
    padding-top: 48px !important;
  }
}

/* Sidebar close button: desktop hidden */
.glo-sidebar-close {
  display: none !important;
}

/* Bottom nav: desktop hidden */
.glo-bottom-nav {
  display: none !important;
}

/* More drawer: desktop hidden */
.glo-more-drawer {
  display: none !important;
}

/* =============================================================
   MOBILE: Second block — nav/sidebar/drawer
   ============================================================= */
@media (max-width: 768px) {
  /* Show mobile header full width */
  .glo-mobile-header {
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
  }

  /* Sidebar: slide-in drawer */
  .glo-sidebar {
    transform: translateX(-100%) !important;
    z-index: 1300 !important;
    top: 0 !important;
    padding-top: 60px !important;
    width: 280px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  }

  /* When open: must come AFTER the hide rule above */
  .glo-sidebar.glo-sidebar-open,
  .glo-sidebar-open {
    transform: translateX(0) !important;
  }

  /* Show close button in sidebar */
  .glo-sidebar-close {
    display: flex !important;
  }

  /* Content: no left margin, padding for header + bottom nav */
  .glo-content {
    margin-left: 0 !important;
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  /* Show bottom nav */
  .glo-bottom-nav {
    display: flex !important;
  }

  /* Show more drawer */
  .glo-more-drawer {
    display: block !important;
  }

  .glo-modal-overlay {
    padding: 0 !important;
  }
}

/* Tablet: narrower sidebar */
@media (min-width: 769px) and (max-width: 1024px) {
  .glo-sidebar {
    width: 13rem !important;
  }
  .glo-content {
    margin-left: 13rem !important;
  }
  .glo-mobile-header {
    left: 13rem !important;
  }
}

/* =============================================================
   BUILD 355/356: Desktop restore for named grid hooks
   Grids collapsed on mobile restore to original on desktop
   ============================================================= */
@media (min-width: 769px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }
  .dashboard-charts-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .glo-report-stat-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
  }
  /* Payment breakdown: JS inline style wins on desktop */
  .glo-payment-breakdown-grid {
    grid-template-columns: unset !important;
  }
  .glo-revenue-summary-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .glo-audit-summary-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .glo-audit-filter-grid {
    grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.9fr !important;
  }
  /* Restore outer card padding on desktop */
  .bg-white.rounded-lg.shadow.p-6 {
    padding: 1.5rem !important;
  }
  /* Restore named 2-col grids */
  .glo-inline-2col,
  .glo-name-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .glo-dob-age-grid,
  .glo-city-postcode-grid {
    grid-template-columns: 2fr 1fr !important;
  }
  .glo-eod-entry-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Restore table display on desktop */
  table.w-full,
  .border.rounded-lg > table {
    display: table !important;
    overflow-x: visible;
  }
}

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

/* BUILD 326: PIN pad shake animation */
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
  90% { transform: translateX(4px); }
}