/* AHI OS — design tokens.
 *
 * Изведени 1:1 от дизайн системата Modernist в concept/ahi-concept/styles.css.
 * Това е единственият файл, в който стоят сурови стойности. Всеки друг стил
 * чете само var(--...). Промяна на визуалния език става тук.
 *
 * Характерът на системата: плоска, архитектурна, без радиуси, силни 2px линии,
 * един акцент (червено), всичко подравнено вляво.
 */

:root {
  /* ── Основа ── */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* ── Неутрална стълбица ── */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* ── Акцентна стълбица ── */
  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  /* ── Семантични роли ──
   * Дизайн системата е монохромна с един акцент. Статусите в office
   * интерфейса се различават по тон и тежест, не по нова палитра.
   */
  --color-danger: var(--color-accent);
  --color-danger-fg: var(--color-accent-800);
  --color-danger-bg: var(--color-accent-100);
  --color-warning-fg: var(--color-accent-700);
  --color-warning-bg: var(--color-accent-200);
  --color-ok-fg: var(--color-neutral-900);
  --color-ok-bg: var(--color-neutral-200);
  --color-muted-fg: var(--color-neutral-700);

  /* ── Типография ── */
  --font-heading: "Archivo", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 32px;
  --text-3xl: 40px;

  --tracking-label: 0.12em;  /* главни букви на етикети */
  --tracking-tight: -0.02em; /* заглавия */

  /* ── Ритъм ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── Ръбове ── */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --rule-strong: 2px;  /* разделител между секции */
  --rule-hair: 1px;    /* разделител между редове */

  /* ── Елевация ── */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* ── Оформление на office шела ── */
  --sidebar-width: 240px;
  --topbar-height: 72px;
  --content-pad-x: 30px;
  --content-pad-x-mobile: 18px;
  --tap-min: 44px;

  /* ── Точки на пречупване — условията за ширина са само тук ── */
  --bp-tablet: 1280px;
  --bp-mobile: 760px;

  /* Фиксирани размери, използвани от компонентите и помощните класове. */
  --duration-0-18: 0.18s;
  --length-1: var(--rule-hair);
  --length-10: 10px;
  --length-11: 11px;
  --length-12: var(--space-3);
  --length-13: 13px;
  --length-130: 130px;
  --length-14: 14px;
  --length-15: 15px;
  --length-16: var(--space-4);
  --length-17: 17px;
  --length-18: 18px;
  --length-180: 180px;
  --length-2: var(--rule-strong);
  --length-20: var(--space-5);
  --length-200: 200px;
  --length-220: 220px;
  --length-22: 22px;
  --length-24: var(--space-6);
  --length-26: 26px;
  --length-3: 3px;
  --length-30: var(--content-pad-x);
  --length-34: 34px;
  --length-36: 36px;
  --length-360: 360px;
  --length-4: var(--space-1);
  --length-40: 40px;
  --length-44: var(--tap-min);
  --length-440: 440px;
  --length-480: 480px;
  --length-5: 5px;
  --length-520: 520px;
  --length-560: 560px;
  --length-6: 6px;
  --length-620: 620px;
  --length-640: 640px;
  --length-68: 68px;
  --length-680: 680px;
  --length-7: 7px;
  --length-720: 720px;
  --length-8: var(--space-2);
  --length-9: 9px;
  --length-90: 90px;
  --length-92: 92px;
  --length-96: 96px;
  --percent-10: 10%;
  --percent-100: 100%;
  --percent-14: 14%;
  --percent-20: 20%;
  --percent-30: 30%;
  --percent-34: 34%;
  --percent-4: 4%;
  --percent-45: 45%;
  --percent-50: 50%;
  --percent-6: 6%;
  --percent-60: 60%;
  --percent-7: 7%;
  --percent-70: 70%;
  --percent-neg-100: -100%;
  --tracking-0-04: 0.04em;
  --tracking-0-06: 0.06em;
  --tracking-0-08: 0.08em;
  --tracking-0-14: 0.14em;
  --tracking-neg-0-015: -0.015em;
  --tracking-neg-0-02: var(--tracking-tight);
  --tracking-neg-0-03: -0.03em;
  --viewport-100vh: 100vh;
  --viewport-84vw: 84vw;
}

/* Responsive правила: този файл се зарежда след компонентните стилове.
 * CSS custom properties не работят в условията на @media, затова самите
 * условия стоят тук, до числата на дизайн системата. */

@media (max-width: 760px) { .field-pair { grid-template-columns: 1fr; gap: 0; } }

@media (max-width: 1280px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr; } }

@media (max-width: 1280px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--sidebar-width), var(--viewport-84vw));
    z-index: 60;
    transform: translateX(var(--percent-neg-100));
    transition: transform var(--duration-0-18) ease-out;
  }
  .sidebar[data-open="true"] { transform: translateX(0); }
  .mobile-nav-toggle { display: inline-flex; min-height: var(--length-44); }
  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--length-40);
    min-height: var(--length-40);
    padding: 0;
    font-size: var(--length-16);
    flex: none;
  }
  /* Дупето между затъмнения фон и шела — вижда се от заглавието до менюто. */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-neutral-900) var(--percent-50), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-0-18) ease-out;
  }
  .sidebar-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
  /* Реда за тап е поне 44px, дори при плътния ритъм на десктоп версията. */
  .nav-item { padding: var(--length-13) var(--length-22); min-height: var(--length-44); }
  .grid-kpi, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-main { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .grid-kpi, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Сегментният превключвач не се пречупва — на тесен екран се плъзга,
   * вместо да разширява цялата страница. */
  .section-head .seg { max-width: var(--percent-100); overflow-x: auto; }

  /* Филтрите се плъзгат вместо да излизат извън екрана. */
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); }
  .filters .seg { flex: none; }
  .filters .field { min-width: var(--length-180); }
  .section-body, .topbar-inner { padding-left: var(--content-pad-x-mobile); padding-right: var(--content-pad-x-mobile); }
  .topbar-inner { flex-wrap: wrap; }
  .topbar-title { margin-right: 0; width: var(--percent-100); }

  /* Горната лента е компактна: Меню + заглавие на един ред, под тях
   * действията на екрана в една редица. "Към сайта" е в менюто. Главното
   * действие е последно — най-близо до палеца. */
  .topbar-inner { gap: var(--space-2) var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .topbar-title { width: auto; flex: 1; min-width: 0; margin-right: 0; }
  .topbar h1 { font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-toggle { padding-inline: var(--space-3); }
  .hide-mobile { display: none !important; }
  .nav-item-external { display: flex; }
  .topbar-tools { width: var(--percent-100); }
  .topbar-tools .seg { width: var(--percent-100); }
  .topbar-tools .seg-opt { flex: 1; text-align: center; min-height: var(--tap-min); }
  .topbar-actions {
    width: var(--percent-100);
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
  }
  .topbar-actions:empty { display: none; }
  .topbar-actions form { flex: 1 1 0; display: flex; }
  .topbar-actions .btn { flex: 1 1 0; min-width: max-content; justify-content: center; min-height: var(--tap-min); padding-inline: var(--space-3); }
  .topbar-actions form .btn { width: var(--percent-100); }

  /* Всички бутони са пълноценна тап-цел. */
  .btn, .seg-opt { min-height: var(--tap-min); justify-content: center; }
  .btn-ghost { padding-inline: var(--space-3); }
  .btn-block { justify-content: center; }

  /* Действия под формата: главното на цяла ширина, второстепенните под него. */
  .form-actions .btn-primary { flex: 1 1 var(--percent-100); }
  .form-actions .btn { flex: 1 1 0; }

  /* Действия в редове на таблица и списък — пренасят се, вместо да излизат
   * извън екрана. */
  .table td.col-right.nowrap { white-space: normal; }
  .table td.col-right form { display: inline-block; margin: var(--length-2) 0; }
  .stack-row { flex-wrap: wrap; }
  .picked-actions { white-space: normal; flex-wrap: wrap; }
  .week-nav { width: var(--percent-100); }
  .week-nav .btn { flex: 1; }
  .filters .btn { flex: none; }

  .login-page { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .kpi-value { font-size: var(--text-xl); }
}

@media (max-width: 760px) { .intake-period { grid-template-columns: 1fr; gap: 0; } }

@media (max-width: 1280px) {
  .intake-summary-inner { position: static; }
}

@media (max-width: 1280px) {
  /* Седем дни не се четат в тясна колона — седмицата сяда на два реда.
   * Неделя поема остатъка: седем клетки в решетка от четири или две оставят
   * дупка, а тя се вижда като плътно поле от цвета на разделителя. */
  .grid-week { grid-template-columns: repeat(4, 1fr); }
  .grid-week > :last-child { grid-column: span 2; }
}

@media (max-width: 760px) {
  .grid-week { grid-template-columns: repeat(2, 1fr); }

  /* Лентата е илюстрация на дела, числата са данните — на тесен екран
   * отстъпва тя, не те. */
  .share-name { width: auto; flex: 1; }
  .share-track { display: none; }
}