/* ============================================================================
   FTKBS UI Redesign — light BI override layer
   ----------------------------------------------------------------------------
   Loads AFTER Sneat core.css / theme-default.css AND after every third-party
   widget stylesheet, so these rules win on load order (no !important needed
   except where a widget hardcodes inline-level styles).

   Direction: takes the DESIGN LANGUAGE of the user's Figma mockups — the
   colored status set (green/blue/amber/pink/purple), KPI cards with colored
   rails, accent-filled table headers, rounded cards — and rebuilds it as a
   LIGHT theme for a work environment. The mockups' gold was a dark-theme
   accent; on light the primary accent is TEAL and gold survives only as the
   'Pending' status color (--ftk-amber). Real FTKBS F-mark used for the brand.

   Scope: themes the shared chrome + Bootstrap/Sneat components, which covers
   every NON-dashboard page (Auth, Management, Finance, Admin, Misc) in one pass.
   The coded dashboards (Dash_/*) inherit the chrome; their JS charts read
   colors from wwwroot/js/config.js and are handled separately.
   ============================================================================ */

/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
  /* Surfaces (page → raised) */
  --ftk-bg:          #f2f3f7;   /* page background            */
  --ftk-surface:     #ffffff;   /* cards, sidebar, navbar     */
  --ftk-surface-2:   #eef0f5;   /* inputs, tracks             */
  --ftk-surface-3:   #e5e8f1;   /* hover, active rows         */
  --ftk-tint:        #f7f8fb;   /* input fill / zebra         */

  /* Lines */
  --ftk-border:      #dde0ea;
  --ftk-border-soft: #e9ebf2;

  /* Accent — teal (primary UI accent, tuned for light surfaces) */
  --ftk-accent:        #0e9f8f;   /* primary fill               */
  --ftk-accent-strong: #0b8577;   /* hover / gradient end       */
  --ftk-accent-deep:   #0b7a6d;   /* accent used as text/links  */
  --ftk-accent-ink:    #ffffff;   /* text/icon on an accent fill*/
  --ftk-accent-soft:   #e2f5f2;   /* pale accent tint (active)  */
  --ftk-accent-rgb:    14, 159, 143;

  /* Text */
  --ftk-text:        #1f2338;   /* headings / high emphasis   */
  --ftk-text-body:   #434a5e;   /* body copy                  */
  --ftk-muted:       #6c7385;   /* secondary / labels         */
  --ftk-faint:       #a2a8b6;   /* placeholders / disabled    */

  /* Status set — fill (bright) + text (darkened for white bg) */
  --ftk-green:  #22b06f; --ftk-green-ink:  #167a4d; --ftk-green-rgb:  34, 176, 111;  /* Completed */
  --ftk-blue:   #2a9fd6; --ftk-blue-ink:   #16719e; --ftk-blue-rgb:   42, 159, 214;  /* Active    */
  --ftk-amber:  #e0a82e; --ftk-amber-ink:  #97690c; --ftk-amber-rgb:  224, 168, 46;  /* Pending   */
  --ftk-pink:   #ef5a7e; --ftk-pink-ink:   #cc3a5d; --ftk-pink-rgb:   239, 90, 126;  /* Delayed   */
  --ftk-purple: #8b73ec; --ftk-purple-ink: #6247c6; --ftk-purple-rgb: 139, 115, 236; /* accent-2  */

  /* Geometry */
  --ftk-radius:    14px;
  --ftk-radius-sm: 9px;
  --ftk-shadow:    0 1px 2px rgba(20, 22, 48, .05), 0 6px 20px rgba(20, 22, 48, .06);
  --ftk-shadow-lg: 0 12px 34px rgba(20, 22, 48, .12);
}

/* ============================================================================
   2. BOOTSTRAP 5.3 VARIABLE REMAP  (broad cascade to all BS components)
   ============================================================================ */
:root,
.light-style {
  --bs-body-bg:            var(--ftk-bg);
  --bs-body-color:         var(--ftk-text-body);
  --bs-body-color-rgb:     67, 74, 94;
  --bs-heading-color:      var(--ftk-text);
  --bs-emphasis-color:     var(--ftk-text);
  --bs-emphasis-color-rgb: 31, 35, 56;
  --bs-secondary-color:    var(--ftk-muted);
  --bs-tertiary-color:     var(--ftk-faint);
  --bs-border-color:       var(--ftk-border);
  --bs-secondary-bg:       var(--ftk-surface-2);
  --bs-tertiary-bg:        var(--ftk-tint);

  --bs-primary:            var(--ftk-accent);
  --bs-primary-rgb:        var(--ftk-accent-rgb);
  --bs-success:            var(--ftk-green);
  --bs-success-rgb:        var(--ftk-green-rgb);
  --bs-info:               var(--ftk-blue);
  --bs-info-rgb:           var(--ftk-blue-rgb);
  --bs-warning:            var(--ftk-amber);
  --bs-warning-rgb:        var(--ftk-amber-rgb);
  --bs-danger:             var(--ftk-pink);
  --bs-danger-rgb:         var(--ftk-pink-rgb);

  --bs-card-bg:            var(--ftk-surface);
  --bs-card-color:         var(--ftk-text-body);
  --bs-card-border-color:  var(--ftk-border-soft);

  --bs-link-color:         var(--ftk-accent-deep);
  --bs-link-color-rgb:     11, 122, 109;
  --bs-link-hover-color:   var(--ftk-accent-strong);

  --bs-table-bg:           transparent;
  --bs-table-color:        var(--ftk-text-body);
  --bs-table-border-color: var(--ftk-border-soft);
  --bs-table-striped-bg:   var(--ftk-tint);
  --bs-table-striped-color:var(--ftk-text-body);
  --bs-table-hover-bg:     var(--ftk-surface-3);
  --bs-table-hover-color:  var(--ftk-text);
}

/* ============================================================================
   2b. SNEAT PRIMARY -> TEAL  (auto-mirrored from theme-default.css/core.css)
   Sneat hardcodes the #696cff primary as literal properties (not --bs vars),
   so these rules restate Sneat's own selectors with teal swapped in. They
   match Sneat's specificity and win on source order. !important preserved.
   ============================================================================ */
.text-primary { color: #0e9f8f !important; }
.text-body[href]:hover,
.text-heading[href]:hover { color: #0d8a7c !important; }
.bg-primary { background-color: #0e9f8f !important; }
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span { background-color: #0e9f8f; }
.bg-label-primary { color: #0e9f8f !important; }
.border-light-primary { border: 3px solid rgba(14, 159, 143, 0.08); }
.page-item .page-link:hover, .page-item .page-link:focus,
.pagination li > a:not(.page-link):hover,
.pagination li > a:not(.page-link):focus { background-color: rgba(14, 159, 143, 0.16); color: #0e9f8f; }
.page-item.active .page-link,
.pagination li.active > a:not(.page-link) { box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus { border-color: #0e9f8f; background-color: #0e9f8f; }
.progress-bar { background-color: #0e9f8f; box-shadow: 0 2px 4px 0 rgba(14, 159, 143, 0.4); }
.list-group-item-primary { border-color: #0e9f8f; color: #0e9f8f !important; }
a.list-group-item-primary,
button.list-group-item-primary { color: #0e9f8f; }
a.list-group-item-primary:hover, a.list-group-item-primary:focus,
button.list-group-item-primary:hover,
button.list-group-item-primary:focus { border-color: #0e9f8f; color: #0e9f8f; }
a.list-group-item-primary.active,
button.list-group-item-primary.active { border-color: #0e9f8f !important; background-color: #0e9f8f !important; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { color: #0e9f8f; }
.alert-primary { color: #0e9f8f; }
.alert-primary .alert-link { color: #0e9f8f; }
.alert-primary hr { background-color: #0e9f8f !important; box-shadow: 0 0 0 0.125rem rgba(14, 159, 143, 0.16); }
.btn-primary { background-color: #0e9f8f; border-color: #0e9f8f; box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.btn-primary:hover { background-color: #0d8a7c !important; border-color: #0d8a7c !important; }
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus { background-color: #0d8a7c; border-color: #0d8a7c; }
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle { background-color: #0d8a7c !important; border-color: #0d8a7c !important; }
.btn-primary.disabled, .btn-primary:disabled { background-color: #0e9f8f !important; border-color: #0e9f8f !important; }
.btn-group .btn-primary,
.input-group .btn-primary { border-right: var(--bs-border-width) solid #0d8a7c; border-left: var(--bs-border-width) solid #0d8a7c; }
.btn-group-vertical .btn-primary { border-top-color: #0d8a7c; border-bottom-color: #0d8a7c; }
.btn-outline-primary { color: #0e9f8f; border-color: #0e9f8f; }
.btn-outline-primary:hover { background-color: #0d8a7c !important; border-color: #0d8a7c !important; box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4) !important; }
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { background-color: #0d8a7c; border-color: #0d8a7c; }
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { background-color: #0d8a7c !important; border-color: #0d8a7c !important; }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #0e9f8f !important; border-color: #0e9f8f !important; }
.btn-outline-primary .badge { background: #0e9f8f; border-color: #0e9f8f; }
.dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active { background-color: rgba(14, 159, 143, 0.16); color: #0e9f8f !important; }
.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) { background-color: rgba(14, 159, 143, 0.16); color: #0e9f8f !important; }
.dt-button-collection .dropdown-item:not(.disabled):active { background-color: rgba(14, 159, 143, 0.16); }
.nav-pills .nav-link.active { box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus { background-color: #0e9f8f; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus { box-shadow: 0 -2px 0 #0e9f8f inset; }
.nav-align-bottom .nav-tabs .nav-link.active, .nav-align-bottom .nav-tabs .nav-link.active:hover, .nav-align-bottom .nav-tabs .nav-link.active:focus,
.nav-align-bottom .nav-tabs .nav-link.active,
.nav-align-bottom .nav-tabs .nav-link.active:hover,
.nav-align-bottom .nav-tabs .nav-link.active:focus { box-shadow: 0 2px 0 #0e9f8f inset; }
.nav-align-left .nav-tabs .nav-link.active, .nav-align-left .nav-tabs .nav-link.active:hover, .nav-align-left .nav-tabs .nav-link.active:focus,
.nav-align-left .nav-tabs .nav-link.active,
.nav-align-left .nav-tabs .nav-link.active:hover,
.nav-align-left .nav-tabs .nav-link.active:focus { box-shadow: -2px 0px 0 #0e9f8f inset; }
.nav-align-right .nav-tabs .nav-link.active, .nav-align-right .nav-tabs .nav-link.active:hover, .nav-align-right .nav-tabs .nav-link.active:focus,
.nav-align-right .nav-tabs .nav-link.active,
.nav-align-right .nav-tabs .nav-link.active:hover,
.nav-align-right .nav-tabs .nav-link.active:focus { box-shadow: 2px 0px 0 #0e9f8f inset; }
.form-control:focus,
.form-select:focus { border-color: #0e9f8f !important; }
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text { border-color: #0e9f8f !important; }
.form-check-input:checked { background-color: #0e9f8f; border-color: #0e9f8f; box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.form-check-input[type=checkbox]:indeterminate { background-color: #0e9f8f; border-color: #0e9f8f; box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.custom-option.checked { border: 1px solid #0e9f8f; }
.form-control:focus ~ .form-label { border-color: #0e9f8f; }
.divider.divider-primary .divider-text:before, .divider.divider-primary .divider-text:after { border-color: #0e9f8f; }
.navbar.bg-primary { background-color: rgba(14, 159, 143, 0.88) !important; }
.navbar.bg-primary .search-input-wrapper .search-input,
.navbar.bg-primary .search-input-wrapper .search-toggler { background-color: #0e9f8f !important; }
.menu.bg-primary { background-color: #0e9f8f !important; }
.menu.bg-primary .menu-inner-shadow { background: linear-gradient(#0e9f8f 41%, rgba(14, 159, 143, 0.11) 95%, rgba(14, 159, 143, 0)); }
@media (max-width: 1199.98px) {
  .app-brand .layout-menu-toggle { border: 7px solid #0e9f8f !important; }
}
.bg-primary.toast, .bg-primary.bs-toast { background-color: rgba(14, 159, 143, 0.85) !important; box-shadow: 0 0.25rem 1rem rgba(14, 159, 143, 0.4); }
.bg-primary.toast .toast-header .btn-close, .bg-primary.bs-toast .toast-header .btn-close { background-color: #0e9f8f !important; box-shadow: 0 0.1875rem 0.375rem 0 rgba(14, 159, 143, 0.4) !important; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:focus:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:focus:not(:placeholder-shown) ~ label { color: #0e9f8f; }
.svg-illustration svg { fill: #0e9f8f; }
html:not([dir=rtl]) .border-primary,
html[dir=rtl] .border-primary { border-color: #0e9f8f !important; }
a { color: #0e9f8f; }
.fill-primary { fill: #0e9f8f; }
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active:not(:has(.menu-sub)) .menu-icon { color: #0e9f8f; }
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link { color: #0e9f8f; background-color: rgba(14, 159, 143, 0.16) !important; }
.bg-menu-theme .menu-inner > .menu-item.active:before { background: #0e9f8f; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before { background-color: #0e9f8f !important; }
.app-brand .layout-menu-toggle { background-color: #0e9f8f; }
.bg-footer-theme .footer-link { color: #0e9f8f; }
.bg-footer-theme .footer-link:hover, .bg-footer-theme .footer-link:focus { color: #0e9f8f; }
.bg-footer-theme .show > .footer-link,
.bg-footer-theme .active > .footer-link,
.bg-footer-theme .footer-link.show,
.bg-footer-theme .footer-link.active { color: #0e9f8f; }
.bg-footer-theme hr { border-color: rgba(14, 159, 143, 0.075); }
.table { --bs-table-active-bg: rgba(14, 159, 143, 0.08); }
.form-control:focus { border-color: #0e9f8f; box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.form-select:focus { border-color: #0e9f8f; box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.form-check-input:checked { background-color: #0e9f8f; border-color: #0e9f8f; }
.form-check-input[type=checkbox]:indeterminate { background-color: #0e9f8f; border-color: #0e9f8f; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #f5f5f9, 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #f5f5f9, 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.form-range::-webkit-slider-thumb { background-color: #0e9f8f; }
.form-range::-webkit-slider-thumb:active { background-color: #0e9f8f; }
.form-range::-moz-range-thumb { background-color: #0e9f8f; }
.form-range::-moz-range-thumb:active { background-color: #0e9f8f; }
.dropdown-menu { --bs-dropdown-link-active-color: #0e9f8f; --bs-dropdown-link-active-bg: rgba(14, 159, 143, 0.16); }
.dropdown-menu-dark { --bs-dropdown-link-active-color: #0e9f8f; --bs-dropdown-link-active-bg: rgba(14, 159, 143, 0.16); }
.nav-tabs { --bs-nav-tabs-link-active-color: #0e9f8f; --bs-nav-tabs-link-active-border-color: #0e9f8f; }
.pagination { --bs-pagination-active-bg: #0e9f8f; --bs-pagination-active-border-color: #0e9f8f; }
.progress,
.progress-stacked { --bs-progress-bar-bg: #0e9f8f; }
.list-group { --bs-list-group-active-bg: rgba(14, 159, 143, 0.16); }
.text-paper[href]:hover, .text-paper[href]:focus { color: #0e9f8f !important; }
.nav-pills .nav-item .nav-link:not(.active):hover { background-color: rgba(14, 159, 143, 0.16); }
.nav-align-top .nav-tabs .nav-link:not(.active):hover { border-bottom: 2px solid rgba(14, 159, 143, 0.16) !important; }
.nav-align-right .nav-tabs .nav-link:not(.active):hover { border-left: 2px solid rgba(14, 159, 143, 0.16) !important; }
.nav-align-bottom .nav-tabs .nav-link:not(.active):hover { border-top: 2px solid rgba(14, 159, 143, 0.16) !important; }
.nav-align-left .nav-tabs .nav-link:not(.active):hover { border-right: 2px solid rgba(14, 159, 143, 0.16) !important; }
.form-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 8px rgba(14, 159, 143, 0.16); }
.form-range::-webkit-slider-thumb:active, .form-range::-webkit-slider-thumb:focus { box-shadow: 0 0 0 13px rgba(14, 159, 143, 0.16); border-color: #0e9f8f; }
.form-range::-webkit-slider-runnable-track { background-color: #0e9f8f; }
.form-range::-moz-range-thumb:hover { box-shadow: 0 0 0 8px rgba(14, 159, 143, 0.16); }
.form-range::-moz-range-thumb:active, .form-range::-moz-range-thumb:focus { box-shadow: 0 0 0 13px rgba(14, 159, 143, 0.16); border-color: #0e9f8f; }
.form-range::-moz-range-track { background-color: #0e9f8f; }
.input-group:focus-within { box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 159, 143, 0.4); }
.list-group .list-group-item.active h1,
.list-group .list-group-item.active .h1,
.list-group .list-group-item.active h2,
.list-group .list-group-item.active .h2,
.list-group .list-group-item.active h3,
.list-group .list-group-item.active .h3,
.list-group .list-group-item.active h4,
.list-group .list-group-item.active .h4,
.list-group .list-group-item.active h5,
.list-group .list-group-item.active .h5,
.list-group .list-group-item.active h6,
.list-group .list-group-item.active .h6 { color: #0e9f8f; }
.border-primary { border-color: #0e9f8f !important; }

/* ============================================================================
   3. BASE / TYPOGRAPHY / SCROLLBARS
   ============================================================================ */
html.light-style,
body {
  background-color: var(--ftk-bg) !important;
  color: var(--ftk-text-body);
}
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.container-p-y { background-color: transparent !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.text-heading, .card-title { color: var(--ftk-text) !important; }

.text-body            { color: var(--ftk-text-body) !important; }
.text-muted,
small.text-muted,
.text-secondary       { color: var(--ftk-muted) !important; }
p, label, .form-label { color: var(--ftk-text-body); }
a { color: var(--ftk-accent-deep); }
a:hover { color: var(--ftk-accent-strong); }
hr, .dropdown-divider { border-color: var(--ftk-border) !important; opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd2df; border-radius: 8px; border: 2px solid var(--ftk-bg); }
::-webkit-scrollbar-thumb:hover { background: #b7bdcd; }
* { scrollbar-color: #cdd2df transparent; }

/* Status text helpers (mockup: Completed=green, Pending=amber, Rejected=pink) */
.text-success { color: var(--ftk-green-ink)  !important; }
.text-info    { color: var(--ftk-blue-ink)   !important; }
.text-warning { color: var(--ftk-amber-ink)  !important; }
.text-danger  { color: var(--ftk-pink-ink)   !important; }
.text-primary { color: var(--ftk-accent-deep)  !important; }

/* ============================================================================
   4. SIDEBAR MENU
   ============================================================================ */
.bg-menu-theme,
.layout-menu,
.menu.bg-menu-theme { background-color: var(--ftk-surface) !important; }
.layout-menu { border-right: 1px solid var(--ftk-border-soft); box-shadow: none; }
.menu-inner-shadow { display: none !important; }

/* Brand block → real FTKBS "F" mark + wordmark (no button pill).
   Teal glyph + ink wordmark. The SVG's inline fill is overridden
   by the CSS `fill` property below. */
.layout-menu .app-brand { padding: 1.25rem 1.35rem 1rem; }
.layout-menu .app-brand-link {
  background: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
  gap: .6rem;
  justify-content: flex-start;
}
.layout-menu .app-brand-logo { display: block; }
.layout-menu .app-brand-logo svg { width: 30px; height: auto; }
.layout-menu .app-brand-logo svg path { fill: var(--ftk-accent); }
.layout-menu .app-brand-text {
  color: var(--ftk-text) !important;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: 1.12rem;
}
.layout-menu .layout-menu-toggle .bx { color: var(--ftk-muted) !important; }

/* Menu items */
.bg-menu-theme .menu-inner > .menu-item .menu-link { color: var(--ftk-muted); }
.bg-menu-theme .menu-inner > .menu-item .menu-link:hover,
.bg-menu-theme .menu-inner .menu-sub > .menu-item .menu-link:hover { color: var(--ftk-text); background-color: var(--ftk-surface-2); }
.bg-menu-theme .menu-inner .menu-sub > .menu-item .menu-link { color: var(--ftk-muted); }
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link { color: var(--ftk-accent-deep) !important; }
.bg-menu-theme .menu-inner > .menu-item.open > .menu-toggle { color: var(--ftk-text); }

/* Active leaf item → gold-tinted pill + left accent */
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--ftk-accent-soft);
  color: var(--ftk-accent-deep) !important;
  box-shadow: inset 3px 0 0 var(--ftk-accent);
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link.menu-toggle { background: transparent; }
.menu-icon { color: var(--ftk-muted); }
.menu-item.active .menu-icon,
.menu-item.open  .menu-icon { color: var(--ftk-accent-deep); }
.bg-menu-theme .menu-sub > .menu-item .menu-link::before { color: var(--ftk-faint); }

/* ============================================================================
   5. NAVBAR (top bar)
   ============================================================================ */
.bg-navbar-theme,
.layout-navbar { background-color: var(--ftk-surface) !important; box-shadow: none; }
.layout-navbar.navbar-detached {
  border: 1px solid var(--ftk-border-soft);
  border-radius: var(--ftk-radius);
  box-shadow: var(--ftk-shadow);
}
.layout-navbar .nav-item .bx,
.layout-navbar .nav-link { color: var(--ftk-text-body) !important; }
.layout-navbar h5, .layout-navbar h6 { color: var(--ftk-text) !important; }

/* ============================================================================
   6. FOOTER
   ============================================================================ */
.bg-footer-theme, .content-footer { background-color: transparent !important; }
.content-footer .text-body { color: var(--ftk-muted) !important; }

/* ============================================================================
   7. CARDS
   ============================================================================ */
.card {
  background-color: var(--ftk-surface) !important;
  color: var(--ftk-text-body);
  border: 1px solid var(--ftk-border-soft);
  border-radius: var(--ftk-radius);
  box-shadow: var(--ftk-shadow);
}
.card .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--ftk-border-soft);
  color: var(--ftk-text);
}
.card .card-header h1, .card .card-header h2, .card .card-header h3,
.card .card-header h4, .card .card-header h5, .card .card-footer { color: var(--ftk-text); }
.card .card-footer { background: transparent; border-top: 1px solid var(--ftk-border-soft); }

/* Optional stat/KPI accent — add class "ftk-kpi ftk-kpi-{green|blue|amber|pink|purple}" */
.ftk-kpi { border-left: 3px solid var(--ftk-border); }
.ftk-kpi-green  { border-left-color: var(--ftk-green);  }
.ftk-kpi-blue   { border-left-color: var(--ftk-blue);   }
.ftk-kpi-amber  { border-left-color: var(--ftk-amber);  }
.ftk-kpi-pink   { border-left-color: var(--ftk-pink);   }
.ftk-kpi-purple { border-left-color: var(--ftk-purple); }

/* Section label with gold marker — add class "ftk-section" to a heading */
.ftk-section { position: relative; padding-left: .85rem; }
.ftk-section::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 4px; border-radius: 4px; background: var(--ftk-accent);
}

/* ============================================================================
   8. FORMS & INPUTS
   ============================================================================ */
.form-control,
.form-select,
.input-group-text,
.dt-container .dt-search input,
.dt-container .dt-length select {
  background-color: var(--ftk-tint);
  border: 1px solid var(--ftk-border);
  color: var(--ftk-text);
}
.form-control::placeholder { color: var(--ftk-faint); }
.form-control:focus,
.form-select:focus {
  background-color: var(--ftk-surface);
  border-color: var(--ftk-accent);
  color: var(--ftk-text);
  box-shadow: 0 0 0 .18rem rgba(var(--ftk-accent-rgb), .28);
}
.form-control:disabled,
.form-control[readonly] { background-color: var(--ftk-surface-2); color: var(--ftk-muted); }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c7385' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.input-group-text { color: var(--ftk-muted); }
.input-group .input-group-text .bx { color: var(--ftk-muted); }

.form-check-input {
  background-color: var(--ftk-surface);
  border: 1px solid var(--ftk-border);
}
.form-check-input:checked { background-color: var(--ftk-accent); border-color: var(--ftk-accent); }
.form-check-input:checked[type=checkbox] { 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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); }
.form-check-input:focus { border-color: var(--ftk-accent); box-shadow: 0 0 0 .18rem rgba(var(--ftk-accent-rgb), .25); }
.form-check-label { color: var(--ftk-text-body); }

/* ============================================================================
   9. BUTTONS
   ============================================================================ */
.btn-primary {
  --bs-btn-bg: var(--ftk-accent);            --bs-btn-border-color: var(--ftk-accent);
  --bs-btn-color: var(--ftk-accent-ink);
  --bs-btn-hover-bg: var(--ftk-accent-strong);--bs-btn-hover-border-color: var(--ftk-accent-strong);
  --bs-btn-hover-color: var(--ftk-accent-ink);
  --bs-btn-active-bg: var(--ftk-accent-strong);--bs-btn-active-border-color: var(--ftk-accent-strong);
  --bs-btn-active-color: var(--ftk-accent-ink);
  --bs-btn-disabled-bg: var(--ftk-surface-3);--bs-btn-disabled-border-color: var(--ftk-surface-3);
  --bs-btn-disabled-color: var(--ftk-faint);
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(var(--ftk-accent-rgb), .28);
}
.btn-outline-primary {
  --bs-btn-color: var(--ftk-accent-deep);     --bs-btn-border-color: rgba(var(--ftk-accent-rgb), .7);
  --bs-btn-hover-bg: var(--ftk-accent);       --bs-btn-hover-border-color: var(--ftk-accent);
  --bs-btn-hover-color: var(--ftk-accent-ink);
  --bs-btn-active-bg: var(--ftk-accent);      --bs-btn-active-color: var(--ftk-accent-ink);
}
.btn-secondary {
  --bs-btn-bg: var(--ftk-surface-2);        --bs-btn-border-color: var(--ftk-border);
  --bs-btn-color: var(--ftk-text);
  --bs-btn-hover-bg: var(--ftk-surface-3);  --bs-btn-hover-border-color: var(--ftk-border);
  --bs-btn-hover-color: var(--ftk-text);
}
.btn-success { --bs-btn-bg: var(--ftk-green); --bs-btn-border-color: var(--ftk-green); --bs-btn-color:#fff; --bs-btn-hover-bg:#1c9a60; --bs-btn-hover-border-color:#1c9a60; --bs-btn-hover-color:#fff; }
.btn-info    { --bs-btn-bg: var(--ftk-blue);  --bs-btn-border-color: var(--ftk-blue);  --bs-btn-color:#fff; --bs-btn-hover-bg:#248cbe; --bs-btn-hover-border-color:#248cbe; --bs-btn-hover-color:#fff; }
.btn-warning { --bs-btn-bg: var(--ftk-amber); --bs-btn-border-color: var(--ftk-amber); --bs-btn-color: var(--ftk-accent-ink); --bs-btn-hover-bg:#cc961f; --bs-btn-hover-border-color:#cc961f; --bs-btn-hover-color:var(--ftk-accent-ink); }
.btn-danger  { --bs-btn-bg: var(--ftk-pink);  --bs-btn-border-color: var(--ftk-pink);  --bs-btn-color:#fff; --bs-btn-hover-bg:#e04a6f; --bs-btn-hover-border-color:#e04a6f; --bs-btn-hover-color:#fff; }
.btn-label-secondary,
.btn-outline-secondary { --bs-btn-color: var(--ftk-text-body); --bs-btn-border-color: var(--ftk-border); --bs-btn-hover-bg: var(--ftk-surface-2); --bs-btn-hover-color: var(--ftk-text); }

/* ============================================================================
   10. TABLES  (native + DataTables)
   ============================================================================ */
.table {
  --bs-table-bg: transparent;
  color: var(--ftk-text-body);
  border-color: var(--ftk-border-soft);
}
/* Softened header: pale teal wash, ink text, teal underline (was a solid
   teal fill — too loud). Keeps the accent as an accent, not a banner. */
.table > thead > tr > th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  background: var(--ftk-accent-soft);
  color: var(--ftk-text);
  border-bottom: 2px solid var(--ftk-accent);
  font-weight: 700;
  text-transform: none;
  vertical-align: middle;
}

/* --- Consistent table container ---------------------------------------------
   A .table-responsive box reads as a card wherever the page doesn't already give
   one, and stays flat when it IS already inside a real .card (no double frame).
   Horizontal overflow is owned by DataTables scrollX or .table-responsive, so
   wide tables scroll inside this container, never the page. */
.table-responsive {
  background: var(--ftk-surface);
  border: 1px solid var(--ftk-border-soft);
  border-radius: var(--ftk-radius);
  box-shadow: var(--ftk-shadow);
  padding: .85rem 1rem;
}
.card .table-responsive,
.table-responsive .table-responsive {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
  border-color: var(--ftk-border-soft);
  color: var(--ftk-text-body);
}
.table > tbody > tr,
table.dataTable > tbody > tr { background-color: var(--ftk-surface); }
.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * { background-color: var(--ftk-tint); }
.table-hover > tbody > tr:hover > *,
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * { background-color: var(--ftk-surface-3); color: var(--ftk-text); }
.table > :not(caption) > * > * { box-shadow: none; }

/* DataTables chrome (DataTables 2.x class names: dt-length / dt-search / dt-info /
   dt-processing / dt-paging + button.dt-paging-button. Selectors mirror DT2's own
   shape so specificity matches; redesign.css loads after the DT CDN CSS, so these
   win on ties.) */
div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing { color: var(--ftk-muted); }
div.dt-container div.dt-paging .dt-paging-button {
  color: var(--ftk-text-body) !important;
  background: var(--ftk-surface);
  border: 1px solid var(--ftk-border) !important;
  border-radius: var(--ftk-radius-sm);
}
div.dt-container div.dt-paging .dt-paging-button.current,
div.dt-container div.dt-paging .dt-paging-button.current:hover {
  background: var(--ftk-accent) !important;
  color: var(--ftk-accent-ink) !important;
  border-color: var(--ftk-accent) !important;
}
div.dt-container div.dt-paging .dt-paging-button:hover {
  background: var(--ftk-surface-2) !important;
  color: var(--ftk-text) !important;
}
div.dt-container div.dt-paging .dt-paging-button.disabled { color: var(--ftk-faint) !important; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::after { opacity: .6; }
div.dt-buttons .dt-button,
.dt-button {
  background: var(--ftk-surface) !important;
  color: var(--ftk-text-body) !important;
  border: 1px solid var(--ftk-border) !important;
  border-radius: var(--ftk-radius-sm);
}
div.dt-buttons .dt-button:hover { background: var(--ftk-surface-2) !important; color: var(--ftk-text) !important; }

/* ============================================================================
   11. BADGES / ALERTS / PROGRESS / DROPDOWN / LIST-GROUP / MODAL / TOAST
   ============================================================================ */
.badge.bg-label-success, .badge.bg-success { background-color: rgba(var(--ftk-green-rgb), .14) !important; color: var(--ftk-green-ink) !important; }
.badge.bg-label-info,    .badge.bg-info    { background-color: rgba(var(--ftk-blue-rgb),  .14) !important; color: var(--ftk-blue-ink)  !important; }
.badge.bg-label-warning, .badge.bg-warning { background-color: rgba(var(--ftk-amber-rgb), .16) !important; color: var(--ftk-amber-ink) !important; }
.badge.bg-label-danger,  .badge.bg-danger  { background-color: rgba(var(--ftk-pink-rgb),  .14) !important; color: var(--ftk-pink-ink)  !important; }
.badge.bg-label-primary, .badge.bg-primary { background-color: var(--ftk-accent-soft) !important; color: var(--ftk-accent-deep) !important; }

.alert-success { background: rgba(var(--ftk-green-rgb), .12); color: var(--ftk-green-ink); border-color: rgba(var(--ftk-green-rgb), .28); }
.alert-info    { background: rgba(var(--ftk-blue-rgb),  .12); color: var(--ftk-blue-ink);  border-color: rgba(var(--ftk-blue-rgb),  .28); }
.alert-warning { background: rgba(var(--ftk-amber-rgb), .14); color: var(--ftk-amber-ink); border-color: rgba(var(--ftk-amber-rgb), .3); }
.alert-danger  { background: rgba(var(--ftk-pink-rgb),  .12); color: var(--ftk-pink-ink);  border-color: rgba(var(--ftk-pink-rgb),  .28); }

.progress { background-color: var(--ftk-surface-2); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--ftk-accent), var(--ftk-accent-strong)); color: var(--ftk-accent-ink); }

.dropdown-menu {
  background-color: var(--ftk-surface);
  border: 1px solid var(--ftk-border);
  box-shadow: var(--ftk-shadow-lg);
  color: var(--ftk-text-body);
}
.dropdown-item { color: var(--ftk-text-body); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ftk-surface-2); color: var(--ftk-text); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--ftk-accent); color: var(--ftk-accent-ink); }
.dropdown-header { color: var(--ftk-muted); }

.list-group { --bs-list-group-bg: var(--ftk-surface); --bs-list-group-color: var(--ftk-text-body); --bs-list-group-border-color: var(--ftk-border-soft); --bs-list-group-action-hover-bg: var(--ftk-surface-2); --bs-list-group-action-hover-color: var(--ftk-text); }

.modal-content, .offcanvas {
  background-color: var(--ftk-surface);
  color: var(--ftk-text-body);
  border: 1px solid var(--ftk-border);
}
.modal-header, .offcanvas-header { border-bottom: 1px solid var(--ftk-border-soft); }
.modal-footer { border-top: 1px solid var(--ftk-border-soft); }
.modal-title, .offcanvas-title { color: var(--ftk-text); }

.toast { background-color: var(--ftk-surface); color: var(--ftk-text-body); border: 1px solid var(--ftk-border); }
.toast-header { background-color: var(--ftk-surface-2); color: var(--ftk-text); border-bottom: 1px solid var(--ftk-border-soft); }

.nav-tabs { border-bottom-color: var(--ftk-border); }
.nav-tabs .nav-link { color: var(--ftk-muted); }
.nav-tabs .nav-link.active { color: var(--ftk-accent-deep); background: transparent; border-color: transparent transparent var(--ftk-accent); }

/* ============================================================================
   12. THIRD-PARTY WIDGETS
   ============================================================================ */

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--ftk-tint) !important;
  border: 1px solid var(--ftk-border) !important;
  color: var(--ftk-text);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ftk-text) !important; line-height: 2.4rem; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ftk-faint) !important; }
.select2-dropdown { background-color: var(--ftk-surface) !important; border: 1px solid var(--ftk-border) !important; }
.select2-container--default .select2-results__option { color: var(--ftk-text-body); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--ftk-accent) !important; color: var(--ftk-accent-ink) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--ftk-tint); border: 1px solid var(--ftk-border); color: var(--ftk-text); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--ftk-accent-soft); border-color: rgba(var(--ftk-accent-rgb), .4); color: var(--ftk-accent-deep); }

/* bootstrap-select */
.bootstrap-select > .dropdown-toggle { background: var(--ftk-tint) !important; border: 1px solid var(--ftk-border) !important; color: var(--ftk-text) !important; }
.bootstrap-select .dropdown-menu { background: var(--ftk-surface); }

/* daterangepicker */
.daterangepicker { background: var(--ftk-surface); border: 1px solid var(--ftk-border); color: var(--ftk-text-body); box-shadow: var(--ftk-shadow-lg); }
.daterangepicker .calendar-table { background: var(--ftk-surface); border-color: var(--ftk-surface); }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--ftk-surface-2); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--ftk-accent); color: var(--ftk-accent-ink); }
.daterangepicker td.in-range { background: var(--ftk-accent-soft); color: var(--ftk-accent-ink); }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background: var(--ftk-surface); color: var(--ftk-faint); }
.daterangepicker:after { border-bottom-color: var(--ftk-surface); }
.daterangepicker:before { border-bottom-color: var(--ftk-border); }
.daterangepicker .drp-buttons { border-top-color: var(--ftk-border); }
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect { background: var(--ftk-tint); color: var(--ftk-text); border-color: var(--ftk-border); }

/* CodeMirror */
.CodeMirror { background: var(--ftk-tint) !important; color: var(--ftk-text) !important; border: 1px solid var(--ftk-border); border-radius: var(--ftk-radius-sm); }
.CodeMirror-gutters { background: var(--ftk-surface-2) !important; border-right: 1px solid var(--ftk-border); }
.CodeMirror-cursor { border-left-color: var(--ftk-accent-strong) !important; }

/* Leaflet popups / controls */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ftk-surface); color: var(--ftk-text-body); box-shadow: var(--ftk-shadow); }
.leaflet-bar a { background: var(--ftk-surface); color: var(--ftk-text); border-bottom-color: var(--ftk-border); }
.leaflet-bar a:hover { background: var(--ftk-surface-2); }

/* jQuery UI (autocomplete menus) */
.ui-widget-content { background: var(--ftk-surface); color: var(--ftk-text-body); border: 1px solid var(--ftk-border); box-shadow: var(--ftk-shadow); }
.ui-menu .ui-menu-item-wrapper.ui-state-active { background: var(--ftk-accent); color: var(--ftk-accent-ink); border-color: var(--ftk-accent); }

/* Spinners keep accent */
.spinner-grow.text-success, .spinner-border.text-success { color: var(--ftk-green) !important; }

/* ============================================================================
   13. AUTH PAGES  (login / register / forgot / set-password)
   ============================================================================ */
.authentication-wrapper {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(var(--ftk-accent-rgb), .14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(var(--ftk-purple-rgb), .10), transparent 55%),
    var(--ftk-bg);
}
.authentication-wrapper.authentication-basic .authentication-inner .card {
  background: var(--ftk-surface) !important;
  border: 1px solid var(--ftk-border-soft);
  border-radius: var(--ftk-radius);
  box-shadow: var(--ftk-shadow-lg);
}
.authentication-wrapper.authentication-basic .authentication-inner:before,
.light-style .authentication-wrapper.authentication-basic .authentication-inner:before,
.authentication-wrapper.authentication-basic .authentication-inner:after,
.light-style .authentication-wrapper.authentication-basic .authentication-inner:after { display: none !important; }
.authentication-wrapper .app-brand-logo.demo svg path { fill: var(--ftk-accent) !important; }
.authentication-wrapper .app-brand-text { color: var(--ftk-text) !important; }
.authentication-wrapper .card-body > h4 { color: var(--ftk-text) !important; }

/* ============================================================================
   14. MISC PAGES  (404 / maintenance)
   ============================================================================ */
.misc-wrapper h1, .misc-wrapper h2, .misc-wrapper h3, .misc-wrapper h4 { color: var(--ftk-text) !important; }
.misc-wrapper p { color: var(--ftk-muted); }

/* ============================================================================
   15. DASHBOARD 2  (Figma BI redesign helpers)
   ============================================================================ */
.ftk-kpi-num { font-size: 1.95rem; font-weight: 800; color: var(--ftk-text); line-height: 1; font-variant-numeric: tabular-nums; }
.ftk-kpi-lbl { color: var(--ftk-muted); font-size: .88rem; margin-top: .4rem; }

.ftk-acc-row + .ftk-acc-row { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--ftk-border-soft); }
.ftk-acc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.ftk-acc-stage { font-weight: 700; color: var(--ftk-accent-deep); background: var(--ftk-accent-soft); border-radius: 7px; padding: .18rem .7rem; font-size: .8rem; letter-spacing: .02em; }
.ftk-acc-pct { font-weight: 800; color: var(--ftk-text); font-variant-numeric: tabular-nums; }
.ftk-acc-legend { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: .6rem; font-size: .82rem; font-weight: 600; }
.ftk-acc-legend a, .ftk-acc-legend span { color: var(--ftk-text); }
.ftk-acc-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }

/* ============================================================================
   16. LAYOUT POLISH  (basic cleaning: consistent cards, spacing, labels)
   ============================================================================ */
/* Card header + title rhythm — consistent across every card. */
.card > .card-header { padding: 1.15rem 1.5rem; }
.card > .card-header h5,
.card > .card-header .card-title { font-size: 1.05rem; font-weight: 700; margin: 0; }

/* Form labels: consistent weight/size, calm colour, tidy gap to the field. */
.form-label, .col-form-label { font-weight: 500; font-size: .85rem; color: var(--ftk-text-body); margin-bottom: .4rem; }

/* Inline section sub-titles that pages render as bare <h3>. */
#createPODiv h3, #modifyPODiv h3, #tabsContainer h3,
.card h3.section-title { font-size: 1.05rem; font-weight: 700; color: var(--ftk-text); margin-bottom: 1rem; }

/* Bare-content pages -> framed as cards (no markup change; these wrapper divs
   previously sat directly on the page background, out of step with the rest
   of the app). Add Data (createPODiv / modifyPODiv) and Site Manager's tab
   editor (tabsContainer). */
#createPODiv, #modifyPODiv, #tabsContainer {
  background: var(--ftk-surface);
  border: 1px solid var(--ftk-border-soft);
  border-radius: var(--ftk-radius);
  box-shadow: var(--ftk-shadow);
  padding: 1.5rem;
}
#tabsContainer { margin-top: 1.25rem; }

/* Site Manager map: match the card radius/border. */
#map { border-radius: var(--ftk-radius); border: 1px solid var(--ftk-border-soft); overflow: hidden; }
#map-legend { margin-top: .85rem !important; }
.legend-item { font-size: .85rem; color: var(--ftk-text-body); }
.legend-item .bx { border-radius: 6px; padding: .15rem; margin-right: .3rem; }

/* Progress Overview — planned-vs-actual schedule bar */
.ov-bar { position: relative; height: 14px; min-width: 180px; }
.ov-plan { position: absolute; top: 3px; bottom: 3px; background: var(--ftk-surface-3); border-radius: 4px; }
.ov-act  { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.ov-act.work { background: var(--ftk-blue); }
.ov-act.done { background: var(--ftk-green); }
.ov-act.hold { background: var(--ftk-amber); }
.ov-act.late { background: var(--ftk-pink); }

/* Admin domain-page section tabs (visible switcher, driven by admin-tabs.js) */
/* Breathing room between a card header and its body — the base theme renders
   the two flush against the header divider. Applies to every card app-wide. */
.card > .card-header + .card-body { padding-top: 1rem !important; }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--ftk-border-soft);
  padding-bottom: 1rem;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ftk-text-body);
  background: var(--ftk-tint);
  border: 1px solid var(--ftk-border);
  border-radius: var(--ftk-radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.admin-tab:hover { background: var(--ftk-surface-3); color: var(--ftk-text); }
.admin-tab.active { background: var(--ftk-accent); border-color: var(--ftk-accent); color: #fff; }
.admin-tab.active:hover { color: #fff; }

/* Clickable KPI cards (dashboard drill-down to the filtered Site Summary) */
.ftk-drill { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ftk-drill:hover { transform: translateY(-2px); box-shadow: var(--ftk-shadow); }

/* Acceptance Overview legend segments that drill into the Site Summary */
.ftk-acc-link { text-decoration: none; cursor: pointer; }
.ftk-acc-link:hover { text-decoration: underline; }

/* Summary/Snag-Summary site cell -> opens the site in Site Manager */
td.site-link { cursor: pointer; color: var(--ftk-accent-deep); font-weight: 600; }
td.site-link:hover { text-decoration: underline; }

/* ============================================================================
   Consistent "viewing table" chrome — one look for every DataTable across the
   app: tables fill their card, the length menu / info / paging get breathing
   room, and the per-column filter dropdowns line up tidily. Paging + page-length
   and the per-column filters are set per table in JS (dom:"lrtip", no global
   search); this file owns the layout/spacing so they all match.
   ============================================================================ */
.dt-container table.dataTable { min-width: 100%; margin: 0 !important; }
.dt-container .dt-length {
  font-size: .85rem;
  color: var(--ftk-muted);
}
.dt-container .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
}
.dt-container .dt-length select {
  margin: 0;
  min-width: 4.5rem;
}
.dt-container .dt-info { font-size: .82rem; }
/* Legacy dom:"lrtip" tables render dt-length / dt-info / dt-paging as bare direct
   children of dt-container with no dt-layout-row wrapper, so the length menu butts
   against the table and info/paging sit tight. Add the gaps DT2's default layout
   gives for free. The child combinator scopes this to legacy-dom tables only:
   a default-layout table (Settlements -> Records) nests these in a dt-layout-cell
   and keeps its native spacing, so it doesn't double up. */
.dt-container > .dt-length { margin-bottom: 1rem; }
.dt-container > .dt-info { padding-top: 1rem; }
.dt-container > .dt-paging { padding-top: 1rem; }
/* per-column filter dropdowns in the header sit flush and legible */
.table-column-filter + .dropdown-toggle.btn,
button.dropdown-toggle[data-id],
.bootstrap-select.table-column-filter > .dropdown-toggle { min-width: 6.5rem; }
table.dataTable thead th { vertical-align: middle; }
table.dataTable thead th .bootstrap-select { margin: 0; }