/* ============================================================================
   AMOLED-friendly dark mode overrides for kwik-plus admin.

   The SPRUHA template already ships a full dark theme keyed off `body.dark-theme`
   and its rules consume CSS variables (--dark-body / --dark-theme / --dark-color /
   --dark-border, used 1400+ times). So re-skinning the whole template to a deep
   near-black palette is mostly a matter of overriding those four variables.

   The rest of this file covers the few things the template's dark theme does NOT
   reach: light-only utility classes (text-dark / bg-white), the React-only
   widgets (react-select, react-datepicker, react-toastify), dark-mode legibility
   polish (stat cards, primary accent, dropdowns, toggle), and a small GLOBAL
   button/toggle palette refinement that applies to BOTH themes (clearly marked
   at the bottom). All other rules are scoped under `body.dark-theme`.
   ============================================================================ */

/* 1. AMOLED palette — flips the entire template dark theme. ---------------- */
body.dark-theme {
  --dark-body: #000000;              /* true-black base chrome (AMOLED) */
  --dark-theme: #14141a;             /* elevated surface — depth on LCD */
  --dark-color: #e6e6ea;             /* primary text (high contrast) */
  --dark-border: rgba(255, 255, 255, 0.1);

  /* Accent = nivo chart palette (the dashboard pies/bars use scheme:'nivo').
     Teal #61cdbb is the standout chart color and reads beautifully on black;
     light-teal #97e3d5 is its hover (also straight from the palette). Overriding
     the template's primary vars re-skins var-driven accents (selected states,
     links, etc.) in one place — the hardcoded blues below are swapped to match.
     `--accent-ink` is the dark text used ON the light teal for AA contrast. */
  --primary: #61cdbb;
  --primary-bg-color: #61cdbb;
  --primary-bg-hover: #4fb8a8;
  --primary-bg-border: #61cdbb;
  --primary-transparentcolor: rgba(97, 205, 187, 0.16);
  --accent-ink: #06251f;
}

/* A few surfaces are worth pinning explicitly (form controls were noted as
   inheriting light styles in the template's dark theme). */
body.dark-theme,
body.dark-theme .main-content,
body.dark-theme .page {
  background-color: var(--dark-body) !important;
  color: var(--dark-color);
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .input-group-text,
body.dark-theme textarea.form-control {
  background-color: var(--dark-theme) !important;
  color: var(--dark-color) !important;
  border-color: var(--dark-border) !important;
}
body.dark-theme .form-control::placeholder {
  color: #8a8a99 !important;
}

/* Checkboxes + file-input button (base look lives in forms.css). Navy is
   invisible on black, so lift them to the same #61cdbb accent used elsewhere;
   the checkbox tick + file-button text flip to dark for contrast. */
body.dark-theme input[type='checkbox'] {
  background-color: var(--dark-theme);
  border-color: rgba(255, 255, 255, 0.28);
}
body.dark-theme input[type='checkbox']:hover {
  border-color: #61cdbb;
}
body.dark-theme input[type='checkbox']:checked {
  background-color: #61cdbb;
  border-color: #61cdbb;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306251f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
body.dark-theme input[type='checkbox']:focus-visible {
  box-shadow: 0 0 0 3px rgba(97, 205, 187, 0.35);
}
body.dark-theme input[type='file']::file-selector-button {
  background-color: #61cdbb;
  color: #06251f;
}
body.dark-theme input[type='file']::-webkit-file-upload-button {
  background-color: #61cdbb;
  color: #06251f;
}

/* Login / signin screen. The template ships it light-only: navy `.txt-blue`
   headings (invisible on black), pale inputs, and a navy CTA that barely
   separates from the background. Scoped to `.main-signin-wrapper` with
   !important to beat the signin-specific theme rules. */
body.dark-theme .main-signin-wrapper .txt-blue {
  color: #61cdbb !important;
}
body.dark-theme .main-signin-wrapper h5,
body.dark-theme .main-signin-wrapper label {
  color: var(--dark-color) !important;
}
body.dark-theme .main-signin-wrapper .text-muted {
  color: #9aa3bd !important;
}
body.dark-theme .main-signin-wrapper .form-control {
  background-color: #0d0d12 !important;
  color: var(--dark-color) !important;
  border-color: var(--dark-border) !important;
}
body.dark-theme .main-signin-wrapper .form-control::placeholder {
  color: #8a8a99 !important;
}
body.dark-theme .main-signin-wrapper .form-control:focus {
  border-color: #61cdbb !important;
  box-shadow: 0 0 0 3px rgba(97, 205, 187, 0.2) !important;
}
body.dark-theme .main-signin-wrapper .btn-main-primary {
  background-color: #61cdbb !important;
  border-color: #61cdbb !important;
  color: #06251f !important;
}
body.dark-theme .main-signin-wrapper .btn-main-primary:hover,
body.dark-theme .main-signin-wrapper .btn-main-primary:focus {
  background-color: #97e3d5 !important;
  border-color: #97e3d5 !important;
  color: #06251f !important;
}

/* 2. Legibility fixes for hardcoded light-only utilities. ------------------ */
body.dark-theme .text-dark,
body.dark-theme .text-black {
  color: var(--dark-color) !important;
}
body.dark-theme .text-muted {
  color: #a0a0ad !important;
}
body.dark-theme .bg-white,
body.dark-theme .bg-light {
  background-color: var(--dark-theme) !important;
  color: var(--dark-color);
}
/* Section titles / card headings (in case the template leaves them dark). */
body.dark-theme .main-content-label,
body.dark-theme .main-content-title,
body.dark-theme .card-title {
  color: var(--dark-color) !important;
}

/* 3. Badges: the template's vivid colors read fine on near-black; only the
      near-black badge needs lifting so it doesn't vanish. -------------------- */
body.dark-theme .bg-black-8 {
  background-color: #2a2a33 !important;
}

/* 4. Header theme toggle — guarantee the right sun/moon shows regardless of
      the template's default display rules. ---------------------------------- */
.main-header-theme .dark-layout {
  display: none;
}
.main-header-theme .light-layout {
  display: inline-block;
}
body.dark-theme .main-header-theme .dark-layout {
  display: inline-block;
}
body.dark-theme .main-header-theme .light-layout {
  display: none;
}

/* 5. react-select (SelectBox uses classNamePrefix="react-select"). --------- */
body.dark-theme .react-select__control {
  background-color: var(--dark-theme) !important;
  border-color: var(--dark-border) !important;
  box-shadow: none !important;
}
body.dark-theme .react-select__menu {
  background-color: #1a1a20 !important;
  border: 1px solid var(--dark-border) !important;
}
body.dark-theme .react-select__option {
  background-color: transparent !important;
  color: var(--dark-color) !important;
}
body.dark-theme .react-select__option--is-focused {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .react-select__option--is-selected {
  background-color: var(--primary-bg-color) !important;
  color: var(--accent-ink) !important;
}
body.dark-theme .react-select__single-value,
body.dark-theme .react-select__input-container,
body.dark-theme .react-select__input {
  color: var(--dark-color) !important;
}
body.dark-theme .react-select__placeholder {
  color: #8a8a99 !important;
}
body.dark-theme .react-select__multi-value {
  background-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-theme .react-select__multi-value__label {
  color: var(--dark-color) !important;
}
body.dark-theme .react-select__indicator-separator {
  background-color: var(--dark-border) !important;
}
body.dark-theme .react-select__menu-notice {
  color: #8a8a99 !important;
}

/* 6. react-datepicker. ----------------------------------------------------- */
body.dark-theme .react-datepicker {
  background-color: #1a1a20 !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-color) !important;
}
body.dark-theme .react-datepicker__header {
  background-color: #14141a !important;
  border-bottom-color: var(--dark-border) !important;
}
body.dark-theme .react-datepicker__current-month,
body.dark-theme .react-datepicker-time__header,
body.dark-theme .react-datepicker__day-name,
body.dark-theme .react-datepicker__day,
body.dark-theme .react-datepicker__time-name {
  color: var(--dark-color) !important;
}
body.dark-theme .react-datepicker__day:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-theme .react-datepicker__day--selected,
body.dark-theme .react-datepicker__day--in-range,
body.dark-theme .react-datepicker__day--in-selecting-range,
body.dark-theme .react-datepicker__day--keyboard-selected {
  background-color: var(--primary-bg-color) !important;
  color: var(--accent-ink) !important;
}
body.dark-theme .react-datepicker__day--disabled {
  color: #555555 !important;
}
body.dark-theme .react-datepicker__triangle::before,
body.dark-theme .react-datepicker__triangle::after {
  border-bottom-color: #14141a !important;
}

/* 7. react-toastify. ------------------------------------------------------- */
body.dark-theme .Toastify__toast {
  background-color: #1a1a20 !important;
  color: var(--dark-color) !important;
}
body.dark-theme .Toastify__close-button {
  color: var(--dark-color) !important;
  opacity: 0.8;
}

/* 8. Dark-mode polish — legibility of stat cards, primary accent, dropdowns,
      and the status toggle (these selectors hardcode colors or use the navy
      primary, and the template ships no dark rule for them). ----------------- */

/* Stat-card numbers default to the navy primary — force bright on black. */
body.dark-theme .card-item-stat h4,
body.dark-theme .card-item-stat .card-item-figure,
body.dark-theme .card-item-stat small {
  color: var(--dark-color) !important;
}

/* Primary accent (icons / links / text) — navy #032852 is invisible on black. */
body.dark-theme .text-primary {
  color: #61cdbb !important;
}
body.dark-theme a.text-primary:hover {
  color: #97e3d5 !important;
}

/* Footer links (app name / "Webkype.com") use the template's dark navy link
   color, which is invisible on the near-black footer. Lift them to the accent
   so the copyright line reads fully. The surrounding text is already light. */
body.dark-theme .main-footer a {
  color: #61cdbb !important;
}
body.dark-theme .main-footer a:hover {
  color: #97e3d5 !important;
}

/* Stat-card icon chip — subtle tinted background so the bright icon reads. */
body.dark-theme .card-item-icon.card-icon {
  background: rgba(97, 205, 187, 0.15) !important;
}
body.dark-theme .card-item-icon.card-icon i {
  color: #61cdbb !important;
}
/* Dashboard KPI cards use inline <svg> icons (no fill set = black, invisible on
   dark). Tint them to match the icon color above; fill is inherited, so paths
   with fill="none" (bounding boxes) stay transparent. */
body.dark-theme .card-item-icon.card-icon svg {
  fill: #61cdbb !important;
}

/* Horizontal-nav dropdowns (Setup / Carpool / Reports).
   The template hardcodes `.kk-dropdown-item:hover { background:#28326e!important }`
   — a harsh solid indigo block flush to the menu edges. Replace it with a padded,
   rounded menu whose items get a soft accent tint + left bar on hover/active so the
   highlight reads as a deliberate "pill", not a full-bleed fill. */
body.dark-theme .kk-dropdown-menu {
  background-color: #16161d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}
body.dark-theme .kk-dropdown-item {
  border-radius: 7px !important;
  margin: 2px 0 !important;
  border-left: 3px solid transparent !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease !important;
}
body.dark-theme .kk-dropdown-item,
body.dark-theme .kk-dropdown-item .nav-sub-link {
  color: #c7c9d4 !important;
}
body.dark-theme .kk-dropdown-item:hover,
body.dark-theme .kk-dropdown-item:focus,
body.dark-theme .kk-dropdown-item.active {
  background-color: rgba(97, 205, 187, 0.14) !important;
  border-left-color: #61cdbb !important;
}
body.dark-theme .kk-dropdown-item:hover .nav-sub-link,
body.dark-theme .kk-dropdown-item:focus .nav-sub-link,
body.dark-theme .kk-dropdown-item.active .nav-sub-link {
  color: #ffffff !important;
}

/* Status toggle — OFF track + knob must stay visible on black. */
body.dark-theme .main-toggle {
  background-color: #2a2a33 !important;
}
body.dark-theme .main-toggle span {
  background-color: #e6e6ea !important;
}

/* Header profile-icon chip. JSX inlines a purple gradient; in dark mode pull it
   onto the chart-palette teal so it matches the rest of the accent. !important
   beats the inline style; the glyph flips to dark ink for contrast on the teal. */
body.dark-theme .main-profile-menu .main-img-user {
  background: linear-gradient(135deg, #61cdbb 0%, #3aa18f 100%) !important;
}
body.dark-theme .main-profile-menu .main-img-user i {
  color: var(--accent-ink) !important;
}

/* Primary buttons in dark = chart teal. The teal is light, so the label/icon
   flip to dark ink (--accent-ink) for legible contrast instead of white. */
body.dark-theme .btn-primary,
body.dark-theme .btn-primary:focus {
  background-color: #61cdbb !important;
  border-color: #61cdbb !important;
  color: var(--accent-ink) !important;
}
body.dark-theme .btn-primary:hover {
  background-color: #4fb8a8 !important;
  border-color: #4fb8a8 !important;
  color: var(--accent-ink) !important;
}
body.dark-theme .btn-primary i {
  color: var(--accent-ink) !important;
}

/* Pagination — the template hardcodes white page-links (invisible on black) and
   ships no dark rule. Give them the dark surface, a teal-tint hover, and a solid
   teal active page (dark ink) so it matches the chart palette. */
body.dark-theme .page-link {
  background-color: var(--dark-theme) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-color) !important;
}
body.dark-theme .page-link:hover,
body.dark-theme .page-link:focus {
  background-color: rgba(97, 205, 187, 0.16) !important;
  border-color: rgba(97, 205, 187, 0.45) !important;
  color: #ffffff !important;
}
body.dark-theme .page-item.active .page-link {
  background-color: #61cdbb !important;
  border-color: #61cdbb !important;
  color: var(--accent-ink) !important;
}
/* The active page also carries `.disabled` (it's the current page), so this
   muted rule must exclude `.active` or it would override the teal above. Also
   covers the Previous/Next buttons, which get `:disabled` / `.disabled` on the
   <button> itself rather than the <li>. */
body.dark-theme .page-item.disabled:not(.active) .page-link,
body.dark-theme .page-link:disabled,
body.dark-theme .page-link.disabled {
  background-color: var(--dark-theme) !important;
  border-color: var(--dark-border) !important;
  color: #5a5a66 !important;
}

/* ============================================================================
   GLOBAL button + toggle palette refinement (applies to BOTH themes).
   The template's defaults are neon/garish; these muted tones read naturally on
   light and AMOLED-dark alike (a button's own background provides the contrast).
   Vivid status badges (bg-*/bg-pill) are intentionally left untouched.
   ============================================================================ */
.btn-info,
.btn-info:focus {
  background-color: #3a86c8 !important;
  border-color: #3a86c8 !important;
}
.btn-info:hover {
  background-color: #3478b4 !important;
  border-color: #3478b4 !important;
}
.btn-danger,
.btn-danger:focus {
  background-color: #d9534f !important;
  border-color: #d9534f !important;
}
.btn-danger:hover {
  background-color: #c44440 !important;
  border-color: #c44440 !important;
}
.btn-warning,
.btn-warning:focus {
  background-color: #cf8d2c !important;
  border-color: #cf8d2c !important;
  color: #ffffff !important;
}
.btn-warning:hover {
  background-color: #b97c22 !important;
  border-color: #b97c22 !important;
}
.btn-success,
.btn-success:focus {
  background-color: #2fa36b !important;
  border-color: #2fa36b !important;
}
.btn-success:hover {
  background-color: #288c5c !important;
  border-color: #288c5c !important;
}
.btn-secondary,
.btn-secondary:focus {
  background-color: #5a6b85 !important;
  border-color: #5a6b85 !important;
}
.btn-secondary:hover {
  background-color: #4c5b72 !important;
  border-color: #4c5b72 !important;
}

/* Status toggle ON state — match the refined success green. */
.main-toggle-success.on {
  background-color: #2fa36b !important;
}

/* ----------------------------------------------------------------------------
   Active nav-item indicator (BOTH themes).
   The template's ONLY active style for the horizontal nav is `color:#fff` — but
   the inactive links are already near-white on the navy (light) / near-black
   (dark) navbar, so the active page is indistinguishable.

   The nav-link is a fixed 42px flex box, so a background fills the whole bar
   height and reads as a bulky lozenge. Instead, mark the active item with a slim
   underline accent (Material-style tab) + bolder text — clean and unmistakable.
   `inset box-shadow` (not border) avoids layout shift and the dropdown chevron's
   ::after; targets the direct child link only so sub-links are unaffected. ----- */
.main-navbar.hor-menu .nav-item.active > .nav-link {
  font-weight: 600 !important;
  box-shadow: inset 0 -3px 0 0 #ffffff !important;
}
.main-navbar.hor-menu .nav-item.active > .nav-link .hor-icon,
.main-navbar.hor-menu .nav-item.active > .nav-link .sidemenu-label {
  color: #ffffff !important;
}
body.dark-theme .main-navbar.hor-menu .nav-item.active > .nav-link {
  box-shadow: inset 0 -3px 0 0 #61cdbb !important;
}
body.dark-theme .main-navbar.hor-menu .nav-item.active > .nav-link .hor-icon,
body.dark-theme .main-navbar.hor-menu .nav-item.active > .nav-link .sidemenu-label {
  color: #61cdbb !important;
}