/* ============================================================================
   STEADKRAFT THEME  —  RISE CRM v3.9.6 (CodeIgniter 4) brand overhaul
   ----------------------------------------------------------------------------
   Load order (app/Views/includes/head.php):
     bootstrap.min.css -> select2 -> app.all.css -> THIS FILE -> custom-style.css
   So we beat app.all.css by source order; !important is used ONLY where
   app.all.css already declares !important or where Bootstrap/vendor wins on
   equal specificity.

   Brand chrome  = NAVY   (#1f2a44 family)
   Primary CTA   = ORANGE (#e8722a family)

   Legacy palette being displaced:
     #6690F4 (royal blue accent), #4e5e6a (muddy text), #f1f1f5 / #f9f9f9
     (borders/fills), #00b393, #485BBD, #0abb87, #f5325c, #ffb822, #38a4f8.

   Integration with the runtime theme-color picker: color/<CODE>.css can be
   injected AFTER this file. For single-source brand control set
   default_theme_color = "F2F2F2" (no color file injected) and hide the picker
   (show_theme_color_changer != "yes"). This file then owns every accent at
   equal specificity + later source order.

   Geometry that MUST be preserved (do not change): sidebar 250px / collapsed
   70px, topbar 66px / content offset 65px, breakpoints 991px & 990px, mobile
   bottom menu < 576px. We only polish color / type / spacing / radius /
   borders / shadows / states.
   ============================================================================ */


/* ============================================================================
   0. BRAND FONT — Inter (self-hosted: one typeface across the whole ERP)
   Loaded from local files so the UI never depends on the Google Fonts CDN and
   matches every print/export document exactly. Files: assets/css/fonts/inter/.
   ============================================================================ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter/inter-regular.woff2') format('woff2'), url('fonts/inter/inter-regular.woff') format('woff'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter/inter-500.woff2') format('woff2'), url('fonts/inter/inter-500.woff') format('woff'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter/inter-600.woff2') format('woff2'), url('fonts/inter/inter-600.woff') format('woff'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter/inter-700.woff2') format('woff2'), url('fonts/inter/inter-700.woff') format('woff'); }

/* Single source of truth for the brand typeface + base type scale. */
:root { --sk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
body, .navbar, .sidebar, .btn, .form-control, .form-select, input, select, textarea, button,
table, .table, .dataTables_wrapper, .select2-container, .modal, .swal2-popup, h1,h2,h3,h4,h5,h6, label {
  font-family: var(--sk-font) !important;
}

/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
  /* --- Navy (chrome) --- */
  --sk-navy:            #1f2a44;
  --sk-navy-darker:     #141d30;
  --sk-navy-deepest:    #0f1626;
  --sk-navy-mid:        #283755;
  --sk-navy-mid2:       #324264;
  --sk-navy-soft:       #3d4f73;
  --sk-navy-text:       #aeb7c7;   /* idle sidebar text on navy */

  /* --- Orange (accent / CTA) --- */
  --sk-orange:          #e8722a;
  --sk-orange-hover:    #d4631f;
  --sk-orange-deep:     #c25e22;
  --sk-orange-tint:     #fbe9dd;
  --sk-orange-tint2:    #fdf2ea;

  /* --- Surfaces --- */
  --sk-bg:              #f4f6fa;   /* app canvas */
  --sk-surface:         #ffffff;   /* cards / panels */
  --sk-surface-soft:    #f7f9fc;   /* hover surface / table head */
  --sk-surface-soft2:   #f9fafc;   /* card footer */
  --sk-border:          #e3e8f0;
  --sk-divider:         #eef1f6;

  /* --- Text --- */
  --sk-text:            #1c2433;
  --sk-muted:           #6b7686;
  --sk-heading:         #1f2a44;

  /* --- Semantic --- */
  --sk-success:         #1f9d6b;
  --sk-warning:         #e0a400;
  --sk-danger:          #d8442f;
  --sk-info:            #2f7ec2;
  --sk-link:            #2f7ec2;

  /* semantic soft tints (pills / alerts) */
  --sk-success-tint:    #e7f5ef;
  --sk-warning-tint:    #fbf3da;
  --sk-danger-tint:     #fbe7e4;
  --sk-info-tint:       #e6f0f9;

  /* --- Radius --- (overhaul v2: softer, more contemporary) --- */
  --sk-radius-card:     14px;
  --sk-radius-control:  9px;
  --sk-radius-pill:     999px;

  /* --- Shadows (overhaul v2: layered, airier) --- */
  --sk-shadow-sm:       0 1px 2px rgba(20,29,48,.05), 0 1px 3px rgba(20,29,48,.04);
  --sk-shadow-md:       0 2px 6px rgba(20,29,48,.05), 0 10px 26px rgba(20,29,48,.07);
  --sk-shadow-lg:       0 12px 44px rgba(20,29,48,.20);
  --sk-shadow-up:       0 -2px 12px rgba(20,29,48,.07);
  --sk-shadow-hover:    0 6px 14px rgba(20,29,48,.07), 0 18px 40px rgba(20,29,48,.12);

  /* --- Focus ring --- */
  --sk-ring-orange:     0 0 0 3px rgba(232,114,42,.18);
  --sk-ring-danger:     0 0 0 3px rgba(216,68,47,.14);

  /* --- Motion --- */
  --sk-ease:            150ms ease;
  --sk-ease-fast:       130ms ease;

  /* --- Spacing scale --- */
  --sk-space-1:         4px;
  --sk-space-2:         8px;
  --sk-space-3:         12px;
  --sk-space-4:         16px;
  --sk-space-5:         20px;
  --sk-space-6:         24px;

  /* Hook Bootstrap's own variables so component internals follow the brand */
  --bs-primary:         #e8722a;
  --bs-primary-rgb:     232,114,42;
  --bs-link-color:      #2f7ec2;
  --bs-link-hover-color:#1f2a44;
  --bs-border-radius:   7px;
  --bs-body-color:      #1c2433;
}


/* ============================================================================
   2. TYPOGRAPHY & GLOBAL FOUNDATIONS
   ============================================================================ */
html,
body {
  background-color: var(--sk-bg);
  color: var(--sk-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-body-color: var(--sk-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sk-heading);
  font-weight: 600;            /* overrides app.all.css h1-h4 {font-weight:normal} */
}

p, li, td, th, label {
  color: inherit;
}

a {
  color: var(--sk-link);
  transition: color var(--sk-ease);
}
a:hover, a:active, a:focus {
  color: var(--sk-navy);
}
a.link { color: var(--sk-link); }
a.link:hover { color: var(--sk-navy); }

hr { border-color: var(--sk-divider); }

/* Accessible focus — only for keyboard users, never kills layout */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.form-check-input:focus-visible,
.sidebar-menu li a:focus-visible {
  outline: 2px solid var(--sk-orange);
  outline-offset: 2px;
}

/* Brand utility helpers (reuse navy/orange where markup already provides them) */
.bg-primary {
  background-color: var(--sk-orange) !important;   /* app.all.css uses !important */
  color: #fff !important;
}
.text-primary { color: var(--sk-orange) !important; }
.bg-navy { background-color: var(--sk-navy) !important; color: #fff !important; }
.text-navy { color: var(--sk-navy) !important; }


/* ============================================================================
   3. SCROLLBARS  (native webkit + Perfect-Scrollbar)
   ============================================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(31, 42, 68, .25);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: rgba(31, 42, 68, .42);
}

/* Sidebar lives on navy — give its scrollbar a light thumb */
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .35);
}

/* Perfect-Scrollbar thumbs */
.ps__thumb-x,
.ps__thumb-y {
  background-color: var(--sk-navy-soft);
}
.ps:hover > .ps__rail-x > .ps__thumb-x,
.ps:hover > .ps__rail-y > .ps__thumb-y,
.ps--focus > .ps__rail-x > .ps__thumb-x,
.ps--focus > .ps__rail-y > .ps__thumb-y,
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-y:hover > .ps__thumb-y {
  background-color: var(--sk-navy-mid2);
}


/* ============================================================================
   4. NAVIGATION SHELL — TOP BAR
   (selectors: .navbar-custom, .navbar-nav .nav-link, #user-dropdown,
    .user-name, .notification-badge-container, dropdowns)
   ============================================================================ */
.navbar-custom {
  background: var(--sk-surface);
  border-bottom: 1px solid var(--sk-border);
  box-shadow: var(--sk-shadow-sm);
}

/* Topbar icon links — .nav-link color carries !important in app.all.css */
.navbar-nav .nav-link {
  color: var(--sk-muted) !important;
  transition: color var(--sk-ease), background-color var(--sk-ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--sk-navy) !important;
}
.navbar-nav .nav-link .icon {
  transition: transform var(--sk-ease);
}
.navbar-nav .nav-link:hover .icon {
  transform: translateY(-1px);
}

.user-name {
  color: var(--sk-text);
  font-weight: 600;
}

/* Avatar ring */
.avatar,
.avatar-xs {
  box-shadow: 0 0 0 1px var(--sk-border), var(--sk-shadow-sm);
}
.avatar img,
.avatar-xs img {
  border-radius: 50%;
}

/* Notification badge pill (markup injected by JS) */
.notification-badge-container,
.notification-badge-container .badge,
.notification-badge-container > span,
#web-notification-icon .badge {
  background-color: var(--sk-danger) !important;
  color: #fff !important;
  border-radius: var(--sk-radius-pill);
  font-weight: 600;
}


/* ============================================================================
   5. NAVIGATION SHELL — LEFT SIDEBAR (navy chrome)
   (selectors: .sidebar, .sidebar-brand, .sidebar-scroll, #sidebar-menu,
    .sidebar-menu li a, li.active > a, submenu, expand chevron, badges)
   ============================================================================ */
.sidebar {
  background: var(--sk-navy);
  border-right: 1px solid var(--sk-navy-darker);
}
.sidebar-brand {
  background-color: var(--sk-navy-darker);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sidebar-scroll {
  background: var(--sk-navy);
}

/* Menu items */
.sidebar-menu li a {
  color: var(--sk-navy-text);
  border-radius: var(--sk-radius-control);     /* was 3px */
  transition: color var(--sk-ease), background-color var(--sk-ease);
}
.sidebar-menu li a .icon,
.sidebar-menu li a [data-feather] {
  color: var(--sk-navy-text);
}
.sidebar-menu li a:hover,
.sidebar-menu li a:active,
.sidebar-menu li a:focus {
  color: #ffffff;
  background-color: var(--sk-navy-mid);
}
.sidebar-menu li a:hover .icon,
.sidebar-menu li a:focus .icon {
  color: #ffffff;
}

/* Active item — replaces the off-brand #6690F4 fill.
   Navy fill + orange left rail = refined enterprise look.
   app.all.css uses !important on color, so we match it. */
.sidebar-menu li.active > a {
  color: #ffffff !important;
  background-color: var(--sk-navy-mid);
  box-shadow: inset 3px 0 0 var(--sk-orange);
}
.sidebar-menu li.active > a .icon,
.sidebar-menu li.active > a [data-feather] {
  color: #ffffff;
}

/* Submenu links */
.sidebar-menu li ul li a {
  color: var(--sk-navy-text);
}
.sidebar-menu li ul li a:hover,
.sidebar-menu li ul li a:focus {
  color: #ffffff;
  background-color: var(--sk-navy-mid);
}

/* Expand chevron (CSS-border arrow) — explicit light color so it reads on navy */
#sidebar-menu li.expand > a::before,
#sidebar-menu li.expand.open > a::before {
  border-color: var(--sk-navy-text);
}

/* Sidebar badges -> semantic pills */
.sidebar-menu .badge {
  border-radius: var(--sk-radius-pill);
  font-weight: 600;
}

/* Collapsed sidebar (>=991px) hover fly-out: was white, retone to navy
   so it doesn't flash white against the navy rail. */
.sidebar-toggled .sidebar-menu li:hover {
  background-color: var(--sk-navy-mid);
}
.sidebar-toggled .sidebar-menu li:hover > a {
  box-shadow: var(--sk-shadow-md) !important;   /* app.all.css declares !important */
}
.sidebar-toggled .sidebar-menu li ul {
  background-color: var(--sk-navy-mid);
  color: var(--sk-navy-text);
  border-radius: var(--sk-radius-control);
  box-shadow: var(--sk-shadow-md);
}


/* ============================================================================
   6. PAGE CONTAINER / CONTENT WRAPPER  (geometry untouched)
   ============================================================================ */
.page-container {
  background: var(--sk-bg);
}
.page-content {
  color: var(--sk-text);
}


/* ============================================================================
   7. PAGE TITLE  (.page-title, h1, .title-button-group)
   ============================================================================ */
.page-title {
  background: var(--sk-surface);
  border-bottom: 1px solid var(--sk-border);
  color: var(--sk-heading);
  border-radius: var(--sk-radius-card) var(--sk-radius-card) 0 0;
}
.page-title h1 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sk-heading);
}
.page-title h1 svg {
  color: var(--sk-orange);
}


/* ============================================================================
   8. MOBILE BOTTOM MENU
   ============================================================================ */
.mobile-bottom-menu {
  border-top: 1px solid var(--sk-border);
  box-shadow: var(--sk-shadow-up);
}
.mobile-bottom-menu .menu-item {
  color: var(--sk-muted);
}
.mobile-bottom-menu .menu-item .icon,
.mobile-bottom-menu .menu-item svg {
  color: var(--sk-muted);
  transition: color var(--sk-ease), transform var(--sk-ease);
}
.mobile-bottom-menu .menu-item:hover .icon,
.mobile-bottom-menu .menu-item.active .icon,
.mobile-bottom-menu .menu-item:active .icon {
  color: var(--sk-navy);
}


/* ============================================================================
   9. DROPDOWN MENUS  (user / notification / language / action menus)
   ============================================================================ */
.dropdown-menu {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-md);
}
.dropdown-item {
  color: var(--sk-text);
  transition: background-color var(--sk-ease), color var(--sk-ease);
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  color: var(--sk-orange-deep);
  background-color: var(--sk-orange-tint2);
}
.dropdown-divider {
  border-top-color: var(--sk-divider);
}


/* ============================================================================
   10. CARDS / PANELS
   ============================================================================ */
.card {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-sm) !important;   /* app strips card shadow with !important */
  transition: box-shadow var(--sk-ease), border-color var(--sk-ease); /* kill the 1s transition */
}
.card .card-header,
.card .card-header:first-child,
.bg-white .card-header {
  background-color: var(--sk-surface);
  border-bottom: 1px solid var(--sk-divider);
  border-color: var(--sk-divider);
  color: var(--sk-heading);
  font-weight: 600;
  padding: 13px 18px;
}
.card .card-header:first-child {
  border-radius: var(--sk-radius-card) var(--sk-radius-card) 0 0;
}
.card .card-header h6 {
  color: var(--sk-heading);
  font-weight: 600;
}
.card .card-body {
  padding: 16px 18px;
}
.card-footer {
  background-color: var(--sk-surface-soft2);
  border-top: 1px solid var(--sk-divider);
  border-radius: 0 0 var(--sk-radius-card) var(--sk-radius-card);
}
/* List / detail cards welded onto a tab strip keep their square top */
.card.border-top-0.rounded-top-0,
.card.rounded-top-0 {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--sk-radius-card);
  border-bottom-right-radius: var(--sk-radius-card);
}
/* Header kebab / action menu trigger */
.card .card-header .action-option,
.action-option {
  color: var(--sk-muted);
  transition: color var(--sk-ease);
}
.card .card-header .action-option:hover,
.action-option:hover {
  color: var(--sk-orange);
}


/* ============================================================================
   11. DATATABLES & .table
   ============================================================================ */
/* Header */
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--sk-surface-soft);
  color: var(--sk-heading);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .2px;
  border-top-color: var(--sk-divider);
  border-bottom-color: var(--sk-border);
}
/* Sort-arrow masks are colored via background-color on the order markers */
table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after {
  background-color: var(--sk-muted);
}

/* Body */
table.dataTable tbody td {
  color: var(--sk-text);
}
table.dataTable,
table.dataTable tbody tr,
table.dataTable tbody td {
  border-color: var(--sk-divider);
}
table.dataTable {
  border-bottom-color: var(--sk-border);
}

/* Row hover — app.all.css forces #f9f9f9 with !important */
.dataTable:not(.js-selection-mode) tbody tr:hover td {
  background: var(--sk-surface-soft) !important;
}

/* Active / selected row — replace #6690F4 with navy. app.all.css uses !important. */
.dataTable:not(.js-selection-mode) tbody tr.active td,
.dataTable:not(.js-selection-mode) tbody tr.active:hover td {
  background: var(--sk-navy) !important;
  color: #fff !important;
}
table.dataTable tbody tr.active td a,
table.dataTable tbody tr.active td a.link,
table.dataTable tbody tr.active td .text-default {
  color: #fff !important;
}
/* badge inside an active (navy) row */
.dataTable:not(.js-selection-mode) tbody tr.active .badge {
  background-color: #ffffff !important;
  color: var(--sk-navy) !important;
}

/* Responsive child-row control chevron + expanded child */
table.dataTable.dtr-inline.collapsed tbody tr td.dtr-control::before,
table.dataTable td.dt-control::before {
  border-left-color: var(--sk-muted) !important;
}
table.dataTable tr.dt-hasChild td.dt-control::before {
  border-top-color: var(--sk-muted) !important;
}
table.dataTable.dtr-inline.collapsed tbody tr td.child {
  background: var(--sk-surface-soft);
}

/* Wrapper: length / search inputs */
div.dt-container div.dt-length select,
div.dt-container div.dt-search input,
.filter-section-right .filter-item-box .dt-search .form-control {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-control);
  color: var(--sk-text);
  transition: border-color var(--sk-ease), box-shadow var(--sk-ease);
}
div.dt-container div.dt-length select:focus,
div.dt-container div.dt-search input:focus,
.filter-section-right .filter-item-box .dt-search .form-control:focus {
  border-color: var(--sk-orange);
  box-shadow: var(--sk-ring-orange);
  outline: none;
}

/* Info text */
.dt-container .dt-info,
div.dt-container div.dt-info {
  color: var(--sk-muted);
}

/* Pagination — Bootstrap .page-link/.page-item, not overridden by RISE */
.dt-container .dt-paging .page-link,
.dt-container .dt-paging ul.pagination .page-link,
.pagination .page-link {
  color: var(--sk-navy);
  border-color: var(--sk-border);
  border-radius: var(--sk-radius-control);
  margin: 0 2px;
  transition: background-color var(--sk-ease), color var(--sk-ease), border-color var(--sk-ease);
}
.dt-container .dt-paging .page-link:hover,
.pagination .page-link:hover {
  background-color: var(--sk-orange-tint2);
  border-color: var(--sk-border);
  color: var(--sk-orange-deep);
}
.dt-container .dt-paging .page-item.active .page-link,
.pagination .page-item.active .page-link {
  background-color: var(--sk-navy);
  border-color: var(--sk-navy);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  color: var(--sk-muted);
  border-color: var(--sk-divider);
}

/* Filter pills */
.filter-item-box .btn-group.filter .btn:first-child {
  border-top-left-radius: var(--sk-radius-pill);
  border-bottom-left-radius: var(--sk-radius-pill);
}
.filter-item-box .btn-group.filter .btn:last-child {
  border-top-right-radius: var(--sk-radius-pill);
  border-bottom-right-radius: var(--sk-radius-pill);
}


/* ============================================================================
   12. BADGES / LABELS / STATUS PILLS
   ============================================================================ */
.badge {
  padding: 3px 9px;
  font-weight: 600;
  font-size: .75rem;
  border-radius: var(--sk-radius-pill);
  margin-top: 0;
}
.badge.large {
  padding: 5px 12px;
  font-size: .85rem;
}

/* Semantic contextual pills — tinted bg + solid text */
.badge.bg-success {
  background-color: var(--sk-success-tint) !important;
  color: var(--sk-success) !important;
}
.badge.bg-danger {
  background-color: var(--sk-danger-tint) !important;
  color: var(--sk-danger) !important;
}
.badge.bg-warning {
  background-color: var(--sk-warning-tint) !important;
  color: #8a6500 !important;
}
.badge.bg-info {
  background-color: var(--sk-info-tint) !important;
  color: var(--sk-info) !important;
}
.badge.bg-primary {
  background-color: var(--sk-orange-tint2) !important;
  color: var(--sk-orange-deep) !important;
}
.badge.bg-white,
.badge-white {
  background-color: var(--sk-surface) !important;
  color: var(--sk-text) !important;
  border: 1px solid var(--sk-border) !important;
}
.badge.bg-transparent {
  background-color: transparent !important;
  color: var(--sk-muted) !important;
  border: 1px solid var(--sk-border) !important;
}
.badge.badge-default {
  background-color: var(--sk-divider) !important;
  color: var(--sk-navy) !important;
  border: 1px solid var(--sk-border) !important;
}
.badge-light {
  background-color: var(--sk-divider) !important;
  color: var(--sk-navy) !important;
}


/* ============================================================================
   13. TABS
   ============================================================================ */
.nav-tabs,
.card .nav-tabs {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-bottom: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-card) var(--sk-radius-card) 0 0;
}
.nav-tabs .nav-link,
.nav-tabs li a {
  color: var(--sk-muted);
  font-weight: 500;
  transition: color var(--sk-ease), background-color var(--sk-ease);
}
.nav-tabs .nav-link:hover,
.nav-tabs li a:hover {
  color: var(--sk-navy);
  background-color: var(--sk-surface-soft);
}
.nav-tabs li .active,
.nav-tabs li.active,
.nav-tabs .nav-link.active,
.nav-tabs li a.active {
  font-weight: 600;
  color: var(--sk-heading) !important;        /* app.all.css uses !important */
  border-bottom: 1px solid var(--sk-border) !important;
}
/* Animated underline -> brand orange, slightly thicker, faster */
.nav-tabs li a.active::after,
.nav-tabs li:not(.title-tab) a::after {
  background-color: var(--sk-orange);
  height: 2.5px;
  transition: transform var(--sk-ease);
}
.tab-title,
.nav-tabs.title .tab-title {
  color: var(--sk-heading);
}


/* ============================================================================
   14. LIST-PAGE & RECORD-DETAIL LAYOUT
   ============================================================================ */
.list-section,
.page-wrapper {
  background: transparent;
}
.list-group-item {
  color: var(--sk-text);
}
.details-view-top-button .back-action-btn,
.back-action-btn.dark {
  color: var(--sk-navy);
  transition: color var(--sk-ease);
}
.details-view-top-button .back-action-btn:hover {
  color: var(--sk-orange);
}

/* Right-rail info list */
.list-group.info-list .list-group-item,
.info-list .list-group-item {
  border-top: none;
  border-bottom: 1px solid var(--sk-divider);
  color: var(--sk-text);
}
.list-group.info-list .list-group-item:last-child,
.info-list .list-group-item:last-child {
  border-bottom: none;
}
.info-list .list-group-item .icon,
.info-list .list-group-item [data-feather],
.info-list .list-group-item svg {
  color: var(--sk-muted);
}
.info-list .list-group-item a {
  color: var(--sk-navy);
}
.info-list .list-group-item a:hover {
  color: var(--sk-orange);
}
.reminders-card .card-header [data-feather],
.card-header .icon {
  color: var(--sk-navy);
}

/* Selected list-group item -> navy (was #6690F4) */
.list-group-item.active {
  background: var(--sk-navy);
  border-color: var(--sk-navy);
  color: #fff;
}


/* ============================================================================
   15. MODALS / DIALOGS
   ============================================================================ */
.modal-content {
  border: none;
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-lg);
  overflow: hidden;                 /* clip header/footer to rounded corners */
}
.modal-dialog {
  transition: all var(--sk-ease);   /* was 500ms */
}
.modal-header {
  border-bottom: 1px solid var(--sk-divider);
  background: #fbfcfe;
}
.modal-header .modal-title {
  color: var(--sk-heading);
  font-weight: 600;
}
.modal-body {
  color: var(--sk-text);
}
.modal-footer {
  border-top: 1px solid var(--sk-divider);
  background: #fbfcfe;
}
.modal-footer .btn + .btn {
  margin-left: 10px;
}


/* ============================================================================
   16. FORMS & CONTROLS
   (target .general-form to flip ~90% of the app at once)
   ============================================================================ */
/* Inputs: white field + defined border (overrides grey-fill base) */
.general-form .form-control,
.general-form textarea {
  background-color: #ffffff;
  border: 1px solid var(--sk-border);
  border-color: var(--sk-border);
  color: var(--sk-text);
  border-radius: var(--sk-radius-control);
  box-shadow: none;
  transition: border-color var(--sk-ease), box-shadow var(--sk-ease);
}
.general-form .form-control::placeholder,
.general-form textarea::placeholder {
  color: var(--sk-muted);
  opacity: 1;
}
/* Focus ring (overrides the grey-focus + box-shadow:none base) */
.general-form .form-control:focus,
.general-form .form-control.white:focus,
.general-form textarea:focus {
  border-color: var(--sk-orange);
  background-color: #ffffff;
  box-shadow: var(--sk-ring-orange);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sk-orange);
  box-shadow: var(--sk-ring-orange);
}
.general-form,
.general-form.white { color: var(--sk-text); }

/* Labels */
.general-form label,
.general-form .control-label {
  color: var(--sk-heading);
  font-weight: 600;
}

/* Input-group addon */
.general-form .input-group-addon,
.input-group-addon {
  background: var(--sk-bg);
  border-color: var(--sk-border);
  color: var(--sk-muted);
  border-radius: var(--sk-radius-control);
}

/* ---- Select2 v3 (RISE bundles v3; many rules carry !important) ---- */
.select2-container .select2-choice {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-radius-control) !important;
  color: var(--sk-text);
}
.select2-container .select2-choice .select2-chosen {
  color: var(--sk-text);
}
.select2-container.select2-container-active .select2-choice,
.select2-container.select2-dropdown-open .select2-choice {
  border-color: var(--sk-orange) !important;
  box-shadow: var(--sk-ring-orange);
}
.select2-container-multi .select2-choices,
.general-form.white .select2-container-multi.form-control .select2-choices,
.general-form.white .select2-container .select2-choice {
  background: #ffffff !important;
  border: 1px solid var(--sk-border) !important;
  border-color: var(--sk-border) !important;
  border-radius: var(--sk-radius-control) !important;
}
.select2-container-multi .select2-choices .select2-search-choice {
  background: var(--sk-divider);
  border-color: var(--sk-border);
  color: var(--sk-text);
  border-radius: var(--sk-radius-control);
  box-shadow: none;
}
.select2-drop,
.select2-drop-active {
  border-color: var(--sk-border) !important;
  border-radius: 0 0 var(--sk-radius-control) var(--sk-radius-control);
  box-shadow: var(--sk-shadow-md);
}
.select2-search input {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-control);
}
/* highlighted result -> orange tint (was #6690F4) */
.select2-results .select2-highlighted {
  background-color: var(--sk-orange-tint) !important;
  color: var(--sk-text);
}

/* ---- Checkboxes / radios / switches ---- */
.form-check-input {
  accent-color: var(--sk-orange);
  transition: background-color var(--sk-ease), border-color var(--sk-ease), box-shadow var(--sk-ease);
}
.form-check-input:checked {
  background-color: var(--sk-orange);
  border-color: var(--sk-orange);
}
.form-check-input:focus {
  border-color: var(--sk-orange);
  box-shadow: var(--sk-ring-orange);
}
.navbar-nav .form-check .form-check-label,
.navbar-nav .form-check .form-check-input {
  color: var(--sk-text);
}

/* ---- Validation ---- */
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox {
  color: var(--sk-danger);
}
.general-form .has-error .form-control,
.general-form .form-control.error {
  color: var(--sk-text);
  border-color: var(--sk-danger) !important;
  box-shadow: var(--sk-ring-danger);
}
label.error,
.error {
  color: var(--sk-danger);
}
label.error {
  font-size: .85em;
  font-weight: 500;
  margin-top: 4px;
}
/* normalize the inconsistent table / widget error fills */
table .error {
  background: var(--sk-danger-tint) !important;
  color: var(--sk-danger) !important;
}
#widget-row-container .error,
.general-form .input-group .error {
  background: #fdecea;
  border: 1px solid #f3c6bf;
}
.help-block {
  color: var(--sk-muted);
}
.help-block .text-warning {
  color: var(--sk-warning) !important;
}


/* ============================================================================
   17. BUTTONS
   ============================================================================ */
.btn {
  border-radius: var(--sk-radius-control);
  transition: background-color var(--sk-ease-fast), border-color var(--sk-ease-fast), box-shadow var(--sk-ease-fast), color var(--sk-ease-fast);
}
.btn.round { border-radius: var(--sk-radius-pill); }

/* Primary CTA -> orange (was #6690F4) */
.btn-primary {
  background-color: var(--sk-orange);
  border-color: var(--sk-orange);
  color: #fff;
  box-shadow: var(--sk-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--sk-orange-hover) !important;
  border-color: var(--sk-orange-hover) !important;
  color: #fff;
}
.btn-primary:focus-visible {
  box-shadow: var(--sk-ring-orange);
}

/* Default / cancel -> subtle neutral */
.btn-default {
  background-color: var(--sk-surface);
  border: 1px solid var(--sk-border);
  color: var(--sk-text);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background-color: var(--sk-bg);
  border-color: var(--sk-border);
  color: var(--sk-navy);
}

/* Semantic buttons -> brand-aligned (hover/active in app.all.css use !important) */
.btn-success {
  background: var(--sk-success);
  border-color: var(--sk-success);
  color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: #198a5d !important;
  border-color: #198a5d !important;
  color: #fff;
}
.btn-info {
  background: var(--sk-info);
  border: 1px solid var(--sk-info);
  color: #fff;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background: #2a6fab !important;
  border-color: #2a6fab !important;
  color: #fff;
}
.btn-warning {
  color: #1c2433;
  background: var(--sk-warning);
  border-color: var(--sk-warning);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background: #c79100 !important;
  border-color: #c79100 !important;
  color: #1c2433;
}
.btn-danger {
  background: var(--sk-danger);
  border-color: var(--sk-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: #bf3a28 !important;
  border-color: #bf3a28 !important;
  color: #fff;
}

.btn.active {
  background-color: var(--sk-divider);
  border-color: var(--sk-border);
  color: var(--sk-navy);
}
.btn-transparent {
  background: transparent;
}
.btn-outline-light {
  color: var(--sk-text) !important;
}

/* Button groups (segmented filters) */
.btn-group .btn.active {
  background-color: var(--sk-divider);
  border-color: var(--sk-border);
  color: var(--sk-navy);
}
.btn-group.filter .btn.active {
  background-color: var(--sk-navy);
  border-color: var(--sk-navy);
  color: #ffffff;
}

/* Spinner accent (was #6690F4) */
.spinning-btn.spinning:before {
  border-right-color: var(--sk-orange);
}


/* ============================================================================
   18. ALERTS / TOASTS
   ============================================================================ */
.alert {
  border: 0;
  border-radius: var(--sk-radius-card);
}
.alert-warning {
  background-color: var(--sk-warning-tint);
  color: #8a6500;
}
.alert-success {
  background-color: var(--sk-success-tint);
  color: var(--sk-success);
}
.alert-info {
  background-color: var(--sk-info-tint);
  color: var(--sk-info);
}
.alert-danger {
  background-color: var(--sk-danger-tint);
  color: #b33422;
  border: 1px solid #f3c6bf;
}

/* Floating toasts (appAlert) — fix the semantically-wrong base colors */
.app-alert {
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-md);
}
.app-alert.alert-success {
  background-color: var(--sk-success);   /* was indigo #485BBD */
  color: #fff;
}
.app-alert.alert-info {
  background-color: var(--sk-info);
  color: #fff;
}
.app-alert.alert-danger {
  background-color: var(--sk-danger);
  color: #fff;
}
.app-alert.alert-warning {
  background-color: var(--sk-warning);
  color: #1c2433;
}
.app-alert .progress-bar {
  background-color: rgba(255, 255, 255, .55);
}


/* ============================================================================
   19. AUTH / SIGN-IN PAGE  (no topbar, no sidebar)
   body.public-view .signin-page > .sk-auth-shell
     -> .sk-auth-brand (left navy panel)
     -> .sk-auth-main  > .scrollable-page > .form-signin > .card (right form)
   The .scrollable-page is preserved as the JS initScrollbar() target and now
   scrolls the FORM COLUMN only (so the brand panel stays fixed-height).
   ============================================================================ */
body.signin-page,
body.public-view {
  background: linear-gradient(160deg, var(--sk-navy) 0%, var(--sk-navy-darker) 60%, var(--sk-navy-deepest) 100%);
  min-height: 100vh;
}

/* Split-screen shell — flex parent spanning the viewport */
.sk-auth-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ---- LEFT: navy brand panel ---- */
.sk-auth-brand {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 60px;
  color: #ffffff;
  background:
    radial-gradient(1200px 600px at 12% 8%, rgba(232, 114, 42, .16) 0%, rgba(232, 114, 42, 0) 55%),
    linear-gradient(160deg, var(--sk-navy) 0%, var(--sk-navy-darker) 58%, var(--sk-navy-deepest) 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle pattern overlay */
.sk-auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 64px);
  background-size: 64px 64px;
  pointer-events: none;
  opacity: .6;
}
.sk-auth-brand > * {
  position: relative;
  z-index: 1;
}
.sk-auth-brand-logo {
  margin-bottom: 36px;
}
.sk-auth-brand-logo img {
  max-height: 48px;
  width: auto;
  /* reverse (white) logo reads directly on the dark panel — no plate needed */
}
.sk-auth-wordmark {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #ffffff;
  text-transform: uppercase;
}
.sk-auth-wordmark .sk-auth-wordmark-accent {
  color: var(--sk-orange);
}
.sk-auth-tagline {
  font-size: 1.55rem;
  line-height: 1.3;
  font-weight: 600;
  color: #ffffff;
  max-width: 26ch;
  margin: 0 0 14px;
}
.sk-auth-subtagline {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sk-navy-text);
  max-width: 42ch;
  margin: 0 0 40px;
}
.sk-auth-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-auth-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sk-auth-feature .sk-auth-feature-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sk-radius-control);
  background: rgba(232, 114, 42, .14);
  color: var(--sk-orange);
}
.sk-auth-feature .sk-auth-feature-icon svg,
.sk-auth-feature .sk-auth-feature-icon [data-feather] {
  color: var(--sk-orange);
  width: 20px;
  height: 20px;
}
.sk-auth-feature .sk-auth-feature-text {
  color: #ffffff;
}
.sk-auth-feature .sk-auth-feature-title {
  font-weight: 600;
  font-size: .98rem;
  color: #ffffff;
}
.sk-auth-feature .sk-auth-feature-desc {
  font-size: .86rem;
  color: var(--sk-navy-text);
  margin-top: 2px;
}

/* ---- RIGHT: form column ---- */
.sk-auth-main {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;     /* navy body shows through; the white card reads on it */
}
/* .scrollable-page (JS initScrollbar target) wraps the form column */
.sk-auth-main .scrollable-page {
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Constrain + center the form card */
.sk-auth-main .form-signin {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.form-signin .card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-lg) !important;
}
.form-signin .card-header {
  background: var(--sk-surface);
  border-bottom: 1px solid var(--sk-divider);
  border-radius: var(--sk-radius-card) var(--sk-radius-card) 0 0;
}
.form-signin .card-header h2 {
  color: var(--sk-heading);
  font-weight: 600;
}
.form-signin .card-body {
  background: var(--sk-surface);
  border-radius: 0 0 var(--sk-radius-card) var(--sk-radius-card);
}
/* Auth inputs (grow taller via .form-signin .form-control{height:auto}) */
.form-signin .form-control {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-control);
  color: var(--sk-text);
}
.form-signin .form-control:focus {
  border-color: var(--sk-orange);
  box-shadow: var(--sk-ring-orange);
}
.form-signin .btn-primary {
  background-color: var(--sk-orange);
  border-color: var(--sk-orange);
}
.form-signin a {
  color: var(--sk-link);
}
.form-signin a:hover {
  color: var(--sk-orange);
}

/* ---- Auth split-screen: responsive collapse ---- */
/* On tablet/phone, stack to a single column and drop the brand panel so the
   form goes full width. .scrollable-page still wraps + scrolls the form. */
@media (max-width: 991px) {
  .sk-auth-shell {
    flex-direction: column;
  }
  .sk-auth-brand {
    display: none;
  }
  .sk-auth-main {
    flex: 1 1 auto;
    min-height: 100vh;
    width: 100%;
  }
}


/* ============================================================================
   20. EMPTY / LOADING AFFORDANCES
   ============================================================================ */
#pre-loader,
.app-loader {
  background: var(--sk-bg);
}
.inline-loader,
.list-group-item.inline-loader {
  color: var(--sk-muted);
}


/* ============================================================================
   21. RESPONSIVE  —  tablet & mobile polish (geometry preserved)
   ============================================================================ */

/* Tablet (<= 990px): sidebar is off-canvas; tighten chrome */
@media (max-width: 990px) {
  .navbar-custom {
    box-shadow: var(--sk-shadow-sm);
  }
  .page-title h1 {
    font-size: 1.2rem;
    padding: 16px 14px;
  }
  /* horizontal scroll affordance for wide tables */
  .table-responsive,
  .scrollable-table {
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile (<= 767px) */
@media (max-width: 767px) {
  .card .card-body { padding: 14px; }
  .card .card-header,
  .card .card-header:first-child { padding: 12px 14px; }

  /* Stack the label-left / control-right form grid */
  .general-form .form-group .row > label[class*="col-"] {
    margin-bottom: 4px;
  }

  /* Touch-friendly targets */
  .btn,
  .dropdown-item,
  .page-link {
    min-height: 40px;
  }
  .dropdown-item {
    display: flex;
    align-items: center;
  }

  /* Right-rail detail cards stack full width (markup already wraps) */
  .details-view-right-section {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Small phones (<= 576px): mobile bottom menu region */
@media (max-width: 576px) {
  .form-signin .card-body { padding: 22px; }
  .modal-content { border-radius: var(--sk-radius-card); }
  /* keep the brand background subtle on auth at phone size */
  body.signin-page { background: var(--sk-navy); }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ============================================================================
   QA REFINEMENTS (post-render review)
   ============================================================================ */

/* (1) Logo legibility. The real sidebar logo is an <img class="dashboard-image">
   (app/Views/includes/left_menu.php) and the stock Steadkraft logo is dark navy/
   orange — invisible on a navy plate. A white brand plate keeps the EXISTING logo
   readable with no new asset (premium "white header + navy menu" pattern).
   If you later supply a white/mono logo, set these backgrounds to transparent. */
/* Reverse (white) sidebar logo now reads directly on navy — no white plate.
   The brand area blends with the sidebar; a hairline light divider separates it
   from the menu. (Set these to #fff again only if reverting to the dark logo.) */
.sidebar-brand,
.sidebar-brand.brand-logo,
.sidebar-brand.brand-logo-mini {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
.sidebar-brand .dashboard-image {
  max-height: 34px;
  width: auto;
}

/* (2) Action controls on the navy active row read as opaque white squares.
   Make them ghost-light so they sit cleanly on the dark row. */
.dataTable:not(.js-selection-mode) tbody tr.active td .btn,
.dataTable:not(.js-selection-mode) tbody tr.active td button,
.dataTable:not(.js-selection-mode) tbody tr.active td a.btn,
.dataTable:not(.js-selection-mode) tbody tr.active td .dropdown > a {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.dataTable:not(.js-selection-mode) tbody tr.active td .btn:hover,
.dataTable:not(.js-selection-mode) tbody tr.active td .dropdown > a:hover {
  background: rgba(255, 255, 255, .14) !important;
}
.dataTable:not(.js-selection-mode) tbody tr.active td .btn svg,
.dataTable:not(.js-selection-mode) tbody tr.active td .btn [data-feather],
.dataTable:not(.js-selection-mode) tbody tr.active td a svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


/* ============================================================================
   QA v2 — FURTHER POLISH  (post-render second pass)
   ----------------------------------------------------------------------------
   Conservative refinements for areas the base theme under-covers. Every
   selector below was grep-confirmed in assets/css/app.all.css or in the views
   (topbar.php, etc.). Reuses the existing --sk-* tokens only. No geometry
   changes; !important kept to the minimum needed to beat app.all.css /
   Bootstrap on equal specificity.
   ============================================================================ */

/* ---- V2.1  EMPTY STATES ----------------------------------------------------
   DataTables "No data available" row. This build emits BOTH the modern
   td.dt-empty (DataTables 2.x) and the legacy .dataTables_empty class; app.all
   .css gives them plain text. Make them muted, centered, breathing-room. */
table.dataTable td.dt-empty,
table.dataTable td.dataTables_empty,
td.dt-empty,
.dataTables_empty {
  color: var(--sk-muted) !important;
  text-align: center;
  padding: 26px 16px;
  font-style: italic;
  background-color: var(--sk-surface);
}


/* ---- V2.2  DROPDOWN MENUS (refinement) -------------------------------------
   Base theme colors .dropdown-item hover. Add tighter rhythm + a brand-tinted
   left accent on hover so menus feel intentional, plus header/footer polish
   for the notification + quick-add dropdowns (markup: topbar.php). */
.dropdown-menu {
  padding: 6px;
}
.dropdown-item {
  border-radius: var(--sk-radius-control);
  padding: 7px 12px;
}
/* notification / message dropdowns are a card-in-a-dropdown (topbar.php) */
.notification-dropdown .card {
  border: none;
  box-shadow: none;
}
.notification-dropdown .card-footer {
  background-color: var(--sk-surface-soft2);
  border-top: 1px solid var(--sk-divider);
}
.notification-dropdown .card-footer a {
  color: var(--sk-navy);
  font-weight: 600;
}
.notification-dropdown .card-footer a:hover {
  color: var(--sk-orange);
}


/* ---- V2.3  SELECT2 (v3) DROPDOWN — hover + selected ------------------------
   Base theme tints the keyboard-highlighted result. Also brand the
   pointer-hovered and currently-selected options for consistency. */
.select2-results .select2-result:hover .select2-result-label,
.select2-results li.select2-result-with-children > .select2-result-label:hover {
  background-color: var(--sk-orange-tint2);
  color: var(--sk-text);
}
.select2-results .select2-selected {
  background-color: var(--sk-orange-tint);
  color: var(--sk-text);
}
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error {
  color: var(--sk-muted);
}


/* ---- V2.4  TOOLTIPS --------------------------------------------------------
   Bootstrap tooltips (data-bs-toggle="tooltip", initialised in topbar.php,
   used 127x across views). Bootstrap ships only base styling — brand it navy
   so tooltips match the chrome. */
.tooltip .tooltip-inner {
  background-color: var(--sk-navy);
  color: #ffffff;
  border-radius: var(--sk-radius-control);
  padding: 6px 10px;
  font-size: .8rem;
  box-shadow: var(--sk-shadow-md);
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--sk-navy);
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--sk-navy);
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--sk-navy);
}
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--sk-navy);
}


/* ---- V2.5  DATATABLES PROCESSING / LOADING ---------------------------------
   app.all.css renders the loading overlay via div.dt-container div.dt-processing
   (with a .card variant). Soften it onto a brand surface + show the active
   segment of the three-dot animation in orange. */
div.dt-container div.dt-processing,
div.dt-container div.dt-processing.card {
  background-color: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-md);
  color: var(--sk-muted);
}
div.dt-container div.dt-processing div {
  color: var(--sk-muted);
}


/* ---- V2.6  DATE / TIME PICKERS — brand accent ------------------------------
   bootstrap-datepicker (.datepicker, grep-confirmed) + bootstrap-timepicker
   (.bootstrap-timepicker-widget). Accent the selected day / nav / today and
   the timepicker spinner buttons in brand orange. */
.datepicker table tr td span.active,
.datepicker table tr td span.active.active,
.datepicker table tr td.active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active:hover {
  background-color: var(--sk-orange) !important;
  background-image: none !important;
  border-color: var(--sk-orange) !important;
  color: #ffffff !important;
  text-shadow: none;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background-color: var(--sk-orange-tint) !important;
  background-image: none !important;
  color: var(--sk-orange-deep) !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover,
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background-color: var(--sk-orange-tint2) !important;
  color: var(--sk-orange-deep);
}
.datepicker .datepicker-switch {
  color: var(--sk-heading);
  font-weight: 600;
}
.datepicker.datepicker-dropdown {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-control);
  box-shadow: var(--sk-shadow-md);
}
.bootstrap-timepicker-widget table td input {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-control);
  color: var(--sk-text);
}
.bootstrap-timepicker-widget table td a {
  color: var(--sk-muted);
  border-radius: var(--sk-radius-control);
  transition: color var(--sk-ease), background-color var(--sk-ease);
}
.bootstrap-timepicker-widget table td a:hover {
  background-color: var(--sk-orange-tint2);
  color: var(--sk-orange-deep);
  border-color: transparent;
}
.bootstrap-timepicker-widget.dropdown-menu {
  border: 1px solid var(--sk-border);
  box-shadow: var(--sk-shadow-md);
}


/* ---- V2.7  TOPBAR ICON / NOTIFICATION DOT / QUICK-ADD ----------------------
   Icon buttons (#web-notification-icon, #message-notification-icon, the
   quick-add-dropdown trigger) live in .navbar-nav. Give a subtle pill hover
   so they read as buttons, and pull the notification dot tight to the bell. */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background-color: var(--sk-surface-soft);
  border-radius: var(--sk-radius-control);
}
.navbar-nav .nav-link.show,
.navbar-nav .show > .nav-link {
  background-color: var(--sk-orange-tint2);
  border-radius: var(--sk-radius-control);
  color: var(--sk-orange-deep) !important;
}
/* notification count pill: nudge it onto the icon corner (positioned by base) */
.notification-badge-container {
  font-size: .62rem;
  line-height: 1;
  min-width: 16px;
  text-align: center;
}
/* quick-add dropdown trigger + its menu (topbar.php: .quick-add-dropdown) */
.quick-add-dropdown {
  border-radius: var(--sk-radius-card);
}


/* ---- V2.8  TOASTS / ALERTS (refinement) ------------------------------------
   Base theme recolors .app-alert. Add a close-affordance + tighter type, and
   a hairline left rail on standing .alert blocks for a premium read. */
.app-alert {
  font-weight: 500;
}
.app-alert .close,
.app-alert .btn-close {
  filter: brightness(0) invert(1);
  opacity: .75;
}
.app-alert .close:hover,
.app-alert .btn-close:hover {
  opacity: 1;
}
.alert-success { box-shadow: inset 3px 0 0 var(--sk-success); }
.alert-info    { box-shadow: inset 3px 0 0 var(--sk-info); }
.alert-warning { box-shadow: inset 3px 0 0 var(--sk-warning); }
.alert-danger  { box-shadow: inset 3px 0 0 var(--sk-danger); }


/* ---- V2.9  CARD HOVER LIFT + DIVIDERS + TYPESETTING ------------------------
   Subtle elevation on interactive cards (kept off static cards via the
   transition already declared in §10). blockquote is the only one styled by
   app.all.css; code/kbd are unstyled there — add brand-tinted defaults. */
a > .card:hover,
.card.clickable:hover,
.card[onclick]:hover,
.list-group-item-action:hover .card {
  border-color: var(--sk-border);
  box-shadow: var(--sk-shadow-md) !important;
}
blockquote {
  border-left: 3px solid var(--sk-orange);
  padding-left: 14px;
  color: var(--sk-muted);
}
code {
  background-color: var(--sk-orange-tint2);
  color: var(--sk-orange-deep);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .88em;
}
kbd {
  background-color: var(--sk-navy);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: .82em;
  box-shadow: var(--sk-shadow-sm);
}


/* ---- V2.10  MOBILE (<= 767px) — bottom-menu active + tighter density -------
   Strengthen the active state of the mobile bottom menu (markup uses
   .menu-item / .menu-item.active, confirmed in app.all.css) and tighten table
   cell padding so dense tables fit a phone. Geometry untouched. */
@media (max-width: 767px) {
  .mobile-bottom-menu .menu-item.active,
  .mobile-bottom-menu .menu-item:active {
    color: var(--sk-orange);
  }
  .mobile-bottom-menu .menu-item.active .icon,
  .mobile-bottom-menu .menu-item.active svg,
  .mobile-bottom-menu .menu-item:active .icon,
  .mobile-bottom-menu .menu-item:active svg {
    color: var(--sk-orange);
  }
  table.dataTable tbody td,
  table.dataTable thead th,
  .table > :not(caption) > * > * {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ============================================================================
   22. OVERHAUL v2 — contemporary refresh (cards, buttons, tables, chrome)
       Layered last so it wins by source-order; uses the retuned tokens above.
   ============================================================================ */

/* ---- Canvas: a touch airier ---- */
.page-content { padding-top: 14px; }

/* ---- Cards: crisper surface, hairline border, layered shadow ---- */
.card {
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-radius-card) !important;
  box-shadow: var(--sk-shadow-md) !important;
  overflow: hidden;
}
.card > .card-header,
.card .page-title:first-child {
  border-bottom: 1px solid var(--sk-divider);
  background: var(--sk-surface);
}

/* ---- Page title header: cleaner, more confident ---- */
.page-title h1 { font-weight: 700; letter-spacing: -.2px; }

/* ---- Primary button: subtle gradient + lift ---- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: linear-gradient(180deg, var(--sk-orange) 0%, var(--sk-orange-hover) 100%) !important;
  border-color: var(--sk-orange-deep) !important;
  box-shadow: 0 2px 6px rgba(232,114,42,.28) !important;
  font-weight: 600;
  transition: transform var(--sk-ease), box-shadow var(--sk-ease), filter var(--sk-ease);
}
.btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(232,114,42,.34) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn { border-radius: var(--sk-radius-control); font-weight: 500; }
.btn-default, .btn-light {
  border-radius: var(--sk-radius-control);
  border: 1px solid var(--sk-border);
  transition: background var(--sk-ease), border-color var(--sk-ease), transform var(--sk-ease);
}
.btn-default:hover, .btn-light:hover {
  background: var(--sk-surface-soft);
  border-color: #cfd6e2;
  transform: translateY(-1px);
}

/* ---- Tables / DataTables: airy rows, quiet uppercase head, soft hover ---- */
table.dataTable thead th,
.table > thead > tr > th,
.app-table thead th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--sk-muted) !important;
  font-weight: 600 !important;
  background: var(--sk-surface-soft) !important;
  border-bottom: 1px solid var(--sk-border) !important;
}
table.dataTable tbody td,
.table > tbody > tr > td {
  border-color: var(--sk-divider) !important;
  vertical-align: middle;
}
table.dataTable tbody tr,
.table > tbody > tr {
  transition: background var(--sk-ease-fast);
}
table.dataTable tbody tr:hover,
.table-hover > tbody > tr:hover {
  background: var(--sk-orange-tint2) !important;
}

/* ---- Sidebar active: orange accent bar (modern, unmistakable) ---- */
.sidebar-menu li.active > a {
  position: relative;
  background: var(--sk-navy-mid) !important;
}
.sidebar-menu li.active > a::after {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sk-orange);
}

/* ---- Top bar: hairline + clean shadow ---- */
.navbar-custom {
  box-shadow: 0 1px 0 var(--sk-border), 0 2px 10px rgba(20,29,48,.04);
}

/* ---- Form controls: rounded, soft, orange focus ring ---- */
.form-control, .form-select, .select2-container--default .select2-selection {
  border-radius: var(--sk-radius-control) !important;
  border-color: var(--sk-border) !important;
  transition: border-color var(--sk-ease), box-shadow var(--sk-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--sk-orange) !important;
  box-shadow: var(--sk-ring-orange) !important;
}

/* ---- Tabs: orange underline active ---- */
.nav-tabs { border-bottom: 1px solid var(--sk-border); }
.nav-tabs .nav-link {
  border: 0 !important;
  color: var(--sk-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--sk-heading); }
.nav-tabs .nav-link.active {
  color: var(--sk-orange) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--sk-orange) !important;
}

/* ---- Badges / pills ---- */
.badge { border-radius: var(--sk-radius-pill); font-weight: 600; letter-spacing: .2px; padding: .4em .7em; }

/* ---- Modals ---- */
.modal-content { border: 0; border-radius: var(--sk-radius-card); box-shadow: var(--sk-shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--sk-divider); }
.modal-footer { border-top: 1px solid var(--sk-divider); background: var(--sk-surface-soft2); }

/* ---- Pagination ---- */
.page-link { color: var(--sk-navy); border-radius: var(--sk-radius-control); }
.page-item.active .page-link {
  background: var(--sk-orange) !important;
  border-color: var(--sk-orange) !important;
  color: #fff !important;
}

/* ---- Dropdowns ---- */
.dropdown-menu { border: 1px solid var(--sk-border); border-radius: var(--sk-radius-card); box-shadow: var(--sk-shadow-md); padding: 6px; }
.dropdown-item { border-radius: var(--sk-radius-control); padding: 7px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sk-orange-tint2); color: var(--sk-orange-deep); }
.dropdown-item.active, .dropdown-item:active { background: var(--sk-orange) !important; color: #fff !important; }

/* ============================================================================
   23. SCROLLABLE TABS — strips scroll horizontally (no visible scrollbar)
       instead of wrapping / getting cut off on narrow widths.
   ============================================================================ */

/* (a) standard tab strips everywhere (client/invoice/settings/report views, etc.) */
.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
}
.nav-tabs::-webkit-scrollbar { height: 0; display: none; }   /* WebKit */
.nav-tabs > li,
.nav-tabs .nav-item { flex: 0 0 auto; }
.nav-tabs .nav-link { white-space: nowrap; }

/* (b) the topbar quick-icon strip. Scroll is enabled ONLY after the topbar JS
   reconfigures its dropdowns to position:fixed (class added there) so the dropdown
   menus escape this scroll container instead of being clipped. If that JS doesn't
   run, the class is absent and behaviour is unchanged — no regression. */
#default-navbar .navbar-nav.me-auto.sk-topmenu-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
}
#default-navbar .navbar-nav.me-auto.sk-topmenu-scroll::-webkit-scrollbar { height: 0; display: none; }
#default-navbar .navbar-nav.me-auto.sk-topmenu-scroll > li { flex: 0 0 auto; }