/* IBM Plex Sans/Mono, self-hosted (extracted from the approved Design mockup,
   no external Google Fonts CDN). Plex Sans below is registered only at its
   one real weight (400) -- bolder headings rely on the browser's default
   font-synthesis rather than faking distinct weights against the same
   glyphs. Plex Mono keeps its 3 genuinely distinct weights (400/500/600). */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/19e118a8-590d-43b8-8fc3-22d491e445fa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/77056c54-b4b6-4db4-bab6-3b0500a29d1e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/3d20d35e-1795-441e-9f77-48fc734c2b1f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b94b2add-fd9a-4eca-9bc8-a8ff6c8cb0a3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/3deb2609-b779-45fb-8111-7bd8bde606e4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/61540c73-fd2c-4e17-9c42-5f81a565ddde.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/90db65b8-f03a-43f6-ad58-1e9ab9f79a5d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/926c91df-1f12-4110-b330-240bd5784b5d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/7ae3153d-892c-4bd1-8d99-22895fb35505.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/009398bf-9be2-446b-9801-0daa91960ba4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/e0a58812-9fde-4811-b4fc-24d74a42b568.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/f7a83100-6577-4977-be7e-858d8e51565b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/15a66b30-b630-494f-bda1-111425e25690.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/6a1de751-1de3-4296-afb4-d6163f493e59.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/38a163a9-20b5-4c40-809e-7f975698006f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/8968f65c-ba85-4a7d-a47d-55569881453c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/1ee51fb6-bcbb-4241-9f5f-39da6deece6e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b7e1d3f8-03d4-4266-b999-b2c0549539e0.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/3cbcd7da-f690-46c5-bfe8-830505464ff1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b81f1bbe-8103-4344-9362-8ab937dbcf7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/15e9c581-862d-4ca5-baaf-9a68bf0dc70c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   Design tokens (colors/sizes from the approved mockup)
   --------------------------------------------------------------------- */
:root {
  --accent: #2f5fd0;
  --accent-hover: #2352b8;
  --ok: #147049;
  --warn: #8a5610;
  --bad: #b23320;
  --muted: #5f6a76;
  --muted-2: #3f4954;
  --muted-3: #616c78;

  --bg: #e7eaee;
  --card-bg: #f8f9fb;
  --card-border: #d7dde4;
  --row-border: #e3e7ec;
  --row-hover: #edf0f4;
  --table-head-bg: #eef1f4;
  --input-bg: #f2f4f7;
  --text: #1b2129;

  --sidebar-bg: #1c222a;
  --sidebar-border: #333c47;
  --sidebar-fg: #eef1f4;
  --sidebar-fg-muted: #aab4bf;
  --sidebar-hover: #2f363f;
  --sidebar-active-bg: #2f4059;
  --sidebar-active-bar: #5b8cf7;

  --pill-ready-bg: #d7f0e2; --pill-ready-fg: #147049;
  --pill-work-bg: #dce6fb; --pill-work-fg: #1f4fc4;
  --pill-client-bg: #e4e0f7; --pill-client-fg: #6b5fb5;
  --pill-repair-bg: #f8ead0; --pill-repair-fg: #8a5a10;
  --pill-stock-bg: #e5e9ee; --pill-stock-fg: #5f6a76;
  --pill-swap-bg: #fbe0d9; --pill-swap-fg: #b23320;
  --pill-dead-bg: #ffffff; --pill-dead-fg: #5f6a76;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------------------------------------------------------------------
   Shell: sidebar + main
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 238px;
  flex: none;
  color: var(--sidebar-fg);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  padding: 17px 16px 15px;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  gap: 10px;
  align-items: center;
}
.sidebar-brand-mark {
  width: 27px; height: 27px; flex: none;
  object-fit: contain;
}
.sidebar-brand-name { font-weight: 600; font-size: 12.5px; letter-spacing: .03em; }
.brand-accent { color: #9ab54a; }
.sidebar-brand-sub {
  font: 400 9.5px 'IBM Plex Mono', monospace; color: var(--sidebar-fg-muted);
  margin-top: 2px; letter-spacing: .04em;
}

.sidebar-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.nav-group-label {
  font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #8d97a3;
  padding: 9px 10px 7px;
}
.nav-group-label:not(:first-child) { padding-top: 16px; }

.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-weight: 500; white-space: nowrap; color: var(--sidebar-fg-muted);
  box-shadow: inset 2px 0 0 0 transparent;
}
.nav-item:hover { background: var(--sidebar-hover); }
.nav-item.active {
  background: var(--sidebar-active-bg); color: #ffffff;
  box-shadow: inset 2px 0 0 0 var(--sidebar-active-bar);
}
.nav-dot { width: 5px; height: 5px; border-radius: 5px; flex: none; background: currentColor; opacity: .5; }
.nav-badge {
  margin-left: auto; font: 500 10px 'IBM Plex Mono', monospace;
  background: #2c4479; color: #c5d7fc; padding: 1px 6px; border-radius: 20px;
}
.nav-badge.warn { background: #4f4026; color: #eecfa0; }
.nav-badge.bad { background: #573733; color: #f2c1b7; }
.nav-badge.neutral { background: #333c47; color: #b9c1ca; }

.sidebar-footer {
  padding: 12px 14px; border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
}
.avatar-circle {
  width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--sidebar-border);
  display: flex; align-items: center; justify-content: center;
  font: 600 10px 'IBM Plex Mono', monospace; color: #b9c1ca;
}
.sidebar-user-name { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font: 400 9.5px 'IBM Plex Mono', monospace; color: var(--sidebar-fg-muted); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 5; background: rgba(231,234,238,.93);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--card-border);
  padding: 13px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.topbar-subtitle { font: 400 11px 'IBM Plex Mono', monospace; color: var(--muted); margin-top: 3px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.search-box {
  display: flex; align-items: center; gap: 8px; background: var(--input-bg);
  border: 1px solid var(--card-border); border-radius: 7px; padding: 0 10px; height: 31px; width: 280px;
}
.search-box input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font: 400 12px 'IBM Plex Mono', monospace;
}
.search-box .kbd {
  font: 500 9.5px 'IBM Plex Mono', monospace; color: #66707c;
  border: 1px solid #c9d1da; border-radius: 4px; padding: 1px 4px;
}

.page { padding: 22px; display: flex; flex-direction: column; gap: 18px; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  height: 31px; padding: 0 13px; border-radius: 7px; background: var(--input-bg);
  border: 1px solid var(--card-border); color: var(--muted-2);
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 500;
  font: inherit; font-size: 12.5px;
}
.btn:hover { border-color: #3a424d; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-bad { border-color: #d0574a; color: var(--bad); }
.btn-bad:hover { border-color: var(--bad); background: #fbe0d9; }
.btn-good { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn-good:hover { background: #0f5a3a; }
.btn-icon { width: 31px; padding: 0; justify-content: center; }
.btn-sm { height: 29px; padding: 0 12px; border-radius: 6px; font-size: 12px; }

/* ---------------------------------------------------------------------
   Searchable select ("combo") -- progressive enhancement over a plain
   <select data-searchable>, see base.html's script. The <select> stays in
   the DOM (hidden) and keeps carrying the real form value; a text input
   in front of it is what the user actually types/sees.
   --------------------------------------------------------------------- */
.combo { position: relative; flex: 1; min-width: 0; }
.combo-native { position: absolute; opacity: 0; pointer-events: none; height: 1px; width: 1px; overflow: hidden; }
.combo-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 6px;
  font: inherit; background: var(--card-bg); color: var(--text);
}
.combo-menu {
  /* position: fixed (не absolute) и left/top/width расставляет JS
     (positionMenu() в base.html) -- .combo сидит внутри .card, а у
     .card overflow:hidden ради скругления углов, так что absolute-меню
     обрезалось бы им же, когда карточке не хватает своей высоты. */
  position: fixed; z-index: 20;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
  max-height: 220px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.combo-option { padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.combo-option:hover { background: var(--row-hover); }
.combo-empty { padding: 7px 10px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------------
   Confirm dialog (native <dialog>, replaces window.confirm())
   --------------------------------------------------------------------- */
.confirm-dialog {
  border: 1px solid var(--card-border); border-radius: 12px; padding: 0;
  background: var(--card-bg); color: var(--text);
  width: calc(100% - 40px); max-width: 380px;
  box-shadow: 0 20px 48px rgba(20, 24, 31, .28);
  /* The global `* { margin: 0 }` reset clobbers <dialog>'s UA-stylesheet
     margin:auto centering, so it opened pinned to the top-left corner --
     center it explicitly instead of relying on that default. */
  position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%);
}
.confirm-dialog::backdrop { background: rgba(20, 24, 31, .45); }
.confirm-dialog-body { padding: 20px 20px 16px; }
.confirm-dialog-title { font: 600 14.5px 'IBM Plex Sans'; letter-spacing: -.01em; }
.confirm-dialog-text { font-size: 12.5px; color: var(--muted-2); line-height: 1.5; margin-top: 8px; }
.confirm-dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--card-border);
}

/* ---------------------------------------------------------------------
   Quick-create dialog (native <dialog>, см. data-quick-open/data-quick-
   endpoint в base.html) -- та же геометрия/центрирование, что у
   .confirm-dialog, но своя ширина под форму с полями, а не короткий текст.
   --------------------------------------------------------------------- */
.quick-dialog {
  border: 1px solid var(--card-border); border-radius: 12px; padding: 0;
  background: var(--card-bg); color: var(--text);
  width: calc(100% - 40px); max-width: 380px;
  box-shadow: 0 20px 48px rgba(20, 24, 31, .28);
  position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%);
}
.quick-dialog::backdrop { background: rgba(20, 24, 31, .45); }
.quick-dialog-body { padding: 18px 20px; }
.quick-dialog-title { font: 600 14.5px 'IBM Plex Sans'; letter-spacing: -.01em; margin-bottom: 12px; }
.quick-dialog-error { font-size: 12px; color: var(--bad); margin-bottom: 10px; }

/* Кнопка с выпадающим меню на <details>/<summary> -- без JS */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker,
.dropdown > summary::marker { display: none; content: ""; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 216px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 9px;
  box-shadow: 0 6px 20px rgba(20, 24, 30, .14); padding: 5px; display: flex; flex-direction: column; gap: 1px;
}
.dropdown-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.dropdown-menu a:hover { background: var(--row-hover); }

/* Строка клиента в /clients -- <details> на весь ряд (раскрывает точки),
   отдельная кнопка "Открыть" поверх абсолютным позиционированием, чтобы
   клик по ней не открывал/закрывал раскрывающийся список */
.client-entry { position: relative; border-bottom: 1px solid var(--row-border); }
.client-entry:last-child { border-bottom: none; }
.client-summary {
  cursor: pointer; list-style: none; padding: 13px 112px 13px 16px;
  display: flex; align-items: center; gap: 12px;
}
.client-summary::-webkit-details-marker, .client-summary::marker { display: none; content: ""; }
.client-summary:hover { background: var(--row-hover); }
.client-open-btn { position: absolute; right: 14px; top: 11px; z-index: 2; }
.client-points { padding: 2px 16px 10px; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.card-pad { padding: 14px 16px; }
.card-header {
  padding: 13px 16px; border-bottom: 1px solid var(--card-border);
  display: flex; align-items: center; gap: 10px;
}
.card-title { font-weight: 600; font-size: 13px; }
.card-count {
  font: 500 10px 'IBM Plex Mono', monospace; color: var(--bad);
  background: var(--pill-swap-bg); padding: 2px 7px; border-radius: 20px;
}
.card-meta { margin-left: auto; font: 400 11px 'IBM Plex Mono', monospace; color: var(--muted); }

/* ---------------------------------------------------------------------
   KPI grid
   --------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpi-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 15px 16px; }
.kpi-label { font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: var(--muted-3); }
.kpi-value-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 9px; }
.kpi-value { font: 600 30px/1 'IBM Plex Sans'; letter-spacing: -.02em; }
.kpi-note { font-size: 11.5px; color: var(--muted-3); padding-bottom: 3px; }
.kpi-bar-track { height: 3px; border-radius: 3px; background: var(--card-border); margin-top: 12px; overflow: hidden; }
.kpi-bar-fill { height: 100%; }

/* ---------------------------------------------------------------------
   List rows / tables
   --------------------------------------------------------------------- */
.list-row {
  display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--row-border);
  align-items: center; cursor: pointer;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--row-hover); }
.row-dot { width: 6px; height: 6px; border-radius: 6px; flex: none; }

.table-wrap { overflow-x: auto; }
.table-head {
  display: grid; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--card-border);
  background: var(--table-head-bg); font: 500 9.5px 'IBM Plex Mono', monospace;
  letter-spacing: .1em; color: var(--muted);
}
.table-row {
  display: grid; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--row-border);
  align-items: center;
}
.table-row:last-child { border-bottom: none; }
.table-row.clickable { cursor: pointer; }
.table-row.clickable:hover { background: var(--row-hover); }
.table-row.flagged { background: rgba(178,51,32,.07); }

/* ---------------------------------------------------------------------
   Pills / tags / chips
   --------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px;
  border-radius: 20px; font-size: 11.5px; font-weight: 500;
}
.pill-dot { width: 5px; height: 5px; border-radius: 5px; background: currentColor; }
.pill-ready { background: var(--pill-ready-bg); color: var(--pill-ready-fg); }
.pill-work { background: var(--pill-work-bg); color: var(--pill-work-fg); }
.pill-client { background: var(--pill-client-bg); color: var(--pill-client-fg); }
.pill-repair { background: var(--pill-repair-bg); color: var(--pill-repair-fg); }
.pill-stock { background: var(--pill-stock-bg); color: var(--pill-stock-fg); }
.pill-swap { background: var(--pill-swap-bg); color: var(--pill-swap-fg); }
.pill-dead { background: var(--pill-dead-bg); color: var(--pill-dead-fg); }

.stage-toggle > summary { cursor: pointer; list-style: none; }
.stage-toggle > summary::-webkit-details-marker { display: none; }
.stage-toggle > summary:hover { filter: brightness(0.94); }

.tag { font: 500 11px 'IBM Plex Mono', monospace; padding: 2px 8px; border-radius: 20px; }

.chip {
  padding: 5px 11px; border-radius: 20px; cursor: pointer; font-weight: 500; font-size: 12px;
  border: 1px solid var(--card-border); background: var(--input-bg); color: var(--muted);
}
.chip:hover { border-color: #3a424d; }
.chip.active { border-color: #33528c; background: var(--pill-work-bg); color: var(--pill-work-fg); }
.chip-count { font: 500 10.5px 'IBM Plex Mono', monospace; opacity: .65; }

/* ---------------------------------------------------------------------
   Checklist (заявка stages, tasks)
   --------------------------------------------------------------------- */
.checklist-item { display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--row-border); align-items: center; }
.checklist-item:last-child { border-bottom: none; }
.check-box {
  width: 16px; height: 16px; border-radius: 4px; flex: none; border: 1px solid #3a424d;
  background: transparent; color: #fff; font-size: 10px; display: flex; align-items: center;
  justify-content: center; font-weight: 700;
}
.check-box.done { background: var(--accent); border-color: var(--accent); }
.check-title { font-size: 12.5px; }
.check-title.done { color: var(--muted); text-decoration: line-through; }
.check-meta { font: 400 10.5px 'IBM Plex Mono', monospace; color: var(--muted); margin-top: 3px; }

/* ---------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------- */
.timeline-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--row-border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 6px; height: 6px; border-radius: 6px; flex: none; margin-top: 5px; }
.timeline-title { font-weight: 500; font-size: 12.5px; }
.timeline-meta { font: 400 11px 'IBM Plex Mono', monospace; color: var(--muted-3); margin-top: 4px; }

/* ---------------------------------------------------------------------
   Kanban (Ремонт)
   --------------------------------------------------------------------- */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 14px; align-items: start; }
.kanban-col-header {
  display: flex; align-items: flex-start; gap: 8px; padding: 1px 2px 10px;
  font: 600 11.5px 'IBM Plex Sans'; line-height: 1.3; min-height: 34px;
}
.kanban-col-header .row-dot { margin-top: 3px; flex: none; }
.kanban-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 9px;
  padding: 11px 12px; margin-bottom: 10px; border-left: 3px solid transparent;
}
.kanban-card-model { font-weight: 600; font-size: 12.5px; }
.kanban-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kanban-card-days {
  display: inline-block; margin-top: 8px; font: 500 10.5px 'IBM Plex Mono', monospace;
  padding: 2px 7px; border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Documents
   --------------------------------------------------------------------- */
.doc-card { display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--row-border); align-items: center; }
.doc-card:last-child { border-bottom: none; }
.doc-ext {
  width: 32px; height: 32px; flex: none; border-radius: 6px; color: #fff;
  display: flex; align-items: center; justify-content: center; font: 600 9.5px 'IBM Plex Mono';
}
.doc-name { font-size: 12.5px; font-weight: 500; }
.doc-meta { font: 400 10.5px 'IBM Plex Mono', monospace; color: var(--muted); margin-top: 3px; }

/* ---------------------------------------------------------------------
   Key/value blocks (карточки заявки/оборудования/ремонта)
   --------------------------------------------------------------------- */
.kv-list { display: flex; flex-direction: column; gap: 10px; }
.kv-row { display: flex; flex-direction: column; gap: 2px; }
.kv-key { font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: var(--muted-3); }
.kv-val { font-size: 12.5px; }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 14px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.crumbs { display: flex; align-items: center; gap: 8px; font: 400 11px 'IBM Plex Mono', monospace; color: var(--muted); }
.crumbs a { color: var(--pill-work-fg); cursor: pointer; }
.empty { padding: 22px 16px; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------
   Календарь (месячная сетка)
   --------------------------------------------------------------------- */
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav-label { font: 600 15px 'IBM Plex Sans'; min-width: 168px; text-align: center; }
.cal-wrap { overflow-x: auto; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 1px;
  background: var(--card-border); border: 1px solid var(--card-border);
  border-radius: 10px; overflow: hidden; min-width: 910px;
}
.cal-weekday {
  background: var(--table-head-bg); padding: 8px 10px; text-align: right;
  font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .06em; color: var(--muted);
}
.cal-day { background: var(--card-bg); min-height: 100px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-day.out { background: #eef0f3; }
.cal-daynum { align-self: flex-end; font: 600 12px 'IBM Plex Sans'; color: var(--muted-2); }
.cal-day.out .cal-daynum { color: var(--muted); opacity: .6; }
.cal-day.today .cal-daynum {
  background: var(--accent); color: #fff; border-radius: 5px; padding: 0 6px; line-height: 18px;
}
.cal-entry { display: flex; align-items: center; gap: 5px; font-size: 10.5px; overflow: hidden; cursor: pointer; }
.cal-entry:hover .cal-entry-title { text-decoration: underline; }
.cal-entry-dot { width: 6px; height: 6px; border-radius: 6px; flex: none; }
.cal-entry-time { flex: none; color: var(--muted); font-size: 9.5px; }
.cal-entry-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-entry.done .cal-entry-title { color: var(--muted); text-decoration: line-through; }
.cal-more { font-size: 9.5px; color: var(--muted); }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--muted-2); }
.cal-legend-item { display: flex; align-items: center; gap: 6px; }

/* Агенда -- список дел месяца одной колонкой вместо сетки 7 дней; сетка
   (.cal-wrap) на телефоне вынуждала листать вбок 910px-таблицу, чтобы
   найти сегодняшнее дело -- неюзабельно на маленьком экране в поле, где
   именно инженер и открывает календарь. Прячется на десктопе, где сетка
   умещается на экран целиком. */
.cal-agenda { display: none; flex-direction: column; gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.cal-agenda-day { background: var(--card-bg); display: flex; gap: 12px; padding: 10px 14px; }
.cal-agenda-day.today .cal-agenda-daynum { background: var(--accent); color: #fff; }
.cal-agenda-daynum {
  flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--table-head-bg);
  display: flex; align-items: center; justify-content: center; font: 600 12px 'IBM Plex Sans'; color: var(--muted-2);
}
.cal-agenda-entries { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cal-agenda-entries .cal-entry-title { white-space: normal; }

/* ---------------------------------------------------------------------
   Мобильный layout (<=860px) -- боковая навигация уходит в выезжающую
   панель поверх контента вместо постоянной колонки 238px, которая на
   телефоне съедала бы большую часть экрана. Денис (выездной инженер)
   открывает /calendar и /orders/{id} с телефона в поле -- это основной
   сценарий, под который сделана эта адаптация.
   --------------------------------------------------------------------- */
.nav-toggle { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 12px 0 32px rgba(10, 12, 16, .35);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-overlay.open {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(10, 12, 16, .45);
  }

  .topbar { padding: 11px 14px; gap: 10px; }
  .topbar-title { font-size: 14px; }
  .page { padding: 14px; gap: 14px; }

  .search-box { width: auto; flex: 1; min-width: 0; }

  /* minmax(0, 1fr), не голое 1fr -- иначе грид-колонка наследует
     автоматический min-width от содержимого (например 660px-таблицы
     внутри .table-wrap на карточке заявки) и распирает всю страницу по
     горизонтали вместо того, чтобы дать сработать overflow-x:auto самой
     таблицы (нашлось на 320px-экране: scrollWidth документа рос до 676px). */
  .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .grid-auto { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

  .cal-wrap { display: none; }
  .cal-agenda { display: flex; }
  .cal-legend { display: none; }
}