/* Mobile data rails.
   A toolbar and its rows form one surface: no card-inside-card background,
   no doubled borders, and no rounded first data row. */
@media (max-width: 767.98px){
  body{
    --mobile-list-surface:var(--bg-elevated);
    --mobile-list-divider:color-mix(in srgb,var(--text-muted) 18%,transparent);
    --mobile-list-hover:color-mix(in srgb,var(--accent) 7%,var(--bg-elevated));
    --mobile-list-selected:color-mix(in srgb,var(--accent) 13%,var(--bg-elevated));
  }

  body[data-theme="light"]{
    --mobile-list-surface:#fff;
    --mobile-list-divider:rgba(15,23,42,.11);
    --mobile-list-hover:color-mix(in srgb,var(--accent) 6%,#fff);
    --mobile-list-selected:color-mix(in srgb,var(--accent) 11%,#fff);
  }

  /* The same geometry also covers compact administrative tables that do not
     have the shared toolbar yet. Their wrapper is layout-only; rows paint the
     actual surface so no tinted rectangle can show around them. */
  body[data-theme] .app-content .table-responsive:has(> .ui-list-table){
    width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody{
    gap:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty){
    margin:0 !important;
    border:0 !important;
    border-right:1px solid var(--mobile-list-divider) !important;
    border-bottom:1px solid var(--mobile-list-divider) !important;
    border-left:1px solid var(--mobile-list-divider) !important;
    border-radius:0 !important;
    background:var(--mobile-list-surface) !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):first-child{
    border-top:1px solid var(--mobile-list-divider) !important;
  }

  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):last-child{
    border-radius:0 0 11px 11px !important;
  }

  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):hover{
    background:var(--mobile-list-hover) !important;
  }

  body[data-theme] .app-content .mobile-list-shell,
  body[data-theme] .app-content .mobile-list-shell.card,
  body[data-theme] .app-content .mobile-list-shell.mobile-flat-list-shell{
    width:100%;
    max-width:100%;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell > .card-body,
  body[data-theme] .app-content .mobile-list-shell > .card-body > .table-responsive,
  body[data-theme] .app-content .mobile-list-shell > .table-responsive,
  body[data-theme] .app-content .mobile-list-shell .mobile-list-table-wrap,
  body[data-theme] .app-content .mobile-list-shell .mobile-flat-list-shell{
    width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell > .data-table-toolbar,
  body[data-theme] .app-content .mobile-list-shell > .card-body > .data-table-toolbar{
    overflow:visible;
    border:1px solid var(--mobile-list-divider) !important;
    border-radius:11px 11px 0 0 !important;
    background:var(--mobile-list-surface) !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell .data-table-selection{
    position:static !important;
    inset:auto !important;
    width:100%;
    margin:0 !important;
    padding:.5rem .7rem !important;
    border:0 !important;
    border-top:1px solid var(--mobile-list-divider) !important;
    border-radius:0 !important;
    background:var(--mobile-list-selected) !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell .data-table-selection-actions{
    padding:0;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list){
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody{
    display:grid !important;
    gap:0 !important;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty){
    width:100%;
    max-width:100%;
    margin:0 !important;
    border:0 !important;
    border-right:1px solid var(--mobile-list-divider) !important;
    border-bottom:1px solid var(--mobile-list-divider) !important;
    border-left:1px solid var(--mobile-list-divider) !important;
    border-radius:0 !important;
    background:var(--mobile-list-surface) !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):last-child{
    border-radius:0 0 11px 11px !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):hover{
    background:var(--mobile-list-hover) !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody > tr.data-table-row-selected,
  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody > tr.table-active{
    background:var(--mobile-list-selected) !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list).is-selecting tbody > tr.data-table-row-selected{
    border-left:3px solid var(--accent) !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list) tbody > tr > td{
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }

  /* A selected mobile record is one card, not a stack of highlighted cells.
     Bootstrap's striped-table state otherwise paints every label/value row. */
  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list).is-selecting tbody > tr.data-table-row-selected > :is(td,th){
    --bs-table-bg-type:transparent !important;
    --bs-table-bg-state:transparent !important;
    --bs-table-accent-bg:transparent !important;
    --bs-table-striped-bg:transparent !important;
    --bs-table-hover-bg:transparent !important;
    --bs-table-active-bg:transparent !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-empty,.mobile-table-empty){
    border-radius:0 0 11px 11px !important;
    background:var(--mobile-list-surface) !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell:not(:has(.data-table-toolbar)) :is(.ui-list-table,.mobile-flat-list) tbody > tr:first-child{
    border-top:1px solid var(--mobile-list-divider) !important;
    border-radius:0 !important;
  }

  /* Purpose-built tables carry older, highly specific per-page card rules.
     Keep this final mapping explicit so those legacy declarations cannot bring
     back gaps, shadows or individual rounded corners. */
  body[data-theme] .app-content .mobile-list-shell #clientsTable tbody > tr[data-client-url],
  body[data-theme] .app-content .mobile-list-shell #incidentsTable tbody > tr[data-incident-url],
  body[data-theme] .app-content .mobile-list-shell .spk-logs-event-table tbody > tr[data-event-id],
  body[data-theme] .app-content .mobile-list-shell .client-event-table tbody > tr[data-event-id],
  body[data-theme] .app-content .mobile-list-shell .client-incident-table tbody > tr[data-incident-url],
  body[data-theme] .app-content .mobile-list-shell #commandsTable tbody > tr.command-row,
  body[data-theme] .app-content .mobile-list-shell #installedProgramsTable tbody > tr:not(.ui-list-empty):not(.mobile-table-empty),
  body[data-theme] .app-content .mobile-list-shell #fsFilesTable tbody > tr,
  body[data-theme] .app-content .mobile-list-shell #fsMarkedTable tbody > tr{
    margin:0 !important;
    border:0 !important;
    border-right:1px solid var(--mobile-list-divider) !important;
    border-bottom:1px solid var(--mobile-list-divider) !important;
    border-left:1px solid var(--mobile-list-divider) !important;
    border-radius:0 !important;
    background:var(--mobile-list-surface) !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(#clientsTable,#incidentsTable,.spk-logs-event-table,.client-event-table,.client-incident-table,#commandsTable,#installedProgramsTable,#fsFilesTable,#fsMarkedTable) tbody > tr:last-child{
    border-radius:0 0 11px 11px !important;
  }
}

/* Selection prepends a real col element when a table has a colgroup. Without
   this rule, the checkbox inherits the first data column's wide track. */
col.data-table-select-col{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
}

/* Stable card rail for the whole compact range. The legacy rules above used
   to merge rows into one square-edged surface below 768px, so the same page
   changed shape while it was still in mobile mode. Keep the wrapper neutral
   and let every entity remain a complete, separated card up to 992px. */
@media (max-width:991.98px){
  body{
    --mobile-list-surface:var(--bg-elevated);
    --mobile-list-divider:color-mix(in srgb,var(--text-muted) 18%,transparent);
    --mobile-list-hover:color-mix(in srgb,var(--accent) 7%,var(--bg-elevated));
    --mobile-list-selected:color-mix(in srgb,var(--accent) 13%,var(--bg-elevated));
    --mobile-card-gap:.7rem;
    --mobile-card-radius:11px;
  }

  body[data-theme="light"]{
    --mobile-list-surface:#fff;
    --mobile-list-divider:rgba(15,23,42,.11);
    --mobile-list-hover:color-mix(in srgb,var(--accent) 6%,#fff);
    --mobile-list-selected:color-mix(in srgb,var(--accent) 11%,#fff);
  }

  /* The card layout starts at 991.98px, so its rail must stay neutral across
     the same range. Otherwise the theme layer repaints the outer card/table
     wrapper from 768px upward and creates a second surface behind the cards. */
  body[data-theme] .app-content .mobile-list-shell,
  body[data-theme] .app-content .mobile-list-shell.card,
  body[data-theme] .app-content .mobile-list-shell.mobile-flat-list-shell{
    width:100%;
    max-width:100%;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell > .card-body,
  body[data-theme] .app-content .mobile-list-shell > .card-body > .table-responsive,
  body[data-theme] .app-content .mobile-list-shell > .table-responsive,
  body[data-theme] .app-content .mobile-list-shell .mobile-list-table-wrap,
  body[data-theme] .app-content .mobile-list-shell .mobile-flat-list-shell{
    width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(.ui-list-table,.mobile-flat-list){
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-list-shell > .data-table-toolbar,
  body[data-theme] .app-content .mobile-list-shell > .card-body > .data-table-toolbar{
    margin:0 0 var(--mobile-card-gap) !important;
    border:1px solid var(--mobile-list-divider) !important;
    border-radius:var(--mobile-card-radius) !important;
    background:var(--mobile-list-surface) !important;
  }

  body[data-theme] .app-content :is(.mobile-list-shell .ui-list-table,.mobile-list-shell .mobile-flat-list,.ui-list-table:not(.ui-list-table-custom)) tbody{
    display:grid !important;
    gap:var(--mobile-card-gap) !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  body[data-theme] .app-content :is(.mobile-list-shell .ui-list-table,.mobile-list-shell .mobile-flat-list,.ui-list-table:not(.ui-list-table-custom)) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty),
  body[data-theme] .app-content .mobile-list-shell #clientsTable tbody > tr[data-client-url],
  body[data-theme] .app-content .mobile-list-shell #incidentsTable tbody > tr[data-incident-url],
  body[data-theme] .app-content .mobile-list-shell .spk-logs-event-table tbody > tr[data-event-id],
  body[data-theme] .app-content .mobile-list-shell .client-event-table tbody > tr[data-event-id],
  body[data-theme] .app-content .mobile-list-shell .client-incident-table tbody > tr[data-incident-url],
  body[data-theme] .app-content .mobile-list-shell #commandsTable tbody > tr.command-row,
  body[data-theme] .app-content .mobile-list-shell #installedProgramsTable tbody > tr:not(.ui-list-empty):not(.mobile-table-empty),
  body[data-theme] .app-content .mobile-list-shell #fsFilesTable tbody > tr,
  body[data-theme] .app-content .mobile-list-shell #fsMarkedTable tbody > tr{
    margin:0 !important;
    border:1px solid var(--mobile-list-divider) !important;
    border-radius:var(--mobile-card-radius) !important;
    background:var(--mobile-list-surface) !important;
    background-image:none !important;
    overflow:hidden !important;
    box-shadow:0 8px 20px rgba(2,6,23,.08) !important;
  }

  body[data-theme] .app-content .mobile-list-shell :is(#clientsTable,#incidentsTable,.spk-logs-event-table,.client-event-table,.client-incident-table,#commandsTable,#installedProgramsTable,#fsFilesTable,#fsMarkedTable) tbody > tr:last-child,
  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):first-child,
  body[data-theme] .app-content .ui-list-table:not(.ui-list-table-custom) tbody > tr:not(.ui-list-empty):not(.mobile-table-empty):last-child{
    border:1px solid var(--mobile-list-divider) !important;
    border-radius:var(--mobile-card-radius) !important;
  }

  body[data-theme] .app-content .mobile-list-shell .data-table-selection{
    margin:.55rem 0 0 !important;
    border:1px solid color-mix(in srgb,var(--accent) 30%,var(--mobile-list-divider)) !important;
    border-radius:9px !important;
  }

  body[data-theme] .app-content :is(.mobile-list-shell .ui-list-table,.mobile-list-shell .mobile-flat-list,.ui-list-table:not(.ui-list-table-custom)) tbody > :is(.ui-list-empty,.mobile-table-empty){
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content :is(.mobile-list-shell .ui-list-table,.mobile-list-shell .mobile-flat-list,.ui-list-table:not(.ui-list-table-custom)) tbody > :is(.ui-list-empty,.mobile-table-empty) > td{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  /* ID-based row rules above win the cascade even when declared earlier.
     Match their specificity so empty states keep only their dashed card. */
  body[data-theme] .app-content .mobile-list-shell :is(#clientsTable,#incidentsTable,.spk-logs-event-table,.client-event-table,.client-incident-table,#commandsTable,#installedProgramsTable,#fsFilesTable,#fsMarkedTable) tbody > tr.ui-list-empty{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}