/**
 * 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;
}

/* ============================================================================
   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;
    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 — 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);
}

/* Group toggle button — active state when group contains active module */
.sidebar-group-toggle.group-active {
    background-color: var(--background, #fff);
    border-color: var(--input, rgb(229 231 235));
}

.sidebar-group-toggle.group-active .kt-menu-icon i {
    color: var(--primary, rgb(59 130 246));
}

.dark .sidebar-group-toggle.group-active {
    background-color: var(--background, rgb(17 24 39));
    border-color: var(--input, rgb(55 65 81));
}

/* Group children container — distinct background so expanded items stand out */
.sidebar-group-children {
    transition: max-height 0.2s ease, opacity 0.15s ease;
    background-color: rgba(59, 130, 246, 0.12);
    border-radius: 6px;
    padding: 3px 0;
    margin: 2px 0;
}

.dark .sidebar-group-children {
    background-color: rgba(59, 130, 246, 0.15);
}

/* 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;
}

.sidebar-child-icon .kt-menu-icon i {
    font-size: 13px !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;
}