:root{
  /* Бранд цветове */
  --brand:#3E7CB4;      /* активен фон на бутони/табу */
  --on-brand:#ffffff;   /* текст върху активен фон */
  --card-border:#3E7CB4;   /* цвят на рамките на картите */
  --card-bg:#FFFFFF;       /* фон */

  /* Навигация */
  --nav-text:#3E7CB4;   /* неактивен текст/контур */
  --nav-bg:#ffffff;     /* неактивен фон */
  --nav-hover-bg:#f0f7ff;
  --nav-border:#3E7CB4;

  /* Съвместимост назад (старите правила ползват --c/--c2) */
  --c: var(--brand);
  --c2:#e9f1fb;
    /* === UI design tokens (нови, с префикс --ui-*) === */
  /* Цветове */
  --ui-brand:        #3E7CB4;
  --ui-text:         #3E7CB4;
  --ui-muted:        #5a6573;
  --ui-heading:      var(--ui-brand);

  --ui-card-bg:      #ffffff;
  --ui-card-border:  rgba(62,124,180,.50);
  --ui-shadow:       0 2px 10px rgba(0,0,0,.04);

  --ui-control-border: rgba(0,0,0,.16);
  --ui-focus-halo:      rgba(62,124,180,.16);
  --ui-invalid:         #D93025;

  --ui-info-bg:      rgba(62,124,180,.06);
  --ui-info-border:  rgba(62,124,180,.35);
  --ui-warn-bg:      #fff8e1;
  --ui-warn-border:  #ffe0a3;

  --ui-btn-bg:       var(--ui-brand);
  --ui-btn-text:     #ffffff;
  
  --ui-control-disabled-bg: #f5f7fa;
  --ui-control-disabled-text: rgba(0,0,0,.5);
  
/* Page background */
--ui-page-bg: #f9fafb;
  
  /* Размери / радиуси / отстояния */
  --ui-radius-lg:    12px;
  --ui-radius-md:    10px;
  --ui-ctl-height:   36px;
  --ui-btn-height:   38px;
  --ui-gap-row:      12px;
  --ui-gap-col:      16px;
  --ui-card-pad:     16px 18px;

  /* примери – смени с твоите */
  --pal-black:#000000; --pal-white:#ffffff;
  --pal-red:#e60000;   --pal-orange:#ff9900; --pal-yellow:#ffff00;
  --pal-green:#008a00; --pal-blue:#0066cc;   --pal-purple:#9933ff;

  /* по желание — пълните 32 за тулбар-палитрата */
  --pal-01:#000000; --pal-02:#1e293b; --pal-03:#334155; --pal-04:#475569;
  --pal-05:#0f172a; --pal-06:#6b7280; --pal-07:#94a3b8; --pal-08:#cbd5e1;
  --pal-09:#1e88e5; --pal-10:#2563eb; --pal-11:#0284c7; --pal-12:#06b6d4;
  --pal-13:#22c55e; --pal-14:#84cc16; --pal-15:#eab308; --pal-16:#f59e0b;
  --pal-17:#f97316; --pal-18:#ef4444; --pal-19:#f43f5e; --pal-20:#d946ef;
  --pal-21:#9333ea; --pal-22:#7c3aed; --pal-23:#c084fc; --pal-24:#a3a3a3;
  --pal-25:#737373; --pal-26:#525252; --pal-27:#262626; --pal-28:#ffffff;
  --pal-29:#ffe4e6; --pal-30:#fff7ed; --pal-31:#fef9c3; --pal-32:#3E7CB4;
}
body  { color: var(--ui-text); }
.prose { color: var(--ui-text); }

/* ===== от стария root) ===== */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       background:var(--ui-page-bg); margin:0; color: var(--ui-text); }
.container { max-width: 1180px; margin: 0 auto; padding: 16px; }
/* Page title: унифицирано отстояние за първото H1 на страницата */
.page .container > h1:first-child{
  margin: 0 0 24px;      /* без топ-марджин; 16px отдолу */
  line-height: 1.2;      /* стабилен line-height */
}
/* Page header component (унифицирано заглавие за всички страници) */
.page-header{         /* контейнер за заглавието */
  padding: 0 0 16px;  /* само долен отстъп; горният идва от .container */
  margin: 0;
}
.page-title{          /* самото заглавие */
  margin: 0;
  line-height: 1.2;
}
/* Заглавия – по подразбиране в цвета на Premium */
h1, h2, h3, h4, h5, h6 {
  color: var(--ui-heading);
}

.card { border:1px solid var(--ui-card-border); border-radius:12px; padding:16px; background:var(--ui-card-bg); }
/* UI-бутон, вързан към --ui токени */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--ui-ctl-height);
  padding: 0 12px;
  border:1px solid var(--ui-brand);
  border-radius: var(--ui-radius-md);
  background: var(--ui-btn-bg);
  color: var(--ui-btn-text);
  font-weight:600; line-height:1; text-decoration:none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}
.btn:hover{ filter: brightness(0.98); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ui-focus-halo); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.input { width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px; }

/* ===== Measurements (общи стилове) ===== */

/* Таблица – scoped, за да не пипа други таблици */
.ma-table{ width:100%; border-collapse:collapse; }
.ma-table th, .ma-table td{
  padding:10px; border-bottom:1px solid #eef2f7;
  text-align:right; white-space:nowrap;
}
.ma-table th:first-child, .ma-table td:first-child{ text-align:left; }

/* Стойности по флагове (цветове) */
td.num{ text-align:right; white-space:nowrap; }
td.num.ok   { background:#e8f5e9; color:#065f46; }  /* в норма */
td.num.low  { background:#fff7ed; color:#9a3412; }  /* ниско  */
td.num.high { background:#fee2e2; color:#991b1b; }  /* високо */

/* Профил (хапче) + легенда */
.legend{ display:flex; align-items:center; gap:10px; margin:8px 0 6px; flex-wrap:wrap; }
.pill{ display:inline-block; padding:4px 10px; border-radius:999px;
       background:var(--c2); color:#145ea8; font-weight:600; }
.legend-item{ display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:14px; }
.swatch{ display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid #d1d5db; }
.swatch.ok{   background:#e8f5e9; border-color:#d1fae5; }
.swatch.low{  background:#fff7ed; border-color:#fde68a; }
.swatch.high{ background:#fee2e2; border-color:#fecaca; }

/* === Premium NAV (общ хедър/футър) — UI-tokenized (header only) === */

/* Лента (header) */
.site-header{
  background: var(--ui-page-bg);
  border-bottom: 1px solid var(--ui-card-border);
}
.site-header__inner{
  max-width: 1180px;       /* като .container */
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: var(--ui-gap-col);
  flex-wrap: wrap;
}

/* Бранд (лого + Premium) */
.brand{
  display:inline-flex; align-items:center; gap:8px;
  margin-right:auto; text-decoration:none;
}
.brand img{ height:28px; width:auto; display:block; }
.brand span{ font-weight:700; color: var(--ui-text); }

/* Навигация като „чипове“ */
.nav{ display:flex; align-items:center; gap: var(--ui-gap-col); flex-wrap:wrap; }

/* Еднакъв вид за навигационен линк и за „Изход“ */
.nav-link,
.nav-logout{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--ui-ctl-height);
  padding: 0 12px;
  line-height:1; font-weight:600; text-decoration:none;
  border:1px solid var(--nav-border, var(--ui-card-border));
  border-radius: var(--ui-radius-md);
  background: var(--nav-bg, var(--ui-card-bg));
  color: var(--nav-text, var(--ui-text));
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nav-link:hover,
.nav-logout:hover{
  background: var(--nav-hover-bg, rgba(0,0,0,.03));
}

/* Активният таб (текущата страница) */
.nav-link.active{
  background: var(--ui-brand);
  border-color: var(--ui-brand);
  color: var(--ui-btn-text);
}

/* Фокус (клавиатура) */
.nav-link:focus-visible,
.nav-logout:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ui-focus-halo);
}

.site-footer{ border-top:1px solid #eee; background:#fff; }
.site-footer__inner{ max-width:980px; margin:0 auto; padding:16px; color:#777; font-size:14px; }
/* ===== Modal (global) ===== */
.modal{position:fixed;inset:0;display:none;z-index:9999;}
.modal.open{display:block;}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.25);backdrop-filter:saturate(100%) blur(3px);}
.modal .box{position:relative;max-width:520px;margin:10vh auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.modal .title{font-size:24px;font-weight:700;margin:0 0 10px}
.modal .hint{font-size:12px;color:#6b7280}
.modal .msg{margin-top:8px;font-size:14px}
.modal .msg.ok{color:#166534}.modal .msg.err{color:#b91c1c}

/* =============================================================================
   Tools / Calculators — V5 (унифицирано с Premium)
   - Заглавие H1 в контейнер (както на "Моите аквариуми"/"Измервания")
   - Родител: 2 колони (ляво тесен стек, дясно широк стек)
   - Лявата колона НЕ се разтяга до височината на графиката
   - Чиповете са "пил" бутони в Premium стил
   - Селектът е с големина/радиус като в "Измервания"
   ========================================================================== */

/* Родител – две колони, без връзка по редове между ляво и дясно */
.calc-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 960px) {
  .calc-grid { grid-template-columns: 320px 1fr; }
}

/* Вътрешни колони – вертикални стекове с разстояние 16px */
.calc-col-left,
.calc-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Заглавна лента в картите (както другаде) */
.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: var(--ui-gap-col);
}
/* Normalize heading margins inside card headers (global fix) */
.card .title-row h1,
.card .title-row h2,
.card .title-row h3,
.card .title-row h4,
.ui-card .title-row h1,
.ui-card .title-row h2,
.ui-card .title-row h3,
.ui-card .title-row h4{
  margin: 0;
}

/* Помощни текстове */
.placeholder { opacity: .7; font-style: italic; }
.muted       { opacity: .75; }

/* Чарт контейнер (по-голям на десктоп) */
.chart-box { display: flex; align-items: center; justify-content: center; min-height: 260px; }
@media (min-width: 960px) { .card--chart .chart-box { min-height: 340px; } }

/* ---------------------------------------------------------------------------
   Чипове (бутоните в панела "Калкулатори") — поведение като навигационните
   ------------------------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--stack { flex-direction: column; }
.chips--stack .chip { width: 100%; text-align: left; }

.chip{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--ui-ctl-height);
  padding: 0 12px;
  line-height:1; font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid var(--nav-border, var(--ui-card-border));
  border-radius: var(--ui-radius-md);
  background: var(--nav-bg, var(--ui-card-bg));
  color: var(--nav-text, var(--ui-text));
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip:hover{
  background: var(--nav-hover-bg, rgba(0,0,0,.03));
}
.chip:focus{ outline:none; box-shadow:0 0 0 4px var(--ui-focus-halo); }
.chip.active{
  background: var(--ui-brand);
  border-color: var(--ui-brand);
  color: var(--ui-btn-text);
}
/* Chip tone modifiers used by /api/billing/offers.php */
.chip--info{
  background: var(--ui-info-bg);
  border-color: var(--ui-info-border);
  color: var(--ui-text);
}
.chip--warn{
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-border);
  color: var(--ui-text);
}
/* danger: нямаме токени за bg/border → дефинираме мек тон, текстът е в цвета на invalid */
.chip--danger{
  background: #FDECEA;       /* soft red bg */
  border-color: var(--ui-invalid);
  color: var(--ui-invalid);
}
/* ---------------------------------------------------------------------------
   Компактен „Избор на аквариум“ + унифициран селект (както в "Измервания")
   ------------------------------------------------------------------------ */
#ma-calc-aquarium-selector .title-row { margin-bottom: 8px; }
#ma-calc-aquarium-selector label      { display: block; margin-bottom: 6px; }

/* селектът да изглежда като големия от "Измервания" */
.form-select {
  width: 80%;
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid var(--nav-border, #3E7CB4);
  border-radius: 12px;
  background: #fff;
  line-height: 1.25;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-select:focus {
  outline: none;
  border-color: var(--brand, #2f74ff);
  box-shadow: 0 0 0 3px rgba(47,116,255,.20);
}

/* Край на блока Tools / Calculators — V5 */
/* ============================================================================= */
/* --- Chart layout: fixed gutter + scrollable plot (final) --- */

/* контейнерът на графиката да не раздува страницата */
#ma-calc-chart-container { overflow-x: hidden; min-width: 0; }

/* ако „История“ колоната е flex/grid item – позволи shrink */
.calc-col-right,
.card--chart,
.chart-box { min-width: 0; }

/* двуслоен layout */
.ma-chart {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;              /* пазим родителя */
}

.ma-chart-gutter {
  flex: 0 0 80px;                /* същото число имаме и в chart.js (GUTTER_W) */
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.08);
}

/* КЛЮЧОВО: позволяваме shrink въпреки широкото SVG вътре */
.ma-chart-viewport {
  flex: 1;
  min-width: 0;                  /* иначе широкото съдържание „раздува“ страницата */
  overflow-x: auto;              /* локален хоризонтален скрол */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

/* за всеки случай: svg вътре да е блоков елемент */
.ma-chart svg { display: block; }

.ma-chart-scroller { min-height: 1px; }

/* ===== PREMIUM UI BASE (safe namespace: .ui-*) 7-10-2025 единен стил за страници ===== */

/* Карта / контейнер */
.ui-card{
  background: var(--ui-card-bg);
  border:1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  padding: var(--ui-card-pad);
  margin-bottom:18px;
}

/* Ред / подредба */
.ui-row{
  display:flex;
  flex-wrap:wrap;
  gap: var(--ui-gap-row) var(--ui-gap-col);
  align-items:flex-end;
  margin-bottom: var(--ui-gap-row);
}

.ui-row:last-child{ margin-bottom:0; }

/* Поле (label + control) */
.ui-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:80px; /* не се „смачква“ твърде */
}
.ui-field > label{
  font-size:13px;
  line-height:1.2;
  color: var(--ui-text);
  white-space:nowrap;
}

/* Контрол (input/select/textarea) – 36px, радиус, син фокус, пазим червеното при невалидно */
.ui-control{
  width:100%;
  height: var(--ui-ctl-height);
  padding:8px 12px;
  font-size:13px;
  line-height:1.2;
  background:#fff;
  border:1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-md);
  outline:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
  -webkit-appearance:none; appearance:none;
}
.ui-control:hover{ border-color:#b9c3d0; }
.ui-control:focus{
  border-color: var(--ui-brand);
  box-shadow: 0 0 0 4px var(--ui-focus-halo);
}

/* Невалидно (идва от JS/валидатор) – да „надделее“ и върху фокуса */
.ui-control.invalid,
.ui-control[aria-invalid="true"],
.ui-field .ui-control.error{
  border-color: var(--ui-invalid) !important;
  box-shadow: 0 0 0 4px rgba(217,48,37,.18) !important;
}
.ui-control.invalid:focus,
.ui-control[aria-invalid="true"]:focus,
.ui-field .ui-control.error:focus{
  border-color:#D93025 !important;
  box-shadow: 0 0 0 4px rgba(217,48,37,.22) !important;
}

/* Number стрелки (WebKit) */
.ui-control[type="number"]::-webkit-outer-spin-button,
.ui-control[type="number"]::-webkit-inner-spin-button { height:auto; }

/* Текстове за помощ/подсказки */
.ui-hint{ font-size:12px; color: var(--ui-muted); }

/* Син информативен панел (като preview в калкулатора) */
.ui-info{
  background: var(--ui-info-bg);
  border:1px dashed var(--ui-info-border);
  border-radius: var(--ui-radius-md);
  padding:10px 12px;
  font-size:13px;
  color:#1e3a56;
}

/* Жълто предупреждение (ненатрапчиво) */
.ui-warn{
  background: var(--ui-warn-bg);
  border:1px solid var(--ui-warn-border);
  border-radius: var(--ui-radius-md);
  padding:10px 12px;
  font-size:13px;
  color:#7a5a00;
}
/* ❖ Broadcast tones on cards */
.ui-card.ui-info{
  background: var(--ui-info-bg);
  border-color: var(--ui-info-border);
}
.ui-card.ui-warn{
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-border);
}
.ui-card.ui-success{
  background: #e8f5e9;   /* меко зелено */
  border-color: #a7f3d0;
  color: #065f46;
}
.ui-card.ui-promo{
  background: #f5f3ff;   /* меко лилаво */
  border-color: #c4b5fd;
  color: #5b21b6;
}
/* В тон-карти заглавията да не остават в brand синьо */
.ui-card.ui-info  .title-row h1,
.ui-card.ui-info  .title-row h2,
.ui-card.ui-info  .title-row h3,
.ui-card.ui-info  .title-row h4,
.ui-card.ui-warn  .title-row h1,
.ui-card.ui-warn  .title-row h2,
.ui-card.ui-warn  .title-row h3,
.ui-card.ui-warn  .title-row h4,
.ui-card.ui-success .title-row h1,
.ui-card.ui-success .title-row h2,
.ui-card.ui-success .title-row h3,
.ui-card.ui-success .title-row h4,
.ui-card.ui-promo .title-row h1,
.ui-card.ui-promo .title-row h2,
.ui-card.ui-promo .title-row h3,
.ui-card.ui-promo .title-row h4{
  color: inherit;
}


/* Бутони (основен/ghost) */
.ui-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--ui-btn-height);
  padding:0 14px;
  border-radius: var(--ui-radius-md);
  font-weight:600; font-size:14px; line-height:1;
  border:1px solid transparent; cursor:pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ui-btn--primary{
  background: var(--ui-btn-bg);
  border-color: var(--ui-btn-bg);
  color: var(--ui-btn-text);
}
.ui-btn--primary:hover{ filter: brightness(0.96); }
.ui-btn--primary:active{ filter: brightness(0.92); }

/* Вторичен (ghost) бутон — универсален за всички страници */
.ui-btn--ghost{
  background: #eef2f7;
  color: var(--ui-text);
  border-color: transparent;
}
.ui-btn--ghost:hover{ filter: brightness(0.98); }
.ui-btn--ghost:active{ filter: brightness(0.95); }


/* ==========================================
   PREMIUM UI — Универсални навигационни карти
   Използват се в списъци и модални прозорци
   ========================================== */

/* Основна карта */

.ui-nav-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;

  padding: 10px 12px;

  background: var(--ui-card-bg);
  border: 1px solid var(--ui-info-border);
  border-radius: var(--ui-radius-md);

  color: var(--ui-brand);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;

  cursor: pointer;
  overflow-wrap: anywhere;

  transition:
    background-color .15s,
    border-color .15s,
    color .15s;
}

/* Посочване с мишката */

.ui-nav-card:hover:not(.is-active):not(.is-archived) {
  border-color: var(--ui-brand);
}

/* Активна карта */

.ui-nav-card.is-active {
  background: var(--ui-brand);
  border-color: var(--ui-brand);
  color: var(--ui-btn-text);
}

/* Архивирана карта */

.ui-nav-card.is-archived:not(.is-active) {
  background: var(--ui-control-disabled-bg);
  border-color: var(--ui-info-border);
  color: var(--ui-muted);
}

/* Клавиатурна навигация */

.ui-nav-card:focus-visible {
  outline: 2px solid var(--ui-brand);
  outline-offset: 2px;
}

/* Центрирано съдържание */

.ui-nav-card--center {
  align-items: center;
  text-align: center;
}

/* Основно заглавие */

.ui-nav-card__title {
  display: block;
  max-width: 100%;

  font-size: inherit;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Вторичен ред — например обем на аквариума */

.ui-nav-card__meta {
  display: block;
  max-width: 100%;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  opacity: .8;
}

/* Неактивен контрол */

.ui-nav-card:disabled {
  opacity: .6;
  cursor: not-allowed;
}


/* Layout „копчета“ за ширина – даваме ги на .ui-field (обвивката), не на самия input */


/* Layout „копчета“ за ширина – даваме ги на .ui-field (обвивката), не на самия input */
.w-80{  width:80px;  flex:0 0 80px; }
.w-120{ width:120px; flex:0 0 120px; }
.w-160{ width:160px; flex:0 0 160px; }
.w-200{ width:200px; flex:0 0 200px; }
.w-240{ width:240px; flex:0 0 240px; }
.w-320{ width:320px; flex:0 0 320px; }
.grow{ flex:1 1 240px; min-width:160px; } /* запълва свободното */
.shrink-0{ flex-shrink:0; }

/* Фиксирани ширини за полетата в "Моите аквариуми" */
.w-350 { width: 350px; }
.w-100 { width: 100px; }

/* ===== Premium UI: таблица в Измервания ===== */
.ui-card .ma-table th,
.ui-card .ma-table td{
  /* по-деликатна типография в таблиците */
  font-size: 13px;
  line-height: 1.35;
}

.ui-card .ma-table th{
  font-weight: 700;
  font-size: 14px;         /* лек акцент за заглавията */
}

/* по-компактни бутони в колоната „Действие“ */
.ui-card .ma-table .btn.ui-btn{
  height: 30px;            /* беше ~38px */
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--ui-radius-md);
}

/* леко „сив“ вторичен бутон да не крещи */
.ui-card .ma-table .btn.gray.ui-btn{
  background: #eef2f7;
  color: var(--ui-text);
  border-color: transparent;
}

/* приятен hover за двата бутона */
.ui-card .ma-table .btn.ui-btn:hover{
  filter: brightness(0.98);
}
/* Разстояние между бутоните в клетката „Действие“ */
.ui-card .ma-table td .ui-btn + .ui-btn{ margin-left:8px; }

/* ===== Premium UI — Autocomplete Popover (универсален) ===== */
.ui-ac {
  position: absolute;
  z-index: 10000;
  inset: auto auto auto 0;           /* ще позиционираме с JS */
  min-width: 100%;
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow);
  padding: 6px;
  display: none;                     /* скрит по подразбиране */
}
.ui-ac.is-open { display: block; }

.ui-ac__list {
  max-height: 240px;                 /* скрол вътре, не в страницата */
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-ac__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ui-ac__opt:hover,
.ui-ac__opt[aria-selected="true"] {
  background: var(--nav-hover-bg, rgba(0,0,0,.03));
}
.ui-ac__opt.is-active {              /* активен с ↑/↓ */
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-focus-halo) inset;
}
.ui-ac__opt.is-muted { opacity: .7; font-style: italic; cursor: default; }

.ui-ac__empty {                      /* „Няма резултати“ / „Пиши още…“ */
  padding: 8px 10px;
  color: var(--ui-muted);
  font-style: italic;
}

/* Контейнер за позициониране – върху обвивката на полето */
.ui-ac-anchor {
  position: relative;                /* input-ът остава normal flow */
}

/* Lists reset for Premium components */
.ui-list{ list-style:none; margin:0; padding:0; }

/* === Premium: универсални медиа контейнери за корици === */
.media{
  aspect-ratio: var(--ratio, 4/3);
  background:#f3f4f6;
  border-radius: var(--ui-radius-lg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media > img{
  width:100%;
  height:100%;
  object-fit:contain;   /* няма изрязване */
  display:block;
}

/* 4:3 е по подразбиране – без доп. класове и без custom properties */
.ui-btn,
a.ui-btn{ text-decoration:none; }

.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Quill bridge: наследи Premium текста вътре в редактираното съдържание */
.ql-editor { color: var(--ui-text); }

/* === Catalog page (scoped) ============================================== */
.page-catalog .catalog-wrap {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .page-catalog .catalog-wrap {
    grid-template-columns: 280px 1fr;
  }
}

/* GRID с карти */
.page-catalog .cards-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .page-catalog .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .page-catalog .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .page-catalog .cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* КАРТА на организъм */
.page-catalog .org-card {
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  padding: 12px;
}
.page-catalog .org-card .media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ui-surface-2);
}
.page-catalog .org-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-catalog .org-card h4 {
  margin: 8px 0 2px;
  font-size: 15px;
  color: var(--ui-heading);
}
.page-catalog .org-card .sub {
  font-size: 13px;
  color: var(--ui-text);
  opacity: .9;
}
.page-catalog .org-card .chips {
  margin-top: 6px;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
}
/* долният ред на картите – без сив текст */
.page-catalog .org-card .foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ui-text);
  opacity: .85;
}
.page-catalog .org-card .foot .ui-hint {
  color: var(--ui-text);
  opacity: .85;
}

/* Лява колона / заглавия */
.page-catalog .filters .chips { gap: 8px; }
.page-catalog .filters .ui-row .ui-field { margin-bottom: 8px; }
.page-catalog .filters .section-title {
  font-weight: 600;
  margin: 12px 0 6px;
  color: var(--ui-heading);
}

/* Топ бар над грид-а */
.page-catalog .topbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.page-catalog .topbar .grow { flex: 1; }

/* леко приглушен, но не сив текст само на тази страница */
.page-catalog .muted,
.page-catalog #count {
  color: var(--ui-text);
  opacity: .75;
}