/* Runtime light theme. Loaded last so old page-specific dark defaults cannot
   override a user-selected theme. */
html[data-theme="light"],
html[data-bs-theme="light"]{
  color-scheme:light!important;
  background:#eef3fb!important;
}

body[data-theme="light"]{
  --bg-main:#f3f6ff!important;
  --bg-elevated:rgba(255,255,255,.88)!important;
  --bg-elevated-soft:#f4f7fc!important;
  --bg-sidebar:rgba(247,249,255,.96)!important;
  --bg-chip:rgba(226,232,240,.88)!important;
  --bg-chip-active:rgba(99,102,241,.12)!important;
  --border-subtle:rgba(51,65,85,.14)!important;
  --border-strong:rgba(79,70,229,.34)!important;
  --text-main:#172033!important;
  --text-muted:#475569!important;
  --accent:#4f46e5!important;
  --accent-soft:#6366f1!important;
  --accent-strong:#3730a3!important;
  --accent-cyan:#0369a1!important;
  --shadow-soft:0 18px 44px rgba(15,23,42,.09)!important;
  background:
    radial-gradient(ellipse at 8% 0%,rgba(99,102,241,.09),transparent 34%),
    radial-gradient(ellipse at 100% 100%,rgba(14,165,233,.06),transparent 34%),
    linear-gradient(180deg,#f8faff 0%,#eef3fb 100%)!important;
  color:var(--text-main)!important;
}

body[data-theme="light"]::before{
  background:
    radial-gradient(900px 600px at 8% -10%,rgba(99,102,241,.10),transparent 70%),
    radial-gradient(850px 620px at 105% 110%,rgba(14,165,233,.07),transparent 72%)!important;
  opacity:.72!important;
}

body[data-theme="light"]::after{opacity:.025!important}

body[data-theme="light"] :is(.app,.app-content,.app>.flex-grow-1){
  color:var(--text-main)!important;
}

body[data-theme="light"] .app-sidebar{
  background:linear-gradient(180deg,rgba(248,250,255,.98),rgba(239,244,252,.97))!important;
  color:var(--text-muted)!important;
  border-right-color:var(--border-subtle)!important;
}

body[data-theme="light"] .app-topbar{
  background:rgba(248,250,255,.88)!important;
  color:var(--text-main)!important;
  border-bottom-color:var(--border-subtle)!important;
}

body[data-theme="light"] :is(
  .card,.modal-content,.offcanvas,.spk-source-card,.spk-monitor-card,
  .spk-docs-card,.spk-login-card,.spk-docs-panel,.spk-config-card,
  .entity-card,.client-overview-section,.connected-device-group,
  .connected-device-item,.connected-device-technical
){
  background:rgba(255,255,255,.86)!important;
  color:var(--text-main)!important;
  border-color:var(--border-subtle)!important;
  box-shadow:var(--shadow-soft)!important;
}

body[data-theme="light"] :is(.card-header,.card-footer,.modal-header,.modal-footer){
  background:rgba(241,245,249,.76)!important;
  color:var(--text-main)!important;
  border-color:var(--border-subtle)!important;
}

body[data-theme="light"] :is(.form-control,.form-select,textarea.form-control,.input-group-text){
  background:#fff!important;
  color:var(--text-main)!important;
  border-color:rgba(51,65,85,.18)!important;
}

body[data-theme="light"] :is(.form-control,.form-select)::placeholder{color:#94a3b8!important}

body[data-theme="light"] :is(.dropdown-menu,.list-group-item,.spk-search-panel){
  background:#fff!important;
  color:var(--text-main)!important;
  border-color:var(--border-subtle)!important;
}

body[data-theme="light"] :is(.dropdown-item,.nav-link,.btn-outline-secondary,.btn-outline-light){
  color:var(--text-main)!important;
}

body[data-theme="light"] :is(.btn-outline-secondary,.btn-outline-light){
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(51,65,85,.16)!important;
}

body[data-theme="light"] :is(.btn-outline-secondary,.btn-outline-light):hover{
  background:rgba(79,70,229,.08)!important;
  border-color:var(--border-strong)!important;
}

body[data-theme="light"] :is(.table-responsive,.spk-table-wrapper){
  background:rgba(255,255,255,.82)!important;
  border-color:var(--border-subtle)!important;
}

body[data-theme="light"] .app-content .table-responsive:has(>.ui-list-table){
  background:rgba(255,255,255,.88)!important;
  border-color:var(--border-subtle)!important;
  scrollbar-color:#cbd5e1 #f8fafc;
}

/* Keep table surfaces aligned with the rest of the card in both themes.
   Legacy card rules pull nested table wrappers outward by 1.05rem; the dark
   theme already cancels that offset, so light mode must do the same. */
body[data-theme="light"] :is(.card,.spk-source-card) > :is(.table-responsive,.spk-table-wrapper),
body[data-theme="light"] :is(.card-body,.spk-source-card) :is(.table-responsive,.spk-table-wrapper){
  margin-left:0!important;
  margin-right:0!important;
}

body[data-theme="light"] :is(.table,.spk-table,.spk-dash-table,.spk-employee-table){
  color:var(--text-main)!important;
  background:transparent!important;
  --bs-table-bg:transparent!important;
  --bs-table-color:var(--text-main)!important;
  --bs-table-striped-bg:rgba(79,70,229,.025)!important;
  --bs-table-striped-color:var(--text-main)!important;
  --bs-table-hover-bg:rgba(79,70,229,.065)!important;
  --bs-table-hover-color:var(--text-main)!important;
  --bs-table-active-bg:rgba(79,70,229,.09)!important;
  --bs-table-active-color:var(--text-main)!important;
}

body[data-theme="light"] :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) :is(thead,tbody,tr){
  background:transparent!important;
  color:var(--text-main)!important;
  border-color:rgba(51,65,85,.12)!important;
}

body[data-theme="light"] :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) thead th{
  background:#eef2f8!important;
  color:#475569!important;
  border-bottom-color:rgba(51,65,85,.16)!important;
}

body[data-theme="light"] .app-content .ui-list-table thead th{
  background:#eef2f8!important;
  color:#475569!important;
  border-bottom-color:rgba(51,65,85,.16)!important;
}

body[data-theme="light"] .app-content .ui-list-table tbody>tr>:is(td,th){
  background:transparent!important;
  color:var(--text-main)!important;
  border-bottom-color:rgba(51,65,85,.11)!important;
}

body[data-theme="light"] .app-content #clientsTable tbody tr[data-client-url]:hover{
  background:rgba(79,70,229,.055)!important;
}

body[data-theme="light"] .app-content #clientsTable tbody tr[data-client-url]:hover>td{
  background:rgba(79,70,229,.055)!important;
  color:var(--text-main)!important;
}

body[data-theme="light"] #clientsTable .client-group-label{
  background:rgba(79,70,229,.10)!important;
  color:#4338ca!important;
}

body[data-theme="light"] :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) > :not(caption) > * > *{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--text-main)!important;
  border-bottom-color:rgba(51,65,85,.11)!important;
}

body[data-theme="light"] :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) tbody tr:hover > *{
  background:rgba(79,70,229,.06)!important;
  background-color:rgba(79,70,229,.06)!important;
}

body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) tbody > tr > :is(td,th){
  --bs-table-bg-state:transparent!important;
  --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:transparent!important;
  background-color:transparent!important;
}
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table) tbody > tr.table-active > :is(td,th){
  background:rgba(79,70,229,.09)!important;
  background-color:rgba(79,70,229,.09)!important;
}

body[data-theme="light"] :is(.text-muted,.connected-device-meta,.connected-device-item-meta){color:var(--text-muted)!important}

@media (max-width:991.98px){
  body[data-theme="light"] :is(
    #clientsTable tbody tr[data-client-url],
    .incident-list-table tbody tr[data-incident-url],
    .client-incident-table tbody tr[data-incident-url],
    .mobile-card-table tbody tr:not(.mobile-table-empty),
    .entity-card
  ){
    background:#fff!important;
    border-color:rgba(79,70,229,.20)!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]{
    background:#fff!important;
    border-color:rgba(79,70,229,.20)!important;
    box-shadow:0 8px 22px rgba(15,23,42,.08)!important;
  }

  body[data-theme="light"] .mobile-card-table tbody tr:not(.mobile-table-empty)>td{
    background:transparent!important;
    color:var(--text-main)!important;
  }
}

/* Keep light table surfaces stable after pointer-out. Several legacy dark table
   rules are intentionally more specific, so the final theme layer owns both
   resting and hover states without an intermediate dark-frame transition. */
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table,.ui-list-table) tbody > tr{
  --table-row-bg:#fff;
  background:#fff!important;
  background-color:#fff!important;
  transition:none!important;
}
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table,.ui-list-table) tbody > tr:nth-child(even){
  --table-row-bg:#f8faff;
  background:#f8faff!important;
  background-color:#f8faff!important;
}
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table,.ui-list-table) tbody > tr:hover{
  --table-row-bg:#eef2ff;
  background:#eef2ff!important;
  background-color:#eef2ff!important;
}
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table,.ui-list-table) tbody > tr.table-active,
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table,.ui-list-table) tbody > tr.data-table-row-selected{
  --table-row-bg:#e5e7ff;
  background:#e5e7ff!important;
  background-color:#e5e7ff!important;
}
body[data-theme="light"] .app-content :is(.table,.spk-table,.spk-dash-table,.spk-employee-table,.ui-list-table) tbody > tr > :is(td,th){
  background:inherit!important;
  background-color:inherit!important;
  background-image:none!important;
  color:var(--text-main)!important;
  transition:none!important;
}

@media (max-width:991.98px){
  .app-content .ui-list-table tbody > tr > .data-table-select-cell,
  .app-content .ui-list-table-custom tbody > tr > .data-table-select-cell{
    display:block!important;
    position:absolute!important;
    right:.7rem!important;
    top:.7rem!important;
    z-index:3!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body[data-theme="light"] .app-content .ui-list-table tbody > tr > :is(td,th){
    background:transparent!important;
    background-color:transparent!important;
  }
}