/* DriveOS theme selector v1 — isolated, light remains default */
:root{color-scheme:light}
html[data-driveos-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0b0b;
  --surface:#151515;
  --surface-2:#1d1d1d;
  --text:#f5f5f5;
  --muted:#a7a7a7;
  --line:#2b2b2b;
  --primary:#2f6fed;
  --primary-dark:#1f5ed7;
  --sidebar:#080808;
  --sidebar-text:#d4d4d4;
  --shadow:0 10px 30px rgba(0,0,0,.30);
}
html[data-driveos-theme="dark"] body,
html[data-driveos-theme="dark"] .main,
html[data-driveos-theme="dark"] .page{background:var(--bg);color:var(--text)}
html[data-driveos-theme="dark"] .topbar{background:rgba(12,12,12,.96);border-color:var(--line)}
html[data-driveos-theme="dark"] .card,
html[data-driveos-theme="dark"] .kpi,
html[data-driveos-theme="dark"] .entity-card{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow)}
html[data-driveos-theme="dark"] input,
html[data-driveos-theme="dark"] select,
html[data-driveos-theme="dark"] textarea{background:#111;color:var(--text);border-color:#353535}
html[data-driveos-theme="dark"] input:focus,
html[data-driveos-theme="dark"] select:focus,
html[data-driveos-theme="dark"] textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,111,237,.13)}
html[data-driveos-theme="dark"] .btn.primary{background:var(--primary);border-color:var(--primary);color:#111}
html[data-driveos-theme="dark"] .btn.secondary,
html[data-driveos-theme="dark"] .tiny-btn{background:#1b1b1b;border-color:#343434;color:#ededed}
html[data-driveos-theme="dark"] .table-wrap{background:var(--surface);border-color:var(--line)}
html[data-driveos-theme="dark"] .data-table th,
html[data-driveos-theme="dark"] .v45-table th,
html[data-driveos-theme="dark"] table.driveos-standard-table th{background:#111!important;color:#aaa!important;border-color:#303030!important}
html[data-driveos-theme="dark"] .data-table td,
html[data-driveos-theme="dark"] .v45-table td,
html[data-driveos-theme="dark"] table.driveos-standard-table td{background:var(--surface)!important;color:#e8e8e8!important;border-color:#292929!important}
html[data-driveos-theme="dark"] .modal,
html[data-driveos-theme="dark"] #modal.modal,
html[data-driveos-theme="dark"] .modal-header,
html[data-driveos-theme="dark"] .modal-body,
html[data-driveos-theme="dark"] .modal-actions{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-driveos-theme="dark"] .date-chip{background:rgba(47,111,237,.10);border-color:rgba(47,111,237,.3);color:#8fb4ff}
html[data-driveos-theme="dark"] .muted,
html[data-driveos-theme="dark"] .page-header p,
html[data-driveos-theme="dark"] .card-header p,
html[data-driveos-theme="dark"] .kpi .label,
html[data-driveos-theme="dark"] .kpi .hint{color:var(--muted)!important}
html[data-driveos-theme="dark"] .page-header h1,
html[data-driveos-theme="dark"] .card-header h2,
html[data-driveos-theme="dark"] .kpi .value{color:var(--text)}
html[data-driveos-theme="dark"] .mini-stat,
html[data-driveos-theme="dark"] .current-cycle,
html[data-driveos-theme="dark"] .driveos-current-trip-card{background:var(--surface-2)!important;border-color:#333!important;color:var(--text)!important}

.driveos-theme-control{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.driveos-theme-control button{border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:7px 10px}
.driveos-theme-control button[aria-pressed="true"]{background:var(--primary);color:#fff}
html[data-driveos-theme="dark"] .driveos-theme-control button[aria-pressed="true"]{color:#111}
@media(max-width:760px){.driveos-theme-control button{padding:6px 8px;font-size:12px}}

/* v2: keep DriveOS blue identity in both themes */
html[data-driveos-theme="dark"] .btn.primary,
html[data-driveos-theme="dark"] .driveos-theme-control button[aria-pressed="true"]{
  background:#2f6fed!important;
  border-color:#2f6fed!important;
  color:#fff!important;
}

/* Mobile table record count must stay inside the rounded table container */
.table-wrap{overflow:hidden}
.table-wrap > .muted:first-child,
.table-wrap > [class*="record"]:first-child,
.table-wrap > [class*="count"]:first-child{
  box-sizing:border-box;
  margin:0!important;
  padding:12px 20px!important;
  width:100%;
  min-height:44px;
}
@media(max-width:760px){
  .table-wrap > .muted:first-child,
  .table-wrap > [class*="record"]:first-child,
  .table-wrap > [class*="count"]:first-child{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* v3: standardize all table headers with a lighter visual weight */
.data-table th,
.v45-table th,
table.driveos-standard-table th,
.table-wrap table th,
html[data-driveos-theme="dark"] .data-table th,
html[data-driveos-theme="dark"] .v45-table th,
html[data-driveos-theme="dark"] table.driveos-standard-table th,
html[data-driveos-theme="dark"] .table-wrap table th{
  font-weight:600!important;
  font-size:12px!important;
  letter-spacing:.02em!important;
  line-height:1.2!important;
  padding-top:14px!important;
  padding-bottom:14px!important;
}

/* v4: hide table record-count labels; keep column header only */
.table-wrap > .muted:first-child,
.table-wrap > [class*="record"]:first-child,
.table-wrap > [class*="count"]:first-child{
  display:none!important;
}

/* v5: compact table header area on mobile */
@media(max-width:760px){
  .table-wrap{
    border-radius:14px!important;
  }
  .table-wrap table{
    margin-top:0!important;
  }
  .data-table th,
  .v45-table th,
  table.driveos-standard-table th,
  .table-wrap table th,
  html[data-driveos-theme="dark"] .data-table th,
  html[data-driveos-theme="dark"] .v45-table th,
  html[data-driveos-theme="dark"] table.driveos-standard-table th,
  html[data-driveos-theme="dark"] .table-wrap table th{
    height:auto!important;
    min-height:0!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
    font-size:11px!important;
    line-height:1.1!important;
  }
  .table-wrap thead tr{height:auto!important;min-height:0!important}
}

/* v6: hide table density selector (Confortável / Compacta) */
.table-wrap [role="group"]:has(button),
.table-wrap .density-toggle,
.table-wrap [class*="density"],
.table-wrap [class*="compact-toggle"]{
  display:none!important;
}

/* v7: remove empty rounded strip above table header after controls/count are hidden */
.table-wrap{
  padding-top:0!important;
}
.table-wrap > table:first-of-type,
.table-wrap > .table-scroll:first-of-type,
.table-wrap > .table-responsive:first-of-type{
  margin-top:0!important;
}
.table-wrap > :is(.muted,[class*="record"],[class*="count"],[role="group"],.density-toggle,[class*="density"],[class*="compact-toggle"]):first-child + table,
.table-wrap > :is(.muted,[class*="record"],[class*="count"],[role="group"],.density-toggle,[class*="density"],[class*="compact-toggle"]):first-child + .table-scroll,
.table-wrap > :is(.muted,[class*="record"],[class*="count"],[role="group"],.density-toggle,[class*="density"],[class*="compact-toggle"]):first-child + .table-responsive{
  margin-top:0!important;
}
@media(max-width:760px){
  .table-wrap{padding-top:0!important}
  .table-wrap thead{border-top-left-radius:14px;border-top-right-radius:14px}
  .table-wrap thead th:first-child{border-top-left-radius:14px}
  .table-wrap thead th:last-child{border-top-right-radius:14px}
}

/* v8: trip table card has no separate empty top area */
#page-trips > article.card{
  padding:0!important;
  overflow:hidden!important;
}
#page-trips #tripsTable{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
}
#page-trips #tripsTable table{
  margin:0!important;
}
#page-trips #tripsTable thead th:first-child{border-top-left-radius:14px}
#page-trips #tripsTable thead th:last-child{border-top-right-radius:14px}

/* v9 exact fix: the visible white strip belongs to the trips article card */
#page-trips .trips-table-card{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}
#page-trips .trips-table-card > #tripsTable{
  padding:0!important;
  margin:0!important;
  overflow:auto!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:var(--surface)!important;
}
#page-trips .trips-table-card > #tripsTable > .data-table{
  margin:0!important;
  border:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
#page-trips .trips-table-card > #tripsTable > .data-table thead,
#page-trips .trips-table-card > #tripsTable > .data-table thead tr{
  margin:0!important;
}

/* v10: dark-theme form readability across the entire system */
html[data-driveos-theme="dark"] input,
html[data-driveos-theme="dark"] select,
html[data-driveos-theme="dark"] textarea{
  background:#1a1a1a!important;
  color:#f3f3f3!important;
  border-color:#414141!important;
  -webkit-text-fill-color:#f3f3f3!important;
  opacity:1!important;
}
html[data-driveos-theme="dark"] input::placeholder,
html[data-driveos-theme="dark"] textarea::placeholder{
  color:#9f9f9f!important;
  -webkit-text-fill-color:#9f9f9f!important;
  opacity:1!important;
}
html[data-driveos-theme="dark"] select option{
  background:#1a1a1a!important;
  color:#f3f3f3!important;
}
html[data-driveos-theme="dark"] input:disabled,
html[data-driveos-theme="dark"] select:disabled,
html[data-driveos-theme="dark"] textarea:disabled,
html[data-driveos-theme="dark"] input[readonly]{
  background:#242424!important;
  color:#bdbdbd!important;
  -webkit-text-fill-color:#bdbdbd!important;
  border-color:#3b3b3b!important;
  opacity:1!important;
}
html[data-driveos-theme="dark"] label,
html[data-driveos-theme="dark"] .field label,
html[data-driveos-theme="dark"] .modal label{
  color:#b9c0ca!important;
}
html[data-driveos-theme="dark"] .modal h1,
html[data-driveos-theme="dark"] .modal h2,
html[data-driveos-theme="dark"] .modal h3,
html[data-driveos-theme="dark"] #modalTitle{
  color:#f5f5f5!important;
}
html[data-driveos-theme="dark"] #modalSubtitle,
html[data-driveos-theme="dark"] .modal small,
html[data-driveos-theme="dark"] .modal .muted{
  color:#a7a7a7!important;
}
html[data-driveos-theme="dark"] .vehicle-linked-card,
html[data-driveos-theme="dark"] [class*="vehicle-linked"],
html[data-driveos-theme="dark"] [class*="vehicle-card"]{
  background:#202020!important;
  color:#ededed!important;
  border-color:#3d3d3d!important;
}


/* v11: remove light-theme shells/strips leaking through around tables in dark mode */
html[data-driveos-theme="dark"] .table-wrap,
html[data-driveos-theme="dark"] .table-scroll,
html[data-driveos-theme="dark"] .table-responsive,
html[data-driveos-theme="dark"] .trips-table-card,
html[data-driveos-theme="dark"] #commissionsTable,
html[data-driveos-theme="dark"] #driverLedgerTable,
html[data-driveos-theme="dark"] #tripsTable{
  background:var(--surface)!important;
  border-color:var(--line)!important;
}
html[data-driveos-theme="dark"] #page-commissions article.card:has(#commissionsTable),
html[data-driveos-theme="dark"] #page-driver-account article.card:has(#driverLedgerTable){
  background:var(--surface)!important;
  border-color:var(--line)!important;
}
html[data-driveos-theme="dark"] .data-table,
html[data-driveos-theme="dark"] .data-table thead,
html[data-driveos-theme="dark"] .data-table tbody,
html[data-driveos-theme="dark"] .data-table tr{
  background:var(--surface)!important;
}
html[data-driveos-theme="dark"] .data-table th{
  background:#111!important;
}


/* v12: preserve semantic/link text contrast inside dark tables.
   Generic dark td color was overriding driver trip/load labels. */
html[data-driveos-theme="dark"] .data-table td a,
html[data-driveos-theme="dark"] .data-table td button:not(.btn),
html[data-driveos-theme="dark"] .data-table td [role="button"],
html[data-driveos-theme="dark"] #page-trips #tripsTable tbody td:first-child,
html[data-driveos-theme="dark"] #page-commissions #commissionsTable tbody td:first-child,
html[data-driveos-theme="dark"] #page-driver-account #driverLedgerTable tbody td:nth-child(2){
  color:#e8e8e8!important;
  -webkit-text-fill-color:#e8e8e8!important;
}
html[data-driveos-theme="dark"] .data-table td a,
html[data-driveos-theme="dark"] .data-table td button:not(.btn),
html[data-driveos-theme="dark"] .data-table td [role="button"]{
  opacity:1!important;
}