/* ===== User Appearance Preferences ===== */

/* Legacy Metronic v1 classes (btn-brand, kt-font-brand) — remap to the
   current Bootstrap 5 primary palette so they follow the user's chosen
   color instead of their original hardcoded blue. */
.btn.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-active, var(--bs-primary));
    --bs-btn-hover-border-color: var(--bs-primary-active, var(--bs-primary));
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-active, var(--bs-primary));
    --bs-btn-active-border-color: var(--bs-primary-active, var(--bs-primary));
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}
.kt-font-brand { color: var(--bs-primary) !important; }

/* btn-info — remapped to follow --bs-primary so it tracks the color picker. */
.btn.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-active, var(--bs-primary));
    --bs-btn-hover-border-color: var(--bs-primary-active, var(--bs-primary));
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-active, var(--bs-primary));
    --bs-btn-active-border-color: var(--bs-primary-active, var(--bs-primary));
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Dashboard — multiple inline `color: #333` / `background: #fff` styles
   defined in the <style> block inside the view. Override all in dark mode. */
.stat { color: inherit !important; }
html[data-bs-theme="dark"] .stat,
html[data-bs-theme="dark"] .date,
html[data-bs-theme="dark"] .header-row h1,
html[data-bs-theme="dark"] .chart-title,
html[data-bs-theme="dark"] #timer { color: var(--drops-text) !important; }
html[data-bs-theme="dark"] .chart-container,
html[data-bs-theme="dark"] .kt-portlet { background: var(--drops-surface) !important; box-shadow: none !important; }
html[data-bs-theme="dark"] .kt-portlet__head,
html[data-bs-theme="dark"] .kt-portlet__body { background: var(--drops-surface) !important; border-color: var(--drops-border) !important; }
html[data-bs-theme="dark"] .kt-portlet__head-title,
html[data-bs-theme="dark"] .kt-portlet__head-title *,
html[data-bs-theme="dark"] .kt-portlet__head-label { color: var(--drops-text) !important; }
/* SVG timer ring in dashboard — hardcoded stroke colors */
html[data-bs-theme="dark"] .progress-ring__background { stroke: var(--drops-border) !important; }
html[data-bs-theme="dark"] .progress-ring__circle { stroke: var(--bs-primary) !important; }
html[data-bs-theme="dark"] #timer-count { fill: var(--drops-text) !important; }



/* Font size — scales all rem-based spacing. */
html[data-font-size="small"]  { font-size: 13px !important; }
html[data-font-size="medium"] { font-size: 14px !important; }
html[data-font-size="large"]  { font-size: 16px !important; }

html[data-font-weight="bold"],
html[data-font-weight="bold"] body,
html[data-font-weight="bold"] body *:not(i):not(.fa):not([class^="ki-"]):not([class*=" ki-"]):not(.svg-icon):not(.path1):not(.path2):not(.path3):not(.path4):not(.path5) {
    font-weight: 700 !important;
}

/* Primary color vars are now injected dynamically by appearance.js
   into a <style id="drops-appearance-vars"> block on html[data-primary-color="custom"].
   The static named swatches have been removed. */

/* Sidebar background tracks the chosen primary color (when not default).
   Dark mode overrides this block further down. */
html[data-primary-color] .app-sidebar {
    background-color: var(--drops-sidebar-bg) !important;
}

/* News ticker label & top border — hardcoded blue in news-ticker.css.
   Override both to follow primary color. */
html[data-primary-color] .news-ticker__label {
    background: var(--bs-primary) !important;
}
html[data-primary-color] .news-ticker {
    border-top-color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"]:not([data-primary-color]) .news-ticker__label {
    background: #034e7c !important;
}
html[data-bs-theme="dark"] .news-ticker {
    border-top-color: var(--bs-primary, #034e7c) !important;
}

/* Notifications dropdown header — uses a hardcoded blue background-image (JPG).
   Replace it with the primary color. */
html[data-primary-color] .menu-sub-dropdown .bgi-no-repeat[style*="menu-header-bg"] {
    background-image: none !important;
    background-color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"]:not([data-primary-color]) .menu-sub-dropdown .bgi-no-repeat[style*="menu-header-bg"] {
    background-image: none !important;
    background-color: #034e7c !important;
}

/* btn-outline (تعديل) — dark text on transparent in dark mode.
   Give it the primary color as text+border so it matches the theme. */
html[data-bs-theme="dark"] .btn.btn-outline.btn-outline.btn-outline {
    --bs-btn-color: var(--bs-primary);
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Active sidebar menu item — use a semi-transparent white overlay so the
   highlight always stands out against the sidebar bg regardless of the
   chosen primary color. */
html[data-primary-color] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link.active {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}
html[data-primary-color] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link.active .menu-title,
html[data-primary-color] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link.active .menu-icon i,
html[data-primary-color] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link.active .svg-icon {
    color: #ffffff !important;
}

/* Scrollbar — bundle sets scrollbar-color: #034e7c #e3e3e3 on div/ol/ul/pre.
   Override per swatch and in dark mode. */
html[data-primary-color] div,
html[data-primary-color] ol,
html[data-primary-color] ul,
html[data-primary-color] pre {
    scrollbar-color: var(--bs-primary) var(--drops-elevated, #eee);
}
html[data-bs-theme="dark"] div,
html[data-bs-theme="dark"] ol,
html[data-bs-theme="dark"] ul,
html[data-bs-theme="dark"] pre {
    scrollbar-color: var(--bs-primary) var(--drops-elevated) !important;
}

/* The Drops compiled bundle hardcodes #034e7c on .btn.btn-danger and thead th.
   When a swatch is active, override both to follow --bs-primary so all key
   UI chrome changes together with the chosen color. */
html[data-primary-color] .btn.btn-danger.btn-danger {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary-active) !important;
}
html[data-primary-color] .btn.btn-danger.btn-danger:hover,
html[data-primary-color] .btn.btn-danger.btn-danger:focus {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}
html[data-primary-color] .table thead th,
html[data-primary-color] .table thead tr {
    background: var(--drops-sidebar-bg) !important;
    color: #ffffff !important;
}

/* ===== Dark mode — GitHub/Linear-inspired palette =====
   Design tokens (no pure black / white to avoid halation eye strain):
     canvas   #0f1115  — base page background
     surface  #161a21  — cards, header, sidebar (one step up)
     elevated #1d2129  — hover, dropdowns, striped rows (two steps up)
     border   #2a2f38  — subtle, low-contrast dividers
     text     #d7dae0  — primary (off-white, ~85% white)
     text-2   #8b93a0  — secondary (headings, labels)
     text-3   #6a7280  — muted (breadcrumbs, captions)
     link     #79c0ff  — desaturated blue */

html[data-bs-theme="dark"] {
    --drops-bg: #0f1115;
    --drops-surface: #161a21;
    --drops-elevated: #1d2129;
    --drops-border: #2a2f38;
    --drops-text: #d7dae0;
    --drops-text-2: #8b93a0;
    --drops-text-3: #6a7280;
    --drops-link: #79c0ff;
}

/* Override link/body color vars so <a> elements in dark mode use our palette.
   --bs-link-color drives the color of all <a> including a.btn. */
html[data-bs-theme="dark"] {
    --bs-link-color: var(--drops-link);
    --bs-link-color-rgb: 121, 192, 255;
    --bs-body-color: var(--drops-text);
    --bs-body-color-rgb: 215, 218, 224;
}
/* a.btn should use primary color so it follows swatch — override link-color
   with the current primary on both the var and the property directly. */
html[data-bs-theme="dark"] a.btn.btn-light.btn-light.btn-light,
html[data-bs-theme="dark"] a.btn.btn-secondary.btn-secondary.btn-secondary {
    --bs-link-color: var(--bs-primary);
    color: var(--bs-primary) !important;
}

/* In dark mode without a color swatch, the hardcoded #034e7c on
   btn-danger and thead still shows. Remap them to our dark surface tones. */
html[data-bs-theme="dark"]:not([data-primary-color]) .btn.btn-danger.btn-danger {
    background-color: #034e7c !important;
    border-color: #023f65 !important;
}
html[data-bs-theme="dark"]:not([data-primary-color]) .table thead th,
html[data-bs-theme="dark"]:not([data-primary-color]) .table thead tr {
    background: #034e7c !important;
    color: #ffffff !important;
}
/* dark mode WITH a swatch — use darker sidebar bg */
html[data-bs-theme="dark"][data-primary-color] .btn.btn-danger.btn-danger {
    background-color: var(--drops-sidebar-bg) !important;
    border-color: var(--drops-sidebar-bg) !important;
}
html[data-bs-theme="dark"][data-primary-color] .table thead th,
html[data-bs-theme="dark"][data-primary-color] .table thead tr {
    background: var(--drops-sidebar-bg) !important;
    color: #ffffff !important;
}

/* Base surfaces */
html[data-bs-theme="dark"] body { background-color: var(--drops-bg) !important; color: var(--drops-text); }
html[data-bs-theme="dark"] .app-sidebar,
html[data-bs-theme="dark"][data-primary-color] .app-sidebar {
    background-color: var(--drops-surface) !important;
    border-color: var(--drops-border) !important;
}
html[data-bs-theme="dark"] .app-header,
html[data-bs-theme="dark"] .app-toolbar,
html[data-bs-theme="dark"] .app-footer {
    background-color: var(--drops-surface) !important;
    border-color: var(--drops-border) !important;
}
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card.card-flush,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .menu-sub-dropdown {
    background-color: var(--drops-surface) !important;
    color: var(--drops-text) !important;
    border-color: var(--drops-border) !important;
}

/* Text color utility overrides — Metronic's text-muted / text-gray-* render
   as dark values in dark mode; remap them to our scale. */
html[data-bs-theme="dark"] .text-muted.text-muted.text-muted,
html[data-bs-theme="dark"] .text-gray-500.text-gray-500,
html[data-bs-theme="dark"] .text-gray-600.text-gray-600 { color: var(--drops-text-3) !important; }
html[data-bs-theme="dark"] .text-gray-700.text-gray-700,
html[data-bs-theme="dark"] .text-gray-800.text-gray-800,
html[data-bs-theme="dark"] .text-gray-900.text-gray-900,
html[data-bs-theme="dark"] .text-dark.text-dark { color: var(--drops-text) !important; }
html[data-bs-theme="dark"] a.text-muted,
html[data-bs-theme="dark"] a.text-gray-600,
html[data-bs-theme="dark"] a.text-gray-700,
html[data-bs-theme="dark"] a.text-gray-800 { color: var(--drops-text-2) !important; }
html[data-bs-theme="dark"] a.text-muted:hover,
html[data-bs-theme="dark"] a.text-gray-600:hover,
html[data-bs-theme="dark"] a.text-hover-primary:hover { color: var(--drops-link) !important; }

/* Breadcrumbs */
html[data-bs-theme="dark"] .breadcrumb .breadcrumb-item,
html[data-bs-theme="dark"] .breadcrumb .breadcrumb-item a,
html[data-bs-theme="dark"] .page-title,
html[data-bs-theme="dark"] .page-heading { color: var(--drops-text-2) !important; }
html[data-bs-theme="dark"] .breadcrumb .breadcrumb-item.active,
html[data-bs-theme="dark"] .breadcrumb .breadcrumb-item:last-child { color: var(--drops-text) !important; }
html[data-bs-theme="dark"] .breadcrumb .breadcrumb-item a:hover { color: var(--drops-link) !important; }

/* Tables — high-specificity to beat Metronic's chained-class rules */
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table,
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table tr,
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table td,
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table th,
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table tbody td,
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table thead th,
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table tfoot td {
    color: var(--drops-text) !important;
    border-color: var(--drops-border) !important;
}
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table tbody td a:not(.btn) {
    color: var(--drops-link) !important;
}
/* a.btn inside table cells get primary color so they track the swatch */
html[data-bs-theme="dark"] .table tbody td a.btn.btn.btn {
    color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"] .table.table.table.table.table.table.table.table tbody tr:hover td {
    background-color: var(--drops-elevated) !important;
}
html[data-bs-theme="dark"] .table-striped.table-striped.table-striped.table-striped.table-striped.table-striped.table-striped.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--drops-elevated) !important;
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] td.text-center.text-center.text-center,
html[data-bs-theme="dark"] td.text-start.text-start.text-start,
html[data-bs-theme="dark"] td.text-end.text-end.text-end {
    color: var(--drops-text) !important;
}

/* Forms */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: var(--drops-bg) !important;
    border-color: var(--drops-border) !important;
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--drops-elevated) !important;
    border-color: var(--bs-primary) !important;
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] .form-control::placeholder { color: var(--drops-text-3) !important; }
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .form-check-label { color: var(--drops-text) !important; }

/* Buttons — light/secondary variants in dark mode.
   Bootstrap sets --bs-btn-color on .btn-light which beats any `color` override,
   so we override the variable itself at higher specificity. */
html[data-bs-theme="dark"] .btn-light.btn-light.btn-light,
html[data-bs-theme="dark"] .btn-secondary.btn-secondary.btn-secondary,
html[data-bs-theme="dark"] .btn-bg-light.btn-bg-light {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--drops-elevated);
    --bs-btn-border-color: var(--drops-border);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: #262b34;
    --bs-btn-hover-border-color: var(--bs-primary);
    background-color: var(--drops-elevated) !important;
    border-color: var(--drops-border) !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-dark {
    color: var(--drops-text) !important;
    border-color: var(--drops-border) !important;
}

/* Dropdowns / menus — items */
html[data-bs-theme="dark"] .menu-link { color: var(--drops-text-2) !important; }
html[data-bs-theme="dark"] .menu-link:hover { color: var(--drops-text) !important; background-color: var(--drops-elevated) !important; }
html[data-bs-theme="dark"] .dropdown-menu { background-color: var(--drops-surface) !important; border-color: var(--drops-border) !important; }
html[data-bs-theme="dark"] .dropdown-item { color: var(--drops-text-2) !important; }
html[data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--drops-elevated) !important; color: var(--drops-text) !important; }

/* Separators and bullets */
html[data-bs-theme="dark"] .separator { border-color: var(--drops-border) !important; }
html[data-bs-theme="dark"] .bg-gray-200,
html[data-bs-theme="dark"] .bg-gray-300,
html[data-bs-theme="dark"] .bg-gray-400 { background-color: var(--drops-border) !important; }

/* Links default */
html[data-bs-theme="dark"] a:not(.btn):not(.menu-link):not([class*="text-"]) { color: var(--drops-link); }

/* Select2 — dark mode */
html[data-bs-theme="dark"] .select2-container .select2-selection {
    background-color: var(--drops-elevated) !important;
    border-color: var(--drops-border) !important;
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__rendered {
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__placeholder {
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__arrow b {
    border-color: var(--drops-text) transparent transparent !important;
}
/* Swatch active: select2 border follows primary color */
html[data-bs-theme="dark"][data-primary-color] .select2-container .select2-selection {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"][data-primary-color] .select2-container .select2-selection .select2-selection__rendered {
    color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"][data-primary-color] .select2-container .select2-selection .select2-selection__placeholder {
    color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"][data-primary-color] .select2-container .select2-selection .select2-selection__arrow b {
    border-color: var(--bs-primary) transparent transparent !important;
}
html[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--drops-surface) !important;
    border-color: var(--drops-border) !important;
}
html[data-bs-theme="dark"] .select2-results__option {
    color: var(--drops-text-2) !important;
}
html[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--drops-elevated) !important;
    color: var(--drops-text) !important;
}
html[data-bs-theme="dark"] .select2-search__field {
    background-color: var(--drops-bg) !important;
    border-color: var(--drops-border) !important;
    color: var(--drops-text) !important;
}

/* Color picker input */
.appearance-color-picker {
    width: 44px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--bs-border-color, #dee2e6);
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.appearance-color-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 4px; }
.appearance-color-picker::-webkit-color-swatch { border: none; border-radius: 4px; }
.appearance-color-picker::-moz-color-swatch { border: none; border-radius: 4px; }

.appearance-option-btn.is-active {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}