/* AHI OS — база: reset, типография, форми, бутони, таблици.
 * Компонентният слой от Modernist, пренесен от concept/ahi-concept/styles.css.
 * Никакви сурови стойности — всичко идва от tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: var(--tracking-neg-0-015);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--length-17); }
h4 { font-size: var(--length-16); }
h6 { font-size: var(--text-sm); letter-spacing: var(--tracking-0-08); text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: var(--length-3); }
a:hover { color: var(--color-accent); }
img { display: block; max-width: var(--percent-100); }

:focus { outline: none; }
:focus-visible { outline: var(--length-2) solid var(--color-accent); outline-offset: var(--length-2); }
::selection { background: color-mix(in srgb, var(--color-accent) var(--percent-30), transparent); }

*::-webkit-scrollbar { width: var(--length-10); height: var(--length-10); }
*::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }

/* ── Помощни ── */

.muted { color: var(--color-muted-fg); }
.text-alert { color: var(--color-accent); }
.numeric { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Малък главен етикет — носещият типографски похват в цялата система. */
.label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

.hr {
  height: var(--rule-strong);
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

.visually-hidden {
  position: absolute; width: var(--length-1); height: var(--length-1); overflow: hidden;
  clip-path: inset(var(--percent-50)); white-space: nowrap;
}

/* ── Бутони ── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--length-6);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--length-14);
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: var(--length-1) solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) var(--percent-7), transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) var(--percent-14), transparent); }

.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) var(--percent-10), transparent); }

/* Опасно на вид действие — архивиране, анулиране. Носи потвърждение. */
.btn-danger { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-danger:hover { background: var(--color-accent-100); }

.btn-lg { padding: var(--length-11) var(--length-16); }
.btn-block { width: var(--percent-100); justify-content: flex-start; }

/* ── Форми ── */

.field { margin-bottom: var(--space-4); }
.field > label {
  display: block;
  font-size: var(--length-12);
  margin-bottom: var(--length-5);
  color: color-mix(in srgb, var(--color-text) var(--percent-70), transparent);
}
.field-required > label::after { content: " *"; color: var(--color-accent); }

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: var(--percent-100);
  min-height: var(--length-36);
  padding: var(--length-6) var(--length-10);
  font: inherit;
  font-size: var(--length-14);
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: var(--length-1) solid var(--color-divider);
  border-radius: var(--radius-md);
}
.input:hover, input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--color-text) var(--percent-45), transparent);
}
.input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}
textarea { min-height: var(--length-90); resize: vertical; }

.field-error { color: var(--color-accent-700); font-size: var(--length-12); margin-top: var(--length-4); }
.field-help { color: var(--color-muted-fg); font-size: var(--length-12); margin-top: var(--length-4); }
.input-invalid { border-color: var(--color-accent) !important; }

/* Сегментен контрол — филтри и периоди. */
.seg {
  display: inline-flex;
  gap: var(--length-2);
  background: var(--color-divider);
  border: var(--rule-strong) solid var(--color-divider);
}
.seg-opt {
  border: 0;
  cursor: pointer;
  padding: var(--length-10) var(--length-15);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--length-12);
  letter-spacing: var(--tracking-0-08);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  background: var(--color-bg);
  color: var(--color-text);
}
.seg-opt:hover { background: var(--color-neutral-200); color: var(--color-text); }

/* Броячът до етикета: казва къде има работа, преди да се кликне. */
.seg-count { font-weight: 400; opacity: 0.6; }
.seg-opt[aria-current="true"] .seg-count { opacity: 0.85; }
.seg-opt[aria-pressed="true"], .seg-opt[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ── Етикети за статус ── */

.pill {
  display: inline-block;
  padding: var(--length-4) var(--length-9);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-0-08);
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-accent { background: var(--color-accent); color: var(--color-bg); }
.pill-tint { background: var(--color-accent-100); color: var(--color-accent-700); }
.pill-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.pill-outline { border: var(--length-1) solid var(--color-divider); color: var(--color-muted-fg); }

/* ── Таблици ── */

.table-wrap { overflow-x: auto; border: var(--rule-strong) solid var(--color-divider); }
.table { width: var(--percent-100); border-collapse: collapse; font-size: var(--length-14); }
.table th {
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-0-08);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) var(--percent-60), transparent);
  padding: var(--space-2);
  border-bottom: var(--rule-strong) solid var(--color-divider);
  white-space: nowrap;
}
.table td { padding: var(--space-2); border-bottom: var(--rule-hair) solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) var(--percent-4), transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table .col-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.table .col-right { text-align: right; }
/* Сборът под таблицата се чете като резултат, не като още едно заглавие. */
.table tfoot th {
  color: var(--color-text);
  border-top: var(--rule-strong) solid var(--color-divider);
  border-bottom: 0;
}
.table tfoot .numeric { font-size: var(--length-14); letter-spacing: 0; text-transform: none; }

/* Дълъг текст в тясна клетка. Без таван `truncate` няма какво да отреже —
 * клетката просто расте и избутва останалите колони извън екрана.
 */
.table .cell-clip { max-width: var(--length-200); }
.table .cell-clip-sm { max-width: var(--length-130); }

/* Втори ред в клетка — носи придружаващия идентификатор, не заглавие. */
.table .cell-sub { font-family: var(--font-body); font-weight: 400; font-size: var(--length-12); }
.table .cell-sub a { color: var(--color-muted-fg); }

/* ── Съобщения ── */

.alert {
  padding: var(--space-3) var(--space-4);
  border-left: var(--rule-strong) solid var(--color-divider);
  background: var(--color-surface);
  font-size: var(--length-14);
  margin-bottom: var(--space-3);
}
.alert-error, .alert-danger { border-left-color: var(--color-accent); background: var(--color-accent-100); }
.alert-warning { border-left-color: var(--color-accent-600); background: var(--color-accent-100); }
.alert-success { border-left-color: var(--color-neutral-700); }

/* ── Диалог ── */

.dialog-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) var(--percent-50), transparent);
}
.dialog {
  width: min(var(--length-440), var(--percent-100));
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-lg); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Alpine скрива тези, докато се инициализира — иначе диалозите мигат. */
[x-cloak] { display: none !important; }

/* Отметка с етикет отдясно — диалозите и филтрите я ползват. */
.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--length-14); }
.check input { width: auto; min-height: 0; }

/* Две полета в ред. Под 760px се изправят. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }


/* ── Избор с карти ──
 * Радио бутон, облечен като карта. Самият input стои скрит, а избраното
 * състояние се чете от :has(:checked) — без JS и без дублирано състояние.
 */

.choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-divider);
}
.choice:hover { border-color: var(--color-text); }
.choice:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.choice:has(input:focus-visible) { outline: var(--length-2) solid var(--color-accent); outline-offset: var(--length-2); }

.choice-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--length-17); }
.choice-note { font-size: var(--text-sm); color: var(--color-muted-fg); }
.choice-price {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--text-lg);
  margin-top: var(--space-2);
}
.choice-foot { font-size: var(--text-xs); letter-spacing: var(--tracking-0-04); color: var(--color-muted-fg); }

.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }



.choice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.choice-row { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.choice-row .choice-title { font-size: var(--length-15); flex: 1; }