/* MIDELI — единый стиль всех продуктов. Собран из дизайн-системы «MIDELI ERP» (tokens.json + bundle.css), 2026-10-25.
   Руками не править: правки делаются в дизайн-системе, потом файл пересобирается. */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Noto+Sans+Georgian:wght@400;500;700&family=JetBrains+Mono:wght@500;600&display=swap");
:root, [data-theme="light"] {
  --surface:#faf9f6;
  --surface-raised:#ffffff;
  --surface-sunken:#e7e4dc;
  --line:#d4d0c5;
  --line-strong:#8f8b80;
  --ink:#1c1d1f;
  --ink-muted:#5e5d58;
  --signal:#ff5a1f;
  --on-signal:#1c1d1f;
  --signal-text:#b93a0b;
  --signal-soft:#ffe2d4;
  --birch:#e9c89a;
  --birch-soft:#f6ead8;
  --graphite:#2a2c2f;
  --chalk:#f2f0ea;
  --steel:#2f5d8a;
  --steel-soft:#dde8f3;
  --ok:#1f6b45;
  --ok-soft:#dcefe3;
  --done:#3f9a62;
  --danger:#b42318;
  --danger-soft:#fbe0dc;
  --warn:#e0a100;
  --warn-soft:#fbf0cc;
  --warn-text:#8a5f00;
  --wait:#6fb3e0;
  --wait-soft:#e2f0fa;
  --idle:#d9d6cd;
  --focus:#2f5d8a;
  --shadow-1:0 1px 0 rgba(28,29,31,0.06), 0 1px 2px rgba(28,29,31,0.08);
  --shadow-2:0 8px 24px rgba(28,29,31,0.12), 0 2px 4px rgba(28,29,31,0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --surface:#141516;
  --surface-raised:#1d1f21;
  --surface-sunken:#0e0f10;
  --line:#2e3033;
  --line-strong:#5d6066;
  --ink:#ecebe6;
  --ink-muted:#a3a29c;
  --signal:#ff6a33;
  --on-signal:#141516;
  --signal-text:#ff8a5c;
  --signal-soft:#3a1f14;
  --birch:#c9a46f;
  --birch-soft:#2a241b;
  --graphite:#2a2c2f;
  --chalk:#ecebe6;
  --steel:#7fb0e0;
  --steel-soft:#18283a;
  --ok:#6fcf97;
  --ok-soft:#15291e;
  --done:#4cbf72;
  --danger:#ff8b7e;
  --danger-soft:#3a1714;
  --warn:#f0c040;
  --warn-soft:#33290f;
  --warn-text:#f0c040;
  --wait:#69b8e6;
  --wait-soft:#182c38;
  --idle:#34373b;
  --focus:#7fb0e0;
  --shadow-1:0 1px 0 rgba(0,0,0,0.4);
  --shadow-2:0 8px 24px rgba(0,0,0,0.5);
  color-scheme: dark;
} }
[data-theme="dark"], [data-theme-default="dark"]:not([data-theme="light"]) {
  --surface:#141516;
  --surface-raised:#1d1f21;
  --surface-sunken:#0e0f10;
  --line:#2e3033;
  --line-strong:#5d6066;
  --ink:#ecebe6;
  --ink-muted:#a3a29c;
  --signal:#ff6a33;
  --on-signal:#141516;
  --signal-text:#ff8a5c;
  --signal-soft:#3a1f14;
  --birch:#c9a46f;
  --birch-soft:#2a241b;
  --graphite:#2a2c2f;
  --chalk:#ecebe6;
  --steel:#7fb0e0;
  --steel-soft:#18283a;
  --ok:#6fcf97;
  --ok-soft:#15291e;
  --done:#4cbf72;
  --danger:#ff8b7e;
  --danger-soft:#3a1714;
  --warn:#f0c040;
  --warn-soft:#33290f;
  --warn-text:#f0c040;
  --wait:#69b8e6;
  --wait-soft:#182c38;
  --idle:#34373b;
  --focus:#7fb0e0;
  --shadow-1:0 1px 0 rgba(0,0,0,0.4);
  --shadow-2:0 8px 24px rgba(0,0,0,0.5);
  color-scheme: dark;
}
:root {
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-pill:999px;
  --dur-fast:120ms;
  --dur-base:240ms;
  --dur-slow:900ms;
  --ease-machine:cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-linear:linear;
  --font-display:Onest, "Noto Sans Georgian", "Segoe UI", system-ui, sans-serif;
  --font-sans:Onest, "Noto Sans Georgian", "Segoe UI", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", Consolas, monospace;
}

/* MIDELI ERP — component styles. Every value comes from tokens.json via var(--…). */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; }
.md-pad { padding: var(--space-6); }
.md-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.md-grid { display: grid; gap: var(--space-4); }
.md-label { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.md-fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.md-muted { color: var(--ink-muted); }
.md-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-6); transition: box-shadow var(--dur-base) var(--ease-machine), transform var(--dur-base) var(--ease-machine); }
.md-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* reveal on mount */
@keyframes md-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.md-rise { animation: md-rise var(--dur-base) var(--ease-machine) both; }

/* hazard stripes — the "in progress" motif */
@keyframes md-stripes { to { background-position: 28px 0; } }
.md-stripes { background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 7px, transparent 7px 14px); background-size: 28px 28px; animation: md-stripes .9s var(--ease-linear) infinite; }

/* ---------- Button ---------- */
.md-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 14px/1 var(--font-sans); cursor: pointer; transition: transform var(--dur-fast) var(--ease-machine), background var(--dur-fast), box-shadow var(--dur-fast); }
.md-btn:active { transform: scale(.97); }
.md-btn-primary { background: var(--signal); color: var(--on-signal); }
.md-btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease-machine); }
.md-btn-primary:hover::after { transform: translateX(120%); }
.md-btn-primary:hover { box-shadow: 0 0 0 4px var(--signal-soft); }
.md-btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.md-btn-secondary:hover { background: var(--surface-sunken); }
.md-btn-ghost { background: transparent; color: var(--signal-text); }
.md-btn-ghost:hover { background: var(--signal-soft); }
.md-btn-dark { background: var(--graphite); color: var(--chalk); }
.md-btn.is-busy { pointer-events: none; }
.md-btn.is-busy::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 7px, transparent 7px 14px); background-size: 28px 28px; animation: md-stripes .9s linear infinite; }
.md-btn svg { width: 16px; height: 16px; }

/* ---------- Badge ---------- */
.md-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.md-badge i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.md-badge-work { background: var(--signal-soft); color: var(--signal-text); }
.md-badge-work i { animation: md-blink 1.2s var(--ease-linear) infinite; }
.md-badge-plan { background: var(--steel-soft); color: var(--steel); }
.md-badge-ok { background: var(--ok-soft); color: var(--ok); }
.md-badge-bad { background: var(--danger-soft); color: var(--danger); }
.md-badge-mat { background: var(--birch-soft); color: var(--ink); }
.md-badge-mat i { background: var(--birch); width: 10px; height: 10px; border-radius: var(--radius-xs); }
@keyframes md-blink { 50% { opacity: .25; } }

/* ---------- KPI tile ---------- */
.md-kpi { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.md-kpi-val { font: 600 34px/38px var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.md-kpi-val small { font-size: 16px; color: var(--ink-muted); margin-left: 4px; }
.md-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.md-delta { font: 600 12px/1 var(--font-mono); padding: 4px 6px; border-radius: var(--radius-xs); }
.md-delta.up { background: var(--ok-soft); color: var(--ok); }
.md-delta.down { background: var(--danger-soft); color: var(--danger); }
.md-spark { width: 100%; height: 44px; display: block; }
.md-spark path.l { fill: none; stroke: var(--signal-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: md-draw var(--dur-slow) var(--ease-machine) .2s forwards; }
.md-spark path.a { fill: var(--signal-soft); opacity: 0; animation: md-fade var(--dur-slow) var(--ease-machine) .6s forwards; }
.md-spark circle { fill: var(--signal); opacity: 0; animation: md-fade var(--dur-base) 1s forwards; }
@keyframes md-draw { to { stroke-dashoffset: 0; } }
@keyframes md-fade { to { opacity: 1; } }

/* ---------- Stage track (production route) ---------- */
.md-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
.md-step { display: flex; flex-direction: column; gap: var(--space-2); }
.md-step-bar { position: relative; height: 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); overflow: hidden; }
.md-step-bar b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); border-radius: var(--radius-xs); animation: md-fill var(--dur-slow) var(--ease-machine) forwards; }
.md-step.cur .md-step-bar b { background: var(--signal); }
.md-step.cur .md-step-bar b::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.2) 0 5px, transparent 5px 10px); background-size: 20px 20px; animation: md-stripes2 .8s linear infinite; }
@keyframes md-stripes2 { to { background-position: 20px 0; } }
@keyframes md-fill { to { width: var(--p, 100%); } }
.md-step-name { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); }
.md-step-name .n { font: 600 11px/1 var(--font-mono); color: var(--ink-muted); }
.md-step.todo .md-step-name { color: var(--ink-muted); font-weight: 500; }
.md-step-meta { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.md-step.cur .md-step-meta { color: var(--signal-text); }
.md-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--signal); box-shadow: 0 0 0 0 var(--signal); animation: md-ping 1.6s var(--ease-machine) infinite; }
@keyframes md-ping { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.55); } 100% { box-shadow: 0 0 0 8px rgba(255,90,31,0); } }

/* ---------- Machine card ---------- */
.md-machine { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.md-spindle { width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--graphite); display: grid; place-items: center; }
.md-spindle svg { width: 40px; height: 40px; }
.md-spindle .rot { transform-origin: 20px 20px; animation: md-spin 1.1s var(--ease-linear) infinite; }
.md-spindle.idle .rot { animation-duration: 6s; }
.md-spindle.stop .rot { animation: none; }
@keyframes md-spin { to { transform: rotate(360deg); } }
.md-led { width: 10px; height: 10px; border-radius: var(--radius-pill); display: inline-block; }
.md-led.run { background: var(--ok); animation: md-ping-ok 1.6s infinite; }
.md-led.idle { background: var(--steel); }
.md-led.stop { background: var(--danger); animation: md-blink .8s infinite; }
@keyframes md-ping-ok { 0% { box-shadow: 0 0 0 0 rgba(31,107,69,.5); } 100% { box-shadow: 0 0 0 8px rgba(31,107,69,0); } }
.md-gauge { height: 6px; border-radius: var(--radius-xs); background: var(--surface-sunken); overflow: hidden; margin-top: var(--space-2); }
.md-gauge b { display: block; height: 100%; width: 0; background: var(--ink); animation: md-fill var(--dur-slow) var(--ease-machine) .2s forwards; }
.md-gauge.hot b { background: var(--signal); }

/* ---------- Panel spec (drawing) ---------- */
.md-draw .part { fill: var(--birch); stroke: var(--ink); stroke-width: 1.5; }
.md-draw .edge { stroke: var(--signal); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 260; stroke-dashoffset: 260; animation: md-draw .7s var(--ease-machine) forwards; }
.md-draw .dim { stroke: var(--line-strong); stroke-width: 1; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; animation: md-draw var(--dur-slow) var(--ease-machine) forwards; }
.md-draw .arr { fill: var(--line-strong); opacity: 0; animation: md-fade .2s forwards; }
.md-draw text { font: 600 12px var(--font-mono); fill: var(--ink); opacity: 0; animation: md-fade .3s forwards; }
.md-draw .hole { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: md-pop .3s var(--ease-machine) forwards; }
@keyframes md-pop { to { transform: scale(1); } }
.md-spec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.md-spec dt { font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.md-spec dd { margin: 0; font: 500 14px/20px var(--font-mono); }

/* ---------- Table ---------- */
.md-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.md-table th { text-align: left; padding: var(--space-3) var(--space-4); font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.md-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); transition: background var(--dur-fast); }
.md-table tr:last-child td { border-bottom: 0; }
.md-table tbody tr { animation: md-rise var(--dur-base) var(--ease-machine) both; position: relative; }
.md-table tbody tr:hover td { background: var(--signal-soft); }
.md-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
.md-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.md-table .code { font: 600 13px/18px var(--font-mono); }

/* ---------- Workload (gantt) ---------- */
.md-gantt { display: grid; grid-template-columns: 140px 1fr; row-gap: var(--space-3); align-items: center; }
.md-gantt-lane { position: relative; height: 28px; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 7) 100%; border-right: 1px solid var(--line); }
.md-gantt-bar { position: absolute; top: 2px; bottom: 2px; border-radius: var(--radius-xs); display: flex; align-items: center; padding: 0 var(--space-2); font: 600 11px/1 var(--font-mono); white-space: nowrap; overflow: hidden; transform-origin: left; transform: scaleX(0); animation: md-grow var(--dur-slow) var(--ease-machine) forwards; }
@keyframes md-grow { to { transform: scaleX(1); } }
.md-gantt-bar.done { background: var(--ink); color: var(--surface-raised); }
.md-gantt-bar.work { background: var(--signal); color: var(--on-signal); }
.md-gantt-bar.plan { background: var(--steel-soft); color: var(--steel); box-shadow: inset 0 0 0 1px var(--steel); }
.md-gantt-now { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--signal-text); }
.md-gantt-days { display: grid; grid-template-columns: repeat(7, 1fr); font: 600 11px/14px var(--font-mono); color: var(--ink-muted); }

/* ---------- Toast ---------- */
.md-toast { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; width: 360px; max-width: 100%; padding: var(--space-4); background: var(--graphite); color: var(--chalk); border-radius: var(--radius-md); box-shadow: var(--shadow-2); animation: md-slide .5s var(--ease-machine) both; }
@keyframes md-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.md-toast .ico { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--signal); color: var(--on-signal); display: grid; place-items: center; font: 700 16px/1 var(--font-mono); }
.md-toast .ttl { font: 600 14px/20px var(--font-sans); }
.md-toast .txt { font: 400 13px/18px var(--font-sans); opacity: .8; }
.md-toast .x { background: none; border: 0; color: var(--chalk); opacity: .7; cursor: pointer; font-size: 16px; }
.md-toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--signal); transform-origin: left; animation: md-timer 5s linear forwards; }
@keyframes md-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

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