/* Secure24 UX cleanup — compact, calm, role-aware presentation.
   Additive only: preserves existing workflows and permission checks. */
:root{
  --ux-bg:#f5f7fa;
  --ux-card:#fff;
  --ux-navy:#0d2b57;
  --ux-blue:#1976d2;
  --ux-line:#dfe6ee;
  --ux-muted:#64748b;
  --ux-shadow:0 2px 10px rgba(13,43,87,.055);
}
body,.app,main,#content{background:var(--ux-bg)!important}
#content{padding-top:16px!important}
.card,.panel,.report-card,.table-wrap,.record-card,.modal-card{
  box-shadow:var(--ux-shadow)!important;
  border-color:var(--ux-line)!important;
}
.card:hover,.panel:hover,.report-card:hover,.table-card:hover,.dashboard-card:hover,.employee-card:hover,.request-card:hover{
  transform:none!important;
  box-shadow:var(--ux-shadow)!important;
}
main>header{
  background:#fff!important;
  border-bottom:1px solid var(--ux-line)!important;
  box-shadow:none!important;
}
#viewTitle{font-size:21px!important}
#viewSubtitle{font-size:11.5px!important}

/* Keep primary actions blue and reserve green/amber/red for status only. */
#content button.primary,
#content button[data-action="add"],
#content button[data-finance-action="new"],
#content button[data-expense-new],
.modal-card button.primary{
  background:var(--ux-blue)!important;
  border-color:var(--ux-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){
  background:#1565c0!important;
  border-color:#1565c0!important;
}

/* Cleaner grouped navigation. Only the active working area stays expanded. */
#appSidebar .nav-section{margin:1px 0 5px!important}
#appSidebar .nav-section-toggle{
  min-height:32px!important;
  padding:8px 14px 5px!important;
  cursor:pointer!important;
  border-radius:0!important;
}
#appSidebar .nav-section-toggle .chevron{
  margin-left:auto;
  font-size:17px!important;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .16s ease;
}
#appSidebar .nav-section.open .nav-section-toggle .chevron{transform:rotate(90deg)}
#appSidebar .nav-section-items{display:none!important}
#appSidebar .nav-section.open .nav-section-items{display:block!important}
#appSidebar .nav-section[data-group="home"] .nav-section-items{display:block!important}
#appSidebar .nav-section[data-group="home"] .nav-section-toggle{display:none!important}
#appSidebar #nav button[data-view]{min-height:36px!important}
#appSidebar #nav button[data-view].active{background:var(--ux-blue)!important}

/* Header search / command palette trigger. */
.ux-header-search{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:210px;
  max-width:320px;
  height:38px;
  padding:0 11px;
  border:1px solid #d7e0e9;
  border-radius:9px;
  background:#f8fafc;
  color:#536579;
  cursor:pointer;
  font-weight:650;
  font-size:12px;
  box-shadow:none;
}
.ux-header-search:hover{background:#fff;border-color:#bfd0e1}
.ux-header-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ux-header-search kbd{
  margin-left:auto;
  padding:2px 6px;
  border:1px solid #d8e0e8;
  border-bottom-width:2px;
  border-radius:5px;
  background:#fff;
  color:#738295;
  font:600 10px/1.4 var(--s24-font,Inter,Arial,sans-serif);
}

/* Command palette. */
.ux-palette-backdrop{
  position:fixed;
  inset:0;
  z-index:2600;
  display:grid;
  place-items:start center;
  padding:12vh 18px 24px;
  background:rgba(13,43,87,.34);
  backdrop-filter:blur(3px);
}
.ux-palette{
  width:min(620px,96vw);
  max-height:70vh;
  overflow:hidden;
  border:1px solid #d9e2ec;
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(13,43,87,.24);
}
.ux-palette-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-bottom:1px solid #e7edf3;
}
.ux-palette-head svg{width:18px;height:18px;fill:none;stroke:#64748b;stroke-width:2}
.ux-palette-head input{
  flex:1;
  min-width:0;
  min-height:38px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  font-size:14px;
}
.ux-palette-close{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:0!important;
  background:#f1f5f9!important;
  color:#475569!important;
}
.ux-palette-list{max-height:56vh;overflow:auto;padding:8px}
.ux-palette-item{
  width:100%;
  display:grid!important;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:center;
  min-height:50px!important;
  padding:8px 10px!important;
  margin:2px 0;
  border:0!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#1e293b!important;
  text-align:left!important;
  box-shadow:none!important;
}
.ux-palette-item:hover,.ux-palette-item.is-active{background:#f1f6fb!important}
.ux-palette-icon{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:8px;
  background:#edf5ff;
  color:var(--ux-blue);
  font-weight:900;
}
.ux-palette-copy strong{display:block;font-size:12.5px;color:#1f3349}
.ux-palette-copy small{display:block;margin-top:2px;font-size:10.5px;color:#7b8796}
.ux-palette-group{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#8a98a8;font-weight:800}
.ux-palette-empty{padding:24px;text-align:center;color:#7b8796;font-size:12px}
.ux-palette-section{padding:8px 10px 5px;color:#8391a2;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.ux-palette-loading{padding:8px 12px 12px;color:#7b8796;font-size:10.5px}
.ux-palette-hint{padding:9px 14px;border-top:1px solid #edf1f5;background:#fafbfd;color:#8290a0;font-size:10px}
.ux-search-status{display:inline-block;margin-left:7px;padding:2px 5px;border-radius:5px;background:#eef3f7;color:#617286;font-size:9px;font-weight:750}


.sample-a-dashboard-icon,
.sample-a-alert-icon{
  display:grid!important;
  place-items:center;
}
.sample-a-dashboard-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sample-a-alert-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Dashboard: fewer visual layers, explicit quick access. */
.sample-a-dashboard-shell,.management-dashboard{gap:12px!important}
.sample-a-top-grid .dashboard-kpi{
  min-height:110px!important;
  box-shadow:0 1px 5px rgba(13,43,87,.045)!important;
}
.sample-a-status-grid .dashboard-kpi{box-shadow:none!important}
.sample-a-body-grid>.card{box-shadow:0 1px 5px rgba(13,43,87,.04)!important}
.ux-quick-access{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--ux-line);
  border-radius:10px;
  background:#fff;
}
.ux-quick-access-label{
  margin-right:4px;
  color:#718096;
  font-size:9.5px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}
#content .ux-quick-access button{
  min-height:34px!important;
  padding:7px 10px!important;
  border:1px solid #d8e2ec!important;
  border-radius:8px!important;
  background:#f8fafc!important;
  color:#284765!important;
  font-size:11px!important;
  box-shadow:none!important;
}
#content .ux-quick-access button:hover{background:#eef5fb!important;border-color:#c4d6e7!important}

/* Compact default tables, with an explicit show-all control. */
.ux-table-tools{
  display:flex;
  justify-content:flex-end;
  margin:0 0 8px;
}
#content .ux-table-tools button{
  min-height:32px!important;
  padding:6px 9px!important;
  font-size:10.5px!important;
  border-radius:7px!important;
  box-shadow:none!important;
}
.ux-compact-table th,.ux-compact-table td{white-space:nowrap}
.ux-compact-table td:nth-child(2),
.ux-compact-table td:nth-child(3){max-width:220px;overflow:hidden;text-overflow:ellipsis}

/* Employees: #, Name, Job Title, Site, Status, Actions. */
table[data-ux-view="employees"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(4),
table[data-ux-view="employees"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(6),
table[data-ux-view="employees"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(7){display:none}
/* Clients: Client, Contact, Phone, Status, Actions. */
table[data-ux-view="clients"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(3),
table[data-ux-view="clients"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(4),
table[data-ux-view="clients"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(5),
table[data-ux-view="clients"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(6),
table[data-ux-view="clients"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(8){display:none}
/* Contracts: Contract #, Client, End Date, Value, Renewal Status, Actions. */
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(3),
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(4),
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(5),
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(6),
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(7),
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(10),
table[data-ux-view="contracts"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(11){display:none}
/* Sites: Site, Client, Location, Vacancies, Status, Actions. */
table[data-ux-view="sites"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(4),
table[data-ux-view="sites"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(5),
table[data-ux-view="sites"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(6),
table[data-ux-view="sites"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(8){display:none}

/* Attendance: Date, Name, Site, Shift, Status. */
table[data-ux-view="attendance"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(2),
table[data-ux-view="attendance"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(6),
table[data-ux-view="attendance"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(7){display:none}
/* Payroll: Period, Name, Net Pay, Status. */
table[data-ux-view="payroll"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(2),
table[data-ux-view="payroll"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(4),
table[data-ux-view="payroll"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(5),
table[data-ux-view="payroll"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(6),
table[data-ux-view="payroll"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(7){display:none}
/* Finance: Date, Type, Description, Amount, Status. */
table[data-ux-view="finance"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(3),
table[data-ux-view="finance"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(5){display:none}
/* Incidents: Date, Site, Severity, Incident, Status. */
table[data-ux-view="incidents"].ux-compact-table:not(.ux-show-all) :is(th,td):nth-child(5){display:none}

/* Focused page search keeps long lists calm and usable. */
.ux-section-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.ux-list-search{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:3px 5px 3px 10px;
  border:1px solid #d8e1ea;
  border-radius:9px;
  background:#fff;
}
.ux-list-search:focus-within{border-color:#9fbfe0;box-shadow:0 0 0 2px rgba(25,118,210,.08)}
.ux-list-search svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
  fill:none;
  stroke:#718096;
  stroke-width:2;
}
.ux-list-search input{
  width:180px;
  min-height:28px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:11.5px!important;
}
#content .ux-list-search button{
  min-height:28px!important;
  padding:5px 8px!important;
  border:0!important;
  border-radius:6px!important;
  background:#eef4fa!important;
  color:#31516f!important;
  box-shadow:none!important;
  font-size:10px!important;
}
#content .ux-list-search button[type="submit"]{background:#e7f1fb!important;color:#1769aa!important}
.employee-toolbar .ux-list-search{margin-left:auto}
@media(max-width:760px){
  .ux-section-tools{width:100%;justify-content:stretch}
  .ux-list-search{flex:1 1 100%;width:100%}
  .ux-list-search input{flex:1;width:auto;min-width:0}
  .employee-toolbar .ux-list-search{order:3;flex:1 1 100%;width:100%;margin-left:0}
}
@media(max-width:480px){
  .ux-list-search button{padding-inline:7px!important}
}

/* Final UAT polish for dense operational workspaces. */
.ux-list-count{
  min-height:auto!important;
  margin:2px 0 8px!important;
  padding:0 2px!important;
  background:transparent!important;
  border:0!important;
  color:#627386;
  font-size:10.5px;
}
.finance-list-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:34px;
  margin:2px 0 8px;
  color:#627386;
  font-size:10.5px;
}
.finance-list-controls .finance-clear-filter{margin:0!important}
.fleet-toolbar,.inventory-toolbar,.payroll-toolbar,.finance-toolbar{
  gap:10px!important;
  flex-wrap:wrap!important;
}
.fleet-toolbar>.ux-section-tools,
.inventory-toolbar>.ux-section-tools,
.payroll-toolbar>.ux-section-tools,
.finance-toolbar>.ux-section-tools{
  margin-left:auto;
}
.finance-tabs,.inventory-tabs,.fleet-tabs{
  scrollbar-width:thin;
}
.attendance-filter-panel{min-width:0;flex:1}
.attendance-filter-panel>summary{
  display:none;
  cursor:pointer;
  list-style:none;
}
.attendance-filter-panel>summary::-webkit-details-marker{display:none}
.attendance-filter-panel>summary span{color:#7b8796;font-size:10px;font-weight:500}
.attendance-filter-panel[open]>summary:after{transform:rotate(180deg)}
.attendance-filter-panel>summary:after{content:"⌄";margin-left:auto;color:#65788d;font-size:14px;transition:transform .15s ease}

/* Client workspace: summary first, linked records on demand. */
.client-detail{display:grid;gap:16px}
.client-detail-grid{margin-top:2px}
.client-detail-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.client-detail-sections>section{
  min-width:0;
  padding:12px;
  border:1px solid var(--ux-line);
  border-radius:10px;
  background:#fbfcfe;
}
.client-detail-sections .section-head{
  margin:0 0 8px!important;
  padding:0!important;
  min-height:auto!important;
  background:transparent!important;
  border:0!important;
}
.client-detail-sections .section-head h3{margin:0;font-size:13px}
.client-detail-sections .section-head span{
  min-width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#edf3f8;
  color:#50677f;
  font-size:10px;
  font-weight:800;
}
.client-detail-list{display:grid;gap:6px}
#content .client-detail-list>button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px!important;
  padding:8px 10px!important;
  border:1px solid #e1e8ef!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#243b53!important;
  box-shadow:none!important;
  text-align:left!important;
}
#content .client-detail-list>button:hover{border-color:#c6d7e7!important;background:#f7fbff!important}
.client-detail-list button>span:first-child{min-width:0}
.client-detail-list b,.client-detail-list small{display:block}
.client-detail-list b{font-size:11.5px}
.client-detail-list small{margin-top:2px;color:#748396;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-detail-list button>span:last-child{color:var(--ux-blue);font-size:10.5px;font-weight:800}
.empty-state{margin:0;padding:14px;border:1px dashed #dbe4ed;border-radius:8px;color:#7d8998;font-size:11px;text-align:center}

/* Collapse long row action clusters to one primary action + More. */
.ux-more-menu{position:relative}
.ux-more-menu>summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #d5dfe8;
  border-radius:8px;
  background:#fff;
  color:#3b556f;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.ux-more-menu>summary::-webkit-details-marker{display:none}
.ux-more-menu>summary:after{content:"▾";margin-left:6px;font-size:9px}
.ux-more-menu[open]>summary{background:#eef5fb;border-color:#bfd2e4}
 .ux-more-menu-list{
  position:static;
  display:grid;
  gap:4px;
  min-width:180px;
  margin-top:5px;
  padding:6px;
  border:1px solid #dbe4ed;
  border-radius:9px;
  background:#fff;
  box-shadow:0 12px 30px rgba(13,43,87,.14);
}
#content .ux-more-menu-list button{
  width:100%;
  justify-content:flex-start;
  min-height:34px!important;
  padding:7px 9px!important;
  border:0!important;
  background:#fff!important;
  box-shadow:none!important;
  text-align:left!important;
}
#content .ux-more-menu-list button:hover{background:#f4f7fa!important}

.ux-loading-card{
  display:flex!important;
  align-items:center;
  gap:10px;
  min-height:68px;
  color:#64748b;
  font-size:12px;
  box-shadow:none!important;
}
.ux-loading-dot{
  width:16px;height:16px;
  border:2px solid #d8e4ef;
  border-top-color:var(--ux-blue);
  border-radius:50%;
  animation:ux-spin .7s linear infinite;
}
@keyframes ux-spin{to{transform:rotate(360deg)}}

/* Forms: retain existing workflow layouts while reducing visual noise. */
.form-grid{gap:12px!important}
label{font-size:11.5px!important}
input,select,textarea{box-shadow:none!important}

/* Mobile keeps cards and large touch targets, while avoiding dense toolbars. */
@media(max-width:900px){
  .ux-header-search{min-width:42px;width:42px;padding:0;justify-content:center}
  .ux-header-search span,.ux-header-search kbd{display:none}
}
@media(max-width:650px){
  body,.app,main,#content{background:#f6f8fb!important}
  .fleet-toolbar,.inventory-toolbar,.payroll-toolbar,.finance-toolbar{align-items:stretch!important}
  .fleet-toolbar>.ux-section-tools,
  .inventory-toolbar>.ux-section-tools,
  .payroll-toolbar>.ux-section-tools,
  .finance-toolbar>.ux-section-tools{width:100%;margin-left:0}
  .fleet-tabs,.inventory-tabs,.finance-tabs{
    width:100%;
    display:flex!important;
    overflow-x:auto;
    flex-wrap:nowrap!important;
    gap:6px;
    padding-bottom:2px;
  }
  .fleet-tabs button,.inventory-tabs button,.finance-tabs button{flex:0 0 auto;white-space:nowrap}
  .finance-list-controls{align-items:flex-start;flex-direction:column}
  .attendance-tools{display:grid!important;gap:10px!important}
  .attendance-filter-panel{width:100%}
  .attendance-filter-panel>summary{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:9px 10px;
    border:1px solid #dfe6ee;
    border-radius:8px;
    background:#f8fafc;
    color:#284765;
    font-size:11.5px;
    font-weight:800;
  }
  .attendance-filter-panel[open]>summary{margin-bottom:10px;background:#fff}
  .attendance-filter-panel .attendance-filters{grid-template-columns:1fr!important}
  .attendance-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}
  .attendance-actions button{width:100%!important;min-width:0!important}
  .attendance-actions .primary{grid-column:1/-1}

  .client-detail-sections{grid-template-columns:1fr}
  .mobile-header{gap:10px!important}
  .mobile-header .mobile-logo{order:1;margin-left:0!important}
  .mobile-header .mobile-heading{order:2;flex:1 1 auto;min-width:0}
  .mobile-header #openNav{order:3;margin-left:auto}
  .ux-header-search{display:none}
  .ux-quick-access{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
  .ux-quick-access-label{grid-column:1/-1}
  #content .ux-quick-access button{width:100%}
  .ux-table-tools{display:none}
  .ux-compact-table{display:none!important}
  .ux-more-menu-list{position:fixed;left:12px;right:12px;bottom:12px;top:auto;min-width:0}
}
@media(max-width:360px){
  .ux-quick-access{grid-template-columns:1fr}
}