:root {
  --bg: #e4ebe6;
  --surface: #ffffff;
  --surface-2: #f3f7f4;
  --border: #c9d5ce;
  --text: #0f1c17;
  --muted: #5a6b63;
  --accent: #0b6e4f;
  --accent-2: #0a5c8c;
  --danger: #b42318;
  --warn: #b54708;
  --ok: #067647;
  --info: #175cd3;
  --sidebar: #0a1612;
  --sidebar-text: #c5d4cd;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 28, 23, 0.05), 0 8px 24px rgba(15, 28, 23, 0.06);
  --font: "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #d9e8df 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #d6e2f2 0%, transparent 50%),
    var(--bg);
  font-size: 14px;
}
a { color: var(--accent-2); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
#app { min-height: 100%; }

/* Layout */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}
.sidebar-brand { padding: 10px 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.sidebar-brand .name {
  font-weight: 800; letter-spacing: .12em; font-size: 15px; color: #fff;
}
.sidebar-brand .tag { color: #8aa396; font-size: 12px; margin-top: 4px; font-weight: 500; }
.place-switch { display: flex; gap: 4px; margin-top: 10px; }
.place-switch a {
  flex: 1; text-align: center; font-size: 12px; font-weight: 650;
  padding: 6px 8px; border-radius: 8px; color: #c5d6cc; background: rgba(255,255,255,.06);
}
.place-switch a.on { background: #d7f5e4; color: #0d3b28; }
.nav a.active, .nav button.active {
  background: linear-gradient(90deg, rgba(11,110,79,.35), rgba(255,255,255,.04));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.topbar h1, #page-title {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
}
.page-chrome {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px;
}
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; min-height: 140px;
}
.report-card h3 { margin: 0; font-size: 15px; font-weight: 700; }
.report-card p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
.row-short td { background: #fef3f2; }
.row-warn td { background: #fffaeb; }
.empty-cta { margin-top: 10px; }
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 10px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border);
}
.trust { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; }
.trust.ok { background: #ecfdf3; color: var(--ok); }
.trust.expected { background: #eff8ff; color: var(--info); }
.trust.short { background: #fef3f2; color: var(--danger); }
.row-ok td { background: #f6fef9; }
.avail-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.avail-pill.in { background: #ecfdf3; color: var(--ok); }
.avail-pill.exp { background: #eff8ff; color: var(--info); }
.avail-pill.out { background: #fef3f2; color: var(--danger); }
button.linkish,
button.linkish.node-expand {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--info, #175cd3); cursor: pointer; font: inherit; font-weight: 650;
  text-align: left;
}
button.linkish:hover,
button.linkish.node-expand:hover { text-decoration: underline; }
tr.row-wo-parent td { background: #f8fafc; }
tr.row-wo-sub td { background: #fcfcfd; }
table.data tr.row-click { cursor: pointer; }
table.data tr.row-click:hover td { background: var(--surface-2, #f3f7f4); }
table.data tr.row-click.row-wo-parent:hover td { background: #eef2f6; }
table.data tr.row-click.row-wo-sub:hover td { background: #f3f4f6; }
.wo-tree-branch { margin-right: 2px; }
.wo-meta-card {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcfb;
}
.wo-meta-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wo-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}
.wo-meta-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 3px;
}
@media (max-width: 900px) {
  .wo-meta-grid { grid-template-columns: 1fr 1fr; }
}
html.device-phone .wo-meta-grid { grid-template-columns: 1fr; }
.chip.chip-sub {
  background: #eef4ff; color: #3538cd; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.chip.chip-main {
  background: #ecfdf3; color: #067647; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
tr.row-modular td { font-weight: 550; }
tr.row-kit-head td {
  background: #f2f4f7 !important;
  font-size: 12px; padding-top: 8px; padding-bottom: 8px;
  border-top: 1px dashed var(--border);
}
tr.row-kit-child td { font-size: 12.5px; }
tr.row-kit-child td:first-child { color: var(--muted); padding-left: 14px; }
.btn.hover-tip { position: relative; }
.btn.hover-tip:hover::after {
  left: 0;
  right: auto;
  transform: none;
  min-width: 220px;
  max-width: 320px;
  z-index: 50;
}
.trust.hover-tip { cursor: help; position: relative; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.nav > a, .nav > button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit;
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
}
.nav > a:hover, .nav > button:hover, .nav > a.active, .nav > button.active {
  background: rgba(255,255,255,.08); color: #fff;
}
.settings-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.settings-tab {
  padding: 8px 14px; text-decoration: none; color: var(--muted, #667);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active {
  color: var(--accent, #1a7a5c);
  border-bottom-color: var(--accent, #1a7a5c);
}
.telegram-panel .tg-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px;
}
.tg-ok { color: var(--accent, #1a7a5c); margin-top: 6px; }
.tg-bind-result {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, #d0d5dd);
  background: var(--surface-2, #f6f7f9);
}
.tg-bind-code {
  margin-top: 8px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: all;
}
.hint-box h3 { margin: 0 0 8px; font-size: 15px; }
.howto { margin: 0 0 10px 18px; line-height: 1.5; }
.howto li { margin-bottom: 6px; }
.kpi-row {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px;
}
.kpi { min-width: 120px; }
.kpi-label { font-size: 11px; color: var(--muted, #667); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 15px; font-weight: 600; margin-top: 2px; }
.sidebar-user {
  flex-shrink: 0;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: #8fa3b8;
}
.sidebar-user .uname { color: #fff; font-weight: 600; font-size: 13px; }
.sidebar-user .btn,
.sidebar-user .btn.btn-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e8f0ec;
  text-align: center;
}
.sidebar-user .btn:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.nav-tasks-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  text-align: left;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e8f0ec;
}
.sidebar-user .nav-tasks-btn {
  margin-top: 0;
  justify-content: space-between;
  text-align: left;
}
.nav-tasks-btn:hover,
.sidebar-user .nav-tasks-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-tasks-btn.is-active,
.sidebar-user .nav-tasks-btn.is-active {
  background: rgba(16, 185, 129, .18);
  border-color: rgba(16, 185, 129, .45);
  color: #fff;
}
.nav-tasks-badge[hidden] { display: none !important; }
.nav-tasks-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f79009;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.4;
}
.top-personal-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fbfcfb;
}
.top-personal-tabs .top-tasks-btn,
.top-personal-tabs .top-schedule-btn {
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
}
.top-personal-tabs .top-tasks-btn {
  border-right: 1px solid var(--border);
}
.top-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fbfcfb;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.top-schedule-btn:hover { border-color: #b7c9bf; background: #f3f6f3; }
.top-schedule-btn.is-active,
.top-personal-tabs .top-schedule-btn.is-active {
  border-color: transparent;
  background: #eff8ff;
  color: #175cd3;
}
.top-personal-tabs .top-tasks-btn.is-active {
  background: #ecfdf3;
  color: #027a48;
}
.sidebar-personal-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.sidebar-personal-tabs .nav-tasks-btn { margin-top: 0; width: 100%; }
.nav-schedule-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e8f0ec;
}
.nav-schedule-btn:hover,
.sidebar-user .nav-schedule-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-schedule-btn.is-active,
.sidebar-user .nav-schedule-btn.is-active {
  background: rgba(23, 92, 211, .28);
  border-color: rgba(23, 92, 211, .55);
  color: #fff;
}

.top-tasks-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fbfcfb;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.top-tasks-btn:hover { border-color: #b7c9bf; background: #f3f6f3; }
.top-tasks-btn.is-active {
  border-color: #12b76a;
  background: #ecfdf3;
  color: #027a48;
}
html.device-phone .top-personal-tabs { display: none; }
html.device-phone .top-tasks-btn { display: none; }
.user-menu { position: relative; flex-shrink: 0; }
.user-menu-btn {
  border: 1px solid var(--border);
  background: #fbfcfb;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-btn:hover { border-color: #b7c9bf; background: #f3f6f3; }
.user-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-menu-pop[hidden] { display: none; }
.user-menu-name { font-weight: 800; padding: 6px 8px 0; }
.user-menu-role { color: var(--muted); font-size: 12px; padding: 0 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-out { color: #b42318; }

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 22px 10px;
  flex-shrink: 0;
  z-index: 30;
  background: rgba(228, 235, 230, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 213, 206, 0.85);
}
.to-top {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 35;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  box-shadow: var(--shadow);
}
.to-top[hidden] { display: none; }
.main { position: relative; }
.topbar h1, #page-title { margin: 0; font-size: 20px; font-weight: 700; flex: 0 1 auto; }
.content { padding: 8px 22px 32px; flex: 1; min-height: 0; overflow: auto; }

/* Global search */
.global-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
  min-width: 160px;
  margin-left: auto;
}
.topbar > .help-q {
  flex: 0 0 auto;
  align-self: center;
}
.global-search-input {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  font-size: 13px;
}
.global-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: min(70vh, 420px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  z-index: 80;
  padding: 6px 0;
}
.global-search-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7c8f);
}
.global-search-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  color: inherit;
}
.global-search-item:hover,
.global-search-item.active {
  background: rgba(37, 99, 235, 0.08);
}
.global-search-title {
  font-size: 13px;
  font-weight: 600;
}
.global-search-sub {
  font-size: 12px;
  color: var(--muted, #6b7c8f);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-search-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--muted, #6b7c8f);
}
@media (max-width: 720px) {
  .global-search { max-width: none; flex-basis: 100%; order: 3; }
  .topbar { flex-wrap: wrap; }
}

/* Cards / panels */
.panel, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 12px;
}
.toolbar, .actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px;
}
.spacer { flex: 1; }

.grid-kpi, .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Project creation wizard */
.project-wizard { display: flex; flex-direction: column; gap: 12px; min-width: min(640px, 92vw); }
.wizard-steps {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.wizard-step {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.wizard-step.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: #eef8f3;
}
.wizard-step.is-done { color: var(--accent); border-color: #9dceb8; }
.wizard-nav {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.wizard-body { min-height: 180px; }

/* Tables
   Sticky thead: scroll is on .content (or modal), NOT on .table-wrap.
   overflow:auto on .table-wrap made sticky relative to a box that grew with
   the table — headers never "stuck". overflow-x alone still computes y:auto
   (CSS overflow quirk), so keep wrap overflow visible; .content scrolls both axes.
*/
.table-wrap { overflow: visible; }
table.data {
  width: 100%;
  border-collapse: separate; /* collapse breaks position:sticky in Chromium */
  border-spacing: 0;
  font-size: 13px;
}
table.data th, table.data td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px; text-align: left; vertical-align: top;
}
table.data thead th,
table.data > thead > tr > th,
table.data th {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: 0 1px 0 var(--border);
}
table.data th.th-sort {
  cursor: pointer;
  user-select: none;
}
table.data th.th-sort:hover { color: var(--text, #101828); }
table.data th.th-sort.is-sorted,
table.data th.th-filter-wrap.is-sorted { color: var(--text, #101828); }
table.data th.th-filter-wrap {
  /* keep sticky (do not override with position:relative) */
  overflow: visible;
  vertical-align: middle;
}
.th-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  user-select: none;
}
.th-filter-btn:hover,
.th-filter-btn.is-open,
.th-filter-btn.is-filtered { color: var(--text, #101828); }
.th-filter-caret { font-size: 10px; opacity: 0.7; }
.th-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #eff8ff;
  color: var(--info, #175cd3);
  border: 1px solid #b2ddff;
  font-size: 10px;
  font-weight: 700;
}
.th-sort-mark { margin-left: 2px; }
.task-filter-menu {
  z-index: 80;
  width: 240px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  padding: 8px;
}
.task-filter-head,
.task-filter-actions,
.task-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.task-filter-foot { margin: 8px 0 0; justify-content: flex-end; }
.task-filter-count { font-size: 11px; margin-bottom: 6px; }
.task-filter-list {
  overflow: auto;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border, #eaecf0);
  padding-top: 6px;
}
.task-filter-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 400;
  color: var(--text, #101828);
  font-size: 13px;
}
.task-filter-opt:hover { background: #f3f7fb; }
.task-filter-opt input { margin: 0; }

/* Crews settings — особовий склад */
.crew-members-host { display: flex; flex-direction: column; gap: 8px; }
.crew-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}

table.data tr:hover td { background: #f3f7fb; }
table.data .num, table.data .right { text-align: right; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.input, .select, .textarea, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}
.textarea, textarea { min-height: 72px; resize: vertical; }

/* Список проєктів у картці користувача */
.user-projects-assign { grid-column: 1 / -1; }
.user-projects-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  max-height: 220px;
  overflow: auto;
}
.user-projects-box .user-project-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.user-projects-box .user-project-opt:hover { background: var(--surface-2, #f6f7f9); }
.user-projects-box .user-project-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--accent, #1a7a5c);
}
.user-projects-box .user-project-opt span {
  flex: 1 1 auto;
  line-height: 1.35;
  text-align: left;
}

.task-overdue td { background: #fff7f5; }
.task-overdue-date { color: var(--danger, #b42318); font-weight: 500; }
.task-title { font-weight: 500; }
.task-row-click { cursor: pointer; }
.task-row-click:hover td { background: var(--surface-2, #f0f2f5); }
.task-row-click.task-overdue:hover td { background: #ffefeb; }
.task-title-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 500; color: var(--accent, #1a5fb4);
  cursor: pointer; text-align: left;
}
.task-title-link:hover { text-decoration: underline; }
.task-child-row td:first-child { padding-left: 28px; }
.task-child-mark {
  display: inline-block; min-width: 18px; color: var(--muted, #667);
  margin-right: 4px; font-weight: 600;
}
.task-hierarchy {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg, #f7f8fa);
}
.task-hierarchy-root {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: #fff;
  border: 1px solid var(--border);
}
.task-hierarchy-root.is-active,
.task-hierarchy-item.is-active {
  outline: 2px solid var(--accent, #1a5fb4);
  outline-offset: 1px;
}
.task-hierarchy-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px;
  background: #ecfdf3; color: #067647;
}
.task-hierarchy-list {
  list-style: none; margin: 8px 0 0; padding: 0 0 0 16px;
  border-left: 2px solid #d0d5dd;
  display: flex; flex-direction: column; gap: 6px;
}
.task-hierarchy-item {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: #fff;
  border: 1px solid var(--border);
}
.task-hierarchy-item.done { opacity: 0.72; }
.task-hierarchy-idx {
  font-weight: 700; color: var(--muted, #667); min-width: 1.4em;
}
.task-sub-progress {
  font-size: 12px; color: var(--muted, #667); margin-top: 2px;
}
.task-detail-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px;
  align-items: center;
}
.task-detail-section { margin-top: 16px; }
.task-detail-section h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted, #667);
}
.task-child-chip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 6px; background: var(--bg, #f7f8fa); cursor: pointer;
}
.task-child-chip:hover { background: var(--surface-2, #f0f2f5); }
.task-child-chip.done { opacity: 0.72; }
.task-mention-hint { font-size: 12px; color: var(--muted, #667); margin-top: 4px; }
.task-mention-users {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.task-mention-users button {
  font-size: 12px; padding: 2px 8px;
}

/* Buttons */
.btn, button.btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 500;
}
.btn:hover { background: var(--surface-2); }
.btn-primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-danger, .btn.danger { color: var(--danger); border-color: #f3b4ae; background: #fff; }
.btn-sm, .btn.sm { padding: 4px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.stack-h, .row-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Chips */
.chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.chip-ok, .chip.ok { background: #ecfdf3; color: var(--ok); border-color: #abefc6; }
.chip-warn, .chip.warn { background: #fffaeb; color: var(--warn); border-color: #fedf89; }
.chip-danger, .chip.danger { background: #fef3f2; color: var(--danger); border-color: #fecdca; }
.chip-info, .chip.info { background: #eff8ff; color: var(--info); border-color: #b2ddff; }
.chip-draft, .chip-muted, .chip.neutral { background: #f2f4f7; color: #344054; border-color: #d0d5dd; }

.error-box {
  background: #fef3f2; color: var(--danger);
  border: 1px solid #fecdca; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px;
}

/* Login — dark command portal (aligned with SCYRA Counter-UAV access) */
.login-wrap,
.login-page,
.login-shell {
  --login-bg: #020512;
  --login-panel: rgba(8, 14, 20, 0.92);
  --login-line: rgba(38, 230, 255, 0.25);
  --login-line-strong: rgba(38, 230, 255, 0.75);
  --login-text: #e7edf0;
  --login-muted: #8e9ba2;
  --login-cyan: #26e6ff;
  --login-red: #ff4f5e;
}

body:has(.login-shell) {
  background: var(--login-bg);
  overflow-x: hidden;
}
body:has(.login-shell)::before,
body:has(.login-shell)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body:has(.login-shell)::before {
  background:
    repeating-radial-gradient(
      circle at 27% 54%,
      rgba(38, 230, 255, 0.2) 0 2px,
      transparent 2px 42px
    ),
    linear-gradient(125deg, rgba(0, 0, 0, 0.92), rgba(5, 13, 28, 0.94));
}
body:has(.login-shell)::after {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.login-shell {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px);
  gap: 32px;
  align-items: center;
  padding: 6vh 7vw;
  color: var(--login-text);
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
}

.login-brand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 30px;
  max-width: 620px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(38, 230, 255, 0.2);
}
.login-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.login-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(280px, 42vw);
}
.login-code {
  color: var(--login-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.55;
  text-align: right;
  text-transform: uppercase;
}
.login-title {
  margin: 0 0 10px;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.login-title span {
  color: var(--login-cyan);
}
.login-sub {
  max-width: 640px;
  color: #b7c1c7;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
.login-telemetry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  margin-top: 32px;
}
.login-tel-card {
  min-height: 72px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
}
.login-tel-card b {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}
.login-tel-card span {
  color: var(--login-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.login-brand::after {
  content: "";
  display: block;
  width: min(100%, 620px);
  height: 96px;
  margin-top: 30px;
  background:
    linear-gradient(90deg, transparent, rgba(38, 230, 255, 0.12), transparent),
    repeating-linear-gradient(
      90deg,
      rgba(38, 230, 255, 0.18) 0 2px,
      transparent 2px 14px
    );
  clip-path: polygon(
    0 60%,
    8% 35%,
    18% 70%,
    27% 22%,
    38% 62%,
    50% 42%,
    63% 74%,
    75% 26%,
    85% 58%,
    100% 45%,
    100% 100%,
    0 100%
  );
}

.login-access {
  position: relative;
  justify-self: end;
  width: min(100%, 430px);
  padding: 28px;
  border: 1px solid var(--login-line);
  background: linear-gradient(180deg, var(--login-panel), rgba(6, 10, 15, 0.96));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.login-access::before,
.login-access::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--login-line-strong);
  border-style: solid;
}
.login-access::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.login-access::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 2px 2px 0;
}
.login-panel-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.login-panel-note {
  margin: 0 0 22px;
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.45;
}
.login-error {
  display: none;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--login-red);
  background: rgba(255, 79, 94, 0.13);
  color: #ffb1b8;
  font-size: 13px;
  font-weight: 700;
}
.login-error.show {
  display: block;
}
.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display: block;
  margin-bottom: 8px;
  color: #c8d1d6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.login-shell .login-field input,
.login-shell input[type="text"],
.login-shell input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  outline: none;
  background: rgba(0, 0, 0, 0.45) !important;
  color: var(--login-text) !important;
  font: inherit;
  font-size: 15px;
  box-shadow: none;
}
.login-shell .login-field input:focus,
.login-shell input[type="text"]:focus,
.login-shell input[type="password"]:focus {
  border-color: var(--login-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(38, 230, 255, 0.09) !important;
}
.login-shell .login-field input::placeholder,
.login-shell input::placeholder {
  color: #6a767c !important;
}
.login-auth-btn {
  width: 100%;
  height: 54px;
  margin-top: 6px;
  border: 0;
  color: #021016;
  background: linear-gradient(90deg, var(--login-cyan), #7af0ff);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 15px;
}
.login-auth-btn:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}
.login-micro {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--login-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--login-cyan);
  box-shadow: 0 0 14px var(--login-cyan);
  vertical-align: middle;
}

@media (max-width: 980px) {
  body:has(.login-shell) {
    overflow: auto;
  }
  .login-shell {
    grid-template-columns: 1fr;
    padding: 42px 22px;
  }
  .login-brand-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .login-code {
    text-align: left;
  }
  .login-telemetry {
    grid-template-columns: 1fr;
  }
  .login-access {
    justify-self: stretch;
    width: 100%;
  }
  .login-brand::after {
    display: none;
  }
}

/* legacy hint (removed from login UI) */
.hint {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
}

/* Modal-ish editor panels */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,40,.4);
  display: grid; place-items: center; z-index: 80; padding: 16px;
}
.modal {
  width: min(720px, 100%);
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 0;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #f4f7f5;
  user-select: none;
  cursor: default;
}
.modal-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.win-controls {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  margin: -4px -4px -4px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.win-btn {
  width: 36px;
  height: 28px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: #44554c;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.win-btn:last-child { border-right: 0; }
.win-btn:hover { background: #eef3f0; color: #0f1c17; }
.win-btn.win-close:hover { background: #e11d48; color: #fff; }
.modal-bd {
  padding: 16px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #fafbfa;
}
.modal.modal-max {
  width: min(1120px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}
.modal.modal-min {
  width: min(420px, 100%);
  max-height: none;
  align-self: end;
  margin-top: auto;
}
.modal.modal-min .modal-bd,
.modal.modal-min .modal-ft { display: none; }
.modal-backdrop:has(.modal-min) {
  place-items: end center;
  padding-bottom: 18px;
}
.btn-ghost, .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted, #667);
}
.btn-ghost:hover, .btn.btn-ghost:hover {
  background: var(--surface-2, #f3f6f3);
  border-color: var(--border);
  color: var(--text);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

#toast-root {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1200;
  pointer-events: none;
}
#toast-root .toast { pointer-events: auto; }
html.device-phone #toast-root,
html.device-tablet #toast-root {
  /* вище bottom-nav, щоб повідомлення було видно */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  align-items: stretch;
}
.toast {
  background: #101828; color: #fff;
  padding: 12px 14px; border-radius: 10px;
  box-shadow: var(--shadow); max-width: min(420px, calc(100vw - 32px));
  max-height: 40vh; overflow: auto; font-size: 14px; font-weight: 600;
  word-break: break-word; white-space: pre-wrap;
}
html.device-phone .toast,
html.device-tablet .toast {
  max-width: none; width: 100%; text-align: center;
}
.toast.error, .toast.err { background: #912018; }
.toast.ok { background: #054f31; }

.profile-pass-status {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.profile-pass-status.is-ok {
  background: #e8f7ef;
  color: #054f31;
  border: 1px solid #9fceb5;
}
.profile-pass-status.is-err {
  background: #fef3f2;
  color: #912018;
  border: 1px solid #fecdca;
}

.kpi.danger .value { color: var(--danger); }
.kpi.warn .value { color: var(--warn); }
.kpi.ok .value { color: var(--ok); }
.kpi-click { cursor: pointer; transition: border-color .15s, transform .15s; }
.kpi-click:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---- Dashboard v2: queue + 3 flows + calm accents ---- */
.dash-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px; border-radius: 14px; margin-bottom: 14px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow);
}
.dash-status.ok { border-left: 4px solid var(--ok); }
.dash-status.warn { border-left: 4px solid var(--warn); }
.dash-status.danger { border-left: 4px solid var(--danger); }
.dash-status-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-status-pulse {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); box-shadow: 0 0 0 4px rgba(6, 118, 71, .12);
}
.dash-status.warn .dash-status-pulse {
  background: var(--warn); box-shadow: 0 0 0 4px rgba(181, 71, 8, .14);
}
.dash-status.danger .dash-status-pulse {
  background: var(--danger); box-shadow: 0 0 0 4px rgba(180, 35, 24, .14);
}
.dash-status-title { font-weight: 750; font-size: 17px; letter-spacing: -.02em; }
.dash-status-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.dash-status-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dash-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 999px; padding: 6px 12px; color: var(--text);
  transition: border-color .15s, background .15s;
}
.dash-chip:hover { border-color: var(--accent); }
.dash-chip.hot {
  background: #fef3f2; border-color: #fecdca; color: var(--danger);
}
.dash-chip-val { font-weight: 750; font-variant-numeric: tabular-nums; }
.dash-chip-lbl { font-size: 12px; color: var(--muted); }
.dash-chip.hot .dash-chip-lbl { color: #912018; }

.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.dash-soft-link {
  border: 0; background: transparent; color: var(--accent-2);
  font-weight: 600; font-size: 12px; padding: 0; cursor: pointer;
}
.dash-soft-link:hover { text-decoration: underline; }
.dash-empty { color: var(--muted); font-size: 13px; padding: 10px 2px; }

.dash-queue { margin-bottom: 14px; padding: 16px 18px; }
.dash-queue-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.dash-queue-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfcfb;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--text);
}
.dash-queue-btn:hover { border-color: #c8d0c9; background: #f3f6f3; }
.dash-queue-btn-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2ee;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.dash-queue-btn-caret { margin-left: 2px; font-size: 12px; }
.dash-queue-panel {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.dash-queue-panel[hidden] { display: none !important; }
.dash-queue-list { display: flex; flex-direction: column; gap: 6px; }
.dash-queue-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: #fbfcfb;
  border-left-width: 3px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.dash-queue-row:hover {
  background: #fff; border-color: #b7c9bf; transform: translateX(2px);
}
.dash-queue-row.sev-danger { border-left-color: var(--danger); background: #fff8f7; }
.dash-queue-row.sev-warn { border-left-color: var(--warn); background: #fffcf5; }
.dash-queue-row.sev-info { border-left-color: var(--info); }
.dash-queue-idx {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e8eee9; color: var(--muted); font-weight: 700; font-size: 12px;
}
.dash-queue-row.sev-danger .dash-queue-idx { background: #fee4e2; color: var(--danger); }
.dash-queue-row.sev-warn .dash-queue-idx { background: #fef0c7; color: var(--warn); }
.dash-queue-title { font-weight: 700; font-size: 14px; }
.dash-queue-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.dash-queue-cta { color: var(--accent-2); font-weight: 650; font-size: 12px; white-space: nowrap; }
.dash-queue-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px; color: var(--muted); font-size: 13px;
}
.dash-queue-empty-mark {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ecfdf3; color: var(--ok); font-weight: 700;
}

.dash-recent {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -2px 0 14px; padding: 0 2px;
}
.dash-recent-lbl { font-size: 12px; color: var(--muted); margin-right: 4px; }
.dash-recent-chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--text);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-recent-chip:hover { border-color: var(--accent); color: var(--accent); }

.dash-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  align-items: stretch;
}
.dash-flow-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0;
}
.dash-flow-head { margin-bottom: 10px; }
.dash-flow-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 750;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.dash-flow-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-flow-col:first-child .dash-flow-stats,
.dash-flow-stats.cols-4 { grid-template-columns: 1fr 1fr; }
.dash-col-stat {
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid transparent;
}
.dash-col-stat.warn { background: #fffaeb; }
.dash-col-stat.danger { background: #fef3f2; }
.dash-col-stat.ok { background: #ecfdf3; }
.dash-col-stat.info { background: #eff8ff; }
.dash-col-stat-val {
  font-size: 20px; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dash-col-stat.warn .dash-col-stat-val { color: var(--warn); }
.dash-col-stat.danger .dash-col-stat-val { color: var(--danger); }
.dash-col-stat.ok .dash-col-stat-val { color: var(--ok); }
.dash-col-stat.info .dash-col-stat-val { color: var(--info, #175cd3); }
.dash-col-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; }
.dash-wo-status-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.dash-wo-status-chip {
  display: inline-block;
  font-size: 11px; font-weight: 650;
  padding: 3px 8px; border-radius: 999px;
  background: #f2f4f7; color: #344054;
}
.dash-wo-status-chip.tone-warn { background: #fffaeb; color: #b54708; }
.dash-wo-status-chip.tone-info { background: #eff8ff; color: #175cd3; }
.dash-wo-status-chip.tone-muted { background: #f2f4f7; color: #667085; }
.tone-warn-text { color: #b54708; }
.dash-flow-body { flex: 1; min-height: 0; }
.dash-flow-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e8eee9; }
.dash-flow-subtitle {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
  margin: 10px 0 6px;
}
.dash-flow-subtitle:first-child { margin-top: 0; }
.dash-flow-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.dash-mini-table table.data { font-size: 12.5px; }
.dash-mini-table table.data th { font-size: 11px; }

.dash-insight-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.dash-insight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
}
.dash-insight-card { margin: 0; padding: 14px 16px; }
.dash-alerts-toggle { display: flex; flex-direction: column; gap: 8px; }
.dash-alerts-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfcfb;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--text);
}
.dash-alerts-btn:hover { border-color: #c8d0c9; background: #f3f6f3; }
.dash-alerts-btn.has-open { border-color: #f7c948; background: #fffcf0; }
.dash-alerts-btn.has-critical { border-color: #f97066; background: #fef3f2; }
.dash-alerts-btn-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2ee;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.dash-alerts-btn-count.hot { background: #fef0c7; color: #b54708; }
.dash-alerts-btn.has-critical .dash-alerts-btn-count.hot {
  background: #fee4e2; color: #b42318;
}
.dash-alerts-btn-crit {
  font-size: 11px;
  font-weight: 700;
  color: #b42318;
}
.dash-alerts-btn-caret { margin-left: 2px; font-size: 12px; }
.dash-alerts-panel {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.dash-alerts-panel[hidden] { display: none !important; }
.dash-alerts-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.dash-insight-visual {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.dash-insight-bars { flex: 1; min-width: 160px; }
.dash-insight-mini {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px;
}
@media (min-width: 900px) {
  .dash-insight-mini { grid-template-columns: repeat(5, 1fr); }
}
.dash-fx-strip { margin-bottom: 12px; }
.dash-fx-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.dash-fx-rate {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfcfb;
}
.dash-fx-cc { font-weight: 700; margin-bottom: 4px; }
.dash-fx-movers { margin-top: 10px; font-size: 12px; }
.hub-fx-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.hub-fx-card {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.hub-fx-card:active { transform: scale(0.98); }
.trace-thread { max-width: 560px; }
.trace-steps { display: flex; flex-direction: column; gap: 12px; }
.trace-step {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfcfb;
}
.trace-step-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.fx-spark-wrap { display: flex; flex-direction: column; gap: 2px; }
.fx-spark { display: block; }
.tone-danger-text { color: var(--danger); font-weight: 700; }

.dash-ring { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.dash-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.dash-ring-num { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dash-ring-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.dash-alert-list { display: flex; flex-direction: column; gap: 8px; }
.dash-alert-row {
  display: flex; gap: 10px; justify-content: space-between; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  border-left-width: 3px; background: #fbfcfb;
}
.dash-alert-row.sev-danger { border-left-color: var(--danger); }
.dash-alert-row.sev-warn { border-left-color: var(--warn); }
.dash-alert-row.sev-info { border-left-color: var(--info); }
.dash-alert-title { font-weight: 650; font-size: 13px; }
.dash-alert-msg { font-size: 11px; margin-top: 2px; }
.dash-alert-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.dash-panel { margin-bottom: 0; min-height: 120px; }
table.data tr.row-danger td { background: #fef3f2; }
table.data tr.row-in-work td { background: #eff8ff; }
/* BOM photo lightbox */
.lightbox-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(16, 24, 40, 0.88);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 56px 28px;
  box-sizing: border-box;
}
.lightbox-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: calc(100vh - 110px);
}
.lightbox-img {
  max-width: min(96vw, 1400px);
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  background: #0b1220;
}
.lightbox-img-loading { opacity: 0.45; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: rgba(255, 255, 255, 0.92);
  color: #101828; font-size: 28px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.lightbox-nav:hover { background: #fff; }
.lightbox-prev { left: -8px; }
.lightbox-next { right: -8px; }
.lightbox-close {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: rgba(255, 255, 255, 0.92);
  color: #101828; font-size: 18px; cursor: pointer;
}
.lightbox-meta {
  margin-top: 14px; text-align: center; color: #fff;
  max-width: min(90vw, 720px);
}
.lightbox-counter {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  opacity: 0.8; margin-bottom: 4px;
}
.lightbox-caption { font-size: 14px; line-height: 1.35; }
.bom-photo-thumb:hover { filter: brightness(0.96); }

.quick-btn-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.quick-btn {
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--text, #101828);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  line-height: 1.2;
  max-width: 100%;
}
.quick-btn:hover { border-color: #98a2b3; background: #f8fafc; }
.quick-btn.active {
  border-color: #175cd3;
  background: #eff8ff;
  color: #175cd3;
  box-shadow: inset 0 0 0 1px rgba(23, 92, 211, 0.25);
}

.quick-btn-node {
  font-weight: 550;
  color: #344054;
  border-style: dashed;
}
.quick-btn-node.active {
  border-style: solid;
}
.quick-btn-parent {
  color: #667085;
  font-weight: 600;
  font-size: 11px;
}
.quick-btn-sep { color: #98a2b3; font-weight: 400; }

.bom-quick-tree {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 42vh;
  overflow: auto;
  padding-right: 2px;
}
.bom-quick-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bom-quick-subhead {
  font-size: 11px;
  color: #667085;
  font-weight: 600;
  margin: 4px 0 2px 2px;
}
.bom-quick-nodes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid #e4e7ec;
  margin-left: 4px;
}
.bom-quick-item {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--text, #101828);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.35;
}
.bom-quick-item:hover { border-color: #98a2b3; background: #f8fafc; }
.bom-quick-item.active {
  border-color: #175cd3;
  background: #eff8ff;
  color: #175cd3;
  box-shadow: inset 0 0 0 1px rgba(23, 92, 211, 0.25);
}
.bom-quick-product {
  font-weight: 700;
  font-size: 13px;
}
.bom-quick-node {
  font-weight: 550;
  font-size: 12px;
  color: #344054;
}




.hover-tip { position: relative; cursor: help; display: inline-block; }
.hover-tip-who { font-size: 12px; color: #175cd3; font-weight: 600; }
.term-tip {
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
  text-decoration: none;
}
.hover-tip:hover::after,
.hover-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  background: #101828;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-line;
  min-width: 200px;
  max-width: min(320px, 70vw);
  z-index: 40;
  box-shadow: 0 8px 24px rgba(16,24,40,.18);
  pointer-events: none;
}
.kpi .term-tip:hover::after,
.kpi .term-tip:focus-visible::after,
th .term-tip:hover::after,
th .term-tip:focus-visible::after {
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-flow { grid-template-columns: 1fr; }
  .dash-insight { grid-template-columns: 1fr; }
}

/* ---- Charts ---- */
.dash-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.dash-chart-card { margin-bottom: 0; }
.dash-chart-wide { grid-column: 1 / -1; }
.chart-body { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.chart-donut-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.chart-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.chart-donut-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 8px; }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.chart-hbar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.chart-hbar-row { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; }
.chart-hbar-track { height: 10px; background: #eef2f6; border-radius: 6px; overflow: hidden; }
.chart-hbar-fill { height: 100%; border-radius: 6px; background: #175cd3; }
.chart-hbar-fill.tone-danger { background: #d92d20; }
.chart-hbar-fill.tone-warn { background: #dc6803; }
.chart-hbar-fill.tone-info { background: #175cd3; }
.chart-hbar-val { text-align: right; font-weight: 600; }
.chart-mini-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px;
}

/* ---- Gantt pro ---- */
.gantt-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 4px;
}
.gantt-type-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
  background: #ecfdf3; color: #067647;
}
.gantt-type-tag.stage { background: #eff8ff; color: #175cd3; }
.gantt-row.type-row-group { opacity: 0.92; }
.gantt-row.type-row-group .gantt-name { font-weight: 650; color: var(--muted); }
.gantt-help-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gantt-help-pill {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  background: #f2f4f7; color: #344054;
}
.tasks-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
.tasks-top-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tasks-top-actions { margin: 0; }
@media (max-width: 960px) {
  .tasks-top-row { grid-template-columns: 1fr; }
  .tasks-top-charts { grid-template-columns: 1fr; }
}

.gantt-page { display: flex; flex-direction: column; gap: 12px; }
.gantt-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: 12px;
  align-items: stretch;
}
.gantt-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.gantt-charts .panel { margin: 0; }
.gantt-tasks-head { margin: 0; }
@media (max-width: 1100px) {
  .gantt-top-row { grid-template-columns: 1fr; }
  .gantt-charts { grid-template-columns: 1fr; }
}
.gantt-materials {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #f9fafb;
}
.gantt-materials.ok { border-color: #abefc6; background: #ecfdf3; }
.gantt-materials.short { border-color: #fecdca; background: #fef3f2; }
.gantt-materials-ok { color: #067647; font-weight: 600; }
.gantt-materials-warn { color: #b42318; font-weight: 600; }
.gantt-mat-table { font-size: 12px; }
.gantt-mat-table th, .gantt-mat-table td { padding: 6px 8px; }
.gantt-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
@media (max-width: 960px) {
  .gantt-charts { grid-template-columns: 1fr; }
}
.gantt-kpi {
  min-width: 88px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: #f9fafb;
}
.gantt-kpi .label { font-size: 11px; color: var(--muted); }
.gantt-kpi .value { font-size: 18px; font-weight: 700; margin-top: 2px; }
.gantt-kpi.health-on_track .value { color: #099250; }
.gantt-kpi.health-at_risk .value { color: #dc6803; }
.gantt-kpi.health-late .value { color: #d92d20; }
.gantt-kpi.health-blocked .value { color: #7a271a; }
.gantt-layout {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
  gap: 12px; align-items: start;
}
.gantt-main { overflow: auto; }
.gantt-row {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr 110px;
  gap: 10px; align-items: center; padding: 8px 6px;
  border-bottom: 1px solid #f2f4f7; cursor: pointer;
}
.gantt-row:hover { background: #f8fafc; }
.gantt-row.depth-1 .gantt-label { padding-left: 12px; }
.gantt-row.depth-2 .gantt-label { padding-left: 24px; }
.gantt-label-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gantt-name { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-sub { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-blocker { font-size: 11px; color: #b42318; margin-top: 2px; }
.gantt-toggle {
  border: 0; background: #eef2f6; width: 22px; height: 22px; border-radius: 4px;
  cursor: pointer; font-size: 12px; line-height: 1; flex-shrink: 0;
}
.gantt-toggle.spacer-toggle { background: transparent; cursor: default; color: #98a2b3; }
.gantt-health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gantt-track {
  position: relative; height: 28px; background: #f2f4f7;
  border-radius: 6px; border: 1px solid var(--border); overflow: hidden;
}
.gantt-bar {
  position: absolute; top: 4px; bottom: 4px; border-radius: 4px; opacity: .92;
}
.gantt-bar.health-late, .gantt-bar.health-blocked { box-shadow: inset 0 0 0 2px rgba(217,45,32,.55); }
.gantt-progress {
  position: absolute; top: 4px; bottom: 4px;
  background: rgba(255,255,255,.35); pointer-events: none; border-radius: 4px;
}
.gantt-today {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #f04438; z-index: 2;
}
.gantt-baseline {
  position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #667085; z-index: 1;
}
.gantt-status { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gantt-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; margin-top: 8px;
}
.gantt-blocker-list { margin: 0; padding-left: 18px; font-size: 13px; }
.gantt-blocker-list li { margin-bottom: 6px; }

@media (max-width: 1100px) {
  .dash-charts { grid-template-columns: 1fr; }
  .gantt-layout { grid-template-columns: 1fr; }
  .chart-mini-kpis { grid-template-columns: 1fr 1fr; }
  .gantt-row { grid-template-columns: 1fr; }
}

.help-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted);
  font-weight: 700; font-size: 13px; line-height: 1; flex: 0 0 auto;
}
.help-q:hover { color: var(--accent); border-color: var(--accent); }
.help-body p { margin: 0 0 10px; line-height: 1.5; }
.help-body p:last-child { margin-bottom: 0; }
.help-modal { max-width: 640px; }
.help-modal .help-body { max-height: min(60vh, 480px); overflow: auto; }
.process-intro { margin-bottom: 14px; line-height: 1.5; }
.process-h { margin: 0 0 6px; font-size: 16px; }
.process-lead { margin: 0 0 12px; }
.process-panel { margin-bottom: 14px; }
.bib-shot {
  margin: 14px 0 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #f7faf8;
  box-shadow: var(--shadow);
}
.bib-shot img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.bib-shot figcaption {
  padding: 8px 12px 10px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: #fff;
}
.manual h4.bib-h-sub,
.manual h5.bib-h-sub,
.manual h6.bib-h-sub {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.manual hr.bib-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.process-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 10px;
}
.flow-box {
  min-width: 140px; max-width: 210px; flex: 1;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: var(--surface-2);
}
.flow-title { font-weight: 650; }
.flow-hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.flow-doc { border-left: 3px solid var(--accent-2); }
.flow-wo { border-left: 3px solid var(--accent); }
.flow-act { border-left: 3px solid var(--warn); background: #fffaf3; }
.flow-ok { border-left: 3px solid var(--ok); background: #f3faf6; }
.flow-arrow {
  display: flex; align-items: center; color: var(--muted); font-weight: 600;
  padding: 0 2px; min-width: 28px; justify-content: center;
}
.process-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; }
.manual { max-width: 920px; }
.manual h1 { font-size: 28px; margin: 8px 0 12px; }
.manual h2 { font-size: 20px; margin: 28px 0 10px; scroll-margin-top: 12px; }
.manual h3 { font-size: 16px; margin: 18px 0 8px; }
.manual p { margin: 0 0 10px; line-height: 1.55; }
.manual ul, .manual ol { margin: 0 0 12px; padding-left: 22px; line-height: 1.5; }
.manual li { margin: 0 0 6px; }
.manual table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.manual th, .manual td { border: 1px solid var(--border); padding: 6px 8px; vertical-align: top; text-align: left; }
.manual th { background: var(--surface-2); }
.manual-toc { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 16px; }
.manual-toc a { color: var(--accent); text-decoration: none; }
.manual-toc a:hover { text-decoration: underline; }

@media print {
  .sidebar, .topbar, .modal-ft, .sidebar-backdrop, #toast-root { display: none !important; }
  .modal-backdrop { position: static; background: none; padding: 0; }
  .modal { max-height: none; box-shadow: none; border: 0; width: 100%; }
  #warranty-print-area .btn { display: none; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 260px;
    transform: translateX(-105%); transition: transform .2s ease; z-index: 60;
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50;
  }
  .app-shell.sidebar-open .sidebar-backdrop { display: block; }
  .content, .topbar { padding-left: 14px; padding-right: 14px; }
  .form-grid.cols-2 { grid-template-columns: 1fr; }
}

/* RBAC matrix */
.rbac-table-wrap { overflow: visible; margin-top: 12px; }
table.rbac-matrix th, table.rbac-matrix td { white-space: nowrap; vertical-align: top; }
table.rbac-matrix td.rbac-cap { min-width: 220px; white-space: normal; }
.rbac-cap-title { font-weight: 600; }
.rbac-select { min-width: 110px; }
.rbac-lv-none { color: var(--muted); }
.rbac-lv-read { color: var(--info); }
.rbac-lv-write { color: var(--ok); font-weight: 600; }
.rbac-lv-admin { color: var(--accent); font-weight: 700; }

/* Today action queue + shop floor */
.today-panel { margin-bottom: 12px; }
.today-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.today-card {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.today-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.today-card.sev-danger { border-left: 4px solid var(--danger); }
.today-card.sev-warn { border-left: 4px solid var(--warn); }
.today-card.sev-info { border-left: 4px solid var(--info); }
.today-title { font-weight: 700; font-size: 14px; }
.today-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.today-cta { margin-top: 10px; color: var(--accent-2); font-weight: 600; font-size: 12px; }
.today-empty { padding: 8px 0; }
.recent-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.recent-chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.floor-next {
  background: linear-gradient(135deg, #eef7f2 0%, #f7faf8 60%);
  border: 1px solid #b7d4c4;
}
.floor-kicker { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.floor-op { font-size: 22px; font-weight: 800; margin: 6px 0 4px; }
.floor-warn { margin-top: 8px; color: var(--danger); font-weight: 600; }
.floor-ok { margin-top: 8px; color: var(--ok); font-weight: 600; font-size: 13px; }
.floor-guide {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.7); border-radius: 8px; border: 1px dashed #9bb8a8;
  font-size: 12.5px; line-height: 1.45; color: #31443b;
}
.floor-guide p { margin: 0 0 6px; }
.floor-guide p:last-child { margin: 0; }
.floor-live {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 12px; font-weight: 700; color: var(--accent);
}
.floor-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.floor-btn { min-height: 44px; min-width: 120px; font-size: 16px; font-weight: 700; }
.floor-big .floor-op { font-size: 28px; }
.floor-big .floor-btn { min-height: 64px; min-width: 160px; font-size: 20px; }
.row-actions { display: flex; gap: 4px; }

/* ===== Device shell: phone / tablet / desktop ===== */
.device-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.device-chip[data-form="phone"] { color: var(--accent); border-color: #9cc4b3; }
.device-chip[data-form="tablet"] { color: var(--accent-2); border-color: #9db5cc; }
.bottom-nav { display: none; }
.icon-btn { min-width: 40px; }

html.device-phone .app-shell,
html.device-tablet .app-shell { grid-template-columns: 1fr; }
html.device-phone .sidebar,
html.device-tablet .sidebar {
  position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw);
  transform: translateX(-105%); transition: transform .22s cubic-bezier(.2,.8,.2,1); z-index: 70;
}
html.device-phone .app-shell.sidebar-open .sidebar,
html.device-tablet .app-shell.sidebar-open .sidebar { transform: translateX(0); }
html.device-phone .sidebar-backdrop,
html.device-tablet .sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(8,16,12,.42); z-index: 65;
  backdrop-filter: blur(2px);
}
html.device-phone .app-shell.sidebar-open .sidebar-backdrop,
html.device-tablet .app-shell.sidebar-open .sidebar-backdrop { display: block; }

html.device-phone .bottom-nav,
html.device-tablet .bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: rgba(255,255,255,.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.2);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 28px rgba(15, 28, 23, 0.06);
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 48px; padding: 4px 2px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 650;
}
.bottom-nav-item.active {
  color: var(--accent);
  background: linear-gradient(180deg, rgba(11,110,79,.12), rgba(11,110,79,.04));
}
.bottom-nav-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.device-phone .main,
html.device-tablet .main { padding-bottom: 0; }
html.device-phone .content,
html.device-tablet .content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
html.device-phone .to-top,
html.device-tablet .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
html.device-phone .content { padding: 12px 12px 24px; }
html.device-tablet .content { padding: 16px 18px 28px; }
html.device-phone .topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(12px); background: rgba(228,235,230,.88);
  padding: 10px 12px; gap: 8px; border-bottom: 1px solid rgba(201,213,206,.8);
}
html.device-phone #page-title { font-size: 17px; flex: 1; min-width: 0; }
html.device-phone #top-user { font-size: 11px; }
html.device-phone .global-search { order: 5; flex: 1 1 100%; }
html.device-phone .global-search-input { width: 100%; min-height: 44px; }
html.device-phone .dash-flow { grid-template-columns: 1fr; }
html.device-phone .dash-insight { grid-template-columns: 1fr; }
html.device-phone .dash-queue-row { grid-template-columns: 24px 1fr; }
html.device-phone .dash-queue-cta { display: none; }
html.device-phone .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.device-phone .kpi .value { font-size: 18px; }
html.device-phone .dash-charts { grid-template-columns: 1fr; }
html.device-phone .dash-grid { grid-template-columns: 1fr; }
html.device-phone .today-grid { grid-template-columns: 1fr; }
html.device-phone table.data { font-size: 12px; }
html.device-phone .btn, html.touch-device .btn { min-height: 44px; }
html.device-phone .modal { width: calc(100vw - 20px); max-width: none; }

html.device-tablet .dash-flow { grid-template-columns: 1fr 1fr; }
html.device-tablet .dash-insight { grid-template-columns: 1fr 1fr; }
html.device-tablet .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.device-tablet .floor-next { border-radius: 14px; }
html.device-tablet.touch-device .floor-btn { min-height: 56px; }

/* Manager hub */
.hub-root { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.hub-hero {
  padding: 22px 20px 18px;
  border-radius: 18px;
  background:
    radial-gradient(500px 180px at 10% 0%, rgba(11,110,79,.18), transparent 60%),
    linear-gradient(145deg, #0f1f19 0%, #163328 55%, #0a5c8c 140%);
  color: #e8f2ec;
  box-shadow: 0 16px 40px rgba(10, 22, 18, 0.22);
}
.hub-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #9fc4b3; margin-bottom: 8px;
}
.hub-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.hub-lead { margin: 8px 0 0; color: #c5d9ce; font-size: 14px; line-height: 1.45; max-width: 36em; }
.hub-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.hub-metrics-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .hub-metrics-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hub-metrics,
  .hub-metrics-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hub-metric-btn {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.hub-metric-btn:hover {
  border-color: var(--accent, #1a7a5c);
  box-shadow: 0 0 0 1px rgba(26, 122, 92, 0.15);
}
.hub-metric-btn:focus-visible {
  outline: 2px solid var(--accent, #1a7a5c);
  outline-offset: 2px;
}
.hub-detail-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.hub-metric {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; box-shadow: var(--shadow);
}
.hub-metric-btn.is-warn {
  border-color: #c9852a;
  background: #fffaf2;
}
.hub-metric-btn.is-warn .hub-metric-val { color: #9a5b00; }
.hub-metric-val { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.hub-metric-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.hub-section-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.hub-stack { display: flex; flex-direction: column; gap: 10px; }
.hub-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 14px 12px; box-shadow: var(--shadow);
}
.hub-card-pay { border-left: 4px solid var(--warn); }
.hub-card-kicker { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.hub-card-title { font-size: 17px; font-weight: 800; margin-top: 4px; }
.hub-card-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.hub-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hub-btn { flex: 1 1 120px; min-height: 48px; font-weight: 700; }
.hub-action {
  text-align: left; border: 1px solid var(--border); background: var(--surface);
  border-radius: 14px; padding: 14px; cursor: pointer; box-shadow: var(--shadow);
}
.hub-action.sev-danger { border-left: 4px solid var(--danger); }
.hub-action.sev-warn { border-left: 4px solid var(--warn); }
.hub-action.sev-info { border-left: 4px solid var(--info); }
.hub-action-title { font-weight: 800; font-size: 15px; }
.hub-action-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.hub-action-cta { margin-top: 10px; color: var(--accent); font-weight: 700; font-size: 12px; }
.hub-foot { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.hub-foot .btn { flex: 1; min-height: 48px; }
.hub-foot .btn.hub-alerts-hot {
  border-color: #f7c948;
  background: #fffcf0;
  font-weight: 700;
}
.hub-wo-block { display: flex; flex-direction: column; gap: 4px; }
.hub-project-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-left: 4px solid #98a2b3;
}
.hub-project-card.health-ok { border-left-color: #12b76a; }
.hub-project-card.health-warn { border-left-color: #f79009; }
.hub-project-card.health-critical { border-left-color: #f04438; }
.hub-project-card:hover { border-color: #b7c9bf; background: #fbfcfb; }
.hub-project-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.hub-project-num { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.hub-project-name { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.hub-project-hold { font-size: 11px; font-weight: 700; color: #b54708; margin-top: 4px; }
.hub-project-deadline { text-align: right; flex-shrink: 0; }
.hub-deadline-val { font-weight: 800; font-size: 13px; }
.hub-deadline-val.tone-danger { color: #b42318; }
.hub-deadline-val.tone-warn { color: #b54708; }
.hub-deadline-val.tone-ok { color: #027a48; }
.hub-deadline-val.tone-muted { color: var(--muted); }
.hub-deadline-date { font-size: 11px; margin-top: 2px; }
.hub-project-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 10px;
}
.hub-project-prog {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
}
.hub-project-blockers { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.hub-project-blockers-lbl {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.hub-blocker {
  font-size: 12px; font-weight: 600;
  padding: 6px 8px; border-radius: 8px;
  background: #fffcf5; color: #7a2e0e;
  border-left: 3px solid #f79009;
}
.hub-blocker.sev-danger {
  background: #fef3f2; color: #912018;
  border-left-color: #f04438;
}
.hub-project-ok { margin-top: 10px; font-size: 12px; }

/* Hub — телефон: рішення першими, великі CTA */
.hub-root-phone { gap: 14px; padding-bottom: 8px; }
.hub-hero-phone {
  padding: 14px 14px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(10, 22, 18, 0.18);
}
.hub-hero-phone .hub-title { font-size: 22px; }
.hub-hero-phone .hub-lead { margin-top: 4px; font-size: 13px; max-width: none; }
.hub-hero-phone .hub-eyebrow { margin-bottom: 4px; font-size: 10px; }

.hub-jump {
  display: flex;
  gap: 8px;
  position: sticky;
  top: 52px;
  z-index: 30;
  margin: -4px 0 2px;
  padding: 6px 0;
  background: linear-gradient(180deg, rgba(228,235,230,.96) 40%, rgba(228,235,230,.7));
  backdrop-filter: blur(8px);
}
.hub-jump-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #c9852a;
  background: #fff8ee;
  color: #9a5b00;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hub-jump-btn.hub-jump-pay {
  border-color: #d4a017;
  background: #fffbeb;
}

.hub-section-hot {
  padding: 12px;
  margin: 0 -2px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff9f0, #fff);
  border: 1px solid #f0d4a8;
}
.hub-section-pay {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border-color: #e8c96a;
}
.hub-section-hot .hub-section-title { color: #9a5b00; }

.hub-card-decide {
  padding: 16px 14px 14px;
  border-radius: 18px;
}
.hub-card-actions-phone {
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.hub-card-actions-phone .hub-btn-approve {
  flex: none;
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  border-radius: 14px;
}
.hub-card-actions-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.hub-card-actions-row .hub-btn {
  flex: 1;
  min-height: 48px;
}
.hub-card-actions-phone > .hub-btn-reject {
  width: 100%;
  min-height: 48px;
}

html.device-phone .hub-metrics-5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
html.device-phone .hub-metric {
  padding: 12px 10px;
  min-height: 64px;
  border-radius: 14px;
}
html.device-phone .hub-metric-val { font-size: 18px; }
html.device-phone .hub-metric-lbl { font-size: 10px; line-height: 1.25; }
html.device-phone .hub-project-card {
  padding: 14px 12px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
html.device-phone .hub-action {
  padding: 14px 12px;
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
}
html.device-phone .hub-more-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
}
html.device-phone .hub-foot {
  gap: 10px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
html.device-phone .hub-foot .btn { min-height: 52px; font-weight: 700; }
html.device-phone .dash-wo-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* Помічник закупівель */
.suggest-root { max-height: min(70vh, 640px); overflow: auto; }
.suggest-mr-list { display: flex; flex-direction: column; gap: 8px; }
.suggest-mr-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer;
}
.suggest-mr-btn:hover { border-color: var(--accent); }
.suggest-line {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; margin-bottom: 12px; background: var(--surface);
}
.suggest-line-head {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  margin-bottom: 10px;
}
.suggest-options { display: flex; flex-direction: column; gap: 8px; }
.suggest-option {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px;
  align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg, #f7f8fa);
}
.suggest-option.is-preferred { border-color: var(--accent); }
.suggest-option-rank {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  background: var(--accent); color: #fff;
}
.suggest-option-title {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-weight: 700; font-size: 14px;
}
.suggest-option-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.suggest-option-reason { font-size: 12.5px; margin-top: 4px; line-height: 1.35; }
.suggest-option-similarity {
  font-size: 12px; margin-top: 4px; line-height: 1.35;
  color: var(--muted); border-left: 2px solid var(--accent); padding-left: 8px;
}
.suggest-product-link {
  display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--accent); text-decoration: none;
}
.suggest-product-link:hover { text-decoration: underline; }
.suggest-section-title {
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.suggest-option-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-items: stretch;
}
.suggest-option-actions .btn { white-space: nowrap; }
.suggest-option.is-search {
  background: #fff; border-style: dashed;
}

.task-comments-thread {
  max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px;
}
.task-comment {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: var(--bg, #f7f8fa);
}
.task-comment-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; margin-bottom: 4px;
}
.task-comment-body { font-size: 14px; white-space: pre-wrap; line-height: 1.4; }

html.touch-device button,
html.touch-device .btn,
html.touch-device a.bottom-nav-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Вкладення: іконка виду + імʼя файлу (без паралельних «РН …» підписів) */
.att-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.doc-kind-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.att-filename {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Зміна комірника */
.wh-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.wh-sum-item {
  display: flex;
  flex-direction: column;
  min-width: 88px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.wh-sum-item strong {
  font-size: 1.35rem;
  line-height: 1.1;
}
.wh-sum-item span {
  color: var(--muted);
  font-size: 0.85rem;
}
.wh-filters,
.wh-scan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.wh-scan-row .input {
  flex: 1 1 200px;
  min-width: 160px;
}
.wh-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wh-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 14px;
}
.wh-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wh-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wh-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.wh-suggest {
  font-family: var(--mono);
  font-size: 0.9rem;
}
.wh-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.wh-route {
  margin-bottom: 6px;
  font-size: 0.9rem;
}
@media (max-width: 720px) {
  .wh-line {
    grid-template-columns: 1fr 1fr;
  }
  .wh-card-actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

/* Карта комірок */
.loc-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.loc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.loc-row:hover {
  border-color: var(--border);
  background: var(--surface-2, var(--surface));
}
.btn-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Штрихкод CODE128 */
.bc-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  max-width: 100%;
  overflow: auto;
}
.bc-block .bc-svg,
.bc-visual svg {
  max-width: 100%;
  height: auto;
}
.bc-visual {
  min-height: 24px;
}

.role-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
.role-timeline { display: flex; flex-direction: column; gap: 6px; }
.role-time-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.role-time-row:hover { border-color: var(--accent); }
.role-time-when {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.role-legend { display: grid; gap: 10px; font-size: 13px; }
.role-legend .muted { font-size: 12px; margin-top: 2px; }
@media (max-width: 900px) {
  .role-split { grid-template-columns: 1fr; }
}