/* Kpex2G — CAF Corporation Brand Override for Metronic v9.4.10 */

:root {
  --kpex-orange: #F5A011;
  --kpex-orange-hover: #d4880e;
  --kpex-gray: #585856;
  --kpex-cream: #F8F6F2;
  --kpex-dark: #1A1A1A;
  --sidebar-w: 260px;
}

/* ── SIDEBAR NAVIGATION ─────────────────────── */
.kpex-nav-section {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2a2a2a;
  padding: 14px 12px 4px;
}

.kpex-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.kpex-nav-item i { font-size: 17px; flex-shrink: 0; color: #999; transition: color 0.15s; }
.kpex-nav-item:hover { background: #f0ece6; color: #1a1a1a; }
.kpex-nav-item:hover i { color: #F5A011; }
.kpex-nav-item.active { background: #FDE8C0; color: #c47e00; font-weight: 600; }
.kpex-nav-item.active i { color: #F5A011; }
.kpex-nav-parent { justify-content: flex-start; }
.kpex-nav-parent .kpex-chevron { margin-left: auto; font-size: 10px; color: #bbb; transition: transform 0.2s; }

.kpex-nav-children {
  display: none;
  flex-direction: column;
  padding: 2px 0 2px 36px;
  gap: 2px;
}
.kpex-nav-children.open { display: flex; }

.kpex-nav-child {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.kpex-nav-child:hover { background: #f0ece6; color: #F5A011; }
.kpex-nav-child.active { color: #F5A011; font-weight: 600; }

/* ── CONTENT CARDS ──────────────────────────── */
.kpex-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  overflow: hidden;
}
.kpex-card-body { padding: 20px 24px; }

/* ── PAGE HEADER ────────────────────────────── */
.kpex-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.kpex-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #585856;
  margin: 0;
}
.kpex-page-subtitle {
  font-size: 13px;
  color: #999;
  margin: 2px 0 0;
}

/* ── BUTTONS ────────────────────────────────── */
.btn-kpex {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-kpex-primary { background: #F5A011; color: #fff; }
.btn-kpex-primary:hover { background: #d4880e; color: #fff; }
.btn-kpex-secondary { background: #f0ece6; color: #585856; }
.btn-kpex-secondary:hover { background: #e8e2da; color: #585856; }

/* Override Metronic primary color to Kpex Orange */
.light {
  --kt-primary: #F5A011 !important;
  --kt-primary-active: #d4880e !important;
  --kt-primary-light: #FDE8C0 !important;
  --kt-primary-clarity: rgba(245,160,17,0.2) !important;
  --kt-background: #F8F6F2 !important;
}

/* Sidebar brand strip */
#sidebar_header {
  background: #585856 !important;
  border-bottom: 2px solid #F5A011 !important;
}

/* Logo area */
.kt-sidebar-logo img { height: 32px; width: auto; }

/* Primary buttons */
.kt-btn-primary,
[class*="bg-primary"] { background-color: #F5A011 !important; }

/* Active menu items */
.kt-menu-item-active .kt-menu-title,
.kt-menu-link:hover .kt-menu-title { color: #F5A011 !important; }

/* Orange accent line before active menu bullet */
.kt-menu-item-active .kt-menu-bullet::before { background: #F5A011 !important; }

/* Headers orange */
.page-title, h1.font-semibold { color: #585856; }

/* AACE class badge colors */
.badge-class-5 { background: #e74c3c; color: #fff; }
.badge-class-4 { background: #e67e22; color: #fff; }
.badge-class-3 { background: #f39c12; color: #fff; }
.badge-class-2 { background: #27ae60; color: #fff; }
.badge-class-1 { background: #2980b9; color: #fff; }

/* Kpex tier badge colors */
.tier-explorer     { background: #A0A0A0; color: #fff; }
.tier-practitioner { background: #B87333; color: #fff; }
.tier-professional { background: #A8A9AD; color: #fff; }
.tier-enterprise   { background: #FFD700; color: #1A1A1A; }
.tier-data_partner { background: #1A7A4A; color: #fff; }

/* Kpex orange top-bar in cards */
.kpex-card-header {
  background: #F5A011;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: 600;
}

/* Progress bar — AACE class progression */
.aace-progress-track {
  display: flex;
  align-items: center;
  gap: 2px;
}
.aace-step {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #e0ddd7;
  transition: background 0.3s;
}
.aace-step.active { background: #F5A011; }
.aace-step.done   { background: #585856; }

/* Datatables orange header */
.dataTables_wrapper thead th {
  background: #585856 !important;
  color: #fff !important;
}
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before { color: #F5A011; }

/* Carousel navigation dots */
.swiper-pagination-bullet-active { background: #F5A011 !important; }

/* Stat card highlight */
.kpex-stat-card {
  border-left: 4px solid #F5A011;
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.kpex-stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #585856;
}
.kpex-stat-card .stat-label {
  font-size: 0.8rem;
  color: #585856;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Orange divider */
.kpex-divider { border-top: 2px solid #F5A011; margin: 1rem 0; }

/* Login page cream background */
body.auth-page { background: #F8F6F2 !important; }
.auth-card { border-top: 4px solid #F5A011; }


/* ═══════════════════════════════════════════════════════════════
   KPEX THEME TOKENS  — v3  (light default + dark override)
═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Layout chrome ── */
    --kpex-sidebar-bg:       #faf9f7;   /* very slightly warmer than pure white — distinct from cards */
    --kpex-sidebar-border:   #ddd8d0;   /* stronger border — clear separation from main content */
    --kpex-header-bg:        #ffffff;
    --kpex-footer-bg:        #ffffff;
    --kpex-footer-border:    #e8e4de;
    --kpex-page-bg:          #EEEEEC;   /* light neutral gray — cards (#fff) float above with clean contrast */

    /* ── Surface elevation ladder (light) ── */
    --kpex-surface-0:        #EEEEEC;   /* page bg */
    --kpex-surface-1:        #ffffff;   /* card */
    --kpex-surface-2:        #F8F6F2;   /* inner section / thead */
    --kpex-surface-3:        #f0ece6;   /* subtle / borders used as bg */
    --kpex-surface-hover:    #fffaf4;   /* warm row hover */

    /* ── Cards ── */
    --kpex-card-bg:          #ffffff;
    --kpex-card-border:      #e8e4de;
    --kpex-card-shadow:      0 2px 12px rgba(0,0,0,0.07);
    --kpex-card-shadow-lg:   0 4px 24px rgba(0,0,0,0.10);

    /* ── Inputs ── */
    --kpex-input-bg:         #ffffff;
    --kpex-input-border:     #ddd9d2;
    --kpex-input-focus-ring: rgba(245,160,17,0.18);

    /* ── Text ramp ── */
    --kpex-text-base:        #1a1a1a;
    --kpex-text-muted:       #585856;
    --kpex-text-dim:         #999999;
    --kpex-text-faint:       #cccccc;

    /* ── Navigation ── */
    --kpex-nav-text:         #444444;
    --kpex-nav-hover-bg:     #f0ece6;
    --kpex-nav-hover-text:   #1a1a1a;
    --kpex-nav-active-bg:    #FDE8C0;
    --kpex-nav-active-text:  #c47e00;
    --kpex-nav-section-c:    #1a1a1a;
    --kpex-nav-child-c:      #777777;
    --kpex-nav-child-hover:  #f0ece6;

    /* ── Chrome buttons / dropdowns ── */
    --kpex-icon-btn-color:   #777777;
    --kpex-icon-btn-hover:   #f0ece6;
    --kpex-user-btn-hover:   #f0ece6;
    --kpex-dropdown-bg:      #ffffff;
    --kpex-dropdown-border:  #e8e4de;
    --kpex-dropdown-text:    #333333;
    --kpex-dropdown-hover:   #f8f6f2;
    --kpex-dropdown-divider: #e8e4de;

    /* ── Misc ── */
    --kpex-shadow:           rgba(0,0,0,0.07);
    --kpex-shadow-lg:        rgba(0,0,0,0.13);
}

html.dark {
    /* ── Layout chrome ── */
    --kpex-sidebar-bg:       #0f0f16;   /* deepest — sidebar is "behind" the content */
    --kpex-sidebar-border:   rgba(245,160,17,0.18); /* subtle orange tint — ties to brand */
    --kpex-header-bg:        #17171f;
    --kpex-footer-bg:        #17171f;
    --kpex-footer-border:    rgba(255,255,255,0.07);
    --kpex-page-bg:          #111118;   /* page canvas — cards float above it */

    /* ── Surface elevation ladder (dark) ──
       Each step is visually distinct from the previous
       0 → deepest (page canvas)
       1 → card / panel
       2 → inner section, thead
       3 → subtle accent / input
       hover → slightly lighter than card
    ── */
    --kpex-surface-0:        #0d0d12;
    --kpex-surface-1:        #1a1a24;   /* +7 lightness from page */
    --kpex-surface-2:        #14141c;   /* between 0 and 1 — thead / section bg */
    --kpex-surface-3:        #202030;   /* elevated inner section */
    --kpex-surface-hover:    #21212e;   /* row hover — clearly above card */

    /* ── Cards ── */
    --kpex-card-bg:          #1a1a24;
    --kpex-card-border:      rgba(255,255,255,0.08);
    --kpex-card-shadow:      0 2px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    --kpex-card-shadow-lg:   0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);

    /* ── Inputs ── */
    --kpex-input-bg:         #1f1f2c;
    --kpex-input-border:     rgba(255,255,255,0.12);
    --kpex-input-focus-ring: rgba(245,160,17,0.22);

    /* ── Text ramp ── */
    --kpex-text-base:        #e2e2ee;
    --kpex-text-muted:       #9090a8;
    --kpex-text-dim:         #52526a;
    --kpex-text-faint:       #38384e;

    /* ── Navigation ── */
    --kpex-nav-text:         #9898b4;
    --kpex-nav-hover-bg:     #22222e;
    --kpex-nav-hover-text:   #e2e2ee;
    --kpex-nav-active-bg:    rgba(245,160,17,0.14);
    --kpex-nav-active-text:  #F5A011;
    --kpex-nav-section-c:    #6a6a88;
    --kpex-nav-child-c:      #5a5a70;
    --kpex-nav-child-hover:  #22222e;

    /* ── Chrome buttons / dropdowns ── */
    --kpex-icon-btn-color:   #7272a0;
    --kpex-icon-btn-hover:   #22222e;
    --kpex-user-btn-hover:   #22222e;
    --kpex-dropdown-bg:      #1e1e2c;
    --kpex-dropdown-border:  rgba(255,255,255,0.09);
    --kpex-dropdown-text:    #c8c8e0;
    --kpex-dropdown-hover:   #262636;
    --kpex-dropdown-divider: rgba(255,255,255,0.07);

    /* ── Misc ── */
    --kpex-shadow:           rgba(0,0,0,0.4);
    --kpex-shadow-lg:        rgba(0,0,0,0.6);
}


/* ═══════════════════════════════════════════════════════════════
   STRUCTURAL CHROME  — token-driven, smooth transitions
═══════════════════════════════════════════════════════════════ */

/* All chrome elements transition together */
body, aside#kt-sidebar, #kpex-header, #kpex-main, #kpex-footer {
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Body */
body {
    background-color: var(--kpex-page-bg) !important;
    color: var(--kpex-text-base) !important;
}

/* Sidebar */
aside#kt-sidebar {
    background: var(--kpex-sidebar-bg) !important;
    border-right: 2px solid var(--kpex-sidebar-border) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.06);
}
html.dark aside#kt-sidebar {
    box-shadow: 2px 0 24px rgba(0,0,0,0.45);
}
.kpex-sidebar-nav {
    background: var(--kpex-sidebar-bg);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Chrome scrollbar — light mode */
    scrollbar-width: thin;
    scrollbar-color: #d4cfc8 transparent;
}
.kpex-sidebar-nav::-webkit-scrollbar       { width: 4px; }
.kpex-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.kpex-sidebar-nav::-webkit-scrollbar-thumb { background: #d0cac2; border-radius: 4px; }
.kpex-sidebar-nav::-webkit-scrollbar-thumb:hover { background: #F5A011; }
.kpex-sidebar-footer      { background: var(--kpex-sidebar-bg) !important; border-top-color: var(--kpex-sidebar-border) !important; }
.kpex-sidebar-user-name   { color: var(--kpex-text-base)  !important; }
.kpex-sidebar-user-role   { color: var(--kpex-text-dim)   !important; }
.kpex-icon-btn            { color: var(--kpex-icon-btn-color) !important; border-radius: 7px; }
.kpex-icon-btn:hover      { background: var(--kpex-icon-btn-hover) !important; }

/* Header */
#kpex-header {
    background: var(--kpex-header-bg) !important;
    border-bottom: 2px solid #F5A011 !important;
    box-shadow: 0 2px 16px var(--kpex-shadow);
}
#kpex-header nav, #kpex-header nav span, #kpex-header nav a {
    color: var(--kpex-text-muted) !important;
}
#kpex-header nav span[style*="font-weight:600"],
#kpex-header nav span[style*="font-weight: 600"] { color: var(--kpex-text-base) !important; }

/* Header icon buttons (theme toggle, notification) */
.kpex-header-btn {
    background: transparent !important;
    color: var(--kpex-icon-btn-color) !important;
    transition: background 0.15s, color 0.15s;
}
.kpex-header-btn:hover {
    background: var(--kpex-icon-btn-hover) !important;
    color: var(--kpex-text-base) !important;
}

/* User button */
.kpex-user-btn {
    background: transparent !important;
    transition: background 0.15s;
}
.kpex-user-btn:hover      { background: var(--kpex-user-btn-hover) !important; }
.kpex-user-btn-name       { color: var(--kpex-text-base) !important; }

/* User dropdown */
.kpex-dropdown-menu {
    background: var(--kpex-dropdown-bg) !important;
    border-color: var(--kpex-dropdown-border) !important;
    box-shadow: 0 8px 36px var(--kpex-shadow-lg) !important;
}
.kpex-dropdown-menu > div[style*="border-bottom"] {
    border-bottom-color: var(--kpex-dropdown-border) !important;
}
.kpex-dropdown-name      { color: var(--kpex-text-base)  !important; }
.kpex-dropdown-email     { color: var(--kpex-text-dim)   !important; }
.kpex-dropdown-divider   { background: var(--kpex-dropdown-divider) !important; }
.kpex-dropdown-item      { color: var(--kpex-dropdown-text) !important; transition: background 0.12s; }
.kpex-dropdown-item:hover{ background: var(--kpex-dropdown-hover) !important; }

/* Main */
#kpex-main { background: var(--kpex-page-bg) !important; }

/* Footer */
#kpex-footer {
    background: var(--kpex-footer-bg) !important;
    border-top-color: var(--kpex-footer-border) !important;
    color: var(--kpex-text-dim) !important;
}

/* Navigation */
.kpex-nav-section     { color: var(--kpex-nav-section-c) !important; font-weight: 900 !important; }
.kpex-nav-item        { color: var(--kpex-nav-text) !important; transition: background 0.14s, color 0.14s; }
.kpex-nav-item i      { transition: color 0.14s; }
.kpex-nav-item:hover  { background: var(--kpex-nav-hover-bg) !important; color: var(--kpex-nav-hover-text) !important; }
.kpex-nav-item.active { background: var(--kpex-nav-active-bg) !important; color: var(--kpex-nav-active-text) !important; }
.kpex-nav-item.active i, .kpex-nav-item:hover i { color: #F5A011 !important; }
.kpex-nav-child       { color: var(--kpex-nav-child-c) !important; transition: background 0.12s, color 0.12s; }
.kpex-nav-child:hover { background: var(--kpex-nav-child-hover) !important; color: #F5A011 !important; }
.kpex-nav-child.active{ color: #F5A011 !important; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — SURFACE & SHADOW POLISH
   Ensures cards "float" clearly above the deeper cream bg
═══════════════════════════════════════════════════════════════ */

/* Cards with white background get a clean shadow in light mode */
#kpex-main div[style*="background:#fff;"],
#kpex-main div[style*="background: #fff;"],
#kpex-main div[style*="background:#ffffff"] {
    box-shadow: var(--kpex-card-shadow) !important;
}

/* Table thead gets a clear header tint */
#kpex-main table thead tr {
    background: var(--kpex-surface-2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE — COMPREHENSIVE PAGE CONTENT OVERRIDES
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   SURFACE BACKGROUNDS
   Uses [style*="value;"] (with semicolon) to avoid false-matching
   longer hex values like #fffaf4 or #f8f6f2 from #fff / #f8
   ──────────────────────────────────────────────────────────── */

/* Pure white cards / panels */
html.dark #kpex-main div[style*="background:#fff;"],
html.dark #kpex-main div[style*="background: #fff;"],
html.dark #kpex-main div[style*="background:#ffffff;"],
html.dark #kpex-main div[style*=";background:#fff;"],
html.dark #kpex-main div[style*=";background:#fff\""],
html.dark #kpex-main div[style*="background:#ffffff"] {
    background: var(--kpex-surface-1) !important;
    border: 1px solid var(--kpex-card-border) !important;
    box-shadow: var(--kpex-card-shadow) !important;
}

/* Cream / off-white section backgrounds */
html.dark #kpex-main div[style*="background:#F8F6F2"],
html.dark #kpex-main div[style*="background:#f8f6f2"],
html.dark #kpex-main div[style*="background: #F8F6F2"],
html.dark #kpex-main div[style*="background:#fafaf8"],
html.dark #kpex-main div[style*="background:#fafaf8;"] {
    background: var(--kpex-surface-2) !important;
    box-shadow: none !important;
}

/* #f0ece6 — used as background in inner sections / card headers */
html.dark #kpex-main div[style*="background:#f0ece6"],
html.dark #kpex-main div[style*="background: #f0ece6"] {
    background: var(--kpex-surface-3) !important;
}

/* Warm-white stat icon wrappers (FDE8C0, FFF3DC, FFF8EC, FFFDE7, FFFBF3) */
html.dark #kpex-main div[style*="background:#FDE8C0"],
html.dark #kpex-main div[style*="background:#FFF3DC"],
html.dark #kpex-main div[style*="background:#FFF8EC"],
html.dark #kpex-main div[style*="background:#FFFDE7"],
html.dark #kpex-main div[style*="background:#FFFBF3"] {
    background: rgba(245,160,17,0.13) !important;
}

/* Row hover warm tint */
html.dark #kpex-main tr[style*="background:#fffaf4"],
html.dark #kpex-main [style*="background:#fffaf4"] {
    background: var(--kpex-surface-hover) !important;
}

/* ────────────────────────────────────────────────────────────
   BOX SHADOWS
   Light mode shadows (rgba(0,0,0,0.07)) are invisible on dark bg.
   Boost to a deep shadow + soft top highlight for card depth.
   ──────────────────────────────────────────────────────────── */
html.dark #kpex-main div[style*="box-shadow:0 1px 8px rgba(0,0,0,0.07)"],
html.dark #kpex-main div[style*="box-shadow: 0 1px 8px rgba(0,0,0,0.07)"],
html.dark #kpex-main div[style*="box-shadow:0 1px 6px rgba(0,0,0,0.06)"] {
    box-shadow: var(--kpex-card-shadow) !important;
}

/* ────────────────────────────────────────────────────────────
   BORDER COLORS — card dividers, section lines, input borders
   ──────────────────────────────────────────────────────────── */
html.dark #kpex-main [style*="border-bottom:1px solid #f0ece6"],
html.dark #kpex-main [style*="border-bottom: 1px solid #f0ece6"],
html.dark #kpex-main [style*="border-top:1px solid #f0ece6"],
html.dark #kpex-main [style*="border-top: 1px solid #f0ece6"] {
    border-color: var(--kpex-card-border) !important;
}
html.dark #kpex-main [style*="border:1.5px solid #ddd9d2"],
html.dark #kpex-main [style*="border: 1.5px solid #ddd9d2"],
html.dark #kpex-main [style*="border:1px solid #e8e4de"],
html.dark #kpex-main [style*="border: 1px solid #e8e4de"],
html.dark #kpex-main [style*="border:1.5px solid #e8e4de"],
html.dark #kpex-main [style*="border: 1.5px solid #e8e4de"],
html.dark #kpex-main [style*="border:2px solid #e8e4de"],
html.dark #kpex-main [style*="border:1px solid #f0ece6"] {
    border-color: var(--kpex-card-border) !important;
}
/* Orange accent borders always stay orange */
html.dark #kpex-main [style*="border-bottom:2px solid #F5A011"],
html.dark #kpex-main [style*="border-left:3px solid #F5A011"],
html.dark #kpex-main [style*="border-left:4px solid #F5A011"] {
    border-color: #F5A011 !important;
}

/* ────────────────────────────────────────────────────────────
   TEXT & SURFACE OVERRIDES — inline style patterns
   Uses ^= (starts-with) and *=";color:" (after semicolon)
   to avoid false-matching background-color values
   ──────────────────────────────────────────────────────────── */

/* Near-black → bright base text */
html.dark #kpex-main [style^="color:#1a1a1a"],
html.dark #kpex-main [style*=";color:#1a1a1a"],
html.dark #kpex-main [style^="color: #1a1a1a"],
html.dark #kpex-main [style^="color:#1A1A1A"],
html.dark #kpex-main [style*=";color:#1A1A1A"]   { color: var(--kpex-text-base)  !important; }

/* Dark gray → muted light */
html.dark #kpex-main [style^="color:#585856"],
html.dark #kpex-main [style*=";color:#585856"],
html.dark #kpex-main [style^="color:#444"],
html.dark #kpex-main [style*=";color:#444"],
html.dark #kpex-main [style^="color:#333"],
html.dark #kpex-main [style*=";color:#333"],
html.dark #kpex-main [style^="color:#555"],
html.dark #kpex-main [style*=";color:#555"]      { color: var(--kpex-text-muted) !important; }

/* Mid-gray → readable mid tone */
html.dark #kpex-main [style^="color:#666"],
html.dark #kpex-main [style*=";color:#666"],
html.dark #kpex-main [style^="color:#777"],
html.dark #kpex-main [style*=";color:#777"],
html.dark #kpex-main [style^="color:#888"],
html.dark #kpex-main [style*=";color:#888"]      { color: #8888a8 !important; }

/* Dim labels → subtle dark-mode dim */
html.dark #kpex-main [style^="color:#999"],
html.dark #kpex-main [style*=";color:#999"],
html.dark #kpex-main [style^="color:#aaa"],
html.dark #kpex-main [style*=";color:#aaa"],
html.dark #kpex-main [style^="color: #aaa"],
html.dark #kpex-main [style^="color:#bbb"],
html.dark #kpex-main [style*=";color:#bbb"],
html.dark #kpex-main [style^="color: #bbb"]     { color: #5c5c7a !important; }

/* White & orange always stay as-is */
html.dark #kpex-main [style^="color:#fff"],
html.dark #kpex-main [style*=";color:#fff"]      { color: #ffffff !important; }
html.dark #kpex-main [style^="color:#F5A011"],
html.dark #kpex-main [style*=";color:#F5A011"]   { color: #F5A011 !important; }


/* ════════════════════════════════════════════════════════════
   CSS CLASS-BASED DARK MODE OVERRIDES
   These classes are defined inside @push('styles') blocks in
   individual views and cannot be caught by inline [style*=]
   selectors. Each view's component classes are listed here.
════════════════════════════════════════════════════════════ */

/* ── DASHBOARD (.db-*) ── */
html.dark .db-kpi-card {
    background: var(--kpex-card-bg)     !important;
    border-color: var(--kpex-card-border) !important;
    box-shadow: var(--kpex-card-shadow) !important;
}
html.dark .db-kpi-value  { color: var(--kpex-text-base)  !important; }
html.dark .db-kpi-label  { color: var(--kpex-text-dim)   !important; }
html.dark .db-kpi-footer { color: var(--kpex-text-dim)   !important; }
html.dark .db-kpi-footer strong { color: var(--kpex-text-muted) !important; }
html.dark .db-kpi-icon.orange { background: rgba(245,160,17,0.15) !important; }
html.dark .db-kpi-icon.gray   { background: rgba(88,88,86,0.2)   !important; }
html.dark .db-kpi-icon.blue   { background: rgba(59,130,246,0.15) !important; }
html.dark .db-kpi-icon.green  { background: rgba(16,185,129,0.15) !important; }

html.dark .db-card {
    background: var(--kpex-card-bg)      !important;
    border-color: var(--kpex-card-border) !important;
    box-shadow: var(--kpex-card-shadow)  !important;
}
html.dark .db-card-header { border-bottom-color: var(--kpex-card-border) !important; }
html.dark .db-card-title  { color: var(--kpex-text-base)  !important; }
html.dark .db-card-sub    { color: var(--kpex-text-dim)   !important; }

html.dark .db-proj-card {
    background: var(--kpex-surface-2)    !important;
    border-color: var(--kpex-card-border) !important;
}
html.dark .db-proj-card:hover { background: var(--kpex-surface-hover) !important; }
html.dark .db-proj-name   { color: var(--kpex-text-base) !important; }
html.dark .db-proj-code   { color: var(--kpex-text-dim)  !important; }

html.dark .db-carousel-btn {
    background: var(--kpex-card-bg)      !important;
    border-color: var(--kpex-card-border) !important;
    color: var(--kpex-text-dim)          !important;
}
html.dark .db-est-item    { border-bottom-color: var(--kpex-card-border) !important; color: var(--kpex-text-muted) !important; }
html.dark .db-est-title   { color: var(--kpex-text-base) !important; }
html.dark .db-est-proj    { color: var(--kpex-text-dim)  !important; }
html.dark .db-aace-card   { background: var(--kpex-surface-2) !important; }
html.dark .db-aace-name   { color: var(--kpex-text-muted) !important; }
html.dark .db-aace-accuracy { color: var(--kpex-text-dim) !important; }
html.dark .db-aace-accuracy strong { color: var(--kpex-text-muted) !important; }
html.dark .db-activity-item { border-bottom-color: var(--kpex-card-border) !important; color: var(--kpex-text-muted) !important; }

/* Class badge backgrounds dimmed for dark */
html.dark .db-c5 { background: rgba(220,38,38,0.18)  !important; }
html.dark .db-c4 { background: rgba(217,119,6,0.18)  !important; }
html.dark .db-c3 { background: rgba(37,99,235,0.18)  !important; }
html.dark .db-c2 { background: rgba(22,163,74,0.18)  !important; }

/* ── USERS TABLE (.ku-*) ── */
html.dark .ku-stat {
    background: var(--kpex-card-bg)      !important;
    box-shadow: var(--kpex-card-shadow)  !important;
}
html.dark .ku-stat-val { color: var(--kpex-text-base)  !important; }
html.dark .ku-stat-lbl { color: var(--kpex-text-dim)   !important; }
html.dark .ku-table thead tr { background: var(--kpex-surface-2) !important; }
html.dark .ku-table thead th { color: var(--kpex-text-dim)  !important; }
html.dark .ku-table tbody tr { border-bottom-color: var(--kpex-card-border) !important; }
html.dark .ku-table tbody tr:hover { background: var(--kpex-surface-hover) !important; }
html.dark .ku-table td { color: var(--kpex-text-base) !important; }
html.dark .ku-action {
    border-color: var(--kpex-card-border) !important;
    color: var(--kpex-text-dim)          !important;
}
html.dark .ku-filter {
    background: var(--kpex-input-bg)     !important;
    border-color: var(--kpex-input-border) !important;
    color: var(--kpex-text-base)         !important;
}

/* ── PROFILE / USER FORMS (.up-*, .kf-*) ── */
html.dark .up-card {
    background: var(--kpex-card-bg)      !important;
    box-shadow: var(--kpex-card-shadow)  !important;
}
html.dark .up-card-head {
    border-bottom-color: var(--kpex-card-border) !important;
}
html.dark .up-card-head h3 { color: var(--kpex-text-base)  !important; }
html.dark .up-read-row     { border-bottom-color: var(--kpex-card-border) !important; }
html.dark .up-read-label   { color: var(--kpex-text-dim)   !important; }
html.dark .up-read-val     { color: var(--kpex-text-base)  !important; }

html.dark .kf-input,
html.dark .kf-textarea {
    background: var(--kpex-input-bg)     !important;
    border-color: var(--kpex-input-border) !important;
    color: var(--kpex-text-base)         !important;
}
html.dark .kf-input:focus,
html.dark .kf-textarea:focus {
    border-color: #F5A011 !important;
    box-shadow: 0 0 0 3px var(--kpex-input-focus-ring) !important;
}
html.dark .kf-input:disabled { background: var(--kpex-surface-2) !important; }
html.dark .kf-label  { color: var(--kpex-text-dim)   !important; }
html.dark .kf-hint   { color: var(--kpex-text-dim)   !important; }
html.dark .up-strength-bar { background: var(--kpex-surface-3) !important; }

/* ── PAGE HEADINGS (h1/h2/h3 with no inline color) ── */
html.dark #kpex-main h1,
html.dark #kpex-main h2,
html.dark #kpex-main h3,
html.dark #kpex-main h4     { color: var(--kpex-text-base)  !important; }
html.dark #kpex-main p      { color: var(--kpex-text-muted); }

/* ── GENERIC FALLBACK for <select> / <option> ── */
html.dark option { background: var(--kpex-input-bg); color: var(--kpex-text-base); }

/* ────────────────────────────────────────────────────────────
   TABLES  — thead bg, row hover, dividers, cell text
   ──────────────────────────────────────────────────────────── */
html.dark #kpex-main table thead tr {
    background: var(--kpex-surface-2) !important;
}
html.dark #kpex-main table tbody tr {
    border-bottom-color: var(--kpex-card-border) !important;
    transition: background 0.1s;
}
html.dark #kpex-main table tbody tr:hover {
    background: var(--kpex-surface-hover) !important;
}
html.dark #kpex-main table td   { color: var(--kpex-text-base) !important; }
html.dark #kpex-main table th   { color: var(--kpex-text-dim)  !important; }

/* WBS level rows with explicit dark bg (#3a3a38) — keep as-is, they're intentionally dark */
html.dark #kpex-main tr[style*="background:#3a3a38"],
html.dark #kpex-main td[style*="background:#3a3a38"] { /* preserve */ }

/* ────────────────────────────────────────────────────────────
   FORM INPUTS / TEXTAREAS / SELECTS
   ──────────────────────────────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
    background: var(--kpex-input-bg)     !important;
    border-color: var(--kpex-input-border) !important;
    color: var(--kpex-text-base)         !important;
    box-shadow: none !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #F5A011 !important;
    box-shadow: 0 0 0 3px var(--kpex-input-focus-ring) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--kpex-text-dim) !important; opacity: 1; }
html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
    background: var(--kpex-surface-2) !important;
    color: var(--kpex-text-dim)       !important;
    opacity: 0.6;
}

/* ────────────────────────────────────────────────────────────
   SEMANTIC STATUS COLORS
   Keep their hue but dim background opacity for dark surfaces.
   Text colors remain bright for legibility.
   ──────────────────────────────────────────────────────────── */

/* Green — Active / success */
html.dark #kpex-main [style*="background:#D1FAE5"] {
    background: rgba(5,150,105,0.15) !important;
}
/* Yellow — On-hold / warning / draft */
html.dark #kpex-main [style*="background:#FEF3C7"] {
    background: rgba(180,120,0,0.18) !important;
}
/* Blue — Completed / in-review */
html.dark #kpex-main [style*="background:#DBEAFE"],
html.dark #kpex-main [style*="background:#dbeafe"] {
    background: rgba(30,64,175,0.2) !important;
}
/* Red — Inactive / error / cancelled */
html.dark #kpex-main [style*="background:#fee2e2"],
html.dark #kpex-main [style*="background:#f8d7da"] {
    background: rgba(185,28,28,0.18) !important;
}
/* Purple — reviewer role badge */
html.dark #kpex-main [style*="background:#ede9fe"] {
    background: rgba(109,40,217,0.18) !important;
}

/* ────────────────────────────────────────────────────────────
   HERO / GRADIENT BANNERS — keep dark, just brighten text
   ──────────────────────────────────────────────────────────── */
html.dark #kpex-main [style*="background: linear-gradient(135deg, #585856"],
html.dark #kpex-main [style*="background:linear-gradient(135deg, #585856"] {
    background: linear-gradient(135deg, #2a2a36 0%, #1e1e2a 60%, #14141e 100%) !important;
}

/* ────────────────────────────────────────────────────────────
   OVERFLOW:HIDDEN CONTAINERS (cards with rounded corners)
   Ensure the card border is visible via outline instead of box-shadow
   ──────────────────────────────────────────────────────────── */
html.dark #kpex-main div[style*="overflow:hidden"][style*="background:#fff"],
html.dark #kpex-main div[style*="overflow: hidden"][style*="background:#fff"] {
    outline: 1px solid var(--kpex-card-border);
    outline-offset: -1px;
}

/* ────────────────────────────────────────────────────────────
   MISC ELEMENTS
   ──────────────────────────────────────────────────────────── */

/* Ensure images are never inverted */
html.dark img { filter: none !important; }

/* Orange text always stays orange */
html.dark [style*="color:#F5A011"] { color: #F5A011 !important; }

/* Scrollbar tinting for dark mode */
html.dark * {
    scrollbar-color: #2e2e3a var(--kpex-surface-2);
}
html.dark ::-webkit-scrollbar       { width: 6px; height: 6px; }
html.dark ::-webkit-scrollbar-track { background: var(--kpex-surface-2); }
html.dark ::-webkit-scrollbar-thumb { background: #2e2e44; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #F5A011; }

/* Sidebar nav scrollbar — dark mode override (narrower, subtler) */
html.dark .kpex-sidebar-nav {
    scrollbar-color: #2a2a38 transparent;
}
html.dark .kpex-sidebar-nav::-webkit-scrollbar       { width: 4px; }
html.dark .kpex-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
html.dark .kpex-sidebar-nav::-webkit-scrollbar-thumb { background: #2e2e44; border-radius: 4px; }
html.dark .kpex-sidebar-nav::-webkit-scrollbar-thumb:hover { background: #F5A011; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR DARK MODE — toggle independent del dark/light global
   Clase .sidebar-dark se aplica al <aside> vía JS + localStorage
   ══════════════════════════════════════════════════════════════ */
aside#kt-sidebar.sidebar-dark {
    background: #16161c !important;
    border-right-color: rgba(245,160,17,0.18) !important;
    border-right-width: 2px !important;
    border-right-style: solid !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.45) !important;
}
/* Nav items */
#kt-sidebar.sidebar-dark .kpex-nav-item {
    color: rgba(255,255,255,0.65) !important;
}
#kt-sidebar.sidebar-dark .kpex-nav-item i {
    color: rgba(255,255,255,0.35) !important;
}
#kt-sidebar.sidebar-dark .kpex-nav-item:hover {
    background: rgba(245,160,17,0.12) !important;
    color: #fff !important;
}
#kt-sidebar.sidebar-dark .kpex-nav-item:hover i {
    color: #F5A011 !important;
}
#kt-sidebar.sidebar-dark .kpex-nav-item.active {
    background: rgba(245,160,17,0.18) !important;
    color: #F5A011 !important;
}
#kt-sidebar.sidebar-dark .kpex-nav-item.active i {
    color: #F5A011 !important;
}
/* Section labels */
#kt-sidebar.sidebar-dark .kpex-nav-section {
    color: rgba(255,255,255,0.28) !important;
}
/* Sub-children */
#kt-sidebar.sidebar-dark .kpex-nav-child {
    color: rgba(255,255,255,0.45) !important;
}
#kt-sidebar.sidebar-dark .kpex-nav-child:hover {
    background: rgba(245,160,17,0.10) !important;
    color: #F5A011 !important;
}
/* Chevron */
#kt-sidebar.sidebar-dark .kpex-chevron {
    color: rgba(255,255,255,0.25) !important;
}
/* Footer */
#kt-sidebar.sidebar-dark .kpex-sidebar-footer {
    background: #121217 !important;
    border-top-color: rgba(255,255,255,0.07) !important;
}
#kt-sidebar.sidebar-dark .kpex-sidebar-user-name {
    color: rgba(255,255,255,0.85) !important;
}
#kt-sidebar.sidebar-dark .kpex-sidebar-user-role {
    color: rgba(255,255,255,0.38) !important;
}
#kt-sidebar.sidebar-dark .kpex-icon-btn {
    color: rgba(255,255,255,0.45) !important;
}
#kt-sidebar.sidebar-dark .kpex-icon-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
/* Scrollbar */
#kt-sidebar.sidebar-dark .kpex-sidebar-nav {
    scrollbar-color: #2a2a38 transparent;
}
#kt-sidebar.sidebar-dark .kpex-sidebar-nav::-webkit-scrollbar-thumb {
    background: #2e2e44;
}
#kt-sidebar.sidebar-dark .kpex-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #F5A011;
}
/* Toggle button itself — adapta su aspecto según modo */
#kpex-sidebar-theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    color: inherit;
    opacity: 0.55;
}
#kpex-sidebar-theme-btn:hover { opacity: 1; background: rgba(245,160,17,0.12); }
#kt-sidebar.sidebar-dark #kpex-sidebar-theme-btn { color: rgba(255,255,255,0.6); }
#kt-sidebar.sidebar-dark #kpex-sidebar-theme-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ── Kpex 2G / 1G module cards — sidebar-dark specific fixes ── */
/* The "≤ N comp." badge needs explicit dark-sidebar colors since
   CSS vars remain at html-level (light) even when sidebar-dark is active */
#kt-sidebar.sidebar-dark .kpex-nav-item [style*="--kpex-surface-3"] {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.70) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
/* Module card borders in dark sidebar — make them more visible */
#kt-sidebar.sidebar-dark a[style*="rgba(245,160,17,0.22)"],
#kt-sidebar.sidebar-dark a[style*="rgba(245,160,17,.30)"],
#kt-sidebar.sidebar-dark a[style*="rgba(245,160,17, .30)"] {
    border-color: rgba(245,160,17,0.35) !important;
}