/* STAT-TIS Fuel Sensor Network frontend stylesheet.
 *
 * Plain CSS, no preprocessor, no framework. CSS custom properties for
 * theming; auto light/dark via prefers-color-scheme. The custom-property
 * names are stable so future pages can rely on them.
 */

:root {
  /* STAT-TIS dark green theme — matches stat_tis_app palette.
     Primary accent #00CC66 (bright green). Dark surfaces, no white input areas.
     Designed to feel like the mobile app: #000/#111 bgs, green CTAs, outline icons. */
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;

  --fg: #f5f5f5;
  --fg-muted: #888888;
  --bg: #0a0a0a;
  --bg-elevated: #111111;
  --bg-elevated-2: #1a1a1a;
  --border: #333333;
  --border-strong: #444444;
  --accent: #00cc66;
  --accent-fg: #000000;
  --accent-hover: #00aa55;
  --accent-subtle: #0a2a1a;
  --error: #ff6666;
  --error-bg: #2a1515;
  --error-border: #663333;
  --code-bg: #1f1f1f;

  --radius: 8px;
  --radius-lg: 12px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Optional light variant (green-tinted, still avoids stark white fields) */
@media (prefers-color-scheme: light) {
  :root {
    --fg: #111111;
    --fg-muted: #555555;
    --bg: #f4f7f5;
    --bg-elevated: #f8faf9;
    --bg-elevated-2: #eef3f0;
    --border: #d0d8d4;
    --border-strong: #b8c5be;
    --accent: #00aa55;
    --accent-fg: #ffffff;
    --accent-hover: #008f44;
    --accent-subtle: #e6f5ec;
    --error: #c0392b;
    --error-bg: #fcebea;
    --error-border: #f5b7b1;
    --code-bg: #eef2ef;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

h1, h2, h3 {
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}

.muted { color: var(--fg-muted); font-size: 0.9rem; }
.error { color: var(--error); }

code {
  background: var(--code-bg);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}
pre {
  background: var(--code-bg);
  padding: var(--space-3);
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.85rem;
}

/* ----- buttons ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-elevated);
  text-decoration: none;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
}

/* "Continue with Google" — flat white button per Google brand
 * guidelines, slightly tweaked to look at home in dark mode. */
.btn-google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}
.btn-google:hover:not(:disabled) {
  background: #f8f9fa;
  text-decoration: none;
}
.btn-google .google-g {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}
@media (prefers-color-scheme: dark) {
  .btn-google {
    background: #f1f3f4;
    color: #1f1f1f;
    border-color: #5f6368;
  }
  .btn-google:hover:not(:disabled) {
    background: #ffffff;
  }
}

/* ----- form fields ----- */

.field {
  display: block;
  margin-bottom: var(--space-3);
}
.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--fg-muted);
}
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ----- alerts ----- */

.alert {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-top: var(--space-3);
}
.alert-error {
  color: var(--error);
  background: var(--error-bg);
  border-color: var(--error-border);
}

/* ----- auth pages (/login, /oauth/error) ----- */

.auth-body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.auth-header {
  margin-bottom: var(--space-6);
  text-align: center;
}
.auth-header h1 {
  font-size: 1.4rem;
}

.auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 0.825rem;
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-muted);
  font-size: 0.825rem;
  margin: var(--space-4) 0;
  text-transform: lowercase;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ----- topbar (signed-in pages) ----- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 90;
}
.topbar > strong { font-size: 1rem; }
.topbar-spacer { flex: 1; }
.topbar-gallons {
  font-size: 1.1rem;
  font-weight: 600;
  margin-left: 0.5rem;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.topbar #me {
  font-variant-numeric: tabular-nums;
}

/* ----- main page layout ----- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  padding-top: 3.75rem;
  display: grid;
  gap: var(--space-6);
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.card h2 {
  font-size: 1.05rem;
  margin-bottom: var(--space-4);
}

.beta {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  background: #b91c1c;
  color: #fff;
  padding: 1px 6px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 6px;
}

.toolbar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.toolbar input { flex: 1; }

.row-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.row-form input { flex: 1 1 220px; }

/* ----- tables ----- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th, td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  color: var(--fg-muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
}
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ----- device bulk toolbar (unit assignment admin-only; field batch edits for members + admins) ----- */

.admin-only {
  display: none;
}
body.is-admin .admin-only,
body.is-unit-admin .admin-only {
  display: table-cell; /* for th/td */
}
/* Bulk toolbar is now available to regular members too for field batch edits (gallons/bumper/etc.).
   Unit assign/unassign buttons inside it remain admin-gated via JS + title hints. */
#device-bulk-toolbar {
  display: flex;
}

/* compact controls inside devices table */
#devices select.dev-unit-sel,
#device-bulk-toolbar select {
  font-family: inherit;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--fg);
}
#devices td.admin-only,
#devices th.admin-only {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
#dev-selected-count { white-space: nowrap; }

/* ----- account dropdown (top right) ----- */
.account-wrap { position: relative; }
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 100;
  padding: 4px 0;
  font-size: 0.9rem;
}
.dropdown-header {
  padding: 6px 12px;
  font-size: 0.8rem;
  color: var(--fg-muted);
  word-break: break-word;
}
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
}
.dropdown-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dropdown-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ----- modal for password (and future) ----- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 0;
  background: transparent;
  padding: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg-muted);
  border-radius: 4px;
}
.modal-close:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.modal-close svg { width: 18px; height: 18px; }

/* ----- reusable dialog modal (dropdown-style compact content) ----- */
.dialog-content {
  max-width: 380px;
  padding: 12px 14px 10px;
}
.dialog-title {
  color: var(--fg);
  margin: 0 0 4px;
}
.dialog-actions .btn {
  min-width: 72px;
}

/* ----- So What panel + calculator specifics ----- */
#so-what-panel .so-what-summary { font-size: 0.95rem; }
#sw-selected-details table { font-size: 11px; }
#sw-calc-details { white-space: pre-line; line-height: 1.35; }
#sw-override-tools { padding-top: 4px; border-top: 1px dashed var(--border); }

/* Clean 3Q calculator cards (beta) - intuitive at-a-glance for runout / support / resupply */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 4px 0 2px;
}
.calc-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  font-size: 11px;
  line-height: 1.25;
}
.calc-card .q { font-weight: 600; font-size: 10px; margin-bottom: 2px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.calc-card .big {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.05;
  margin: 2px 0 1px;
  font-variant-numeric: tabular-nums;
}
.calc-card .big span { font-size: 0.55em; font-weight: 500; color: var(--muted); }
.calc-card .sub { font-size: 10px; color: var(--muted); }
.calc-card .note { font-size: 9px; color: #666; margin-top: 1px; }
.calc-card .mini { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) {
  .calc-card { background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .calc-card .note { color: #888; }
}
@media (max-width: 420px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-card .big { font-size: 1.45rem; }
}

/* ----- Device field overrides (fuel/bumper/sensor_id manual edits) ----- */
.modified-value {
  color: #b45309;           /* warm amber for light */
  font-weight: 600;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 3px;
  padding: 1px 3px;
}
@media (prefers-color-scheme: dark) {
  .modified-value {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
  }
}
.edit-icon, .revert-icon, .mod-info {
  font-size: 0.85em;
  user-select: none;
}
.edit-icon:hover { opacity: 1; color: var(--accent); }
.revert-icon:hover { color: var(--error); }
.mod-info:hover { color: #d97706; }

/* Copy buttons next to table cells (devices, users, requests) */
.copy-btn {
  font-size: 11px;
  line-height: 1;
  padding: 1px 4px;
  margin-left: 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.6;
  vertical-align: middle;
}
.copy-btn:hover { opacity: 1; background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.copy-btn:active { transform: scale(0.95); }

/* Masked IMEI display (admins/STAT-TIS only see ... + last 3 by default for privacy) */
.imei-masked {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}

/* Table filter + pagination controls */
.table-filter {
  width: 260px;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  margin: 0;
}
.table-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.table-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0;
  font-size: 12px;
}

/* New sensors views bar: New View + toggle chips + right-aligned filter + refresh */
.sensors-views-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.sensors-views-bar .views-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.view-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  cursor: pointer;
  user-select: none;
}
.view-chip.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.view-chip .delete-x {
  font-size: 13px;
  opacity: 0.7;
  padding: 0 2px;
}
.view-chip .delete-x:hover {
  opacity: 1;
  color: var(--error);
}
.sensors-views-bar .new-view-btn {
  font-size: 12px;
}

/* Hide non-checked / Reveal hidden button — prominent but not overpowering; delightful state change */
.sensors-views-bar .hide-nonchecked-btn {
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg);
  white-space: nowrap;
}
.sensors-views-bar .hide-nonchecked-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  border-color: var(--accent);
}
.sensors-views-bar .hide-nonchecked-btn.is-reveal {
  background: #fff3e0;
  border-color: #f4a261;
  color: #c45c00;
  font-weight: 500;
}
.sensors-views-bar .hide-nonchecked-btn.is-reveal:hover {
  background: #ffe0b2;
  border-color: #e07b2f;
}

/* Hidden rows (defensive; we .hide() them but class allows future styling if needed) */
#devices tbody tr.device-hidden {
  display: none !important;
}
.sensors-views-bar .filter-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sensors-views-bar .refresh-icon {
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.sensors-views-bar .refresh-icon:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.pagination button {
  padding: 1px 6px;
  font-size: 11px;
}
.page-size {
  font-size: 11px;
}

/* Bottom-right page size controls (moved from top per requirements) */
.table-page-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 2px 4px;
  font-size: 11px;
}
.sortable {
  cursor: pointer;
  user-select: none;
}
.sortable:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.sort-asc::after { content: " ▲"; font-size: 9px; color: var(--accent); }
.sort-desc::after { content: " ▼"; font-size: 9px; color: var(--accent); }

/* Field audit history modal + unit pencil affordances */
.field-history-row {
  padding: 2px 4px;
  border-bottom: 1px dotted var(--border);
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
}
.field-history-row:last-child { border-bottom: none; }
.field-history-original { opacity: 0.7; font-style: italic; }
.unit-pencil {
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.9em;
}
.unit-pencil:hover { opacity: 1; color: var(--accent); }
.bulk-btn { font-size: 11px; padding: 2px 6px; }
#field-audit-history, #unit-assign-imeis { line-height: 1.25; }

/* Outline icon buttons (for feedback, pencils, closes, etc). No emoji. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { display: block; }
.edit-icon, .unit-pencil { color: var(--accent); opacity: 0.75; }
.edit-icon:hover, .unit-pencil:hover { opacity: 1; }
.expand-arrow { color: var(--fg-muted); transition: color .1s ease; }
.expand-arrow:hover { color: var(--accent); }
.delete-x { color: var(--fg-muted); }
.delete-x:hover { color: var(--error); }

/* Feedback status badges (dark theme, green accents) */
.badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; }
.badge-green { background: var(--accent-subtle); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.badge-amber { background: #2a2515; color: #f0c36b; border: 1px solid #665522; }
.badge-red { background: #2a1515; color: var(--error); border: 1px solid #662222; }
.badge-blue { background: #15252a; color: #7ec8e6; border: 1px solid #224455; }

/* ============================================
   MOBILE RESPONSIVENESS (max 600px)
   - Tighten everything for ~360-414px screens
   - Preserve desktop at >600px
   - Tables use min-width + horizontal scroll (the main request):
     wide content now scrolls instead of being crushed or hidden.
   - Sticky first columns (checkbox + expand) for usable swiping.
   - Forms/toolbars no longer force overflow
   - Topbar wraps gracefully
   ============================================ */
@media (max-width: 600px) {
  /* overall tighter layout */
  .page {
    padding: 0.5rem;
    padding-top: 3.1rem; /* sticky topbar */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 0.75rem;
    overflow-x: hidden;   /* Extra safety so nothing inside can cause horizontal body scroll */
  }
  .card {
    width: 100%;
    max-width: 100%;
    padding: 0.55rem;
    border-radius: 6px;
    overflow-x: hidden;   /* Prevent any child (wide table, toolbar, form) from forcing the card wider than the screen */
    box-sizing: border-box;
  }
  .card h2 {
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
  }
  .beta {
    font-size: 0.55rem;
    padding: 0 4px;
    margin-left: 4px;
  }

  /* topbar: wrap + compact to avoid horiz overflow */
  .topbar {
    padding: 0.35rem 0.5rem;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    align-items: center;
  }
  .topbar > strong {
    font-size: 0.78rem;
    line-height: 1.1;
    flex: 1 1 100%;
    order: -1;
    margin-bottom: 2px;
  }
  .topbar-gallons {
    font-size: 0.85rem;
    margin-left: 0.25rem;
    order: 1;
  }
  .topbar-spacer { display: none; } /* reclaim space */
  .topbar #feedback-btn {
    padding: 0.2rem 0.3rem;
    order: 2;
  }
  .account-wrap { order: 3; }

  /* tables: ENFORCE HORIZONTAL SCROLL on mobile instead of crushing columns.
     The key is giving the inner <table> a min-width larger than the viewport.
     .table-scroll provides the scroller. This matches the requested behavior:
     "a fixed width where tables or wide content scrolled horizontally if wider than the screen." */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border: 1px solid var(--border);
    border-radius: 4px;
  }

  /* Core mobile table behavior: make tables demand horizontal space and scroll */
  .table-scroll table,
  table {
    width: auto !important;   /* override any 100% from HTML/JS */
    min-width: 780px;         /* ~85-95px per column average for our 8-9 col tables + icons/copy buttons.
                                 On a 360-414px phone this guarantees a visible horizontal scrollbar.
                                 Content columns stay readable instead of being squeezed to nothing. */
    table-layout: auto;
  }

  /* Small/inner tables (asset history expanders, user search results, etc.) */
  .asset-history-row table,
  .inner-table,
  .table-scroll table[style*="font-size:11px"] {
    min-width: 380px !important;   /* still scrollable if needed, but not huge inside an expanded row */
  }

  th, td {
    padding: 0.18rem 0.3rem;
    vertical-align: middle;
    line-height: 1.25;
  }
  th {
    font-size: 0.62rem;
    font-weight: 500;
  }

  /* Sticky first columns while horizontally scrolling — big usability win on phones */
  .table-scroll th:first-child,
  .table-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-elevated) !important;
    box-shadow: 3px 0 4px rgba(0,0,0,0.25);
  }
  /* Sticky the expand arrow (2nd col) for the main devices table */
  #devices .table-scroll th:nth-child(2),
  #devices .table-scroll td:nth-child(2) {
    position: sticky;
    left: 28px;
    z-index: 2;
    background: var(--bg-elevated) !important;
  }
  /* users table: make action buttons stack for space (still useful even with scrolling) */
  #users td:last-child .btn-sm {
    display: block;
    margin: 1px 0;
    font-size: 9.5px;
    padding: 1px 5px;
  }

  /* controls & buttons tighter */
  .btn-sm {
    padding: 0.18rem 0.4rem;
    font-size: 0.7rem;
  }
  .bulk-btn {
    font-size: 9px;
    padding: 1px 3px;
  }
  .muted,
  .table-controls,
  .pagination {
    font-size: 0.72rem;
  }
  .copy-btn {
    font-size: 8.5px;
    padding: 0 2px;
    margin-left: 1px;
  }
  .edit-icon,
  .unit-pencil {
    font-size: 0.65em;
  }

  /* fix ALL the fixed-width inputs/selects that break narrow viewports */
  .row-form input,
  .row-form select,
  #device-form input,
  #device-form select,
  #device-bulk-toolbar select,
  #device-bulk-toolbar input,
  #unit-pass-unit,
  #unit-pass-label,
  #unit-pass-phrase,
  #new-unit-name,
  #req-unit-select,
  #req-new-unit-name,
  #req-loc-country,
  #req-loc-state,
  #req-loc-base,
  #req-echelon,
  #invite-form input,
  #invite-form select,
  #user-search-q,
  #user-search-unit,
  input.table-filter,
  .sensors-views-bar select,
  .sensors-views-bar input,
  #sw-rate,
  #sw-days,
  #unit-assign-select,
  #field-audit-value,
  #field-audit-notes,
  #sensor-view-name,
  #feedback-message,
  #prof-first,
  #prof-last,
  #prof-rank,
  #prof-sub-unit,
  #prof-position {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 80px;
    font-size: 0.72rem;
    padding: 0.18rem 0.3rem;
  }

  /* bulk toolbar + device admin form */
  #device-bulk-toolbar {
    gap: 3px;
    margin: 4px 0;
  }
  #dev-selected-count {
    font-size: 9.5px;
    min-width: 52px;
  }
  #device-admin form {
    gap: 4px;
  }

  /* Prevent the bulk toolbar from forcing cards wider than the screen */
  #device-bulk-toolbar,
  #device-bulk-toolbar .bulk-field-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }
  #device-bulk-toolbar button {
    white-space: normal;   /* allow button text to wrap if really needed */
    max-width: 100%;
  }

  /* views bar: filter doesn't push right on wrap */
  .sensors-views-bar .filter-wrap {
    margin-left: 0;
  }
  .sensors-views-bar .hide-nonchecked-btn {
    font-size: 11px;
    padding: 1px 6px;
  }
    margin-left: 0;
    width: 100%;
    margin-top: 3px;
    max-width: 100%;
  }
  .sensors-views-bar .filter-wrap input {
    flex: 1 1 140px;
    max-width: 100%;
  }
  .view-chip {
    font-size: 10.5px;
    padding: 2px 6px;
  }
  .sensors-views-bar {
    max-width: 100%;
    overflow: hidden;
  }

  /* modals tighter on phones */
  .modal {
    padding: 6px;
  }
  .modal-content {
    padding: 8px 10px;
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
  }
  .dialog-content {
    max-width: 100%;
    padding: 8px 10px;
  }
  .modal-close {
    width: 24px;
    height: 24px;
  }

  /* calculator (beta) / so-what ids / history */
  #so-what-panel .so-what-summary {
    font-size: 0.82rem;
  }
  #sw-selected-details table {
    font-size: 10px;
  }
  #sw-calc-details {
    font-size: 11px;
  }
  #unit-pass-list,
  #unit-info-list,
  #my-pending-requests,
  #feedback-history {
    font-size: 10px;
  }

  /* approvals table */
  #admin-approvals-table {
    font-size: 10px;
  }
  #admin-approvals-table th,
  #admin-approvals-table td {
    padding: 2px 3px;
  }

  /* ensure body never forces horiz scroll from fixed children */
  body {
    overflow-x: hidden;
  }

  /* sub-tables generated in JS (history etc) */
  table[style*="font-size:11px"] {
    font-size: 10px !important;
  }
}