@import url("fontface.css");

:root {
  --bg: #0A0D12;
  --bg-header: #0D1119;
  --bg-panel: #12171F;
  --bg-field: #171D26;
  --border: #1E2530;
  --border-strong: #2E3846;
  --text: #E8EDF3;
  --text-dim: #93A1B4;
  --text-faint: #5F6C7D;
  --text-faintest: #3E4A5C;
  --accent: #34E2A0;
  --blue: #4FA3F7;
  --amber: #F2B84B;
  --red: #F2635B;
  --purple: #8B7CF6;
  --grey: #8792A2;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--text);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }

button, input, select { font-family: inherit; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

#app {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.app-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-family: var(--mono); font-size: 13px;
}

.app-shell { display: flex; flex-direction: column; height: 100%; }

.topbar {
  flex-shrink: 0; height: 60px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-header);
}

.topbar-brand {
  width: 176px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
}

.brand-logo {
  width: 88px; height: 32px; padding: 3px 5px; box-sizing: content-box;
  display: block; flex-shrink: 0; object-fit: contain;
  background: #fff; border-radius: 6px;
}

.brand-title { font-size: 14px; font-weight: 600; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-input {
  flex: 1; max-width: 360px;
  background: var(--bg-field); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 12px; color: var(--text); font-size: 13px;
}
.search-input::placeholder { color: var(--text-faint); }

.spacer { flex: 1; }

.btn-primary {
  background: var(--accent); color: var(--bg); border: none; border-radius: 8px;
  padding: 9px 16px; font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.btn-primary:hover { filter: brightness(1.05); }

.avatar-badge {
  width: 30px; height: 30px; border-radius: 15px; background: #232B38;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-dim); flex-shrink: 0;
}

.body-row { flex: 1; display: flex; min-height: 0; position: relative; }

.sidebar {
  width: 196px; flex-shrink: 0; background: var(--bg-header);
  border-right: 1px solid var(--border); position: relative;
  padding: 16px 10px; display: flex; flex-direction: column; gap: 2px;
  transition: width 0.15s ease;
}
.sidebar.collapsed { width: 56px; padding-left: 6px; padding-right: 6px; }

.nav-items { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim); background: transparent;
}
.nav-item:hover { background: #141A24; }
.nav-item.active { background: #1A212C; color: var(--accent); }

.nav-dot { width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex-shrink: 0; }

.nav-letter {
  display: none; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: #232B38; color: var(--text-dim); font-size: 11px; font-weight: 600;
  align-items: center; justify-content: center;
}
.nav-item.active .nav-letter { color: var(--accent); }

.sidebar.collapsed .nav-item { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .nav-dot { display: none; }
.sidebar.collapsed .nav-letter { display: flex; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-footer { display: none; }

.nav-footer { padding: 10px 12px; font-size: 11px; color: var(--text-faintest); }

.sidebar-toggle {
  position: absolute; top: 14px; right: -12px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-panel); border: 1px solid var(--border-strong); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 12px; line-height: 1; z-index: 6;
}
.sidebar-toggle:hover { color: var(--text); border-color: var(--text-faint); }

.content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.screen-scroll { flex: 1; overflow-y: auto; padding: 22px 24px; }

.page-title { font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.cyber-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: -4px 0 16px; }
.cyber-heading { color: var(--text); font-size: 14px; font-weight: 600; }
.cyber-description { max-width: 680px; margin: 5px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.cyber-source-link { flex: 0 0 auto; text-decoration: none; }
.cyber-map-panel { overflow: hidden; padding: 0; background: #05070a; }
.cyber-map-frame { display: block; width: 100%; height: min(72vh, 760px); min-height: 500px; border: 0; background: #05070a; }
.cyber-attribution { padding: 10px 2px 0; color: var(--text-faint); font-size: 11px; }
.cyber-attribution a { color: var(--text-dim); }
.cyber-threatdown-panel { margin-bottom: 18px; }
.cyber-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cyber-panel-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cyber-signin-link { text-decoration: none; }
.cyber-panel-caption,.cyber-updated { color: var(--text-faint); font-size: 11px; }
.cyber-connection-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.cyber-connection-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 10px; white-space: nowrap; }
.cyber-connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.cyber-connection-connected { color: #34E2A0; }
.cyber-connection-connected .cyber-connection-dot { background: #34E2A0; }
.cyber-connection-checking { color: #9ecbff; }
.cyber-connection-checking .cyber-connection-dot { background: #9ecbff; }
.cyber-connection-error { color: #F2635B; }
.cyber-connection-error .cyber-connection-dot { background: #F2635B; }
.cyber-connection-detail { color: var(--text-faint); font-size: 10px; }
.cyber-kpi-row { margin: 0 0 16px; }
.cyber-kpi-row .kpi-card { padding: 12px 15px; }
.cyber-kpi-row .kpi-value { font-size: 22px; }
.cyber-subheading { margin: 3px 0 9px; font-size: 12px; font-weight: 600; }
.cyber-event-count { margin-left: 8px; color: var(--text-faint); font-size: 10px; font-weight: 400; }
.cyber-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 9px; }
.cyber-filter { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: 6px; font-size: 10px; cursor: pointer; }
.cyber-filter:hover,.cyber-filter.active { color: var(--text); border-color: var(--border-strong); background: var(--bg-field); }
.cyber-filter span { color: var(--text-faint); font-family: var(--mono); }
.cyber-severity-badge { display: inline-block; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.cyber-severity-critical { color: #ffaaa5; background: rgba(242, 99, 91, 0.12); border-color: rgba(242, 99, 91, 0.3); }
.cyber-severity-warning { color: #f2c879; background: rgba(232, 173, 69, 0.1); border-color: rgba(232, 173, 69, 0.28); }
.cyber-severity-info { color: #9ecbff; background: rgba(94, 161, 230, 0.1); border-color: rgba(94, 161, 230, 0.28); }
.cyber-severity-unknown { color: var(--text-faint); background: rgba(135, 146, 162, 0.08); border-color: var(--border); }
.cyber-empty { padding: 14px 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.cyber-error { color: var(--danger, #F2635B); }
.cyber-events-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 7px; scrollbar-color: var(--border-strong) transparent; }
.cyber-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.cyber-table th { position: sticky; top: 0; padding: 8px 10px; color: var(--text-faint); background: var(--bg-panel); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; }
.cyber-table td { max-width: 320px; padding: 9px 10px; color: var(--text-dim); border-top: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cyber-endpoint-link { display: block; max-width: 100%; padding: 0; color: #9ecbff; background: transparent; border: 0; font: inherit; text-align: left; white-space: normal; cursor: pointer; }
.cyber-endpoint-link:hover { color: #34E2A0; }
.cyber-endpoint-link span,.cyber-endpoint-unmatched span { display: block; margin-top: 3px; color: var(--text-faint); font-size: 9px; }
.cyber-endpoint-unmatched { color: var(--text-dim); white-space: normal; }
.cyber-updated { margin-top: 10px; text-align: right; }
.network-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.network-search-controls { display: flex; align-items: end; gap: 12px; margin: 0 0 16px; }
.network-search-field,.network-status-filter { display: flex; flex-direction: column; gap: 5px; color: var(--text-dim); font-size: 10px; }
.network-search-field { flex: 1; max-width: 520px; }
.network-status-filter .form-select { min-width: 150px; }
.network-site-filter { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 11px; }
.network-site-filter .form-select { min-width: 180px; }
.network-site-panel { margin-bottom: 16px; }
.network-data-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.network-asset-link { display: block; max-width: 100%; padding: 0; color: #9ecbff; background: transparent; border: 0; font: inherit; text-align: left; white-space: normal; cursor: pointer; }
.network-asset-link:hover { color: #34E2A0; }
.network-asset-link span { display: block; margin-top: 3px; color: var(--text-faint); font-size: 9px; }
.network-match-label { color: var(--text-faint); }
.network-status-badge { display: inline-block; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.network-status-online,.network-health-online { color: #34E2A0; }
.network-status-online { background: rgba(52, 226, 160, 0.1); border-color: rgba(52, 226, 160, 0.28); }
.network-status-offline,.network-health-offline { color: #ffaaa5; }
.network-status-offline { background: rgba(242, 99, 91, 0.12); border-color: rgba(242, 99, 91, 0.3); }
.network-status-unknown { color: var(--text-faint); background: rgba(135, 146, 162, 0.08); border-color: var(--border); }
.page-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }


.kpi-row { display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }

.kpi-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; flex: 1; min-width: 150px;
}
.kpi-label { font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: 8px; }
.kpi-value { font-family: var(--mono); font-size: 26px; font-weight: 600; }


.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.panel-title { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.scroll-panel-body { max-height: 220px; overflow-y: auto; padding-right: 4px; }
.overview-cost-panel { margin-bottom: 16px; }
.overview-main-grid { align-items: stretch; }
.overview-right-stack { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 0; }
.overview-status-panel,
.overview-attention-panel { min-height: 0; overflow: hidden; }
.overview-status-panel { display: flex; flex-direction: column; }
.overview-attention-panel { display: flex; flex-direction: column; }
.overview-attention-list { min-height: 0; overflow-y: auto; }
.cost-entry-panel,
.cost-filter-panel,
.cost-table-panel { margin-bottom: 16px; }
.cost-entry-inline-fields { display: flex; flex: 2; gap: 12px; min-width: 0; }
.cost-entry-inline-fields .form-group { flex: 1; min-width: 0; }
.cost-entry-top .form-label { min-height: 2.4em; line-height: 1.2; }
.cost-entry-bottom { align-items: flex-end; }
.cost-entry-bottom .form-group { flex: 1; }
.cost-submit { flex: 0 0 180px; }
.cost-po-picker { min-width: 220px; }
.cost-po-name { display: inline-block; max-width: 100%; margin: 8px 0 0 8px; color: var(--text-faint); font-size: 11px; overflow-wrap: anywhere; vertical-align: middle; }
.cost-filters { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 12px; }
.cost-filters .form-group { margin-bottom: 0; }
.cost-search-filter { grid-column: span 2; }
.cost-clear-dates { align-self: end; justify-self: start; }
.cost-breakdown-grid { margin-top: -4px; }
.cost-product-type-panel { margin-bottom: 16px; }
.cost-company-fill { background: #8B7CF6; }
.cost-supplier-fill { background: #F2B84B; }
.cost-product-type-fill { background: #34E2A0; }
.cost-kpis .kpi-value { font-size: 22px; }
.cost-chart { display: flex; align-items: flex-end; gap: 7px; height: 160px; overflow-x: auto; }
.cost-chart-column { display: flex; flex: 1 0 44px; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cost-chart-value { height: 16px; color: var(--text-faint); font-size: 9px; white-space: nowrap; }
.cost-chart-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 108px; border-bottom: 1px solid var(--border); }
.cost-chart-bar { width: min(24px, 70%); min-height: 0; border-radius: 4px 4px 0 0; background: #34E2A0; }
.cost-chart-label { padding-top: 6px; color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.cost-department-fill { background: #4FA3F7; }
.cost-table-scroll { overflow-x: auto; }
.cost-table { width: 100%; min-width: 1050px; border-collapse: collapse; font-size: 12px; }
.cost-table th { padding: 10px 8px; color: var(--text-faint); font-size: 10px; font-weight: 600; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cost-table td { max-width: 230px; padding: 10px 8px; border-top: 1px solid var(--border); color: var(--text-dim); overflow-wrap: anywhere; }
.cost-table td:nth-child(6) { color: var(--text); white-space: nowrap; }
.cost-actions-cell { min-width: 150px; }
.cost-import-table { min-width: 900px; }
.cost-import-table input[type="checkbox"] { accent-color: var(--accent); }
.cost-edit-modal { max-width: 620px; }
.cost-audit-entry { padding: 12px 0; border-top: 1px solid var(--border); }
.cost-audit-meta { margin-bottom: 8px; color: var(--text-faint); font-size: 11px; }
.cost-audit-change { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 0; color: var(--text-dim); font-size: 12px; }
.cost-audit-change strong { min-width: 90px; color: var(--text); }
.cost-audit-change span { overflow-wrap: anywhere; }
.cost-asset-link,
.cost-action-link { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.cost-document-link { display: inline-block; max-width: 160px; color: var(--accent); overflow-wrap: anywhere; vertical-align: middle; }
.cost-action-link { margin: 3px 5px 3px 0; font-size: 11px; }
.cost-remove-link { color: var(--red); }
.cost-empty { color: var(--text-faint) !important; text-align: center; padding: 22px !important; }
.costs-error { margin-bottom: 16px; padding: 12px; border: 1px solid var(--red); border-radius: 8px; color: var(--red); }
.sim-assign-control { position: relative; flex: 1 1 180px; min-width: 180px; }
.sim-assign-input { width: 100%; min-width: 180px; padding: 5px 8px; font-size: 12px; }
.sim-assign-suggestions:not(:empty) {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  width: max(280px, 100%); max-height: 240px; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.sim-assign-option { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.sim-assign-option:last-child { border-bottom: 0; }
.sim-assign-option:hover,
.sim-assign-option:focus { background: var(--bg-field); outline: none; }
.sim-assign-tag { font-family: var(--mono); font-size: 12px; }
.sim-assign-details,
.sim-assign-empty { color: var(--text-faint); font-size: 11px; }
.sim-assign-empty { padding: 10px 11px; }

.account-info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bg-field); font-size: 13px; }
.account-info-row:last-child { border-bottom: none; }
.account-info-label { color: var(--text-faint); }
.account-info-value { color: var(--text); font-family: var(--mono); }
.account-hint { font-size: 12.5px; color: var(--text-dim); margin-bottom: 12px; }


.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-label {
  width: 110px; font-size: 12px; color: var(--text-dim); flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-label.narrow { width: 88px; font-size: 11.5px; }
.bar-label.wide { width: 98px; font-size: 11.5px; }
.bar-track { flex: 1; height: 8px; background: var(--bg-field); border-radius: 4px; overflow: hidden; }
.bar-track.thin { height: 7px; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-count {
  width: 38px; text-align: right; font-family: var(--mono); font-size: 12px;
  color: var(--text); flex-shrink: 0;
}
.bar-count.narrow { width: 30px; font-size: 11.5px; }

.donut-flex { flex: 1; display: flex; align-items: center; gap: 22px; }
.donut-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-total { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.donut-sub { font-size: 9px; color: var(--text-faint); letter-spacing: 0.05em; }

.legend-list { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend-label { color: var(--text-dim); flex: 1; }
.legend-count { font-family: var(--mono); color: var(--text); }

.attention-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 6px;
  border-bottom: 1px solid var(--bg-field); cursor: pointer; font-size: 12.5px;
}
.attention-row:hover { background: #141A24; }
.attention-dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.attention-title { font-family: var(--mono); color: var(--text); width: 100px; flex-shrink: 0; }
.attention-sub { color: var(--text-dim); }

.assets-layout { flex: 1; display: flex; min-height: 0; }

.filters-panel {
  width: 180px; flex-shrink: 0; padding: 20px 16px;
  border-right: 1px solid var(--border); overflow-y: auto;
}
.filter-heading { font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: 10px; }
.filter-heading.spaced { margin: 18px 0 10px; }

.status-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 2px;
  background: transparent;
}
.chip-left { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.chip-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.chip-count { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.status-chip.active .chip-left { color: var(--text); }

.select-field {
  width: 100%; box-sizing: border-box; background: var(--bg-field);
  border: 1px solid var(--border-strong); border-radius: 7px; padding: 8px 10px;
  color: var(--text); font-size: 12.5px;
}

.table-col { flex: 1; min-width: 0; display: flex; flex-direction: column; --table-header-bg: var(--bg); }

.table-toolbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.table-count { font-size: 13px; color: var(--text-dim); }
.table-count .num { color: var(--text); font-family: var(--mono); }

.btn-ghost {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
  border-radius: 7px; padding: 7px 12px; font-size: 12px; cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-faint); }

.table-scroll { flex: 1; min-height: 0; overflow: auto; }

.table-header {
  position: sticky; top: 0; z-index: 5; background: var(--table-header-bg, var(--bg-panel));
  display: grid;
  grid-template-columns: var(--cols, 32px 118px 96px 1fr 140px 128px 120px 120px 108px 96px);
  gap: 12px; padding: 9px 20px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text-faint); font-weight: 600; letter-spacing: 0.04em;
}
.table-header .sortable { cursor: pointer; }
.table-header .sortable:hover { color: var(--text-dim); }
.table-header > div { position: relative; }

.table-row {
  display: grid; grid-template-columns: var(--cols, 32px 118px 96px 1fr 140px 128px 120px 120px 108px 96px);
  gap: 12px; align-items: center; padding: 11px 20px;
  border-bottom: 1px solid var(--bg-field); cursor: pointer; font-size: 12.5px;
}
.table-row:hover { background: #141A24; }

.col-resize-handle {
  position: absolute; top: 0; right: -6px; bottom: 0; width: 12px; cursor: col-resize; z-index: 4;
}
.col-resize-handle::after {
  content: ''; position: absolute; top: 2px; bottom: 2px; left: 5px; width: 2px;
  border-radius: 1px; background: transparent;
}
.col-resize-handle:hover::after, .col-resize-handle.resizing::after { background: var(--accent); }

.cell-mono { font-family: var(--mono); color: var(--text); }
.cell-dim { color: var(--text-dim); }
.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-deployed { font-family: var(--mono); color: var(--text-faint); font-size: 11.5px; }
.cell-check { display: flex; align-items: center; justify-content: center; }
.cell-check input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }

.ip-link { color: var(--accent); text-decoration: none; }
.ip-link:hover { text-decoration: underline; }

.bulk-toolbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: rgba(52,226,160,0.08); border-bottom: 1px solid var(--border);
}
.bulk-count { font-size: 12.5px; color: var(--text); font-family: var(--mono); }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 20px; font-size: 11px; font-weight: 600;
}

.pagination-bar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border);
}
.page-info { font-size: 12px; color: var(--text-faint); }

.btn-page {
  background: var(--bg-field); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.btn-page:hover { border-color: var(--text-faint); }
.btn-page:disabled { opacity: 0.4; cursor: default; }

.compliance-row { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; display: flex; gap: 32px; }
.compliance-stat-label { font-size: 11px; color: var(--text-faint); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 6px; }
.compliance-stat-value { font-family: var(--mono); font-size: 20px; font-weight: 600; }

.overlay {
  position: absolute; top: 60px; left: 0; right: 0; bottom: 0;
  background: rgba(4, 6, 9, 0.55); z-index: 40; animation: fadeIn 0.15s ease;
}

.drawer {
  position: absolute; top: 60px; right: 0; bottom: 0; width: 440px;
  background: var(--bg-panel); border-left: 1px solid var(--border-strong);
  z-index: 41; overflow-y: auto; animation: slideInRight 0.18s ease;
  padding: 22px; box-sizing: border-box;
}

.drawer-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.drawer-tag { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.drawer-close { cursor: pointer; color: var(--text-faint); font-size: 20px; line-height: 1; }
.drawer-close:hover { color: var(--text); }
.drawer-divider { height: 1px; background: var(--border); margin: 16px 0; }

.drawer-section { margin-bottom: 18px; }
.drawer-section-title {
  font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600;
  margin-bottom: 8px; text-transform: uppercase;
}
.drawer-field-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--bg-field); font-size: 12.5px;
}
.drawer-field-label { color: var(--text-dim); flex-shrink: 0; }
.drawer-field-value {
  font-family: var(--mono); color: var(--text); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.history-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bg-field); font-size: 12px; }
.history-date { font-family: var(--mono); color: var(--text-faint); flex-shrink: 0; width: 76px; }
.history-text { color: var(--text-dim); }
.asset-history-list { max-height: 220px; overflow-y: auto; padding-right: 4px; }
.history-cost-heading { display: flex; justify-content: space-between; gap: 8px; color: var(--text); font-family: var(--mono); }
.history-initials { color: var(--text-faint); font-size: 10px; }
.maintenance-cost-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.maintenance-cost-total { margin-top: 4px; color: var(--text); font-family: var(--mono); font-size: 16px; font-weight: 600; }

.drawer-note { font-size: 12px; color: var(--text-faint); padding: 10px 0; }

.drawer-action-btn {
  width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 8px;
  background: transparent; font-size: 13px; cursor: pointer; box-sizing: border-box;
  border: 1px solid var(--border-strong);
}
.drawer-action-btn:hover { filter: brightness(1.15); }

.modal-overlay {
  position: absolute; top: 60px; left: 0; right: 0; bottom: 0;
  background: rgba(4, 6, 9, 0.6); display: flex; align-items: center; justify-content: center;
  z-index: 50; animation: fadeIn 0.15s ease;
}

.modal-box {
  width: 480px; max-height: 820px; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 22px; box-sizing: border-box; animation: slideUp 0.18s ease;
}

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-close { cursor: pointer; color: var(--text-faint); font-size: 18px; }
.modal-close:hover { color: var(--text); }

.form-group { margin-bottom: 12px; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.form-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.asset-tag-label { display: flex; justify-content: space-between; gap: 8px; }
.asset-tag-hint { color: var(--text-faint); text-align: right; }
.form-input, .form-select, textarea.form-input {
  width: 100%; box-sizing: border-box; background: var(--bg-field);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 12px;
  color: var(--text); font-size: 13px;
}
.form-input.mono { font-family: var(--mono); }
textarea.form-input { font-family: var(--sans); resize: vertical; min-height: 70px; }
.feedback-intro { max-width: 740px; margin: -6px 0 18px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.feedback-form { max-width: 740px; }
.new-starter-send-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.new-starter-send-grid .feedback-form { max-width: none; margin: 0; }
.asset-agreements-section { margin-bottom: 20px; }
.asset-agreement-actions { display: flex; gap: 6px; }
.feedback-form .form-group { margin-bottom: 18px; }
.feedback-hint { margin-top: 6px; color: var(--text-faint); font-size: 11px; line-height: 1.5; }
.feedback-optional { color: var(--text-faint); font-weight: 400; }
.feedback-file-list { margin-top: 10px; }
.feedback-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; overflow-wrap: anywhere; }
.feedback-remove { flex-shrink: 0; padding: 3px 7px; border: 1px solid var(--border-strong); border-radius: 5px; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 11px; }
.feedback-remove:hover { color: var(--text); border-color: var(--text-faint); }
.feedback-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-error { color: var(--red); font-size: 11px; margin-top: 4px; }

.induction-requests-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.induction-status-summary { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.induction-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 9px; color: var(--text-dim); font-size: 12px; }
.induction-summary-card strong { color: var(--text); font: 600 18px var(--mono); }
.induction-filter { width: 180px; }
.induction-table { min-width: 1180px; }
.induction-table .induction-starter-cell { color: var(--text); font-weight: 600; }
.induction-status-badge { display: inline-flex; padding: 4px 9px; border-radius: 20px; background: rgba(242,184,75,0.12); color: var(--amber); font-size: 11px; font-weight: 600; white-space: nowrap; }
.induction-status-badge.progress { background: rgba(91,156,255,0.12); color: #7eafff; }
.induction-status-badge.complete { background: rgba(52,226,160,0.12); color: var(--accent); }
.induction-delivery-cell { line-height: 1.7; white-space: nowrap; }
.induction-notification-list { padding: 12px; margin: 14px 0 18px; background: var(--bg-field); border: 1px solid var(--border); border-radius: 8px; }
.induction-notification-list .panel-title { margin-bottom: 8px; }
.induction-notification-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12px; }
.induction-detail-modal { width: min(780px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 100px)); }
.induction-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.induction-detail-row { min-width: 0; padding: 10px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.induction-detail-row .form-label { margin-bottom: 5px; }

.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn-secondary {
  flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer;
}
.btn-secondary:hover { color: var(--text); }
.btn-submit {
  flex: 1; padding: 10px; border-radius: 8px; border: none;
  background: var(--accent); color: var(--bg); font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-submit:hover { filter: brightness(1.05); }

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--bg-panel); border: 1px solid var(--border-strong); color: var(--text);
  padding: 12px 20px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 999; animation: toastIn 0.2s ease;
}

.auth-shell {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.auth-card {
  width: 360px; background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 32px; animation: fadeIn 0.2s ease;
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
.auth-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.5; }
.auth-remember {
  display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 16px;
  color: var(--text-dim); font-size: 12px; cursor: pointer;
}
.auth-remember input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.auth-remember span { display: flex; flex-direction: column; gap: 3px; }
.auth-remember strong { color: var(--text); font-weight: 500; }
.auth-remember small { color: var(--text-faint); font-size: 11px; }
.auth-error {
  color: var(--red); font-size: 12px; background: rgba(242,99,91,0.1);
  border: 1px solid rgba(242,99,91,0.3); border-radius: 6px; padding: 8px 10px; margin-bottom: 14px;
}
.auth-qr-wrap { display: flex; justify-content: center; padding: 4px 0 14px; }
.auth-qr-wrap img { border-radius: 8px; background: #fff; padding: 8px; }
.auth-manual-key {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); text-align: center;
  word-break: break-all; margin-bottom: 18px;
}
.auth-back {
  text-align: center; font-size: 12px; color: var(--text-faint); margin-top: 14px; cursor: pointer;
}
.auth-back:hover { color: var(--text-dim); }
.auth-link {
  text-align: center; font-size: 12px; color: var(--accent); margin-top: 14px; cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }
.auth-success {
  color: var(--accent); font-size: 12px; background: rgba(52,226,160,0.1);
  border: 1px solid rgba(52,226,160,0.3); border-radius: 6px; padding: 8px 10px; margin-bottom: 14px;
}

.import-preview-table {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; margin: 14px 0;
}
.import-preview-row {
  display: grid; grid-template-columns: 110px 90px 1fr 1.4fr;
  gap: 10px; align-items: center; padding: 8px 12px; font-size: 12px;
  border-bottom: 1px solid var(--bg-field);
}
.import-preview-row:last-child { border-bottom: none; }
.import-row-error { background: rgba(242,99,91,0.08); }
.import-row-review { background: rgba(242,184,75,0.08); }
.import-row-msg { color: var(--text-dim); font-size: 11.5px; }
.import-row-error .import-row-msg { color: var(--red); }
.import-row-review .import-row-msg { color: var(--amber); }

.pending-import-list { display: grid; gap: 12px; }
.pending-import-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.pending-import-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pending-import-title { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.pending-import-details { margin-top: 10px; color: var(--text-dim); font-size: 12px; }
.pending-import-details summary { cursor: pointer; color: var(--blue); }
.pending-import-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 14px 0; }
.pending-import-edit-grid .form-group { min-width: 0; margin: 0; }
.pending-import-wide { grid-column: 1 / -1; }
.pending-import-wide textarea { min-height: 88px; }
.pending-import-checkbox { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--bg-field); color: var(--text-dim); font-size: 12px; }
.pending-import-checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }
.pending-import-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0 0; }
.pending-import-fields > div { min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pending-import-fields dt { margin-bottom: 4px; color: var(--text-faint); font-size: 10px; text-transform: uppercase; }
.pending-import-fields dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.pending-import-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pending-import-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pending-import-pane { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-main); }
.pending-import-pane h3 { margin: 0; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.pending-import-pane .pending-import-edit-grid { margin-bottom: 0; }
.pending-import-readonly, .pending-import-empty { min-height: 38px; padding: 10px 0; color: var(--text-dim); font-size: 12px; overflow-wrap: anywhere; }
.pending-import-phone-warning { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--amber); border-radius: 7px; background: rgba(242,184,75,0.08); color: var(--text-dim); font-size: 12px; }
.pending-import-phone-warning strong { color: var(--amber); }

.users-row {
  display: grid; grid-template-columns: var(--cols, 1fr 130px 120px 100px 260px);
  gap: 12px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--bg-field); font-size: 12.5px;
}
.users-row:last-child { border-bottom: none; }
.users-header {
  position: sticky; top: 0; z-index: 5; background: var(--bg-panel);
  font-size: 11px; color: var(--text-faint); font-weight: 600; letter-spacing: 0.04em;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.users-header > div { position: relative; }
.users-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.users-row-btn { padding: 5px 10px; font-size: 11.5px; }
/* ---- Needs review (set by CSV import when a value wasn't on a curated list) ---- */

/* Sits inline after the asset tag in the table and in the drawer banner. */
.review-chip {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border: 1px solid var(--amber); border-radius: 3px;
  font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--amber); background: rgba(242,184,75,0.10);
  vertical-align: middle; white-space: nowrap;
}

/* Left edge marker rather than a full wash, so the row stays readable and the
   hover state still reads as hover. The inset shadow avoids shifting the grid. */
.row-needs-review { background: rgba(242,184,75,0.045); box-shadow: inset 3px 0 0 var(--amber); }
.row-needs-review:hover { background: rgba(242,184,75,0.09); }

.review-banner {
  margin-bottom: 18px; padding: 12px 14px;
  border: 1px solid rgba(242,184,75,0.35); border-radius: 6px;
  background: rgba(242,184,75,0.07);
}
.review-banner-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 12.5px; color: var(--amber);
}
.review-banner-head .review-chip { margin-left: 0; }
.review-banner-list {
  margin: 0 0 10px; padding-left: 18px;
  font-size: 12px; line-height: 1.65; color: var(--text-dim);
}
.review-banner .btn-secondary { width: 100%; }

/* ---- Deprecated page: which retired equipment is in view ---- */

.view-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.view-tab {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--text-dim);
  font-family: var(--sans); font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.view-tab:hover { border-color: var(--border-strong); color: var(--text); }
.view-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(52,226,160,0.08); }
.view-tab-count {
  font-family: var(--mono); font-size: 11px;
  padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.06);
}

.empty-row { padding: 28px 20px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* ---- Delete asset (admin only, irreversible) ---- */

/* Separated from the status actions above it so it can't be hit by accident
   while reaching for Check In or Retire. */
.drawer-danger { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.drawer-action-btn.danger { border-color: var(--red); color: var(--red); }

.delete-warning {
  margin-bottom: 18px; padding: 11px 13px;
  border: 1px solid rgba(242,99,91,0.35); border-radius: 6px;
  background: rgba(242,99,91,0.07);
  font-size: 12px; line-height: 1.6; color: var(--text-dim);
}

.btn-danger {
  padding: 9px 18px; border: 1px solid var(--red); border-radius: 5px;
  background: var(--red); color: #1A0D0C;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.1); }
.btn-danger:disabled { opacity: 0.6; cursor: default; filter: none; }

/* ---- Password requirements checklist ---- */

/* Shown under a password field; each item turns green as its rule is met.
   The marker is a fixed width so the label doesn't shift when it changes. */
.pw-rules {
  list-style: none; margin: 9px 0 0; padding: 0;
  font-size: 11.5px; line-height: 1.5;
}
.pw-rules li {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 0; color: var(--text-faint);
  transition: color 0.12s ease;
}
.pw-rules li::before {
  content: '\2013'; /* en dash while unmet */
  display: inline-block; width: 11px; text-align: center;
  font-weight: 600;
}
.pw-rules li.met { color: var(--accent); }
.pw-rules li.met::before { content: '\2713'; } /* tick once met */

/* The pinned actions column at the end of the SIM and Users tables. Right
   aligned so the label sits over the buttons it belongs to, rather than
   floating at the far left of a wide column. */
.col-actions-head { text-align: right; }

/* Shown instead of the red warning when a confirmation is undoable, so the
   dialog reads differently for retiring something than for deleting it. */
.reversible-note {
  margin-bottom: 18px; padding: 11px 13px;
  border: 1px solid rgba(79,163,247,0.3); border-radius: 6px;
  background: rgba(79,163,247,0.07);
  font-size: 12px; line-height: 1.6; color: var(--text-dim);
}

@media (max-width: 760px) {
  .topbar { height: 56px; padding: 0 12px; }
  .topbar-brand { width: auto; }

  .body-row { flex-direction: column; }
  .sidebar,
  .sidebar.collapsed {
    width: 100%; height: 48px; flex: 0 0 48px; padding: 4px 8px;
    border-right: 0; border-bottom: 1px solid var(--border); overflow: hidden;
  }
  .nav-items { flex-direction: row; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-items::-webkit-scrollbar { display: none; }
  .sidebar .nav-item,
  .sidebar.collapsed .nav-item { flex: 0 0 auto; justify-content: center; min-height: 40px; padding: 8px 10px; }
  .sidebar .nav-label,
  .sidebar.collapsed .nav-label { display: inline; white-space: nowrap; }
  .sidebar .nav-dot,
  .sidebar.collapsed .nav-dot,
  .sidebar .nav-letter,
  .sidebar.collapsed .nav-letter,
  .sidebar .nav-footer,
  .sidebar .sidebar-toggle,
  .sidebar > .spacer { display: none; }

  .content { min-width: 0; }
  .screen-scroll { padding: 16px 12px; }
  .cyber-intro { flex-direction: column; }
  .cyber-panel-heading { align-items: flex-start; flex-wrap: wrap; }
  .network-data-columns { grid-template-columns: minmax(0, 1fr); }
  .new-starter-send-grid { grid-template-columns: minmax(0, 1fr); }
  .network-controls { width: 100%; flex-wrap: wrap; }
  .network-search-controls { align-items: stretch; flex-direction: column; }
  .network-search-field { max-width: none; }
  .network-status-filter .form-select { min-width: 0; }
  .network-site-filter { width: 100%; justify-content: space-between; }
  .network-site-filter .form-select { flex: 1; min-width: 0; }
  .cyber-table { min-width: 600px; }
  .cyber-map-frame { height: 70vh; min-height: 420px; }
  .page-header-row { flex-wrap: wrap; align-items: flex-start; }
  .grid-2,
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .overview-right-stack { grid-template-rows: auto auto; }
  .overview-status-panel,
  .overview-attention-panel { min-height: auto; overflow: visible; }
  .overview-attention-list { overflow: visible; }
  .form-row { flex-wrap: wrap; }
  .cost-filters { grid-template-columns: minmax(0, 1fr); }
  .cost-search-filter { grid-column: auto; }
  .cost-submit { flex: 1 1 100%; }
  .kpi-card { min-width: min(150px, calc(50% - 4px)); padding: 12px; }
  .kpi-value { font-size: 22px; }
  .compliance-row { flex-wrap: wrap; gap: 16px; }

  .assets-layout { flex-direction: column; min-width: 0; }
  .filters-panel {
    width: 100%; flex: 0 0 auto; display: flex; flex-direction: row; align-items: center;
    gap: 8px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden;
  }
  .filter-heading,
  .filter-heading.spaced { flex: 0 0 auto; margin: 0; white-space: nowrap; }
  .status-chip { flex: 0 0 auto; margin: 0; }
  .select-field { width: 150px; flex: 0 0 150px; }
  .table-col { min-width: 0; }
  .table-toolbar,
  .bulk-toolbar { gap: 8px; padding: 10px 12px; overflow-x: auto; }
  .table-toolbar .spacer { display: none; }
  .table-toolbar .search-input { flex: 0 0 180px; }
  .table-toolbar .table-count { flex: 0 0 auto; white-space: nowrap; }
  .table-toolbar button,
  .bulk-toolbar button { flex-shrink: 0; min-height: 40px; white-space: nowrap; }
  .pagination-bar { gap: 8px; padding: 8px 12px; }
  .page-info { margin-right: auto; white-space: nowrap; }
  .btn-page { min-height: 40px; }
  .import-preview-table { overflow: auto; }
  .import-preview-row { min-width: 490px; }
  .pending-import-edit-grid { grid-template-columns: minmax(0, 1fr); }
  .pending-import-fields { grid-template-columns: minmax(0, 1fr); }
  .pending-import-comparison { grid-template-columns: minmax(0, 1fr); }
  .pending-import-actions > button { flex: 1; min-height: 42px; }

  .overlay,
  .drawer,
  .modal-overlay { top: 0; }
  .drawer { width: min(440px, 100%); padding: 16px; }
  .modal-overlay { padding: 12px; }
  .modal-box { width: min(480px, 100%); max-height: calc(100dvh - 24px); padding: 18px; }
  .induction-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .induction-detail-modal { width: min(780px, 100%); }
  .induction-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row { flex-direction: column; gap: 12px; }
  .auth-shell { padding: 16px; overflow-y: auto; }
  .auth-card { width: min(360px, 100%); padding: 24px; }
  .toast { width: calc(100% - 24px); max-width: 480px; bottom: 12px; padding: 12px 16px; text-align: center; }
}