:root {
  color-scheme: dark;
  --bg: #071019;
  --bg-deep: #040a11;
  --bg-grid: rgba(91, 124, 153, .055);
  --surface: #0d1823;
  --surface-2: #111f2c;
  --surface-3: #162635;
  --surface-soft: #0a141e;
  --text: #edf3f8;
  --text-soft: #b8c5d0;
  --muted: #728394;
  --line: #203240;
  --line-strong: #304757;
  --steel: #8da1b2;
  --primary: #2c8eff;
  --primary-strong: #126bd5;
  --primary-soft: rgba(44, 142, 255, .12);
  --cyan: #20c9c3;
  --cyan-soft: rgba(32, 201, 195, .12);
  --success: #29d391;
  --success-soft: rgba(41, 211, 145, .12);
  --warning: #f5a524;
  --warning-soft: rgba(245, 165, 36, .13);
  --danger: #ff575f;
  --danger-soft: rgba(255, 87, 95, .13);
  --violet: #8877ff;
  --violet-soft: rgba(136, 119, 255, .13);
  --sidebar: #08131e;
  --sidebar-width: 264px;
  --shadow-xs: 0 1px 0 rgba(255,255,255,.025) inset;
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .16);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .26);
  --shadow-lg: 0 36px 100px rgba(0, 0, 0, .5);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f5;
  --bg-deep: #e5ebef;
  --bg-grid: rgba(38, 66, 86, .055);
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #edf2f5;
  --surface-soft: #f9fbfc;
  --text: #132330;
  --text-soft: #415565;
  --muted: #758796;
  --line: #d8e1e7;
  --line-strong: #c6d3dc;
  --steel: #60778a;
  --primary: #1676dc;
  --primary-strong: #075bb5;
  --primary-soft: rgba(22, 118, 220, .10);
  --cyan: #008f96;
  --cyan-soft: rgba(0, 143, 150, .10);
  --success: #11885c;
  --success-soft: rgba(17, 136, 92, .10);
  --warning: #bd7200;
  --warning-soft: rgba(189, 114, 0, .11);
  --danger: #d63d48;
  --danger-soft: rgba(214, 61, 72, .10);
  --violet: #6654d9;
  --violet-soft: rgba(102, 84, 217, .10);
  --sidebar: #0a1824;
  --shadow-sm: 0 10px 28px rgba(23, 44, 61, .07);
  --shadow-md: 0 18px 48px rgba(23, 44, 61, .11);
  --shadow-lg: 0 30px 80px rgba(23, 44, 61, .20);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    radial-gradient(circle at 82% -10%, rgba(44, 142, 255, .11), transparent 32%),
    radial-gradient(circle at -8% 78%, rgba(32, 201, 195, .06), transparent 26%),
    var(--bg);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.workspace { min-width: 0; }

/* Sidebar */
.sidebar {
  display: none;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  width: var(--sidebar-width);
  padding: 18px 14px;
  color: #eef5fb;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 22%),
    radial-gradient(circle at 70% 0%, rgba(44, 142, 255, .18), transparent 30%),
    var(--sidebar);
  border-left: 1px solid rgba(128, 166, 194, .12);
  box-shadow: -20px 0 50px rgba(0,0,0,.18);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(44,142,255,.35), transparent);
}
.sidebar-brand, .mobile-brand { display: flex; align-items: center; gap: 11px; }
.sidebar-brand { padding: 6px 8px 20px; border-bottom: 1px solid rgba(151, 181, 203, .10); }
.brand-symbol {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
  font-weight: 950;
  background: linear-gradient(145deg, #3ba4ff, #155bc1);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(13, 98, 201, .34), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-symbol.small { width: 38px; height: 38px; border-radius: 11px; }
.sidebar-brand strong, .mobile-brand strong { display: block; font-size: 14px; font-weight: 850; letter-spacing: -.01em; }
.sidebar-brand small, .mobile-brand small { display: block; margin-top: 3px; color: #6f8497; font-size: 14px; letter-spacing: .12em; font-weight: 800; }
.side-nav { display: grid; gap: 5px; margin-top: 22px; }
.nav-link {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #7f94a7;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  transition: .16s ease;
}
.nav-link::before {
  content: "";
  position: absolute;
  right: -14px;
  width: 3px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: transparent;
}
.nav-link:hover { color: #eaf3f9; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.04); }
.nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(44,142,255,.10), rgba(44,142,255,.22));
  border-color: rgba(74, 156, 238, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.nav-link.active::before { background: var(--primary); box-shadow: 0 0 18px rgba(44,142,255,.7); }
.nav-link .nav-icon { display: grid; place-items: center; color: currentColor; }
.nav-link b, .bottom-link b {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(255,87,95,.25);
}
.sidebar-footer { position: absolute; right: 14px; left: 14px; bottom: 16px; display: grid; gap: 9px; }
.server-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(137, 175, 201, .10);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.status-led, .pulse-led { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(41,211,145,.10), 0 0 18px rgba(41,211,145,.42); }
.server-status strong { display: block; font-size: 14px; }
.server-status small { display: block; color: #6f8497; font-size: 14px; margin-top: 3px; }
.backup-link {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(137, 175, 201, .10);
  border-radius: 11px;
  color: #7d92a5;
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  background: rgba(255,255,255,.018);
}
.backup-link:hover { color: #fff; border-color: rgba(44,142,255,.28); background: rgba(44,142,255,.07); }

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  height: 67px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  backdrop-filter: blur(20px) saturate(120%);
}
.mobile-brand { min-width: 0; }
.mobile-brand strong { color: var(--text); }
.mobile-brand small { color: var(--muted); }
.mobile-header-title { display: none; }
.topbar-context { display: none; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.icon-button {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-xs);
}
.icon-button:active { transform: translateY(1px); }
.connection-pill {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}
.connection-pill > span { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.connection-pill.online > span { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft), 0 0 12px rgba(41,211,145,.3); }
.connection-pill.offline > span { background: var(--danger); }

/* Main layout */
main { width: min(1580px, 100%); margin: 0 auto; padding: 18px 12px 96px; }
.view { display: none; animation: viewIn .2s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.page-intro h1 { margin: 5px 0 0; font-size: clamp(23px, 5vw, 37px); line-height: 1.15; letter-spacing: -.04em; }
.page-intro p { margin: 8px 0 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.section-kicker { color: var(--primary); font-size: 14px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.danger-kicker { color: var(--danger); }

.dashboard-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(105deg, rgba(44,142,255,.09), transparent 46%),
    linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.025);
}
.dashboard-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(113, 153, 184, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 153, 184, .04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}
.dashboard-intro::after {
  content: "FC";
  position: absolute;
  z-index: -1;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(111, 162, 203, .055);
  font-size: clamp(80px, 15vw, 180px);
  font-weight: 950;
  letter-spacing: -.08em;
  direction: ltr;
}
.intro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--muted); font-size: 14px; font-weight: 750; }
.live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(41,211,145,.18); border-radius: 999px; background: var(--success-soft); color: var(--success); }
.live-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }

/* Buttons */
.primary-action, .secondary-action, .primary-mini, .secondary-mini, .danger-action, .ghost-button, .text-button {
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.primary-action {
  min-height: 44px;
  padding: 10px 15px;
  color: #fff;
  background: linear-gradient(135deg, #f68b1f, #e96612);
  border-color: rgba(255, 182, 98, .22);
  box-shadow: 0 12px 28px rgba(225, 96, 14, .22), inset 0 1px 0 rgba(255,255,255,.2);
}
.primary-action:hover, .primary-mini:hover { transform: translateY(-1px); }
.secondary-action {
  min-height: 43px;
  padding: 10px 14px;
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.primary-mini, .secondary-mini, .danger-action { min-height: 37px; padding: 8px 11px; font-size: 14px; }
.primary-mini { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #fff; border-color: rgba(117,183,255,.18); box-shadow: 0 8px 18px rgba(26,108,201,.17); }
.secondary-mini { background: var(--surface-2); color: var(--text-soft); border-color: var(--line); }
.danger-action { background: var(--danger); color: #fff; box-shadow: 0 8px 18px rgba(255,87,95,.18); }
.ghost-button { min-height: 41px; padding: 10px 14px; background: transparent; color: var(--muted); border-color: var(--line); }
.text-button { padding: 7px 0; background: transparent; color: #5eaaff; font-size: 14px; white-space: nowrap; }

/* Panels */
.panel {
  position: relative;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 76%, var(--surface)));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.02);
  padding: 15px;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.018), transparent 28%);
}
.panel-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-head h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.025em; }
.panel-head.compact { margin-bottom: 10px; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 11px; }
.kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255,255,255,.016), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kpi-card::after {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  left: -38px;
  top: -42px;
  border-radius: 50%;
  background: currentColor;
  opacity: .055;
  filter: blur(1px);
}
.kpi-card.blue { color: var(--primary); }
.kpi-card.cyan { color: var(--cyan); }
.kpi-card.green { color: var(--success); }
.kpi-card.amber { color: var(--warning); }
.kpi-card.red { color: var(--danger); }
.kpi-card-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-index { color: var(--muted); font-size: 14px; font-weight: 900; letter-spacing: .14em; }
.kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.kpi-main { position: relative; z-index: 1; color: var(--text); }
.kpi-main > span { display: block; margin-bottom: 4px; color: var(--text-soft); font-size: 14px; font-weight: 850; }
.kpi-value-line { display: flex; align-items: baseline; gap: 7px; }
.kpi-value-line strong { font-size: 27px; line-height: 1; letter-spacing: -.045em; }
.kpi-value-line b { color: var(--muted); font-size: 14px; font-weight: 750; }
.kpi-main > small { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.kpi-accent { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .8; }

/* Command overview */
.command-grid { display: grid; gap: 11px; margin-bottom: 11px; }
.alerts-overview-panel { border-top: 2px solid color-mix(in srgb, var(--danger) 75%, transparent); }
.priority-panel { border-top: 2px solid color-mix(in srgb, var(--warning) 72%, transparent); }
.health-panel { border-top: 2px solid color-mix(in srgb, var(--success) 70%, transparent); }
.critical-preview, .priority-list { display: grid; gap: 7px; min-height: 190px; }
.critical-row, .priority-row {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.critical-row { grid-template-columns: 34px minmax(0,1fr) auto 32px; }
.critical-row.critical { border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); background: linear-gradient(90deg, var(--danger-soft), transparent 54%); }
.critical-row.warning { border-color: color-mix(in srgb, var(--warning) 22%, var(--line)); background: linear-gradient(90deg, var(--warning-soft), transparent 54%); }
.critical-symbol { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent); }
.critical-copy { min-width: 0; }
.critical-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 14px; }
.critical-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; color: var(--muted); font-size: 14px; }
.critical-row time { color: var(--muted); font-size: 14px; white-space: nowrap; }
.critical-action, .row-action {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--surface-2);
}
.priority-row { grid-template-columns: 36px minmax(0,1fr) auto 32px; }
.priority-row.overdue, .priority-row.due { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); background: linear-gradient(90deg, var(--danger-soft), transparent 50%); }
.priority-row.urgent { border-color: color-mix(in srgb, var(--warning) 25%, var(--line)); background: linear-gradient(90deg, var(--warning-soft), transparent 50%); }
.asset-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 17%, transparent); }
.asset-icon.packaging_machine { color: var(--cyan); background: var(--cyan-soft); border-color: color-mix(in srgb, var(--cyan) 17%, transparent); }
.asset-icon.truck { color: var(--violet); background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 17%, transparent); }
.asset-icon.large { width: 42px; height: 42px; }
.priority-copy { min-width: 0; }
.priority-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.priority-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; color: var(--muted); font-size: 14px; }
.priority-due { display: grid; justify-items: end; gap: 4px; }
.priority-due strong { color: var(--text-soft); font-size: 14px; white-space: nowrap; }
.status-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; border-radius: 7px; font-size: 14px; font-weight: 900; white-space: nowrap; }
.status-tag.ok { color: var(--success); background: var(--success-soft); }
.status-tag.soon { color: var(--primary); background: var(--primary-soft); }
.status-tag.urgent { color: var(--warning); background: var(--warning-soft); }
.status-tag.due, .status-tag.overdue { color: var(--danger); background: var(--danger-soft); }

.health-content { position: relative; z-index: 1; min-height: 262px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
.health-visual { display: grid; justify-items: center; gap: 9px; }
.health-gauge {
  --gauge-color: var(--success);
  width: min(145px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--gauge-color) calc(var(--score) * 1%), var(--surface-3) 0);
  box-shadow: 0 0 36px color-mix(in srgb, var(--gauge-color) 12%, transparent);
  position: relative;
}
.health-gauge::before { content: ""; width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 0 26px rgba(0,0,0,.18); }
.health-gauge > div { position: absolute; text-align: center; }
.health-gauge strong { display: block; font-size: 28px; letter-spacing: -.05em; }
.health-gauge span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.health-gauge.warn { --gauge-color: var(--warning); }
.health-gauge.bad { --gauge-color: var(--danger); }
.health-caption { color: var(--muted); font-size: 14px; letter-spacing: .14em; font-weight: 900; }
.health-stats { display: grid; gap: 7px; }
.health-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.health-stats span { color: var(--text-soft); font-size: 14px; }
.health-stats strong { font-size: 14px; }
.dot { width: 7px; height: 7px; display: inline-block; margin-left: 5px; border-radius: 50%; }
.dot.green { background: var(--success); box-shadow: 0 0 8px rgba(41,211,145,.3); }
.dot.amber { background: var(--warning); }
.dot.red { background: var(--danger); }
.dot.slate { background: var(--steel); }
.live-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.live-note strong { display: block; font-size: 14px; }
.live-note small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }

/* Filters */
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  min-height: 29px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 850;
}
.filter-chip.active { color: #fff; border-color: var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow: 0 7px 16px rgba(27,109,200,.18); }

/* Assets */
.fleet-preview-panel { margin-top: 0; }
.assets-grid, .plans-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.asset-card, .plan-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-xs);
}
.asset-card.has-fault { border-color: color-mix(in srgb, var(--danger) 36%, var(--line)); box-shadow: 0 0 0 1px rgba(255,87,95,.06), var(--shadow-sm); }
.asset-card-head, .plan-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.asset-identification { min-width: 0; }
.asset-identification h3 { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.asset-identification > div > span:last-child { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.asset-class { color: var(--primary) !important; font-size: 14px !important; letter-spacing: .12em; font-weight: 900; }
.operational-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 4px 7px; border-radius: 999px; color: var(--muted); background: var(--surface-3); font-size: 14px; font-weight: 900; white-space: nowrap; }
.operational-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.operational-pill.active { color: var(--success); background: var(--success-soft); }
.operational-pill.active i { background: var(--success); box-shadow: 0 0 8px rgba(41,211,145,.4); }
.operational-pill.idle { color: var(--warning); background: var(--warning-soft); }
.operational-pill.idle i { background: var(--warning); }
.operational-pill.fault { color: var(--danger); background: var(--danger-soft); }
.operational-pill.fault i { background: var(--danger); }
.operational-pill.service { color: var(--primary); background: var(--primary-soft); }
.operational-pill.service i { background: var(--primary); }

.asset-visual {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  margin-top: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(44,142,255,.08), transparent 60%),
    linear-gradient(145deg, var(--surface-soft), var(--surface-2));
}
.asset-visual.packaging_machine { background: linear-gradient(90deg, rgba(32,201,195,.08), transparent 60%), linear-gradient(145deg, var(--surface-soft), var(--surface-2)); }
.asset-visual.truck { background: linear-gradient(90deg, rgba(136,119,255,.08), transparent 60%), linear-gradient(145deg, var(--surface-soft), var(--surface-2)); }
.asset-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(100,137,165,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(100,137,165,.04) 1px, transparent 1px); background-size: 18px 18px; }
.asset-visual-icon { position: relative; z-index: 1; width: 68px; height: 68px; display: grid; place-items: center; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: 16px; background: var(--primary-soft); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.asset-visual.packaging_machine .asset-visual-icon { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 22%, var(--line)); background: var(--cyan-soft); }
.asset-visual.truck .asset-visual-icon { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 22%, var(--line)); background: var(--violet-soft); }
.asset-primary-metric { position: relative; z-index: 1; min-width: 0; text-align: left; direction: rtl; }
.asset-primary-metric > span { display: block; color: var(--muted); font-size: 14px; }
.asset-primary-metric > strong { display: block; margin-top: 5px; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.asset-primary-metric small { color: var(--muted); font-size: 14px; font-weight: 800; }
.asset-watermark { position: absolute; z-index: 0; left: 10px; bottom: 5px; color: rgba(138,166,187,.08); font-size: 27px; font-weight: 950; letter-spacing: .03em; direction: ltr; }
.asset-maintenance-box { margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.asset-maintenance-box.urgent, .asset-maintenance-box.due, .asset-maintenance-box.overdue { border-color: color-mix(in srgb, var(--warning) 25%, var(--line)); background: linear-gradient(90deg, var(--warning-soft), var(--surface-soft)); }
.asset-maintenance-box.due, .asset-maintenance-box.overdue { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: linear-gradient(90deg, var(--danger-soft), var(--surface-soft)); }
.maintenance-heading, .asset-due { display: flex; justify-content: space-between; gap: 8px; }
.maintenance-heading span { color: var(--muted); font-size: 14px; }
.maintenance-heading strong { display: block; margin-top: 3px; font-size: 14px; }
.maintenance-heading > b { align-self: center; color: var(--warning); font-size: 14px; }
.asset-due { margin-top: 8px; color: var(--muted); font-size: 14px; }
.asset-due b { color: var(--text-soft); }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-3); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.progress-track.slim { height: 5px; margin-top: 7px; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), #59e9b4); }
.progress-fill.soon { background: linear-gradient(90deg, var(--primary), var(--cyan)); }
.progress-fill.urgent { background: linear-gradient(90deg, var(--warning), #ffd05e); }
.progress-fill.due, .progress-fill.overdue { background: linear-gradient(90deg, var(--danger), #ff8a73); }
.secondary-stat { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 14px; }
.secondary-stat strong { color: var(--text-soft); }
.asset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }

/* Plans */
.plans-panel { min-height: 380px; }
.plans-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 13px; }
.plan-filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.muted-count { color: var(--muted); font-size: 14px; }
.plan-card { border-top: 2px solid var(--line-strong); }
.plan-card.ok { border-top-color: var(--success); }
.plan-card.soon { border-top-color: var(--primary); }
.plan-card.urgent { border-top-color: var(--warning); }
.plan-card.due, .plan-card.overdue { border-top-color: var(--danger); }
.plan-asset { display: flex; align-items: center; gap: 9px; min-width: 0; }
.plan-asset > div:last-child { min-width: 0; }
.plan-asset span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 850; }
.plan-asset small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--muted); font-size: 14px; }
.plan-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: 15px; }
.plan-title-row span { color: var(--muted); font-size: 14px; }
.plan-title-row h3 { margin: 4px 0 0; font-size: 14px; }
.icon-plain { width: 31px; height: 31px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.plan-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.plan-metrics > div { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.plan-metrics span { display: block; color: var(--muted); font-size: 14px; }
.plan-metrics strong { display: block; margin-top: 5px; font-size: 14px; }
.progress-block { margin-top: 12px; }
.progress-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.progress-label b { color: var(--text-soft); }
.plan-footer { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.interval-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.plan-footer button { width: 100%; }

/* Alerts and history */
.alerts-list, .history-list { display: grid; gap: 10px; }
.alert-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-xs);
}
.alert-card.critical { border-right: 3px solid var(--danger); }
.alert-card.warning { border-right: 3px solid var(--warning); }
.alert-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--danger); background: var(--danger-soft); }
.alert-title-line { display: flex; flex-direction: column; gap: 7px; }
.alert-code { color: var(--danger); font-size: 14px; font-weight: 950; letter-spacing: .08em; }
.alert-title-line h3 { margin: 3px 0 0; font-size: 14px; }
.alert-title-line time { color: var(--muted); font-size: 14px; }
.alert-body p { margin: 10px 0; color: var(--text-soft); font-size: 14px; line-height: 1.6; }

.history-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
}
.history-date { min-height: 62px; display: grid; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.history-date strong { font-size: 18px; }
.history-date span, .history-date small { color: var(--muted); font-size: 14px; }
.history-title span { color: var(--muted); font-size: 14px; }
.history-title h3 { margin: 4px 0 0; font-size: 14px; }
.history-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.history-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 14px; }
.history-main p { margin: 9px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.55; }
.history-complete { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: start; gap: 5px; padding: 5px 8px; border-radius: 7px; color: var(--success); background: var(--success-soft); font-size: 14px; font-weight: 900; }

.empty-state { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: 11px; text-align: right; }
.empty-state strong { display: block; color: var(--text); font-size: 14px; }
.empty-state span { display: block; margin-top: 4px; font-size: 14px; }
.empty-state.wide { grid-column: 1 / -1; }
.empty-state.industrial-ok svg { color: var(--success); }
.skeleton-block { min-height: 190px; background: linear-gradient(100deg, var(--surface-soft) 20%, var(--surface-3) 36%, var(--surface-soft) 52%); background-size: 220% 100%; animation: shimmer 1.3s infinite linear; border-radius: 11px; }
@keyframes shimmer { to { background-position-x: -220%; } }

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(67px + env(safe-area-inset-bottom));
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: color-mix(in srgb, var(--bg-deep) 91%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(22px);
  box-shadow: 0 -16px 40px rgba(0,0,0,.2);
}
.bottom-link { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); }
.bottom-link svg { width: 19px; height: 19px; }
.bottom-link small { font-size: 14px; font-weight: 850; }
.bottom-link.active { color: #5eabff; background: var(--primary-soft); border-color: rgba(44,142,255,.12); }
.bottom-link b { position: absolute; top: 2px; left: 19%; }

/* Modal */
.modal {
  width: min(580px, calc(100% - 20px));
  max-height: min(89vh, 780px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(1, 6, 12, .76); backdrop-filter: blur(7px); }
.modal form { max-height: inherit; padding: 17px; display: grid; gap: 12px; overflow-y: auto; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 5px 0 0; font-size: 17px; }
.modal-close { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 21px; line-height: 1; }
.modal label { display: grid; gap: 6px; color: var(--text-soft); font-size: 14px; font-weight: 850; }
.modal input, .modal select, .modal textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--text); background: var(--surface-soft); }
.modal textarea { min-height: 76px; resize: vertical; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-grid { display: grid; gap: 9px; }
.next-preview { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 9px; background: var(--primary-soft); color: var(--text-soft); font-size: 14px; line-height: 1.55; }
.next-preview svg { flex: none; color: var(--primary); }
.next-preview strong { color: var(--text); }
.modal-actions { display: grid; grid-template-columns: .8fr 1.4fr; gap: 8px; padding-top: 3px; }

.toast { position: fixed; z-index: 90; right: 12px; left: 12px; bottom: calc(77px + env(safe-area-inset-bottom)); max-width: 480px; margin: auto; padding: 12px 14px; border: 1px solid rgba(102, 167, 218, .15); border-radius: 11px; background: #0b1824; color: #fff; font-size: 14px; font-weight: 850; box-shadow: 0 18px 46px rgba(0,0,0,.34); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #8f1d2c; border-color: rgba(255,255,255,.12); }

@media (min-width: 560px) {
  .connection-pill { display: inline-flex; }
  .page-intro { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .page-intro .primary-action, .page-intro .secondary-action { width: auto; }
  .form-grid.two-cols { grid-template-columns: 1fr 1fr; }
  .plan-footer { flex-direction: row; align-items: center; justify-content: space-between; }
  .plan-footer button { width: auto; }
  .alert-title-line { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

@media (min-width: 720px) {
  main { padding: 24px 20px 106px; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .kpi-card { min-height: 142px; }
  .command-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .health-panel { grid-column: 1 / -1; }
  .health-content { grid-template-columns: 240px 1fr; }
  .assets-grid, .plans-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .plans-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .history-row { grid-template-columns: 58px 1fr auto; align-items: center; }
  .history-complete { grid-column: auto; }
}

@media (min-width: 1020px) {
  :root { --sidebar-width: clamp(248px, 17vw, 276px); }
  .sidebar { display: block; }
  .workspace { margin-right: var(--sidebar-width); }
  .bottom-nav, .mobile-brand { display: none; }
  .topbar { height: 72px; padding: 11px clamp(22px, 2vw, 34px); }
  .topbar-context { display: block; }
  .topbar-eyebrow { display: block; color: var(--muted); font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  .topbar-context strong { display: block; margin-top: 4px; font-size: 14px; }
  main { width: min(1660px, 100%); padding: 28px clamp(22px, 2.2vw, 38px) 48px; }
  .dashboard-intro { min-height: 150px; padding: 25px 27px; align-items: center; }
  .dashboard-intro .primary-action { min-width: 184px; }
  .page-intro h1 { font-size: clamp(30px, 2.3vw, 42px); }
  .page-intro p { font-size: 14px; }
  .panel { padding: 17px; }
  .kpi-grid { gap: 12px; margin-bottom: 13px; }
  .kpi-card { min-height: 146px; padding: 16px; }
  .command-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.2fr) minmax(260px, .72fr); gap: 13px; margin-bottom: 13px; }
  .health-panel { grid-column: auto; }
  .health-content { min-height: 286px; grid-template-columns: 1fr; align-content: start; }
  .health-gauge { width: 132px; }
  .health-stats { width: 100%; }
  .critical-preview, .priority-list { min-height: 286px; }
  .critical-row, .priority-row { min-height: 58px; }
  .assets-grid, .plans-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .toast { bottom: 22px; right: calc(var(--sidebar-width) + 22px); left: 22px; }
  .modal { width: min(620px, calc(100% - 40px)); }
  .modal form { padding: 21px; gap: 14px; }
}

@media (min-width: 1280px) {
  .assets-grid, .full-grid, .plans-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 1660px) {
  .assets-grid, .full-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .plans-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 719px) {
  .critical-row { grid-template-columns: 32px minmax(0,1fr) 30px; }
  .critical-row time { display: none; }
  .priority-row { grid-template-columns: 34px minmax(0,1fr) 30px; }
  .priority-due { grid-column: 2; justify-items: start; grid-template-columns: auto 1fr; align-items: center; }
  .row-action { grid-column: 3; grid-row: 1 / span 2; }
  .panel-head { align-items: center; }
  .filter-row { width: 100%; }
  .fleet-preview-panel .panel-head { flex-direction: column; align-items: stretch; }
  .fleet-preview-panel .filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .health-content { grid-template-columns: 1fr; }
  .health-stats { width: 100%; }
}

@media (hover: hover) and (pointer: fine) {
  .kpi-card, .asset-card, .plan-card, .panel, .icon-button, .secondary-action, .nav-link {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .kpi-card:hover, .asset-card:hover, .plan-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 27%, var(--line)); box-shadow: var(--shadow-md); }
  .panel:hover { border-color: color-mix(in srgb, var(--primary) 15%, var(--line)); }
  .icon-button:hover, .secondary-action:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .critical-action:hover, .row-action:hover, .icon-plain:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Keep Israeli numeric dates readable inside the RTL interface. */
.date-ltr,
time .date-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Fleet Control Pro 5 — professional asset operations */
.intro-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.dashboard-intro .intro-actions { position: relative; z-index: 2; }
.dashboard-intro .secondary-action { border-color: color-mix(in srgb, var(--primary) 36%, var(--line)); background: linear-gradient(145deg, rgba(44,142,255,.12), var(--surface)); }

.row-actions-compact, .plan-inline-actions, .history-actions { display: flex; align-items: center; gap: 5px; }
.row-action.danger, .icon-plain.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, var(--line)); background: var(--danger-soft); }
.danger-text { color: var(--danger); }
.priority-row { grid-template-columns: 36px minmax(0,1fr) auto auto; }
.row-actions-compact .row-action { grid-column: auto; grid-row: auto; }

.asset-card {
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(42,76,103,.13), transparent 45%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 80%, var(--surface)));
}
.asset-media {
  position: relative;
  isolation: isolate;
  min-height: 130px;
  margin: 13px -2px 11px;
  padding: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(rgba(82,135,171,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,135,171,.055) 1px, transparent 1px),
    radial-gradient(circle at 85% 20%, rgba(44,142,255,.15), transparent 45%),
    var(--surface-soft);
  background-size: 19px 19px, 19px 19px, auto, auto;
}
.asset-media.packaging_machine, .asset-media.equipment { background-color: color-mix(in srgb, var(--cyan-soft) 24%, var(--surface-soft)); }
.asset-media.truck { background-color: color-mix(in srgb, var(--violet-soft) 24%, var(--surface-soft)); }
.asset-media.product { background-color: color-mix(in srgb, var(--warning-soft) 20%, var(--surface-soft)); }
.asset-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.025), transparent 70%);
}
.asset-photo {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 104px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.38));
}
.asset-media .asset-visual-icon { width: 72px; height: 72px; align-self: center; }
.asset-media .asset-primary-metric { position: relative; z-index: 2; min-width: 0; }
.asset-media .asset-primary-metric span { display: block; color: var(--muted); font-size: 14px; font-weight: 850; }
.asset-media .asset-primary-metric strong { display: block; margin-top: 4px; font-size: clamp(20px, 2vw, 29px); letter-spacing: -.04em; }
.asset-media .asset-primary-metric small { color: var(--muted); font-size: 14px; }
.asset-media .asset-watermark { position: absolute; right: 12px; bottom: -10px; z-index: 0; color: rgba(117,155,184,.055); font-size: 35px; font-weight: 950; direction: ltr; }
.asset-department { display: flex; align-items: center; gap: 6px; margin: 8px 1px; color: var(--muted); font-size: 14px; }
.asset-quick-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 9px 0; }
.asset-tool {
  min-width: 0;
  min-height: 35px;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 14px;
  font-weight: 850;
}
.asset-tool:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 36%, var(--line)); background: var(--primary-soft); }

/* Fleet 6.8.25 — focused identity cards for road assets */
.compact-fleet-card {
  min-height: 188px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 15px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 42%),
    linear-gradient(145deg, var(--surface), var(--surface-2));
}
.compact-fleet-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}
.compact-fleet-card-head .asset-order-tools {
  grid-column: 1 / -1;
  justify-self: end;
}
.compact-fleet-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 14px;
  color: var(--primary);
  background: var(--primary-soft);
}
.compact-fleet-icon.truck { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 31%, var(--line)); background: var(--warning-soft); }
.compact-fleet-icon.trailer { color: #ff7ba8; border-color: color-mix(in srgb, #ff7ba8 31%, var(--line)); background: color-mix(in srgb, #ff7ba8 10%, var(--surface)); }
.compact-fleet-icon.forklift { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 31%, var(--line)); background: var(--violet-soft); }
.compact-fleet-identity { min-width: 0; display: grid; gap: 3px; }
.compact-fleet-identity h3 { margin: 0 0 4px; overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.compact-fleet-identity span { color: var(--muted); font-size: 14px; font-weight: 800; }
.compact-fleet-identity strong { overflow: hidden; color: var(--text-soft); font-size: 14px; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.compact-fleet-card-actions { display: flex; align-items: center; justify-content: flex-start; gap: 7px; }
.open-asset-in-dashboard,
.compact-fleet-edit {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 9px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 76%, var(--surface));
  font-weight: 900;
}
.open-asset-in-dashboard { width: auto; max-width: 100%; min-width: 0; min-height: 42px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 1; }
.open-asset-in-dashboard span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-fleet-edit { width: 35px; min-width: 35px; display: grid; place-items: center; color: var(--muted); border-color: var(--line); background: var(--surface-soft); }
.open-asset-in-dashboard:hover,
.open-asset-in-dashboard:focus-visible { color: #fff; border-color: var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-strong)); outline: none; }
.compact-fleet-edit:hover,
.compact-fleet-edit:focus-visible { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: var(--primary-soft); outline: none; }
.add-asset-tile {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  border: 1px dashed color-mix(in srgb, var(--primary) 48%, var(--line));
  border-radius: var(--radius-lg);
  color: var(--primary);
  background:
    linear-gradient(rgba(44,142,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,142,255,.035) 1px, transparent 1px),
    color-mix(in srgb, var(--primary-soft) 32%, var(--surface));
  background-size: 22px 22px;
}
.add-asset-tile strong { color: var(--text); font-size: 14px; }
.add-asset-tile span { color: var(--muted); font-size: 14px; }
.add-asset-tile:hover { transform: translateY(-2px); border-style: solid; box-shadow: var(--shadow-md); }

.history-actions { justify-content: flex-start; }
.history-actions .history-complete { grid-column: auto; }
.history-actions .icon-plain { width: 34px; height: 34px; }

.asset-editor-modal { width: min(1040px, calc(100% - 28px)); max-height: min(94vh, 900px); }
.asset-editor-modal form { padding: 0; gap: 0; }
.asset-editor-head { padding: 19px 21px 15px; background: linear-gradient(90deg, rgba(44,142,255,.10), transparent 55%); }
.asset-editor-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.asset-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.asset-image-editor {
  padding: 17px;
  display: grid;
  align-content: start;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(75,128,164,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,128,164,.045) 1px, transparent 1px),
    var(--surface-soft);
  background-size: 22px 22px;
}
.asset-image-preview {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 14px;
  color: var(--cyan);
  background: radial-gradient(circle at 50% 45%, rgba(32,201,195,.12), transparent 45%), var(--surface);
}
.asset-image-preview img { width: 100%; height: 220px; object-fit: contain; padding: 14px; filter: drop-shadow(0 20px 20px rgba(0,0,0,.4)); }
.asset-image-preview strong { color: var(--text); font-size: 14px; }
.asset-image-preview small { color: var(--muted); font-size: 14px; }
.image-ready { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; background: rgba(5,18,27,.82); color: var(--success); font-size: 14px; font-weight: 900; }
.image-upload-button { min-height: 42px; display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; justify-content: center; gap: 7px !important; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line)); border-radius: 9px; color: #fff !important; background: linear-gradient(135deg, var(--primary), var(--primary-strong)); cursor: pointer; }
.asset-fields { padding: 18px 20px; display: grid; gap: 11px; }
.form-grid.three-cols { grid-template-columns: 1fr; }
.checkbox-line { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; gap: 8px !important; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.checkbox-line input { width: 17px; min-height: 17px; height: 17px; padding: 0; }
.asset-modal-actions { grid-template-columns: 1fr; padding: 14px 20px 18px; border-top: 1px solid var(--line); background: var(--surface-soft); }

@media (min-width: 720px) {
  .asset-editor-layout { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.65fr); }
  .asset-image-editor { border-bottom: 0; border-left: 1px solid var(--line); }
  .form-grid.three-cols { grid-template-columns: repeat(3, 1fr); }
  .asset-modal-actions { grid-template-columns: .8fr .9fr 1.4fr; }
}

@media (min-width: 1020px) {
  .asset-editor-modal { margin: auto auto auto 24px; }
  .dashboard-intro { flex-direction: row; justify-content: space-between; }
  .dashboard-intro .intro-actions { max-width: 420px; justify-content: flex-start; }
  .dashboard-intro .intro-actions > * { min-width: 180px; }
  .assets-grid, .full-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 719px) {
  .intro-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .intro-actions > * { width: 100%; }
  .priority-row { grid-template-columns: 34px minmax(0,1fr); }
  .priority-due { grid-column: 2; }
  .row-actions-compact { grid-column: 1 / -1; justify-content: flex-end; padding-top: 4px; }
  .asset-card { padding: 13px; }
  .asset-photo { width: 48%; height: 90px; }
  .asset-media { min-height: 120px; }
  .asset-tool span { display: none; }
  .asset-tool { min-height: 38px; }
  .asset-editor-modal { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .asset-image-preview { min-height: 170px; }
  .asset-image-preview img { height: 170px; }
}


/* v5.1 — product quick-add and full dual-metric asset parameters */
.quick-product-action {
  display: none;
  min-height: 36px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--line));
  border-radius: 10px;
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan-soft) 75%, transparent), color-mix(in srgb, var(--primary-soft) 55%, transparent));
  font-size: 14px;
  font-weight: 900;
  box-shadow: var(--shadow-xs);
}
.quick-product-action:hover { border-color: var(--cyan); transform: translateY(-1px); }
.product-action { border-color: color-mix(in srgb, var(--cyan) 34%, var(--line)); }
.page-action-group { display: flex; flex-wrap: wrap; gap: 9px; }
.mobile-product-fab {
  position: fixed;
  z-index: 44;
  left: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  min-height: 48px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #1bc6c0, #1479de);
  box-shadow: 0 18px 42px rgba(10, 91, 155, .42), inset 0 1px 0 rgba(255,255,255,.24);
}
.mobile-product-fab strong { font-size: 14px; font-weight: 950; }
.secondary-metric-panel {
  display: grid;
  gap: 11px;
  margin: 2px 0 4px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan-soft) 42%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent));
}
.secondary-metric-panel.disabled { opacity: .64; }
.secondary-metric-heading strong { display: block; font-size: 14px; }
.secondary-metric-heading small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.asset-secondary-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--line));
  border-radius: 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--cyan-soft) 32%, transparent);
  font-size: 14px;
}
.asset-secondary-summary strong { color: var(--text); font-size: 14px; }
@media (min-width: 1020px) {
  .quick-product-action { display: inline-flex; }
  .mobile-product-fab { display: none; }
}
@media (max-width: 620px) {
  .page-action-group { width: 100%; }
  .page-action-group > * { flex: 1; }
  .secondary-metric-panel { padding: 12px; }
}


/* v5.5 — machine hours, vehicle kilometres and user-defined service intervals */
.asset-image-editor[hidden] { display: none !important; }
.asset-editor-layout.image-disabled { grid-template-columns: minmax(0, 1fr) !important; }
.asset-image-title { display: grid; gap: 3px; margin-bottom: 2px; }
.asset-image-title strong { color: var(--text); font-size: 14px; }
.asset-image-title small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.asset-identifier-line {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-soft);
}
.asset-identifier-line span { font-size: 14px; }
.asset-identifier-line strong { justify-self: end; color: var(--text); font-size: 14px; direction: ltr; }
.asset-identifier-line.trailer-number { color: #ff91b7; border-color: rgba(255,145,183,.28); background: rgba(255,145,183,.07); }
.asset-quick-tools.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asset-quick-tools.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Fleet Control Pro 5.7 — touch/mouse precision drag and persistent asset ordering */
.category-management-panel { display: grid; gap: 14px; }

.fleet-category-intro {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 55%, transparent), color-mix(in srgb, var(--surface-soft) 90%, transparent));
}
.fleet-category-intro h2 { margin: 4px 0; font-size: 17px; color: var(--text); }
.fleet-category-intro p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.asset-category-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.category-overview-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: linear-gradient(155deg, rgba(15,39,58,.95), rgba(9,22,34,.95));
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.category-overview-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.category-overview-card .overview-card-top,
.category-overview-card .overview-card-copy,
.category-overview-card .overview-card-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.category-overview-card .overview-card-copy { align-items: flex-start; flex-direction: column; }
/* These cards stay dark in both themes, so their copy must not inherit the
   dark text tokens used by the surrounding light page. */
.category-overview-card strong { font-size: 14px; color: #edf3f8; }
.category-overview-card small { color: #a9b8c5; font-size: 14px; }
.overview-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 11%, transparent);
}
.overview-badge {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}
.overview-card-stats { flex-wrap: wrap; justify-content: flex-start; }
.overview-card-stats span {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #a9b8c5;
  font-size: 14px;
}
.category-overview-card.blue { color: #64b5ff; }
.category-overview-card.cyan { color: #57e9e1; }
.category-overview-card.amber { color: #ffc668; }
.category-overview-card.green { color: #62e0a1; }
.category-overview-card.violet { color: #b695ff; }
.category-overview-card.rose { color: #ff8fb4; }
.category-overview-card.slate { color: #b9cad8; }
.asset-category-section { position: relative; overflow: hidden; }
.asset-category-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.04), transparent 35%);
  opacity: .55;
}
.asset-category-section.blue { border-color: color-mix(in srgb, #4aa7ff 30%, var(--line)); }
.asset-category-section.cyan { border-color: color-mix(in srgb, #2ce6d6 30%, var(--line)); }
.asset-category-section.amber { border-color: color-mix(in srgb, #ffbf5a 30%, var(--line)); }
.asset-category-section.green { border-color: color-mix(in srgb, #4fdc8a 30%, var(--line)); }
.asset-category-section.violet { border-color: color-mix(in srgb, #a78bfa 30%, var(--line)); }
.asset-category-section.rose { border-color: color-mix(in srgb, #ff7ba8 30%, var(--line)); }
.asset-category-section.slate { border-color: color-mix(in srgb, #93a7b8 24%, var(--line)); }
.asset-category-section.blue .category-icon { color: #62b3ff; border-color: rgba(98,179,255,.35); background: rgba(98,179,255,.11); }
.asset-category-section.cyan .category-icon { color: #53ebe1; border-color: rgba(83,235,225,.35); background: rgba(83,235,225,.11); }
.asset-category-section.amber .category-icon { color: #ffc668; border-color: rgba(255,198,104,.38); background: rgba(255,198,104,.11); }
.asset-category-section.green .category-icon { color: #69e3a8; border-color: rgba(105,227,168,.36); background: rgba(105,227,168,.11); }
.asset-category-section.violet .category-icon { color: #bb9bff; border-color: rgba(187,155,255,.36); background: rgba(187,155,255,.11); }
.asset-category-section.rose .category-icon { color: #ff91b7; border-color: rgba(255,145,183,.36); background: rgba(255,145,183,.11); }
.asset-category-head { position: relative; z-index: 1; }
.category-head-side { display: grid; gap: 8px; justify-items: end; }
.collapse-category-button {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface-soft));
  font-size: 14px;
  font-weight: 900;
}
.collapse-category-button svg { transition: transform .2s ease; }
.asset-category-section.is-collapsed .collapse-category-button svg { transform: rotate(-90deg); }
.category-summary-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.category-summary-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  display: grid;
  gap: 4px;
}
.category-summary-card span { color: var(--muted); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.category-summary-card strong { color: var(--text); font-size: 18px; line-height: 1; }
.category-summary-card small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.category-assets-grid.collapsed { display: none; }
.category-stat-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.category-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.category-stat-pill.green { color: #73e6af; border-color: rgba(115,230,175,.28); background: rgba(115,230,175,.09); }
.category-stat-pill.red { color: #ff8a93; border-color: rgba(255,138,147,.28); background: rgba(255,138,147,.09); }
.category-stat-pill.amber { color: #ffcb77; border-color: rgba(255,203,119,.28); background: rgba(255,203,119,.09); }
.category-stat-pill.neutral { color: var(--text-soft); }
.asset-category-section.category-highlight { box-shadow: 0 0 0 2px rgba(86,190,255,.35), 0 22px 50px rgba(0,0,0,.22); }
@media (max-width: 719px) {
  .asset-category-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-overview-card { padding: 12px; }
  .category-overview-card .overview-card-top { align-items: flex-start; }
  .overview-badge { font-size: 14px; }
  .category-head-side { width: 100%; justify-items: stretch; }
  .category-stat-pills { justify-content: flex-start; }
  .category-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .category-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.category-board-help {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 11px;
  color: var(--primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 60%, transparent), var(--surface-soft));
}
.category-board-help div { display: grid; gap: 2px; }
.category-board-help strong { color: var(--text); font-size: 14px; }
.category-board-help small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.category-board { display: grid; gap: 15px; min-width: 0; }
.asset-category-section {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(38,105,156,.065), transparent 40%),
    var(--surface-soft);
  box-shadow: var(--shadow-xs);
}
.asset-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.category-title-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
.category-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line));
  border-radius: 10px;
  color: var(--cyan);
  background: var(--cyan-soft);
}
.category-title-block > div:last-child { min-width: 0; }
.category-title-block span { display: block; color: var(--muted); font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.category-title-block h2 { margin: 2px 0 1px; color: var(--text); font-size: 15px; line-height: 1.2; }
.category-title-block small { color: var(--muted); font-size: 14px; }
.category-head-actions { display: flex; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.category-assets-grid { min-height: 74px; }
.category-assets-grid.drag-over {
  outline: 2px dashed color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset: 5px;
  border-radius: 12px;
}
.category-empty {
  min-height: 135px;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}
.category-empty strong { color: var(--text-soft); font-size: 14px; }
.category-empty span { font-size: 14px; }
.category-global-add { min-width: 0; }
.category-global-add .add-asset-tile { width: 100%; min-height: 150px; }
.asset-head-actions { display: grid; justify-items: end; gap: 6px; flex: 0 0 auto; }
.asset-order-tools { display: inline-flex; align-items: center; gap: 3px; }
.order-button,
.drag-handle {
  width: 29px;
  height: 29px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-soft);
}
.order-button { cursor: pointer; }
.order-button:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.order-button:disabled { opacity: .35; cursor: not-allowed; }
.drag-handle { cursor: grab; }
.sortable-asset { cursor: grab; }
.sortable-asset:active,
.sortable-asset.is-dragging { cursor: grabbing; }
.sortable-asset.is-dragging { opacity: .5; transform: scale(.985); box-shadow: 0 0 0 2px var(--primary); }
.category-select-field { display: grid; gap: 5px; align-content: end; }
.category-select-field label { min-width: 0; }
.field-link {
  min-height: 28px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 850;
}
.category-dialog { width: min(760px, calc(100% - 24px)); }
.category-dialog .modal-head p { margin: 5px 0 0; max-width: 560px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.category-create-row { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; }
.category-manager-list { display: grid; gap: 7px; max-height: min(52vh, 520px); overflow-y: auto; padding: 1px; }
.category-manager-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.category-manager-order { align-self: center; display: inline-flex; align-items: center; gap: 3px; }
.category-manager-row label { min-width: 0; }
.category-count {
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 14px;
  white-space: nowrap;
}
.modal-actions.single { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .category-create-row { grid-template-columns: minmax(0, 1fr) auto; }
  .category-create-row .primary-action { min-width: 150px; }
}

@media (max-width: 719px) {
  .asset-category-head { align-items: flex-start; flex-direction: column; }
  .category-head-actions { width: 100%; }
  .category-head-actions .secondary-mini { flex: 1; }
  .asset-head-actions { gap: 5px; }
  .category-manager-row { grid-template-columns: 1fr auto auto; align-items: center; }
  .category-manager-order { grid-column: 1 / -1; }
  .category-manager-row label { grid-column: 1 / -1; }
  .category-count { justify-self: start; }
  .category-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
}


/* Fleet-only precision drag ordering — v5.7 */
#assetsFullGrid .drag-handle {
  width: auto;
  min-width: 58px;
  padding: 0 8px;
  gap: 5px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface-soft));
}
#assetsFullGrid .drag-handle span { font-size: 14px; font-weight: 900; white-space: nowrap; }
#assetsFullGrid .drag-handle:active { cursor: grabbing; transform: scale(.97); }
body.asset-drag-active { cursor: grabbing; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
body.asset-drag-active * { cursor: grabbing !important; }
.asset-drag-ghost {
  position: fixed !important;
  inset: auto !important;
  z-index: 10000 !important;
  margin: 0 !important;
  pointer-events: none !important;
  opacity: .93;
  transform: rotate(-1deg) scale(1.025);
  box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 0 2px color-mix(in srgb, var(--primary) 76%, transparent) !important;
  filter: saturate(1.08);
}
.asset-drag-ghost .asset-order-tools,
.asset-drag-ghost .asset-actions,
.asset-drag-ghost .asset-quick-tools { pointer-events: none; }
.asset-drop-placeholder {
  min-width: 0;
  border: 2px dashed color-mix(in srgb, var(--primary) 78%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 82%, transparent), color-mix(in srgb, var(--cyan-soft) 55%, transparent));
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--primary) 12%, transparent);
  animation: asset-drop-pulse 1s ease-in-out infinite alternate;
}
#assetsFullGrid .asset-card.drop-before::before,
#assetsFullGrid .asset-card.drop-after::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  z-index: 5;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 70%, transparent);
}
#assetsFullGrid .asset-card.drop-before::before { top: -7px; }
#assetsFullGrid .asset-card.drop-after::after { bottom: -7px; }
@keyframes asset-drop-pulse { from { opacity: .62; } to { opacity: 1; } }
@media (max-width: 719px) {
  #assetsFullGrid .asset-order-tools { width: 100%; justify-content: flex-end; }
  #assetsFullGrid .drag-handle { min-width: 76px; min-height: 34px; }
  #assetsFullGrid .drag-handle span { font-size: 14px; }
  .asset-drag-ghost { max-height: 68vh; overflow: hidden; }
}


/* Fleet Control Pro 5.7.1 — compact, aligned drag toolbar (fleet screen only) */
#assetsFullGrid .asset-order-tools {
  width: auto;
  display: inline-grid;
  grid-template-columns: 34px minmax(70px, auto) 34px;
  align-items: center;
  justify-content: end;
  gap: 4px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#assetsFullGrid .asset-order-tools .order-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
}
#assetsFullGrid .asset-order-tools .order-button:hover:not(:disabled),
#assetsFullGrid .asset-order-tools .order-button:focus-visible {
  color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}
#assetsFullGrid .drag-handle {
  width: auto;
  min-width: 70px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  border-radius: 9px;
  color: #72b6ff;
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-soft) 94%, var(--surface-2)),
    color-mix(in srgb, var(--primary-soft) 68%, var(--surface-soft))
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
#assetsFullGrid .drag-handle svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
#assetsFullGrid .drag-handle span {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}
#assetsFullGrid .drag-handle:hover,
#assetsFullGrid .drag-handle:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 86%, var(--surface-2));
  outline: 2px solid color-mix(in srgb, var(--primary) 24%, transparent);
  outline-offset: 1px;
}
@media (max-width: 719px) {
  #assetsFullGrid .asset-head-actions {
    width: auto;
    min-width: 0;
  }
  #assetsFullGrid .asset-order-tools {
    width: auto;
    grid-template-columns: 36px minmax(72px, auto) 36px;
    gap: 4px;
  }
  #assetsFullGrid .asset-order-tools .order-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  #assetsFullGrid .drag-handle {
    min-width: 72px;
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
  }
  #assetsFullGrid .drag-handle span { font-size: 14px; }
}


/* Fleet Control Pro 5.7.2 — stable GPU drag, smooth FLIP reordering (fleet screen only) */
body.asset-drag-pending,
body.asset-drag-active {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#assetsFullGrid .drag-handle.is-pressed {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 90%, var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
  transform: scale(.985);
}
body.asset-drag-active #assetsFullGrid .asset-card:hover {
  transform: none;
}
.asset-drag-ghost {
  left: 0 !important;
  top: 0 !important;
  opacity: .96;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  contain: layout paint style;
  transition: none !important;
  animation: none !important;
  filter: saturate(1.04);
  box-shadow: 0 24px 58px rgba(0,0,0,.48), 0 0 0 1.5px color-mix(in srgb, var(--primary) 72%, transparent) !important;
}
.asset-drag-ghost *,
.asset-drag-ghost *::before,
.asset-drag-ghost *::after {
  animation: none !important;
  transition: none !important;
}
#assetsFullGrid .asset-card.asset-drop-placeholder {
  pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 72%, var(--line));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-soft) 58%, var(--surface)),
    color-mix(in srgb, var(--cyan-soft) 35%, var(--surface))
  );
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--primary) 8%, transparent);
  transform: none !important;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}
#assetsFullGrid .asset-card.asset-drop-placeholder > * {
  opacity: 0 !important;
  visibility: hidden !important;
}
#assetsFullGrid .category-assets-grid.drag-over {
  outline-color: color-mix(in srgb, var(--primary) 56%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 7%, transparent);
  transition: background .16s ease, outline-color .16s ease;
}
#assetsFullGrid .asset-card.drop-before::before,
#assetsFullGrid .asset-card.drop-after::after {
  height: 2px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 56%, transparent);
}
#assetsFullGrid .asset-card.asset-drop-settling {
  animation: asset-drop-settle .22s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes asset-drop-settle {
  0% { opacity: .72; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #assetsFullGrid .asset-card.asset-drop-settling { animation: none; }
}
#assetsFullGrid .asset-card.asset-drop-placeholder {
  animation: none !important;
}

/* Fleet Control Pro 6.0 — productivity and recovery suite */
.operations-intro { margin-bottom: 18px; }
.desktop-export-shortcut { display: none; }
.operations-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.ops-kpi { display:flex; align-items:center; gap:14px; min-height:118px; padding:18px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,rgba(18,39,57,.96),rgba(8,25,39,.96)); box-shadow:var(--shadow-sm); }
.ops-kpi>span { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; color:var(--accent); border:1px solid rgba(39,146,255,.28); border-radius:14px; background:rgba(20,116,255,.11); }
.ops-kpi div { display:grid; gap:3px; min-width:0; }.ops-kpi small{color:var(--muted);font-size: .875rem}.ops-kpi strong{font-size: 1.55rem;white-space:nowrap}.ops-kpi b{font-size: .875rem;color:var(--text-soft)}
.operations-tabs { position:sticky; top:74px; z-index:20; display:flex; gap:8px; overflow-x:auto; padding:9px; margin-bottom:14px; border:1px solid var(--border); border-radius:16px; background:rgba(7,20,32,.94); backdrop-filter:blur(18px); scrollbar-width:none; }
.operations-tabs::-webkit-scrollbar{display:none}.operations-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 14px;white-space:nowrap;border:1px solid transparent;border-radius:11px;color:var(--text-soft);background:transparent;font:inherit;font-weight:700;cursor:pointer}.operations-tab.active{color:#fff;border-color:rgba(46,151,255,.45);background:linear-gradient(135deg,rgba(28,112,232,.34),rgba(13,65,126,.34));box-shadow:inset 0 0 18px rgba(36,132,255,.08)}
.operations-panel{display:none}.operations-panel.active{display:block;animation:opsPanelIn .2s ease both}@keyframes opsPanelIn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.primary-action.compact{min-height:40px;padding:0 14px}
.work-orders-list,.data-list,.activity-timeline{display:grid;gap:10px}.work-order-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:17px;border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:15px;background:rgba(8,24,37,.72)}.work-order-card.high{border-inline-start-color:#ffae35}.work-order-card.critical{border-inline-start-color:#ff5264}.work-order-title{display:flex;align-items:center;gap:9px}.work-order-title h3{margin:0;font-size: 1rem}.work-order-main p{margin:8px 0;color:var(--text-soft)}.work-order-meta{display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);font-size: .875rem}.work-order-meta span{display:inline-flex;gap:5px;align-items:center}.work-order-side{display:grid;align-content:start;justify-items:end;gap:10px;min-width:145px}.work-order-side>strong{font-size: 1.05rem}.priority-chip,.status-chip{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 9px;border-radius:999px;font-size: .875rem;font-weight:800}.priority-chip.normal{color:#7ec9ff;background:rgba(40,139,255,.12)}.priority-chip.high{color:#ffbd57;background:rgba(255,165,33,.13)}.priority-chip.critical{color:#ff7280;background:rgba(255,61,81,.14)}.priority-chip.low{color:#9daec0;background:rgba(150,170,190,.12)}.status-chip.pending{color:#ffbd57;background:rgba(255,165,33,.12)}.status-chip.in_progress{color:#5fc5ff;background:rgba(37,153,255,.14)}.status-chip.completed{color:#36dfa0;background:rgba(23,201,135,.12)}.status-chip.cancelled{color:#a6b2c0;background:rgba(150,170,190,.1)}
.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.row-actions button,.restore-backup{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 10px;border:1px solid var(--border);border-radius:9px;color:var(--text);background:rgba(10,30,44,.7);font:inherit;font-size: .875rem;font-weight:700;cursor:pointer}.danger-text{color:#ff7180!important}
.parts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.part-card{display:grid;gap:14px;padding:16px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(12,31,46,.94),rgba(7,22,34,.94))}.part-card.low-stock{border-color:rgba(255,174,53,.45);box-shadow:inset 0 3px 0 rgba(255,174,53,.65)}.part-head{display:flex;align-items:center;gap:10px}.part-head>span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#31d6c5;background:rgba(25,203,185,.1)}.part-head div{min-width:0;flex:1}.part-head h3{margin:0}.part-head small{color:var(--muted)}.part-head>b{color:#ffbd57;font-size: .875rem}.part-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.part-metrics div{padding:9px;border:1px solid rgba(124,162,192,.13);border-radius:10px;background:rgba(2,15,25,.35)}.part-metrics small{display:block;color:var(--muted);font-size: .875rem}.part-metrics strong{display:block;margin-top:4px;font-size: .875rem}
.data-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:rgba(8,25,38,.68)}.data-row-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#45b7ff;background:rgba(39,146,255,.11)}.data-row-icon.recycle{color:#ff7180;background:rgba(255,70,88,.11)}.data-row-main h3{margin:0 0 3px;font-size: .94rem}.data-row-main p{margin:0;color:var(--muted);font-size: .875rem}.data-row-side{display:flex;align-items:center;gap:11px;justify-content:flex-end}.data-row-side>span{color:var(--muted);font-size: .875rem}.data-row-side>strong{white-space:nowrap}
.activity-timeline{position:relative}.activity-item{display:grid;grid-template-columns:14px minmax(0,1fr);gap:11px;padding:11px 3px}.activity-item:not(:last-child){border-bottom:1px solid rgba(120,160,190,.12)}.activity-dot{width:9px;height:9px;margin-top:7px;border-radius:50%;background:#2f9dff;box-shadow:0 0 0 5px rgba(47,157,255,.08)}.activity-item>div>div{display:flex;gap:7px;align-items:center}.activity-item b{color:#6fbaff;font-size: .875rem}.activity-item h3{margin:4px 0;font-size: .88rem}.activity-item small{color:var(--muted)}
.backup-notice{margin-bottom:12px;padding:12px 14px;border:1px solid rgba(50,181,159,.25);border-radius:12px;color:var(--text-soft);background:rgba(28,158,136,.07)}
.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.export-grid a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;min-height:92px;padding:16px;border:1px solid var(--border);border-radius:15px;color:var(--text);text-decoration:none;background:rgba(8,25,38,.65);transition:.18s ease}.export-grid a:hover{transform:translateY(-2px);border-color:rgba(47,157,255,.45)}.export-grid a>svg{grid-row:1/3;color:#43b5ff}.export-grid strong{font-size: .93rem}.export-grid small{color:var(--muted)}.export-grid .export-all{grid-column:1/-1;min-height:104px;border-color:rgba(50,181,159,.32);background:linear-gradient(135deg,rgba(38,155,136,.16),rgba(31,111,178,.12))}.export-grid .export-all>svg{color:#4dd8ba}.export-grid .export-all strong{font-size: 1rem}.backup-notice strong{color:var(--text)}
.vehicle-excel-export{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);gap:18px;margin-bottom:18px;padding:20px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),color-mix(in srgb,var(--cyan) 5%,var(--surface)));box-shadow:var(--shadow-sm)}
.vehicle-excel-export-head{display:flex;align-items:center;gap:14px;min-width:0}.vehicle-excel-export-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));border-radius:17px;color:var(--primary);background:var(--primary-soft)}.vehicle-excel-export-icon .ui-icon{width:25px;height:25px}.vehicle-excel-export-head h3{margin:0 0 5px;font-size:19px;color:var(--text)}.vehicle-excel-export-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.vehicle-excel-kind-picker{display:grid;align-content:center;gap:9px;min-width:0}.vehicle-excel-kind-picker>strong{font-size:14px;color:var(--text-soft)}.vehicle-excel-kind-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:thin}.vehicle-excel-kind-chip{flex:0 0 auto;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--text-soft);background:color-mix(in srgb,var(--surface-2) 94%,transparent);font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.vehicle-excel-kind-chip:hover{border-color:color-mix(in srgb,var(--primary) 38%,var(--line));color:var(--primary)}.vehicle-excel-kind-chip.active{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-strong));box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 22%,transparent)}
.vehicle-excel-download{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:78px;padding:14px 17px;border:1px solid color-mix(in srgb,var(--success) 24%,var(--line));border-radius:17px;color:var(--text);text-decoration:none;background:color-mix(in srgb,var(--success) 8%,var(--surface));transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.vehicle-excel-download:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--success) 44%,var(--line));box-shadow:0 12px 26px color-mix(in srgb,var(--success) 12%,transparent)}.vehicle-excel-download-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--success);background:color-mix(in srgb,var(--success) 13%,var(--surface))}.vehicle-excel-download>span:last-child{display:grid;gap:3px}.vehicle-excel-download strong{font-size:16px}.vehicle-excel-download small{color:var(--muted);font-size:14px}
@media(max-width:760px){.vehicle-excel-export{grid-template-columns:1fr;padding:16px;gap:15px}.vehicle-excel-kind-chips{margin-inline-end:-4px}.vehicle-excel-download{grid-column:1;min-height:74px}.vehicle-excel-export-head h3{font-size:18px}}
.qr-modal{max-width:440px}.qr-preview{display:grid;justify-items:center;gap:12px;padding:16px}.qr-preview img{width:min(280px,80vw);height:auto;padding:10px;border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.35)}.qr-preview p{margin:0;color:var(--text-soft);text-align:center}.asset-quick-tools.four{grid-template-columns:repeat(4,1fr)}
.toast{display:flex;align-items:center;gap:12px}.toast>span{flex:1}.toast>button{border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:7px 10px;color:#fff;background:rgba(255,255,255,.12);font:inherit;font-weight:800;cursor:pointer}

@media(max-width:1200px){.operations-kpi-grid{grid-template-columns:repeat(2,1fr)}.parts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .bottom-nav{grid-template-columns:repeat(6,1fr)}.bottom-link{min-width:0;padding-inline:4px}.bottom-link small{font-size: .875rem}
  .operations-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ops-kpi{min-height:96px;padding:12px;gap:9px}.ops-kpi>span{width:39px;height:39px;flex-basis:39px}.ops-kpi strong{font-size: 1.05rem}.operations-tabs{top:82px;margin-inline:-2px;padding:7px}.operations-tab{min-height:38px;padding:0 11px;font-size: .875rem}
  .work-order-card{grid-template-columns:1fr}.work-order-side{grid-template-columns:auto 1fr;align-items:center;justify-items:start;min-width:0}.work-order-side .row-actions{grid-column:1/-1}.parts-grid,.export-grid{grid-template-columns:1fr}.data-row{grid-template-columns:auto minmax(0,1fr)}.data-row-side{grid-column:1/-1;justify-content:space-between;padding-inline-start:54px}.part-metrics{gap:5px}.asset-quick-tools.four{grid-template-columns:repeat(2,1fr)}
}

/* Fleet Control Pro 6.0 — activity detail and recovery actions */
.activity-details {
  margin: .35rem 0 .15rem;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.55;
  unicode-bidi: plaintext;
}
.panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
}
.panel-actions .secondary-action,
.panel-actions .primary-action {
  min-height: 2.5rem;
}
@media (max-width: 620px) {
  .panel-actions { width: 100%; }
  .panel-actions > * { flex: 1; justify-content: center; }
}

/* Fleet Control Pro 6.1 — local barcode inventory scanner */
.panel-subtitle{margin:5px 0 0;color:var(--muted);font-size: .875rem}.inventory-flow-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}.flow-card{display:flex;align-items:center;gap:11px;min-height:88px;padding:13px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,rgba(12,31,46,.96),rgba(6,20,32,.96));overflow:hidden}.flow-card>span{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;color:#7fc3ff;background:rgba(46,151,255,.1)}.flow-card.in>span,.flow-card.positive>span{color:#4be0bc;background:rgba(36,205,168,.1)}.flow-card.out>span,.flow-card.negative>span{color:#ffad62;background:rgba(255,133,61,.1)}.flow-card div{min-width:0}.flow-card small,.flow-card b{display:block;color:var(--muted);font-size: .875rem}.flow-card strong{display:block;margin:4px 0 3px;color:var(--text);font-size: .98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-card b{font-weight:600}.barcode-chip{display:inline-flex;direction:ltr;margin-top:7px;padding:4px 7px;border:1px solid rgba(64,191,255,.24);border-radius:7px;color:#8ad9ff;background:rgba(21,104,155,.12);font:600 .66rem/1.1 ui-monospace,SFMono-Regular,Consolas,monospace}.part-card.scan-highlight{animation:barcodeCardHighlight 1.8s ease both}@keyframes barcodeCardHighlight{0%,100%{box-shadow:none}20%,70%{border-color:rgba(44,211,193,.85);box-shadow:0 0 0 3px rgba(44,211,193,.13),0 0 30px rgba(44,211,193,.12)}}.inventory-movements-section{margin-top:22px;padding-top:18px;border-top:1px solid rgba(124,162,192,.14)}.compact-head{margin-bottom:10px}.inventory-movement.stock-in .data-row-icon{color:#40d8b7;background:rgba(37,207,170,.1)}.inventory-movement.stock-out .data-row-icon{color:#ff9d59;background:rgba(255,126,53,.1)}.inventory-movement.stock-adjust .data-row-icon{color:#78bfff;background:rgba(50,147,255,.1)}
.barcode-field-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}.barcode-field-row>label{margin:0}.stock-part-snapshot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;margin-bottom:12px;border:1px solid rgba(56,174,255,.2);border-radius:13px;background:rgba(16,70,105,.1)}.stock-part-snapshot>span{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#45d7c5;background:rgba(28,197,177,.1)}.stock-part-snapshot strong,.stock-part-snapshot small{display:block}.stock-part-snapshot small{margin-top:4px;color:var(--muted);font-size: .875rem}.stock-part-snapshot>b{color:#8dd9ff;font-size: .875rem;white-space:nowrap}
.barcode-scanner-modal{width:min(620px,calc(100vw - 24px))}.barcode-scanner-modal form{max-height:min(92vh,820px);overflow:auto}.scanner-mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;margin-bottom:12px;border:1px solid var(--border);border-radius:13px;background:rgba(2,15,25,.45)}.scanner-mode{min-height:40px;border:0;border-radius:9px;color:var(--muted);background:transparent;font:inherit;font-weight:750;cursor:pointer}.scanner-mode.active{color:#fff;background:linear-gradient(135deg,rgba(30,126,241,.68),rgba(19,85,168,.68));box-shadow:0 5px 16px rgba(0,72,170,.18)}.scanner-stage{position:relative;isolation:isolate;aspect-ratio:4/3;max-height:430px;overflow:hidden;border:1px solid rgba(70,176,255,.26);border-radius:17px;background:radial-gradient(circle at 50% 45%,rgba(20,79,115,.45),rgba(2,12,20,.98) 65%)}.scanner-stage video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}.scanner-stage video.ready{opacity:1}.scanner-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.36),transparent 20%,transparent 80%,rgba(0,0,0,.4))}.scanner-reticle{position:absolute;z-index:4;inset:22% 9%;pointer-events:none}.scanner-reticle span{position:absolute;width:38px;height:38px;border-color:#42e0cc;border-style:solid;filter:drop-shadow(0 0 7px rgba(46,230,207,.5))}.scanner-reticle span:nth-child(1){top:0;right:0;border-width:3px 3px 0 0;border-radius:0 9px 0 0}.scanner-reticle span:nth-child(2){top:0;left:0;border-width:3px 0 0 3px;border-radius:9px 0 0 0}.scanner-reticle span:nth-child(3){bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 9px 0}.scanner-reticle span:nth-child(4){bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 9px}.scanner-reticle i{position:absolute;left:5%;right:5%;top:12%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#59f2df 16%,#59f2df 84%,transparent);box-shadow:0 0 14px #45ead6;animation:scannerLine 2.2s ease-in-out infinite}@keyframes scannerLine{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(calc(56vw * .45));opacity:1}}.scanner-camera-message{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:25px;text-align:center;color:var(--text)}.scanner-camera-message[hidden]{display:none}.scanner-camera-message>span{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;color:#56dece;background:rgba(38,204,183,.12)}.scanner-camera-message small{max-width:360px;color:var(--muted)}.scanner-status{margin:10px 0;padding:9px 12px;border:1px solid rgba(78,170,232,.16);border-radius:10px;color:var(--muted);background:rgba(4,20,31,.45);font-size: .875rem;text-align:center}.scanner-status.success{color:#62e3c8;border-color:rgba(48,218,181,.26)}.scanner-status.warning{color:#ffc66f;border-color:rgba(255,183,68,.25)}.scanner-status.error{color:#ff8585;border-color:rgba(255,90,90,.28)}.scanner-manual{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px}.scanner-manual label{margin:0}.scanner-manual input{direction:ltr;text-align:left;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.scanner-help{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border:1px solid rgba(121,163,193,.13);border-radius:11px;color:var(--muted);background:rgba(4,19,29,.35);font-size: .875rem}.scanner-help>span{color:#62b5ef;flex:0 0 auto}.scanner-help p{margin:0}.scanner-help bdi{color:#9bdcff}.barcode-scanner-modal #toggleScannerTorch.active{color:#ffe282;border-color:rgba(255,215,75,.5);background:rgba(255,202,45,.12)}
@media(max-width:1200px){.inventory-flow-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.inventory-flow-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.flow-card{min-height:82px;padding:10px;gap:8px}.flow-card>span{width:34px;height:34px;flex-basis:34px}.flow-card strong{font-size: .875rem}.flow-card small,.flow-card b{font-size: .875rem}.barcode-field-row,.scanner-manual{grid-template-columns:1fr}.barcode-field-row button,.scanner-manual button{width:100%}.stock-part-snapshot{grid-template-columns:auto 1fr}.stock-part-snapshot>b{grid-column:1/-1;padding-inline-start:51px}.scanner-stage{aspect-ratio:3/4;max-height:54vh}.scanner-reticle{inset:18% 7%}@keyframes scannerLine{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(42vh);opacity:1}}}
@media(prefers-reduced-motion:reduce){.scanner-reticle i{animation:none}.part-card.scan-highlight{animation:none;border-color:rgba(44,211,193,.85)}}
.stock-purchase-fields{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:10px;padding:11px;margin-top:10px;border:1px solid rgba(65,190,171,.18);border-radius:12px;background:rgba(26,126,111,.07)}.stock-purchase-fields[hidden]{display:none}.stock-purchase-fields .check-line{align-self:center;min-height:44px;margin:0}.is-readonly input{opacity:.72;cursor:not-allowed}.is-readonly span::after{content:' · לפי עלות המלאי';color:var(--muted);font-size: .875rem}
@media(max-width:620px){.stock-purchase-fields{grid-template-columns:1fr}}

/* Authentication and role management — v6.2 */
body.auth-locked { overflow: hidden; }
body.auth-locked .app-shell { filter: blur(8px) saturate(.55); pointer-events: none; user-select: none; }
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background:
    linear-gradient(rgba(37, 79, 112, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 79, 112, .07) 1px, transparent 1px),
    radial-gradient(circle at 76% 15%, rgba(44,142,255,.18), transparent 30%),
    radial-gradient(circle at 12% 84%, rgba(32,201,195,.10), transparent 28%),
    rgba(3, 9, 15, .96);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}
.auth-ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.auth-ambient span { position: absolute; border: 1px solid rgba(44,142,255,.16); border-radius: 50%; box-shadow: 0 0 80px rgba(44,142,255,.08); }
.auth-ambient span:nth-child(1) { width: 360px; height: 360px; top: -180px; right: -100px; }
.auth-ambient span:nth-child(2) { width: 260px; height: 260px; bottom: -130px; left: -80px; border-color: rgba(32,201,195,.15); }
.auth-ambient span:nth-child(3) { width: 130px; height: 130px; top: 24%; left: 12%; }
.auth-card {
  position: relative;
  width: min(100%, 520px);
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(111, 157, 190, .22);
  background: linear-gradient(160deg, rgba(17,31,44,.98), rgba(8,19,30,.98));
  box-shadow: 0 40px 120px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(44,142,255,.08), transparent 42%); }
.auth-brand { position: relative; display: flex; align-items: center; gap: 15px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.auth-symbol { width: 54px; height: 54px; border-radius: 16px; font-size: 23px; }
.auth-brand small { color: var(--primary); font-size: 14px; letter-spacing: .18em; font-weight: 900; }
.auth-brand h1 { margin: 3px 0 2px; font-size: 22px; }
.auth-brand p { margin: 0; color: var(--muted); font-size: 14px; }
.auth-panel { position: relative; padding-top: 24px; }
.auth-heading h2 { margin: 5px 0 7px; font-size: 22px; }
.auth-heading p { margin: 0 0 20px; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; }
.auth-form label > span { color: var(--text-soft); font-size: 14px; font-weight: 800; }
.auth-form input { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: rgba(4,12,20,.72); outline: none; }
.auth-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.auth-form small { color: var(--muted); font-size: 14px; }
.auth-form label > .auth-password-shell { position: relative; display: block; color: inherit; font-size: inherit; font-weight: inherit; }
.auth-password-shell input { padding-right: 54px; }
.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.password-visibility-toggle:hover,
.password-visibility-toggle[aria-pressed="true"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 26%, transparent); background: var(--primary-soft); }
.password-visibility-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.auth-submit { width: 100%; justify-content: center; min-height: 49px; margin-top: 4px; }
.auth-message { position: relative; margin-top: 15px; padding: 11px 13px; border: 1px solid rgba(255,87,95,.25); border-radius: 11px; color: #ffd5d8; background: var(--danger-soft); font-size: 14px; font-weight: 700; }
.auth-message.success { color: #c7ffe8; border-color: rgba(41,211,145,.24); background: var(--success-soft); }
.auth-footer { position: relative; display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.auth-footer span { display: flex; align-items: center; gap: 7px; }
.auth-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); }

.user-menu-wrap { position: relative; }
.user-menu-button { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 9px 5px 6px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface-2); }
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); }
.user-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #36a1ff, #155fc2); font-weight: 950; font-size: 14px; box-shadow: 0 7px 18px rgba(21,95,194,.28); }
.user-avatar.large { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.user-button-copy { min-width: 74px; text-align: right; }
.user-button-copy strong, .user-button-copy small { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-button-copy strong { font-size: 14px; }
.user-button-copy small { margin-top: 2px; color: var(--muted); font-size: 14px; }
.user-menu-button > .ui-icon { width: 14px; color: var(--muted); transform: rotate(90deg); }
.user-menu { position: absolute; top: calc(100% + 9px); left: 0; z-index: 120; width: 245px; padding: 9px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
.user-menu-profile { display: flex; gap: 10px; align-items: center; padding: 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.user-menu-profile strong, .user-menu-profile small { display: block; }
.user-menu-profile strong { font-size: 14px; }
.user-menu-profile small { margin-top: 3px; color: var(--muted); font-size: 14px; }
.user-menu > button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; color: var(--text-soft); background: transparent; text-align: right; font-size: 14px; font-weight: 750; }
.user-menu > button:hover { color: var(--text); background: var(--surface-3); }
.user-menu > button.danger-text { color: var(--danger); }

.access-management-panel { min-height: 520px; }
.access-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.access-summary-card { display: flex; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); }
.access-summary-card > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.access-summary-card small, .access-summary-card strong { display: block; }
.access-summary-card small { color: var(--muted); font-size: 14px; }
.access-summary-card strong { margin-top: 3px; font-size: 21px; }
.access-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 18px; }
.access-layout > section { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.access-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.access-section-head h3 { margin: 4px 0 0; font-size: 16px; }
.users-list, .roles-list { display: grid; gap: 10px; }
.user-row, .role-card { display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.user-row { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
.user-row.inactive { opacity: .62; }
.user-row-main h4, .role-card h4 { margin: 0; font-size: 14px; }
.user-row-main p, .role-card p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.user-row-side { display: grid; justify-items: end; gap: 6px; }
.role-badge, .hierarchy-badge, .account-status { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 4px 8px; border-radius: 999px; font-size: 14px; font-weight: 850; }
.role-badge { color: #cce7ff; background: var(--primary-soft); border: 1px solid rgba(44,142,255,.18); }
.account-status.active { color: #bff8df; background: var(--success-soft); }
.account-status.inactive { color: #ffd0d3; background: var(--danger-soft); }
.user-actions, .role-actions { display: flex; gap: 5px; }
.user-actions button, .role-actions button { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--text-soft); background: var(--surface-2); }
.user-actions button:hover, .role-actions button:hover { color: var(--text); border-color: var(--primary); }
.role-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.hierarchy-badge { color: var(--cyan); background: var(--cyan-soft); }
.permission-preview { display: flex; flex-wrap: wrap; gap: 5px; }
.permission-preview span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface-2); font-size: 14px; }
.permission-preview span.full-access { color: #c7ffe8; border-color: rgba(41,211,145,.25); background: var(--success-soft); }
.permission-groups { display: grid; gap: 12px; max-height: 46vh; overflow: auto; padding: 3px; }
.permission-group { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.permission-group header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.permission-group h4 { margin: 0; font-size: 14px; }
.permission-group button { border: 0; color: var(--primary); background: transparent; font-size: 14px; font-weight: 800; }
.permission-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.permission-option { display: flex !important; align-items: flex-start; gap: 8px !important; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: var(--surface); cursor: pointer; }
.permission-option:has(input:checked) { border-color: rgba(44,142,255,.28); background: var(--primary-soft); }
.permission-option input { margin-top: 2px; accent-color: var(--primary); }
.permission-option strong, .permission-option small { display: block; }
.permission-option strong { font-size: 14px; }
.permission-option small { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.access-modal { width: min(92vw, 650px); }
.role-editor-modal { width: min(94vw, 820px); }
.password-required-note { margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(245,165,36,.25); border-radius: 10px; color: #ffe0a8; background: var(--warning-soft); font-size: 14px; }
[data-permission-hidden="true"] { display: none !important; }

@media (max-width: 900px) {
  .user-button-copy { display: none; }
  .user-menu-button { padding: 5px; }
  .user-menu-button > .ui-icon { display: none; }
  .user-menu { position: fixed; top: 67px; left: 10px; right: 10px; width: auto; }
  .access-summary-grid { grid-template-columns: 1fr; }
  .access-layout { grid-template-columns: 1fr; }
  .permission-options { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .auth-gate { padding: 10px; align-items: start; }
  .auth-card { margin-top: 12px; padding: 20px 16px; border-radius: 19px; }
  .auth-brand { align-items: flex-start; }
  .auth-brand h1 { font-size: 19px; }
  .auth-heading h2 { font-size: 19px; }
  .auth-footer { display: grid; }
  .user-row { grid-template-columns: auto minmax(0,1fr); }
  .user-row-side { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; width: 100%; }
}

/* Fleet Control Pro 6.3 — professional role permission editor */
.role-editor-modal {
  width: min(96vw, 980px);
  max-height: min(94vh, 920px);
  overflow: hidden;
  padding: 0;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background:
    radial-gradient(circle at 88% 0%, rgba(44,142,255,.11), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb, var(--surface) 94%, #061423), var(--surface));
}
.role-editor-modal .role-editor-form {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 0;
  max-height: inherit;
  padding: 0;
  overflow: hidden;
}
.role-editor-content {
  display: grid;
  gap: 15px;
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.role-editor-head { position: relative; padding-bottom: 16px; }
.role-editor-head p { max-width: 720px; margin: 6px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.role-profile-panel,
.role-permission-toolbar {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.role-profile-panel { padding: 15px; }
.role-profile-grid { align-items: start; }
.role-profile-grid label > span,
.role-toolbar-fields label > span { color: var(--text-soft); font-size: 14px; font-weight: 900; }
.role-profile-grid input { min-height: 46px; font-size: 14px; }
.role-profile-grid small { margin-top: 1px; color: var(--muted); font-size: 14px; font-weight: 650; }

.role-permission-toolbar { display: grid; gap: 12px; padding: 14px; }
.role-toolbar-fields { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(220px,.6fr); gap: 10px; }
.permission-search-field,
.permission-template-field { display: grid; gap: 7px; }
.permission-control-shell { position: relative; display: flex; align-items: center; }
.permission-control-shell > .ui-icon { position: absolute; right: 12px; z-index: 2; width: 16px; color: var(--muted); pointer-events: none; }
.permission-control-shell input { min-height: 43px; padding-right: 38px; padding-left: 38px; }
.permission-control-shell button {
  position: absolute;
  left: 7px;
  z-index: 2;
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
}
.permission-control-shell button:hover { color: var(--text); background: var(--surface-3); }
.permission-template-field select { min-height: 43px; }
.permission-toolbar-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 14px;
  font-weight: 850;
}
.permission-tool-button .ui-icon { width: 14px; }
.permission-tool-button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); background: var(--primary-soft); }
.permission-toolbar-summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.permission-toolbar-summary strong { color: var(--text); font-size: 14px; }
.permission-toolbar-summary span { color: var(--muted); font-size: 14px; }

.role-editor-modal .permission-groups {
  display: grid;
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding: 0;
}
.role-editor-modal .permission-group {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 84%, transparent));
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.role-editor-modal .permission-group[data-selection="all"] { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow: inset 3px 0 0 var(--primary); }
.role-editor-modal .permission-group[data-selection="partial"] { border-color: color-mix(in srgb, var(--cyan) 28%, var(--line)); }
.permission-group-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  margin: 0 !important;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 62%, transparent);
}
.permission-group-toggle {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) auto 20px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  color: var(--text) !important;
  background: transparent !important;
  text-align: right;
}
.permission-group-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(44,142,255,.22);
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-soft);
}
.permission-group-icon .ui-icon { width: 18px; }
.permission-group-heading { display: grid; gap: 3px; min-width: 0; }
.permission-group-heading strong { color: var(--text); font-size: 14px; }
.permission-group-heading small { overflow: hidden; color: var(--muted); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.permission-group-count {
  min-width: 42px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.permission-group-chevron { display: grid; place-items: center; color: var(--muted); transition: transform .18s ease; }
.permission-group-chevron .ui-icon { width: 15px; transform: rotate(90deg); }
.permission-group[data-collapsed="true"] .permission-group-chevron { transform: rotate(180deg); }
.permission-group-actions { display: flex; align-items: center; gap: 5px; }
.role-editor-modal .permission-group-actions button {
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  background: var(--surface);
  font-size: 14px;
  font-weight: 900;
}
.role-editor-modal .permission-group-actions button:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: var(--primary-soft); }

.role-editor-modal .permission-options { display: grid; grid-template-columns: 1fr; gap: 0; padding: 8px; }
.permission-group[data-collapsed="true"] .permission-options { display: none; }
.role-editor-modal .permission-option {
  position: relative;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 11px !important;
  align-items: center;
  min-height: 68px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.role-editor-modal .permission-option + .permission-option { margin-top: 4px; }
.role-editor-modal .permission-option:hover { border-color: var(--line); background: var(--surface-soft); }
.role-editor-modal .permission-option:has(input:checked) { border-color: rgba(44,142,255,.24); background: linear-gradient(90deg, rgba(44,142,255,.09), rgba(44,142,255,.025)); }
.permission-toggle { position: relative; display: grid; place-items: center; width: 36px; height: 36px; }
.permission-toggle input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.permission-checkmark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--muted) 58%, var(--line));
  border-radius: 8px;
  color: transparent;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.permission-checkmark .ui-icon { width: 15px; }
.permission-toggle input:checked + .permission-checkmark {
  color: #fff;
  border-color: #3c9cff;
  background: linear-gradient(145deg, #3aa2ff, #176fd6);
  box-shadow: 0 0 0 3px rgba(44,142,255,.12), 0 7px 18px rgba(23,111,214,.25);
}
.permission-toggle input:focus-visible + .permission-checkmark { outline: 2px solid var(--primary); outline-offset: 3px; }
.permission-option-copy {
  display: grid;
  grid-template-columns: minmax(170px,.72fr) minmax(0,1.28fr);
  grid-template-areas: "title description" "code description";
  column-gap: 20px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}
.permission-option-copy strong { grid-area: title; color: var(--text); font-size: 14px; line-height: 1.4; }
.permission-option-copy > span { grid-area: description; color: var(--text-soft); font-size: 14px; line-height: 1.55; }
.permission-option-copy small { grid-area: code; width: max-content; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; font-weight: 650; letter-spacing: .01em; }
.permission-option[hidden], .permission-group[hidden] { display: none !important; }

.role-editor-footer {
  position: relative;
  z-index: 4;
  grid-template-columns: .75fr 1fr 1.35fr;
  gap: 9px;
  margin: 0;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 -18px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.role-editor-footer > button { min-height: 43px; justify-content: center; }
.role-clone-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.role-clone-action[hidden] { display: none !important; }
.role-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

@media (max-width: 760px) {
  .role-editor-modal { width: 100%; max-width: none; max-height: 97vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .role-editor-content { padding: 16px 14px; gap: 12px; }
  .role-editor-head { padding-inline-start: 48px; }
  .role-editor-head h3 { font-size: 21px; }
  .role-editor-head p { font-size: 14px; }
  .role-profile-panel, .role-permission-toolbar { border-radius: 13px; }
  .role-toolbar-fields { grid-template-columns: 1fr; }
  .permission-toolbar-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .permission-tool-button { width: 100%; }
  .permission-toolbar-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .permission-group-head { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .permission-group-toggle { grid-template-columns: 34px minmax(0,1fr) auto 18px; gap: 8px; }
  .permission-group-icon { width: 32px; height: 32px; }
  .permission-group-heading strong { font-size: 14px; }
  .permission-group-actions { justify-content: flex-start; padding-inline-start: 42px; }
  .role-editor-modal .permission-option { grid-template-columns: 38px minmax(0,1fr); min-height: 76px; padding: 9px 7px; }
  .permission-option-copy { grid-template-columns: 1fr; grid-template-areas: "title" "description" "code"; gap: 2px; }
  .permission-option-copy strong { font-size: 14px; }
  .permission-option-copy > span { font-size: 14px; }
  .permission-checkmark { width: 28px; height: 28px; }
  .role-editor-footer { grid-template-columns: 1fr 1.35fr; padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); }
  .role-clone-action:not([hidden]) { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 430px) {
  .role-profile-grid.form-grid.two-cols { grid-template-columns: 1fr; }
  .permission-toolbar-actions { grid-template-columns: 1fr 1fr; }
  .permission-group-heading small { max-width: 210px; }
  .role-editor-footer > button { font-size: 14px; }
}
.role-editor-footer .primary-action {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: rgba(117,183,255,.24);
  box-shadow: 0 12px 28px rgba(18,107,213,.24), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Fleet Control Pro 6.6 — רישיונות, בדיקות ותוקף */
.compliance-intro { align-items: flex-start; }
.compliance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.compliance-kpi {
  min-width: 0;
  min-height: 110px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(26,48,68,.82), rgba(10,25,38,.92));
  box-shadow: var(--shadow-xs);
}
.compliance-kpi-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
}
.compliance-kpi > div { min-width: 0; display: grid; gap: 3px; }
.compliance-kpi span { color: var(--muted); font-size: 14px; font-weight: 850; }
.compliance-kpi strong { color: var(--text); font-size: 27px; line-height: 1; }
.compliance-kpi small { color: var(--muted); font-size: 14px; }
.compliance-kpi.green .compliance-kpi-icon { color: #65dda0; background: rgba(44,190,118,.11); border-color: rgba(101,221,160,.28); }
.compliance-kpi.amber .compliance-kpi-icon { color: #ffc05c; background: rgba(255,165,35,.11); border-color: rgba(255,192,92,.28); }
.compliance-kpi.red .compliance-kpi-icon { color: #ff727c; background: rgba(244,64,80,.11); border-color: rgba(255,114,124,.28); }
.compliance-kpi.violet .compliance-kpi-icon { color: #c293ff; background: rgba(157,92,255,.11); border-color: rgba(194,147,255,.28); }
.compliance-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.compliance-main-panel { min-width: 0; }
.compliance-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.compliance-filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.compliance-groups { display: grid; gap: 13px; }
.compliance-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
}
.compliance-group > header {
  min-height: 52px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,255,255,.025), transparent);
}
.compliance-group > header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.compliance-group > header > div > div { display: grid; gap: 2px; min-width: 0; }
.compliance-group h2 { margin: 0; color: var(--text); font-size: 14px; }
.compliance-group header small { color: var(--muted); font-size: 14px; }
.compliance-group > header > span:last-child { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: var(--text-soft); background: rgba(255,255,255,.06); font-size: 14px; font-weight: 900; }
.compliance-group-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); }
.compliance-group.red { border-color: color-mix(in srgb, #ff626f 25%, var(--line)); }
.compliance-group.red .compliance-group-icon { color: #ff727c; background: rgba(244,64,80,.11); }
.compliance-group.blue { border-color: color-mix(in srgb, #4c9dff 25%, var(--line)); }
.compliance-group.blue .compliance-group-icon { color: #63abff; background: rgba(76,157,255,.11); }
.compliance-group.violet { border-color: color-mix(in srgb, #b282ff 25%, var(--line)); }
.compliance-group.violet .compliance-group-icon { color: #c293ff; background: rgba(157,92,255,.11); }
.compliance-group.green { border-color: color-mix(in srgb, #42d6b2 30%, var(--line)); }
.compliance-group.green .compliance-group-icon { color: #68e0c0; background: rgba(44,190,150,.12); }
.compliance-table-head,
.compliance-row {
  display: grid;
  grid-template-columns: minmax(155px, 1.3fr) minmax(150px, 1.15fr) 110px minmax(125px, .9fr) 92px 100px;
  gap: 10px;
  align-items: center;
}
.compliance-table-head { padding: 8px 13px; color: var(--muted); background: rgba(255,255,255,.018); font-size: 14px; font-weight: 850; }
.compliance-row { min-height: 65px; padding: 9px 13px; border-top: 1px solid var(--line); }
.compliance-row:first-child { border-top: 0; }
.compliance-row:hover { background: rgba(255,255,255,.025); }
.compliance-asset { display: flex; align-items: center; gap: 9px; min-width: 0; }
.compliance-row-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); }
.compliance-row-icon.red { color: #ff727c; background: rgba(244,64,80,.11); }
.compliance-row-icon.blue { color: #63abff; background: rgba(76,157,255,.11); }
.compliance-row-icon.violet { color: #c293ff; background: rgba(157,92,255,.11); }
.compliance-row-icon.green { color: #68e0c0; background: rgba(44,190,150,.12); }
.compliance-asset > div,
.compliance-kind,
.compliance-row time,
.compliance-remaining { min-width: 0; display: grid; gap: 3px; }
.compliance-asset strong,
.compliance-kind strong,
.compliance-row time strong,
.compliance-remaining strong { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-asset small,
.compliance-kind small,
.compliance-row time small,
.compliance-remaining small { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-status { justify-self: start; padding: 6px 9px; border-radius: 8px; font-size: 14px; font-weight: 900; white-space: nowrap; color: var(--muted); background: rgba(255,255,255,.05); }
.compliance-status.valid { color: #68dda2; background: rgba(44,190,118,.12); }
.compliance-status.soon { color: #6bb1ff; background: rgba(64,143,255,.12); }
.compliance-status.urgent { color: #ffc15d; background: rgba(255,165,35,.12); }
.compliance-status.overdue { color: #ff737e; background: rgba(244,64,80,.13); }
.compliance-status.completed { color: #9baab6; background: rgba(130,151,166,.1); }
.compliance-row.overdue { box-shadow: inset -2px 0 #f44a58; }
.compliance-row.urgent { box-shadow: inset -2px 0 #f4a623; }
.compliance-actions { display: flex; align-items: center; justify-content: flex-start; gap: 5px; }
.compliance-side-column { display: grid; gap: 14px; position: sticky; top: 78px; }
.compliance-upcoming-panel { overflow: hidden; }
.compliance-upcoming-head { align-items: center; margin-bottom: 12px; }
.compliance-upcoming-head > div { display: grid; gap: 3px; }
.compliance-upcoming-head h2 { margin: 0; }
.compliance-upcoming-head small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.compliance-upcoming-count {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 950;
}
.compliance-upcoming-list { display: grid; gap: 8px; }
.compliance-upcoming-item {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  text-align: right;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 94%, var(--primary) 6%), var(--surface-soft));
  box-shadow: var(--shadow-xs);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.compliance-upcoming-item::after {
  content: "";
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #56a8ff;
  opacity: .75;
}
.compliance-upcoming-item:hover,
.compliance-upcoming-item:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 90%, var(--primary) 10%);
  box-shadow: 0 10px 24px rgba(0,0,0,.13);
  transform: translateY(-1px);
}
.compliance-upcoming-item:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
.compliance-upcoming-item.urgent::after { background: var(--warning); }
.compliance-upcoming-item.overdue::after { background: var(--danger); }
.compliance-upcoming-item.valid::after { background: var(--success); }
.upcoming-copy { min-width: 0; display: grid; gap: 6px; }
.upcoming-title {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.upcoming-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}
.upcoming-meta > span { min-width: 0; overflow-wrap: anywhere; }
.upcoming-meta time { flex: 0 0 auto; color: var(--text-soft); font-weight: 800; }
.upcoming-days {
  width: 48px;
  height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(67,145,255,.18);
  border-radius: 13px;
  color: #67b0ff;
  background: rgba(67,145,255,.1);
}
.upcoming-days strong { font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.upcoming-days small { font-size: 14px; line-height: 1; font-weight: 850; }
.upcoming-days.valid { color: #5dd9a0; border-color: rgba(44,190,118,.22); background: rgba(44,190,118,.11); }
.upcoming-days.urgent { color: #ffc15d; border-color: rgba(255,165,35,.22); background: rgba(255,165,35,.12); }
.upcoming-days.overdue { color: #ff727c; border-color: rgba(244,64,80,.24); background: rgba(244,64,80,.12); }
.upcoming-open {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--surface-3) 86%, var(--primary) 14%);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.compliance-upcoming-item:hover .upcoming-open,
.compliance-upcoming-item:focus-visible .upcoming-open { color: #fff; border-color: var(--primary); background: var(--primary); transform: translateX(-2px); }
.mail-status-card { display: flex; align-items: flex-start; gap: 9px; padding: 11px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 11px; }
.mail-status-card > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; }
.mail-status-card > div { min-width: 0; display: grid; gap: 3px; }
.mail-status-card strong { font-size: 14px; color: var(--text); }
.mail-status-card small { font-size: 14px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.mail-status-card.configured { border-color: rgba(83,218,157,.25); background: rgba(44,190,118,.06); }
.mail-status-card.configured > span { color: #68dda2; background: rgba(44,190,118,.12); }
.mail-status-card.not-configured { border-color: rgba(255,174,65,.25); background: rgba(255,165,35,.06); }
.mail-status-card.not-configured > span { color: #ffc15d; background: rgba(255,165,35,.12); }
.compliance-dialog { width: min(780px, calc(100% - 24px)); }
.email-settings-dialog { width: min(720px, calc(100% - 24px)); }
.compliance-toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.mail-provider-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid rgba(67,145,255,.22); border-radius: 11px; background: rgba(67,145,255,.07); }
.mail-provider-note > span { color: var(--primary); }
.mail-provider-note > div { display: grid; gap: 3px; }
.mail-provider-note strong { color: var(--text); font-size: 14px; }
.mail-provider-note small { color: var(--muted); font-size: 14px; line-height: 1.55; }
.email-test-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }

@media (max-width: 1180px) {
  .compliance-layout { grid-template-columns: 1fr; }
  .compliance-side-column { grid-template-columns: repeat(2, minmax(0,1fr)); position: static; }
  .compliance-table-head,
  .compliance-row { grid-template-columns: minmax(140px,1.3fr) minmax(140px,1.15fr) 100px minmax(110px,.9fr) 84px 92px; }
}
@media (max-width: 900px) {
  .compliance-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compliance-table-head { display: none; }
  .compliance-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: start; padding: 12px; }
  .compliance-asset { grid-column: 1; }
  .compliance-kind { grid-column: 1; padding-right: 43px; }
  .compliance-row time { grid-column: 1; padding-right: 43px; }
  .compliance-remaining { grid-column: 1; padding-right: 43px; }
  .compliance-status { grid-column: 2; grid-row: 1; }
  .compliance-actions { grid-column: 2; grid-row: 2 / span 3; align-self: end; flex-direction: column; }
}
@media (max-width: 719px) {
  .compliance-toolbar { align-items: stretch; flex-direction: column; }
  .compliance-side-column { grid-template-columns: 1fr; }
  .compliance-toggle-grid { grid-template-columns: 1fr; }
  .email-test-row { grid-template-columns: 1fr; }
  .compliance-kpi { min-height: 92px; padding: 12px; gap: 10px; }
  .compliance-kpi strong { font-size: 22px; }
  .compliance-kpi-icon { width: 38px; height: 38px; }
  .compliance-dialog,
  .email-settings-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .bottom-nav { grid-template-columns: repeat(7, minmax(0,1fr)); }
  .bottom-link { padding-inline: 1px; }
  .bottom-link small { font-size: .875rem; }
}

/* Fleet Control Pro 6.7.0 — simple alerts with optional Gmail */
.quick-gmail-dialog { width: min(650px, calc(100% - 24px)); }
.quick-gmail-dialog form { gap: 14px; }
.gmail-connection-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}
.gmail-connection-state > svg { flex: 0 0 auto; }
.gmail-connection-state > div { display: grid; gap: 2px; min-width: 0; }
.gmail-connection-state strong { color: var(--text); font-size: 14px; }
.gmail-connection-state small { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.gmail-connection-state.configured { color: #68dda2; border-color: rgba(83,218,157,.28); background: rgba(44,190,118,.07); }
.gmail-connection-state.not-configured { color: #6bb1ff; border-color: rgba(64,143,255,.25); background: rgba(64,143,255,.07); }
.quick-gmail-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.quick-gmail-steps > div {
  min-width: 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.quick-gmail-steps > div > span {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 950;
}
.quick-gmail-steps strong { color: var(--text); font-size: 14px; }
.quick-gmail-steps small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.quick-gmail-field { display: grid; gap: 6px; }
.quick-gmail-field > span { color: var(--text-soft); font-size: 14px; font-weight: 900; }
.quick-gmail-field > small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.quick-gmail-auto-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid rgba(83,218,157,.22);
  border-radius: 11px;
  color: #68dda2;
  background: rgba(44,190,118,.055);
}
.quick-gmail-auto-note > div { display: grid; gap: 3px; }
.quick-gmail-auto-note strong { color: var(--text); font-size: 14px; }
.quick-gmail-auto-note small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.gmail-connect-button.is-loading { opacity: .82; cursor: wait; }
@media (max-width: 719px) {
  .quick-gmail-steps { grid-template-columns: 1fr; }
  .quick-gmail-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
}


/* Fleet Control Pro 6.7.0 — simplified alert creation */
.simple-alert-dialog { width: min(650px, calc(100% - 24px)); }
.simple-alert-dialog form { display: grid; gap: 14px; }
.simple-alert-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.simple-alert-steps span { padding: 7px 5px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-soft); text-align: center; font-size: 14px; font-weight: 850; }
.simple-alert-steps span.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); background: var(--primary-soft); }
.simple-alert-field { display: grid; gap: 6px; }
.simple-alert-field > span, .simple-reminder-fieldset legend { color: var(--text-soft); font-size: 14px; font-weight: 850; }
.simple-alert-date-row { gap: 10px; }
.simple-alert-date-row.date-only { grid-template-columns: minmax(0, 1fr); }
.date-only-alert-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface-soft));
}
.date-only-alert-note > span { flex: 0 0 auto; display: grid; place-items: center; }
.date-only-alert-note > div { min-width: 0; display: grid; gap: 2px; }
.date-only-alert-note strong { color: var(--text); font-size: 14px; }
.date-only-alert-note small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.simple-alert-category-row { gap: 10px; }
.simple-reminder-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.simple-reminder-options { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.simple-reminder-options label { position: relative; cursor: pointer; }
.simple-reminder-options input { position: absolute; opacity: 0; pointer-events: none; }
.simple-reminder-options span { min-height: 42px; padding: 7px 5px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 14px; font-weight: 900; text-align: center; transition: .16s ease; }
.simple-reminder-options input:checked + span { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent); }
.simple-alert-delivery-note { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface-soft); }
.simple-alert-delivery-note > svg { flex: 0 0 auto; color: var(--amber); }
.simple-alert-delivery-note.mail-ready > svg { color: var(--green); }
.simple-alert-delivery-note div { min-width: 0; display: grid; gap: 2px; }
.simple-alert-delivery-note strong { color: var(--text); font-size: 14px; }
.simple-alert-delivery-note small { font-size: 14px; line-height: 1.45; }
.simple-alert-delivery-note .field-link { margin-inline-start: auto; flex: 0 0 auto; }
.simple-alert-more { border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.simple-alert-more summary { padding: 11px 12px; cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 850; }
.simple-alert-more-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.custom-reminder-field { display: grid; gap: 5px; margin-top: 10px; }
.custom-reminder-field > span { color: var(--text-soft); font-size: 14px; font-weight: 850; }
.custom-reminder-field > small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.custom-reminder-field input { min-height: 42px; }
.simple-alert-save { min-height: 46px; font-size: 14px; }

/* Fleet Control Pro 6.8 — annual general reminders */
.compliance-complete-dialog { width: min(720px, calc(100% - 24px)); }
.compliance-complete-dialog form { display: grid; gap: 14px; }
.completion-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; }
.completion-flow > span { min-height: 62px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: var(--surface-soft); }
.completion-flow > span.active { border-color: rgba(78,218,184,.35); background: rgba(44,190,150,.08); }
.completion-flow b { color: var(--text); font-size: 14px; }
.completion-flow small { color: var(--muted); font-size: 14px; }
.completion-flow > i { display: grid; place-items: center; color: var(--muted); transform: rotate(180deg); }
.completion-date-row { gap: 10px; }
.completion-next-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(78,218,184,.28); border-radius: 13px; background: rgba(44,190,150,.07); }
.completion-next-card > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #68e0c0; background: rgba(44,190,150,.12); }
.completion-next-card > div { display: grid; gap: 2px; }
.completion-next-card small, .completion-next-card p { margin: 0; color: var(--muted); font-size: 14px; }
.completion-next-card strong { color: var(--text); font-size: 18px; }
.completion-auto-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(67,145,255,.2); border-radius: 11px; color: var(--primary); background: rgba(67,145,255,.06); }
.completion-auto-note p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.55; }
@media (max-width: 719px) {
  .simple-alert-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .simple-alert-steps { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .simple-reminder-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .simple-reminder-options label:last-child { grid-column: 1 / -1; }
  .simple-alert-delivery-note { align-items: flex-start; flex-wrap: wrap; }
  .simple-alert-delivery-note .field-link { width: 100%; margin: 0; }
  .compliance-complete-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .completion-flow { grid-template-columns: 1fr; }
  .completion-flow > i { transform: rotate(90deg); }
  .completion-flow > span { min-height: 52px; }
  .completion-date-row, .simple-alert-category-row { grid-template-columns: 1fr; }
}

/* Fleet Control Pro 6.7.0 — Google Apps Script mail connection */
.google-script-dialog { width: min(700px, calc(100% - 24px)); }
.google-script-dialog form { gap: 13px; }
.google-connect-step {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.google-step-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #4285f4, #2766c8);
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(66,133,244,.2);
}
.google-step-content { min-width: 0; display: grid; gap: 7px; }
.google-step-content > strong { color: var(--text); font-size: 14px; }
.google-step-content > small { color: var(--muted); font-size: 14px; line-height: 1.55; }
.google-step-content.wide { gap: 12px; }
.google-step-content .secondary-action { justify-self: start; }
.google-script-link { text-decoration: none; }
.google-script-dialog input[dir="ltr"],
.google-script-dialog textarea[dir="ltr"] { text-align: left; }
@media (max-width: 719px) {
  .google-script-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .google-connect-step { grid-template-columns: 32px minmax(0,1fr); padding: 10px; gap: 8px; }
  .google-step-number { width: 30px; height: 30px; }
  .google-step-content .secondary-action { width: 100%; }
}
.google-code-fallback { margin-top: 2px; }
.google-code-fallback summary { cursor: pointer; color: var(--primary); font-size: 14px; font-weight: 850; }
.google-code-fallback textarea { margin-top: 8px; min-height: 150px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; line-height: 1.45; white-space: pre; direction: ltr; text-align: left; }


/* Fleet Control Pro 6.8.1 — multiple Gmail recipients for every alert */
.fixed-mail-card bdi { color: var(--primary); font-weight: 900; }
.fixed-mail-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.fixed-email-dialog { width: min(680px, calc(100% - 24px)); }
.fixed-recipient-panel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, transparent), var(--surface-soft));
}
.fixed-recipient-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 85%, var(--surface));
}
.fixed-recipient-field { min-width: 0; display: grid; gap: 6px; }
.fixed-recipient-field > span,
.fixed-recipient-field > label { color: var(--text); font-size: 14px; font-weight: 900; }
.fixed-recipient-field input { min-height: 46px; font-size: 14px; font-weight: 800; }
.fixed-recipient-field small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.multi-recipient-panel { align-items: start; }
.multi-recipient-editor { min-width: 0; display: grid; gap: 10px; }
.email-recipient-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.email-recipient-entry .secondary-action { min-height: 46px; white-space: nowrap; }
.email-recipient-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 0; }
.email-recipient-chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  font-size: 14px;
  font-weight: 800;
}
.email-recipient-chip bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-recipient-chip button {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.email-recipient-chip button:hover { color: var(--red); background: var(--red-soft); }
.email-recipient-empty { margin: 0; color: var(--muted); font-size: 14px; }
.mail-recipient-preview { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 3px; }
.mail-recipient-preview bdi { color: var(--primary); font-weight: 850; overflow-wrap: anywhere; }
.google-connection-setup {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  overflow: hidden;
}
.google-connection-setup > summary {
  min-height: 54px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
}
.google-connection-setup > summary::-webkit-details-marker { display: none; }
.google-connection-setup > summary > svg:first-child { color: var(--primary); }
.google-connection-setup > summary > svg:last-child { transition: transform .18s ease; }
.google-connection-setup[open] > summary > svg:last-child { transform: rotate(90deg); }
.google-connection-setup > summary div { display: grid; gap: 2px; }
.google-connection-setup > summary strong { color: var(--text); font-size: 14px; }
.google-connection-setup > summary small { font-size: 14px; line-height: 1.45; }
.google-connection-setup-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.fixed-recipient-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 11px;
  color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 65%, var(--surface-soft));
}
.fixed-recipient-note div { display: grid; gap: 2px; }
.fixed-recipient-note strong { color: var(--text); font-size: 14px; }
.fixed-recipient-note small { color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 719px) {
  .fixed-email-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .fixed-recipient-panel { grid-template-columns: 40px minmax(0,1fr); padding: 12px; }
  .fixed-recipient-icon { width: 38px; height: 38px; }
  .fixed-mail-actions { width: 100%; }
  .fixed-mail-actions .secondary-action { flex: 1; }
  .email-recipient-entry { grid-template-columns: 1fr; }
  .email-recipient-entry .secondary-action { width: 100%; }
}
@media (max-width: 480px) {
  .multi-recipient-panel { grid-template-columns: 1fr; }
  .multi-recipient-panel > .fixed-recipient-icon { display: none; }
}

/* Fleet Control Pro 6.8.9 — annual compliance panels for forklifts, trucks and trailers */
.forklift-compliance-panel {
  overflow: hidden;
  margin: 11px 0 9px;
  border: 1px solid color-mix(in srgb, #a78bfa 28%, var(--line));
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(145,112,255,.08), transparent 50%),
    color-mix(in srgb, var(--surface-soft) 94%, transparent);
}
.forklift-compliance-panel > header {
  min-height: 42px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.018);
}
.forklift-compliance-panel > header > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.forklift-compliance-panel > header > div > span {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #c4adff;
  border: 1px solid rgba(180,151,255,.27);
  background: rgba(154,111,255,.11);
}
.forklift-compliance-panel > header strong { color: var(--text); font-size: 14px; }
.forklift-compliance-panel > header small { color: var(--muted); font-size: 14px; white-space: nowrap; }
.forklift-compliance-rows { display: grid; }
.forklift-compliance-row {
  min-width: 0;
  min-height: 63px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, box-shadow .2s ease;
}
.forklift-compliance-row:last-child { border-bottom: 0; }
.forklift-compliance-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
}
.forklift-compliance-row.valid .forklift-compliance-icon { color: #68dda2; background: rgba(44,190,118,.11); }
.forklift-compliance-row.soon .forklift-compliance-icon { color: #6bb1ff; background: rgba(64,143,255,.11); }
.forklift-compliance-row.urgent .forklift-compliance-icon { color: #ffc15d; background: rgba(255,165,35,.11); }
.forklift-compliance-row.overdue .forklift-compliance-icon { color: #ff737e; background: rgba(244,64,80,.12); }
.forklift-compliance-row.completed .forklift-compliance-icon,
.forklift-compliance-row.missing .forklift-compliance-icon { color: var(--muted); background: rgba(130,151,166,.09); }
.forklift-compliance-copy { min-width: 0; display: grid; gap: 3px; }
.forklift-compliance-copy > div { min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.forklift-compliance-copy > div > span { color: var(--text-soft); font-size: 14px; font-weight: 900; }
.forklift-compliance-copy > strong { color: var(--text); font-size: 14px; line-height: 1.15; }
.forklift-compliance-copy > small { min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forklift-compliance-copy > small svg { display: inline; vertical-align: -2px; color: var(--success); }
.forklift-compliance-status {
  padding: 3px 5px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(130,151,166,.09);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}
.forklift-compliance-status.valid { color: #68dda2; background: rgba(44,190,118,.12); }
.forklift-compliance-status.soon { color: #6bb1ff; background: rgba(64,143,255,.12); }
.forklift-compliance-status.urgent { color: #ffc15d; background: rgba(255,165,35,.12); }
.forklift-compliance-status.overdue { color: #ff737e; background: rgba(244,64,80,.13); }
.forklift-compliance-action {
  min-height: 31px;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 33%, var(--line));
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}
.forklift-compliance-action:hover { color: #fff; border-color: var(--primary); background: var(--primary); }
.forklift-compliance-row.missing .forklift-compliance-action { color: #c4adff; border-color: rgba(180,151,255,.28); background: rgba(154,111,255,.09); }
.forklift-compliance-row.just-completed {
  background: linear-gradient(90deg, rgba(44,190,118,.14), rgba(44,190,118,.035));
  box-shadow: inset -3px 0 #45d695;
  animation: forklift-compliance-confirmation 1.2s ease both;
}
.forklift-compliance-row.just-completed .forklift-compliance-copy > small { color: #68dda2; font-weight: 850; }
.forklift-compliance-row.just-completed .forklift-compliance-action { color: #68dda2; border-color: rgba(104,221,162,.3); background: rgba(44,190,118,.1); }
.forklift-compliance-manage {
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-top: 1px solid var(--line);
  color: #c4adff;
  background: rgba(154,111,255,.045);
  font-size: 14px;
  font-weight: 900;
}
.forklift-compliance-manage:hover { color: #fff; background: rgba(154,111,255,.14); }
.forklift-compliance-loading { display: grid; gap: 7px; padding: 10px; }
.forklift-compliance-loading i {
  height: 43px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.085), rgba(255,255,255,.035));
  background-size: 200% 100%;
  animation: forklift-compliance-loading 1.35s linear infinite;
}
@keyframes forklift-compliance-confirmation {
  from { background-color: rgba(44,190,118,.28); }
  to { background-color: transparent; }
}
@keyframes forklift-compliance-loading {
  to { background-position: -200% 0; }
}
@media (max-width: 420px) {
  .forklift-compliance-panel > header { align-items: flex-start; }
  .forklift-compliance-panel > header small { white-space: normal; text-align: left; }
  .forklift-compliance-row { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 6px; padding-inline: 7px; }
  .forklift-compliance-icon { width: 29px; height: 29px; }
  .forklift-compliance-action { min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .forklift-compliance-row.just-completed,
  .forklift-compliance-loading i { animation: none; }
}

/* unified modern interface base with a balanced mobile header */
:root {
  --bg: #07111f;
  --bg-deep: #030a14;
  --surface: #0d1928;
  --surface-2: #122135;
  --surface-3: #192c42;
  --surface-soft: #091522;
  --text: #eef5ff;
  --text-soft: #b7c6d8;
  --muted: #7890a8;
  --line: rgba(151, 179, 207, .16);
  --line-strong: rgba(151, 179, 207, .28);
  --border: var(--line);
  --primary: #3185ff;
  --primary-strong: #18b6e8;
  --primary-soft: rgba(49, 133, 255, .13);
  --cyan: #20bdd5;
  --sidebar: #071321;
  --shadow-xs: 0 1px 0 rgba(255,255,255,.035) inset;
  --shadow-sm: 0 14px 38px rgba(0, 0, 0, .18);
  --shadow-md: 0 24px 62px rgba(0, 0, 0, .28);
  --shadow-lg: 0 40px 110px rgba(0, 0, 0, .52);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 26px;
}

:root[data-theme="light"] {
  --bg: #f3f7fc;
  --bg-deep: #eaf1f9;
  --surface: rgba(255, 255, 255, .96);
  --surface-2: #f8fbff;
  --surface-3: #edf4fb;
  --surface-soft: #f7faff;
  --text: #10233f;
  --text-soft: #405674;
  --muted: #71849b;
  --line: #dce7f3;
  --line-strong: #c8d8ea;
  --border: var(--line);
  --primary: #1478ff;
  --primary-strong: #21b9e9;
  --primary-soft: rgba(20, 120, 255, .10);
  --cyan: #079bb5;
  --cyan-soft: rgba(7, 155, 181, .10);
  --sidebar: #0c1c2e;
  --shadow-xs: 0 1px 0 rgba(255,255,255,.82) inset;
  --shadow-sm: 0 14px 38px rgba(41, 80, 126, .08);
  --shadow-md: 0 24px 62px rgba(41, 80, 126, .12);
  --shadow-lg: 0 38px 90px rgba(31, 61, 103, .22);
}

body {
  background:
    radial-gradient(circle at 92% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    radial-gradient(circle at -8% 72%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 29%),
    var(--bg);
  background-attachment: fixed;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 2px;
}

.sidebar {
  padding: 20px 15px;
  background:
    radial-gradient(circle at 82% 0%, rgba(49, 133, 255, .20), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 24%),
    var(--sidebar);
  border-left-color: rgba(151, 179, 207, .10);
  box-shadow: -20px 0 56px rgba(3, 10, 20, .18);
}
.sidebar::after { display: none; }
.sidebar-brand { padding: 7px 8px 23px; }
.brand-symbol,
.auth-symbol {
  border-radius: 16px;
  background: linear-gradient(145deg, #41a2ff, #2369e8 56%, #16a6d5);
  box-shadow: 0 14px 34px rgba(28, 105, 227, .30), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-symbol.small { border-radius: 14px; }
.side-nav { gap: 7px; }
.nav-link {
  min-height: 50px;
  border-radius: 14px;
  color: #92a8bc;
}
.nav-link::before { display: none; }
.nav-link:hover { background: rgba(255,255,255,.045); }
.nav-link.active {
  background: linear-gradient(105deg, rgba(49,133,255,.25), rgba(29,184,231,.10));
  border-color: rgba(84, 161, 255, .22);
  box-shadow: 0 10px 28px rgba(4, 13, 26, .16), inset 0 1px 0 rgba(255,255,255,.055);
}
.sidebar-footer { bottom: 20px; }
.server-status { border-radius: 16px; background: rgba(255,255,255,.035); }

.topbar {
  isolation: isolate;
  margin: 10px 12px 0;
  height: 72px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 83%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(24px) saturate(135%);
}
.mobile-brand,
.top-actions { position: relative; z-index: 2; }
.mobile-header-title {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(40vw, 220px);
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--text);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.mobile-header-title strong { font-size: 19px; font-weight: 950; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.mobile-header-title small { color: var(--muted); font-size: 14px; font-weight: 900; letter-spacing: .18em; direction: ltr; }
.icon-button,
.user-menu-button,
.connection-pill {
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}
.icon-button { width: 42px; height: 42px; }
.user-menu-button { min-height: 44px; }
.user-menu { border-radius: 18px; box-shadow: var(--shadow-lg); }

main { padding-top: 22px; }
.view.active { animation: modernViewIn .26s ease both; }
@keyframes modernViewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.page-intro {
  position: relative;
  padding: 18px 19px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
}
.page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 44%);
}
.page-intro > * { position: relative; z-index: 1; }
.page-intro h1 { color: var(--text); letter-spacing: -.045em; }
.page-intro p { max-width: 830px; font-size: 14px; line-height: 1.72; }
.dashboard-intro {
  min-height: 176px;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 35%),
    color-mix(in srgb, var(--surface) 96%, transparent);
}
.dashboard-intro::after,
.dashboard-intro::before { display: none; }
.section-kicker { color: var(--primary); font-size: 14px; letter-spacing: .13em; }

.primary-action,
.secondary-action,
.primary-mini,
.secondary-mini,
.danger-action,
.ghost-button,
.text-button {
  border-radius: 14px;
}
.primary-action,
.primary-mini {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: rgba(111, 190, 255, .28);
  box-shadow: 0 12px 28px rgba(20, 120, 255, .20), inset 0 1px 0 rgba(255,255,255,.26);
}
.primary-action:hover,
.primary-mini:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 120, 255, .26); }
.secondary-action,
.secondary-mini,
.ghost-button {
  color: var(--text-soft);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: var(--shadow-xs);
}
.secondary-action:hover,
.secondary-mini:hover,
.ghost-button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: var(--primary-soft); }
.text-button { color: var(--primary); }
.filter-chip {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
}
.filter-chip.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: 0 9px 22px rgba(20,120,255,.18);
}

.panel,
.asset-card,
.plan-card,
.alert-card,
.history-row,
.work-order-card,
.part-card,
.data-row,
.access-summary-card,
.compliance-kpi,
.compliance-group,
.category-overview-card,
.asset-category-section,
.export-grid a {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 18px; border-radius: var(--radius-lg); }
.panel::after { background: linear-gradient(130deg, rgba(255,255,255,.035), transparent 30%); }
.panel-head { margin-bottom: 16px; }
.panel-head h2 { font-size: 17px; }

.kpi-grid { gap: 12px; margin-bottom: 14px; }
.kpi-card {
  min-height: 130px;
  padding: 16px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
}
.kpi-card::after { width: 120px; height: 120px; opacity: .06; filter: blur(4px); }
.kpi-icon { width: 42px; height: 42px; border-radius: 14px; }
.kpi-value-line strong { font-size: 30px; }
.kpi-accent { right: 16px; bottom: 0; left: 16px; height: 3px; border-radius: 999px; }

.command-grid { gap: 14px; margin-bottom: 14px; }
.alerts-overview-panel,
.priority-panel,
.health-panel { border-top-width: 1px; }
.critical-row,
.priority-row,
.live-note,
.asset-maintenance-box,
.secondary-stat,
.mail-status-card,
.gmail-connection-state,
.role-card,
.user-card {
  border-radius: 14px;
  background: var(--surface-2);
}
.health-gauge::before { box-shadow: inset 0 0 22px color-mix(in srgb, var(--bg-deep) 22%, transparent); }

.overview-shortcuts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 14px;
}
.overview-shortcut {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: 45px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  color: var(--text);
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease;
}
.overview-shortcut:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.overview-shortcut-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.overview-shortcut.history .overview-shortcut-icon { color: var(--violet); background: var(--violet-soft); }
.overview-shortcut > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.overview-shortcut strong { font-size: 14px; }
.overview-shortcut small { color: var(--muted); font-size: 14px; }
.overview-shortcut > .ui-icon:last-child { color: var(--muted); }
.overview-shortcut b { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--danger); font-size: 14px; box-shadow: 0 7px 16px rgba(255,87,95,.22); }

.asset-card,
.plan-card,
.history-row,
.alert-card,
.part-card,
.work-order-card,
.data-row { border-radius: 20px; }
.asset-card { background: color-mix(in srgb, var(--surface) 96%, transparent); }
.asset-media,
.asset-visual {
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 44%),
    var(--surface-2);
}
.asset-media::before,
.asset-visual::after { opacity: .35; }
.asset-visual-icon { border-radius: 20px; box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 12%, transparent); }
.asset-maintenance-box { padding: 12px; }
.category-management-panel { gap: 17px; }
.fleet-category-intro { border-radius: 18px; background: linear-gradient(120deg, var(--primary-soft), var(--surface-2)); }
.asset-category-overview { gap: 14px; }
.category-overview-card { border-radius: 22px; }
.category-overview-card strong { color: var(--text); }
.category-overview-card small { color: var(--muted); }
.asset-category-section { border-radius: 24px; }
.asset-category-section::after { opacity: .45; }

.alerts-list,
.history-list,
.plans-grid,
.work-orders-list,
.data-list,
.activity-timeline { gap: 13px; }
.alert-card { border-right-width: 1px; }
.alert-card.critical { border-inline-start: 4px solid var(--danger); }
.alert-card.warning { border-inline-start: 4px solid var(--warning); }
.history-date { border-radius: 15px; background: var(--surface-2); }

.operations-kpi-grid,
.compliance-kpi-grid { gap: 12px; }
.ops-kpi,
.compliance-kpi { min-height: 112px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.operations-tabs {
  top: 92px;
  gap: 7px;
  padding: 8px;
  border-color: var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(22px);
}
.operations-tab { border-radius: 12px; }
.operations-tab.active { border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow: 0 9px 22px rgba(20,120,255,.18); }
.work-order-card,
.part-card,
.data-row,
.export-grid a,
.row-actions button,
.restore-backup { background: var(--surface-2); border-color: var(--line); }
.part-metrics div { background: var(--surface); border-color: var(--line); }
.export-grid a { border-radius: 18px; }
.export-grid .export-all { background: linear-gradient(135deg, var(--cyan-soft), var(--primary-soft)); }
.backup-notice { border-radius: 16px; }

.compliance-kpi { background: var(--surface); }
.compliance-group { overflow: hidden; border-radius: 19px; }
.compliance-group > header,
.compliance-table-head { background: var(--surface-2); }
.compliance-row:hover { background: var(--primary-soft); }
.compliance-row time strong,
.compliance-remaining strong,
.compliance-kind strong,
.compliance-asset strong { font-size: 14px; }
.compliance-status { border-radius: 999px; }
.forklift-compliance-panel { border-radius: 17px; background: var(--surface-2); }
.forklift-compliance-row:hover { background: var(--primary-soft); }
.forklift-compliance-action { border-radius: 11px; }

.modal {
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(4, 12, 24, .62); backdrop-filter: blur(10px); }
.modal form { padding: 21px; gap: 14px; }
.modal-close { width: 39px; height: 39px; border-radius: 13px; background: var(--surface-2); }
.modal input,
.modal select,
.modal textarea,
.auth-form input { border-radius: 13px; color: var(--text); background: var(--surface-2); }
.modal-actions { gap: 10px; }

.auth-gate {
  background:
    radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 31%),
    radial-gradient(circle at 10% 88%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 28%),
    var(--bg);
}
.auth-card {
  border-color: var(--line-strong);
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.auth-card::before { background: linear-gradient(125deg, var(--primary-soft), transparent 42%); }
.auth-message { color: var(--danger); }
.auth-message.success { color: var(--success); }

.bottom-nav {
  right: 12px;
  bottom: 10px;
  left: 12px;
  width: auto;
  height: calc(72px + env(safe-area-inset-bottom));
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 20px 54px rgba(20, 47, 82, .20);
  backdrop-filter: blur(26px) saturate(140%);
}
.bottom-link { border-radius: 17px; }
.bottom-link small { font-size: 14px !important; }
.bottom-link.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 14%, var(--line)); background: var(--primary-soft); }
.bottom-link b { top: 2px; left: 16%; }
.mobile-product-fab,
.quick-product-action { display: none !important; }
.toast { bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 16px; }

@media (max-width: 719px) {
  main { padding: 18px 12px 112px; }
  .topbar { top: 8px; }
  /* Balanced mobile header controls: keep every action clear of the centered title. */
  .topbar .top-actions { position: static; width: 0; height: 0; }
  .topbar #audioButton,
  .topbar #themeButton,
  .topbar .user-menu-wrap { position: absolute; z-index: 3; top: 16px; }
  .topbar #audioButton { right: 61px; }
  .topbar #themeButton { left: 13px; }
  .topbar .user-menu-wrap { left: 58px; }
  .topbar #audioButton,
  .topbar #themeButton { width: 38px; height: 38px; }
  .topbar .user-menu-button { min-height: 38px; height: 38px; padding: 3px; }
  .topbar .user-avatar { width: 30px; height: 30px; }
  .topbar .user-menu-button > .ui-icon { display: none !important; }
  .mobile-header-title { z-index: 2; width: min(40vw, 156px); }
  .user-button-copy { display: none; }
  .user-menu-button { padding: 5px; }
  .page-intro { padding: 17px; }
  .dashboard-intro { min-height: 0; }
  .intro-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .intro-actions > * { width: 100%; }
  .overview-shortcuts { grid-template-columns: 1fr; }
  .overview-shortcut { min-height: 74px; }
  .panel { padding: 15px; }
  .panel-head { flex-wrap: wrap; }
  .panel-actions { width: 100%; }
  .panel-actions > * { flex: 1; }
  .asset-category-overview { gap: 10px; }
  .compliance-kpi-grid { gap: 9px; }
  .compliance-kpi { min-height: 94px; padding: 12px; }
  .operations-tabs { top: 92px; margin-inline: 0; }
  .modal,
  .compliance-dialog,
  .email-settings-dialog { width: calc(100% - 16px); max-height: 94vh; margin: auto; border-radius: 26px; }
}

@media (max-width: 430px) {
  .topbar { margin-inline: 8px; padding-inline: 9px; }
  .top-actions { gap: 5px; }
  .topbar #audioButton { right: 57px; }
  .topbar #themeButton { left: 9px; }
  .topbar .user-menu-wrap { left: 52px; }
  .icon-button { width: 39px; height: 39px; }
  .connection-pill { display: none !important; }
  .kpi-grid { gap: 9px; }
  .kpi-card { min-height: 118px; padding: 13px; }
  .kpi-icon { width: 37px; height: 37px; }
  .kpi-value-line strong { font-size: 25px; }
  .overview-shortcut { grid-template-columns: 41px minmax(0,1fr) auto auto; gap: 9px; padding: 11px 12px; }
  .overview-shortcut-icon { width: 41px; height: 41px; }
  .bottom-nav { right: 8px; left: 8px; }
}

@media (max-width: 380px) {
  .top-actions { gap: 3px; }
  .icon-button { width: 36px; height: 36px; }
  .user-menu-button { min-height: 36px; }
  .user-avatar { width: 28px; height: 28px; }
  .mobile-header-title { width: 124px; }
  .mobile-header-title strong { font-size: 16px; }
  .mobile-header-title small { font-size: 14px; }
}

@media (min-width: 1020px) {
  :root { --sidebar-width: 252px; }
  .topbar { top: 12px; height: 72px; margin: 12px 18px 0; padding: 10px 18px; }
  .mobile-header-title { display: none; }
  main { padding: 32px 28px 52px; }
  .page-intro { padding: 23px 25px; }
  .dashboard-intro { min-height: 172px; }
  .panel { padding: 20px; }
  .command-grid { gap: 15px; }
  .operations-intro { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .operations-intro > div { min-width: 0; }
  .desktop-export-shortcut { display: inline-flex; flex: 0 0 auto; min-height: 46px; padding-inline: 18px; font-size: 14px; }
  .operations-tabs {
    top: 98px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
  .operations-tab { width: 100%; min-width: 0; }
}

@media (min-width: 1380px) {
  main { padding-inline: 34px; }
  .page-intro h1 { font-size: 39px; }
  .asset-category-overview { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .primary-action,
  .overview-shortcut { animation: none; transition: none; }
}

/* Fleet Control Pro 6.8.17 — premium command center */
:root {
  --command-navy: #0a2138;
  --command-navy-2: #0e2b49;
  --command-blue: #1684f8;
  --command-cyan: #1fb9e7;
}

:root[data-theme="light"] {
  --bg: #f1f5fa;
  --bg-deep: #e8eff7;
  --surface: #ffffff;
  --surface-2: #f7fafe;
  --surface-3: #eaf1f8;
  --surface-soft: #f9fbfe;
  --text: #10243e;
  --text-soft: #405776;
  --muted: #71839a;
  --line: #dce6f1;
  --line-strong: #c8d7e8;
  --primary: var(--command-blue);
  --primary-strong: var(--command-cyan);
  --primary-soft: rgba(22,132,248,.10);
  --sidebar: #081b2f;
  --shadow-sm: 0 12px 34px rgba(35,73,119,.08);
  --shadow-md: 0 20px 50px rgba(35,73,119,.13);
  --shadow-lg: 0 36px 90px rgba(21,48,83,.24);
}

body {
  background:
    radial-gradient(circle at 90% -12%, rgba(22,132,248,.12), transparent 31%),
    radial-gradient(circle at -10% 72%, rgba(31,185,231,.07), transparent 27%),
    var(--bg);
  background-attachment: fixed;
}

.sidebar {
  padding: 22px 16px;
  background:
    radial-gradient(circle at 78% 0%, rgba(40,132,255,.22), transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    var(--sidebar);
  border-left: 1px solid rgba(143,181,217,.13);
  box-shadow: -20px 0 60px rgba(5,18,34,.19);
}
.sidebar-brand { padding: 5px 7px 25px; }
.sidebar-brand strong { font-size: 16px; }
.sidebar-brand small { color: #8097ad; font-size: 14px; letter-spacing: .15em; }
.brand-symbol { width: 47px; height: 47px; border-radius: 16px; }
.side-nav { gap: 8px; margin-top: 23px; }
.nav-link {
  min-height: 53px;
  padding: 9px 12px;
  border-radius: 15px;
  color: #93a9bd;
  font-size: 14px;
}
.nav-link:hover { background: rgba(255,255,255,.05); }
.nav-link.active {
  color: #fff;
  background: linear-gradient(110deg, rgba(22,132,248,.34), rgba(31,185,231,.12));
  border-color: rgba(79,160,255,.30);
  box-shadow: 0 12px 28px rgba(3,12,25,.18), inset 0 1px 0 rgba(255,255,255,.07);
}
.nav-link .nav-icon { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.035); }
.nav-link.active .nav-icon { background: rgba(60,153,255,.17); }
.server-status { padding: 14px; border-radius: 17px; background: rgba(255,255,255,.04); }
.server-status strong { font-size: 14px; }
.server-status small { font-size: 14px; }

.topbar {
  height: 76px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
  box-shadow: 0 12px 34px rgba(35,73,119,.09);
  backdrop-filter: blur(24px) saturate(135%);
}
.topbar-context { display: none !important; }
.top-actions { margin-inline-start: auto; }
.mobile-header-title { display: grid; }
.mobile-header-title strong { font-size: 22px; }
.mobile-header-title small { font-size: 14px; }
.icon-button,
.user-menu-button,
.connection-pill { border-radius: 14px; }
.icon-button { width: 43px; height: 43px; }
.user-menu-button { min-height: 45px; }

.page-intro {
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
}
.page-intro:not(.dashboard-intro) { padding: 22px 24px; }
.page-intro:not(.dashboard-intro) h1 { font-size: clamp(27px, 2.2vw, 38px); }
.page-intro:not(.dashboard-intro) p { font-size: 14px; }

.dashboard-intro {
  min-height: 132px;
  padding: 24px 27px;
  color: #f7fbff;
  border-color: rgba(84,154,224,.22);
  background:
    radial-gradient(circle at 18% 20%, rgba(31,185,231,.18), transparent 32%),
    linear-gradient(105deg, var(--command-navy), var(--command-navy-2));
  box-shadow: 0 18px 44px rgba(8,31,56,.20), inset 0 1px 0 rgba(255,255,255,.07);
}
.dashboard-intro::before {
  display: block;
  opacity: .52;
  background:
    linear-gradient(rgba(124,185,239,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,185,239,.07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.dashboard-intro h1 { color: #fff; font-size: clamp(25px, 2vw, 35px); }
.dashboard-intro p,
.dashboard-intro .intro-meta > span:not(.live-chip) { color: #99afc6; }
.dashboard-intro .section-kicker { color: #64c9ff; }
.dashboard-intro .primary-action {
  min-width: 210px;
  background: linear-gradient(135deg, #167cf3, #21bee2);
  box-shadow: 0 15px 34px rgba(8,113,221,.30), inset 0 1px 0 rgba(255,255,255,.25);
}

.panel,
.kpi-card,
.asset-card,
.plan-card,
.alert-card,
.history-row,
.work-order-card,
.part-card,
.data-row,
.compliance-kpi,
.compliance-group,
.category-overview-card,
.asset-category-section,
.export-grid a {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 20px; border-radius: 22px; }
.panel-head h2 { font-size: 19px; }
.section-kicker { font-size: 14px; }

.kpi-grid { gap: 14px; margin-bottom: 16px; }
.kpi-card {
  min-height: 158px;
  padding: 18px;
  border-radius: 22px;
}
.kpi-card-top { flex-direction: row-reverse; }
.kpi-index { font-size: 14px; }
.kpi-icon { width: 46px; height: 46px; border-radius: 15px; }
.kpi-main > span { font-size: 14px; }
.kpi-value-line strong { font-size: 34px; }
.kpi-value-line b { font-size: 14px; }
.kpi-main > small { min-height: 26px; font-size: 14px; }
.kpi-progress {
  position: absolute;
  right: 18px;
  bottom: 15px;
  left: 18px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, var(--surface-3));
}
.kpi-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 45%, #fff)); }
.kpi-accent { display: none; }

.panel-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--success) 20%, var(--line));
  border-radius: 999px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 14px;
  font-weight: 900;
}
.panel-live-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.activity-overview { min-height: 220px; display: grid; align-content: center; gap: 18px; }
.activity-bars { display: grid; gap: 14px; }
.activity-bar-row {
  display: grid;
  grid-template-columns: 34px minmax(105px, .7fr) minmax(120px, 2fr) 36px;
  align-items: center;
  gap: 11px;
  color: var(--primary);
}
.activity-bar-row.green { color: var(--success); }
.activity-bar-row.amber { color: var(--warning); }
.activity-bar-row.red { color: var(--danger); }
.activity-bar-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, currentColor 11%, transparent); }
.activity-bar-label { color: var(--text-soft); font-size: 14px; font-weight: 850; }
.activity-bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.activity-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 52%, #fff)); box-shadow: 0 0 16px color-mix(in srgb, currentColor 22%, transparent); }
.activity-bar-row > strong { color: var(--text); font-size: 14px; text-align: left; }
.activity-footnote { display: flex; align-items: center; gap: 9px; padding-top: 13px; color: var(--muted); border-top: 1px solid var(--line); font-size: 14px; }

.critical-row,
.priority-row { min-height: 61px; border-radius: 14px; }
.critical-copy strong,
.priority-copy strong { font-size: 14px; }
.critical-copy span,
.priority-copy span { font-size: 14px; }
.health-gauge { width: 138px; }
.health-gauge strong { font-size: 30px; }
.health-stats span { font-size: 14px; }
.health-stats strong { font-size: 14px; }
.live-note { border-radius: 14px; }

.overview-shortcuts { margin-bottom: 16px; }
.overview-shortcut { border-radius: 19px; box-shadow: var(--shadow-sm); }
.fleet-preview-panel { padding: 22px; }
.fleet-preview-panel .filter-row { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.fleet-preview-panel .filter-chip { border-color: transparent; background: transparent; }
.fleet-preview-panel .filter-chip.active { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); }

.filter-chip { min-height: 35px; padding: 7px 13px; font-size: 14px; }
.primary-action,
.secondary-action { min-height: 46px; border-radius: 14px; }
.primary-mini,
.secondary-mini,
.danger-action,
.ghost-button,
.text-button { border-radius: 12px; }
.modal { border-radius: 26px; }
.modal input,
.modal select,
.modal textarea,
.auth-form input { min-height: 45px; border-radius: 13px; }

@media (min-width: 720px) and (max-width: 1019px) {
  .activity-overview-panel { grid-column: 1 / -1; }
}

@media (min-width: 1020px) {
  :root { --sidebar-width: 258px; }
  .topbar { top: 12px; height: 76px; margin: 12px 18px 0; padding: 10px 18px; }
  .mobile-header-title { display: grid; width: min(34vw, 310px); }
  main { padding: 28px 30px 54px; }
  .dashboard-intro { min-height: 132px; padding: 24px 28px; }
  .dashboard-intro .intro-actions { max-width: none; }
  .dashboard-intro .intro-actions > * { min-width: 210px; }
  .command-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 15px;
  }
  .activity-overview-panel { grid-column: span 8; }
  .alerts-overview-panel { grid-column: span 4; }
  .priority-panel { grid-column: span 8; }
  .health-panel { grid-column: span 4; }
  .activity-overview,
  .critical-preview,
  .priority-list,
  .health-content { min-height: 260px; }
  .health-content { grid-template-columns: 150px minmax(0, 1fr); align-content: center; }
  .health-visual { align-self: center; }
  .health-stats { align-self: center; }
  .live-note { grid-column: 1 / -1; }
}

@media (min-width: 1380px) {
  main { padding-inline: 36px; }
  .kpi-card { min-height: 164px; }
  .activity-overview,
  .critical-preview,
  .priority-list,
  .health-content { min-height: 278px; }
}

@media (max-width: 719px) {
  .topbar { height: 72px; border-radius: 21px; }
  .mobile-header-title strong { font-size: 18px; }
  .mobile-header-title small { font-size: 14px; }
  .dashboard-intro { min-height: 0; padding: 20px; }
  .dashboard-intro h1 { font-size: 25px; }
  .dashboard-intro .primary-action { width: 100%; min-width: 0; }
  .kpi-card { min-height: 136px; padding: 14px; }
  .kpi-icon { width: 39px; height: 39px; }
  .kpi-value-line strong { font-size: 28px; }
  .kpi-main > small { font-size: 14px; }
  .kpi-progress { right: 14px; bottom: 12px; left: 14px; }
  .panel { padding: 16px; }
  .panel-head h2 { font-size: 17px; }
  .activity-overview { min-height: 0; }
  .activity-bar-row { grid-template-columns: 31px minmax(88px, .9fr) minmax(74px, 1.4fr) 28px; gap: 8px; }
  .activity-bar-icon { width: 31px; height: 31px; }
  .activity-bar-label { font-size: 14px; }
  .activity-bar-track { height: 8px; }
  .fleet-preview-panel { padding: 16px; }
  .fleet-preview-panel .filter-row { border-radius: 15px; }
  .page-intro:not(.dashboard-intro) { padding: 18px; }
}

@media (max-width: 380px) {
  .activity-bar-row { grid-template-columns: 29px minmax(78px, .8fr) minmax(54px, 1fr) 24px; gap: 6px; }
  .activity-bar-label { font-size: 14px; }
  .panel-live-chip { display: none; }
}

/* Fleet Control Pro 6.8.22 — faithful command-center dashboard */
.desktop-plan-action { display: none; }

.dashboard-intro.operations-status-strip,
.dashboard-intro {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.25fr) minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 10px 22px;
  margin-bottom: 16px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 48% 150%, rgba(33,184,226,.20), transparent 35%),
    linear-gradient(105deg, #0a2138, #12385d 54%, #0a2138);
  box-shadow: 0 12px 28px rgba(6,28,52,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.dashboard-intro::after { display: none !important; }
.dashboard-intro::before {
  display: block !important;
  opacity: .55;
  background:
    radial-gradient(ellipse at 50% 130%, transparent 42%, rgba(43,172,242,.18) 43%, transparent 44%),
    linear-gradient(90deg, transparent, rgba(52,176,239,.10), transparent) !important;
  background-size: 100% 100% !important;
  mask-image: none !important;
}
.status-health-block,
.status-live-block,
.status-update-block { position: relative; z-index: 1; min-width: 0; }
.status-health-block { display: flex; align-items: center; gap: 12px; }
.status-health-block > div:last-child { display: grid; gap: 3px; }
.status-health-block > div:last-child strong { color: #f4f9ff; font-size: 14px; }
.status-health-block > div:last-child span { color: #95acc2; font-size: 14px; }
.header-health-gauge {
  --gauge-color: #28d49a;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(var(--gauge-color) calc(var(--score) * 1%), rgba(126,163,194,.18) 0);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gauge-color) 20%, transparent);
}
.header-health-gauge::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #0d2945; }
.header-health-gauge strong { position: relative; z-index: 1; color: #fff; font-size: 14px; }
.header-health-gauge.warn { --gauge-color: #f5a524; }
.header-health-gauge.bad { --gauge-color: #ff575f; }
.status-live-block { display: flex; align-items: center; justify-content: center; gap: 11px; color: #f6fbff; }
.status-live-block strong { font-size: 14px; }
.status-update-block { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #a7bbcf; font-size: 14px; text-align: left; }
.status-update-block .status-led { flex: 0 0 7px; width: 7px; height: 7px; }

.kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.kpi-card {
  min-height: 145px;
  padding: 19px 18px 46px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
}
.kpi-card::after { width: 88px; height: 88px; left: 9px; top: 5px; opacity: .035; }
.kpi-card-top { position: absolute; top: 18px; left: 18px; z-index: 2; }
.kpi-index { display: none; }
.kpi-icon { width: 45px; height: 45px; border-radius: 50%; }
.kpi-main { padding-left: 58px; }
.kpi-main > span { font-size: 14px; }
.kpi-value-line strong { font-size: 32px; color: currentColor; }
.kpi-value-line b { font-size: 14px; }
.kpi-main > small { min-height: 0; margin-top: 6px; font-size: 14px; }
.kpi-sparkline {
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 18px;
  height: 27px;
  display: flex;
  align-items: end;
  gap: 4px;
  opacity: .65;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.kpi-sparkline i { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: currentColor; opacity: .55; }
.kpi-progress { display: none; }

.command-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-areas:
    "activity activity activity activity activity activity activity activity alerts alerts alerts alerts"
    "priority priority priority priority priority fleet fleet fleet fleet fleet fleet fleet";
  gap: 14px;
  align-items: stretch;
}
.command-grid > * { direction: rtl; min-width: 0; }
.activity-overview-panel { grid-area: activity; }
.alerts-overview-panel { grid-area: alerts; }
.priority-panel { grid-area: priority; }
.fleet-preview-panel { grid-area: fleet; }
.activity-overview-panel,
.alerts-overview-panel,
.priority-panel,
.fleet-preview-panel { padding: 18px; border-radius: 15px; }
.activity-overview-panel,
.alerts-overview-panel,
.priority-panel { border-top-width: 1px; }
.panel-head { min-height: 40px; margin-bottom: 12px; }
.panel-head h2 { font-size: 18px; }
.panel-count-badge { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--danger); font-size: 14px; }
.panel-footer-link {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 11px 8px 2px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}
.panel-footer-link .ui-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.1;
}
.panel-footer-link:hover,
.panel-footer-link:focus-visible {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.activity-overview {
  min-height: 238px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-content: stretch;
  gap: 12px;
}
.activity-status-card {
  --activity-tone: var(--primary);
  --activity-soft: var(--primary-soft);
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--activity-soft) 25%, var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}
.activity-status-card.cyan { --activity-tone: #17afd1; --activity-soft: rgba(23,175,209,.13); }
.activity-status-card.green { --activity-tone: var(--success); --activity-soft: var(--success-soft); }
.activity-status-card.amber { --activity-tone: var(--warning); --activity-soft: var(--warning-soft); }
.activity-status-card.red { --activity-tone: var(--danger); --activity-soft: var(--danger-soft); }
.activity-status-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--activity-tone) 24%, transparent);
  border-radius: 50%;
  color: var(--activity-tone);
  background: var(--activity-soft);
}
.activity-status-copy { min-width: 0; display: grid; gap: 5px; }
.activity-status-copy strong { overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.activity-status-copy span { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.activity-status-value { min-width: 44px; color: var(--activity-tone); font-size: 31px; font-weight: 950; line-height: 1; text-align: left; }

.critical-preview,
.priority-list { min-height: 238px; align-content: start; }
.critical-row { grid-template-columns: 31px minmax(0,1fr) auto 30px; min-height: 55px; padding: 9px; }
.critical-copy strong { font-size: 14px; }
.priority-row {
  grid-template-columns: 34px minmax(0,1fr) auto auto;
  min-height: 52px;
  padding: 8px 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.priority-row:last-child { border-bottom: 0; }
.priority-row.overdue,
.priority-row.due,
.priority-row.urgent { background: transparent; border-color: var(--line); }
.priority-copy strong { font-size: 14px; }
.priority-copy span { font-size: 14px; }
.overview-complete-button {
  min-height: 29px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 900;
}
.overview-complete-button:hover { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: var(--success-soft); }

.fleet-preview-head { display: grid; gap: 9px; align-items: start; }
.fleet-preview-head .filter-row { width: 100%; flex-wrap: nowrap; gap: 5px; padding: 0; overflow-x: auto; border: 0; border-radius: 0; background: transparent; }
.fleet-preview-head .filter-chip { flex: 1 0 auto; min-height: 29px; padding: 5px 10px; border: 1px solid var(--line); background: var(--surface-2); }
.fleet-preview-head .filter-chip.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--primary-strong)); }
.fleet-preview-list { min-height: 218px; display: grid; align-content: start; }
.fleet-preview-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 52px minmax(110px,.9fr) minmax(150px,1.25fr) 95px;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
}
.fleet-preview-row:last-child { border-bottom: 0; }
.fleet-preview-row.road-asset-summary-clean { grid-template-columns: 52px minmax(0, 1fr); }
.fleet-preview-visual { width: 48px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--primary); background: var(--primary-soft); }
.fleet-preview-visual.truck { color: var(--violet); background: var(--violet-soft); }
.fleet-preview-visual.forklift { color: var(--warning); background: var(--warning-soft); }
.fleet-preview-visual img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.fleet-preview-identity,
.fleet-preview-maintenance,
.fleet-preview-status { min-width: 0; display: grid; gap: 3px; }
.fleet-preview-identity strong,
.fleet-preview-maintenance strong { overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.fleet-preview-identity span,
.fleet-preview-maintenance span,
.fleet-preview-status > span { color: var(--muted); font-size: 14px; }
.fleet-preview-maintenance small { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.fleet-preview-status { justify-items: start; }
.fleet-preview-status .operational-pill { min-height: 24px; }

/* Fleet Control Pro 6.8.23 — one vehicle date editor, dashboard only */
.fleet-preview-row.has-vehicle-dates { padding-block: 9px; }
.dashboard-vehicle-dates {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 4px 0 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-soft) 35%, var(--surface-2));
}
.dashboard-vehicle-dates-title {
  min-height: 34px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.dashboard-vehicle-dates-title > span { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; font-weight: 950; }
.dashboard-vehicle-dates-title > span svg { color: var(--primary); }
.dashboard-vehicle-dates-title small { color: var(--muted); font-size: 14px; }
.dashboard-vehicle-date-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dashboard-vehicle-date-row {
  min-width: 0;
  min-height: 124px;
  padding: 8px;
  display: grid;
  grid-template-columns: 30px minmax(120px, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  align-content: stretch;
  gap: 7px;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dashboard-vehicle-date-icon { grid-column: 1; grid-row: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.dashboard-vehicle-date-row.valid .dashboard-vehicle-date-icon { color: var(--success); background: var(--success-soft); }
.dashboard-vehicle-date-row.urgent .dashboard-vehicle-date-icon,
.dashboard-vehicle-date-row.soon .dashboard-vehicle-date-icon { color: var(--warning); background: var(--warning-soft); }
.dashboard-vehicle-date-row.overdue .dashboard-vehicle-date-icon { color: var(--danger); background: var(--danger-soft); }
.dashboard-vehicle-date-copy { grid-column: 2; grid-row: 1; min-width: 0; display: grid; gap: 2px; }
.dashboard-vehicle-date-copy > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dashboard-vehicle-date-copy > div > span { color: var(--text-soft); font-size: 14px; font-weight: 900; }
.dashboard-vehicle-date-copy > strong { color: var(--text); font-size: 14px; }
.dashboard-vehicle-date-copy > small {
  min-width: 0;
  overflow: visible;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dashboard-vehicle-date-status { padding: 2px 5px; border-radius: 999px; color: var(--muted); background: var(--surface-3); font-size: 14px; font-weight: 900; }
.dashboard-vehicle-date-status.valid { color: var(--success); background: var(--success-soft); }
.dashboard-vehicle-date-status.urgent,
.dashboard-vehicle-date-status.soon { color: var(--warning); background: var(--warning-soft); }
.dashboard-vehicle-date-status.overdue { color: var(--danger); background: var(--danger-soft); }
.dashboard-vehicle-date-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}
.dashboard-vehicle-date-row:not([data-compliance-id]) .dashboard-vehicle-date-actions { grid-template-columns: 1fr; }
.dashboard-date-action {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 9px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}
.dashboard-date-action:hover { color: #fff; border-color: var(--primary); background: var(--primary); }
.dashboard-date-action.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, var(--line)); background: var(--success-soft); }
.dashboard-vehicle-date-loading { padding: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.fleet-preview-row.vehicle-date-focus,
.fleet-preview-row.asset-dashboard-focus { animation: vehicle-date-focus 1.8s ease both; }
@keyframes vehicle-date-focus { 35% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent); } }

.vehicle-date-dialog { width: min(620px, calc(100% - 24px)); }
.vehicle-date-dialog .modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.vehicle-date-context { display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.vehicle-date-context > span { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.vehicle-date-context > div { min-width: 0; display: grid; gap: 3px; }
.vehicle-date-context strong { color: var(--text); font-size: 14px; }
.vehicle-date-context small { color: var(--muted); font-size: 14px; font-weight: 850; }
.vehicle-date-current { min-height: 66px; padding: 10px 12px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.vehicle-date-current span { color: var(--muted); font-size: 14px; font-weight: 850; }
.vehicle-date-current strong { color: var(--text); font-size: 16px; }
.vehicle-date-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.vehicle-date-shortcuts button { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: var(--surface-2); font-size: 14px; font-weight: 900; }
.vehicle-date-shortcuts button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); background: var(--primary-soft); }
.vehicle-date-reminder-note,
.vehicle-date-safety-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.vehicle-date-reminder-note > span,
.vehicle-date-safety-note > span { flex: 0 0 auto; color: var(--primary); }
.vehicle-date-reminder-note > div { min-width: 0; display: grid; gap: 3px; }
.vehicle-date-reminder-note strong { color: var(--text); font-size: 14px; }
.vehicle-date-reminder-note small,
.vehicle-date-safety-note p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Fleet Control Pro 6.8.36 — all annual compliance actions aligned at card bottom */
/* Fleet Control Pro 6.8.37 — clean road-asset dashboard cards without status and next treatment summary */
.dashboard-vehicle-date-row.insurance {
  min-height: 124px;
}
.dashboard-vehicle-date-row.insurance .dashboard-vehicle-date-copy { gap: 3px; }
.dashboard-vehicle-date-row.insurance .dashboard-vehicle-date-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}
.dashboard-vehicle-date-row.insurance .dashboard-date-action {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding-inline: 6px;
}
.dashboard-vehicle-date-row.insurance:not([data-compliance-id]) .dashboard-vehicle-date-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-insurance-summary {
  display: block;
  max-width: 100%;
  overflow: visible;
  color: var(--primary) !important;
  font-size: 14px !important;
  line-height: 1.45;
  font-weight: 900;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dashboard-insurance-summary.empty { color: var(--muted) !important; font-weight: 800; }
.dashboard-insurance-expiry-list { display: grid; gap: 5px; margin-block: 5px 2px; }
.dashboard-insurance-expiry {
  width: 100%; min-height: 38px; padding: 6px 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--text-soft); background: var(--surface-2); font-size: 14px; text-align: start;
}
.dashboard-insurance-expiry:hover { border-color: var(--primary); background: var(--primary-soft); }
.dashboard-insurance-expiry strong { color: var(--text); font-size: 14px; white-space: nowrap; }
.dashboard-insurance-expiry small { color: var(--muted); font-size: 14px; }
.dashboard-insurance-expiry .expiry-value { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px 5px; }
.dashboard-insurance-expiry .expiry-value svg { color: var(--primary); flex: 0 0 auto; }
.insurance-details-action { border-color: color-mix(in srgb, var(--primary) 46%, var(--line)); }
.insurance-details-dialog { width: min(780px, calc(100% - 24px)); }
.insurance-details-dialog form { gap: 15px; }
.insurance-details-head { position: relative; justify-content: center; padding-inline: 46px; text-align: center; }
.insurance-details-head > div { min-width: 0; }
.insurance-details-head h3 { margin-top: 0; font-size: clamp(22px, 4vw, 29px); }
.insurance-details-dialog .modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.insurance-details-head .modal-close { position: absolute; inset-inline-start: 0; top: 0; }
.insurance-details-context {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-2);
}
.insurance-details-context > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: var(--primary-soft);
}
.insurance-details-context > div { min-width: 0; display: grid; gap: 3px; }
.insurance-details-context strong { color: var(--text); font-size: 16px; }
.insurance-details-context small { color: var(--muted); font-size: 14px; font-weight: 850; }
.insurance-details-context output {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}
.insurance-details-fields label > span small { color: var(--muted); font-size: 14px; font-weight: 750; }
.insurance-renewal-date { grid-column: 1 / -1; }
.insurance-renewal-date input { min-height: 50px; border-radius: 13px; font-size: 15px; font-weight: 850; }
.insurance-coverages-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-2);
}
.insurance-coverages-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
}
.insurance-coverages-head > div { min-width: 0; display: grid; gap: 3px; }
.insurance-coverages-head strong { color: var(--text); font-size: 16px; }
.insurance-coverages-head small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.insurance-coverages-head output {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 900;
}
.insurance-coverage-list { display: grid; gap: 12px; padding: 14px; }
.insurance-coverage-row {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-inline-start: 4px solid color-mix(in srgb, var(--primary) 58%, var(--line));
  border-radius: 14px;
  background: var(--surface);
  opacity: .7;
  transition: opacity 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.insurance-coverage-row[data-coverage-tone="green"] { border-inline-start-color: var(--success); }
.insurance-coverage-row[data-coverage-tone="purple"] { border-inline-start-color: #8a6cec; }
.insurance-coverage-row.selected { opacity: 1; border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); box-shadow: 0 7px 20px rgba(35,73,119,.07); }
.insurance-coverage-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 15px; }
.insurance-coverage-expand {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: start;
}
.insurance-coverage-chevron { flex: 0 0 auto; color: var(--muted); transition: transform 150ms ease; }
.insurance-coverage-row.expanded .insurance-coverage-chevron { color: var(--primary); transform: rotate(90deg); }
.insurance-coverage-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.insurance-coverage-identity > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.insurance-coverage-row[data-coverage-tone="green"] .insurance-coverage-identity > span { color: var(--success); background: var(--success-soft); }
.insurance-coverage-row[data-coverage-tone="purple"] .insurance-coverage-identity > span { color: #8a6cec; background: color-mix(in srgb, #8a6cec 13%, transparent); }
.insurance-coverage-identity > div { min-width: 0; display: grid; gap: 2px; }
.insurance-coverage-identity b { color: var(--text); font-size: 16px; }
.insurance-coverage-identity small { color: var(--muted); font-size: 14px; font-weight: 750; }
.insurance-coverage-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; font-weight: 900; cursor: pointer; }
.insurance-coverage-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.insurance-coverage-switch i { position: relative; width: 46px; height: 26px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); transition: background-color 140ms ease, border-color 140ms ease; }
.insurance-coverage-switch i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); box-shadow: 0 1px 4px rgba(20,35,55,.2); transition: transform 140ms ease, background-color 140ms ease; }
.insurance-coverage-switch input:checked + i { border-color: var(--success); background: var(--success); }
.insurance-coverage-switch input:checked + i::after { background: #fff; transform: translateX(-20px); }
.insurance-coverage-switch input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 2px; }
.insurance-coverage-collapsed-summary {
  display: block;
  margin: -8px 67px 13px 15px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}
.insurance-coverage-row.expanded .insurance-coverage-collapsed-summary { display: none; }
.insurance-coverage-row > .insurance-coverage-expiry { display: none; margin: 0 15px 13px; padding: 10px 12px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.insurance-coverage-row.selected > .insurance-coverage-expiry { display: flex; }
.insurance-coverage-row > .insurance-coverage-expiry > span { color: var(--text); font-size: 14px; font-weight: 850; }
.insurance-coverage-row > .insurance-coverage-expiry input { width: min(205px, 55%); min-height: 46px; border-radius: 9px; font-size: 15px; }
.insurance-coverage-body {
  display: none;
  gap: 14px;
  padding: 15px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--primary-soft));
}
.insurance-coverage-row.expanded .insurance-coverage-body { display: grid; }
.insurance-coverage-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(155px, .42fr); gap: 12px; }
.insurance-coverage-name, .insurance-coverage-cost, .insurance-coverage-expiry { min-width: 0; display: grid; gap: 6px; }
.insurance-coverage-name > span, .insurance-coverage-cost > span, .insurance-coverage-expiry > span { color: var(--text-soft); font-size: 14px; font-weight: 850; }
.insurance-coverage-expiry input { width: 100%; min-height: 48px; border-radius: 11px; font-size: 15px; }
.insurance-renewal-date small { color: var(--muted); font-size: 14px; }
.insurance-name-input, .insurance-money-input { position: relative; }
.insurance-name-input > span { position: absolute; z-index: 1; inset-inline-start: 13px; top: 50%; display: grid; place-items: center; color: var(--primary); transform: translateY(-50%); pointer-events: none; }
.insurance-name-input input { width: 100%; min-height: 48px; padding-inline: 45px 13px; border-radius: 11px; font-size: 15px; font-weight: 800; }
.insurance-coverage-name input:disabled, .insurance-coverage-cost input:disabled, .insurance-coverage-expiry input:disabled { opacity: .5; cursor: not-allowed; }
.insurance-payment-schedule {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.insurance-payment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insurance-payment-head strong { color: var(--text); font-size: 16px; }
.insurance-payment-head output { padding: 6px 9px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 14px; font-weight: 850; }
.insurance-payment-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.insurance-payment-dates:empty::before {
  content: 'לא הוזנו מועדי תשלום';
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.insurance-payment-date { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.insurance-payment-date label { min-width: 0; display: grid; gap: 6px; }
.insurance-payment-number { color: var(--muted); font-size: 14px; font-weight: 850; }
.insurance-payment-date label > div { position: relative; min-width: 0; }
.insurance-payment-date label > div > span { position: absolute; z-index: 1; inset-inline-start: 11px; top: 50%; display: grid; place-items: center; color: var(--primary); transform: translateY(-50%); pointer-events: none; }
.insurance-payment-date input { width: 100%; min-height: 44px; padding-inline-start: 42px; border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 850; }
.insurance-payment-date > button { width: 38px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--danger); background: var(--surface); }
.insurance-payment-date > button:hover { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.insurance-add-payment { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed color-mix(in srgb, var(--primary) 58%, var(--line)); border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 3%, transparent); font-size: 14px; font-weight: 900; }
.insurance-add-payment:hover:not(:disabled) { background: var(--primary-soft); }
.insurance-add-payment:disabled { opacity: .5; cursor: not-allowed; }
.insurance-payment-info { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); }
.insurance-payment-info > span { flex: 0 0 auto; }
.insurance-payment-info small { color: var(--text-soft); font-size: 14px; line-height: 1.45; }
.insurance-cost-summary { display: grid; gap: 13px; margin: 0 14px 14px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.insurance-cost-summary > strong { color: var(--text); font-size: 16px; text-align: center; }
.insurance-cost-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insurance-cost-breakdown > div { min-width: 0; display: grid; gap: 5px; padding: 5px 10px; border-inline-start: 1px solid var(--line); text-align: center; }
.insurance-cost-breakdown > div:first-child { border-inline-start: 0; }
.insurance-cost-breakdown span { color: var(--muted); font-size: 14px; font-weight: 800; }
.insurance-cost-breakdown output { color: var(--text); font-size: 17px; font-weight: 950; }
.insurance-coverages-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
  font-size: 16px;
  font-weight: 950;
}
.insurance-coverages-total output { color: var(--primary); font-size: 24px; font-weight: 950; }
.insurance-reminder-fieldset { margin: 0; }
.insurance-reminder-fieldset .simple-reminder-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.insurance-money-input input { width: 100%; min-height: 46px; padding-inline-end: 74px; border-radius: 11px; font-size: 15px; font-weight: 900; }
.insurance-money-input b { position: absolute; inset-inline-end: 12px; top: 50%; color: var(--muted); font-size: 14px; transform: translateY(-50%); pointer-events: none; }
.insurance-details-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}
.insurance-details-note > span { flex: 0 0 auto; color: var(--primary); }
.insurance-details-note p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.insurance-details-note strong { color: var(--text-soft); }
#insuranceDetailsDeliveryNote.mail-ready { border-color: color-mix(in srgb, var(--success) 32%, var(--line)); background: color-mix(in srgb, var(--success) 7%, var(--surface-soft)); }
#insuranceDetailsDeliveryNote.mail-ready > span { color: var(--success); }
#insuranceDetailsDeliveryNote > div { min-width: 0; display: grid; gap: 2px; }
#insuranceDetailsDeliveryNote strong { color: var(--text); font-size: 14px; }
#insuranceDetailsDeliveryNote small { color: var(--muted); font-size: 14px; line-height: 1.45; }

@media (max-width: 719px) {
  .insurance-details-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .insurance-details-fields { grid-template-columns: 1fr; }
  .insurance-renewal-date { grid-column: auto; }
  .insurance-coverage-list { gap: 10px; padding: 10px; }
  .insurance-details-context { grid-template-columns: 42px minmax(0, 1fr); }
  .insurance-details-context output { grid-column: 1 / -1; width: 100%; text-align: center; }
  .insurance-coverage-row-head { padding: 13px; }
  .insurance-coverage-body { padding: 12px; }
  .insurance-coverage-fields { grid-template-columns: 1fr; }
  .insurance-coverage-row.selected > .insurance-coverage-expiry { display: grid; margin-inline: 12px; }
  .insurance-coverage-row > .insurance-coverage-expiry input { width: 100%; }
  .insurance-coverage-identity small { display: none; }
  .insurance-money-input input { padding-inline-end: 68px; }
  .insurance-coverages-head { align-items: flex-start; }
  .insurance-coverages-head small { display: none; }
  .insurance-reminder-fieldset .simple-reminder-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-vehicle-date-row.insurance { min-height: 132px; }
}

@media (max-width: 479px) {
  .insurance-payment-dates { grid-template-columns: 1fr; }
  .insurance-payment-head { align-items: flex-start; }
  .insurance-payment-head output { max-width: 48%; text-align: center; }
  .insurance-cost-breakdown { gap: 0; }
  .insurance-cost-breakdown > div { padding-inline: 5px; }
  .insurance-cost-breakdown output { font-size: 15px; }
  .insurance-coverages-total { align-items: flex-end; }
}

@media (min-width: 1020px) {
  :root { --sidebar-width: 218px; }
  .workspace { margin-right: var(--sidebar-width); }
  .topbar { position: sticky; height: 84px; margin: 0; border-width: 0 0 1px; border-radius: 0; box-shadow: 0 5px 24px rgba(35,73,119,.06); }
  .desktop-plan-action { display: inline-flex; position: absolute; z-index: 3; right: 22px; top: 18px; min-width: 218px; }
  .top-actions { position: absolute; z-index: 3; left: 22px; top: 18px; margin: 0; }
  .mobile-header-title { width: 320px; }
  main { width: 100%; max-width: 1720px; padding: 16px 22px 42px; }
  .dashboard-intro { min-height: 72px; padding: 9px 22px; }
  .activity-overview-panel { grid-area: activity; }
  .alerts-overview-panel { grid-area: alerts; }
  .priority-panel { grid-area: priority; }
  .fleet-preview-panel { grid-area: fleet; }
}

@media (min-width: 1500px) {
  main { padding-inline: 26px; }
  .command-grid { gap: 16px; }
  .kpi-card { min-height: 150px; }
}

@media (max-width: 1019px) {
  .command-grid {
    direction: rtl;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-areas:
      "activity activity"
      "alerts priority"
      "fleet fleet";
  }
  .command-grid > * { direction: rtl; }
}

@media (max-width: 719px) {
  .desktop-plan-action { display: none !important; }
  .dashboard-intro {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 13px;
    border-radius: 17px;
  }
  .status-health-block { gap: 8px; }
  .header-health-gauge { width: 46px; height: 46px; flex-basis: 46px; }
  .status-live-block { justify-content: flex-start; }
  .status-live-block strong { font-size: 14px; }
  .status-update-block { grid-column: 1 / -1; justify-content: flex-start; padding-top: 9px; border-top: 1px solid rgba(145,179,208,.14); text-align: right; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi-card { min-height: 138px; padding: 15px 13px 42px; }
  .kpi-card-top { top: 13px; left: 13px; }
  .kpi-icon { width: 38px; height: 38px; }
  .kpi-main { padding-left: 38px; }
  .kpi-value-line { display: grid; gap: 3px; }
  .kpi-value-line strong { font-size: 27px; }
  .kpi-sparkline { right: 13px; left: 13px; }
  .command-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "activity" "alerts" "priority" "fleet"; }
  .activity-overview { min-height: 0; grid-template-columns: 1fr; gap: 9px; }
  .activity-status-card { min-height: 72px; grid-template-columns: 43px minmax(0,1fr) auto; padding: 10px 12px; }
  .activity-status-icon { width: 40px; height: 40px; }
  .activity-status-value { font-size: 29px; }
  .critical-preview,
  .priority-list { min-height: 0; }
  .priority-row { grid-template-columns: 32px minmax(0,1fr) auto; }
  .priority-due { grid-column: 2; }
  .overview-complete-button { grid-column: 3; grid-row: 1 / span 2; }
  .fleet-preview-row { grid-template-columns: 45px minmax(90px,1fr) auto; }
  .fleet-preview-row.road-asset-summary-clean { grid-template-columns: 45px minmax(0, 1fr); }
  .fleet-preview-maintenance { grid-column: 2; }
  .fleet-preview-status { grid-column: 3; grid-row: 1 / span 2; }
  .fleet-preview-visual { width: 42px; height: 39px; }
  .dashboard-vehicle-date-rows { grid-template-columns: 1fr; }
  .dashboard-vehicle-date-row { border-inline-end: 0; }
  .dashboard-vehicle-dates-title { align-items: flex-start; }
  .dashboard-vehicle-dates-title small { max-width: 135px; text-align: left; }
  .compact-fleet-card { min-height: 178px; gap: 14px; padding: 13px; }
  .compact-fleet-icon { width: 46px; height: 46px; }
  .compact-fleet-card-head { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; }
  .compact-fleet-identity h3 { font-size: 14px; }
  .compact-fleet-identity strong { font-size: 14px; }
  .open-asset-in-dashboard { min-height: 42px; padding: 8px 13px; font-size: 14px; }
  .compact-fleet-edit { width: 36px; min-width: 36px; min-height: 36px; }
  .vehicle-date-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .vehicle-date-fields { grid-template-columns: 1fr; }
}

@media (max-width: 410px) {
  .status-health-block > div:last-child span { display: none; }
  .status-live-block strong { font-size: 14px; }
  .activity-status-card { grid-template-columns: 40px minmax(0,1fr) auto; gap: 9px; }
  .activity-status-icon { width: 38px; height: 38px; }
  .activity-status-copy strong { font-size: 14px; }
  .activity-status-value { min-width: 34px; font-size: 27px; }
  .fleet-preview-head .filter-chip { min-height: 28px; padding: 5px 8px; }
}

/* Fleet Control Pro 6.8.30 — readable typography and non-overlapping navigation */
body {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

small { font-size: 14px; }

.nav-link b,
.bottom-link b {
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  font-size: 14px;
  flex: none;
}

@media (min-width: 1020px) {
  :root { --sidebar-width: 252px; }

  .sidebar {
    padding-inline: 18px;
  }

  .sidebar-brand {
    gap: 14px;
    padding-inline: 9px;
  }

  .sidebar-brand > div {
    flex: 1;
    min-width: 0;
  }

  .sidebar-brand strong {
    white-space: nowrap;
  }

  .sidebar-brand small {
    line-height: 1.25;
    white-space: normal;
  }

  .side-nav {
    gap: 8px;
    max-height: calc(100vh - 245px);
    padding: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .nav-link {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    column-gap: 13px;
    min-height: 58px;
    padding: 9px 13px;
    font-size: 14px;
    line-height: 1.35;
  }

  .nav-link .nav-icon {
    width: 38px;
    height: 38px;
  }

  .nav-link > span:not(.nav-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-link > b {
    justify-self: end;
  }

  .sidebar-footer {
    right: 18px;
    left: 18px;
  }
}

/* Fleet Control Pro 6.8.71 — insurance payment schedules and professional totals.
   No full-page snapshots or staggered card animations are used. */
:root {
  --motion-quick: 120ms;
  --motion-calm: 160ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Fleet Control Pro 6.8.70 — make Excel export unmistakably visible on desktop. */
.desktop-export-nav { display: none; }

@media (min-width: 1020px) {
  .desktop-export-nav {
    display: grid;
    border-color: rgba(51, 169, 255, .18);
    color: #a9d9ff;
    background: rgba(30, 139, 238, .07);
  }

  .desktop-export-nav:hover,
  .desktop-export-nav.active {
    color: #fff;
    border-color: rgba(54, 168, 255, .42);
    background: linear-gradient(135deg, rgba(24, 124, 232, .28), rgba(22, 183, 224, .16));
  }

  .desktop-export-shortcut { display: inline-flex !important; }

  .operations-tab[data-ops-tab="export"] {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  }

  .operations-tab[data-ops-tab="export"].active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  }
}

.view.active {
  animation: fleet-lite-view-in var(--motion-calm) var(--motion-ease) both;
}

@keyframes fleet-lite-view-in {
  from { opacity: .88; transform: translate3d(0, 2px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.modal[open] {
  animation: fleet-lite-dialog-in 170ms var(--motion-ease) both;
}

.modal[open]::backdrop {
  animation: fleet-lite-backdrop-in 140ms ease-out both;
}

@keyframes fleet-lite-dialog-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fleet-lite-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.toast {
  transition: opacity var(--motion-calm) ease,
              transform var(--motion-calm) var(--motion-ease);
}

.nav-link,
.bottom-link,
.primary-action,
.secondary-action,
.primary-mini,
.secondary-mini,
.icon-button,
.row-action,
.icon-plain,
.filter-chip {
  transition-duration: var(--motion-quick);
  transition-timing-function: ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover .nav-icon,
  .bottom-link:hover .ui-icon {
    transform: translate3d(0, -1px, 0);
    transition: transform var(--motion-quick) ease-out;
  }
}

.primary-action:active,
.secondary-action:active,
.primary-mini:active,
.secondary-mini:active,
.icon-button:active,
.row-action:active,
.icon-plain:active,
.filter-chip:active {
  transform: translate3d(0, 1px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .modal[open],
  .modal[open]::backdrop {
    animation: none !important;
  }

  .toast,
  .nav-link,
  .bottom-link,
  .primary-action,
  .secondary-action,
  .primary-mini,
  .secondary-mini,
  .icon-button,
  .row-action,
  .icon-plain,
  .filter-chip {
    transition: none !important;
  }
}

/* Fleet Control Pro 6.8.30 — Hebrew-only headings */
.panel-head h2:first-child,
.panel-head h3:first-child,
.page-intro h1:first-child,
.modal-head h3:first-child,
.access-section-head h3:first-child {
  margin-top: 0;
}

.sidebar-brand > div,
.auth-brand > div {
  align-content: center;
}

.mobile-header-title {
  place-content: center;
}

@media (max-width: 719px) {
  .bottom-nav {
    min-height: calc(80px + env(safe-area-inset-bottom));
  }

  .bottom-link {
    min-width: 0;
    gap: 4px;
    padding-inline: 3px;
  }

  .bottom-link small {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* Fleet Control Pro 6.8.72 — navigation scrolling reliability fix only.
   Keep the current layout unchanged; only make navigation containers scroll when space is insufficient. */
@media (min-width: 1020px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 38%, transparent) transparent;
  }

  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 34%, transparent);
  }

  .sidebar-brand { flex: 0 0 auto; }

  .side-nav {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 12px;
  }

  .sidebar-footer {
    position: static;
    right: auto;
    left: auto;
    bottom: auto;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 10px;
  }
}

@media (max-width: 1019px) {
  .bottom-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bottom-nav::-webkit-scrollbar { display: none; }

  .bottom-link {
    flex: 1 0 68px;
    min-width: 68px;
  }
}
/* Fleet Control Pro 6.8.73 — scoped insurance payment and test cost fields. */
.insurance-details-dialog .insurance-payment-method,
.vehicle-date-dialog .vehicle-test-cost-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.insurance-details-dialog .insurance-payment-method input,
.vehicle-date-dialog .vehicle-test-cost-field input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border-radius: 11px;
  font-size: 16px;
}
.insurance-details-dialog .insurance-payment-method small,
.vehicle-date-dialog .vehicle-test-cost-field small {
  color: var(--muted);
  font-size: 14px;
}
.vehicle-date-dialog .vehicle-test-cost-field { margin: 14px 0; }
.vehicle-date-dialog .vehicle-test-cost-field[hidden] { display: none !important; }

/* Fleet Control Pro 6.8.74 — stable reminder cards and single-line due badges. */
.compliance-main-panel {
  container-name: compliance-cards;
  container-type: inline-size;
}
#complianceGroups .compliance-table-head,
#complianceGroups .compliance-row {
  grid-template-columns: minmax(155px, 1.3fr) minmax(150px, 1.15fr) 110px minmax(125px, .9fr) 130px 110px;
}
#complianceGroups .compliance-action-label { display: none; }
#complianceUpcoming .compliance-upcoming-item {
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-areas: "days open" "copy copy";
  align-items: start;
  gap: 8px 10px;
  padding: 12px;
}
#complianceUpcoming .upcoming-days {
  grid-area: days;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  height: auto;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
#complianceUpcoming .upcoming-open { grid-area: open; justify-self: end; }
#complianceUpcoming .upcoming-copy { grid-area: copy; width: 100%; min-width: 0; }
#complianceUpcoming .upcoming-title {
  display: block;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
  overflow-wrap: anywhere;
}
#complianceUpcoming .upcoming-meta time { white-space: nowrap; }

@media (max-width: 900px) {

  #complianceGroups .compliance-table-head { display: none; }
  #complianceGroups .compliance-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "asset status" "kind kind" "date date" "remaining remaining" "actions actions";
    align-items: start;
    gap: 10px 12px;
    padding: 12px;
  }
  #complianceGroups .compliance-asset { grid-area: asset; }
  #complianceGroups .compliance-kind { grid-area: kind; padding-right: 0; }
  #complianceGroups .compliance-row > time { grid-area: date; padding-right: 0; }
  #complianceGroups .compliance-remaining { grid-area: remaining; padding-right: 0; }
  #complianceGroups .compliance-status { grid-area: status; align-self: start; }
  #complianceGroups .compliance-asset strong,
  #complianceGroups .compliance-asset small,
  #complianceGroups .compliance-kind strong,
  #complianceGroups .compliance-kind small,
  #complianceGroups .compliance-remaining small {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #complianceGroups .compliance-actions {
    grid-area: actions;
    align-self: auto;
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  #complianceGroups .compliance-actions .icon-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
  }
  #complianceGroups .compliance-actions .ui-icon { flex: 0 0 auto; }
  #complianceGroups .compliance-action-label { display: inline; }
}

@container compliance-cards (max-width: 880px) {

  #complianceGroups .compliance-table-head { display: none; }
  #complianceGroups .compliance-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "asset status" "kind kind" "date date" "remaining remaining" "actions actions";
    align-items: start;
    gap: 10px 12px;
    padding: 12px;
  }
  #complianceGroups .compliance-asset { grid-area: asset; }
  #complianceGroups .compliance-kind { grid-area: kind; padding-right: 0; }
  #complianceGroups .compliance-row > time { grid-area: date; padding-right: 0; }
  #complianceGroups .compliance-remaining { grid-area: remaining; padding-right: 0; }
  #complianceGroups .compliance-status { grid-area: status; align-self: start; }
  #complianceGroups .compliance-asset strong,
  #complianceGroups .compliance-asset small,
  #complianceGroups .compliance-kind strong,
  #complianceGroups .compliance-kind small,
  #complianceGroups .compliance-remaining small {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #complianceGroups .compliance-actions {
    grid-area: actions;
    align-self: auto;
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  #complianceGroups .compliance-actions .icon-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
  }
  #complianceGroups .compliance-actions .ui-icon { flex: 0 0 auto; }
  #complianceGroups .compliance-action-label { display: inline; }
}

/* Fleet Control Pro 6.8.75 — annual renewal previews and manual date corrections. */
#complianceCompleteDialog .completion-next-card > div { min-width: 0; }
#complianceCompleteDialog .completion-next-date-field,
#complianceCompleteDialog .completion-renewal-coverages {
  display: grid;
  min-width: 0;
  gap: 10px;
}
#complianceCompleteDialog .completion-next-date-field > span,
#complianceCompleteDialog .completion-renewal-coverages > strong { color: var(--text); font-size: 14px; }
#complianceCompleteDialog .completion-next-date-field > small,
#complianceCompleteDialog .completion-renewal-coverages > small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
#complianceCompleteDialog .completion-editable-date {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#complianceCompleteDialog .completion-editable-date > svg,
#complianceCompleteDialog .completion-editable-date > span { flex: 0 0 auto; color: var(--primary); }
#complianceCompleteDialog .completion-editable-date input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  font-size: 16px;
  border-radius: 10px;
}
#complianceCompleteDialog #completionRenewalCoverageRows { display: grid; gap: 10px; min-width: 0; }
#complianceCompleteDialog .completion-renewal-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
#complianceCompleteDialog .completion-renewal-row > strong { color: var(--text); font-size: 14px; }
#complianceCompleteDialog .completion-renewal-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
  min-width: 0;
}
#complianceCompleteDialog .completion-renewal-dates > div,
#complianceCompleteDialog .completion-renewal-dates > label { display: grid; gap: 6px; min-width: 0; }
#complianceCompleteDialog .completion-renewal-dates small,
#complianceCompleteDialog .completion-renewal-dates label > span { color: var(--muted); font-size: 14px; }
#complianceCompleteDialog .completion-renewal-dates strong { align-self: center; color: var(--text); font-size: 16px; }
#complianceCompleteDialog .completion-renewal-inactive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
@media (max-width: 479px) {
  #complianceCompleteDialog .completion-renewal-dates { grid-template-columns: minmax(0, 1fr); }
}