:root {
      --card-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      --draw-ease: cubic-bezier(0.22, 1, 0.36, 1); 
      --text-ease: cubic-bezier(0.20, 1.0, 0.50, 1.0); 
      --speed-mult: 1.3;
      --card-dur: 1.5s;
      --card-ease: cubic-bezier(0.78, 0.00, 0.78, 0.22);
      --start-logo: 1.2s;
      --start-content: 3.32s;
      --casc-mo-dur: 0.8s;
      --casc-op-dur: 4s;
      --casc-ease: cubic-bezier(0.38, 0.00, 0.38, 0.75);
      --cascade-gap: 0.08s;
    }

    #appCard { --start-content: 0.3s; }

    .synthetic-dash {
      background-image: linear-gradient(to right, #d1d5db 50%, transparent 50%);
      background-position: bottom;
      background-size: 14px 3px; 
      background-repeat: round no-repeat;
    }
    html.dark .synthetic-dash { background-image: linear-gradient(to right, #374151 50%, transparent 50%); }

    .hidden-panel { display: none !important; }
    .advanced-fields { display: none !important; }
    body.advanced-mode .advanced-fields { display: flex !important; }
    body:not(.advanced-mode) .advanced-only-card { display: none !important; }

    .run-anim { opacity: 0; animation: cardFade var(--card-dur) var(--card-ease) forwards; }
    
    /* PATCH: Strict WebKit Prefixing for iPadOS 17 Paint Layer */
    .mask-anim { fill: #ffffff; -webkit-transform-box: fill-box; transform-box: fill-box; }
    #gatewaySvgImage { -webkit-mask-image: url(#gateway-mask); mask-image: url(#gateway-mask); }
    
    .run-anim .p4-anim { transform-origin: top;
      transform: scaleY(0); animation: scaleYIn calc(0.8s / var(--speed-mult)) var(--draw-ease) calc(var(--start-logo) + (0s / var(--speed-mult))) forwards;
    }
    .run-anim .arch-anim { transform-origin: bottom; transform: scaleY(0);
      animation: scaleYIn calc(1.1s / var(--speed-mult)) var(--draw-ease) calc(var(--start-logo) + (0.4s / var(--speed-mult))) forwards;
    }
    .run-anim .text-anim { transform-origin: left; transform: scaleX(0);
      animation: scaleXIn calc(1.75s / var(--speed-mult)) var(--text-ease) calc(var(--start-logo) + (1.0s / var(--speed-mult))) forwards;
    }
    .run-anim .fallbackBadge { opacity: 0; transform: scale(0.9); animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--start-logo) forwards; }
    
    .run-anim .cascade-item { 
      opacity: 0; transform: translateY(15px); 
      animation: fadeIn var(--casc-op-dur) var(--casc-ease) calc(var(--start-content) + (var(--item-idx, 0) * var(--cascade-gap))) forwards,
                 slideIn var(--casc-mo-dur) var(--casc-ease) calc(var(--start-content) + (var(--item-idx, 0) * var(--cascade-gap))) forwards;
    }

    @keyframes cardFade { to { opacity: 1; } }
    @keyframes scaleYIn { to { transform: scaleY(1); } }
    @keyframes scaleXIn { to { transform: scaleX(1); } }
    @keyframes fadeIn { to { opacity: 1; } }
    @keyframes slideIn { to { transform: translateY(0); } }
    @keyframes popIn { to { opacity: 1; transform: scale(1); } }

    .fade-out-reset { opacity: 0 !important; transition: opacity 0.4s ease-in-out !important; pointer-events: none; }
    .modal-fade-out { opacity: 0 !important; transition: opacity 0.3s ease-out !important; }
    #confirmModal, #expertWarningModal, #customDateWarningModal, #disambiguationModal, #workCodeModal, #auditModal { transition: opacity 0.3s ease-in-out; }

    .container { max-width: 850px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: var(--card-shadow); transition: background 0.3s, border 0.3s; }
    input:not(.faux-input):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { -webkit-appearance: none; appearance: none; padding: 10px 18px !important; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; transition: border-color 0.2s; width: 100%; box-sizing: border-box; line-height: 1.5; }
    input[readonly] { background-color: #f3f4f6; color: #555; border: 1px solid transparent; }
    
    .faux-wrapper { display: flex; align-items: baseline; padding: 10px 18px; border: 1px solid #ccc; border-radius: 6px; transition: all 0.2s; width: 100%; background-color: white; }
    .faux-wrapper:focus-within { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
    input.faux-input { -webkit-appearance: none; appearance: none; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; width: 100%; outline: none !important; box-shadow: none !important; font-size: 14px; line-height: 1.5; color: inherit; }
    
    button { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; background: #0056b3; color: white; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .add-btn { background: #28a745; margin-bottom: 20px; font-size: 13px; padding: 8px 14px; font-weight: 500; }
    .report-btn { background: #17a2b8; font-size: 13px; font-weight: 500; }
    .invoice-btn { background: #10b981; font-size: 13px; font-weight: 500; }
    .global-btn-1 { background: #5a32fa; color: white !important; font-size: 13px; font-weight: 500; }
    .global-btn-2 { background: #f59e0b; color: white !important; font-size: 13px; font-weight: 500; }
    .close-btn { background: #6b7280; font-size: 14px; font-weight: 500; }
    
    .submit-btn { background: #5a32fa; width: 100%; font-size: 15px; font-weight: 600; padding: 12px; letter-spacing: 0.3px; color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(90, 50, 250, 0.3), 0 2px 4px -1px rgba(90, 50, 250, 0.15); }
    button:active { transform: translateY(2px); }
    .submit-btn:active { box-shadow: 0 1px 2px -1px rgba(90, 50, 250, 0.6) inset, 0 0 0 transparent; background: #4a28cc; }

    .logger-title { margin: 0; color: #111827; font-size: 26px; font-weight: 600; letter-spacing: -0.3px; }
    .date-label { font-weight: 600; font-size: 14px; color: #374151; }
    
    .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100; backdrop-filter: blur(3px); padding: 20px 0; }
    .modal-content { background: white; margin: 20px auto; width: 90%; max-width: 600px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: background-color 0.2s, border-color 0.2s; border: 1px solid transparent; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
    
    .loader { display: none; font-size: 13px; color: #0056b3; font-style: italic; position: absolute; right: 12px; left: auto; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
    @media (min-width: 640px) { .loader { right: auto; left: calc(100% + 10px); } }

    html.dark .container { background: #1f2937; color: #f3f4f6; box-shadow: 0 12px 30px -5px rgba(0,0,0,0.5); border: 1px solid #374151; }
    html.dark input:not(.faux-input), html.dark select, html.dark textarea { background: #111827; color: white; border-color: #374151; }
    html.dark .faux-wrapper { background: #111827; border-color: #374151; }
    html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af; } 
    html.dark input[readonly] { background-color: #374151; color: #e5e7eb; border-color: transparent; }
    html.dark .logger-title, html.dark h3 { color: #ffffff !important; }
    html.dark .date-label { color: #d1d5db; }
    html.dark .modal-content { background: #1f2937; color: #f3f4f6; border-color: #374151; }
    html.dark .fallbackBadge { background: #3b82f6; } 

    .expert-row-anim { animation: slideDown 0.2s ease-out forwards; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .expert-no-scrollbar::-webkit-scrollbar { display: none; }
    .expert-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Expert Terminal Recalibrated Flexbox Physics */
    .date-col { width: 0; opacity: 0; overflow: hidden; padding-right: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
    .ref-col { width: 50%; padding-right: 0.375rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
    .hrs-col { width: 50%; padding-left: 0.375rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }

    .custom-dates-active .date-col { width: 42%; opacity: 1; padding-right: 0.25rem; }
    .custom-dates-active .ref-col { width: 29%; padding-left: 0.25rem; padding-right: 0.25rem; }
    .custom-dates-active .hrs-col { width: 29%; padding-left: 0.25rem; }
    
    .popover-active { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }
    .print-footer { display: none; }
    
    /* === PHASE B: PROGRESSIVE DISCLOSURE PHYSICS === */
    #workCodesWrapper, #timeCodesWrapper { 
      max-height: 180px; 
      overflow: hidden; 
      position: relative; 
      transition: max-height 0.35s cubic-bezier(0.38, 0.00, 0.38, 0.75); 
    }
    #workCodesFade, #timeCodesFade { 
      position: absolute; 
      bottom: 0; left: 0; right: 0; 
      height: 70px; 
      background: linear-gradient(to bottom, transparent, #ffffff); 
      pointer-events: none; 
      transition: opacity 0.3s ease-in-out; 
    }
    html.dark #workCodesFade, html.dark #timeCodesFade { background: linear-gradient(to bottom, transparent, #1f2937); }

    /* === PHASE C & D: ANALYTICS DASHBOARD ENGINE PHYSICS === */
    #unifiedDashboard { 
      transform: translateY(100%); 
      transition: transform 0.4s cubic-bezier(0.38, 0.00, 0.38, 0.75); 
      /* WebKit Touch & Text Neutralisation */
      -webkit-user-select: none; user-select: none;
      -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
    }
    #unifiedDashboard.active-dashboard { transform: translateY(0); }
    #dashboardBackdrop { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
    #dashboardBackdrop.active-backdrop { opacity: 1; pointer-events: auto; }
    
    .svg-bar { transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), y 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
    .svg-arc { transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1); }

    @media print {
      body, html { background-color: white !important; height: auto !important; overflow: visible !important; }
      body > *:not(#phantomPrintCanvas) { display: none !important; }
      #phantomPrintCanvas { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .print-avoid-break { page-break-inside: avoid; break-inside: avoid; }
      .print-keep-with-next { page-break-after: avoid; break-after: avoid; }
      .no-print { display: none !important; }
    }

    /* ==========================================
       UNIVERSAL MOBILE OPTIMISATION MATRIX 
       Executes strictly on viewports <= 639px
       ========================================== */
    @media (max-width: 639px) {
      input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .faux-input { font-size: 16px !important; font-weight: 400 !important; }
      input:not(.faux-input):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .faux-wrapper { padding-top: 8px !important; padding-bottom: 8px !important; }
      #authUsername, #authCode { letter-spacing: 0.1em !important; padding-top: 10px !important; padding-bottom: 10px !important; }
      select[id^="expert-work-code-"] {
        height: 42px !important; line-height: normal !important; -webkit-appearance: none !important; appearance: none !important;
        padding: 8px 12px !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 12px !important;
      }
      textarea[id^="expert-comment-"] { min-height: 42px !important; padding: 10px 12px !important; }
      .mobile-full-span .date-col, .mobile-full-span .hrs-col { display: none !important; }
      .mobile-full-span .ref-col { width: 100% !important; max-width: 100% !important; }
      .custom-dates-active .expert-row-inputs { flex-wrap: wrap !important; }
      .custom-dates-active .expert-row-inputs .date-col { width: 100% !important; padding-right: 0 !important; margin-bottom: 8px !important; }
      .custom-dates-active .expert-row-inputs .ref-col { width: 50% !important; padding-left: 0 !important; padding-right: 6px !important; }
      .custom-dates-active .expert-row-inputs .hrs-col { width: 50% !important; padding-left: 6px !important; }
    }
    
        /* === CHART INTERACTIVITY === */
    .chart-element { transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important; }
    .chart-dimmed { opacity: 0.15 !important; }
    
        /* Directory Lookup & Modal Search Input Padding Override */
    #directorySearchInput,
    #adminMasterSearchInput,
    #gallerySearchInput,
    #adminMergeSearch {
      padding-left: 48px !important;
    }
    
    /* ==========================================
   MASTER ADMIN TERMINAL SPECIFICS
   ========================================== */
.admin-only { display: none !important; }
.admin-flex { display: none !important; }

body.is-admin .admin-only { display: block !important; }
body.is-admin .admin-flex { display: flex !important; }

.voided-entry { opacity: 0.55; position: relative; filter: grayscale(100%); }
.voided-entry::after {
    content: ''; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px;
    background: #dc3545; z-index: 10; pointer-events: none; border-radius: 2px;
}

/* ==========================================
   WORM CORRECTION TERMINAL PHYSICS
   ========================================== */

/* Immutable "Original" State */
.worm-input-default {
  color: #9ca3af !important; /* Muted Grey */
  font-weight: 500 !important;
  transition: all 0.3s ease;
}

/* Active "Delta" State (Edited) */
.worm-input-edited {
  color: #5a32fa !important; /* P4 Brand Indigo */
  font-weight: 700 !important;
  border-color: #5a32fa !important;
  box-shadow: 0 0 0 1px #5a32fa !important;
  transition: all 0.3s ease;
}

html.dark .worm-input-edited {
  color: #a78bfa !important;
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 1px #a78bfa !important;
}

/* iOS Modal Scrolling Failsafe */
.modal-scroll-area {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  flex: 1 1 auto;
  min-height: 0;
}

/* ==========================================
   GLOBAL SOFTNESS STRUCTURAL ENGINE (BI-DIRECTIONAL)
   ========================================== */

:root {
    /* 1. Light Mode Base Variables */
    --base-canvas: #f9fafb;     /* Tailwind bg-gray-50 */
    --base-card: #ffffff;       /* Pure white */
    --base-input: #ffffff;      /* Pure white */
    --base-toggle: #f3f4f6;     /* Tailwind bg-gray-100 */
    --base-menu: #9ca3af;       /* Tailwind text-gray-400 */
    --base-border: #e5e7eb;     /* Tailwind border-gray-200 */

    /* 2. Default Mixing Agents (Black for darkening) */
    --mix-canvas: #000000;
    --mix-card: #000000;
    --mix-input: #000000;
    --mix-toggle: #000000;
    --mix-menu: #000000;

    /* 3. Decoupled Elevation Controls */
    --dynamic-card-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --dynamic-btn-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
    --dynamic-input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

    /* 4. Mathematical Colour Mixers */
    --theme-canvas: color-mix(in srgb, var(--base-canvas), var(--mix-canvas) var(--canvas-offset, 0%));
    --theme-card: color-mix(in srgb, var(--base-card), var(--mix-card) var(--card-offset, 0%));
    --theme-input: color-mix(in srgb, var(--base-input), var(--mix-input) var(--input-offset, 0%));
    --theme-toggle: color-mix(in srgb, var(--base-toggle), var(--mix-toggle) var(--toggle-offset, 0%));
    --theme-menu: color-mix(in srgb, var(--base-menu), var(--mix-menu) var(--menu-offset, 0%));
    
    /* Auto-Scaling Borders */
    --theme-card-border: color-mix(in srgb, var(--base-border), var(--mix-card) calc(var(--card-offset, 0%) * 1.5));
    --theme-input-border: color-mix(in srgb, var(--base-border), var(--mix-input) calc(var(--input-offset, 0%) * 2));
    --theme-toggle-border: color-mix(in srgb, var(--base-border), var(--mix-toggle) calc(var(--toggle-offset, 0%) * 1.5));
}

/* --- LIGHT MODE INTENSITY STAGES --- */

/* STAGE 0: Max Intensity (Baseline) */
html.softness-0 {
    --canvas-offset: 0%; 
    --card-offset: 0%;
    --input-offset: 0%; 
    --toggle-offset: 0%; 
    --menu-offset: 0%;
    
    --dynamic-card-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1); 
    --dynamic-btn-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* STAGE 1: Mid Intensity */
html.softness-1 {
    /* Dim the backgrounds */
    --mix-canvas: #000000; --canvas-offset: 6%; 
    --mix-card: #000000;   --card-offset: 2%;   
    
    /* Keep Input crisp */
    --mix-input: #000000;  --input-offset: 0%;     
    
    /* Slightly dim toggle & darken menu to protect contrast */
    --mix-toggle: #000000; --toggle-offset: 2%;    
    --mix-menu: #000000;   --menu-offset: 15%;     
    
    --dynamic-card-shadow: 0 16px 35px -5px rgba(0, 0, 0, 0.18), 0 10px 12px -6px rgba(0, 0, 0, 0.12);
    --dynamic-btn-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.15);
}

/* STAGE 2: Min Intensity */
html.softness-2 {
    /* Deeply dim the backgrounds */
    --mix-canvas: #000000; --canvas-offset: 19%; 
    --mix-card: #000000;   --card-offset: 4%;  
    
    /* Keep Input crisp against the grey card */
    --mix-input: #000000;  --input-offset: 0%;     
    
    /* EXPERIMENT: Lighten the Toggle by injecting White to separate it from the card */
    --mix-toggle: #ffffff; --toggle-offset: 80%;  
    
    /* EXPERIMENT: Darken the Menu Icons heavily so they stand out against the grey canvas */
    --mix-menu: #000000;   --menu-offset: 40%;    
    
    --dynamic-card-shadow: 0 18px 38px -5px rgba(0, 0, 0, 0.27), 0 12px 15px -6px rgba(0, 0, 0, 0.18);
    --dynamic-btn-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
}

/* --- STRICT TARGETING RULES (Light Mode Only) --- */

/* 1. Canvas Elements */
html:not(.dark) body,
html:not(.dark) #unifiedDashboard,
html:not(.dark) #masterAdminOverlay,
html:not(.dark) #expertOverlay {
    background-color: var(--theme-canvas) !important;
    transition: background-color 0.3s ease;
}

/* 2. Primary Structural Cards */
html:not(.dark) #gatewayCard,
html:not(.dark) #appCard .container,
html:not(.dark) .modal-content,
html:not(.dark) #sessionPopover {
    background-color: var(--theme-card) !important;
    box-shadow: var(--dynamic-card-shadow) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 3. Interactive Buttons */
html:not(.dark) button.bg-white {
    background-color: var(--theme-card) !important;
    box-shadow: var(--dynamic-btn-shadow) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 4. Form Structural Inputs */
html:not(.dark) input:not(.faux-input), 
html:not(.dark) select, 
html:not(.dark) textarea, 
html:not(.dark) .faux-wrapper {
    background-color: var(--theme-input) !important;
    border-color: var(--theme-input-border) !important;
    box-shadow: var(--dynamic-input-shadow) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 5. Toggle Switch Backgrounds */
html:not(.dark) .bg-gray-100.dark\:bg-gray-800 {
    background-color: var(--theme-toggle) !important;
    border-color: var(--theme-toggle-border) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 6. Top Nav Menu Icons */
html:not(.dark) .absolute.top-4.right-4 button.text-gray-400,
html:not(.dark) .absolute.top-4.right-4 a.text-gray-400 {
    color: var(--theme-menu) !important;
    transition: color 0.3s ease;
}

/* ==========================================
   DARK MODE VARIABLE ENGINE (LUMINANCE LIFT)
   ========================================== */

:root {
    /* 1. Base Dark Mode Foundation (Softness 0) */
    --base-dark-canvas: #111827; 
    --base-dark-card: #1f2937;   
    
    /* Decoupled bases for specific UI elements */
    --base-dark-input: #111827;  
    --base-dark-toggle: #1f2937; 

    /* 2. Mathematical Luminance Mixers */
    /* Dynamically injects pure white (#ffffff) to lift brightness while preserving hue */
    --theme-dark-canvas: color-mix(in srgb, var(--base-dark-canvas), #ffffff var(--dark-canvas-lift, 0%));
    --theme-dark-card: color-mix(in srgb, var(--base-dark-card), #ffffff var(--dark-card-lift, 0%));
    --theme-dark-input: color-mix(in srgb, var(--base-dark-input), #ffffff var(--dark-input-lift, 0%));
    --theme-dark-toggle: color-mix(in srgb, var(--base-dark-toggle), #ffffff var(--dark-toggle-lift, 0%));
    
    /* 3. Auto-Scaling Borders */
    /* Borders dynamically travel with your brightness adjustments */
    --theme-dark-card-border: color-mix(in srgb, var(--theme-dark-card), #ffffff 10%);
    --theme-dark-input-border: color-mix(in srgb, var(--theme-dark-input), #ffffff 15%);
    --theme-dark-toggle-border: color-mix(in srgb, var(--theme-dark-toggle), #ffffff 10%);
}

/* --- DARK MODE INTENSITY STAGES --- */

/* STAGE 0: Max Intensity (Baseline) */
html.dark.softness-0 {
    --dark-canvas-lift: 0%; 
    --dark-card-lift: 0%;   
    --dark-input-lift: 0%; 
    --dark-toggle-lift: 0%;
    
    /* FIXED: Scoped override to cure the contrast collision exclusively at Max Intensity */
    --base-dark-toggle: #111827; 
}

/* STAGE 1: Mid Intensity */
html.dark.softness-1 {
    --dark-canvas-lift: 8%;  
    --dark-card-lift: 8%;    
    --dark-input-lift: 6%;   
    --dark-toggle-lift: 5%;
}

/* STAGE 2: Min Intensity */
html.dark.softness-2 {
    --dark-canvas-lift: 16%; 
    --dark-card-lift: 16%;   
    
    /* CALIBRATION ZONE: Increase these percentages to cure the 'black hole' effect */
    --dark-input-lift: 12%;  
    --dark-toggle-lift: 6%;
}

/* --- STRICT TARGETING RULES (Dark Mode Only) --- */

html.dark body,
html.dark #unifiedDashboard,
html.dark #masterAdminOverlay,
html.dark #expertOverlay {
    background-color: var(--theme-dark-canvas) !important;
    transition: background-color 0.3s ease;
}

html.dark .container,
html.dark .modal-content,
html.dark #gatewayCard,
html.dark #sessionPopover,
html.dark button.bg-white {
    background-color: var(--theme-dark-card) !important;
    border-color: var(--theme-dark-card-border) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.dark input:not(.faux-input),
html.dark select,
html.dark textarea,
html.dark .faux-wrapper {
    background-color: var(--theme-dark-input) !important;
    border-color: var(--theme-dark-input-border) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.dark .bg-gray-100.dark\:bg-gray-800 {
    background-color: var(--theme-dark-toggle) !important;
    border-color: var(--theme-dark-toggle-border) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================
   DYNAMIC LOGO ENGINE (PNG HYBRID APPROACH)
   ========================================== */

/* 
   Base State (Light Mode)
   Primes the GPU for hardware-accelerated transitions.
*/
#gatewaySvg, 
#appRealImage {
    transition: filter 0.3s ease;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(1);
}

/* 
   Dark Mode State (Luminance Bump + Insulating Shadow)
   Reads the alpha channel of the PNG to draw a tight dark halo, 
   and bumps global brightness to mathematically separate the deep purple 
   from the mid-grey backgrounds across all softness levels.
*/
html.dark #gatewaySvg, 
html.dark #appRealImage {
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.9)) brightness(1.25) !important;
}

/* ==========================================
   DYNAMIC LOGO ENGINE (VARIABLE-DRIVEN PNG HYBRID)
   ========================================== */

/* 
   1. THE CONTROL PANEL (Dark Mode Only)
   Tweak these exact numbers to find the optimal aesthetic for each stage.
*/

/* Softness 0: The Raw Canvas */
html.dark.softness-0 {
    --logo-bright: 1;           /* 1 = No brightness adjustment */
    --logo-shadow-y: 0px;       /* No vertical offset */
    --logo-shadow-blur: 0px;    /* No blur spread */
    --logo-shadow-alpha: 0;     /* 0 = Completely invisible shadow */
}

/* Softness 1: The Mid-Tone */
html.dark.softness-1 {
    --logo-bright: 1.25;        /* 25% brightness bump */
    --logo-shadow-y: 1px;       /* Slight vertical drop */
    --logo-shadow-blur: 4px;    /* Tight, feathered blur */
    --logo-shadow-alpha: 0.25;   /* 40% black opacity */
}

/* Softness 2: The Inversion Point */
html.dark.softness-2 {
    --logo-bright: 1.5;         /* 50% brightness bump (fights the lighter background) */
    --logo-shadow-y: 2px;       /* Slightly deeper drop */
    --logo-shadow-blur: 9px;   /* Wide, diffuse spread */
    --logo-shadow-alpha: 0.30;  /* 35% black opacity (softer, less harsh) */
}

/* 
   2. THE HARDWARE-ACCELERATED ENGINE
   Do not edit below this line. This translates your variables into GPU rendering.
*/

/* Base State (Light Mode - Locks in the raw PNG and primes the GPU) */
#gatewaySvg, 
#appRealImage {
    transition: filter 0.3s ease;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) brightness(1);
}

/* Dark Mode State (Injects the active variables dynamically) */
html.dark #gatewaySvg, 
html.dark #appRealImage {
    filter: drop-shadow(0px var(--logo-shadow-y) var(--logo-shadow-blur) rgba(0, 0, 0, var(--logo-shadow-alpha))) brightness(var(--logo-bright)) !important;
}

/* Drawer Collapse Physics Engine */
.drawer-transition {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease-out,
        margin 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.drawer-closed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
}

.drawer-open {
    max-height: 1500px;
    /* Safe upper limit to accommodate scalable card contents */
    opacity: 1;
}

/* ==========================================
   INVOICING ENGINE: A4 PHYSICS & IOS FIXES
   ========================================== */

/* The A4 Viewport Constraint */
.a4-canvas-wrapper {
  background-color: #ffffff;
  width: 210mm;          /* Exact A4 Width */
  min-height: 297mm;     /* Exact A4 Height */
  padding: 20mm;
  box-sizing: border-box;
  margin: 0 auto;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Print Override - Strips shadow and margins when printing directly */
@media print {
  .a4-canvas-wrapper {
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* P4 Native Checkbox Engine */
.p4-checkbox-input:checked+.p4-checkbox-box {
    background-color: #5a32fa !important;
    border-color: #5a32fa !important;
}

.p4-checkbox-input:checked+.p4-checkbox-box svg {
    opacity: 1 !important;
}

/* ==========================================
   UNIVERSAL VALIDATION OVERRIDE
   ========================================== */
html body .input-error,
html:not(.dark) body .input-error,
html.dark body .input-error,
.input-error, [style*="border-color: #dc3545"], [style*="border-color: rgb(220, 53, 69)"] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
    transition: all 0.2s ease-in-out !important;
}

/* ==========================================
   MILEAGE LOGGER: MOBILE PLACEHOLDER FIX
   ========================================== */
@media (max-width: 639px) {

    #mlgStartPostcode::placeholder,
    #mlgEndPostcode::placeholder {
        font-size: 15px !important;
    }
}

/* ==========================================
   SURFACE ELEVATION UTILITIES (Z-AXIS MAPPING)
   ========================================== */
html:not(.dark) .surface-canvas { background-color: var(--theme-canvas) !important; transition: background-color 0.3s ease; }
html.dark .surface-canvas { background-color: var(--theme-dark-canvas) !important; transition: background-color 0.3s ease; }

html:not(.dark) .surface-card { background-color: var(--theme-card) !important; border-color: var(--theme-card-border) !important; box-shadow: var(--dynamic-card-shadow) !important; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
html.dark .surface-card { background-color: var(--theme-dark-card) !important; border-color: var(--theme-dark-card-border) !important; transition: background-color 0.3s ease, border-color 0.3s ease; }