: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: 8px; 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: 12px;
  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: 9px;
  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: 10px; }
.server-status small { display: block; color: #6f8497; font-size: 8px; 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: 10px;
  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); }
.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: 9px;
  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: 11px; line-height: 1.65; }
.section-kicker { color: var(--primary); font-size: 9px; 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: 9px; 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: 10px; }
.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: 10px; 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: 8px; 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: 9px; 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: 8px; font-weight: 750; }
.kpi-main > small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; 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: 10px; }
.critical-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; color: var(--muted); font-size: 8px; }
.critical-row time { color: var(--muted); font-size: 7px; 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: 10px; }
.priority-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; color: var(--muted); font-size: 8px; }
.priority-due { display: grid; justify-items: end; gap: 4px; }
.priority-due strong { color: var(--text-soft); font-size: 8px; white-space: nowrap; }
.status-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; border-radius: 7px; font-size: 7px; 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: 8px; }
.health-gauge.warn { --gauge-color: var(--warning); }
.health-gauge.bad { --gauge-color: var(--danger); }
.health-caption { color: var(--muted); font-size: 7px; 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: 8px; }
.health-stats strong { font-size: 12px; }
.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: 8px; }
.live-note small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; }

/* 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: 8px;
  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: 13px; }
.asset-identification > div > span:last-child { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.asset-class { color: var(--primary) !important; font-size: 7px !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: 7px; 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: 8px; }
.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: 9px; 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: 7px; }
.maintenance-heading strong { display: block; margin-top: 3px; font-size: 9px; }
.maintenance-heading > b { align-self: center; color: var(--warning); font-size: 7px; }
.asset-due { margin-top: 8px; color: var(--muted); font-size: 7px; }
.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: 8px; }
.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: 8px; }
.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: 10px; font-weight: 850; }
.plan-asset small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--muted); font-size: 7px; }
.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: 7px; }
.plan-title-row h3 { margin: 4px 0 0; font-size: 13px; }
.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: 7px; }
.plan-metrics strong { display: block; margin-top: 5px; font-size: 11px; }
.progress-block { margin-top: 12px; }
.progress-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 8px; }
.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: 8px; }
.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: 7px; font-weight: 950; letter-spacing: .08em; }
.alert-title-line h3 { margin: 3px 0 0; font-size: 13px; }
.alert-title-line time { color: var(--muted); font-size: 7px; }
.alert-body p { margin: 10px 0; color: var(--text-soft); font-size: 9px; 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: 7px; }
.history-title span { color: var(--muted); font-size: 7px; }
.history-title h3 { margin: 4px 0 0; font-size: 12px; }
.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: 7px; }
.history-main p { margin: 9px 0 0; color: var(--text-soft); font-size: 8px; 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: 7px; 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: 10px; }
.empty-state span { display: block; margin-top: 4px; font-size: 8px; }
.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: 8px; 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: 9px; 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: 8px; 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: 10px; 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: 7px; 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: 11px; }
  .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: 8px; 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: 9px; }
.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: 8px; }
.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: 8px;
  font-weight: 850;
}
.asset-tool:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 36%, var(--line)); background: var(--primary-soft); }
.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: 13px; }
.add-asset-tile span { color: var(--muted); font-size: 9px; }
.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: 9px; }
.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: 12px; }
.asset-image-preview small { color: var(--muted); font-size: 8px; }
.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: 8px; 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: 11px;
  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: 11px; 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: 12px; }
.secondary-metric-heading small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; 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: 9px;
}
.asset-secondary-summary strong { color: var(--text); font-size: 10px; }
@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: 12px; }
.asset-image-title small { color: var(--muted); font-size: 8px; 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: 8px; }
.asset-identifier-line strong { justify-self: end; color: var(--text); font-size: 11px; 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: 9px; 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; }
.category-overview-card strong { font-size: 13px; color: var(--text); }
.category-overview-card small { color: var(--muted); font-size: 8px; }
.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: 7px;
  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: var(--muted);
  font-size: 7px;
}
.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: 8px;
  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: 7px; 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: 7px; 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: 8px;
  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: 6px; }
  .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: 10px; }
.category-board-help small { color: var(--muted); font-size: 8px; 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: 7px; 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: 8px; }
.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: 11px; }
.category-empty span { font-size: 8px; }
.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: 8px;
  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: 8px; 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: 8px;
  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: 8px; 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: 9px; }
  .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: 9px;
  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: 9px; }
}


/* 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; }
.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:.78rem}.ops-kpi strong{font-size:1.55rem;white-space:nowrap}.ops-kpi b{font-size:.75rem;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:.78rem}.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:.72rem;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:.75rem;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:.7rem}.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:.68rem}.part-metrics strong{display:block;margin-top:4px;font-size:.85rem}
.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:.77rem}.data-row-side{display:flex;align-items:center;gap:11px;justify-content:flex-end}.data-row-side>span{color:var(--muted);font-size:.75rem}.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:.7rem}.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)}
.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:.62rem}
  .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:.74rem}
  .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: .82rem;
  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:.78rem}.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:.68rem}.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:.72rem}.stock-part-snapshot>b{color:#8dd9ff;font-size:.76rem;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:.76rem;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:.7rem}.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:.84rem}.flow-card small,.flow-card b{font-size:.61rem}.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:.68rem}
@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: 9px; 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: 12px; }
.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: 13px; 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: 12px; 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: 10px; }
.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: 12px; 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: 10px; }
.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: 12px; 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: 11px; }
.user-button-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.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: 12px; }
.user-menu-profile small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.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: 11px; 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: 10px; }
.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: 13px; }
.user-row-main p, .role-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.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: 9px; 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: 8px; }
.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: 12px; }
.permission-group button { border: 0; color: var(--primary); background: transparent; font-size: 9px; 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: 10px; }
.permission-option small { margin-top: 2px; color: var(--muted); font-size: 8px; 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: 11px; }
[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: 11px; 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: 10px; font-weight: 900; }
.role-profile-grid input { min-height: 46px; font-size: 13px; }
.role-profile-grid small { margin-top: 1px; color: var(--muted); font-size: 9px; 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: 9px;
  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: 10px; }
.permission-toolbar-summary span { color: var(--muted); font-size: 9px; }

.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: 13px; }
.permission-group-heading small { overflow: hidden; color: var(--muted); font-size: 8px; 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: 8px;
  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: 8px;
  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: 11px; line-height: 1.4; }
.permission-option-copy > span { grid-area: description; color: var(--text-soft); font-size: 9px; 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: 8px; 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: 11px; }
  .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: 12px; }
  .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: 11px; }
  .permission-option-copy > span { font-size: 8.5px; }
  .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: 10px; }
}
.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: 8px; font-weight: 850; }
.compliance-kpi strong { color: var(--text); font-size: 27px; line-height: 1; }
.compliance-kpi small { color: var(--muted); font-size: 8px; }
.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: 12px; }
.compliance-group header small { color: var(--muted); font-size: 7px; }
.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: 8px; 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: 7px; 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: 9px; 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: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-status { justify-self: start; padding: 6px 9px; border-radius: 8px; font-size: 7px; 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-list { display: grid; gap: 4px; }
.compliance-upcoming-item { width: 100%; display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text); text-align: right; background: transparent; }
.compliance-upcoming-item:last-child { border-bottom: 0; }
.compliance-upcoming-item > div { min-width: 0; display: grid; gap: 2px; }
.compliance-upcoming-item > div strong { font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-upcoming-item > div small { color: var(--muted); font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-days { width: 42px; height: 42px; display: grid; place-items: center; align-content: center; border-radius: 11px; color: #67b0ff; background: rgba(67,145,255,.1); }
.upcoming-days strong { font-size: 14px; line-height: 1; }
.upcoming-days small { font-size: 6px; }
.upcoming-days.overdue { color: #ff727c; background: rgba(244,64,80,.12); }
.upcoming-days.urgent { color: #ffc15d; background: rgba(255,165,35,.12); }
.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: 9px; color: var(--text); }
.mail-status-card small { font-size: 7px; 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: 9px; }
.mail-provider-note small { color: var(--muted); font-size: 7px; 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: .54rem; }
}

/* 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: 10px; }
.gmail-connection-state small { color: var(--muted); font-size: 8px; 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: 10px;
  font-weight: 950;
}
.quick-gmail-steps strong { color: var(--text); font-size: 8px; }
.quick-gmail-steps small { color: var(--muted); font-size: 7px; line-height: 1.45; }
.quick-gmail-field { display: grid; gap: 6px; }
.quick-gmail-field > span { color: var(--text-soft); font-size: 9px; font-weight: 900; }
.quick-gmail-field > small { color: var(--muted); font-size: 7px; 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: 9px; }
.quick-gmail-auto-note small { color: var(--muted); font-size: 7px; 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: 8px; 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: 9px; font-weight: 850; }
.simple-alert-date-row { gap: 10px; }
.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: 8px; 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: 9px; }
.simple-alert-delivery-note small { font-size: 8px; 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: 8px; 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: 8px; font-weight: 850; }
.custom-reminder-field > small { color: var(--muted); font-size: 7px; line-height: 1.45; }
.custom-reminder-field input { min-height: 42px; }
.simple-alert-save { min-height: 46px; font-size: 10px; }

/* 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: 9px; }
.completion-flow small { color: var(--muted); font-size: 8px; }
.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: 8px; }
.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: 8px; 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: 12px;
  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: 10px; }
.google-step-content > small { color: var(--muted); font-size: 8px; 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: 8px; font-weight: 850; }
.google-code-fallback textarea { margin-top: 8px; min-height: 150px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; 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: 10px; font-weight: 900; }
.fixed-recipient-field input { min-height: 46px; font-size: 12px; font-weight: 800; }
.fixed-recipient-field small { color: var(--muted); font-size: 8px; 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: 8px;
  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: 13px;
  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: 8px; }
.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: 9px; }
.google-connection-setup > summary small { font-size: 7px; 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: 9px; }
.fixed-recipient-note small { color: var(--muted); font-size: 8px; 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; }
}