/* DecorPoint Work Space — облик на приложението и печат (A4).
   Цветовете и заоблянията се задават веднъж тук долу и се ползват навсякъде. */
:root {
  --bg: #f4f4f3;
  --surface: #ffffff;
  --surface-2: #fbfbfa;
  --surface-3: #ebebe9;
  --border: #e5e5e3;
  --border-strong: #cbcbc8;
  --text: #171716;
  --muted: #615f5c;
  --faint: #96938e;
  --accent: #2b2b29;
  --accent-hover: #111110;
  --accent-soft: #ececea;
  --accent-line: #d2d2ce;
  --ok: #2a7048;
  --ok-soft: #e4f1e9;
  --warn: #8f5807;
  --warn-soft: #fbeed7;
  --danger: #ab332b;
  --danger-soft: #fbe5e2;
  --info: #2a5a9c;
  --info-soft: #e5edf8;
  --violet: #63449f;
  --violet-soft: #ede7f8;
  --side-bg: #161615;
  --side-bg-2: #242422;
  --side-text: #efefec;
  --side-muted: #9b9892;
  --side-glow: #e8e8e4;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, .05);
  --shadow: 0 1px 2px rgba(28, 26, 23, .04), 0 2px 8px rgba(28, 26, 23, .05);
  --shadow-md: 0 2px 4px rgba(28, 26, 23, .05), 0 8px 24px rgba(28, 26, 23, .08);
  --shadow-lg: 0 12px 24px rgba(28, 26, 23, .1), 0 28px 64px rgba(28, 26, 23, .16);
  --ring: 0 0 0 3px rgba(43, 43, 41, .20);
  --sidebar-w: 284px;
  --rail-w: 64px;
  --ease: cubic-bezier(.2, .8, .3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
button, a, .step, .thumb, .cal-day { -webkit-tap-highlight-color: rgba(43, 43, 41, .15); }
body {
  font: 14px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 23px; line-height: 1.2; }
h2 { font-size: 15.5px; }
h3 { font-size: 14px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.mt { margin-top: 12px; }
.mt-lg { margin-top: 20px; }
::selection { background: var(--accent-soft); }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--side-bg-2) 0%, var(--side-bg) 240px);
  color: var(--side-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: var(--pill); }
.brand { display: flex; gap: 10px; align-items: center; padding: 16px 14px 14px; }
/* без това дългото име не се свива и избутва камбанката извън лентата */
.brand > div { min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(145deg, #3a3a37, #222220); color: var(--side-glow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 8px rgba(0, 0, 0, .3);
}
.brand-name { font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-name span { font-weight: 400; color: var(--side-muted); }
.brand-sub { font-size: 11.5px; color: var(--side-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; flex-direction: column; padding: 4px 10px 10px; gap: 1px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--side-muted); padding: 15px 10px 5px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--side-text); text-decoration: none; position: relative;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transition: opacity .15s var(--ease); }
.nav a:hover { background: rgba(255, 255, 255, .07); }
.nav a:hover svg { opacity: .95; }
.nav a.active { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 550; }
.nav a.active svg { opacity: 1; color: var(--side-glow); }
.nav a.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-glow); }
.sidebar-foot { margin-top: auto; padding: 12px 16px 16px; font-size: 12px; color: var(--side-muted); border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-foot a { color: var(--side-glow); }
.mobile-bar { display: none; }
.main { flex: 1; min-width: 0; padding: 24px 30px 64px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin-right: auto; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    position: fixed; z-index: 50; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .22s var(--ease); box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    overscroll-behavior: contain; /* превъртането в менюто да не дърпа страницата отзад */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.open { transform: none; }
  /* затъмнение зад чекмеджето: и се вижда, че е отворено, и дава къде да се докосне за затваряне */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 49; background: rgba(20, 18, 16, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
  }
  body.menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  /* страницата отзад да не се превърта, докато менюто е отворено */
  body.menu-open { overflow: hidden; }
  .mobile-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--side-bg); color: var(--side-text); position: sticky; top: 0; z-index: 40; }
  .mobile-bar .icon-btn { color: var(--side-text); }
  .mobile-bar .icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .main { padding: 16px 12px 60px; }
}

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-head h2 { margin-right: auto; }
.card-head .hint { font-size: 12px; color: var(--muted); }
.card-body { padding: 15px 16px; }
.card-foot { padding: 11px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.card + .card { margin-top: 14px; }
.empty { padding: 30px 16px; text-align: center; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  font: inherit; font-weight: 550; line-height: 1; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(17, 17, 16, .28); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 2px 8px rgba(17, 17, 16, .26); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.btn:disabled:active { transform: none; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn {
  display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: var(--radius-sm);
  background: transparent; border: 0; cursor: pointer; color: var(--muted); font: inherit;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.icon-btn:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn.neutral:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.menu { position: relative; display: inline-block; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; min-width: 224px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 5px; display: none;
}
.menu.open .menu-list { display: block; animation: pop .13s var(--ease); }
.menu-list button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; font: inherit; color: var(--text); border-radius: 6px; cursor: pointer;
}
.menu-list button:hover { background: var(--accent-soft); color: var(--accent); }
.menu-list button.danger { color: var(--danger); }
.menu-list button.danger:hover { background: var(--danger-soft); }
.menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Forms ---------- */
.f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); min-width: 0; }
.f > span { font-weight: 550; }
button.chip-auto { border: 0; cursor: pointer; font: inherit; font-size: 11px; }
button.chip-auto:hover { background: #cfdef3; }
/* всички текстови полета изглеждат еднакво — паролата също */
input[type=text], input[type=date], input[type=time], input[type=email], input[type=tel],
input[type=password], input[type=number], input[type=search], input[type=url], input[type=month],
input[type=datetime-local], input:not([type]), select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; min-width: 0; width: 100%;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; vertical-align: middle; }
input[type=radio] { accent-color: var(--accent); }
input.n { text-align: right; font-variant-numeric: tabular-nums; }
input.auto::placeholder { color: var(--info); opacity: 1; font-style: italic; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.span-all { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .g2, .g3, .g4, .g6 { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3 { grid-column: auto; }
}
.check { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: var(--text); cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.seg button { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 12px; border: 0; background: var(--surface); cursor: pointer; color: var(--muted); transition: background .14s var(--ease), color .14s var(--ease); }
.seg button:hover { background: var(--surface-2); color: var(--text); }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button.on { background: var(--accent); color: #fff; }
.seg button.on:hover { background: var(--accent-hover); color: #fff; }
.search { max-width: 280px; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap;
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tr.click { cursor: pointer; }
.tbl tfoot td { font-weight: 650; background: var(--surface-2); border-bottom: 0; }
.tbl.edit td { padding: 4px 4px; }
.tbl.edit th { padding: 7px 4px; }
.tbl.edit td:first-child, .tbl.edit th:first-child { padding-left: 12px; }
.tbl.edit td:last-child, .tbl.edit th:last-child { padding-right: 10px; }
.tbl.edit input, .tbl.edit select { padding: 6px 8px; }
.tbl .idx { color: var(--faint); font-size: 12px; width: 34px; white-space: nowrap; }
.tbl .code { font-weight: 650; color: var(--accent); font-size: 12px; white-space: nowrap; }
.tbl tr.zero td { opacity: .55; }
.tbl tr.zero td:last-child { opacity: 1; }
.w-xs { width: 62px; }
.w-sm { width: 84px; }
.w-md { width: 110px; }
.w-lg { width: 140px; }
.amount { font-weight: 650; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 550; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.chip-auto { font-size: 11px; color: var(--info); background: var(--info-soft); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 15px 16px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
a.kpi:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi .k-label { font-size: 12px; color: var(--muted); font-weight: 550; }
.kpi .k-value { font-size: 25px; font-weight: 650; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.notice { display: flex; gap: 10px; align-items: center; padding: 11px 15px; border-radius: var(--radius); background: var(--warn-soft); color: #6b4308; margin-bottom: 14px; flex-wrap: wrap; border: 1px solid rgba(143, 88, 7, .16); }
.notice.info { background: var(--info-soft); color: #1f446f; border-color: rgba(42, 90, 156, .16); }
.notice.ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(42, 112, 72, .18); }

/* ---------- Offer editor ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.editor-side { position: sticky; top: 16px; }
@media (max-width: 1180px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor-side { position: static; order: -1; }
}
.dirty { font-size: 12px; color: var(--warn); display: inline-flex; align-items: center; gap: 6px; }
.dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.sum-list { display: flex; flex-direction: column; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-variant-numeric: tabular-nums; }
.sum-row .l { color: var(--muted); }
.sum-row.sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 9px; }
.sum-row.total { font-size: 21px; font-weight: 700; border-top: 2px solid var(--text); margin-top: 6px; padding-top: 10px; letter-spacing: -.02em; }
.sum-row.total .l { color: var(--text); }
.sum-row.neg .r { color: var(--danger); }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.stats b { color: var(--text); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.sec-toggle { cursor: pointer; user-select: none; }
.sec-toggle .caret { display: inline-block; transition: transform .15s var(--ease); color: var(--muted); margin-right: 4px; }
.sec-toggle.open .caret { transform: rotate(90deg); }
.need { font-size: 12px; color: var(--info); white-space: nowrap; }
.edge-sel { width: 58px; padding: 5px 2px !important; }
.row-actions { white-space: nowrap; text-align: right; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kcol { background: var(--surface-3); border-radius: var(--radius); padding: 9px; min-height: 160px; }
.kcol.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.kcol-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-weight: 650; font-size: 13px; }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.kcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kcard:active { cursor: grabbing; }
.kcard .t { font-weight: 650; }
.kcard .m { font-size: 12px; color: var(--muted); margin-top: 2px; }
.progress { height: 6px; background: var(--surface-3); border-radius: var(--pill); overflow: hidden; margin-top: 8px; }
.progress > div { height: 100%; background: var(--ok); border-radius: var(--pill); transition: width .3s var(--ease); }

/* ---------- Calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-dow { padding: 8px; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cal-day { min-height: 108px; padding: 4px 5px 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: background .12s var(--ease); }
.cal-day:hover { background: var(--surface-2); }
.cal-day.out { background: var(--surface-3); }
.cal-day.out .d { color: var(--faint); }
.cal-day.weekend { background: #f7f7f5; }
.cal-day.holiday .d { color: var(--danger); }
.cal-day.today .d { background: var(--accent); color: #fff; border-radius: var(--pill); padding: 0 8px; }
.cal-day.busy { box-shadow: inset 0 3px 0 var(--side-glow); }
.cal-day .d { font-size: 13px; font-weight: 650; align-self: flex-start; line-height: 22px; }
.cal-day .hol { font-size: 10.5px; color: var(--danger); line-height: 1.2; }
.ev { font-size: 12px; line-height: 1.3; padding: 3px 7px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; cursor: pointer; }
.ev.done { text-decoration: line-through; opacity: .6; }
.ev-measure { background: #e3ebf7; border-color: #3b6db3; color: #1e3f6d; }
.ev-production { background: #fbeedb; border-color: #c07a1c; color: #6b4309; }
.ev-install { background: #e1f1e6; border-color: #2c7a4b; color: #1d5234; }
.ev-delivery { background: #dff1f0; border-color: #1f8078; color: #145550; }
.ev-meeting { background: #ece6f7; border-color: #6a4aa6; color: #46307a; }
.ev-off { background: #eceae6; border-color: #8a8479; color: #4b4740; }
.ev-other { background: #ececea; border-color: #6b6b66; color: #3a3a36; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; }
.legend .ev { display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; }
.legend .ev input { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .cal-day { min-height: 64px; }
  .cal-day .ev { font-size: 0; height: 6px; padding: 0; border-left-width: 0; }
  .cal-day .hol { display: none; }
}
.agenda-day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day .date { font-weight: 650; }
.agenda-day .date small { display: block; color: var(--muted); font-weight: 400; }

/* ---------- Modal & toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(28, 24, 19, .44); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; animation: fade .15s var(--ease); }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); animation: rise .18s var(--ease); }
.modal.wide { max-width: 860px; }
.modal.xwide { max-width: 1140px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* explicit widths must beat the generic input { width:100% } */
input.w-xs, select.w-xs { width: 62px; }
input.w-sm, select.w-sm { width: 84px; }
input.w-md, select.w-md { width: 110px; }
input.w-lg, select.w-lg { width: 140px; }
.err-text { color: var(--danger); font-size: 12px; }

/* Modules in the offer editor */
.mod { padding: 11px 16px; border-bottom: 1px solid var(--border); }
.mod:nth-child(even) { background: var(--surface-2); }
.mod-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.mod-row + .mod-row { margin-top: 6px; }
.mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mini input, .mini select { padding: 6px 8px; }
.mod-info { margin-top: 6px; }
.mod-details { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }
.modal-head { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin-right: auto; }
.modal-body { padding: 17px 18px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #242422; color: #fff; padding: 11px 15px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13px; animation: tin .2s var(--ease); max-width: 360px; }
.toast.ok { background: #245f3c; }
.toast.err { background: #8f2b24; }
@keyframes tin { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Cloud sign-in & roles ---------- */
.auth-open .app { display: none; }
.auth-screen {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1100px 560px at 50% -10%, #343431 0%, var(--side-bg) 62%);
}
.auth-card { width: 100%; max-width: 404px; background: var(--surface); border-radius: var(--radius-lg); padding: 24px 26px 26px; box-shadow: var(--shadow-lg); animation: rise .25s var(--ease); }
.auth-card h2 { font-size: 18px; margin-bottom: 6px; }
.auth-card p { margin: 6px 0; }
.auth-card .stack > .btn { width: 100%; }
.auth-card .stack > .btn.primary { padding: 10px 13px; }
.auth-logo { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 17px; letter-spacing: -.015em; margin-bottom: 20px; }
.auth-logo span { font-weight: 400; color: var(--muted); }
.auth-logo .brand-mark { background: linear-gradient(145deg, #34342f, var(--side-bg)); color: var(--side-glow); }
.auth-tabs { display: flex; width: 100%; }
.auth-tabs button { flex: 1; padding: 9px; }
.auth-msg { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.auth-msg.ok { background: var(--ok-soft); color: var(--ok); }
/* Менюто се скрива поединично от Cloud.applyNav() чрез [hidden]; този ред пази старите записи */
body.role-employee .nav a:not([data-emp]), body.role-employee .nav-label { display: none; }
body.role-limited .nav a[hidden], body.role-limited .nav-label[hidden] { display: none !important; }

/* Права на достъп в картона на служителя */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 14px 18px; }
.perm-group > b { display: block; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.perm-group label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
.perm-group label.off { color: var(--muted); }
.member-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.member-perms { font-size: 12px; color: var(--muted); }
.user-box { display: flex; flex-direction: column; margin-bottom: 6px; }
.user-box b { color: var(--side-text); font-weight: 650; }

/* ---------- Stock & tools ---------- */
.qty-cell { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.qty-cell .q { font-weight: 650; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.tool-grid .card + .card { margin-top: 0; }
.tool-card { padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.tool-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tool-card .t { font-weight: 650; font-size: 15px; line-height: 1.25; }
.tool-card .meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.tool-card .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.hist { font-size: 12px; color: var(--muted); max-height: 170px; overflow-y: auto; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; }
.hist div { padding: 2px 0; }

/* ---------- Phone: bottom bar and install hint ---------- */
.bottom-nav { display: none; }
.nav-backdrop { display: none; }
.install-bar { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 60; max-width: 480px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--side-bg); border-top: 1px solid rgba(255, 255, 255, .08); padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a, .bottom-nav button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 10px; border: 0; background: none; font: inherit; font-size: 11px; color: var(--side-muted); text-decoration: none; cursor: pointer; }
  .bottom-nav span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bottom-nav a.active { color: var(--side-glow); }
  .main { padding-bottom: 88px; }
  .toasts { bottom: 76px; }
  .install-bar { bottom: 76px; }
}

/* ---------- Reminders ---------- */
.bell { position: relative; flex: 0 0 34px; width: 34px; height: 34px; margin-left: auto; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--side-text); cursor: pointer; transition: background .14s var(--ease); }
.bell:hover { background: rgba(255, 255, 255, .1); }
.bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell-count { position: absolute; top: 0; right: -1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--pill); background: #d9534f; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--side-bg); }
.bell-count[hidden] { display: none; }
.card .btn.ghost[data-bell] { width: auto; height: auto; }
.bell-panel { position: fixed; z-index: 95; width: min(392px, calc(100vw - 24px)); max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: pop .15s var(--ease); }
.bell-panel .card-head { position: sticky; top: 0; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; z-index: 1; }

/* Обратна връзка: етикет на десния край (компютър) и иконка до камбанката (телефон).
   Етикетът е завъртян на 180°, затова закръглените ъгли се пишат отдясно — след завъртането
   застават отляво, откъм съдържанието. Иконката се връща обратно, за да стои изправена. */
.fb-tab {
  position: fixed; right: 0; top: 50%; z-index: 58;
  display: flex; align-items: center; gap: 8px; padding: 14px 8px;
  border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  box-shadow: var(--shadow); cursor: pointer; transition: background .14s var(--ease);
}
.fb-tab:hover { background: var(--accent-hover); }
.fb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fb-tab svg { width: 16px; height: 16px; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.auth-open .fb-tab { display: none; }
@media (max-width: 900px) { .fb-tab { display: none; } }
.fb-btn + .bell { margin-left: 0; }
.fb-mine { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.fb-mine-row { display: flex; gap: 8px; align-items: center; }
.fb-note { margin: -2px 0 2px; padding-left: 8px; border-left: 2px solid var(--border-strong); }
.fb-item .card-head h2 { font-size: 15px; }
.fb-text { white-space: pre-wrap; margin-bottom: 8px; }
.fb-item.done, .fb-item.rejected { opacity: .8; }
.btn.ghost.fb-del { color: var(--danger); }

/* Абонаменти Къщи: по подразбиране карти (телефон, тясно място, браузър без container queries);
   щом самият списък стане достатъчно широк — редове като таблица. Мери се ширината на списъка,
   не на прозореца, защото менюто отляво взема различно място. */
.hs-tools { margin-bottom: 14px; }
.hs-tools .search { flex: 1 1 240px; max-width: 340px; }
.hs-wrap { container: hs / inline-size; }
.hs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.hs-head { display: none; }
.hs-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 12px; align-content: start;
  padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hs-row > * { grid-column: 1 / -1; min-width: 0; }
.hs-row > .hs-proj { grid-column: 1; }
.hs-row > .hs-dates { grid-column: 2; }
.hs-row.busy { opacity: .55; pointer-events: none; }
.hs-row.blocked .hs-who b { color: var(--muted); }
.hs-who b { font-size: 15px; overflow-wrap: anywhere; }
.hs-contact { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.hs-contact a { overflow-wrap: anywhere; }
.hs-term { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.hs-acts { display: flex; gap: 6px; align-items: center; padding-top: 2px; }
.hs-acts .btn.primary { flex: 1; }
.hs-note { padding-left: 8px; border-left: 2px solid var(--border-strong); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.hs-row .hist { margin-top: 2px; }
@container hs (min-width: 860px) {
  .hs-list { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .hs-head, .hs-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) minmax(0, 1.35fr) 76px minmax(0, 1.15fr) auto; gap: 6px 14px; padding: 11px 16px; }
  .hs-head { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; padding-top: 9px; padding-bottom: 9px; }
  .hs-row { align-items: center; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .hs-row:last-child { border-bottom: 0; }
  .hs-row > *, .hs-row > .hs-proj, .hs-row > .hs-dates { grid-column: auto; }
  .hs-row > .hs-wide { grid-column: 1 / -1; }
  .hs-contact { flex-direction: column; }
  .hs-acts { justify-content: flex-end; padding-top: 0; }
  .hs-acts .btn.primary { flex: none; }
}
@media (max-width: 760px) {
  .hs-tools .search { max-width: none; }
}
.rem-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1.4; }
.rem-item:hover { background: var(--surface-2); text-decoration: none; }
.rem-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--info); }
.rem-item.warn .rem-dot { background: #d99a2b; }
.rem-item.danger .rem-dot { background: var(--danger); }

/* ---------- Jobs & files ---------- */
.late { color: var(--danger); font-weight: 650; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.job-grid .card + .card, .job-layout .card + .card { margin-top: 0; }
.job-card { padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; color: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.job-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.job-card .t { font-weight: 650; font-size: 15px; line-height: 1.25; margin-top: 2px; }
.job-card .progress { margin: 7px 0 2px; }
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .job-layout { grid-template-columns: minmax(0, 1fr); } }
.step { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: background .14s var(--ease); }
.step:last-child { border-bottom: 0; }
.step:hover { background: var(--surface-2); }
.step .box { flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; font-weight: 700; transition: background .15s var(--ease), border-color .15s var(--ease); }
.step.done .box { background: var(--ok); border-color: var(--ok); }
.step.done .lbl { color: var(--muted); }
.step .who { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.parts-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); font: inherit; font-weight: 650; color: var(--text); text-align: left; cursor: pointer; }
.parts-toggle .caret { display: inline-block; transition: transform .15s var(--ease); color: var(--muted); }
.parts-toggle.open .caret { transform: rotate(90deg); }
.comment { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.comment .meta { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
button.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
button.link-btn:hover { text-decoration: underline; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.thumb { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); padding: 0; display: grid; place-items: center; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-align: center; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.thumb:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .ficon { font-weight: 700; font-size: 17px; text-transform: uppercase; color: var(--accent); }
.thumb.add { border-style: dashed; border-color: var(--border-strong); color: var(--accent); font-weight: 550; }
.thumb.add:hover { background: var(--accent-soft); }
.thumb.busy { cursor: default; font-size: 12px; }
.viewer img { display: block; max-width: 100%; max-height: 68vh; margin: 0 auto; border-radius: 6px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat-tiles .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wall-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 96px 96px minmax(0, 2fr) 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.wall-head { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
@media (max-width: 760px) {
  .wall-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .wall-row [data-w="name"] { grid-column: 1 / 3; }
  .wall-row [data-delwall] { grid-column: 3; grid-row: 1; }
  .wall-row [data-w="note"] { grid-column: 1 / -1; }
  .wall-head { display: none; }
}
.sheet .sketch { height: 85mm; margin-top: 5px; border: 1px solid #bbb; border-radius: 4px; }
.sheet .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 5px; }
.sheet .photo-grid figure { margin: 0; break-inside: avoid; }
.sheet .photo-grid img { display: block; width: 100%; height: 55mm; object-fit: cover; border: 1px solid #ccc; border-radius: 3px; }
.sheet .photo-grid figcaption { font-size: 10px; color: #555; }
.sheet .c-title { text-align: center; margin: 14px 0 12px; }
.sheet .c-title h1 { font-size: 20px; }
.sheet .c-sec { font-weight: 700; margin: 12px 0 4px; break-after: avoid; page-break-after: avoid; }
.sheet .c-p { margin: 0 0 6px; text-align: justify; }
.sheet .c-checks { display: grid; gap: 4px; margin: 12px 0 4px; }
.sheet .c-lines div { height: 22px; border-bottom: 1px dotted #777; }
.cp-controls { max-width: 210mm; margin: 0 auto 12px; }
.sheet .cp-block { break-inside: avoid; page-break-inside: avoid; margin-top: 10px; }
.sheet .cp-head { font-size: 12px; margin-bottom: 4px; }
.cp-sheet { display: block; width: 100%; height: auto; }
.cp-board { fill: #dcdcda; stroke: #777; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cp-usable { fill: #d0d0cd; stroke: #999; stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cp-part { fill: #f7f7f5; stroke: #4a4a47; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cp-num { fill: #2b2b29; font-weight: 700; font-family: "Segoe UI", Arial, sans-serif; }
.cp-dim { fill: #555; font-family: "Segoe UI", Arial, sans-serif; }
.sheet .cp-legend { margin-top: 4px; }
.sheet .cp-legend th, .sheet .cp-legend td { padding: 2px 5px; font-size: 11px; }
.sheet .check-col { width: 22px; text-align: center; font-size: 14px; }
.sheet .store-head { margin-top: 16px; padding: 6px 8px; background: #f6f3ef; border: 1px solid #ccc; border-bottom: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet .store-head + table { margin-top: 0; }
.print-bar .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; user-select: none; box-shadow: var(--shadow-sm); }
.print-bar .chk:hover { background: var(--surface-2); }
.sheet .blk-title { margin: 16px 0 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #333; break-after: avoid; page-break-after: avoid; }
.sheet .blk-title + table, .sheet .blk-title + .facts { margin-top: 5px; }
.sheet .spec { font-size: 11px; color: #555; }
.sheet .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); border: 1px solid #bbb; border-radius: 4px; }
.sheet .facts div { padding: 5px 8px; border-left: 1px solid #ddd; }
.sheet .facts div:first-child { border-left: 0; }
.sheet .facts span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #555; }
.sheet .facts b { font-size: 13px; white-space: nowrap; }
.sheet .totals tr.recap td { font-size: 12px; color: #444; }
.sheet .totals tr.sub td { font-weight: 700; border-top: 1px solid #999; }
.sheet .kv.pay { margin-top: 10px; }

/* ---------- Чат ---------- */
.topic-card { padding: 12px 15px; display: flex; flex-direction: column; gap: 4px; color: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.topic-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); text-decoration: none; }
.topic-last { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Картата има височина, а потокът се разтяга в останалото — така полето за писане
   е винаги последното нещо и не може да бъде избутано извън екрана. */
.chat-card { display: flex; flex-direction: column; overflow: hidden; height: min(72dvh, 620px); }
.chat-stream { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; background: var(--surface-2); }
.msg { max-width: 72%; align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 8px 11px; box-shadow: var(--shadow-sm); }
.msg.me { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line); border-radius: 12px 12px 4px 12px; }
.msg-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-img { display: block; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; }
.msg-img img { display: block; max-width: 100%; width: 240px; border-radius: 8px; }
.chat-composer { border-top: 1px solid var(--border); padding: 10px 12px; background: var(--surface); }
.chat-composer textarea { min-height: 40px; max-height: 140px; resize: vertical; }
.chat-attach { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
@media (max-width: 760px) {
  .msg { max-width: 88%; }
  .msg-img img { width: 200px; }
  /* dvh следи ВИДИМАТА височина: отвори ли се клавиатурата, картата се свива заедно
     с екрана и полето за писане остава видимо, вместо да слезе под клавиатурата. */
  .chat-card { height: calc(100dvh - 250px); min-height: 180px; }
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs button { font: inherit; font-weight: 550; padding: 10px 14px; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .14s var(--ease), border-color .14s var(--ease); }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button .badge { margin-left: 4px; }

/* ---------- Print sheet ---------- */
.print-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sheet {
  background: #fff; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 14mm 14mm 16mm;
  box-shadow: var(--shadow-md); color: #111; font-size: 12.5px; line-height: 1.4;
}
.sheet h1 { font-size: 22px; letter-spacing: .02em; }
.sheet .doc-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 12px; border-bottom: 2px solid #111; }
.sheet .logo { max-height: 64px; max-width: 200px; object-fit: contain; display: block; margin-bottom: 6px; }
.sheet .co-name { font-size: 16px; font-weight: 700; }
.sheet .doc-title { text-align: right; }
.sheet .doc-title .orig { display: inline-block; border: 1.5px solid #111; padding: 1px 10px; font-weight: 700; letter-spacing: .1em; font-size: 12px; margin: 4px 0; }
.sheet .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.sheet .party { border: 1px solid #bbb; border-radius: 4px; padding: 8px 10px; }
.sheet .party .ttl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #555; margin-bottom: 3px; }
.sheet .party .nm { font-weight: 700; font-size: 13.5px; }
.sheet table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sheet th { background: #eee; border: 1px solid #bbb; padding: 5px 6px; font-size: 11px; text-align: left; }
.sheet td { border: 1px solid #ccc; padding: 4px 6px; vertical-align: top; }
.sheet td.num, .sheet th.num { text-align: right; }
.sheet .sec-title td { background: #f6f3ef; font-weight: 700; }
.sheet .totals { margin-left: auto; width: 46%; margin-top: 10px; border-collapse: collapse; }
.sheet .totals td { border: 0; border-bottom: 1px solid #ddd; padding: 4px 6px; }
.sheet .totals tr.grand td { font-size: 15px; font-weight: 700; border-top: 2px solid #111; border-bottom: 0; }
.sheet .words { margin-top: 8px; font-style: italic; }
.sheet .terms { margin-top: 14px; white-space: pre-wrap; }
.sheet .signs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.sheet .signs div { border-top: 1px solid #555; padding-top: 4px; font-size: 11.5px; color: #333; }
.sheet .foot-note { margin-top: 18px; font-size: 11px; color: #555; }
.sheet .kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; }
.sheet .kv span:nth-child(odd) { color: #555; }

.sheet + .sheet { margin-top: 24px; }

/* ---------- Client offer page (oferta.html) ---------- */
.share-page { background: var(--bg); }
.share-bar { position: sticky; top: 0; z-index: 20; padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.share-actions, .share-status { max-width: 210mm; margin: 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-status { padding: 9px 13px; border-radius: var(--radius); background: var(--info-soft); color: #1f446f; }
.share-status.ok { background: var(--ok-soft); color: var(--ok); }
.share-form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.share-main { padding: 16px 12px 40px; }
#shareSheet { max-width: 210mm; margin: 0 auto; }
.share-page .sheet { max-width: none; }
.share-msg { max-width: 520px; margin: 40px auto; padding: 26px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ---------- Менюто като лента с икони, разгъва се при посочване ---------- */
/* самото лого е бутонът за свиване — винаги е най-горе и не заема отделно място.
   Само на голям екран: на телефон менюто си е чекмедже. */
button.brand-mark { padding: 0; font: inherit; border: 0; }
@media (min-width: 901px) {
  button.brand-mark { cursor: pointer; transition: box-shadow .15s var(--ease), transform .12s var(--ease); }
  button.brand-mark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 2px rgba(255, 255, 255, .24); }
  button.brand-mark:active { transform: scale(.94); }
  button.brand-mark:focus-visible { outline: 2px solid var(--side-glow); outline-offset: 2px; }
}

@media (min-width: 901px) {
  /* лентата излиза от потока, за да може да се разгъва върху съдържанието, без то да подскача */
  body.rail .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; overflow-x: hidden;
    transition: width .18s var(--ease), box-shadow .18s var(--ease);
  }
  body.rail .main { margin-left: var(--rail-w); }

  /* СВИТОТО е състоянието по подразбиране. Иначе при клик мишката още стои върху
     логото, тоест върху лентата, :hover печели и мърда само дясната част. */
  body.rail .sidebar { width: var(--rail-w); }
  body.rail .sidebar .brand { flex-direction: column; gap: 7px; padding: 14px 8px 12px; }
  body.rail .sidebar .brand > div:nth-child(2) { display: none; }
  body.rail .sidebar .bell { margin-left: 0; }
  body.rail .sidebar .nav a { justify-content: center; padding-left: 0; padding-right: 0; }
  body.rail .sidebar .nav a span { display: none; }
  /* заглавията на групите стават тънка черта, за да се пази разделянето */
  body.rail .sidebar .nav-label {
    height: 1px; padding: 0; margin: 10px 12px; overflow: hidden; font-size: 0;
    background: rgba(255, 255, 255, .13);
  }
  body.rail .sidebar .sidebar-foot { display: none; }

  /* РАЗГЪВАНЕ при посочване. .no-hover се слага при самия клик и пада,
     щом мишката излезе от лентата — така свиването се вижда веднага. */
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) { width: var(--sidebar-w); box-shadow: 0 0 40px rgba(0, 0, 0, .38); }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .brand { flex-direction: row; gap: 10px; padding: 16px 14px 14px; }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .brand > div:nth-child(2) { display: block; }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .bell { margin-left: auto; }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .nav a { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .nav a span { display: inline; }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .nav-label {
    height: auto; padding: 15px 10px 5px; margin: 0; overflow: visible; font-size: 10.5px; background: none;
  }
  body.rail .sidebar:is(:hover, :focus-within):not(.no-hover) .sidebar-foot { display: block; }
}

/* ---------- Айфон: без зумване и без опиране в чертичката ---------- */
@media (max-width: 900px) {
  /* iOS Safari увеличава цялата страница, щом пипнеш поле с шрифт под 16px.
     Точно 16px спира това — иначе всяко въвеждане на размер зумва екрана.
     Списъкът повтаря този отгоре нарочно: там пише `font: inherit`, което е
     по-силно от обикновено `input` и полетата оставаха с 14px (а в етикет — с 12px). */
  input[type=text], input[type=date], input[type=time], input[type=email], input[type=tel],
  input[type=password], input[type=number], input[type=search], input[type=url], input[type=month],
  input[type=datetime-local], input[type=file], input[type=color], input:not([type]),
  select, textarea,
  .tbl.edit input, .tbl.edit select, .mini input, .mini select { font-size: 16px; }
  /* долната лента и изскачащите неща да не лягат върху чертичката на айфона */
  .main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .install-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-bar {
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  .share-main { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* По-малко движение, ако устройството е настроено така */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* No page margins, so the browser has no room for its own header and footer (date, title, link, page number).
   The white margin comes from the padding, repeated on every printed page. */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .sidebar, .mobile-bar, .bottom-nav, .install-bar, .no-print, .toasts { display: none !important; }
  .main { padding: 10mm 12mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .main:has(.sheet) { padding: 0; }
  .sheet { box-shadow: none; width: auto; min-height: 0; padding: 10mm 12mm; margin: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .sheet tr { page-break-inside: avoid; }
  .tbl-wrap { overflow: visible; }
  .share-bar { display: none !important; }
  .share-main { padding: 0; }
  .share-page .sheet { transform: none !important; }
  #shareSheet { height: auto !important; max-width: none; }
  .card { box-shadow: none; }
  .sheet + .sheet { margin-top: 0; break-before: page; }
  /* малките блокове не се цепят между два листа — сумите и подписите остават цели */
  .sheet .totals, .sheet .signs, .sheet .parties, .sheet .words { break-inside: avoid; page-break-inside: avoid; }
}