/**
 * ValiFramework - Global Form Styling Overrides
 * 
 * Fixes form input visibility and styling issues in dark mode
 * These styles override Metronic defaults for better UX
 */

/* ============================================================================
   TEXT INPUTS - Better visibility in dark mode
   
   IMPORTANT: Excludes search inputs in DataTable headers (.kt-card-header)
   Those inputs use Metronic's default .kt-input styling
   ============================================================================ */

.input:not(.kt-card-header .kt-input input),
input[type="text"]:not(.kt-card-header input),
input[type="email"]:not(.kt-card-header input),
input[type="password"]:not(.kt-card-header input),
input[type="number"]:not(.kt-card-header input),
input[type="tel"]:not(.kt-card-header input),
input[type="url"]:not(.kt-card-header input),
textarea:not(.kt-card-header textarea) {
    /* Light mode - enhanced styling */
    padding: 0.1875rem 0.5rem !important; /* 3px 8px */
    border-radius: 0.375rem !important; /* 6px */
    background-color: rgb(249 250 251) !important; /* Slight gray background */
    border: 1px solid rgb(209 213 219) !important; /* Darker border */
}

.dark .input:not(.kt-card-header .kt-input input),
.dark input[type="text"]:not(.kt-card-header input),
.dark input[type="email"]:not(.kt-card-header input),
.dark input[type="password"]:not(.kt-card-header input),
.dark input[type="number"]:not(.kt-card-header input),
.dark input[type="tel"]:not(.kt-card-header input),
.dark input[type="url"]:not(.kt-card-header input),
.dark textarea:not(.kt-card-header textarea) {
    /* Dark mode - enhanced visibility */
    background-color: #000000 !important; /* Black background */
    border: 1px solid rgb(55 60 75) !important; /* Visible border */
    color: rgb(226 232 240) !important; /* Light text */
    padding: 0.1875rem 0.5rem !important; /* 3px 8px */
    border-radius: 0.375rem !important; /* 6px */
}

.dark .input:not(.kt-card-header .kt-input input):focus,
.dark input[type="text"]:not(.kt-card-header input):focus,
.dark input[type="email"]:not(.kt-card-header input):focus,
.dark input[type="password"]:not(.kt-card-header input):focus,
.dark input[type="number"]:not(.kt-card-header input):focus,
.dark input[type="tel"]:not(.kt-card-header input):focus,
.dark input[type="url"]:not(.kt-card-header input):focus,
.dark textarea:not(.kt-card-header textarea):focus {
    /* Focus state - highlight with primary color */
    border-color: rgb(59 130 246) !important;
    background-color: #000000 !important; /* Keep black on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.dark .input:not(.kt-card-header .kt-input input)::placeholder,
.dark input:not(.kt-card-header input)::placeholder,
.dark textarea:not(.kt-card-header textarea)::placeholder {
    color: rgb(100 116 139) !important; /* Muted placeholder text */
}

/* Readonly inputs - visually distinct */
.dark .input:not(.kt-card-header .kt-input input)[readonly],
.dark input:not(.kt-card-header input)[readonly],
.dark textarea:not(.kt-card-header textarea)[readonly] {
    background-color: rgb(20 23 33) !important;
    border-color: rgb(45 50 65) !important;
    color: rgb(148 163 184) !important;
    cursor: not-allowed;
}

/* ============================================================================
   SELECT DROPDOWNS - Better styling in dark mode
   ============================================================================ */

.select,
select {
    /* Light mode - enhanced styling */
    padding: 0.1875rem 0.5rem !important; /* 3px 8px */
    border-radius: 0.375rem !important; /* 6px */
    padding-right: 2.5rem !important; /* Space for arrow */
    /* Remove browser default arrow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Remove default background image to prevent double arrows */
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25rem 1.25rem !important;
}

.dark .select,
.dark select {
    /* Dark mode - match input styling */
    background-color: #000000 !important; /* Black background */
    border: 1px solid rgb(55 60 75) !important;
    color: rgb(226 232 240) !important;
    padding: 0.1875rem 0.5rem !important; /* 3px 8px */
    border-radius: 0.375rem !important; /* 6px */
    /* Remove browser default arrow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.dark .select:focus,
.dark select:focus {
    border-color: rgb(59 130 246) !important;
    background-color: #000000 !important; /* Keep black on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Dropdown arrow color fix - single arrow only */
.dark .select,
.dark select {
    /* This ensures the dropdown arrow is visible and not repeating */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25rem 1.25rem !important;
    padding-right: 2.5rem !important; /* Space for arrow */
}

/* Light mode select arrow */
.select,
select {
    padding-right: 2.5rem !important; /* Space for arrow */
}

/* Dropdown options - dark background */
.dark select option {
    background-color: #000000 !important; /* Black background */
    color: rgb(226 232 240) !important;
}

/* ============================================================================
   FORM LABELS - Better contrast
   ============================================================================ */

.form-label {
    /* Light mode - keep default */
}

.dark .form-label {
    color: rgb(203 213 225) !important; /* Lighter label text */
    font-weight: 500;
}

.dark .form-label .text-danger {
    color: rgb(248 113 113) !important; /* Red asterisk for required fields */
}

/* ============================================================================
   FORM INFO TEXT - Muted helper text
   ============================================================================ */

.form-info {
    /* Already styled by Metronic, but ensuring dark mode visibility */
}

.dark .form-info {
    color: rgb(100 116 139) !important;
}

/* ============================================================================
   SWITCHES & CHECKBOXES - Better visibility
   ============================================================================ */

.switch input[type="checkbox"] {
    /* Light mode - keep default */
}

.dark .switch input[type="checkbox"] {
    background-color: rgb(55 60 75) !important;
}

.dark .switch input[type="checkbox"]:checked {
    background-color: rgb(59 130 246) !important;
}

.dark .switch-label {
  
}

.dark .switch input:checked ~ .switch-label {
    background-color: rgb(59 130 246);
}

/* Regular checkboxes */
.dark input[type="checkbox"],
.dark input[type="radio"] {
    border-color: rgb(55 60 75) !important;
    background-color: rgb(30 33 44) !important;
}

.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
    background-color: rgb(59 130 246) !important;
    border-color: rgb(59 130 246) !important;
}

/* ============================================================================
   DISABLED STATE - Clearly show disabled inputs
   ============================================================================ */

.dark .input:not(.kt-card-header .kt-input input):disabled,
.dark input:not(.kt-card-header input):disabled,
.dark select:not(.kt-card-header select):disabled,
.dark textarea:not(.kt-card-header textarea):disabled {
    background-color: rgb(20 23 33) !important;
    border-color: rgb(45 50 65) !important;
    color: rgb(238, 228, 228) !important; /* slate-400 — readable but distinct from enabled */
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================================================
   LIGHT MODE ENHANCEMENTS - Subtle improvements
   ============================================================================ */

/* Light mode selects - enhanced styling */
select:not(.dark select) {
    background-color: rgb(249 250 251) !important; /* Slight gray background */
    border: 1px solid rgb(209 213 219) !important; /* Darker border */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25rem 1.25rem !important;
}

.input:not(.kt-card-header .kt-input input):focus,
input:not(.kt-card-header input):focus,
select:not(.kt-card-header select):focus,
textarea:not(.kt-card-header textarea):focus {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================================================
   VALIDATION STATES - Error and success styling
   ============================================================================ */

/* Error state */
.dark .input:not(.kt-card-header .kt-input input).is-invalid,
.dark input:not(.kt-card-header input).is-invalid,
.dark select:not(.kt-card-header select).is-invalid,
.dark .input:not(.kt-card-header .kt-input input):invalid,
.dark input:not(.kt-card-header input):invalid,
.dark select:not(.kt-card-header select):invalid {
    border-color: rgb(239 68 68) !important;
}

.dark .input:not(.kt-card-header .kt-input input).is-invalid:focus,
.dark input:not(.kt-card-header input).is-invalid:focus,
.dark select:not(.kt-card-header select).is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Success state */
.dark .input:not(.kt-card-header .kt-input input).is-valid,
.dark input:not(.kt-card-header input).is-valid,
.dark select:not(.kt-card-header select).is-valid {
    border-color: rgb(34 197 94) !important;
}

.dark .input:not(.kt-card-header .kt-input input).is-valid:focus,
.dark input:not(.kt-card-header input).is-valid:focus,
.dark select:not(.kt-card-header select).is-valid:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* ============================================================================
   CHOICES.JS - Dark mode styling for searchable dropdowns
   ============================================================================ */

/* Main container */
.dark .choices {
    margin-bottom: 0;
}

/* The clickable button/input area */
.dark .choices__inner {
    background-color: #000000 !important;
    border: 1px solid rgb(55 60 75) !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.5rem !important;
    min-height: 38px !important;
    font-size: 0.875rem !important;
}

.dark .choices__inner:focus,
.dark .choices.is-focused .choices__inner,
.dark .choices.is-open .choices__inner {
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Placeholder text */
.dark .choices__placeholder {
    color: rgb(100 116 139) !important;
    opacity: 1 !important;
}

/* Selected item text */
.dark .choices__item {
    color: rgb(226 232 240) !important;
}

/* Selected item in multi-select */
.dark .choices__item--selectable {
    color: rgb(226 232 240) !important;
}

/* The dropdown list container */
.dark .choices__list--dropdown {
    background-color: #000000 !important;
    border: 1px solid rgb(55 60 75) !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    z-index: 100 !important;
}

/* When dropdown is above the input */
.dark .choices__list--dropdown.is-flipped {
    border-radius: 0.375rem 0.375rem 0 0 !important;
    border-top: 1px solid rgb(55 60 75) !important;
    border-bottom: none !important;
}

/* Individual dropdown items */
.dark .choices__list--dropdown .choices__item {
    color: rgb(226 232 240) !important;
    padding: 0.5rem 0.75rem !important;
}

/* Hover state on dropdown items */
.dark .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgb(30 41 59) !important;
    color: rgb(255 255 255) !important;
}

/* Selected item in dropdown */
.dark .choices__list--dropdown .choices__item--selectable.is-selected {
    background-color: rgb(30 58 138) !important;
    color: rgb(255 255 255) !important;
}

/* Search input inside dropdown */
.dark .choices__input {
    background-color: #000000 !important;
    color: rgb(226 232 240) !important;
    border: none !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0 !important;
}

.dark .choices__input::placeholder {
    color: rgb(100 116 139) !important;
}

/* Multi-select selected items (pills/tags) */
.dark .choices__list--multiple .choices__item {
    background-color: rgb(30 58 138) !important;
    border: 1px solid rgb(59 130 246) !important;
    color: rgb(255 255 255) !important;
    border-radius: 0.25rem !important;
}

/* Remove button on multi-select items */
.dark .choices__button {
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* No results message */
.dark .choices__list--dropdown .choices__item--disabled {
    color: rgb(100 116 139) !important;
    background-color: transparent !important;
}

/* Disabled state */
.dark .choices[data-type*="select-one"].is-disabled .choices__inner,
.dark .choices[data-type*="select-multiple"].is-disabled .choices__inner {
    background-color: rgb(20 23 33) !important;
    border-color: rgb(45 50 65) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state */
.dark .choices__list--dropdown .choices__item--disabled.is-loading {
    color: rgb(100 116 139) !important;
}

/* Locked menu item (task #444): the tenant does not have the module but the
   menu says show it (menu_items.show_locked) — an upsell glimpse, not a door.
   Glyph dimmed + greyed, small padlock in the corner, no hover lift. */
.sidebar-locked { cursor: default; }
.sidebar-locked .kt-menu-icon { position: relative; }
.sidebar-locked .kt-menu-icon i:not(.sidebar-lock-glyph) {
    color: var(--muted-foreground, #9ca3af) !important;
    opacity: 0.45 !important;
}
.sidebar-locked:hover { background: transparent !important; border-color: transparent !important; }
.sidebar-lock-glyph {
    position: absolute; right: -6px; bottom: -6px;
    font-size: 10px; line-height: 1;
    color: var(--muted-foreground, #9ca3af);
    opacity: 0.9;
}

/* ============================================================================
   Task 765: APP MODE — running as the installed phone app (body.vali-app).
   No rail, header or tab bar; the content takes the whole screen; pages other
   than NovaMail get a slim bar with Back and a way home.
   ========================================================================== */
body.vali-app #header, body.vali-app #sidebar, body.vali-app #navbar { display: none !important; }
body.vali-app { --header-height: 0px; --sidebar-width: 0px; --navbar-height: 0px; }
body.vali-app .flex.grow:has(> #scrollable_content) { margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
body.vali-app #scrollable_content { padding-top: 0 !important; }
body.vali-app:has(#valiAppBar) #scrollable_content { padding-top: 2.75rem !important; }
body.vali-app #scrollable_content > footer { display: none; }
/* Page action buttons normally float top-right of the content; in the app they
   flow above the page header instead of sitting on top of its title. */
body.vali-app #vali-global-actions { position: static !important; display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: 0 0 .75rem !important; }
/* Task 778: a page with no actions (NovaMail) must not keep the strip's bottom
   margin — it pushed the whole app 11px down and the list's last row under the
   phone's navigation buttons. */
body.vali-app #vali-global-actions:empty { display: none !important; margin: 0 !important; }
.vali-appbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 2.75rem;
    display: flex; align-items: center; gap: .5rem; padding: 0 .5rem;
    padding-top: env(safe-area-inset-top);
    background: var(--background, #fff); border-bottom: 1px solid var(--border, #e2e8f0);
}
.vali-appbar-back, .vali-appbar-home {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border: 0; background: transparent; color: var(--foreground, #111); border-radius: 50%; font-size: 1.1rem; text-decoration: none;
}
.vali-appbar-back:hover, .vali-appbar-home:hover { background: var(--muted, #f4f6f9); }
.vali-appbar-title { flex: 1; min-width: 0; font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.vali-appbar-home { color: var(--primary, #4a9eff); }

/* ============================================================================
   Task 772: a phone stays inside NovaMail until the rest of Vali has phone
   layouts (task 773). Other apps are dimmed and untouchable in the rail; a page
   with no phone layout shows a note with a way back. Desktop: no effect.
   ========================================================================== */
.vali-phone-note { display: none; }
@media (max-width: 900px) {
    .sidebar-phone-off { opacity: .3 !important; pointer-events: none !important; filter: grayscale(1); }
    .vali-phone-note {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
        margin: 0; padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top));
        background: #fef3c7; color: #78350f; font-size: .8rem; border-bottom: 1px solid #f59e0b; z-index: 31; position: relative;
    }
    .dark .vali-phone-note { background: #3b2a06; color: #fde68a; border-color: #b45309; }
    .vali-phone-note a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: inherit; text-decoration: underline; white-space: nowrap; }
    body.vali-app .vali-phone-note { position: fixed; left: 0; right: 0; top: 2.75rem; }
    body.vali-app:has(#valiPhoneNote) #scrollable_content { padding-top: 7rem !important; }
}

/* Task 759: unread count on a sidebar icon (NovaMail). Red pill in the corner. */
.kt-menu-icon:has(.sidebar-badge) { position: relative; }
.sidebar-badge {
    position: absolute; top: -7px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--background, #fff);
    pointer-events: none;
}
.sidebar-badge.hidden { display: none; }

/* ============================================================================
   MISSING TAILWIND UTILITIES + DARK MODE OVERRIDES
   
   Metronic's compiled CSS only includes: text-gray-500, text-gray-600,
   text-gray-700, bg-gray-700, border-gray-200. Everything else used in
   templates (text-gray-300/400/800/900, bg-gray-50/800, border-gray-700,
   card, card-body) is missing entirely.
   
   The compiled CSS also has NO dark: variant utilities, so classes like
   dark:text-gray-400 in templates are dead code.
   
   This section defines:
   1. Missing utility classes (both light + dark)
   2. Dark overrides for the 3 that Metronic does define
   3. Card component (not compiled by Metronic)
   4. Background + border utilities
   ============================================================================ */

/* --- Text: missing classes (light mode definitions) --- */

.text-gray-100 {
    color: rgb(243 244 246);
}

.text-gray-200 {
    color: rgb(229 231 235);
}

.text-gray-300 {
    color: rgb(209 213 219);
}

.text-gray-400 {
    color: rgb(156 163 175);
}

.text-gray-800 {
    color: rgb(31 41 55);
}

.text-gray-900 {
    color: rgb(17 24 39);
}

/* --- Text: dark mode overrides for ALL gray levels --- */

/* Primary text — near-white */
.dark .text-gray-900 {
    color: rgb(243 244 246) !important; /* gray-100 */
}

.dark .text-gray-800 {
    color: rgb(229 231 235) !important; /* gray-200 */
}

/* Body text — labels, descriptions */
.dark .text-gray-700 {
    color: rgb(209 213 219) !important; /* gray-300 */
}

/* Secondary text — dates, references, help text */
.dark .text-gray-600 {
    color: rgb(156 163 175) !important; /* gray-400 */
}

/* Muted text — table headers, uppercase labels */
.dark .text-gray-500 {
    color: rgb(156 163 175) !important; /* gray-400 */
}

/* Subtle text — GL codes, secondary badges */
.dark .text-gray-400 {
    color: rgb(107 114 128) !important; /* gray-500 */
}

/* Placeholder-level — dashes for empty cells */
.dark .text-gray-300 {
    color: rgb(75 85 99) !important; /* gray-600 */
}

.dark .text-gray-200 {
    color: rgb(55 65 81) !important; /* gray-700 */
}

.dark .text-gray-100 {
    color: rgb(31 41 55) !important; /* gray-800 */
}

/* --- Background: missing classes --- */

.bg-gray-50 {
    background-color: rgb(249 250 251);
}

.dark .bg-gray-50 {
    background-color: rgb(17 24 39) !important; /* gray-900 */
}

.bg-gray-100 {
    background-color: rgb(243 244 246);
}

.dark .bg-gray-100 {
    background-color: rgb(31 41 55) !important; /* gray-800 */
}

.bg-gray-800 {
    background-color: rgb(31 41 55);
}

/* --- Border: missing classes --- */

.border-gray-700 {
    border-color: rgb(55 65 81);
}

.dark .border-gray-200 {
    border-color: rgb(55 65 81) !important; /* gray-700 in dark */
}

.dark .border-gray-300 {
    border-color: rgb(55 65 81) !important; /* gray-700 in dark */
}

/* --- Card component (not compiled by Metronic) --- */

.card {
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--border, rgb(229 231 235));
    background-color: var(--card, rgb(255 255 255));
    color: var(--card-foreground, rgb(17 24 39));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.card-body {
    padding: 1.25rem; /* 20px */
}

.card-header {
    display: flex;
    align-items: center;
    /* Metronic convention: title on the left, actions/hint on the right.
       This space-between was missing globally, so header right-hand content
       (e.g. a hint or toolbar) crashed into the title. */
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, rgb(229 231 235));
}

.card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border, rgb(229 231 235));
}

/* Sidebar pinned-shortcuts box — distinct warm/amber tint so it reads as its
   own zone, separate from the blue-tinted app module section. Theme-aware. */
.sidebar-pinned-box {
    background-color: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.28);
}
.dark .sidebar-pinned-box {
    background-color: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.32);
}

/* Pin-this-page star — filled gold when the page is pinned (and on hover),
   matching the amber pinned box. Uses an explicit rule rather than the
   arbitrary [&_i]:text-primary variant, which is NOT compiled in the Metronic
   build (only its hover: form is). */
.pin-star i { transition: color 0.15s ease; }
.pin-star:hover i,
.pin-star.is-pinned i { color: #f59e0b; }

/* ---------------------------------------------------------------------------
   Missing Tailwind inset utilities (polyfill)
   ---------------------------------------------------------------------------
   The Metronic build (assets/css/styles.css) ships a limited utility set and
   omits several small top/right/bottom/left offsets, so absolutely-positioned
   elements using e.g. `right-1.5` had no effect (drifted out of place). This
   loads AFTER the Metronic build, so it fills the gaps globally — add new
   steps here if a needed offset is ever missing again. */
.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}
.top-0\.5{top:0.125rem}.right-0\.5{right:0.125rem}.bottom-0\.5{bottom:0.125rem}.left-0\.5{left:0.125rem}
.top-1{top:0.25rem}.right-1{right:0.25rem}.bottom-1{bottom:0.25rem}.left-1{left:0.25rem}
.top-1\.5{top:0.375rem}.right-1\.5{right:0.375rem}.bottom-1\.5{bottom:0.375rem}.left-1\.5{left:0.375rem}
.top-2{top:0.5rem}.right-2{right:0.5rem}.bottom-2{bottom:0.5rem}.left-2{left:0.5rem}
.top-2\.5{top:0.625rem}.right-2\.5{right:0.625rem}.bottom-2\.5{bottom:0.625rem}.left-2\.5{left:0.625rem}
.top-3{top:0.75rem}.right-3{right:0.75rem}.bottom-3{bottom:0.75rem}.left-3{left:0.75rem}

/* ===================================================================
   SIDEBAR — Section backgrounds & collapsible groups
   Sidebar is 58px wide. All elements must fit within that.
   =================================================================== */

/* Prevent sidebar horizontal overflow */
#sidebar_content,
#sidebar_content > div {
    overflow-x: hidden;
    max-width: 58px;
}

/* Core section — no background, just spacing */
.sidebar-core {
    padding: 4px 0;
}

/* App section — visible background tint to visually separate from core */
.sidebar-app {
    background-color: rgba(59, 130, 246, 0.08);
    border-radius: 6px;
    margin: 0 4px;
    padding: 6px 0;
    max-width: 50px;
}

.dark .sidebar-app {
    background-color: rgba(59, 130, 246, 0.10);
}

/* Task 853 (Richard, 2026-09-16). The group button used to wear the same
   white-pill "selected" look a chosen page wears, and it sat ABOVE the tinted
   panel rather than in it — so opening Money made the Money button and the
   first page under it both look chosen, and the panel looked like a separate
   thing floating below. The group is now ONE block: the tint sits on the whole
   group, and the button is its heading. */
.sidebar-group-toggle.group-active .kt-menu-icon i {
    color: var(--primary, rgb(59 130 246));
}

/* Group children container — distinct background so expanded items stand out.
   Width is pinned to ~parent icon width (40px) and centred so the tinted pill
   hugs the child icons instead of leaving a ~9px dead band each side (Richard,
   2026-07-21). Child icons (30px) keep their own centring inside it. */
.sidebar-group-children {
    transition: max-height 0.2s ease, opacity 0.15s ease;
    border-radius: 0 0 8px 8px;
    padding: 3px 0 4px;
    margin: 0;
    width: 100%;          /* span the full rail — no side gap (Richard, 2026-07-21) */
}

/* Task 853: the tint belongs to the WHOLE group, so the heading and its pages
   are visibly one block rather than a button with a panel hanging beneath it. */
.sidebar-group.is-expanded {
    background-color: rgba(59, 130, 246, 0.16);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
    border-radius: 8px;
    margin: 2px 0;
}
.dark .sidebar-group.is-expanded {
    background-color: rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}

/* The heading of an open group: full width, square corners at the top of the
   block, and a hairline under it so the pages below read as its contents. */
.sidebar-group.is-expanded .sidebar-group-toggle {
    width: 100%;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.25);
}
.sidebar-group.is-expanded .sidebar-group-toggle:hover {
    background-color: rgba(59, 130, 246, 0.10);
}

/* Task 853, second half (Richard: "we cant tell at a glance what are the main
   cat icons that open when clicked"). A page is a circle; a group is a rounded
   SQUARE with a chevron. The shape is readable without hovering or clicking,
   and it holds whether the group is open or shut. */
.sidebar-group-toggle {
    border-radius: 10px !important;
}
.sidebar-group-toggle::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    opacity: .45;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
}
.sidebar-group.is-expanded .sidebar-group-toggle::after {
    transform: rotate(-135deg);
    opacity: .75;
}
/* Collapsed group: the (empty) children box and the toggle's bottom margin
   must take NO space, or a flat item that follows the group sits ~11px
   further away than its neighbours and reads as a separate block (Richard,
   2026-08-19 — Products under Manufacturing). Rail gap alone spaces them. */
.sidebar-group:not(.is-expanded) .sidebar-group-children {
    padding: 0;
    margin: 0;
}
.sidebar-group:not(.is-expanded) .sidebar-group-toggle {
    margin-bottom: 0;
}
/* Task 853: the old bar under the group icon said the same thing as the new
   chevron, less clearly, and left the shut groups looking underlined. */
.sidebar-group-indicator { display: none; }

/* ═══════ Task 854: hovering an open section's pages widens that section ═════
   Richard's ask, in his words: click to open a section as now; then, with it
   open, hovering its pages makes THAT section grow to the right so every name
   shows, floating over the page. Not a panel drawn over the menu — the same
   block, wider.

   Why every earlier attempt failed: the sections live in a scrolling box, and a
   scrolling box clips anything wider than itself, so a section could not grow
   past the rail without being lifted out of the flow — and out of the flow it
   reads as an overlay and needs its place held with measurements. The fix is
   the box, not the section: the box is made 300px wide and see-through, with
   the sections inside it pinned at their old 42px. Everything at rest sits
   exactly where it did. A section can now simply be given a bigger width and
   it grows across the page in the ordinary flow. No fixed positioning, no
   held heights, nothing measured.

   The thin scrollbar is hidden in exchange, because it would now draw at the
   box's far edge, out over the page. The rail still scrolls with the wheel.
   Desktop only; the phone drawer is untouched.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    #sidebar_content,
    #sidebar_content > div {
        max-width: none;
        width: 300px;
    }
    #sidebar_content { pointer-events: none; }   /* both wide boxes are see-through to the mouse too */
    #sidebar_content > div {
        align-items: flex-start;
        pointer-events: none;            /* the see-through part must not catch the page's clicks */
        scrollbar-width: none;
    }
    #sidebar_content > div::-webkit-scrollbar { display: none; }
    #sidebar_content > div > * {
        pointer-events: auto;
        /* Span the rail with an even 4px either side. The thin scrollbar used
           to take the right-hand strip; with it hidden that strip was a gap. */
        width: calc(var(--sidebar-width, 58px) - 8px);
        margin-left: 4px;
        flex: 0 0 auto;
    }
    #sidebar_content .sidebar-app { margin-right: 0; max-width: none; }
    #sidebar_content .sidebar-group { align-self: flex-start; }

    /* The pages carry their names, hung to the right of the icon so the icon
       does not move a pixel; the section's own edge cuts them off at rest. */
    .sidebar-group-children > a { position: relative; }
    .sidebar-item-name {
        position: absolute;
        left: 100%;
        margin-left: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        font-size: .8125rem;
        line-height: 1.2;
        cursor: pointer;                 /* the name is part of the link: clicking the word goes there */
    }

    .sidebar-group {
        transition: width .18s ease;
        position: relative;
    }
    /* Hovering the PAGES of an open section — not its heading — widens it. */
    .sidebar-group.is-expanded.is-grown {
        width: 220px;
        z-index: 5;
        /* the rail's own colours stacked up, so it reads as the section grown
           wider rather than a new panel — and opaque, so the page underneath
           does not show through the names */
        background:
            linear-gradient(rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.16)),
            linear-gradient(rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.08)),
            #dde3ec;
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22), 8px 8px 24px rgba(15, 23, 42, .18);
    }
    .dark .sidebar-group.is-expanded.is-grown {
        background:
            linear-gradient(rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.22)),
            linear-gradient(rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.10)),
            var(--muted, #1f2430);
        box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28), 8px 8px 24px rgba(0, 0, 0, .5);
    }
    .sidebar-group.is-expanded.is-grown > .sidebar-group-children {
        overflow: visible;
    }
    /* The rows inside a widened section keep their glyphs exactly where the
       rail had them: a page button is 30px wide and sat centred in a 50px
       column, so its left edge was at 10px; the heading glyph sat at the
       column's centre, 25px. */
    .sidebar-group.is-expanded.is-grown > .sidebar-group-children {
        align-items: flex-start;
        padding-left: 10px;
    }
    .sidebar-group.is-expanded.is-grown > .sidebar-group-toggle {
        justify-content: flex-start;
        padding-left: 15px;
    }
    /* The button must not clip the name hanging off its right edge. */
    .sidebar-group-children > a.kt-btn-icon { overflow: visible !important; }

    /* The section's own title, beside its icon, only while grown. It sits in
       the row (not hung off the button like the page names) because the
       heading button already spans the whole width. */
    .sidebar-group-name { display: none; }
    .sidebar-group.is-expanded.is-grown > .sidebar-group-toggle .sidebar-group-name {
        display: block;
        margin-left: .75rem;
        font-size: .8125rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
    /* The name is on screen, so the tooltip would only say it again. */
    .sidebar-group.is-expanded.is-grown .kt-tooltip { display: none !important; }
}
/* The group wrapper must span the section column too, or the 100% above only
   fills the wrapper's own content width. Children keep their own centring. */
.sidebar-group {
    width: 100%;
}

.dark .sidebar-group.is-expanded .sidebar-group-toggle {
    border-bottom-color: rgba(59, 130, 246, 0.30);
}

/* Child icons — slightly smaller than parent group icons */
.sidebar-child-icon.size-8 {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
}

/* Rail glyphs slightly larger — tighter ring of space inside each button
   (Richard, 2026-07-21). Buttons keep their size; only the glyph grows. */
.sidebar-section .kt-menu-icon i,
#sidebarPinned .kt-menu-icon i {
    font-size: 20px !important;
}

.sidebar-child-icon .kt-menu-icon i {
    font-size: 19px !important;
}

/* Group indicator line — small bar below group icon */
.sidebar-group-indicator {
    pointer-events: none;
}

/* Expanded state — indicator becomes primary colored and wider */
.sidebar-group.is-expanded .sidebar-group-indicator {
    width: 16px;
    background-color: var(--primary, rgb(59 130 246));
    opacity: 0.6;
}

/* ===================================================================
   SIDEBAR — Section dividers + per-icon glyph tints (readability pass)
   Goal: icons stopped "blending into each other". We (a) hairline-divide
   the vertical zones (pinned / core / app), and (b) tint each group's
   glyph with a stable, subtle hue carried in --sb-tint / --sb-tint-dark.
   =================================================================== */

/* The fixed sidebar rail must always reach the viewport bottom. The markup's
   bottom-0 utility loses the cascade (drawer rules), leaving the rail short —
   verified live: forcing bottom:0 stretches it flush (2026-07-21). */
#sidebar {
    bottom: 0 !important;
}

/* LIGHT theme: darken the rail so the tinted icons + white hover/active pills
   stand out (Richard, 2026-07-21). Dark theme untouched. */
#sidebar {
    background-color: #dde3ec;                      /* slate-ish, two steps darker than the page */
    border-right: 1px solid rgba(148, 163, 184, 0.35);
}
.dark #sidebar {
    background-color: transparent;                  /* keep the dark theme exactly as it was */
    border-right: 0;
}

/* Section separation. The APP section keeps a decorative coloured top border
   (it follows the box's top corner radius — deliberate). The CORE section's
   bar is a real CONTROL instead: .sidebar-sec-toggle collapses/expands the
   core icons (Richard, 2026-07-21). */
.sidebar-app {
    position: relative;
    border-top: 2px solid rgba(148, 163, 184, 0.55);   /* slate-400 */
    padding-top: 10px;    /* air between the border and the icons below it */
}
.dark .sidebar-app {
    border-top-color: rgba(100, 116, 139, 0.7);        /* slate-500 */
}

/* The core-section handle, take two (task #424). The old bare pill read as a
   BORDER, not a control (Richard, 2026-08-18). Now: a hairline across the rail
   with a small chip sitting on it holding a chevron — unmistakably a button —
   and the chevron flips (via .is-collapsed, set by the layout JS) so it always
   points where the icons will go. Full-width 18px hit area kept. */
.sidebar-sec-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;                       /* the chip must never sit UNDER a neighbour */
    width: 100%;
    height: 22px;                     /* tall enough that the chip is never clipped */
    margin: -2px 0;                   /* (was -8px/-4px — that pulled the chip under
                                         the pinned strip and cut it off) */
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
}
/* the hairline the chip sits on */
.sidebar-sec-toggle::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    background-color: rgba(148, 163, 184, 0.45);
}
.dark .sidebar-sec-toggle::before {
    background-color: rgba(100, 116, 139, 0.55);
}
/* the chip: a real button shape around the chevron */
.sidebar-sec-toggle i {
    position: relative;
    z-index: 1;
    font-size: 9px;
    line-height: 1;
    color: rgba(71, 85, 105, 0.9);            /* slate-600 */
    background-color: #f1f5f9;                 /* slate-100 */
    border: 1px solid rgba(148, 163, 184, 0.6);
    border-radius: 999px;
    padding: 3px 9px;
    transition: transform 0.2s ease, color 0.15s ease,
                background-color 0.15s ease, border-color 0.15s ease;
}
.dark .sidebar-sec-toggle i {
    color: rgba(203, 213, 225, 0.9);           /* slate-300 */
    background-color: #1e293b;                 /* slate-800 */
    border-color: rgba(100, 116, 139, 0.7);
}
.sidebar-sec-toggle:hover i {
    color: #1f6feb;
    border-color: #1f6feb;
}
/* collapsed -> the chevron points down: "the icons come back this way" */
.sidebar-sec-toggle.is-collapsed i {
    transform: rotate(180deg);
}

/* Collapsed core: icons roll up, the handle stays as the re-open control. */
.sidebar-core {
    max-height: 700px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
/* Initial page-load state (set pre-paint by the inline script) must not animate. */
.sidebar-core.sec-noanim {
    transition: none !important;
}
.sidebar-core.sec-collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* A zero-height flex item still costs one 10px gap slot in the rail, so
       collapsed left ~32px under the chip against 10px above (Richard,
       2026-08-18). Cancel that slot here, and drop the app section's own top
       spacing below — the chip is the divider while collapsed. */
    margin: -18px 0 0;
}
.sidebar-core.sec-collapsed ~ .sidebar-app {
    border-top: 0;
    padding-top: 0;
}
/* Task 852: with one tree there is no core list above the groups, so the
   divider that separated the two goes too. */
.sidebar-app.sidebar-app--alone {
    border-top: 0;
    padding-top: 6px;
    margin-top: 0;
}

/* Per-icon glyph tint. Only the GLYPH is coloured — never the pill/background,
   so the existing hover/active treatment is untouched. Inactive glyphs sit at
   ~0.7 opacity in LIGHT (state-contrast pass); hover/active lift to full. */
.sidebar-tinted .kt-menu-icon i {
    color: var(--sb-tint, currentColor);
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
/* Dark: the brighter dark-palette hues need MORE glyph opacity to read on the
   dark surface — 0.7/0.55 washed out. Lift to 0.9 (parent) / 0.8 (child). */
.dark .sidebar-tinted .kt-menu-icon i {
    color: var(--sb-tint-dark, var(--sb-tint, currentColor));
    opacity: 0.9;
}
/* Child icons read a step paler/less saturated than their parent group icon
   so a group scans as parent → children family, not eight equal dots. */
.sidebar-tinted.sidebar-child-icon .kt-menu-icon i {
    opacity: 0.55;
}
.dark .sidebar-tinted.sidebar-child-icon .kt-menu-icon i {
    opacity: 0.8;
}
.sidebar-tinted:hover .kt-menu-icon i,
.sidebar-tinted.sidebar-child-icon:hover .kt-menu-icon i {
    opacity: 1;
}

/* Hover keeps the app's existing primary treatment — the tint must not fight
   the hover pill. Existing utility `hover:[&_i]:text-primary` sets colour via a
   class; ensure it wins over the inline tint on hover. */
.sidebar-tinted:hover .kt-menu-icon i {
    color: var(--primary, rgb(59 130 246));
}

/* Active state keeps its current primary treatment untouched — the tint must
   not compete with the active ring. Force full opacity + primary glyph when
   active so the tint yields to the active styling. */
.sidebar-tinted.active .kt-menu-icon i,
.sidebar-group-toggle.sidebar-tinted.group-active .kt-menu-icon i {
    color: var(--primary, rgb(59 130 246));
    opacity: 1;
}

/* ============================================================================
   MISSING TAILWIND UTILITIES
   Metronic's Tailwind build only includes classes they use.
   These are commonly needed but missing from the build.
   ============================================================================ */
.overflow-y-auto { overflow-y: auto; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* Background with opacity variants (Tailwind uses \/ escape for / in class names) */
.bg-background\/95 { background-color: color-mix(in srgb, var(--background) 95%, transparent); }
.bg-background\/90 { background-color: color-mix(in srgb, var(--background) 90%, transparent); }
.bg-background\/80 { background-color: color-mix(in srgb, var(--background) 80%, transparent); }

/* Backdrop blur */
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Max-width containers */
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* Padding */
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* Positioning */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-50 { z-index: 50; }
.z-40 { z-index: 40; }

/* Grid columns — the Metronic build ships grid-cols 1/2/3 (+ lg 1/2/3/5) but
   NOT 4. Add the 4-column utilities (+ responsive variants at Tailwind v4's
   rem breakpoints: sm 40rem, md 48rem, lg 64rem, xl 80rem) so grids can use 4. */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 40rem) { .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.col-span-4 { grid-column: span 4 / span 4; }
@media (min-width: 64rem) { .lg\:col-span-4 { grid-column: span 4 / span 4; } }

/* Number inputs — hide spinners, ensure minimum width for decimal values */
input[type="number"] {
    -moz-appearance: textfield;
    min-width: 70px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Semantic text colors — used across all modules */
.text-danger { color: #dc2626; }
.text-success { color: #16a34a; }
.text-warning { color: #d97706; }
.text-info { color: #2563eb; }