/*
 * theJobs admin theme override — replaces the vendor template's default blue (#3f80ea) with
 * the theJobs brand cyan (docs/branding.jpeg), loaded after admin.app.css/admin.layout.v1.css
 * so these rules win the cascade without touching the 665KB compiled vendor file directly.
 *
 * IMPORTANT — button/fill text color: the brand cyan (#00ccff) is much lighter than the old
 * blue. White text on it is only 1.9:1 contrast (fails WCAG AA, unreadable) — measured, not
 * guessed. Navy (#01004c, also from the brand sheet) on the same cyan is 10:1+, so every rule
 * that used to pair a cyan/blue FILL with white TEXT now pairs it with navy text instead.
 * Same reasoning for plain cyan used as TEXT on a light background (1.9:1) — those use a
 * darkened, still-clearly-"cyan" ink (#005266, 8.7:1 on white) instead of the raw base color.
 * All ratios below were computed against the actual WCAG relative-luminance formula, not eyeballed.
 *
 * Light mode                              Dark mode
 * base fill      #00ccff  (unchanged across modes — buttons/badges/borders)
 * fill hover     #00add9                  (same, hover doesn't need a dark variant)
 * fill active    #00a3cc
 * text-on-fill   #01004c  (brand navy — 10:1 on base cyan, stays constant both modes)
 * text-on-light  #005266  (8.7:1 on white)   text-on-dark  #8ce8ff  (10.9:1 on #202634)
 * subtle bg      #d6f7ff  (very light tint)  subtle bg     #001d24  (very dark tint)
 * subtle border  #9eecff                     subtle border #005c73
 */

:root,
[data-bs-theme=light] {
  --bs-primary: #00ccff;
  --bs-primary-rgb: 0, 204, 255;
  --bs-primary-subtle: #5be0ff;
  --bs-primary-subtle-rgb: 91, 224, 255;
  --bs-primary-text-emphasis: #005266;
  --bs-primary-bg-subtle: #d6f7ff;
  --bs-primary-border-subtle: #9eecff;
  --bs-link-color: #005266;
  --bs-link-color-rgb: 0, 82, 102;
  --bs-link-hover-color: #00a3cc;
  --bs-link-hover-color-rgb: 0, 163, 204;
  --bs-focus-ring-color: rgba(0, 204, 255, .25);

  --tj-cyan: #00ccff;
  --tj-cyan-hover: #00add9;
  --tj-cyan-active: #00a3cc;
  --tj-cyan-active-border: #009bc2;
  --tj-cyan-ink: #005266;
  --tj-cyan-subtle: #d6f7ff;
  --tj-cyan-border-subtle: #9eecff;
  --tj-on-fill: #01004c;
  --tj-navy: #01004c;
  --tj-magenta: #ff00fe;
  --tj-cream: #f4f4ec;
}

[data-bs-theme=dark] {
  --bs-primary: #00ccff;
  --bs-primary-rgb: 0, 204, 255;
  --bs-primary-subtle: #00a3cc;
  --bs-primary-subtle-rgb: 0, 163, 204;
  --bs-primary-text-emphasis: #8ce8ff;
  --bs-primary-bg-subtle: #001d24;
  --bs-primary-border-subtle: #005c73;
  --bs-link-color: #8ce8ff;
  --bs-link-color-rgb: 140, 232, 255;
  --bs-link-hover-color: #b8f0ff;
  --bs-link-hover-color-rgb: 184, 240, 255;
  --bs-focus-ring-color: rgba(0, 204, 255, .35);

  --tj-cyan: #00ccff;
  --tj-cyan-hover: #00d6ff;
  --tj-cyan-active: #00e0ff;
  --tj-cyan-active-border: #00e0ff;
  --tj-cyan-ink: #8ce8ff;
  --tj-cyan-subtle: #001d24;
  --tj-cyan-border-subtle: #005c73;
  --tj-on-fill: #01004c;
  --tj-navy: #01004c;
  --tj-magenta: #ff00fe;
  --tj-cream: #f4f4ec;
}

/* ---- Buttons ---- */
.btn-primary {
  --bs-btn-color: var(--tj-on-fill);
  --bs-btn-bg: var(--tj-cyan);
  --bs-btn-border-color: var(--tj-cyan);
  --bs-btn-hover-color: var(--tj-on-fill);
  --bs-btn-hover-bg: var(--tj-cyan-hover);
  --bs-btn-hover-border-color: var(--tj-cyan-active);
  --bs-btn-focus-shadow-rgb: 89, 222, 255;
  --bs-btn-active-color: var(--tj-on-fill);
  --bs-btn-active-bg: var(--tj-cyan-active);
  --bs-btn-active-border-color: var(--tj-cyan-active-border);
  --bs-btn-disabled-color: var(--tj-on-fill);
  --bs-btn-disabled-bg: var(--tj-cyan);
  --bs-btn-disabled-border-color: var(--tj-cyan);
}
.btn-outline-primary {
  --bs-btn-color: var(--tj-cyan-ink);
  --bs-btn-border-color: var(--tj-cyan);
  --bs-btn-hover-color: var(--tj-on-fill);
  --bs-btn-hover-bg: var(--tj-cyan);
  --bs-btn-hover-border-color: var(--tj-cyan);
  --bs-btn-focus-shadow-rgb: 0, 204, 255;
  --bs-btn-active-color: var(--tj-on-fill);
  --bs-btn-active-bg: var(--tj-cyan);
  --bs-btn-active-border-color: var(--tj-cyan);
  --bs-btn-disabled-color: var(--tj-cyan);
  --bs-btn-disabled-border-color: var(--tj-cyan);
}

/* Vendor semantic buttons shipped with white text: measured 2.14:1 on warning (#e5a54b),
   2.33:1 on success (#4bbf73), 3.16:1 on info (#1f9bcf) — all below WCAG AA 4.5:1. Navy
   text measures 8.88 / 8.14 / 6.01 (and stays >= 5.9 on the darker hover/active shades). */
.btn-warning,
.btn-success,
.btn-info,
.btn-outline-warning,
.btn-outline-success,
.btn-outline-info {
  --bs-btn-hover-color: var(--tj-navy);
  --bs-btn-active-color: var(--tj-navy);
}
.btn-warning,
.btn-success,
.btn-info {
  --bs-btn-color: var(--tj-navy);
  --bs-btn-disabled-color: var(--tj-navy);
}

/* Danger as TEXT (outline buttons, .text-danger, "Delete" menu items): the vendor red #d9534f
   measures 3.96:1 on white and 3.82:1 on the dark body — both below AA. Per-theme inks:
   light #b83a36 = 5.68:1 on white, dark #ef8a86 = 6.23:1 on #202634 (5.42:1 on cards). */
:root,
[data-bs-theme=light] { --tj-danger-ink: #b83a36; --tj-danger-ink-on-fill: #ffffff; }
[data-bs-theme=dark] { --tj-danger-ink: #ef8a86; --tj-danger-ink-on-fill: var(--tj-navy); }

.text-danger,
.dropdown-item.text-danger { color: var(--tj-danger-ink) !important; }
.btn-outline-danger {
  --bs-btn-color: var(--tj-danger-ink);
  --bs-btn-border-color: var(--tj-danger-ink);
  --bs-btn-hover-color: var(--tj-danger-ink-on-fill);
  --bs-btn-hover-bg: var(--tj-danger-ink);
  --bs-btn-hover-border-color: var(--tj-danger-ink);
  --bs-btn-active-color: var(--tj-danger-ink-on-fill);
  --bs-btn-active-bg: var(--tj-danger-ink);
  --bs-btn-active-border-color: var(--tj-danger-ink);
  --bs-btn-disabled-color: var(--tj-danger-ink);
  --bs-btn-disabled-border-color: var(--tj-danger-ink);
}

/* ---- Form controls ---- */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--tj-cyan);
  border-color: var(--tj-cyan);
}
.form-range::-webkit-slider-thumb { background-color: var(--tj-cyan); }
.form-range::-moz-range-thumb { background-color: var(--tj-cyan); }

/* ---- Menus / nav / pagination / lists (fill + navy text) ---- */
.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-color: var(--tj-on-fill);
  --bs-dropdown-link-active-bg: var(--tj-cyan);
}
.nav-pills {
  --bs-nav-pills-link-active-color: var(--tj-on-fill);
  --bs-nav-pills-link-active-bg: var(--tj-cyan);
}
.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 204, 255, .25);
  --bs-pagination-active-color: var(--tj-on-fill);
  --bs-pagination-active-bg: var(--tj-cyan);
  --bs-pagination-active-border-color: var(--tj-cyan);
}
.progress, .progress-stacked {
  --bs-progress-bar-color: var(--tj-on-fill);
  --bs-progress-bar-bg: var(--tj-cyan);
}
.list-group {
  --bs-list-group-active-color: var(--tj-on-fill);
  --bs-list-group-active-bg: var(--tj-cyan);
  --bs-list-group-active-border-color: var(--tj-cyan);
}

/* ---- Alerts / illustrations / badges (text-on-light -> accessible ink) ---- */
.alert-outline-coloured.alert-primary .alert-icon,
.alert-outline.alert-primary .alert-icon { background-color: var(--tj-cyan); }
.alert-outline-coloured.alert-primary .alert-message,
.nav-outline .nav-link.active, .nav-outline .show > .nav-link { border-color: var(--tj-cyan); }
.illustration { background: var(--tj-cyan-subtle); color: var(--tj-cyan-ink); }
.illustration-text,
.nav-flag.active, .nav-flag:hover, .nav-icon.active, .nav-icon:hover,
.settings-toggle-option:first-child,
.stat svg,
.tab .nav-tabs .nav-link:hover:not(.active),
.wizard.sw-theme-default > .nav .nav-link.active,
.wizard-primary.sw-theme-default > .nav .nav-link.active,
.sw-theme-default > .nav .nav-link.active {
  color: var(--tj-cyan-ink) !important;
}
.badge-subtle-primary { background-color: rgba(0, 204, 255, .175); color: var(--tj-cyan-ink) !important; }

/* Other subtle badges and .text-muted: the template's status colors (#4bbf73, #e5a54b, #d9534f,
 * #1f9bcf, #92989e) measured 1.9–4.4:1 on their own tinted backgrounds. Same recipe as the
 * primary badge: keep the tinted background, swap the text for an ink measured >= 5:1 on it.
 *   light: success #186a3b 5.76 on #dff4e6   warning #6e4300 7.49 on #faefdf
 *          danger  #a02b27 5.87 on #f8e1e0   info    #0a5a7d 6.27 on #d8edf7   muted #5f676e 5.75 on #fff
 *   dark:  success #8be6aa 6.43 on #2f494b   warning #f5cd82 6.26 on #4a4544
 *          danger  #f29a96 5.21 on #483644   info    #8fd3f3 6.26 on #27435b   muted #aeb6c0 6.42 on #293042 */
:root, [data-bs-theme=light] {
  --tj-ink-success: #186a3b; --tj-ink-warning: #6e4300; --tj-ink-danger: #a02b27;
  --tj-ink-info: #0a5a7d; --tj-ink-muted: #5f676e;
}
[data-bs-theme=dark] {
  --tj-ink-success: #8be6aa; --tj-ink-warning: #f5cd82; --tj-ink-danger: #f29a96;
  --tj-ink-info: #8fd3f3; --tj-ink-muted: #aeb6c0;
}
.badge-subtle-success { color: var(--tj-ink-success) !important; }
.badge-subtle-warning { color: var(--tj-ink-warning) !important; }
.badge-subtle-danger { color: var(--tj-ink-danger) !important; }
.badge-subtle-info { color: var(--tj-ink-info) !important; }
.text-muted { color: var(--tj-ink-muted) !important; }
.navbar-brand .lucide, .navbar-brand svg { color: var(--tj-cyan-ink); }

/* ---- Fills paired with white text originally -> navy text ---- */
.sidebar-toggle:hover .hamburger,
.sidebar-toggle:hover .hamburger:after,
.sidebar-toggle:hover .hamburger:before,
.settings-scheme:after,
.wizard.sw-theme-default > .nav .nav-link.active:after,
.wizard.sw-theme-arrows > .nav .nav-link.active:after,
.wizard-primary.sw-theme-default > .nav .nav-link.active:after,
.wizard-primary.sw-theme-arrows > .nav .nav-link.active:after,
.sw-theme-default > .nav .nav-link.active:after,
.sw-theme-arrows > .nav .nav-link.active:after {
  background: var(--tj-cyan);
}
.wizard.sw-theme-arrows > .nav .nav-link.active,
.wizard-primary.sw-theme-arrows > .nav .nav-link.active {
  background: var(--tj-cyan) !important;
  border-color: var(--tj-cyan) !important;
  color: var(--tj-on-fill) !important;
}
.wizard.sw-theme-arrows > .nav .nav-link.active:after,
.wizard-primary.sw-theme-arrows > .nav .nav-link.active:after,
.sw-theme-arrows > .nav .nav-link.active:after {
  border-left-color: var(--tj-cyan) !important;
}
.sw-theme-arrows > .nav .nav-link.active {
  background: var(--tj-cyan);
  border-color: var(--tj-cyan);
  color: var(--tj-on-fill);
}
.modal-primary .modal-content { background: var(--tj-cyan); color: var(--tj-on-fill); }
.nav-item .indicator { background: var(--tj-cyan); color: var(--tj-on-fill); }
.settings-scheme-label:checked + .settings-scheme { border: 1px solid var(--tj-cyan); color: var(--tj-cyan-ink); }
.settings-scheme-theme-colored { background-image: linear-gradient(-45deg, var(--tj-cyan) 50%, #edf2f5 0); }
.settings-button-label:checked + .settings-button,
.badge-sidebar-primary,
html[data-sidebar-theme=light] .badge-sidebar-primary {
  background: var(--tj-cyan);
  color: var(--tj-on-fill);
}
.tab-primary .nav-tabs .nav-link.active,
.tab-primary .tab-content {
  background: var(--tj-cyan);
  border-bottom-color: var(--tj-cyan);
  color: var(--tj-on-fill);
}
.timeline-item:before { border-color: var(--tj-cyan); }
.sw-theme-default .toolbar > .btn,
.sw-theme-arrows .toolbar > .btn {
  background-color: var(--tj-cyan);
  border-color: var(--tj-cyan);
  color: var(--tj-on-fill);
}

/* ---- Third-party plugin skins (select2, DataTables, daterangepicker, Quill) ---- */
.select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
  background-color: var(--tj-cyan);
  color: var(--tj-on-fill);
}
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected { background-color: var(--tj-cyan) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
  background-color: var(--tj-cyan);
  color: var(--tj-on-fill);
}
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button:hover,
.ql-snow a {
  color: var(--tj-cyan-ink);
}
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill { fill: var(--tj-cyan-ink); }
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter { stroke: var(--tj-cyan-ink); }

/* ---- Sidebar logo: show the variant readable on the current sidebar background ----
   Default/dark/colored sidebars are dark -> white wordmark; only the light sidebar gets navy. */
.sidebar-brand .sidebar-logo-on-light { display: none; }
html[data-sidebar-theme=light] .sidebar-brand .sidebar-logo-on-light { display: inline-block; }
html[data-sidebar-theme=light] .sidebar-brand .sidebar-logo-on-dark { display: none; }

/* The "colored" sidebar option was the vendor's old blue (#2a64c1) — use the brand navy. */
html[data-sidebar-theme=colored] .sidebar,
html[data-sidebar-theme=colored] .sidebar-content { background: var(--tj-navy); }
html[data-sidebar-theme=colored] .sidebar-cta-content { background: #0b0a66; }

/* ================= Login / password-recovery page (always data-bs-theme="dark") ================= */
/* .auth-full-page is a flex child (.col-xl-6.d-flex) with no explicit width of its own — the
   original template relied on .auth-bg's large intrinsic raster size to give it one. Our SVG
   background has its own explicit width/height now (see bg-1.svg/bg-2.svg), but this stays as
   a defensive floor so swapping the background image again can never collapse the column to 0
   width the way it did here once already (caught by the width-0 flex check below). */
.auth-full-page { background: var(--tj-navy); width: 100%; }
.auth-quote {
  z-index: 1;
  color: #fff;
}
.auth-quote i[data-lucide] { color: var(--tj-magenta); }
.auth-logo { max-height: 64px; width: auto; }