/* ============================================================================
   f86.work999.com — PREMIUM DARK REDESIGN  (override layer · no core edits)
   Loaded last by includes/head.php. Runtime theme injection is disabled
   (default_theme_color = F2F2F2), so this file is the single source of truth.
   Font + GSAP are wired in includes/custom_head.php.
   Blueprint: /home/admin/redesign/frontend-analysis.md
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"]{
  /* Surfaces */
  --bg:#0F1117; --surface:#1A1D27; --surface-2:#20242F; --chrome:#14161F;
  --field-bg:#161922; --field-bg-focus:#1C2030; --field-border:rgba(255,255,255,.10);

  /* Hairlines */
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.12); --border-faint:rgba(255,255,255,.06);

  /* Text */
  --text-high:rgba(255,255,255,.92); --text-med:rgba(255,255,255,.66);
  --text-low:rgba(255,255,255,.50);  --text-faint:rgba(255,255,255,.40);

  /* Accent — refined indigo lifted from brand slate #1E202D */
  --accent:#5B8DEF; --accent-bright:#6C8CFF; --accent-soft:rgba(91,141,239,.14);
  --accent-press:#4F7BE0; --ring:rgba(91,141,239,.40);

  /* Semantic (read on dark) */
  --success:#34D399; --success-soft:rgba(52,211,153,.14);
  --warn:#FBBF52;    --warn-soft:rgba(251,191,82,.14);
  --danger:#F2718B;  --danger-soft:rgba(242,113,139,.14);
  --info:#56B6F0;    --info-soft:rgba(86,182,240,.14);

  /* Type */
  --font-ui:'Be Vietnam Pro','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14.5px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-kpi:32px;
  --tracking-tight:-.012em; --tracking-eyebrow:.04em;

  /* Spacing / radius */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-xl:14px; --radius-pill:999px;

  /* Shadows (cool, layered, dark-tuned) */
  --shadow-1:0 1px 2px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.24);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.30);
  --shadow-3:0 18px 48px -12px rgba(0,0,0,.65),0 4px 12px rgba(0,0,0,.40);
  --shadow-accent:0 4px 16px -4px rgba(91,141,239,.45);

  /* Motion */
  --dur-1:.15s; --dur-2:.22s; --dur-3:.32s;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --bs-body-color:var(--text-med);
  --bs-body-bg:var(--bg);
}

/* ---------------------------------------------------------------------------
   2. BASE CANVAS + utility-background overrides (leak prevention)
   --------------------------------------------------------------------------- */
html,body{
  background-color:var(--bg)!important;
  color:var(--text-med)!important;
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* "white"/light utility surfaces become dark elevated surfaces */
.bg-white,.bg-light,.bg-off-white,.default-bg,.bg-transparent-white{
  background-color:var(--surface)!important; color:var(--text-med);
}
.widget-row.bg-white,.widget-row{background-color:var(--surface)!important;}
.text-dark,.dark{color:var(--text-high)!important;}
.text-off,.text-muted{color:var(--text-low)!important;}
hr{border-color:var(--border);opacity:1;}
::selection{background:var(--accent-soft);color:var(--text-high);}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
body,.btn,.form-control,.dropdown-menu,input,select,textarea,button{font-family:var(--font-ui);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{color:var(--text-high);font-weight:600;letter-spacing:var(--tracking-tight);}
html h1,html h2,html h3,html h4{font-weight:600;}
.page-title h1,h1.page-title{font-size:var(--fs-xl);font-weight:600;letter-spacing:var(--tracking-tight);color:var(--text-high);}
.card .card-title,.card-header{font-weight:600;color:var(--text-high);}
strong,b,.font-weight-bold,.fw-bold{font-weight:600!important;}
small,.small,.text-small{color:var(--text-low);}
a{color:var(--accent);transition:color var(--dur-1) var(--ease-out);}
a:hover,a:focus,a:active{color:var(--accent-bright);}
/* tabular figures on data-heavy numerics */
.widget-details h1,.box-content h4,table.dataTable td.text-right,.kpi-value,.invoice-total,.amount{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------------
   4. CHROME — sidebar + topbar + page-title + footer
   --------------------------------------------------------------------------- */
.sidebar,.sidebar .sidebar-brand,.sidebar .sidebar-scroll{
  background-color:var(--chrome)!important;
  border-right:1px solid var(--border-faint);
}
.sidebar .sidebar-brand{border-bottom:1px solid var(--border-faint);}
.sidebar-menu li a,.menu-text{color:var(--text-med);}
.sidebar-menu li a .menu-icon,.sidebar-menu li a [data-feather]{color:var(--text-low);}
.sidebar-menu li a:hover,.sidebar-menu li a:focus,.sidebar-menu li a:active,
.sidebar-menu li ul li a:hover{
  background-color:rgba(255,255,255,.04)!important;color:var(--text-high)!important;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
/* active item: tinted pill instead of saturated fill */
.sidebar-menu li.active>a{
  background-color:var(--accent-soft)!important;
  color:var(--accent-bright)!important;
  box-shadow:inset 3px 0 0 var(--accent);
}
.sidebar-menu li.active>a .menu-icon,.sidebar-menu li.active>a [data-feather]{color:var(--accent-bright)!important;}
.sidebar-menu li.expand>a::before{border-color:var(--text-low);transition:transform var(--dur-2) var(--ease-out);}

.navbar-custom{
  background-color:var(--chrome)!important;
  border-bottom:1px solid var(--border-faint);
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.navbar-custom .nav-link,.navbar-custom .user-name{color:var(--text-med);}
.navbar-custom .nav-link:hover{color:var(--text-high);}

.page-title{background-color:transparent!important;border-bottom:1px solid var(--border);}
.footer,.footer.fixed-bottom{background-color:var(--chrome)!important;color:var(--text-low);border-top:1px solid var(--border-faint);}

/* ---------------------------------------------------------------------------
   5. CARDS + SURFACES + ELEVATION   (H1, H2)
   --------------------------------------------------------------------------- */
.card{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  /* replace the dated `transition: all 1s` */
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
.card .card-header,.card .card-header:first-child,.bg-white .card-header{
  background-color:transparent;
  border-bottom:1px solid var(--border);
  color:var(--text-high);
}
.card-body{background-color:transparent;color:var(--text-med);}
.card-footer{background-color:var(--surface-2)!important;border-top:1px solid var(--border);}
/* restrained hover lift only where a card is interactive */
a .card:hover,.card.clickable:hover,.kanban-item:hover,.column-grid-link:hover .grid-bg{
  box-shadow:var(--shadow-2);transform:translateY(-1px);border-color:var(--border-strong);
}
.box,.box-content,.notepad,.sticky-note,.grid-bg,.invoice-preview-container,.kanban-container,.kanban-col-title,.kanban-item{
  background-color:var(--surface)!important;border-color:var(--border)!important;color:var(--text-med);
}
.kanban-item{border-radius:var(--radius);box-shadow:var(--shadow-1);}
.b-r,.b-l,.b-t,.b-b{border-color:var(--border)!important;}

/* ---------------------------------------------------------------------------
   6. FORMS + INPUTS + select2 (M7, H3)
   --------------------------------------------------------------------------- */
.form-control,.general-form .form-control,.general-form.white .form-control,
.dt-search input,.datatable-search,.custom-filter-search,.help-search-box,
.widget-todo-input-box input,.input-group-text,textarea,
.select2-container .select2-choice,.select2-container .select2-choices,
.select2-drop,.select2-search input,.bootstrap-timepicker-widget table td input{
  background-color:var(--field-bg)!important;
  border:1px solid var(--field-border)!important;
  color:var(--text-high)!important;
  border-radius:var(--radius);
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out);
}
.form-control::placeholder,textarea::placeholder{color:var(--text-low);}
.form-control:focus,.general-form .form-control:focus,.general-form.white .form-control:focus,
.dt-search input:focus,.datatable-search:focus,.help-search-box:focus,
.select2-container-active .select2-choice,.select2-dropdown-open .select2-choice,
.widget-todo-input-box input:focus,.bootstrap-timepicker-widget table td input:focus{
  background-color:var(--field-bg-focus)!important;
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--ring)!important;
  color:var(--text-high)!important;
  outline:none;
}
.input-group-text{color:var(--text-low)!important;}
.select2-drop,.select2-search-choice,.select2-search input{color:var(--text-high)!important;}
.select2-results .select2-highlighted{background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;}
.form-check-input{background-color:var(--field-bg);border-color:var(--field-border);}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent);}
.form-check-input:focus{box-shadow:0 0 0 3px var(--ring);border-color:var(--accent);}
label,.control-label,.col-form-label{color:var(--text-med);}
.has-error .form-control{border-color:var(--danger)!important;}
.has-error .help-block,.help-block.text-danger,.text-danger{color:var(--danger)!important;}

/* ---------------------------------------------------------------------------
   7. BUTTONS (M6 + micro-press)
   --------------------------------------------------------------------------- */
.btn{
  border-radius:var(--radius);font-weight:500;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.btn:active{transform:translateY(1px);}
.btn-primary,.btn-primary.btn-info,.btn-info{
  background-color:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
}
.btn-primary:hover,.btn-primary:focus,.btn-info:hover,.btn-info:focus{
  background-color:var(--accent-bright)!important;border-color:var(--accent-bright)!important;
  box-shadow:var(--shadow-accent)!important;color:#fff!important;
}
.btn-primary:active{background-color:var(--accent-press)!important;border-color:var(--accent-press)!important;}
.btn-default,.btn-light,.btn-secondary{
  background-color:var(--surface-2)!important;border:1px solid var(--border-strong)!important;color:var(--text-high)!important;
}
.btn-default:hover,.btn-light:hover,.btn-secondary:hover,
.btn-default:focus,.btn-light:focus,.btn-secondary:focus,
.btn-default:active,.btn-light:active,.btn-secondary:active{
  background-color:#272c39!important;border-color:var(--border-strong)!important;color:var(--text-high)!important;
}
.btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#06291d!important;}
.btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#2a0710!important;}
.btn-warning{background-color:var(--warn)!important;border-color:var(--warn)!important;color:#2a1d00!important;}
.btn-outline-light{border-color:var(--border-strong)!important;color:var(--text-med)!important;background:transparent!important;}
.btn-transparent{color:var(--text-med);}
.btn:focus-visible{box-shadow:0 0 0 3px var(--ring)!important;}

/* ---------------------------------------------------------------------------
   8. TABLES / DataTables (H7, M2, M9)
   --------------------------------------------------------------------------- */
table.dataTable.display tbody th,table.dataTable.display tbody td,
table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,
table.dataTable td,table.dataTable th{
  background-color:transparent;border-color:var(--border-faint)!important;color:var(--text-med);
}
table.dataTable thead th,table.dataTable.display tfoot th{
  background-color:rgba(255,255,255,.02);
  color:var(--text-low);
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  border-bottom:1px solid var(--border)!important;
}
.dataTable:not(.js-selection-mode) tbody tr:hover td,.dataTable tbody tr:hover td{
  background-color:rgba(255,255,255,.03)!important;transition:background-color var(--dur-1) var(--ease-out);
}
/* active row: soft tint + accent bar; REVERT the forced white text/badge (R3) */
.dataTable tbody tr.active td,.dataTable tbody tr.active:hover td,
.dataTable:not(.js-selection-mode) tbody tr.active td,
.dataTable:not(.js-selection-mode) tbody tr.active:hover td{
  background-color:var(--accent-soft)!important;
  color:var(--text-high)!important;
  box-shadow:inset 3px 0 0 var(--accent);
}
.dataTable tbody tr.active a.link,.dataTable tbody tr.active a{color:var(--accent-bright)!important;}
.dataTable:not(.js-selection-mode) tbody tr.active .badge{color:inherit;}
td.option a,.action-option,td.dropdown-option button{color:var(--text-low);}
td.option a:hover,.action-option:hover,td.dropdown-option button:hover{color:var(--accent-bright);background-color:var(--accent-soft);}
/* pagination */
.dt-container .dt-paging .dt-paging-button .page-link,.page-link{
  background-color:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text-med)!important;border-radius:var(--radius-sm);
}
.dt-container .dt-paging .dt-paging-button .page-link:hover,.page-link:hover{background-color:#272c39!important;color:var(--text-high)!important;}
.dt-container .dt-paging .dt-paging-button.active .page-link,.page-item.active .page-link{
  background-color:var(--accent-soft)!important;border-color:transparent!important;color:var(--accent-bright)!important;font-weight:600;
}
.page-item.disabled .page-link{background-color:var(--surface)!important;color:var(--text-faint)!important;}
.dt-search input,.datatable-search{min-height:36px;}
.filter-section-container,.filter-item-box,.datatable-tools,.highlight-toolbar{background-color:transparent!important;border-color:var(--border)!important;}
.dt-container .dt-buttons .buttons-excel,.dt-container .dt-buttons .buttons-print{
  background-color:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text-med)!important;
}
/* DataTables loader: hidden by DEFAULT (DataTables sets inline display:block only
   while actually processing). This fixes the stuck/perma-visible spinner that
   appeared when the inline display:none got cleared. Transparent overlay, accent dots. */
div.dt-processing{display:none;}
div.dt-processing.card,div.dt-container div.dt-processing.card{background:transparent!important;border:none!important;box-shadow:none!important;}
div.dt-processing>div:last-child>div{background:var(--accent)!important;}

/* ---------------------------------------------------------------------------
   9. DROPDOWNS / POPOVERS / MODALS (M3, M4)
   --------------------------------------------------------------------------- */
.dropdown-menu,.notification-dropdown,.user-dropdown-menu,.language-dropdown,
.select2-drop,.app-popover,.popover-body,.note-editor .popover-content,.awesomplete ul{
  background-color:var(--surface-2)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-2)!important;
  color:var(--text-med)!important;
}
.dropdown-item,.awesomplete ul li{color:var(--text-med)!important;}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active,
.awesomplete ul li[aria-selected=false]:hover,.awesomplete ul li[aria-selected=true]{
  background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;
  transition:background-color var(--dur-1) var(--ease-out);
}
.dropdown-divider{border-color:var(--border);}
.dropdown-header{color:var(--text-low);}

.modal .modal-dialog .modal-content,.modal-content{
  background-color:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-xl)!important;
  box-shadow:var(--shadow-3)!important;
  overflow:hidden;color:var(--text-med);
}
.modal .modal-dialog .modal-content .modal-body,.modal-body{background-color:var(--surface)!important;color:var(--text-med);}
.modal-header{background-color:transparent!important;border-bottom:1px solid var(--border)!important;padding:18px 24px!important;}
.modal-footer{background-color:var(--surface-2)!important;border-top:1px solid var(--border)!important;padding:16px 24px!important;}
.modal-title{font-weight:600;color:var(--text-high);}
.modal-mask,.app-modal-body,.modal-backdrop{background-color:rgba(8,9,13,.62)!important;}
.btn-close,.modal-header .close{filter:invert(1) grayscale(1) brightness(1.4);opacity:.6;}
.btn-close:hover,.modal-header .close:hover{opacity:1;}

/* ---------------------------------------------------------------------------
   10. BADGES / STATUS / ALERTS (H5, M6, M10, L9)
   --------------------------------------------------------------------------- */
.badge{border-radius:var(--radius-sm);padding:4px 9px;font-weight:500;letter-spacing:.01em;}
.rounded-pill.badge-default,.badge.badge-default{background-color:var(--surface-2)!important;color:var(--text-med)!important;border:1px solid var(--border);}
/* retint Bootstrap-class pills to dark-readable tints (invoice statuses etc.) */
.badge.bg-success,.badge.badge-success{background-color:var(--success-soft)!important;color:var(--success)!important;}
.badge.bg-danger,.badge.badge-danger{background-color:var(--danger-soft)!important;color:var(--danger)!important;}
.badge.bg-warning,.badge.badge-warning{background-color:var(--warn-soft)!important;color:var(--warn)!important;}
.badge.bg-primary,.badge.badge-primary{background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;}
.badge.bg-info,.badge.badge-info{background-color:var(--info-soft)!important;color:var(--info)!important;}
.badge.bg-secondary{background-color:var(--surface-2)!important;color:var(--text-med)!important;}
/* inline-styled task/priority pills (style="background:#hex"): shape only, keep hue (R2) */
.badge[style*="background"]{border-radius:var(--radius-pill);padding:4px 10px;font-weight:500;}

.alert{border:0;border-radius:var(--radius-lg);}
.alert-success{background-color:var(--success-soft);color:var(--success);border-left:3px solid var(--success);}
.alert-danger{background-color:var(--danger-soft);color:var(--danger);border-left:3px solid var(--danger);}
.alert-warning{background-color:var(--warn-soft)!important;color:var(--warn);border-left:3px solid var(--warn);}
.alert-info{background-color:var(--info-soft);color:var(--info);border-left:3px solid var(--info);}
.app-alert.alert-info,.app-alert.alert-success,.app-alert.alert-danger,.app-alert.alert-warning{
  background-color:var(--surface-2)!important;color:var(--text-high)!important;
  box-shadow:var(--shadow-2);border-radius:var(--radius-lg);
}
.app-alert.alert-success{border-left:3px solid var(--success);}
.app-alert.alert-danger{border-left:3px solid var(--danger);}
.app-alert.alert-warning{border-left:3px solid var(--warn);}
.app-alert.alert-info{border-left:3px solid var(--info);}
.app-alert .btn-close-white,.app-alert .btn-close{filter:invert(1) grayscale(1) brightness(1.4);opacity:.6;}

/* ---------------------------------------------------------------------------
   11. TABS / PILLS / LIST-GROUP / PROGRESS
   --------------------------------------------------------------------------- */
/* base `.nav-tabs{border:1px solid #f1f1f5;border-radius:5px 5px 0 0}` is a full
   4-sided white frame — kill all sides, keep only a bottom divider */
.nav-tabs,.nav-tabs.title,.nav-tabs.bg-white,ul.nav-tabs{
  border:0!important;border-bottom:1px solid var(--border)!important;
  background-color:transparent!important;border-radius:0!important;
}
.nav-tabs .title-tab h4,.nav-tabs li.title-tab h4{color:var(--text-high);}
.nav-tabs li a,.nav-tabs .nav-link{color:var(--text-med);}
.nav-tabs li a.active,.nav-tabs .nav-link.active{color:var(--accent-bright);background:transparent;border-color:transparent;}
.nav-tabs li:not(.title-tab) a::after,.nav-tabs li a.active::after{background-color:var(--accent)!important;}
.nav-pills,.nav-pills li .active,.nav-pills li.active,#expense-tabs.nav-pills{background-color:transparent!important;}
.nav-pills .nav-link.active,.nav-pills li.active>a{background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;border-radius:var(--radius);}
.list-group-item{background-color:transparent!important;border-color:var(--border)!important;color:var(--text-med);}
.list-group-item:not(.active):hover,.list-group-item:not(.active):focus{background-color:rgba(255,255,255,.03)!important;color:var(--text-high);}
.list-group-item.active,.list-group.info-list .list-group-item.active{background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;border-color:transparent!important;}
.list-group-item:not(.active).unread-notification,.unread-notification{background-color:var(--accent-soft)!important;}
.progress{background-color:var(--surface-2)!important;border-radius:var(--radius-pill);}
.progress-bar{background-color:var(--accent);}

/* ---------------------------------------------------------------------------
   12. VENDOR WIDGETS — editors / pickers / calendar / chat (leak prevention)
   --------------------------------------------------------------------------- */
.note-editor.note-frame,.note-editor.fullscreen,.note-editor .note-toolbar,.note-toolbar,.notepad,
.note-editor.note-frame .note-btn,.note-editor.note-airframe .note-btn{
  background-color:var(--surface)!important;border-color:var(--border)!important;color:var(--text-med)!important;
}
.note-editor.note-frame .note-btn:hover{background-color:var(--surface-2)!important;}
.note-background{background:var(--surface)!important;}
/* TinyMCE */
.tox .tox-edit-area__iframe{background-color:var(--surface)!important;}
.tox .tox-toolbar,.tox .tox-toolbar-overflow,.tox .tox-toolbar-primary,.tox:not(.tox-tinymce-inline) .tox-editor-header,
.tox .tox-menu,.tox .tox-statusbar,.tox .tox-tbtn{background-color:var(--surface)!important;color:var(--text-med)!important;}
.tox .tox-tbtn:hover,.tox .tox-tbtn--enabled,.tox .tox-collection__item--enabled{background-color:var(--surface-2)!important;}
/* datepicker */
.datepicker,.datepicker-custom-selector,.datepicker-dropdown{background-color:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text-med)!important;}
.datepicker table tr td.day:hover,.datepicker table tr td.focused,
.datepicker .datepicker-switch:hover,.datepicker .prev:hover,.datepicker .next:hover{background-color:rgba(255,255,255,.05)!important;}
.datepicker table tr td.active,.datepicker table tr td.active.active,.datepicker table tr td.active:hover,
.datepicker table tr td span.active.active{background-color:var(--accent)!important;color:#fff!important;}
.datepicker table tr td.range{background-color:var(--accent-soft)!important;}
/* fullcalendar */
.fc-button{background-color:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text-med)!important;}
.fc-button:hover{background-color:#272c39!important;}
.fc .fc-daygrid-day.fc-day-today,.fc-theme-standard .fc-list-day-cushion{background-color:var(--accent-soft)!important;}
.fc-theme-standard td,.fc-theme-standard th,.fc-scrollgrid,.fc-theme-standard .fc-scrollgrid{border-color:var(--border)!important;}
.fc-theme-standard .fc-list-event:hover td,.fc .fc-list-event:hover td{background-color:rgba(255,255,255,.04)!important;}
/* dropzone / chat */
.dropzone,.post-dropzone{background-color:var(--field-bg)!important;border:1px dashed var(--border-strong)!important;color:var(--text-low);}
.rise-chat-wrapper,.rise-chat-footer,.rise-chat-footer textarea{background-color:var(--surface)!important;color:var(--text-med)!important;border-color:var(--border)!important;}
.chat-other .chat-msg{background-color:var(--surface-2)!important;color:var(--text-high);}
.chat-me .chat-msg{background-color:var(--accent-soft)!important;color:var(--text-high);}
.rise-chat-wrapper .message-row:hover{background-color:rgba(255,255,255,.03)!important;}
blockquote,pre{background-color:var(--surface-2)!important;color:var(--text-med)!important;border-radius:var(--radius);}
.chart-circle,.timeline-images .file-mockup,.file-mockup,.file-list-view{background-color:var(--surface-2)!important;}

/* ---------------------------------------------------------------------------
   13. SCROLLBARS + perfect-scrollbar
   --------------------------------------------------------------------------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20);background-clip:content-box;}
.ps__thumb-y,.ps__thumb-x{background-color:rgba(255,255,255,.16)!important;}
* {scrollbar-color:rgba(255,255,255,.16) transparent;}

/* ---------------------------------------------------------------------------
   14. ACCESSIBILITY — focus-visible (H3) — keyboard-driven CRM
   --------------------------------------------------------------------------- */
a:focus-visible,.btn:focus-visible,.dropdown-item:focus-visible,
.sidebar-menu li a:focus-visible,.nav-link:focus-visible,
.page-link:focus-visible,td.option a:focus-visible,.action-option:focus-visible{
  outline:none!important;box-shadow:0 0 0 3px var(--ring)!important;border-radius:var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   15. PRELOADER (L2)
   --------------------------------------------------------------------------- */
#pre-loader{background-color:var(--bg)!important;}
.app-loader{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);}
.loading{border-color:var(--border-strong)!important;border-top-color:var(--accent)!important;}

/* ---------------------------------------------------------------------------
   16. AUTH / PUBLIC — signin + signup (H6, M11, L7, L8)
   --------------------------------------------------------------------------- */
/* Dark premium canvas. Scrim is an overlay so the admin's configured signin
   background image (show_background_image_in_signin_page) still shows through,
   darkened for the dark theme; falls back to --bg gradient when no image set. */
body.signin-page::before,body.signup-page::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(91,141,239,.12),transparent 60%),
             linear-gradient(180deg,rgba(12,14,20,.55) 0%,rgba(12,14,20,.84) 100%);
}
body.signin-page .scrollable-page,body.signup-page .scrollable-page,
body.signin-page .form-signin,body.signup-page .form-signin{position:relative;z-index:1;}
body.signin-page .form-signin,body.signup-page .form-signin{max-width:430px;}
body.signin-page .form-signin .card,body.signup-page .form-signin .card{
  background-color:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-xl)!important;
  box-shadow:var(--shadow-3)!important;
}
body.signin-page .card-header,body.signup-page .card-header{background-color:transparent!important;border-bottom:1px solid var(--border)!important;padding-top:28px;padding-bottom:8px;}
body.signin-page .card-header h2{font-weight:600;color:var(--text-high);font-size:var(--fs-xl);}
body.signin-page .card-body,body.signup-page .card-body{padding:28px 30px 32px!important;}
body.signin-page .form-control{min-height:46px;font-size:var(--fs-md);}
body.signin-page .btn-lg.btn-primary,body.signup-page .btn-lg.btn-primary{
  min-height:48px;font-size:var(--fs-md);font-weight:600;box-shadow:var(--shadow-accent);
}
body.signin-page .g-recaptcha,#recaptcha-container{display:flex;justify-content:center;margin:12px 0;}
.form-signin a,#signin_link a{color:var(--accent);font-weight:500;}
.form-signin a:hover,#signin_link a:hover{color:var(--accent-bright);text-decoration:underline;}

/* ---------------------------------------------------------------------------
   17. DASHBOARD widgets (Q)
   --------------------------------------------------------------------------- */
#page-content.dashboard-view .widget-row,.dashboard-view .widget-row{background-color:transparent!important;}
.dashbaord-header-area{color:var(--text-high);}
.dashboard-icon-widget,.leads-info-widgets .widget,.widget[data-value]{
  background-color:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg);box-shadow:var(--shadow-1);
}
.widget-details h1{color:var(--text-high);font-weight:700;font-size:var(--fs-kpi);letter-spacing:var(--tracking-tight);}
.widget-icon.bg-primary{background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;}
.widget-icon.bg-info{background-color:var(--info-soft)!important;color:var(--info)!important;}
.widget-icon.bg-success{background-color:var(--success-soft)!important;color:var(--success)!important;}
.widget-icon.bg-coral,.widget-icon.bg-orange{background-color:var(--warn-soft)!important;color:var(--warn)!important;}
a.white-link,.white-link{color:var(--text-high);}

/* empty states (L5) */
.no-widgets [data-feather],.leads-info-widgets .empty-glyph,.empty-state-icon{color:var(--text-faint)!important;}

/* ---------------------------------------------------------------------------
   18. MOBILE bottom nav + misc
   --------------------------------------------------------------------------- */
.mobile-bottom-menu{background-color:var(--chrome)!important;border-top:1px solid var(--border-faint)!important;}
.mobile-bottom-menu .menu-item .icon{transition:transform var(--dur-2) var(--ease-spring);}

/* GSAP entrance prep — elements start hidden ONLY when JS+motion is active
   (class added by f86-premium.js so no-JS users still see content) */
.f86-motion #page-content .card,
.f86-motion .dashboard-view .widget-row .card{will-change:transform,opacity;}

/* ===========================================================================
   PASS 2 — white-line hunt, charts, timeline, progress, buttons, empty states
   =========================================================================== */

/* ---- 20. Remaining white lines / white surfaces (#f1f1f5 / #fff leaks) ---- */
/* white action buttons inside table rows (the most visible "gạch trắng") */
td.option a,.action-option,td.dropdown-option button,.external-tickets-embedded-code,.copy-file-link{
  background-color:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text-low)!important;
  border-radius:var(--radius-sm);transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);
}
td.option a:hover,.action-option:hover,td.dropdown-option button:hover,
td.option a:hover.light,.action-option:hover.light,.external-tickets-embedded-code:hover.light,.copy-file-link:hover.light{
  background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;border-color:transparent!important;
}
/* table borders */
table.dataTable{border-bottom-color:var(--border-faint)!important;}
table.dataTable thead th{border-top-color:var(--border)!important;}
.dataTable:not(.js-selection-mode) tbody tr,.dataTable tbody tr{border-color:var(--border-faint)!important;}
table.dataTable.display tbody th,table.dataTable.display tbody td,
table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,
table.dataTable.b-b-only tbody th,table.dataTable.b-b-only tbody td,
table.dataTable.display tfoot th,table.dataTable.display tfoot td,
table.dataTable>tbody>tr.child ul.dtr-details>li,
.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,
.rich-text-container table td{
  border-color:var(--border-faint)!important;background-color:transparent!important;color:var(--text-med);
}
/* misc dividers / borders still using #f1f1f5 */
.widget,.b-a,.b-r-2,.card .nav-tabs,.tab-title,.widget-todo-input-box .input-group,
#client-summary .box .box-content,.global-search-modal .modal-content .modal-body.search-modal .col-sm-3,
.list-group.info-list .list-group-item,.estimate_request_form.list-group-item{
  border-color:var(--border)!important;
}
.card-footer{border-top-color:var(--border)!important;}
.b-water{border-color:var(--border-strong)!important;}
/* table cells default to dark text colour */
table.dataTable td,table.dataTable th,.dataTable:not(.js-selection-mode) tbody tr{color:var(--text-med);}

/* ---- 21. PROJECT TIMELINE — frappe-gantt (SVG) dark restyle ---- */
.gantt-container{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);}
.gantt .grid-background{fill:none!important;}
.gantt .grid-header{fill:var(--chrome)!important;stroke:var(--border)!important;}
.gantt .grid-row{fill:var(--surface)!important;}
.gantt .grid-row:nth-child(even){fill:var(--surface-2)!important;}
.gantt .row-line{stroke:var(--border-faint)!important;}
.gantt .tick{stroke:var(--border-faint)!important;}
.gantt .tick.thick{stroke:var(--border)!important;}
.gantt .today-highlight{fill:var(--accent)!important;opacity:.10!important;}
.gantt .arrow{stroke:var(--text-low)!important;}
/* fill NOT !important → inline status fill (dark-tuned by f86TuneSwatches) wins;
   #2C3340 is the fallback for group/parent bars with no bg_color */
.gantt .bar{fill:#2C3340;stroke:var(--border-strong)!important;}
.gantt .bar-progress{fill:rgba(255,255,255,.22)!important;}
.gantt .bar-wrapper:hover .bar,.gantt .bar-wrapper.active .bar{stroke:var(--accent)!important;}
.gantt .bar-wrapper:hover .bar-progress,.gantt .bar-wrapper.active .bar-progress{fill:rgba(255,255,255,.32)!important;}
.gantt .bar-label{fill:#fff!important;paint-order:stroke;stroke:rgba(15,17,23,.5);stroke-width:2px;}
.gantt .bar-label.big,.gantt .bar-invalid~.bar-label{fill:var(--text-med)!important;}
.gantt .lower-text{fill:var(--text-med)!important;}
.gantt .upper-text{fill:var(--text-low)!important;}
.gantt .handle{fill:var(--text-low)!important;}
.gantt-container .popup-wrapper{background:var(--surface-2)!important;color:var(--text-med)!important;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);}
.gantt-container .popup-wrapper .title{border-bottom:2px solid var(--accent)!important;color:var(--text-high);}
.gantt-container .popup-wrapper .subtitle{color:var(--text-low)!important;}
.gantt-container .popup-wrapper .pointer{border-top-color:var(--surface-2)!important;}

/* ---- 22. PROGRESS BARS (contrast + premium) ---- */
.progress{background-color:rgba(255,255,255,.06)!important;height:8px;border-radius:var(--radius-pill);overflow:hidden;}
.progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-bright))!important;border-radius:var(--radius-pill);transition:width .6s var(--ease-out);}
.progress-bar.bg-success,.progress .bg-success{background:var(--success)!important;}
.progress-bar.bg-danger,.progress .bg-danger{background:var(--danger)!important;}
.progress-bar.bg-warning,.progress .bg-warning{background:var(--warn)!important;}
.progress-bar.bg-info,.progress .bg-info{background:var(--info)!important;}
/* circular / task progress rings keep accent */
.chart-circle .chart-circle-value{color:var(--text-high);}

/* ---- 23. BUTTONS — stronger contrast & presence ---- */
.btn{font-weight:600;}
.btn-primary,.btn-primary.btn-info{
  background:linear-gradient(180deg,var(--accent-bright),var(--accent))!important;
  border:1px solid var(--accent-press)!important;color:#fff!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 8px -2px rgba(91,141,239,.5);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary.btn-info:hover{
  background:linear-gradient(180deg,#7BA0FF,var(--accent-bright))!important;box-shadow:var(--shadow-accent)!important;
}
.btn-primary:active{background:var(--accent-press)!important;}
.btn-default,.btn-light,.btn-secondary{color:var(--text-high)!important;font-weight:500;}
.btn-success,.btn-danger,.btn-warning,.btn-info{color:#0c0f16!important;font-weight:600;}
.btn-link{color:var(--accent)!important;}
.btn-link:hover{color:var(--accent-bright)!important;}
/* small icon/round action buttons keep clear hit-state */
.btn.round,.btn-sm{border-radius:var(--radius-sm);}

/* ---- 24. EMPTY STATES — "No record found" / no data ---- */
.dataTables_empty,td.dt-empty,.dt-empty{
  color:var(--text-low)!important;text-align:center;padding:44px 16px!important;
  font-size:var(--fs-base);background-color:transparent!important;border:0!important;letter-spacing:.01em;
}
td.dt-empty::before,.dataTables_empty::before{
  content:"";display:block;width:40px;height:40px;margin:0 auto 12px;opacity:.5;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%237B8597' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
.no-data,.no-record,.empty-message,.no-widgets{color:var(--text-low);text-align:center;padding:32px 16px;}

/* ---- 25. DASHBOARD polish ---- */
.dashboard-view .widget-row,#page-content.dashboard-view .widget-row{margin-bottom:var(--sp-5);gap:var(--sp-4);}
.dashbaord-header-area,.dashboard-header-area{color:var(--text-high);font-weight:600;}
.dashboard-icon-widget{padding:var(--sp-5);border-radius:var(--radius-lg);}
.dashboard-icon-widget .widget-icon,.widget-icon{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);
}
.dashboard-icon-widget .widget-title,.widget .widget-title{color:var(--text-low);font-size:var(--fs-sm);font-weight:500;letter-spacing:.01em;}
.dashboard-icon-widget:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--border-strong);}
.dashboard-widget canvas,.card-body canvas{max-width:100%;}
.color-tag.border-circle{box-shadow:0 0 0 2px rgba(255,255,255,.06);}

/* ---- 26. DataTables 2.x pagination — fix white <li> boxes + icon contrast ----
   Base sets `.dt-paging-button{background:#fff!important}` on the <li> and makes
   the disabled `.page-link` transparent, so disabled prev/next showed as white
   boxes. Match the base specificity (+ later source order) to win. */
.dt-container .dt-paging .dt-paging-button,
ul.pagination li.dt-paging-button,
ul.pagination li.page-item{
  background:transparent!important;border:0!important;
}
.dt-container .dt-paging .dt-paging-button .page-link,
ul.pagination .page-link{
  background-color:var(--surface-2)!important;
  border:1px solid var(--border)!important;
  color:var(--text-med)!important;
  border-radius:var(--radius-sm)!important;
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.dt-container .dt-paging .dt-paging-button .page-link:hover,
ul.pagination .page-link:hover{
  background-color:#272c39!important;border-color:var(--border-strong)!important;color:var(--text-high)!important;
}
.dt-container .dt-paging .dt-paging-button.active .page-link,
ul.pagination .page-item.active .page-link{
  background-color:var(--accent-soft)!important;border-color:transparent!important;color:var(--accent-bright)!important;font-weight:600;
}
.dt-container .dt-paging .dt-paging-button.disabled .page-link,
ul.pagination .page-item.disabled .page-link{
  background-color:var(--surface)!important;border-color:var(--border-faint)!important;color:var(--text-faint)!important;
  cursor:default;opacity:1;
}
/* feather chevrons inside prev/next render at their 16px box, vertically centred */
.dt-container .dt-paging .page-link svg,
ul.pagination .page-link svg.feather{width:16px;height:16px;stroke:currentColor;}

/* ---- 27. Kanban task board + leftover old-accent colors ----
   Base `.kanban-col .kanban-col-title` (0,2,0) and `.kanban-col .kanban-item-list
   .kanban-item` (0,3,0) out-specify pass-1's `.kanban-item` — they stayed white.
   Match/beat specificity. */
.kanban-container,.kanban-col,.kanban-board{background-color:transparent!important;}
.kanban-col .kanban-col-title,.kanban-col.kanban-col-collapsed .kanban-col-title{
  background-color:var(--chrome)!important;color:var(--text-high)!important;
  border:1px solid var(--border)!important;border-radius:var(--radius);
}
.kanban-col .kanban-item-list .kanban-item{
  background-color:var(--surface)!important;border:1px solid var(--border)!important;
  color:var(--text-med);border-radius:var(--radius);box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
.kanban-col .kanban-item-list .kanban-item:hover{box-shadow:var(--shadow-2);border-color:var(--border-strong)!important;transform:translateY(-1px);}
.kanban-col .kanban-input .form-control{background-color:var(--field-bg)!important;border-color:var(--field-border)!important;color:var(--text-high)!important;}
/* leftover old accent / cyan */
.sub-task-filter-active,.sub-task-filter-kanban-active{background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;}
td.dropdown-option button:hover,td.dropdown-option button:focus,td.dropdown-option button:active{
  background-color:var(--accent-soft)!important;color:var(--accent-bright)!important;border-color:transparent!important;
}
/* label badges: JS sets contrasting text colour (see f86-premium.js); ensure shape+weight here */
.badge.clickable[style*="background"],.badge[style*="background-color"]{font-weight:600;border-radius:var(--radius-sm);padding:4px 9px;}

/* ---- 28. Color-system harmonization (charts/progress/status — from workflow) ----
   Chart segment + legend swatch + status badge all flow through one shared
   darkTune() in f86-premium.js; these CSS rules close the class-based gaps. */
:root{--progress-track:rgba(255,255,255,.06);}
/* progress bars: legacy semantic classes the dark theme missed */
.progress-bar.progress-bar-success,.progress .progress-bar-success{background:var(--success)!important;}
.progress-bar.bg-orange,.progress .bg-orange{background:var(--warn)!important;}
.progress-bar.bg-secondary,.progress .bg-secondary{background:var(--surface-2)!important;}
.progress-bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
/* project-overview headline arc: beat the 4-class legacy green */
.project-overview-widget .progress-outline{border-color:var(--accent-soft)!important;}
.project-overview-widget .progress-outline .progress .progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-bright))!important;}
/* semantic text utilities used for counts (Hold/Completed/etc.) */
.text-warning{color:var(--warn)!important;}
.text-success{color:var(--success)!important;}
.text-info{color:var(--info)!important;}
/* sidebar progress-ring banner: tame the raw #6690F4 .bg-primary block */
.card .bg-primary.p30{background:var(--accent-soft)!important;color:var(--accent-bright)!important;}

/* ---- 29. White-frame border sweep — every base rule using a full `border:`
   shorthand in #f1f1f5/#e0e0e0/#ddd (4-sided white frames). border-COLOR only,
   so no layout changes; !important + exact selectors beat base (incl. base !important). */
.atwho-view,.datatable-export a,
.dtr-details .edit:not(.dropdown-item),.dtr-details .delete:not(.dropdown-item),
.select-member-field a.delete,.send-invitation-form .delete,.automation-form .delete,
.calendar-ids-form .delete-post-dropzone,.edit-image-file .delete-saved-file,
.external-tickets-embedded-code,.conversion-rate-form .delete,.copy-file-link,
td.dropdown-option button,.custom-date-range-lable,.custom-date-range-dropdown .dropdown-toggle,
.tox.tox-tinymce,.iti .iti__dropdown-content,.iti .iti__dropdown-content .iti__search-input,
.milestone,.invoice-styles .item,.todo-input-box input,.add-column-drop,.dashed_border,
.lead-migration-contacts,.editable-input .editable-date,#keyboard-shortcut-modal-form .bg-white,
.edit-image-file,.item-search-box,input[type=color],.circle-progress-bar,
.nav-pills,.file-list-view,.file-manager-preview-section .text-white,#generate_password,
.condition-field-expected_value_1:not(.empty-input-tag,.single-input-tag),
.support-type-label,.box-wrapper .box-avatar.hover::after,
.compact-view-active .compact-view-left-panel .datatable-tools,.flex-item-row,
.badge.bg-transparent{
  border-color:var(--border)!important;
}

/* ---- 30. Chart-widget framing — intentional, not default ---- */
/* header: icon in a tinted accent chip + clean title */
.card>.card-header,.dashboard-widget .card-header{display:flex;align-items:center;gap:10px;font-size:var(--fs-md);font-weight:600;padding:14px 18px;}
.card>.card-header [data-feather],.card>.card-header .icon-16,.card>.card-header svg.feather{
  color:var(--accent-bright);flex:0 0 auto;width:18px;height:18px;
}
/* KPI / legend values: tabular, tight, prominent */
.card-body .strong,.widget-details h1,.box-content h4,.dashboard-widget .strong{
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);color:var(--text-high);
}
/* side legend dots (income/expense etc.) — styling only. (Removed the broad
   `.card-body .mb-1/.mb-2{display:flex}` rule: it risked breaking unrelated layouts.) */
.card-body .color-tag.border-circle{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.04);}
/* CRITICAL: never give a .card-body canvas a margin. With responsive +
   maintainAspectRatio:false charts (e.g. All Timesheets, a bar chart whose canvas
   is the only child of .card-body), any margin makes the auto-height parent taller
   than the canvas → Chart.js grows the canvas → size-monitor re-fires → infinite
   vertical stretch. Force margin:0 to immunise against this. */
.card-body canvas,.dashboard-widget canvas{display:block;margin:0!important;}
/* stat tiles: accent edge — scoped to .dashboard-icon-widget so overflow:hidden
   can never clip a chart canvas in another widget type */
.dashboard-icon-widget{position:relative;overflow:hidden;}
.dashboard-icon-widget::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),transparent);opacity:.5;}

/* ---------------------------------------------------------------------------
   19. REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* ##################################################################
   REDESIGN v2 — ground-up component redesign (workflow wi57l4nir,
   authored + adversarially verified). Loaded last → supersedes earlier
   first-pass rules on ties. Appearance + CSS-layout only; JS contracts intact.
   ################################################################## */
/* ===== REDESIGN v2 :: page-title-breadcrumb ===== */
/* ============================================================
   MODULE: page-title-breadcrumb  (premium dark override)
   Authoritative sheet, loaded last. Appearance + CSS-layout only.
   ============================================================ */

/* --- Page title bar: from float-based white card to flex chrome bar --- */
.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  background: var(--chrome) !important;
  color: var(--text-med) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: var(--sp-2) var(--sp-5);
  box-shadow: var(--shadow-1);
}

/* Variants seen in markup that suppress bg/border/radius */
.page-title.no-bg {
  background: transparent !important;
  box-shadow: none;
}
.page-title.no-border {
  border-bottom-color: transparent !important;
}
.page-title.no-border-top-radius {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Heading: large, tight, high-contrast; drop the float */
.page-title h1 {
  float: none;
  margin: 0;
  padding: var(--sp-2) 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--text-high);
}
.page-title h1 svg,
.page-title h1 [data-feather] {
  margin-top: -3px;
  color: var(--text-med);
  vertical-align: middle;
}

/* Secondary sub-heading row */
.page-title h4 {
  float: none;
  margin: 0;
  padding: 4px 0;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-med);
  letter-spacing: var(--tracking-tight);
}

/* Inline buttons inside the bar */
.page-title .btn {
  margin: 0;
}
.page-title .btn svg,
.page-title .btn [data-feather] {
  margin-top: -2px;
}

/* --- Title button group: flex cluster, no floats/margins --- */
.title-button-group,
.page-title .title-button-group,
.tab-title .title-button-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  float: none;
  margin: 0;
}
.title-button-group .dropdown svg,
.title-button-group .dropdown [data-feather] {
  vertical-align: middle;
}

/* --- Tab title bar (sibling pattern to page-title) --- */
.tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.tab-title.no-border {
  border-bottom-color: transparent;
}
.tab-title h4 {
  float: none;
  margin: 0;
  padding: var(--sp-3) 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-high);
}
.tab-title .btn {
  margin: 0;
}

/* nav-tabs.title alignment helper */
.nav-tabs.title .tab-title {
  margin-left: auto;
}
.nav-tabs.title .title-button-group {
  margin-top: 0;
}

/* --- Breadcrumb (default unstyled Bootstrap markup) --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-tight);
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--text-low);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: var(--text-med);
  text-decoration: none;
}
.breadcrumb-item.active {
  color: var(--text-high);
  font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 4px;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-faint);
  padding-right: 4px;
}

/* ===== REDESIGN v2 :: box-panel ===== */
/* ============================================================
   MODULE: box-panel  (.box / .box-title / .box-content + b-* dividers)
   Premium dark redesign via override only. APPEARANCE + tokens.
   Layout-critical display:table / display:table-cell preserved.
   ============================================================ */

/* --- Panel header: from centered ::after-divider label to a calm left-aligned header --- */
.box-title {
  position: relative;
  margin: 0 0 var(--sp-3);
  padding: 0;
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--text-high);
}

/* Neutralize the old centered 1px #f1f1f5 line behind the title.
   Repurpose ::after as a calm full-width hairline UNDER the header.
   Base RISE declares this pseudo as a centered absolutely-positioned
   line (often with !important), so the override must win on every
   visual prop and explicitly null out leftover base geometry
   (right/bottom/transform/side-margins/border) that would otherwise
   displace or double the new hairline. */
.box-title:after {
  content: "" !important;
  display: block !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: 1px !important;
  margin: var(--sp-2) 0 0 !important;
  border: 0 !important;
  transform: none !important;
  background: var(--border) !important;
  background-color: var(--border) !important;
}

/* The label chip used to sit on a #fff background to "cut" the divider.
   Now it's just inline text — kill the white pill background and the
   negative side-margins/padding the base used to overlap the line. */
.box-title span {
  display: inline-block;
  position: relative;
  z-index: 11;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-high);
  font-weight: 600;
}

/* Excel preview reuses the same header treatment */
#excel-preview-container .box-title:after {
  background: var(--border) !important;
  background-color: var(--border) !important;
}

/* --- Box container: keep table layout, tokenize chrome --- */
.box {
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  width: 100%;
  color: var(--text-med);
}

.box-content {
  display: table-cell;
  vertical-align: top;
  height: 100%;
  float: none;
  overflow-x: hidden;
  color: var(--text-med);
}

.box.fit .box-content {
  width: 100%;
}

/* Client summary stacks box-content into rows on small screens — keep that,
   just tokenize the separating border. */
#client-summary .box .box-content {
  border-bottom: 1px solid var(--border);
}
#client-summary .box .box-content:last-child {
  border-bottom: none;
}

/* --- In-box dividers (b-* helpers were hardcoded #f1f1f5) --- */
.b-a {
  border: 1px solid var(--border) !important;
}
.b-t {
  border-top: 1px solid var(--border);
}
.b-r {
  border-right: 1px solid var(--border);
}
.b-b {
  border-bottom: 1px solid var(--border) !important;
}
.b-l {
  border-left: 1px solid var(--border);
}
.b-r-2 {
  border-right: 2px solid var(--border-strong);
}

/* The cover widget right divider sits inside boxes too */
.cover-widget .b-r {
  border-right: 1px solid var(--border);
}

/* ===== REDESIGN v2 :: tabs-redesign ===== */
/* ===== MODULE: tabs-redesign — premium dark tab strips ===== */

/* Tab strip frame: strip the white box + radius, keep only a 1px bottom divider */
.nav-tabs,
.nav-tabs.title,
.nav-tabs.rounded.classic {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Bootstrap nav-link reset within tabs */
.nav-tabs .nav-link {
  border: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Tab item link: calm, comfortable rhythm.
   position:relative establishes the containing block for the ::after
   underline (base only sets position:absolute on the bar, never the
   anchor) so the inset left/width values resolve against the link box. */
.nav-tabs li a,
.nav-tabs .nav-link {
  position: relative;
  color: var(--text-med);
  padding: 14px 16px;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: var(--fs-base);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

/* Hover: lift the label tone, no background fill */
.nav-tabs li a:not(.active):hover,
.nav-tabs .nav-link:not(.active):hover {
  color: var(--text-high);
  background: transparent;
  border-color: transparent !important;
}

/* Active label: accent + weight, no frame */
.nav-tabs li a.active,
.nav-tabs .nav-link.active,
.nav-tabs li .active,
.nav-tabs li.active {
  color: var(--accent-bright) !important;
  font-weight: 600;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  cursor: default;
}

.nav-tabs li .active:focus,
.nav-tabs li.active:focus,
.nav-tabs .nav-link.active:focus {
  outline: none;
}

/* Underline indicator: clean 2px accent bar, animated in */
.nav-tabs li:not(.title-tab) a::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent) !important;
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out);
}

/* Active bar: full-width inset accent */
.nav-tabs li a.active::after {
  width: calc(100% - 32px) !important;
  left: 16px !important;
  background-color: var(--accent) !important;
  transform: scaleX(1) !important;
}

/* Hover preview of the bar (subtler than active) */
.nav-tabs li:not(.title-tab) a:not(.active):hover::after {
  width: calc(100% - 32px) !important;
  left: 16px !important;
  background-color: var(--border-strong) !important;
  transform: scaleX(1);
}

/* Title-variant tab strip: same flush, divider-only treatment */
.nav-tabs.title li a {
  padding: 18px 16px;
}
.nav-tabs.title .title-button-group {
  margin-top: 3px;
}
.nav-tabs.title .tab-title {
  margin-left: auto;
}

/* Tab-title bar inherits the same hairline divider + token text */
.tab-title {
  border-bottom: 1px solid var(--border);
}
.tab-title h4 {
  color: var(--text-high);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* Keyboard focus visibility on tab links (calm accent ring) */
.nav-tabs li a:focus-visible,
.nav-tabs .nav-link:focus-visible {
  outline: none;
  color: var(--text-high);
  box-shadow: inset 0 0 0 2px var(--ring);
  border-radius: var(--radius-sm);
}

/* Preserve scrollable-tabs behaviour: keep overflow scroll, hide scrollbar */
.scrollable-tabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollable-tabs::-webkit-scrollbar {
  display: none;
}

/* ===== REDESIGN v2 :: select2-v3 ===== */
/* ============================================================
   MODULE: select2-v3 — premium dark dropdown
   Appearance-only override. select2 v3 JS owns structure.
   ============================================================ */

/* --- Dropdown panel --- */
.select2-drop,
.select2-drop-active {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important; /* all corners, not 0 0 6px 6px */
  box-shadow: var(--shadow-2) !important;
  color: var(--text-med);
  overflow: hidden;
}

/* keep the open-above / open-below variants fully rounded too */
.select2-drop.select2-drop-above,
.select2-drop-active.select2-drop-above {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
}

/* the choice that owns the open drop should feel connected, still rounded */
.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* --- Search box inside the drop --- */
.select2-search {
  padding: var(--sp-2);
  margin: 0;
}

.select2-search input,
.select2-input {
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text-high) !important;
  border-radius: var(--radius) !important;
  height: auto !important;
  padding: 7px 30px 7px 10px !important; /* keep room for the search glyph */
  font-size: var(--fs-base) !important;
  background-image: none !important; /* drop legacy search sprite */
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
}

.select2-search input::placeholder,
.select2-input::placeholder {
  color: var(--text-low);
}

.select2-search input:focus,
.select2-input:focus {
  background: var(--field-bg-focus) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
  outline: none;
}

/* loading / inactive search states */
.select2-search.select2-active input {
  background-color: var(--field-bg) !important;
}

/* --- Results list --- */
.select2-results {
  padding: 4px;
  margin: 0;
  color: var(--text-med);
}

.select2-results .select2-result {
  margin: 0;
}

.select2-result-label {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-med);
  transition: background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}

/* hover / keyboard highlighted result */
.select2-results .select2-highlighted {
  background: var(--accent-soft) !important;
  background-color: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}

.select2-results .select2-highlighted .select2-result-label {
  color: var(--accent-bright) !important;
}

/* already-selected / disabled rows stay calm */
.select2-results .select2-selected {
  color: var(--text-low);
}

.select2-results .select2-disabled {
  background: transparent !important;
  color: var(--text-faint);
}

.select2-results .select2-disabled.select2-highlighted {
  background: transparent !important;
}

/* nested option group headers */
.select2-results .select2-result-with-children > .select2-result-label {
  color: var(--text-low);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
}

.select2-results-dept-1 .select2-result-label {
  padding-left: 20px;
}

/* matched substring */
.select2-match {
  font-weight: 600;
  color: var(--accent-bright);
  text-decoration: none;
}

.select2-highlighted .select2-match {
  color: var(--accent-bright);
}

/* empty / loading messages */
.select2-no-results,
.select2-searching,
.select2-ajax-error {
  color: var(--text-low);
  padding: 8px 10px;
  background: transparent;
  font-size: var(--fs-sm);
}

.select2-more-results {
  color: var(--text-low);
  padding: 8px 10px;
  background: transparent;
}

/* --- Closed control: single + multi choices --- */
.select2-container .select2-choice,
.select2-container .select2-choices,
.select2-container-multi .select2-choices {
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text-high);
  border-radius: var(--radius) !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
}

.select2-container .select2-choice .select2-chosen,
.select2-container-multi .select2-choices {
  color: var(--text-high);
}

.select2-container .select2-choice > .select2-chosen {
  color: var(--text-high);
}

/* placeholder text on the closed control */
.select2-container .select2-choice .select2-chosen.select2-default,
.select2-container.select2-allowclear .select2-choice .select2-chosen {
  color: var(--text-low);
}

/* focus / hover on the closed control */
.select2-container.select2-container-active .select2-choice,
.select2-container.select2-container-active .select2-choices,
.select2-container-active.select2-container-multi .select2-choices {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

.select2-container .select2-choice:hover,
.select2-container-multi .select2-choices:hover {
  border-color: var(--border-strong) !important;
}

/* dropdown arrow */
.select2-container .select2-choice .select2-arrow {
  background: transparent !important;
  border-left: 1px solid var(--border-faint) !important;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.select2-container .select2-choice .select2-arrow b {
  background-position: 0 4px;
  opacity: .55;
}

/* clear (x) on single allowclear */
.select2-container .select2-choice abbr.select2-search-choice-close,
.select2-container .select2-choice .select2-search-choice-close {
  opacity: .6;
}

.select2-container .select2-choice abbr.select2-search-choice-close:hover {
  opacity: 1;
}

/* --- Multi-select pills --- */
.select2-search-choice {
  background: var(--surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-color: var(--border) !important;
  color: var(--text-high) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  padding: 4px 7px 4px 20px !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  margin: 4px 0 0 5px;
}

.select2-search-choice .select2-chosen,
.select2-container-multi .select2-search-choice span {
  color: var(--text-high) !important;
}

/* pill remove (x) */
.select2-search-choice .select2-search-choice-close {
  opacity: .6;
  top: 4px;
}

.select2-search-choice:hover .select2-search-choice-close,
.select2-search-choice .select2-search-choice-close:hover {
  opacity: 1;
}

.select2-search-choice-focus {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

/* multi inline search field input */
.select2-container-multi .select2-choices .select2-search-field input,
.select2-container .select2-choice .select2-search-field input {
  background: transparent !important;
  border: none !important;
  color: var(--text-high) !important;
  box-shadow: none !important;
}

.select2-container-multi .select2-choices .select2-search-field input::placeholder {
  color: var(--text-low);
}

/* disabled state */
.select2-container.select2-container-disabled .select2-choice,
.select2-container.select2-container-disabled .select2-choices {
  background: var(--chrome) !important;
  border-color: var(--border-faint) !important;
  color: var(--text-low);
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background: transparent !important;
  border-left-color: var(--border-faint) !important;
}

/* ===== REDESIGN v2 :: select2-context-leaks (2026-06-17) ===== */
/* Base app.all.css scopes select2 boxes per-context with HIGHER specificity +
   !important (.custom-toolbar 0,3,0 / .general-form.white 0,4,0 / .filter-section-
   container / .datatable-tools / .timesheet-buttons / .item-categories-filter-
   section / .payment-received-chart), forcing #fff / #f9f9f9 Bootstrap boxes the
   plain .select2-choice override (0,2,0) cannot beat. Re-assert dark field styling
   at matching specificity. Reported case: calendar "- Event label -" dropdown
   (#event-labels-dropdown, inside .custom-toolbar in events/index.php). */
.custom-toolbar .select2-container .select2-choice,
.custom-toolbar .select2-container .select2-choices,
.general-form.white .select2-container .select2-choice,
.general-form.white .select2-container-multi.form-control .select2-choices,
.filter-section-container .select2-choice,
.datatable-tools .select2-choice,
.timesheet-buttons .select2-choice,
.item-categories-filter-section .select2-choice,
.payment-received-chart .select2-choice {
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-color: var(--field-border) !important;
  color: var(--text-high) !important;
}
/* the filter-section group set `color:unset!important` on .select2-choice → restore */
.custom-toolbar .select2-container .select2-choice .select2-chosen,
.general-form.white .select2-container .select2-choice .select2-chosen,
.filter-section-container .select2-choice .select2-chosen,
.datatable-tools .select2-choice .select2-chosen,
.timesheet-buttons .select2-choice .select2-chosen,
.item-categories-filter-section .select2-choice .select2-chosen,
.payment-received-chart .select2-choice .select2-chosen {
  color: var(--text-high) !important;
}
/* default/placeholder text ("- Event label -") stays muted, not stark white */
.custom-toolbar .select2-container .select2-choice .select2-chosen.select2-default,
.filter-section-container .select2-choice .select2-chosen.select2-default,
.datatable-tools .select2-choice .select2-chosen.select2-default {
  color: var(--text-low) !important;
}
/* toolbar dropdown toggle buttons (base forced #fff) */
.custom-toolbar .dropdown-toggle {
  background-color: var(--field-bg) !important;
  border-color: var(--field-border) !important;
  color: var(--text-high) !important;
}

/* ===== REDESIGN v2 :: avatars ===== */
/* ============================================================
   MODULE: avatars — premium dark override
   Base rules live in app.all.css (~5365, ~9159).
   Appearance-only; sizes (.avatar-lg/md/sm/xs/xxs) untouched.
   ============================================================ */

/* Base avatar image — keep circular, refine rendering */
.avatar img {
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  background-color: var(--surface-2);
}

/* Primary-contact emphasis ring (was #6690F4) */
.avatar.primary-contact img {
  border: 2px solid var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Online presence dot — calm success + chrome ring (base used #42b72a / #fff;
   color skin color/1E202D.css also sets i.online border-color, so force ours) */
i.online {
  background: var(--success) !important;
  border: 2px solid var(--chrome) !important;
  -webkit-box-shadow: 0 0 0 2px var(--success-soft);
  box-shadow: 0 0 0 2px var(--success-soft);
}

/* ---- Avatar group (overlapping stack) ---- */
.avatar-group .user-avatar {
  border: 2px solid var(--chrome) !important;
  -webkit-box-shadow: var(--shadow-1);
  box-shadow: var(--shadow-1);
  -webkit-transition: -webkit-transform var(--dur-2) var(--ease-spring), z-index 0s, -webkit-box-shadow var(--dur-2) var(--ease-out);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  will-change: transform;
}
.avatar-group .user-avatar img {
  background-color: var(--surface-2);
}
.avatar-group .user-avatar:hover {
  -webkit-transform: translateY(-2px) scale(1.04);
  transform: translateY(-2px) scale(1.04);
  z-index: 2;
  border-color: var(--border-strong);
  -webkit-box-shadow: var(--shadow-2);
  box-shadow: var(--shadow-2);
}

/* ===== REDESIGN v2 :: bootstrap-defaults ===== */
/* =========================================================================
   MODULE: bootstrap-defaults  — premium dark for BS components RISE never themed
   Accordion · Tooltip · Popover · app-popover · modal-backdrop · Offcanvas
   form-switch · form-range
   ========================================================================= */

/* ---- Accordion ---------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--text-med);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-accordion-btn-color: var(--text-high);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-active-color: var(--accent-bright);
  --bs-accordion-active-bg: var(--accent-soft);
  --bs-accordion-btn-focus-border-color: var(--accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--ring);
  --bs-accordion-body-color: var(--text-med);
}
.accordion,
.accordion-item {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-med);
}
.accordion-item {
  border: 1px solid var(--border);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.accordion-item:last-of-type {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.accordion-button {
  background: var(--surface);
  color: var(--text-high);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  padding: var(--sp-3) var(--sp-4);
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.accordion-button:hover {
  background: var(--surface-2);
  color: var(--text-high);
}
.accordion-button:not(.collapsed) {
  background: var(--accent-soft);
  color: var(--accent-bright);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px var(--ring);
  border-color: var(--accent);
  outline: none;
  z-index: 3;
}
/* chevron glyph — invert the dark default svg (stroke %23212529) so it reads on dark surface */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  filter: invert(1) opacity(.6);
  transition: transform var(--dur-2) var(--ease-spring), filter var(--dur-1) var(--ease-out);
}
.accordion-button:not(.collapsed)::after {
  filter: invert(1) opacity(.85);
}
.accordion-body {
  background: var(--surface);
  color: var(--text-med);
  padding: var(--sp-4);
}

/* ---- Tooltip ------------------------------------------------------------ */
.tooltip {
  --bs-tooltip-bg: var(--surface-2);
  --bs-tooltip-color: var(--text-high);
  --bs-tooltip-border-radius: var(--radius-sm);
  --bs-tooltip-font-size: var(--fs-sm);
  --bs-tooltip-opacity: 1;
}
.tooltip-inner {
  background: var(--surface-2);
  color: var(--text-high);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  padding: var(--sp-2) var(--sp-3);
  max-width: 280px;
}
.tooltip .tooltip-arrow::before {
  border-top-color: var(--surface-2);
  border-bottom-color: var(--surface-2);
  border-left-color: var(--surface-2);
  border-right-color: var(--surface-2);
}

/* ---- Popover (Bootstrap 5) ---------------------------------------------- */
.popover {
  --bs-popover-bg: var(--surface-2);
  --bs-popover-border-color: var(--border);
  --bs-popover-border-radius: var(--radius-lg);
  --bs-popover-header-bg: transparent;
  --bs-popover-header-color: var(--text-high);
  --bs-popover-body-color: var(--text-med);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-base);
  color: var(--text-med);
}
.popover-header {
  background: transparent;
  color: var(--text-high);
  border-bottom-color: var(--border);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.popover-body {
  color: var(--text-med);
}
.popover-content {
  color: var(--text-med);
}
.popover .popover-arrow::before,
.popover .popover-arrow::after {
  border-color: transparent;
}
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--surface-2); }
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--surface-2); }
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { border-left-color: var(--surface-2); }
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { border-right-color: var(--surface-2); }

/* ---- app-popover (RISE custom confirmation popover) --------------------- */
.app-popover {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  color: var(--text-med);
}
.app-popover .app-popover-arrow {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.app-popover .confirmation-title {
  border-bottom-color: var(--border) !important;
  color: var(--text-high);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.app-popover .app-popover-body {
  color: var(--text-med);
}
.app-popover .list-group-item.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-bright);
}

/* ---- Modal backdrop ----------------------------------------------------- */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show {
  background-color: #06070b !important;
  opacity: .6 !important;
}

/* ---- Offcanvas ---------------------------------------------------------- */
.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --bs-offcanvas-bg: var(--chrome);
  --bs-offcanvas-color: var(--text-med);
  --bs-offcanvas-border-color: var(--border);
  background: var(--chrome);
  color: var(--text-med);
  border-color: var(--border);
}
.offcanvas-header,
.offcanvas-body {
  color: var(--text-med);
}
.offcanvas-header {
  border-bottom: 1px solid var(--border);
}
.offcanvas-title {
  color: var(--text-high);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.offcanvas-header .btn-close {
  filter: invert(1) grayscale(1) opacity(.55);
  transition: filter var(--dur-1) var(--ease-out);
}
.offcanvas-header .btn-close:hover {
  filter: invert(1) grayscale(1) opacity(.9);
}

/* ---- form-switch -------------------------------------------------------- */
.form-switch .form-check-input {
  background-color: var(--field-bg);
  border-color: var(--field-border);
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    background-position var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2) var(--ease-out);
}
.form-switch .form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.form-switch .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
/* generic check / radio (toggled by JS) — keep the checked accent on-brand */
.form-check-input {
  background-color: var(--field-bg);
  border-color: var(--field-border);
}
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ---- form-range --------------------------------------------------------- */
.form-range {
  accent-color: var(--accent);
}
.form-range:focus {
  outline: none;
}
.form-range::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-spring);
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--ring);
}
.form-range::-webkit-slider-thumb:active {
  background: var(--accent-press);
}
.form-range::-webkit-slider-runnable-track {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}
.form-range::-moz-range-thumb {
  background: var(--accent);
  border: 0;
  box-shadow: var(--shadow-1);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--ring);
}
.form-range::-moz-range-thumb:active {
  background: var(--accent-press);
}
.form-range::-moz-range-track {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}

/* ===== REDESIGN v2 :: loaders ===== */
/* ============================================================
   MODULE: loaders / spinners / upload previews / scrollbars
   Recolor legacy #6690F4 to the dark-UI accent; calm surfaces.
   ============================================================ */

/* --- Spinning ring loaders: neutral track + accent leading edge --- */
/* NOTE: do NOT target a bare `.loading` here. `.loading` is also used as a
   STATE class on the upload modal (`.app-modal.loading ...`), so a bare
   `.loading` recolor would bleed a spinner border onto that container.
   Scope strictly to the actual spinner elements instead. */
.circle-loader,
.table-loader .loading,
.app-loader .loading {
  border-color: var(--border-strong) !important;
  border-top-color: var(--accent) !important;
}

/* base sets border + border-top-color with !important on .inline-loader */
.inline-loader {
  border-color: var(--border-strong) !important;
  border-top-color: var(--accent) !important;
}
.inline-loader:hover,
.loader-container.inline-loader:hover {
  background-color: transparent !important;
}

/* --- Completed-state check ring --- */
.circle-done {
  color: var(--accent) !important;
  border-color: var(--border) !important;
}
.circle-done.ok svg,
.circle-done svg {
  color: var(--accent);
  stroke: var(--accent);
}

/* --- Dropzone file/image previews: layered dark surface --- */
.dz-preview.dz-file-preview .dz-image {
  background: var(--surface-2) !important;
}
.dropzone .dz-preview .dz-image,
.dropzone .dz-preview.dz-file-preview .dz-image {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dropzone .dz-preview .dz-progress .dz-upload {
  background: var(--accent) !important;
}

/* --- DataTables responsive child-row modal --- */
.dtr-modal .dtr-modal-display,
div.dtr-modal div.dtr-modal-display {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-med);
}

/* --- PerfectScrollbar rail: stay transparent while active --- */
/* Match base specificity (`.ps .ps__rail-y...` = 0,3,0); keep !important so
   the override wins even though the base declarations carry no !important. */
.ps .ps__rail-y.ps--clicking,
.ps .ps__rail-y:hover {
  background-color: transparent !important;
}

/* ===== REDESIGN v2 :: detail-panels ===== */
/* ===== MODULE: detail-panels — premium dark override ===== */

/* --- Info list (detail-page key/value panels) --- */
.list-group.info-list .list-group-item {
  border-top: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
  color: var(--text-med) !important;
  padding: 10px 0 !important;
  font-size: var(--fs-base);
  line-height: 1.5;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.list-group.info-list .list-group-item:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}
.list-group.info-list .list-group-item:last-child {
  padding-bottom: 0 !important;
}
.list-group.info-list .list-group-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-high) !important;
  border-radius: var(--radius-sm);
}
/* emphasize value text / strong labels inside info rows */
.list-group.info-list .list-group-item strong,
.list-group.info-list .list-group-item b {
  color: var(--text-high);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* --- Milestone card --- */
.milestone {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  padding-bottom: var(--sp-2) !important;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.milestone:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-2);
}
.milestone .badge {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
.milestone h1 {
  color: var(--text-high);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
}

/* --- Timeline + timeline items --- */
.timeline,
.timeline-item {
  border-color: var(--border) !important;
}
.timeline-item {
  transition: border-color var(--dur-2) var(--ease-out);
}

/* --- Notepad heading accent --- */
.notepad-title {
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: var(--sp-2) !important;
  color: var(--text-high);
  letter-spacing: var(--tracking-tight);
}

/* --- Comment highlight (jump-to / pinned focus state) --- */
.comment-highlight {
  border: 1.5px solid var(--accent) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

/* --- Unread message rows + indicators --- */
.unread {
  border-left: 3px solid var(--accent) !important;
}
.message-row {
  border-radius: var(--radius-sm);
  transition: background var(--dur-1) var(--ease-out);
}
.message-row.unread strong,
.message-row.unread span {
  color: var(--accent-bright) !important;
}
.unread-comments-of-tasks i {
  color: var(--accent-bright) !important;
}

/* --- Blockquotes & preformatted blocks (comment/description bodies) --- */
blockquote {
  background: var(--surface-2) !important;
  border-left: 4px solid var(--border-strong) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: var(--text-med) !important;
  padding: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3) 0;
}
blockquote p:last-child {
  margin-bottom: 0;
}
pre {
  background-color: var(--surface-2) !important;
  background: var(--surface-2) !important;
  color: var(--text-med) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-3) !important;
  white-space: pre-wrap !important;
}

/* ===== REDESIGN v2 :: utility-color-sweep ===== */
/* ===== MODULE: utility-color-sweep ===== */
/* Old-palette utility leaks remapped to design tokens. Mirrors base !important usage so the override wins. */

/* --- Text color utilities --- */
.text-primary {
  color: var(--accent-bright) !important;
}
.text-danger {
  color: var(--danger) !important;
}
.text-warning {
  color: var(--warn) !important;
}
.text-info {
  color: var(--info) !important;
}
.text-success {
  color: var(--success) !important;
}

/* --- Solid background utilities (status fills) --- */
.bg-primary {
  background-color: var(--accent) !important;
}
.bg-danger {
  background-color: var(--danger) !important;
}
.bg-warning {
  background-color: var(--warn) !important;
}
.bg-success {
  background-color: var(--success) !important;
}
.bg-info {
  background-color: var(--info) !important;
}
.bg-dark-success {
  background-color: var(--success) !important;
}

/* --- Light badge --- */
.badge-light {
  background-color: var(--surface-2) !important;
  color: var(--text-med) !important;
}

/* --- Favourite / star icon --- */
.star-icon,
.star-icon:hover {
  color: var(--warn) !important;
}

/* --- Bulk-selection handler dropdown active state --- */
.selection-handler-dropdown-btn.active {
  background-color: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}
.selection-handler-dropdown-btn.active:active,
.selection-handler-dropdown-btn.active:focus {
  background-color: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}

/* --- Chat tab active/hover --- */
.chat-tab .btn.active,
.chat-tab .btn:hover,
.chat-tab .btn:focus,
.chat-tab .btn:active {
  color: var(--accent-bright) !important;
}

/* --- FullCalendar active button --- */
.fc-state-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* --- TinyMCE active collection item --- */
.tox .tox-collection__item--active,
.tox .tox-collection--list .tox-collection__item--active {
  background-color: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}

/* --- Awesomplete selected suggestion --- */
.awesomplete ul li[aria-selected=true] {
  background: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}

/* --- At.js mention dropdown --- */
.atwho-view {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-med) !important;
}
.atwho-view .cur,
.atwho-view .atwho-cur {
  background: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}
.atwho-view ul li {
  border-bottom-color: var(--border) !important;
}

/* ===== REDESIGN v2 :: dashboard-grid ===== */
/* ===== MODULE: dashboard-grid ===== */
/* Widget grid rhythm, dropdown chrome, widget icon, box-wrapper spacing. */
/* Appearance + CSS-layout only; .dashboards-row/.widget-container/.col-* untouched structurally. */

/* --- Widget row rhythm (replaces 15px padding + 15px margin solid layout) --- */
.widget-row,
.widget-row.bg-white {
  /* colour-only: base keeps display:flex + its padding. Do NOT add gap to a flex row
     of Bootstrap col-md-* children — exact %-widths + gap overflow → wrap → broken grid.
     .bg-white added so pass-1's .widget-row.bg-white (0,2,0) can't keep an opaque
     surface fill where V2 wants the row transparent. */
  margin-bottom: var(--sp-5);
  background: transparent !important;
}

/* .row-container left untouched: base already sets flex:100; restating it here
   is a no-op at equal specificity and would touch layout this module declares
   structurally untouched. Removed. */

/* --- Dashboard dropdown toggle: calm surface chip, soft layered shadow --- */
.dashboard-dropdown .dropdown-toggle {
  padding: 10px 12px;
  width: 40px;
  height: 40px;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1) !important;
  color: var(--text-med);
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.dashboard-dropdown .dropdown-toggle:hover {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-high);
}
.dashboard-dropdown .dropdown-toggle:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
  color: var(--text-high);
}
/* open state from base (.dashboard-view .open) realigned to dark surface */
.dashboard-view .open .dropdown-toggle {
  background-color: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-high);
}

/* --- Widget icon: soft accent tile (was #4466F2 / #fff icon) ---
   Also override pass-1's semantic .widget-icon.bg-* (info/success/coral/orange)
   tiles so the tile color matches the accent glyph. Those compounds are 0,2,0
   and would otherwise out-specify a bare .widget-icon, leaving a green/amber
   tile under a blue icon. */
.widget-icon,
.widget-icon.bg-primary,
.widget-icon.bg-info,
.widget-icon.bg-success,
.widget-icon.bg-coral,
.widget-icon.bg-orange {
  background-color: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
  border-radius: var(--radius);
}
.widget-icon .icon {
  color: var(--accent-bright) !important;
}

/* --- Box wrapper: tighten internal rhythm with token gap --- */
.box-wrapper {
  gap: var(--sp-3);
}
/* the avatar already uses margin-right:10px in base; fold into the gap */
.box-wrapper .box-avatar {
  margin-right: 0;
}

/* ===== REDESIGN v2 :: app.all.css leak-sweep (workflow) ===== */

/* sidebar */
.sidebar .sidebar-scroll {
  border-top-color: var(--border) !important;
}

/* tables */
table.dataTable tbody tr.active td a,
table.dataTable tbody tr.active td .text-default {
  color: var(--accent-bright) !important;
}
.dataTable:not(.js-selection-mode) tbody tr.active .badge {
  background-color: var(--surface) !important;
}
table.dataTable.dtr-inline.collapsed tbody tr.active td.dtr-control:before,
table.dataTable.dtr-inline.collapsed tbody tr.active td.dtr-control:after {
  background-color: var(--text-high) !important;
}
.dt-container .dt-paging .dt-paging-button {
  background: var(--surface) !important;
}
.dt-container .dt-paging .dt-paging-button .page-link,
.dt-container .dt-paging .dt-paging-button.active .page-link,
.dt-info {
  color: var(--text-med) !important;
}
.dt-print-view {
  background-color: var(--surface) !important;
}
.dt-print-view table.dataTable thead th,
.dt-print-view table.dataTable.display tbody td {
  border-color: var(--border) !important;
}
.dt-print-view table.dataTable.display tbody tr:hover td {
  background-color: var(--surface-2) !important;
}

/* datatable buttons (DTTT) */
button.DTTT_button,
div.DTTT_button,
a.DTTT_button,
a.DTTT_button:focus,
.DTTT_container .btn.active,
.DTTT_container .btn:hover,
.DTTT_container .btn:active,
.DTTT_container .btn:focus {
  border-color: var(--border) !important;
}

/* dropdown / filters */
.filter-multi-select.open,
.filter-multi-select:focus,
.filter-multi-select:active,
.filter-multi-select .dropdown-toggle,
.dynamic-range-filter .dropdown-toggle {
  border-color: var(--border) !important;
}
.filter-multi-select .list-group-item,
.dynamic-range-filter .list-group-item {
  border-bottom: 2px solid var(--border) !important;
}
.iti .iti__dropdown-content {
  border: 1px solid var(--border) !important;
}
.iti .iti__dropdown-content .iti__search-input {
  border: 1px solid var(--field-border) !important;
}

/* calendar (FullCalendar) */
.fc-theme-standard .fc-list-empty {
  background-color: var(--surface-2) !important;
}
.fc-theme-standard .fc-list {
  border-color: var(--border) !important;
}

/* editors (summernote / tinymce) */
.note-editor,
.note-editor .note-toolbar,
.note-editor .note-statusbar .note-resizebar,
.note-editor .note-toolbar .btn,
.note-editor.note-frame .note-statusbar,
.tox .tox-statusbar {
  border-color: var(--border) !important;
}
.tox .tox-tbtn svg {
  fill: var(--text-med) !important;
}
.tox .tox-tbtn:not(.tox-tbtn--bespoke):active {
  background: var(--surface-2) !important;
}

/* select2 */
.select2-container .select2-choice .select2-search-field input {
  border-color: var(--field-border) !important;
  background: var(--field-bg) !important;
}
.general-form.white .select2-container-multi.form-control {
  border-color: var(--border) !important;
}
.general-form.white .select2-container-multi.form-control .select2-choices .select2-search-field input {
  background: var(--field-bg) !important;
  border-color: var(--border) !important;
}
.search-modal .select2-choice {
  background-color: var(--field-bg) !important;
  border: 1px solid var(--border) !important;
}

/* badge */
.badge a:hover,
.badge a:active,
.badge a:focus {
  color: var(--text-high) !important;
}

/* buttons */
.btn-group .btn.active {
  border-color: var(--border) !important;
}

/* file manager */
.file-list-view.file-download:hover,
.file-list-view:hover {
  color: var(--text-high) !important;
}

/* ===== REDESIGN v3 :: dashboard design-language (not just recolor) ===== */
/* Depth, hierarchy, distinctive components. Appearance-only, beats base via
   specificity. Scoped largely to .dashboard-view to keep blast radius tight. */

/* Page depth: subtle accent glow + vignette instead of flat near-black */
.dashboard-view #page-content,
.dashboard-view .page-content,
body.dashboard-view {
  background-image:
    radial-gradient(1200px 480px at 78% -8%, rgba(91,141,239,.10), transparent 60%),
    radial-gradient(900px 420px at 0% 0%, rgba(108,140,255,.05), transparent 55%);
  background-attachment: fixed;
}

/* ---- Cards: layered surface + inner top highlight + soft depth shadow ---- */
.page-wrapper .card,
.page-wrapper .card.bg-white {
  background-color: var(--surface) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 38%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -16px rgba(0,0,0,.65) !important;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.page-wrapper .card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -18px rgba(0,0,0,.75) !important;
}

/* ---- Card header: more presence, hairline under, accent chip already exists ---- */
.page-wrapper .card > .card-header,
.page-wrapper .dashboard-widget .card-header {
  padding: 18px 22px !important;
  font-size: 1rem !important;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.page-wrapper .card-title { font-size: 1.02rem; }
.page-wrapper .card-body { padding: 20px 22px !important; }

/* ---- KPI stat cards: distinctive, premium ---- */
.dashboard-icon-widget {
  padding: 24px 24px !important;
  border-radius: 20px !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%),
    radial-gradient(140px 90px at 88% 0%, rgba(91,141,239,.10), transparent 70%) !important;
}
/* stronger accent rail */
.dashboard-icon-widget::before {
  width: 4px !important;
  opacity: .9 !important;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent) 60%, transparent) !important;
}
/* big, confident KPI number */
.widget-details h1 {
  font-size: 2.5rem !important;
  font-weight: 750 !important;
  letter-spacing: -.025em !important;
  line-height: 1.05 !important;
  color: var(--text-high) !important;
}
/* label: small, uppercase, tracked, muted */
.dashboard-icon-widget .widget-title,
.widget .widget-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--text-low) !important;
}
/* icon tile: bigger, accent gradient, soft glow */
.dashboard-icon-widget .widget-icon,
.widget-icon {
  width: 50px !important; height: 50px !important;
  border-radius: 15px !important;
  background-image: linear-gradient(140deg, var(--accent), var(--accent-bright)) !important;
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(91,141,239,.7), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.dashboard-icon-widget .widget-icon .icon,
.widget-icon .icon { color: #fff !important; }

/* ---- Sidebar: stronger active identity + calmer rhythm ----
   Real selector is #sidebar-menu li (active item = <li class="active main">). */
.sidebar-menu li > a {
  border-radius: 12px;
  margin: 2px 12px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.sidebar-menu li.active > a {
  position: relative;
  background: linear-gradient(90deg, var(--accent-soft), rgba(91,141,239,.04)) !important;
  color: var(--accent-bright) !important;
}
.sidebar-menu li.active > a::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
}
.sidebar-menu li:not(.active) > a:hover {
  background: rgba(255,255,255,.04) !important;
}

/* ---- More generous vertical rhythm between dashboard rows ---- */
.dashboard-view .widget-row { margin-bottom: 26px !important; }

/* ===== white-line sweep 2 (2026-06-17): Bootstrap border token + utilities ===== */
/* Base sets --bs-border-color:#f1f1f5 → leaks via .border-* utilities, .form-group
   dividers, and any BS component using the token. Redefine to the dark --border. */
:root, :root[data-bs-theme="dark"] {
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
}
.border, .border-top, .border-bottom, .border-start, .border-end,
.border-left, .border-right {
  border-color: var(--border) !important;
}
.form-group, .form-group.form-switch {
  border-color: var(--border) !important;
}

/* ===== hover-state sweep (2026-06-17, fv=20): kill light hover/focus backgrounds ===== */
/* Base app.all.css sets light (#fff/#f8f9fa/#f1f1f5/#eee/#f5f5f5) backgrounds on many
   :hover/:focus states → "hover thành trắng". Darken at matching specificity. */
.help-category-box:hover,
.folder-item-content:hover,
.icon-tag:hover,
.datatable-export a:hover,
.awesomplete ul li[aria-selected=false]:hover,
.datepicker-custom-list .list-group-item:not(.active):hover,
.filter-multi-select .list-group-item:not(.active):hover,
.dynamic-range-filter .list-group-item:not(.active):hover,
.week-view tr:hover .day:not(.active),
.timesheet-activity-heatmap tr:hover td,
a.DTTT_button:hover,
td.option a:hover.light,
.action-option:hover,
.external-tickets-embedded-code:hover.light {
  background: var(--surface-2) !important;
  background-color: var(--surface-2) !important;
  color: var(--text-high) !important;
}
/* dropdown item hover (affects EVERY dropdown menu) → accent-soft selection */
.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--accent-soft) !important;
  color: var(--accent-bright) !important;
}
/* datepicker / timepicker cells */
.datepicker table tr td span:hover, .datepicker table tr td span.focused,
.datepicker table tr td.day:hover, .datepicker table tr td.focused,
.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover,
.bootstrap-timepicker-widget table td a:hover {
  background: var(--surface-2) !important;
  color: var(--text-high) !important;
  border-color: var(--border) !important;
}
/* collapsed-sidebar hover (was #fff) */
.sidebar-toggled .sidebar-menu li:hover > a,
.sidebar-toggled .sidebar-menu li:hover,
.sidebar-toggled .sidebar-menu li ul li:hover {
  background: var(--surface-2) !important;
}
/* transparent-ish controls that flashed white on hover */
.btn-transparent:hover, .checkbox-blank:hover, .social-link:hover {
  background: var(--surface-2) !important;
}
/* active-button focus (was #f1f1f5) — bg only, keep its own text color */
.btn.active:focus { background-color: var(--surface-2) !important; }
/* field focus that went white */
.search-modal .help-search-box:focus {
  background: var(--field-bg) !important;
  color: var(--text-high) !important;
}
/* loaders / scrollbar rails → stay transparent on hover */
.inline-loader:hover, .loader-container.inline-loader:hover,
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover,
.ps .ps__rail-x:focus, .ps .ps__rail-y:focus {
  background: transparent !important;
}
/* FullCalendar list-view event row hover (was light) */
.fc .fc-list-event:hover td { background-color: var(--surface-2) !important; }
/* btn-transparent had a pure-white border (team_members profile: Send message / Reminders) */
.btn-transparent, .btn.btn-transparent { border-color: var(--border) !important; }
.btn-transparent:hover, .btn.btn-transparent:hover { border-color: var(--border-strong) !important; }