/* Secure24 Platform Standard — unified UI system.
   Loaded last so legacy module styles inherit one visual language without changing business logic. */

:root{
  color-scheme:light;
}

html,body,button,input,select,textarea{
  font-family:var(--s24-font)!important;
}

html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{
  font-size:var(--s24-fs-body)!important;
  line-height:1.45;
  color:var(--s24-ink)!important;
  background:var(--s24-soft)!important;
}

#app main,#content{
  background:var(--s24-soft)!important;
}

/* ---------- Typography ---------- */

#viewTitle{
  font-size:var(--s24-fs-page)!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  color:var(--s24-navy)!important;
}

#viewSubtitle,.today{
  font-size:12px!important;
  line-height:1.4!important;
  color:var(--s24-muted)!important;
}

#content h1,
.modal-card h1{
  font-size:var(--s24-fs-page)!important;
  line-height:1.18!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  color:var(--s24-navy)!important;
}

#content h2,
.modal-card h2{
  font-size:var(--s24-fs-section)!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  color:var(--s24-navy)!important;
}

#content h3,
#content .card h3,
#content .panel h3,
.modal-card h3{
  font-size:var(--s24-fs-card)!important;
  line-height:1.3!important;
  font-weight:800!important;
  letter-spacing:-.012em!important;
  color:var(--s24-navy)!important;
}

#content h4,
.modal-card h4{
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:750!important;
  color:var(--s24-navy)!important;
}

#content p,
#content li,
#content td,
.modal-card p,
.modal-card li{
  font-size:var(--s24-fs-table);
}

#content small,
#content .muted,
#content .hint,
#content .help,
#content .helper,
.modal-card small{
  font-size:var(--s24-fs-helper)!important;
  line-height:1.4!important;
  color:var(--s24-muted)!important;
}

#content .section-head,
#content .section-title{
  gap:var(--s24-space-3)!important;
  margin-bottom:var(--s24-space-3)!important;
}

#content .section-head>div:first-child,
#content .section-title>div:first-child{
  color:var(--s24-text);
}

/* Sentence case for interactive labels. Uppercase remains reserved for KPI/table metadata. */
#content button,
.modal-card button,
.finance-tabs button,
.status-filters button,
.academy-tabs button,
.fleet-tabs button,
.inventory-tabs button,
button[data-view]{
  text-transform:none!important;
  letter-spacing:normal!important;
}

/* Keep small metadata intentionally uppercase. */
#content thead th,
#content .dashboard-kpi-label,
#content .ux-quick-access-label,
.nav-section-toggle{
  text-transform:uppercase!important;
}

/* ---------- Surface hierarchy ---------- */

#content .card,
#content .panel,
#content .report-card,
#content .section-card,
#content .table-card,
#content .dashboard-card,
#content .finance-card,
#content .employee-card,
#content .request-card,
#content .record-card{
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  background:var(--s24-card)!important;
  box-shadow:var(--s24-shadow-1)!important;
}

#content .card:hover,
#content .panel:hover,
#content .report-card:hover,
#content .section-card:hover,
#content .table-card:hover,
#content .dashboard-card:hover,
#content .finance-card:hover,
#content .employee-card:hover,
#content .request-card:hover,
#content .record-card:hover{
  transform:none!important;
  box-shadow:var(--s24-shadow-1)!important;
}

#content .table-wrap{
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  background:var(--s24-card)!important;
  box-shadow:var(--s24-shadow-0)!important;
}

#content .kpi,
#content .stat-card,
#content .summary-card{
  min-height:100px!important;
  padding:var(--s24-space-4)!important;
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  box-shadow:var(--s24-shadow-1)!important;
}

#content .kpi>span,
#content .stat-card>span,
#content .summary-card>span{
  font-size:var(--s24-fs-meta)!important;
  font-weight:800!important;
  color:var(--s24-muted)!important;
}

#content .kpi>strong,
#content .stat-card>strong,
#content .summary-card>strong{
  font-size:24px!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  color:var(--s24-navy)!important;
}

#content .kpi small,
#content .stat-card small,
#content .summary-card small{
  font-size:var(--s24-fs-helper)!important;
}

/* Dashboard semantic colour file remains authoritative for dashboard KPI backgrounds. */
#content .management-dashboard .dashboard-kpi,
#content .management-dashboard .dashboard-alert,
#content .management-dashboard .dashboard-readiness{
  box-shadow:var(--s24-shadow-1)!important;
}

/* ---------- Controls ---------- */

#content button,
.modal-card button:not(.close),
.login-card button{
  min-height:var(--s24-control-h)!important;
  border-radius:var(--s24-radius-control)!important;
  font-size:var(--s24-fs-control)!important;
  font-weight:700!important;
  line-height:1.2!important;
}

#content button.primary,
#content button[data-action="add"],
#content button[data-finance-action="new"],
#content button[data-expense-new],
.modal-card button.primary,
.login-card button[type="submit"],
#loginForm button[type="submit"]{
  background:var(--s24-blue)!important;
  border-color:var(--s24-blue)!important;
  color:#fff!important;
  box-shadow:none!important;
}

#content button.primary:hover:not(:disabled),
#content button[data-action="add"]:hover:not(:disabled),
#content button[data-finance-action="new"]:hover:not(:disabled),
#content button[data-expense-new]:hover:not(:disabled),
.modal-card button.primary:hover:not(:disabled),
.login-card button[type="submit"]:hover:not(:disabled),
#loginForm button[type="submit"]:hover:not(:disabled){
  background:var(--s24-blue-hover)!important;
  border-color:var(--s24-blue-hover)!important;
}

/* Approval/success */
#content button.success,
#content button[data-invoice-action="Approved"],
#content button[data-expense-action="approve"],
#content button[data-expense-action="approve-payment"],
#content button[data-petty-approve],
#content button[data-rec-approve],
#content button[data-payroll-action="Approved"]{
  background:var(--s24-success-soft)!important;
  border-color:#b9decf!important;
  color:#116c4a!important;
}

/* Warning/corrective */
#content button.warning,
#content button[data-action*="return"],
#content button[data-invoice-action*="Returned"]{
  background:var(--s24-warning-soft)!important;
  border-color:#ead7aa!important;
  color:#855604!important;
}

/* Destructive */
#content button.danger,
#content button[data-action*="delete"],
#content button[data-action*="deactivate"],
#content button[data-action*="reject"],
#content button[data-invoice-action="Cancelled"],
#content button[data-expense-action="cancel"]{
  background:var(--s24-danger-soft)!important;
  border-color:#efc7cc!important;
  color:#b52f38!important;
}

#content button.secondary,
#content .secondary,
#content .back-button,
.modal-card button.secondary{
  background:#fff!important;
  border-color:var(--s24-line-strong)!important;
  color:var(--s24-navy)!important;
  box-shadow:none!important;
}

/* ---------- Forms ---------- */

#content label,
.modal-card label,
.login-card label{
  font-size:var(--s24-fs-label)!important;
  line-height:1.35!important;
  font-weight:700!important;
  color:#40546b!important;
}

#content input,
#content select,
#content textarea,
.modal-card input,
.modal-card select,
.modal-card textarea,
.login-card input,
.login-card select,
.login-card textarea{
  min-height:var(--s24-control-h)!important;
  padding:9px 11px!important;
  border:1px solid var(--s24-line-strong)!important;
  border-radius:var(--s24-radius-control)!important;
  background:#fff!important;
  color:var(--s24-ink)!important;
  font-size:13px!important;
  box-shadow:none!important;
}

#content textarea,
.modal-card textarea,
.login-card textarea{
  min-height:104px!important;
  resize:vertical!important;
}

#content input::placeholder,
#content textarea::placeholder,
.modal-card input::placeholder,
.modal-card textarea::placeholder,
.login-card input::placeholder{
  color:#94a3b8!important;
  opacity:1!important;
}

#content input:focus,
#content select:focus,
#content textarea:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.login-card input:focus{
  border-color:#9dbfe1!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(25,118,210,.1)!important;
}

#content button:focus-visible,
.modal-card button:focus-visible,
.login-card button:focus-visible,
#nav button:focus-visible{
  outline:3px solid rgba(25,118,210,.18)!important;
  outline-offset:2px!important;
}

/* ---------- Tables ---------- */

#content table{
  background:#fff!important;
  color:var(--s24-text)!important;
}

#content thead th{
  padding:10px 12px!important;
  border-bottom:1px solid var(--s24-line)!important;
  background:var(--s24-soft-2)!important;
  color:var(--s24-muted)!important;
  font-size:var(--s24-fs-meta)!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
}

#content tbody td{
  padding:11px 12px!important;
  border-bottom:1px solid #edf1f5!important;
  color:var(--s24-text)!important;
  font-size:var(--s24-fs-table)!important;
  line-height:1.4!important;
  vertical-align:middle!important;
}

#content tbody tr:hover{
  background:#f8fbff!important;
}

#content tbody tr:last-child td{
  border-bottom:0!important;
}

/* ---------- Status badges ---------- */

#content .pill,
#content .badge,
#content .status,
.modal-card .pill,
.modal-card .badge,
.modal-card .status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:4px 8px!important;
  border-radius:var(--s24-radius-pill)!important;
  font-size:var(--s24-fs-meta)!important;
  line-height:1.2!important;
  font-weight:800!important;
}

#content .status.success,
#content .badge.success,
#content .pill.success,
#content .pill.green{
  background:var(--s24-success-soft)!important;
  color:#116c4a!important;
}

#content .status.warning,
#content .badge.warning,
#content .pill.warning,
#content .pill.warn,
#content .pill.amber{
  background:var(--s24-warning-soft)!important;
  color:#855604!important;
}

#content .status.danger,
#content .badge.danger,
#content .pill.danger,
#content .pill.red{
  background:var(--s24-danger-soft)!important;
  color:#b52f38!important;
}

#content .status.info,
#content .badge.info,
#content .pill.info,
#content .pill.blue{
  background:var(--s24-info-soft)!important;
  color:var(--s24-info)!important;
}

#content .pill.grey,
#content .pill.gray,
#content .status.inactive{
  background:#f1f5f9!important;
  color:var(--s24-muted)!important;
}

/* ---------- Tabs, filters, search and toolbars ---------- */

#content .status-filters,
#content .finance-tabs,
#content .fleet-tabs,
#content .inventory-tabs,
#content .academy-tabs,
#content .incident-tabs,
#content .hr-dev-tabs,
#content .control-tabs{
  border:1px solid var(--s24-line)!important;
  background:#f1f5f9!important;
  border-radius:var(--s24-radius-card)!important;
  padding:4px!important;
  gap:4px!important;
}

#content .status-filters button,
#content .finance-tabs button,
#content .fleet-tabs button,
#content .inventory-tabs button,
#content .academy-tabs button,
#content .incident-tabs button,
#content .hr-dev-tabs button,
#content .control-tabs button{
  color:var(--s24-muted)!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

#content .status-filters button.active,
#content .finance-tabs button.active,
#content .fleet-tabs button.active,
#content .inventory-tabs button.active,
#content .academy-tabs button.active,
#content .incident-tabs button.active,
#content .hr-dev-tabs button.active,
#content .control-tabs button.active{
  color:var(--s24-blue)!important;
  background:#fff!important;
  border-color:#cddceb!important;
  box-shadow:0 1px 3px rgba(13,43,87,.06)!important;
}

#content .ux-list-search,
#content .attendance-search-control{
  border-color:var(--s24-line-strong)!important;
  border-radius:var(--s24-radius-control)!important;
  background:#fff!important;
  box-shadow:none!important;
}

#content .ux-list-search:focus-within,
#content .attendance-search-control:focus-within{
  border-color:#9dbfe1!important;
  box-shadow:0 0 0 3px rgba(25,118,210,.08)!important;
}

#content .employee-toolbar,
#content .finance-toolbar,
#content .payroll-toolbar,
#content .fleet-toolbar,
#content .inventory-toolbar,
#content .attendance-tools{
  gap:var(--s24-space-3)!important;
}

/* ---------- Module semantic alerts ---------- */

#content .finance-warning,
#content .payroll-warning,
#content .hr-dev-alert,
#content .inventory-alert-card,
#content .fleet-alert,
#content .control-alert,
#content .finance-review-message.warning{
  border-color:#ead7aa!important;
  background:var(--s24-warning-soft)!important;
  color:#855604!important;
}

#content .incident-overdue,
#content .finance-review-message.critical{
  border-color:#efc7cc!important;
  background:var(--s24-danger-soft)!important;
  color:#b52f38!important;
}

#content .incident-alert:not(.incident-overdue),
#content .incident-alerts{
  border-color:#cfe0f1!important;
  background:var(--s24-info-soft)!important;
  color:var(--s24-info)!important;
}

#content .payroll-policy-note,
#content .reports-note{
  border-color:var(--s24-line)!important;
  background:var(--s24-soft-2)!important;
  color:var(--s24-text)!important;
}

/* ---------- Modals and drawers ---------- */

.modal{
  background:rgba(7,27,53,.46)!important;
  backdrop-filter:blur(2px)!important;
}

.modal-card{
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-modal)!important;
  background:#fff!important;
  box-shadow:var(--s24-shadow-2)!important;
}

.modal-head{
  border-bottom:1px solid var(--s24-line)!important;
}

.modal-card .close{
  width:36px!important;
  height:36px!important;
  min-height:36px!important;
  border-radius:var(--s24-radius-control)!important;
  background:#f1f5f9!important;
  color:var(--s24-ink)!important;
  box-shadow:none!important;
}

.messages-dashboard-drawer,
.ux-palette{
  border-color:var(--s24-line)!important;
  box-shadow:var(--s24-shadow-2)!important;
}

/* ---------- Navigation ---------- */

#appSidebar{
  background:var(--s24-navy)!important;
}

.side-brand,
#nav,
.side-bottom{
  background:var(--s24-navy)!important;
}

.side-brand strong{
  color:#fff!important;
  font-size:16px!important;
  font-weight:800!important;
}

.side-brand span{
  color:#b9c9dd!important;
  font-size:11px!important;
}

#nav button[data-view]{
  min-height:40px!important;
  border-radius:8px!important;
  color:#d9e5f3!important;
  font-size:12.5px!important;
  font-weight:650!important;
}

#nav button[data-view].active{
  background:var(--s24-blue)!important;
  color:#fff!important;
  font-weight:800!important;
}

.nav-section-toggle{
  min-height:32px!important;
  padding:9px 14px 5px!important;
  color:#8fa7c0!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:.07em!important;
}

/* ---------- Module cleanup: remove legacy green as a general UI colour ---------- */

#content .finance-toolbar,
#content .payroll-toolbar,
#content .fleet-toolbar,
#content .inventory-toolbar,
#content .attendance-tools,
#content .incident-toolbar,
#content .staff-request-toolbar{
  color:var(--s24-text)!important;
}

/* Finance/attendance legacy focus and selected states should use Secure24 blue.
   Success/approval statuses remain green through semantic selectors above. */
#content .finance-toolbar input:focus,
#content .finance-toolbar select:focus,
#content .payroll-toolbar input:focus,
#content .attendance-tools input:focus,
#content .attendance-tools select:focus{
  border-color:#9dbfe1!important;
  box-shadow:0 0 0 3px rgba(25,118,210,.1)!important;
}

/* ---------- Login ---------- */

.login-page,
.login-card,
.login-panel{
  font-family:var(--s24-font)!important;
}

.login-card,
.login-panel{
  border-radius:var(--s24-radius-modal)!important;
}

.login-card h1,
.login-heading h2{
  color:var(--s24-navy)!important;
  letter-spacing:-.025em!important;
}

.login-card button[type="submit"],
#loginForm button[type="submit"]{
  min-height:44px!important;
  border-radius:var(--s24-radius-control)!important;
  background:var(--s24-blue)!important;
  border-color:var(--s24-blue)!important;
}

/* ---------- Responsive ---------- */

@media(max-width:900px){
  #viewTitle{font-size:22px!important}

  #content .card,
  #content .panel,
  #content .report-card,
  #content .section-card,
  #content .table-card,
  #content .dashboard-card,
  #content .finance-card,
  #content .employee-card,
  #content .request-card,
  #content .record-card{
    border-radius:var(--s24-radius-card)!important;
  }

  #content button,
  .modal-card button:not(.close){
    min-height:var(--s24-control-h-mobile)!important;
  }

  #content input,
  #content select,
  #content textarea,
  .modal-card input,
  .modal-card select,
  .modal-card textarea{
    min-height:var(--s24-control-h-mobile)!important;
  }
}

@media(max-width:650px){
  #content{
    padding:14px 12px 28px!important;
  }

  #content h2{font-size:17px!important}
  #content h3{font-size:15px!important}

  #content .card,
  #content .panel,
  #content .report-card,
  #content .section-card,
  #content .table-card,
  #content .dashboard-card,
  #content .finance-card,
  #content .employee-card,
  #content .request-card,
  #content .record-card{
    padding:14px!important;
  }

  #content .record-card{
    box-shadow:var(--s24-shadow-0)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}


/* ===== Representative module visual audit refinement =====
   Final pass across Dashboard, Employees, Attendance, Finance, Payroll,
   Fleet, Inventory, Incidents, Scheduling, Communications and Academy. */

/* No routine labels below 10px. */
.app>aside#appSidebar .nav-section-toggle{
  font-size:10px!important;
}
.messages-header-button.mobile .messages-header-count{
  font-size:10px!important;
  min-width:18px!important;
  height:18px!important;
}
.academy-path-card>div>span,
.academy-path-courses button small,
.academy-calendar span,
.academy-lesson>span{
  font-size:10px!important;
}

/* Common KPI hierarchy across operational modules. */
#content .finance-kpis .card,
#content .payroll-kpis .card,
#content .attendance-summary .card,
#content .fleet-kpis .card,
#content .inventory-kpis .card,
#content .incident-kpis .card,
#content .control-kpis .card,
#content .tender-kpis .card,
#content .academy-admin-kpis .card{
  min-height:104px!important;
  padding:16px!important;
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  background:#fff!important;
  box-shadow:var(--s24-shadow-1)!important;
}

#content .finance-kpis span,
#content .payroll-kpis span,
#content .attendance-summary span,
#content .fleet-kpis span,
#content .inventory-kpis span,
#content .incident-kpis span,
#content .control-kpis span,
#content .tender-kpis .card span,
#content .academy-admin-kpis span{
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  color:var(--s24-muted)!important;
}

#content .finance-kpis strong,
#content .payroll-kpis strong,
#content .attendance-summary strong,
#content .fleet-kpis strong,
#content .inventory-kpis strong,
#content .incident-kpis strong,
#content .control-kpis strong,
#content .tender-kpis .card strong,
#content .academy-admin-kpis b{
  font-size:24px!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  color:var(--s24-navy)!important;
}

/* Module tabs all share the same neutral/selected pattern. */
#content .communications-tabs,
#content .incident-tabs,
#content .hr-dev-tabs,
#content .control-tabs,
#content .fleet-tabs,
#content .inventory-tabs,
#content .finance-tabs,
#content .academy-tabs{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  padding:4px!important;
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  background:#f1f5f9!important;
}

#content .communications-tabs button,
#content .incident-tabs button,
#content .hr-dev-tabs button,
#content .control-tabs button,
#content .fleet-tabs button,
#content .inventory-tabs button,
#content .finance-tabs button,
#content .academy-tabs button{
  min-height:34px!important;
  padding:7px 11px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:var(--s24-muted)!important;
  font-size:12px!important;
  box-shadow:none!important;
}

#content .communications-tabs button.active,
#content .incident-tabs button.active,
#content .hr-dev-tabs button.active,
#content .control-tabs button.active,
#content .fleet-tabs button.active,
#content .inventory-tabs button.active,
#content .finance-tabs button.active,
#content .academy-tabs button.active{
  border-color:#cddceb!important;
  background:#fff!important;
  color:var(--s24-blue)!important;
  font-weight:800!important;
  box-shadow:0 1px 3px rgba(13,43,87,.06)!important;
}

/* Roster coverage uses the same semantic language as the executive dashboard. */
#content .coverage{
  border-width:1px!important;
  border-style:solid!important;
  border-color:var(--s24-line)!important;
  border-radius:var(--s24-radius-control)!important;
  background:#fff!important;
  box-shadow:none!important;
}
#content .coverage.understaffed{
  border-color:#efc7cc!important;
  background:var(--s24-danger-soft)!important;
}
#content .coverage.correctly-staffed{
  border-color:#b9decf!important;
  background:var(--s24-success-soft)!important;
}
#content .coverage.overstaffed{
  border-color:#ead7aa!important;
  background:var(--s24-warning-soft)!important;
}

/* Employee cards and other drill-down cards use identical metadata hierarchy. */
#content .employee-card h3,
#content .finance-card h3,
#content .fleet-detail h3,
#content .inventory-detail h3,
#content .incident-detail h3,
#content .tender-detail h3{
  margin-top:0!important;
  margin-bottom:8px!important;
  color:var(--s24-navy)!important;
  font-size:15px!important;
  font-weight:800!important;
}
#content .employee-card small,
#content .finance-card small,
#content .fleet-line small,
#content .inventory-line small,
#content .incident-line small{
  font-size:11px!important;
  color:var(--s24-muted)!important;
}

/* Communications is informational blue; unread indicators may remain green as status. */
#content .communication-item{
  border-color:var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  background:#fff!important;
  box-shadow:none!important;
}
#content .communication-item.unread{
  border-left:3px solid var(--s24-blue)!important;
  background:#f8fbff!important;
}

/* Academy remains educational but follows the Secure24 component system. */
#content .academy-path-card,
#content .academy-catalogue-card,
#content .academy-cert-card,
#content .academy-course-card{
  border-radius:var(--s24-radius-card)!important;
  box-shadow:var(--s24-shadow-1)!important;
}
#content .academy-path-courses button{
  border-color:var(--s24-line)!important;
  border-radius:var(--s24-radius-control)!important;
  background:var(--s24-soft-2)!important;
  color:var(--s24-navy)!important;
}
#content .academy-path-courses button:hover{
  border-color:#c8d8e8!important;
  background:#eef6fd!important;
}
#content .academy-cert-card p{
  /* Certificate/reference codes intentionally remain monospace. */
  font-size:12px!important;
}

/* Toolbars align consistently and do not appear as separate design systems. */
#content .finance-toolbar,
#content .payroll-toolbar,
#content .attendance-tools,
#content .fleet-toolbar,
#content .inventory-toolbar,
#content .incident-toolbar,
#content .control-toolbar,
#content .roster-toolbar,
#content .hr-dev-toolbar{
  padding:12px!important;
  border:1px solid var(--s24-line)!important;
  border-radius:var(--s24-radius-card)!important;
  background:#fff!important;
  box-shadow:none!important;
}

/* Keep toolbar labels readable and consistent. */
#content .finance-toolbar label,
#content .payroll-toolbar label,
#content .attendance-tools label,
#content .roster-toolbar label,
#content .hr-dev-toolbar label{
  font-size:12px!important;
  font-weight:700!important;
  color:#40546b!important;
}

/* Compact mobile tabs scroll rather than wrap into a tall control wall. */
@media(max-width:650px){
  #content .communications-tabs,
  #content .incident-tabs,
  #content .hr-dev-tabs,
  #content .control-tabs,
  #content .fleet-tabs,
  #content .inventory-tabs,
  #content .finance-tabs,
  #content .academy-tabs{
    width:100%!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:thin!important;
  }

  #content .communications-tabs button,
  #content .incident-tabs button,
  #content .hr-dev-tabs button,
  #content .control-tabs button,
  #content .fleet-tabs button,
  #content .inventory-tabs button,
  #content .finance-tabs button,
  #content .academy-tabs button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  #content .finance-toolbar,
  #content .payroll-toolbar,
  #content .attendance-tools,
  #content .fleet-toolbar,
  #content .inventory-toolbar,
  #content .incident-toolbar,
  #content .control-toolbar,
  #content .roster-toolbar,
  #content .hr-dev-toolbar{
    padding:10px!important;
  }
}


/* ===== Final navigation polish =====
   Keep the grouped sidebar professional and consistent across operating systems. */
.app>aside#appSidebar #nav button[data-view]{
  position:relative!important;
  gap:10px!important;
  padding-left:13px!important;
  line-height:1.25!important;
}

.app>aside#appSidebar #nav button[data-view]::before{
  content:""!important;
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  border-radius:2px!important;
  background:#6f89a8!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04)!important;
  transition:background .14s ease,transform .14s ease!important;
}

.app>aside#appSidebar #nav button[data-view]:hover::before{
  background:#c9d8e8!important;
}

.app>aside#appSidebar #nav button[data-view].active::before{
  background:#fff!important;
  transform:scale(1.12)!important;
}

.app>aside#appSidebar #nav button[data-view].active{
  box-shadow:inset 3px 0 0 rgba(255,255,255,.9)!important;
}

.app>aside#appSidebar .nav-section-toggle{
  padding-left:15px!important;
  padding-right:15px!important;
}

@media(max-width:650px){
  .app>aside#appSidebar #nav button[data-view]{
    min-height:42px!important;
    font-size:13px!important;
  }
}


/* ===== Final readability cleanup =====
   Keep live operational metadata readable without changing fixed-size print artifacts. */
.login-page .login-capability small,
.login-page .login-security,
#content .dashboard-section-heading>.dashboard-status,
#content .management-dashboard .dashboard-readiness .dashboard-status,
#content .dashboard-subheading,
#appSidebar .side-bottom #userRole,
#appSidebar .side-bottom #changePassword,
#appSidebar .side-bottom #logout,
#content .ux-palette-group,
#content .ux-palette-section,
#content .ux-search-status,
#content .ux-quick-access-label,
#content .ux-more-menu>summary:after,
#content .academy-compliance-head span,
#content .academy-compliance-kpis span,
#content .academy-matrix-table table,
#content .academy-matrix-badge{
  font-size:10px!important;
}


/* ===== Final mobile touch targets ===== */
@media(max-width:650px){
  #appSidebar .side-bottom #changePassword,
  #appSidebar .side-bottom #logout{
    min-height:42px!important;
    padding:8px 10px!important;
  }

  .app>aside#appSidebar .nav-section-toggle{
    min-height:36px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
}


/* ===== Compact sidebar system tools standard ===== */
#appSidebar{
  display:flex!important;
  flex-direction:column!important;
}
#appSidebar #nav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
#appSidebar .side-bottom{
  flex:0 0 auto!important;
  display:block!important;
  padding:10px!important;
  background:#0d2b57!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
#appSidebar .side-user{
  display:grid!important;
  gap:1px!important;
  padding:0 2px 7px!important;
}
#appSidebar .side-user #userName{
  display:block!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:#fff!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#appSidebar .side-user #userRole{
  display:block!important;
  font-size:10px!important;
  line-height:1.25!important;
  color:#a9bed6!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#appSidebar .system-tools-shell{
  position:relative!important;
}
#appSidebar #systemToolsToggle,
#appSidebar .sidebar-signout{
  width:100%!important;
  min-height:38px!important;
  margin:0!important;
  padding:8px 10px!important;
  border-radius:8px!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.2!important;
}
#appSidebar #systemToolsToggle{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#e7eff8!important;
}
#appSidebar #systemToolsToggle:hover,
#appSidebar #systemToolsToggle.active{
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
}
#appSidebar .system-tools-chevron{
  transition:transform .16s ease!important;
}
#appSidebar #systemToolsToggle[aria-expanded="true"] .system-tools-chevron{
  transform:rotate(90deg)!important;
}
#appSidebar .system-tools-panel{
  margin-top:6px!important;
  padding:7px!important;
  max-height:min(44vh,360px)!important;
  overflow-y:auto!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:9px!important;
  background:#102f5d!important;
  box-shadow:0 10px 26px rgba(0,0,0,.20)!important;
}
#appSidebar .system-tools-panel[hidden]{
  display:none!important;
}
#appSidebar .system-tools-section{
  display:grid!important;
  gap:5px!important;
}
#appSidebar .system-tools-label{
  display:block!important;
  padding:2px 3px 4px!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  color:#8fa9c8!important;
}
#appSidebar .system-tools-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
}
#appSidebar .system-tools-list>button,
#appSidebar .system-tools-list>a{
  width:100%!important;
  min-height:36px!important;
  margin:0!important;
  padding:7px 9px!important;
  border-radius:7px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.05)!important;
  color:#e7eff8!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.25!important;
  text-align:left!important;
  text-decoration:none!important;
}
#appSidebar .system-tools-list>button:hover,
#appSidebar .system-tools-list>a:hover{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
}
#appSidebar .system-tools-uat{
  margin-top:7px!important;
  padding-top:7px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
#appSidebar .system-tools-uat summary{
  cursor:pointer!important;
  list-style:none!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:6px 7px!important;
  border-radius:7px!important;
  color:#c7d7ea!important;
  font-size:11px!important;
  font-weight:750!important;
}
#appSidebar .system-tools-uat summary::-webkit-details-marker{
  display:none!important;
}
#appSidebar .system-tools-uat summary::after{
  content:'›'!important;
  font-size:15px!important;
  transition:transform .16s ease!important;
}
#appSidebar .system-tools-uat[open] summary::after{
  transform:rotate(90deg)!important;
}
#appSidebar .system-tools-uat .system-tools-list{
  margin-top:5px!important;
}
#appSidebar .sidebar-signout{
  margin-top:6px!important;
  background:rgba(229,57,53,.15)!important;
  border:1px solid rgba(229,57,53,.32)!important;
  color:#fff!important;
}
#appSidebar .sidebar-signout:hover{
  background:rgba(229,57,53,.24)!important;
}
@media (max-width:650px){
  #appSidebar #systemToolsToggle,
  #appSidebar .sidebar-signout{
    min-height:42px!important;
  }
  #appSidebar .system-tools-list>button,
  #appSidebar .system-tools-list>a{
    min-height:42px!important;
  }
  #appSidebar .system-tools-panel{
    max-height:42vh!important;
  }
}