.fleet-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.fleet-summary .card { display: grid; gap: 3px; }
.fleet-summary b { font: 800 28px Manrope; }
.fleet-summary span { color: var(--muted); font-size: 12px; }
.fleet-summary .fleet-warning { border-color: #e6ad45; background: #fff8e7; }
.fleet-summary .fleet-warning b { color: #493200; }
.fleet-summary .fleet-warning span { color: #795b16; }
.fleet-alerts { margin-bottom: 18px; }
.fleet-alert { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.fleet-alert > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #fff1ce; color: #6b4b00; }
.fleet-alert.danger > span { background: #ffe1e1; color: #a92f2f; }
.fleet-alert strong,.fleet-alert small { display: block; }
.fleet-alert small { color: var(--muted); }
.fleet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vehicle-card-head,.vehicle-card-footer,.vehicle-payload { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vehicle-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-size: 20px; }
.vehicle-icon svg { width: 23px; height: 23px; }
.vehicle-card h2 { margin: 18px 0 4px; font: 800 20px Manrope; }
.vehicle-card > p { color: var(--muted); }
.vehicle-payload { padding: 12px; background: color-mix(in srgb, var(--panel) 80%, var(--bg)); border-radius: 11px; }
.vehicle-deadlines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.vehicle-deadlines > div { border: 1px solid var(--line); border-radius: 11px; padding: 11px; }
.vehicle-deadlines span,.vehicle-deadlines b,.vehicle-deadlines small { display: block; }
.vehicle-deadlines span,.vehicle-deadlines small { color: var(--muted); font-size: 11px; }
.vehicle-renew-button { width: 100%; min-height: 30px; margin-top: 9px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font: 700 10px Manrope; cursor: pointer; }
.vehicle-renew-button:hover,.vehicle-renew-button:focus-visible { border-color: var(--brand); background: color-mix(in srgb,var(--brand) 10%,var(--panel)); outline: none; }
.vehicle-renew-button:disabled { border-color: var(--line); background: color-mix(in srgb,var(--panel) 68%,var(--bg)); color: var(--muted); cursor: not-allowed; opacity: .58; }
.vehicle-renew-button:disabled:hover { border-color: var(--line); background: color-mix(in srgb,var(--panel) 68%,var(--bg)); }
.vehicle-renewal-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb,var(--panel) 80%,var(--bg)); }
.vehicle-renewal-summary > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--brand); color: var(--brand-ink); }
.vehicle-renewal-summary svg { width: 21px; height: 21px; }
.vehicle-renewal-summary strong,.vehicle-renewal-summary small { display: block; }
.vehicle-renewal-summary small,.vehicle-renewal-hint { color: var(--muted); }
.vehicle-deadlines .due { border-color: #e0a343; background: #fff8e8; }
.vehicle-deadlines .due span,.vehicle-deadlines .due b,.vehicle-deadlines .due small { color: #5a3b00; }
.vehicle-service-note { padding: 11px; margin-bottom: 14px; border-radius: 10px; background: #ffe9e9; color: #8e2929; font-size: 12px; }
.vehicle-card-footer { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 11px; }
.badge.vehicle-status-available { background: #def6e8; color: #208553; }
.badge.vehicle-status-service,.badge.vehicle-status-unavailable { background: #ffe3e3; color: #b63737; }
.badge.vehicle-status-assigned { background: #e5efff; color: #276bcf; }

:root[data-theme="dark"] .fleet-summary .fleet-warning {
  background: #33280d;
  border-color: #80651a;
}
:root[data-theme="dark"] .fleet-summary .fleet-warning b { color: #ffe69a; }
:root[data-theme="dark"] .fleet-summary .fleet-warning span { color: #d7bd70; }
:root[data-theme="dark"] .fleet-alert > span {
  background: #3a300f;
  color: #ffdd70;
  border: 1px solid #65551b;
}
:root[data-theme="dark"] .fleet-alert.danger > span {
  background: #431b20;
  color: #ff9da4;
  border-color: #713038;
}
:root[data-theme="dark"] .vehicle-deadlines > div {
  background: #202020;
  border-color: #3b3b3b;
}
:root[data-theme="dark"] .vehicle-deadlines .due {
  background: #382d12;
  border-color: #8a671d;
}
:root[data-theme="dark"] .vehicle-deadlines .due span,
:root[data-theme="dark"] .vehicle-deadlines .due b,
:root[data-theme="dark"] .vehicle-deadlines .due small { color: #ffe49a; }
:root[data-theme="dark"] .vehicle-service-note {
  background: #411a1e;
  color: #ff9da4;
  border: 1px solid #713038;
}
:root[data-theme="dark"] .badge.vehicle-status-available { background: #123725; color: #67d99c; }
:root[data-theme="dark"] .badge.vehicle-status-service,
:root[data-theme="dark"] .badge.vehicle-status-unavailable { background: #4a191d; color: #ff858d; }
:root[data-theme="dark"] .badge.vehicle-status-assigned { background: #122e52; color: #78b5ff; }

.event-load-panel { margin-bottom: 16px; }
.load-plan-empty { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px dashed var(--line); border-radius: 12px; }
.load-plan-empty > span { font-size: 24px; }
.load-plan-empty > div { flex: 1; }
.load-plan-empty strong,.load-plan-empty small { display: block; }
.load-plan-empty small { color: var(--muted); }
.load-plan-summary > div:first-child { display: flex; align-items: center; gap: 12px; }
.load-plan-summary > div:first-child > div { flex: 1; }
.load-plan-summary strong,.load-plan-summary small { display: block; }
.load-plan-summary small { color: var(--muted); }
.load-plan-summary > b { display: block; margin: 8px 0 12px; color: #277c4c; }
.load-plan-summary.overloaded > b,.load-live-summary.overloaded > b { color: #b63737; }
.load-meter { height: 9px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: var(--line); }
.load-meter span { display: block; height: 100%; background: var(--green); }
.overloaded .load-meter span { background: var(--red); }
.load-live-summary { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 75%, var(--bg)); }
.load-live-summary > div:first-child { display: flex; justify-content: space-between; }
.load-live-summary > b { display: block; margin-top: 7px; }
.load-lines { display: grid; gap: 8px; margin-top: 14px; }
.load-lines label { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 10px; }
.load-lines strong,.load-lines small { display: block; }
.load-lines small { color: var(--muted); }
.load-lines input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.load-line-readonly { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; }
.load-line-readonly strong,.load-line-readonly small { display: block; }
.load-line-readonly small { margin-top: 3px; color: var(--muted); }
.load-line-readonly > b { white-space: nowrap; }

.security-warning { display: grid; gap: 4px; padding: 14px; margin-bottom: 18px; border: 1px solid #e8aa3f; border-radius: 12px; background: #fff7df; color: #493200; }
.security-warning span { font-size: 12px; }
.deployment-checklist { margin-top: 20px; }
.deployment-checklist > div { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.deployment-checklist > div > span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 800; }
.deployment-checklist p,.deployment-checklist small { margin: 0; display: block; }
.deployment-checklist small { color: var(--muted); }
.map-location-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.map-location-tools .btn { text-decoration: none; }
.crew-picker-field > label { color: var(--ink); font-size: 12px; }
.crew-pick:has(input:checked) strong,.crew-pick:has(input:checked) small { color: #243000; }
.backend-status { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.backend-status:before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.backend-status.online { background:#def6e8; color:#208553; }
.backend-status.saving { background:#fff2c6; color:#8c6700; }
.backend-status.error,.backend-status.offline { background:#ffe3e3; color:#b63737; }
.app-loading { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:12px; background:var(--bg); color:var(--ink); }
.app-loading strong { font:800 20px Manrope; }
.app-loading span { color:var(--muted); }
.login-database-error { padding:11px 13px; border:1px solid #d56b6b; border-radius:10px; background:#ffe9e9; color:#8e2929; font-size:12px; }
.login-pulse.offline i { background:var(--red); box-shadow:0 0 0 6px rgba(243,93,93,.16); }
.auth-link { border:0; background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:700 12px Manrope; padding:4px; }
.auth-message { display:grid; gap:18px; }
.auth-message h2,.auth-message p { margin:0; }
.auth-message p { color:var(--muted); line-height:1.55; }
.auth-role-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--panel) 75%,var(--bg)); }
.auth-role-summary span { color:var(--muted); font-size:12px; }
.auth-role-summary strong { text-align:right; }
.password-field { position:relative; }
.account-password-panel { margin-top:18px; }
.user-row-actions { display:flex; align-items:center; gap:5px; }
.user-row-actions .danger { color:var(--red); }
:root[data-theme="dark"] .backend-status.online { background:#123725; color:#67d99c; }
:root[data-theme="dark"] .backend-status.saving { background:#44380e; color:#ffd85c; }
:root[data-theme="dark"] .backend-status.error,:root[data-theme="dark"] .backend-status.offline { background:#4a191d; color:#ff858d; }

@media (max-width: 820px) {
  .fleet-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .backend-status { display:none; }
  .fleet-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fleet-summary .card { padding: 13px; }
  .fleet-summary b { font-size: 22px; }
  .vehicle-deadlines { grid-template-columns: 1fr; }
  .load-plan-empty { align-items: flex-start; flex-wrap: wrap; }
  .load-plan-empty .btn { width: 100%; }
  .load-lines label { grid-template-columns: minmax(0, 1fr) 72px; }
  .load-lines label > b { grid-column: 1 / -1; text-align: right; }
  .load-line-readonly { align-items: end; }
  .map-location-tools .btn { width: 100%; }
  .user-row { grid-template-columns:auto minmax(0,1fr) auto; }
  .user-row .user-role,.user-row .user-status { grid-column:2; justify-self:start; }
  .user-row-actions { grid-column:3; grid-row:1 / span 3; flex-direction:column; }
}
.user-presence{display:flex!important;align-items:center;gap:6px;margin-top:5px;font-size:10px!important;color:var(--text-soft)}
.user-presence i{width:7px;height:7px;border-radius:50%;background:#8b8f97;flex:0 0 auto}
.user-presence.online{color:#2c9d66}.user-presence.online i{background:#46b97b;box-shadow:0 0 0 4px rgba(70,185,123,.12)}
.user-presence.session{color:#b78b00}.user-presence.session i{background:#facc00}
.user-presence.offline i{background:#8b8f97}.session-policy{font-weight:800;padding:8px 12px;border-radius:9px;background:var(--surface-soft)}
.user-audit-head{display:flex;gap:12px;align-items:center;padding:14px;background:var(--surface-soft);border-radius:13px;margin-bottom:14px}.user-audit-head strong,.user-audit-head span{display:block}.user-audit-head span{font-size:11px;color:var(--text-soft);margin-top:3px}
.audit-loading{padding:36px;text-align:center;color:var(--text-soft)}.audit-list{display:grid;max-height:55vh;overflow:auto}.audit-row{display:flex;gap:11px;align-items:center;padding:12px 2px;border-top:1px solid var(--border)}.audit-row:first-child{border-top:0}.audit-row>i{width:9px;height:9px;border-radius:50%;background:#facc00}.audit-row strong,.audit-row span{display:block}.audit-row strong{font-size:12px}.audit-row span{font-size:10px;color:var(--text-soft);margin-top:3px}
.user-status.banned{background:rgba(243,93,93,.14);color:#d94747}.danger-zone{display:grid;gap:9px;margin-top:18px;padding:15px;border:1px solid rgba(243,93,93,.3);border-radius:13px;background:rgba(243,93,93,.06)}.danger-zone>strong,.danger-zone>span{display:block}.danger-zone>span{font-size:10px;color:var(--text-soft);line-height:1.5}.danger-zone>div{display:flex;gap:8px;flex-wrap:wrap}
.camera-scanner{position:relative;display:none;aspect-ratio:4/3;overflow:hidden;border-radius:15px;background:#080808;margin-bottom:10px}.camera-scanner.active{display:block}.camera-scanner video{width:100%;height:100%;object-fit:cover}.camera-scanner>span{position:absolute;left:10px;right:10px;bottom:10px;padding:8px;border-radius:8px;background:rgba(0,0,0,.68);color:#fff;text-align:center;font-size:10px}.camera-target{position:absolute;left:15%;right:15%;top:25%;bottom:25%;border:2px solid #facc00;border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.15)}.camera-button{width:100%;margin-bottom:13px}