/* Unified list tables only. Event timelines and report tables intentionally
   do not opt in to .ui-list-table and keep their compact presentation. */

body .app-content .table-responsive:has(> .ui-list-table){
  width:100%;
  max-width:100%;
  border:1px solid rgba(148,163,184,.14) !important;
  border-radius:14px !important;
  background:#0d1428 !important;
  box-shadow:0 14px 38px rgba(0,0,0,.18) !important;
  overflow:auto !important;
  scrollbar-width:thin;
  scrollbar-color:#394566 #0a1020;
}

body .app-content .card > .table-responsive:has(> .ui-list-table),
body .app-content .card > .card-body > .table-responsive:has(> .ui-list-table){
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

body .app-content .card > .card-body:has(> .table-responsive:only-child > .ui-list-table){
  padding:0 !important;
}

body .app-content .ui-list-table{
  width:100%;
  min-width:680px !important;
  margin:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:transparent !important;
  color:var(--text-main) !important;
  font-size:.875rem !important;
  line-height:1.45 !important;
  --bs-table-bg:transparent !important;
  --bs-table-color:var(--text-main) !important;
  --bs-table-striped-bg:transparent !important;
  --bs-table-striped-color:var(--text-main) !important;
  --bs-table-hover-bg:transparent !important;
  --bs-table-hover-color:var(--text-main) !important;
}

body .app-content .ui-list-table thead th{
  position:sticky !important;
  top:0;
  z-index:2;
  padding:.72rem .85rem !important;
  border:0 !important;
  border-bottom:1px solid rgba(148,163,184,.14) !important;
  background:#0a1021 !important;
  color:#8d9ab7 !important;
  font-family:"IBM Plex Mono",Consolas,ui-monospace,monospace !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  line-height:1.25 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

body .app-content .table-sort-control{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-align:left;
  text-decoration:none;
  text-transform:inherit;
  white-space:nowrap;
  cursor:pointer;
}

body .app-content .table-sort-control i{
  color:#64748b;
  font-size:.74rem;
  transition:color .16s ease,transform .16s ease;
}

body .app-content .table-sort-control:is(:hover,:focus-visible),
body .app-content .table-sort-control.is-active{
  color:#c7d2fe !important;
}

body .app-content .table-sort-control.is-active{
  text-shadow:0 0 14px rgba(129,140,248,.56);
}

body .app-content .table-sort-control:is(:hover,:focus-visible) i,
body .app-content .table-sort-control.is-active i{
  color:#818cf8 !important;
  filter:drop-shadow(0 0 6px rgba(129,140,248,.5));
}

body .app-content .table-sort-control:focus-visible{
  outline:2px solid rgba(129,140,248,.72);
  outline-offset:4px;
  border-radius:2px;
}

body .app-content .ui-list-table tbody > tr > :is(td,th){
  padding:.78rem .85rem !important;
  border:0 !important;
  border-bottom:1px solid rgba(148,163,184,.09) !important;
  background:transparent !important;
  color:var(--text-main) !important;
  vertical-align:middle !important;
  box-shadow:none !important;
}

body .app-content .ui-list-table tbody > tr:last-child > :is(td,th){
  border-bottom:0 !important;
}

body .app-content .ui-list-table tbody > tr:nth-child(even) > :is(td,th){
  background:rgba(255,255,255,.016) !important;
}

body .app-content .ui-list-table tbody > tr:hover > :is(td,th),
body .app-content .ui-list-table tbody > tr.table-active > :is(td,th){
  background:rgba(99,102,241,.075) !important;
}

body .app-content .ui-list-table tbody td:first-child{
  font-weight:650;
}

body .app-content .ui-list-table tbody td{
  max-width:32rem !important;
  overflow-wrap:anywhere;
}

/* Theme-aware table surfaces. The previous hard-coded dark values leaked
   into light mode, especially while hovering a row. */
body[data-theme="light"] .app-content .table-responsive:has(> .ui-list-table){
  border-color:rgba(15,23,42,.11) !important;
  background:#fff !important;
  box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
  scrollbar-color:#cbd5e1 #f8fafc;
}

body[data-theme="light"] .app-content .ui-list-table thead th{
  border-bottom-color:rgba(15,23,42,.1) !important;
  background:#f6f8fc !important;
  color:#5f6e85 !important;
}

body[data-theme="light"] .app-content .ui-list-table tbody > tr:nth-child(even) > :is(td,th){
  background:rgba(15,23,42,.018) !important;
}

body[data-theme="light"] .app-content .ui-list-table tbody > tr:hover > :is(td,th),
body[data-theme="light"] .app-content .ui-list-table tbody > tr.table-active > :is(td,th){
  background:color-mix(in srgb,var(--accent) 7%,#fff) !important;
  color:var(--text-main) !important;
}

/* A row must return directly to its light surface after pointer leave. Bootstrap's
   state variables previously exposed the dark active colour during the transition. */
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) tbody > tr > :is(td,th){
  --bs-table-accent-bg:transparent !important;
  --bs-table-hover-bg:transparent !important;
  --bs-table-active-bg:transparent !important;
  transition:background-color .12s ease-out !important;
}
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) tbody > tr:not(:hover):not(.table-active) > :is(td,th){
  background-color:transparent !important;
}

/* Compact, range-based pagination inspired by mail clients. */
.spk-pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.35rem;
  min-height:38px;
  color:var(--text-muted);
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.spk-pager-range{margin-right:.35rem;white-space:nowrap}
.spk-pager-button{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-main);
  text-decoration:none;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.spk-pager-button:hover,.spk-pager-button:focus-visible{border-color:var(--border-subtle);background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent-strong);outline:0}
.spk-pager-button[aria-disabled="true"],.spk-pager-button:disabled{opacity:.34;pointer-events:none}
.spk-pager-button i{font-size:1rem}
body[data-theme="light"] .spk-pager-button:hover,body[data-theme="light"] .spk-pager-button:focus-visible{background:#e9edf6;color:#312e81}
@media(max-width:575.98px){
  .spk-pager{width:100%;justify-content:space-between}
  .spk-pager-range{margin:0 auto 0 0}
  .spk-pager-button{width:40px;height:40px;border-color:var(--border-subtle)}
}

body[data-theme="light"] .app-content .table-sort-control:is(:hover,:focus-visible),
body[data-theme="light"] .app-content .table-sort-control.is-active{
  color:#4f46e5 !important;
}

@media (max-width:991.98px){
  body .app-content .table-responsive:has(> .ui-list-table:not(.ui-list-table-custom)),
  body .app-content .card > .table-responsive:has(> .ui-list-table:not(.ui-list-table-custom)),
  body .app-content .card-body > .table-responsive:has(> .ui-list-table:not(.ui-list-table-custom)){
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom){
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    background:transparent !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) thead{
    display:none !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) tbody{
    display:grid !important;
    gap:.65rem;
    width:100%;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) tbody tr:not(.ui-list-empty):not(.mobile-table-empty){
    display:block !important;
    width:100%;
    padding:.28rem .78rem !important;
    border:1px solid rgba(148,163,184,.14) !important;
    border-radius:12px !important;
    background:linear-gradient(180deg,#111a32,#0d1428) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) tbody tr:not(.ui-list-empty):not(.mobile-table-empty) > td{
    display:grid !important;
    grid-template-columns:minmax(6.6rem,36%) minmax(0,1fr);
    gap:.65rem;
    align-items:start;
    width:100% !important;
    max-width:100% !important;
    padding:.56rem 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(148,163,184,.1) !important;
    background:transparent !important;
    white-space:normal !important;
    overflow:visible !important;
    text-align:left !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) tbody tr:not(.ui-list-empty):not(.mobile-table-empty) > td:last-child{
    border-bottom:0 !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) td[data-label]::before{
    content:attr(data-label);
    color:#8d9ab7;
    font:700 .69rem/1.4 "IBM Plex Mono",Consolas,ui-monospace,monospace;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) td.ui-list-primary{
    display:block !important;
    padding-top:.7rem !important;
    font-size:.94rem;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) td.ui-list-primary::before{
    display:block;
    margin-bottom:.28rem;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) td.ui-list-actions{
    display:flex !important;
    flex-wrap:wrap;
    gap:.45rem;
    align-items:center;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) td.ui-list-actions::before{
    flex:1 0 100%;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) :is(.ui-list-empty,.mobile-table-empty){
    display:block !important;
    width:100%;
    padding:.9rem !important;
    border:1px solid rgba(148,163,184,.14) !important;
    border-radius:12px !important;
    background:#0d1428 !important;
  }

  body .app-content .ui-list-table:not(.ui-list-table-custom) :is(.ui-list-empty,.mobile-table-empty) > td{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    white-space:normal !important;
  }

  /* These three lists already have purpose-built mobile content. Only their
     outer card geometry is aligned with the generic list cards. */
  body .app-content #clientsTable tbody tr[data-client-url],
  body .app-content .incident-list-table tbody tr[data-incident-url],
  body .app-content .client-incident-table tbody tr[data-incident-url]{
    border-radius:12px !important;
    border-color:rgba(148,163,184,.14) !important;
    background:linear-gradient(180deg,#111a32,#0d1428) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
  }

  body .app-content #clientsTable tbody tr[data-client-url] > td:not(.client-actions),
  body .app-content .incident-list-table tbody tr[data-incident-url] > td:first-child,
  body .app-content .client-incident-table tbody tr[data-incident-url] > td:first-child{
    width:100% !important;
    max-width:100% !important;
  }

  body[data-theme="light"] .app-content .ui-list-table:not(.ui-list-table-custom) tbody tr:not(.ui-list-empty):not(.mobile-table-empty),
  body[data-theme="light"] .app-content #clientsTable tbody tr[data-client-url],
  body[data-theme="light"] .app-content .incident-list-table tbody tr[data-incident-url],
  body[data-theme="light"] .app-content .client-incident-table tbody tr[data-incident-url]{
    border-color:rgba(15,23,42,.11) !important;
    background:linear-gradient(180deg,#fff,#f8faff) !important;
    box-shadow:0 8px 20px rgba(15,23,42,.07) !important;
  }

  body[data-theme="light"] .app-content .ui-list-table:not(.ui-list-table-custom) :is(.ui-list-empty,.mobile-table-empty){
    border-color:rgba(15,23,42,.11) !important;
    background:#fff !important;
  }
}

@media (max-width:479.98px){
  body .app-content .ui-list-table:not(.ui-list-table-custom) tbody tr:not(.ui-list-empty):not(.mobile-table-empty) > td{
    grid-template-columns:1fr;
    gap:.22rem;
  }
}