/* ניהול מוסך — מוסך אבי. קונספט: "רצפת סדנה" — תפריט גרפיט כמו לוח מכשירים, כתום אות (פנס/בטיחות) כצבע פעולה,
 * רקע בטון בהיר, לוחיות רישוי צהובות, טבלאות צפופות ומדויקות. IBM Plex Sans Hebrew לגוף, Rubik לכותרות ומספרים. */
:root {
  --font: 'IBM Plex Sans Hebrew', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Rubik', 'IBM Plex Sans Hebrew', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --brand: #c2410c; --brand-ink: #ffffff; --brand-soft: #fdebdf;
  --bg: #eceef1; --surface: #ffffff; --side: #17191c; --side-ink: #e6e8eb;
  --line: #d9dde3; --text: #14171b; --muted: #5b6470;
  --info: #1f5fbf; --info-soft: #e5edfa;
  --radius: 6px; --side-w: 236px;
  --plate-bg: #f5c400; --plate-ink: #111111; --plate-edge: #1b1b1b;
  --steel: #8a94a1; --track: #e3e6ea; --done: #9aa3ae;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --brand: #ff7a33; --brand-ink: #1c0c03; --brand-soft: #3a1d0d;
  --bg: #0e1012; --surface: #171a1e; --side: #0a0b0d; --side-ink: #e1e4e8;
  --line: #2a2f36; --text: #e7eaee; --muted: #98a2ae; --info: #7fb0ff; --info-soft: #18263d;
  --plate-bg: #e8b900; --plate-ink: #0d0d0d; --plate-edge: #000000;
  --steel: #6d7682; --track: #22272d; --done: #4b535d } }
:root[data-theme="dark"] {
  --brand: #ff7a33; --brand-ink: #1c0c03; --brand-soft: #3a1d0d;
  --bg: #0e1012; --surface: #171a1e; --side: #0a0b0d; --side-ink: #e1e4e8;
  --line: #2a2f36; --text: #e7eaee; --muted: #98a2ae; --info: #7fb0ff; --info-soft: #18263d;
  --plate-bg: #e8b900; --plate-ink: #0d0d0d; --plate-edge: #000000;
  --steel: #6d7682; --track: #22272d; --done: #4b535d }

/* ---------- מעטפת: תפריט גרפיט עם פס סימון ---------- */
.dm-side { border-inline-end: 0; padding-top: 0 }
.dm-side::before { content: ""; display: block; height: 6px; margin: 0 -12px 8px; flex: none;
  background: repeating-linear-gradient(-45deg, var(--brand) 0 10px, var(--side) 10px 20px) }
.dm-brand b { font-weight: 700; letter-spacing: -.01em; font-size: 19px }
.dm-brand b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); margin-inline-end: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent) }
.dm-side .dm-group, .dm-side .dm-brand small, .dm-made { color: color-mix(in srgb, var(--side-ink) 55%, transparent) }
.dm-side .dm-group { text-transform: none; letter-spacing: .06em; font-size: 11px; border-top: 1px solid color-mix(in srgb, var(--side-ink) 10%, transparent); margin-top: 6px; padding-top: 10px }
.dm-side .dm-nav { font-size: 14px; padding: 6px 10px; position: relative }
.dm-side .dm-nav:hover { background: color-mix(in srgb, var(--side-ink) 9%, transparent) }
.dm-side .dm-nav.on { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--side-ink) }
.dm-side .dm-nav.on::after { content: ""; position: absolute; inset-block: 6px; inset-inline-start: -12px; width: 4px; border-radius: 0 3px 3px 0; background: var(--brand) }

.dm-top { padding-block: 8px; background: color-mix(in srgb, var(--surface) 90%, transparent) }
.dm-demo { font-family: var(--mono); letter-spacing: .02em }
.dm-view { gap: 14px; padding: 20px 22px }
.dm-head h1 { font-weight: 700; letter-spacing: -.015em }

/* ---------- KPI: כמו מחוון — פס עליון ומספר בגופן תצוגה ---------- */
.dm-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px }
.dm-kpi { position: relative; padding: 12px 14px 12px; border-top: 3px solid var(--steel) }
.dm-kpi.dm-link { border-top-color: var(--brand) }
.dm-kpi b { font-weight: 700; font-size: 27px; letter-spacing: -.02em }
.dm-kpi small { font-size: 12.5px; font-weight: 500 }

/* ---------- טבלאות צפופות ---------- */
.dm-table { font-size: 13.5px }
.dm-table th { padding: 8px 12px; font-size: 12px; letter-spacing: .02em }
.dm-table td { padding: 7px 12px }
.dm-table td[data-label="מס׳ רישוי"], .dm-table td[data-label="מק״ט"], .dm-table td[data-label="כרטיס"], .dm-table td[data-label="הזמנה"], .dm-table td[data-label="מספר"], .dm-table td[data-label="חשבונית"] { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; white-space: nowrap }
.dm-table td[data-label="מס׳ רישוי"] { font-weight: 700 }
.dm-chip { padding: 3px 11px; font-size: 13px }
.dm-pill { font-size: 12px; padding: 1px 9px }
.dm-col { padding: 8px; gap: 6px }
.dm-tile { padding: 8px 10px; border-inline-start: 3px solid var(--line) }
.dm-tile:hover { border-inline-start-color: var(--brand) }
.dm-tile b { font-size: 14px }
.dm-tile small { font-size: 12.5px }

/* ---------- רכיבים של מסכים מותאמים ---------- */
.ga-plate { display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: var(--plate-ink); background: var(--plate-bg); border: 1.5px solid var(--plate-edge); border-radius: 4px; padding: 0 6px 0 4px; white-space: nowrap; line-height: 1.6; box-shadow: inset 4px 0 0 #1d4fa8 }
.ga-plate bdi { padding-inline-start: 6px }
.ga-meter { display: block; flex: 1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; min-width: 60px }
.ga-meter i { display: block; height: 100%; border-radius: inherit; background: var(--brand) }
.ga-meter .ga-good { background: var(--good) } .ga-meter .ga-warn { background: var(--warn) } .ga-meter .ga-brand { background: var(--brand) }
.ga-tight { gap: 10px }
.ga-flat { border: 0; border-radius: 0 }
.ga-sub { display: block; color: var(--muted); font-size: 12px; margin-inline-start: 32px }
.ga-full { width: 100%; justify-content: center; margin-top: 10px }
.ga-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px }
.ga-cardhead h2 { margin: 0 }
.ga-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted) }
.ga-lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; background: var(--done) }
.ga-lg.ga-now::before { background: var(--brand) } .ga-lg.ga-plan::before { background: var(--surface); border: 1.5px dashed var(--steel) }
.ga-lg.ga-lin::before { background: var(--good) } .ga-lg.ga-lout::before { background: var(--bad) } .ga-lg.ga-lbal::before { background: var(--info); height: 3px; vertical-align: 3px }

/* לוח עמדות (גאנט) — ציר הזמן זורם מימין לשמאל */
.ga-gantt-card { overflow-x: auto }
.ga-gantt { min-width: 760px; display: grid; gap: 4px }
.ga-g-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px }
.ga-g-lift { font-size: 12.5px; font-weight: 600; white-space: nowrap }
.ga-g-track { position: relative; height: 40px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9.5 - 1px), var(--line) calc(100% / 9.5 - 1px) calc(100% / 9.5)); background-color: color-mix(in srgb, var(--bg) 55%, var(--surface)); border-radius: 4px }
.ga-g-hours .ga-g-track { height: 18px; background: none }
.ga-g-hours i { position: absolute; top: 0; font-style: normal; font-size: 11px; color: var(--muted); transform: translateX(50%); font-family: var(--mono) }
.ga-job { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; border: 0; padding: 2px 6px; text-align: start; overflow: hidden; cursor: pointer; display: grid; align-content: center; line-height: 1.2; background: var(--done); color: var(--surface) }
.ga-job b { font-family: var(--mono); font-size: 11.5px; white-space: nowrap }
.ga-job small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9 }
.ga-job.ga-now { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent) }
.ga-job.ga-plan { background: var(--surface); color: var(--text); border: 1.5px dashed var(--steel) }
.ga-job:hover { filter: brightness(1.06); outline: 2px solid var(--text); outline-offset: 0 }
.ga-nowline { position: absolute; top: -4px; bottom: -4px; inset-inline-start: var(--now); width: 2px; background: var(--brand); pointer-events: none }

.ga-hbars { display: grid; gap: 8px }
.ga-hbar { display: grid; grid-template-columns: minmax(70px, 130px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px }
.ga-hbar > b, .ga-hbar > bdi { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 52px; text-align: end }
.ga-wbar { min-width: 120px }

/* יעדים */
.ga-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px }
.ga-goal { display: grid; gap: 8px; border-top: 3px solid var(--brand) }
.ga-goal small { color: var(--muted); font-weight: 500 }
.ga-goal-v { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.ga-goal-v b { font-family: var(--font-display); font-size: 24px }
.ga-goal-v span { color: var(--muted); font-size: 12.5px }
.ga-goal .dm-pill { justify-self: start }

/* תזרים */
.ga-in { fill: var(--good) } .ga-out { fill: color-mix(in srgb, var(--bad) 75%, var(--surface)) }
.ga-balance { fill: none; stroke: var(--info); stroke-width: 2.5; stroke-linejoin: round }
.ga-pos { color: var(--good) } .ga-neg { color: var(--bad) }

/* משמרות */
.ga-cover { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px }
.ga-cover .dm-kpi b { font-size: 22px }
.ga-shifts td { padding: 5px 8px }
.ga-shift { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600 }
.ga-shift bdi { font-weight: 400; font-family: var(--mono); font-size: 11px }

/* אתר וטופס */
.ga-web { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start }
.ga-web-side { display: grid; gap: 14px; min-width: 0 }
.ga-site { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow) }
.ga-site-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 70%, var(--surface)); border-bottom: 1px solid var(--line) }
.ga-site-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line) }
.ga-site-bar span { margin-inline-start: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--surface); padding: 1px 10px; border-radius: 99px }
.ga-site-hero { padding: 22px 22px 10px; background: linear-gradient(160deg, var(--side), color-mix(in srgb, var(--side) 80%, var(--brand))); color: var(--side-ink) }
.ga-site-hero small { color: color-mix(in srgb, var(--side-ink) 70%, transparent) }
.ga-site-hero h2 { margin: 4px 0; font-family: var(--font-display); font-size: 24px }
.ga-site-hero p { margin: 0 0 12px; color: color-mix(in srgb, var(--side-ink) 80%, transparent) }
.ga-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 16px 22px 22px }
.ga-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600 }
.ga-form input, .ga-form select { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--bg); font-weight: 400; min-width: 0 }
.ga-form .ga-plate-in { background: var(--plate-bg); color: var(--plate-ink); font-family: var(--mono); font-weight: 700; text-align: center; letter-spacing: .08em; border-color: var(--plate-edge) }
.ga-form .ga-plate-in::placeholder { color: color-mix(in srgb, var(--plate-ink) 55%, transparent) }
.ga-span { grid-column: 1 / -1 }
.ga-slots { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400 }

/* פורטל לקוח — עמודה צרה כמו במסך נייד */
.ga-portal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; max-width: 980px }
.ga-car { border-top: 4px solid var(--brand) }
.ga-car-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.ga-car-top h2 { margin: 2px 0 0; font-family: var(--font-display); font-size: 20px }
.ga-car-top small { color: var(--muted) }
.ga-car .ga-plate { font-size: 15px; padding-block: 2px }
.ga-steps { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative }
.ga-steps li { display: grid; justify-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); text-align: center; position: relative }
.ga-steps li::before { content: ""; position: absolute; top: 7px; inset-inline-start: 50%; width: 100%; height: 3px; background: var(--track) }
.ga-steps li:last-child::before { display: none }
.ga-steps li.ga-past::before { background: var(--brand) }
.ga-steps i { width: 16px; height: 16px; border-radius: 50%; background: var(--track); position: relative; z-index: 1; border: 3px solid var(--surface); box-sizing: content-box; margin-top: -3px }
.ga-steps .ga-past i { background: var(--brand) }
.ga-steps .ga-cur i { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent) }
.ga-steps .ga-cur, .ga-steps .ga-past { color: var(--text); font-weight: 600 }
.ga-eta { margin: 4px 0 12px; font-size: 14px }
.ga-lines { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 12px }
.ga-lines td { padding: 5px 0; border-bottom: 1px dashed var(--line) }
.ga-lines td:last-child { text-align: end }
.ga-lines .ga-tot td { font-weight: 700; font-size: 16px; border-bottom: 0; padding-top: 8px }
.ga-remind { margin: 10px 0 0; padding: 8px 10px; background: var(--warn-soft); color: var(--warn); border-radius: 6px; font-size: 13.5px; font-weight: 600 }

/* הגדרות */
.ga-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px }
.ga-lifts { display: flex; flex-wrap: wrap; gap: 6px }
.ga-lifts .dm-tag { font-size: 12.5px; padding: 3px 9px }
.ga-sws { display: grid; gap: 4px }
.ga-switch { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: start; font-size: 14px }
.ga-switch i { width: 34px; height: 20px; border-radius: 99px; background: var(--track); position: relative; flex: none; transition: background .15s }
.ga-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: inset-inline-start .15s }
.ga-switch[aria-checked="true"] i { background: var(--brand) }
.ga-switch[aria-checked="true"] i::after { inset-inline-start: 17px }
.ga-perm th, .ga-perm td { white-space: nowrap }

@media (max-width: 900px) {
  .ga-web { grid-template-columns: minmax(0, 1fr) }
  .ga-cover { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 600px) {
  .ga-form { grid-template-columns: minmax(0, 1fr); padding: 14px }
  .ga-site-hero { padding: 16px 14px 8px }
  .ga-hbar { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px }
  .ga-sub { display: inline; margin: 0 6px 0 0 }
  .ga-wbar { min-width: 0 }
  .ga-steps li { font-size: 10.5px }
  .dm-table td[data-label="מס׳ רישוי"] { white-space: normal }
}
.ga-web-side .dm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.ga-web-side .dm-kpi b { font-size: 22px }
@media (max-width: 600px) {
  .dm-kpis, .ga-web-side .dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dm-kpi b { font-size: 22px }
}