/* =========================
   GURNAL.CSS — фон берём из header.css
   ========================= */

/* Базовые полезности */
*, *::before, *::after { box-sizing: border-box; }
.page-content { padding: 12px; max-width: 1400px; margin: 0 auto; }
.header-row h1 { margin: 6px 0 12px; font-size: 22px; font-weight: 700; color: inherit; }

/* Глобальные CSS-переменные (JS обновит при старте) */
:root{
  --header-h: 56px;      /* высота фикс-хедера */
  --bottom-gap: 0px;     /* высота нижней фикс-панели, если есть */
  --tc-pad: 12px;        /* внутренний паддинг .table-container */
  --tbl-mt: 6px;         /* margin-top у <table> внутри контейнера */
  --sticky-gap: 12px;     /* зазор для шапки таблицы */
}

/* =========================
   Зведені підсумки (метрики)
   ========================= */
.meta-counters{
  display:grid; gap:10px; padding:10px; margin:10px 0 14px;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border:1px solid rgba(0,0,0,.08); border-radius:8px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.meta-counters .stat{
  text-align:center; background: rgba(255,255,255,.5);
  border:1px solid rgba(0,0,0,.06); border-radius:6px; padding:8px 10px; min-width:0;
}
@media (max-width: 980px){ .meta-counters{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .meta-counters{ grid-template-columns: 1fr 1fr; } }

body.dark .meta-counters{
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.12);
}
body.dark .meta-counters .stat{
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.08);
}

/* === Mobile-фикс для метрик === */
@media (max-width: 980px){
  .meta-counters .stat{ display:flex; flex-direction:column; align-items:center; gap:4px; line-height:1.25; }
  .meta-counters .stat strong{ display:block; margin:0; }
}
@media (max-width: 480px){ .meta-counters .stat{ gap:2px; } }

/* =========================
   Форма фильтров (#filters)
   ========================= */

/* База: 2 колонки — подходит для 1–2 полей */
#filters{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:10px;
  position: relative;            /* нужно для обычных выпадашек на страницах */
  z-index: 1000;                 /* и чтобы dropdown был над соседями */
}
#filters .cell{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#filters label{ font-size: 13px; color: inherit; }

/* Поля ввода */
#filters input[type="date"],
#filters input[type="text"],
#filters input[type="password"],
#filters select{
  width:100%; min-width:0;
  padding:8px 10px; font-size:14px; line-height:1.3;
  border:1px solid rgba(0,0,0,.25); border-radius:6px; background: rgba(255,255,255,.9);
  color: inherit;
}
/* number — как обычные поля + без стрелок */
#filters input[type="number"]{
  width:100%; min-width:0;
  padding:8px 10px; font-size:14px; line-height:1.3;
  border:1px solid rgba(0,0,0,.25); border-radius:6px; background: rgba(255,255,255,.9);
  color: inherit; box-sizing:border-box;
}
#filters input[type="number"]::-webkit-outer-spin-button,
#filters input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#filters input[type="number"]{ -moz-appearance:textfield; }

/* Select с кастомной стрелкой */
#filters select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
}

/* Блок действий в форме */
#filters .filters-actions{
  grid-column: 1 / -1;
  display:flex; gap:8px; margin:0;
}
#filters .filters-actions.actions-2{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
#filters .filters-actions button{ height:38px; border-radius:6px; border:none; cursor:pointer; font-weight:600; }

/* === Десктоп: центрируем формы с двумя полями (filters-2) === */
@media (min-width: 980px){
  #filters.filters-2{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    justify-content: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === Десктоп: 2 поля — прижать вправо (модификатор) === */
@media (min-width: 980px){
  #filters.filters-2.filters-right{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    max-width: 820px;
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
  }
}

/* Прижать блок фильтра (2 поля) влево на десктопе */
@media (min-width: 980px){
  #filters.filters-2.filters-left{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    justify-content: start;
    max-width: 820px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* Десктоп: 2 поля + блок кнопок как полноценная третья ячейка */
@media (min-width: 980px){
  #filters.filters-2.actions-right{
    grid-template-columns: 1fr 1fr max-content; /* третья колонка по ширине контента */
    align-items: end;
    justify-content: start;
    max-width: 1000px;
    margin-left: 0;
    margin-right: auto;
    column-gap: 8px;
  }

  /* Блок кнопок выглядит как обычная ячейка формы */
  #filters.filters-2.actions-right .filters-actions{
    grid-column: 3;               /* правая колонка */
    grid-row: 1;                  /* рядом с полями, не под ними */
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    align-items: end;             /* прижать по нижней линии полей */
    justify-items: end;
    margin: 0;                    /* без внешних отступов */
    padding: 0;                   /* без внутренних */
  }

  /* Кнопки визуально как поля: такая же высота, без растягивания на всю ширину */
  #filters.filters-2.actions-right .filters-actions a.cancel-button,
  #filters.filters-2.actions-right .filters-actions button{
    width: auto;
    min-width: 140px;             /* аккуратная фикс. ширина, можно 120–160 */
    height: 38px;                 /* как у инпутов */
    line-height: 38px;
    padding: 0 16px;              /* как у обычных кнопок в формах */
    border-radius: 6px;
  }
}

/* === Десктоп: 4 колонки для форм с >2 полями (filters-4) === */
@media (min-width: 980px){
  #filters.filters-4{
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "col1 col2 col3 col4"
      ".    actions actions .";
  }
  #filters.filters-4 .cell:nth-of-type(1){ grid-area: col1; }
  #filters.filters-4 .cell:nth-of-type(2){ grid-area: col2; }
  #filters.filters-4 .cell:nth-of-type(3){ grid-area: col3; }
  #filters.filters-4 .cell:nth-of-type(4){ grid-area: col4; }

  #filters.filters-4 .filters-actions{
    grid-area: actions;
    display:grid; grid-template-columns: 1fr 1fr;
    gap:8px; justify-items:stretch; align-items:stretch;
  }
}

/* === Десктоп: длинные формы — модификатор filters-4--free === */
@media (min-width: 980px){
  #filters.filters-4--free{
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: none;
    grid-auto-flow: row;
  }
  #filters.filters-4--free .cell{ grid-area: auto !important; }
  #filters.filters-4--free .filters-actions{
    grid-area:auto; grid-column: 2 / span 2;
    display:grid; grid-template-columns: 1fr 1fr; gap:8px;
    justify-items:stretch; align-items:stretch;
  }
}

/* Тёмная тема фильтра */
body.dark #filters{ background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.14); }
body.dark #filters input[type="date"],
body.dark #filters input[type="text"],
body.dark #filters input[type="password"],
body.dark #filters select,
body.dark #filters input[type="number"]{
  background: rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.22);
  color: #f5f5f5;
}

/* Кнопки */
button{
  width:100%; padding:12px; font-size:14px; font-weight:600;
  text-align:center; border:none; border-radius:6px;
  background:#4285f4; color:#fff; cursor:pointer; transition: background .2s ease-in-out;
  
.fixed-header button,
.fixed-header .btn{
  width: auto !important;
  min-width: 0 !important;
  padding-left: 14px;
  padding-right: 14px;
}

}
button:hover{ background:#3367d6; }

/* Всегда серые для отмены/сброса */
.cancel-button{ background:#aba9a9 !important; color:#fff; }
.cancel-button:hover{ background:#9b9b9b !important; }

/* =========================
   Таблица и контейнер — карточка
   ========================= */

/* БАЗОВО: скроллит СТРАНИЦА. Вертикальный внутри контейнера выключен,
   включим его только в .table-container.locked (когда контейнер «прилип» к хедеру). */
.table-container{
  width:100%;
  overflow-x:auto;          /* горизонтальный — всегда */
  overflow-y:visible;       /* вертикальный включится в .locked */
  -webkit-overflow-scrolling: touch;
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.10); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: var(--tc-pad);
  margin-top:10px;
  box-sizing: border-box;
}

/* ВНУТРЕННИЙ скролл — только когда контейнер упёрся под хедер */
.table-container.locked{
  overflow-y:auto;
  height: calc(100vh - var(--header-h) - var(--bottom-gap));
  max-height: none;
}

body.dark .table-container{
  background: rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}

table{
  width:100%; border-collapse:collapse; margin-top: var(--tbl-mt);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-size:14px; color: inherit;
  /* ЧТОБЫ ПОЯВЛЯЛСЯ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ НА УЗКИХ ЭКРАНАХ */
  min-width: 1000px;
}
@media (max-width: 480px){
  table{ min-width: 820px; }
}
body.dark table{ background: rgba(20,20,20,.78); color: #e6e6e6; }

/* Липкий thead: БЕЗ учёта высоты синего хедера */
.table-container:not(.locked) thead th{
  position: sticky;
  top: calc(0px - var(--tc-pad) - var(--tbl-mt) + var(--sticky-gap));
  z-index: 5;
  background: rgba(244,244,244,.92);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  text-align:left; padding:10px; font-weight:700; white-space:nowrap;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.table-container.locked thead th{
  position: sticky;
  top: calc(0px - var(--tc-pad) - var(--tbl-mt) + var(--sticky-gap));
  z-index: 5;
  background: rgba(244,244,244,.92);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  text-align:left; padding:10px; font-weight:700; white-space:nowrap;
  border-bottom:1px solid rgba(0,0,0,.1);
}
body.dark thead th{ background: rgba(50,50,50,.85); border-bottom-color: rgba(255,255,255,.14); }

td{
  padding:10px; border:1px solid rgba(0,0,0,.06); white-space:nowrap;
  text-align:left; vertical-align: middle;
}
body.dark td{ border-color: rgba(255,255,255,.08); }
.amount{ text-align:right; white-space:nowrap; }

/* Ссылки/иконки */
.row-link{ display:inline-block; padding:2px 0; }
.messenger-icons{ display:flex; align-items:center; gap:8px; }
.messenger-icons img{ width:22px; height:22px; cursor:pointer; filter: none; }
body.dark .messenger-icons img{ filter: invert(1); }

/* Статусы (бейджи) */
.status-pill{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:1;
  background:#e9ecef; color:#333; border:1px solid #dee2e6;
}
.status-pill.status-issued{ background:#fff9e6; border-color:#ffe08a; color:#7a5d00; }
.status-pill.status-paid{ background:#e8f8ee; border-color:#a9e0bf; color:#0f6c3a; }
.status-pill.status-cancelled{ background:#fdeaea; border-color:#f2b8b5; color:#8a1f17; }
body.dark .status-pill{ background: rgba(255,255,255,.08); color:#f0f0f0; border-color: rgba(255,255,255,.18); }

/* Пейджер */
.pager{
  margin: 10px 0 20px; display:flex; align-items:center; gap:8px; justify-content:center;
}
.pager a, .pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 8px; border-radius:6px; font-weight:600;
  background: rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.1); color: inherit;
}
.pager a:hover{ background: rgba(255,255,255,.95); border-color:#b9ccff; color:#1a73e8; }
.pager .active{ background:#1a73e8; border-color:#1a73e8; color:#fff; }
body.dark .pager a, body.dark .pager span{ background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.14); }

/* =========================
   Модальные окна
   ========================= */
.modal{
  display:none; position:fixed; z-index:1000;
  top:50%; left:50%; transform:translate(-50%, -50%);
  width:90%; max-width:400px;
}
.modal-overlay{ display:none; position:fixed; z-index:999; inset:0; background: rgba(0,0,0,.5); }

.modal-content{
  background: rgba(255,255,255,.95);
  position:relative; padding:20px; border-radius:12px; text-align:center;
  width:320px; max-width:90vw; margin: 0 auto; box-shadow:0 4px 10px rgba(0,0,0,.2); color: inherit;
}
.modal-content h3{ margin:0 0 10px; font-size:18px; font-weight:700; }
.close-modal{ position:absolute; top:10px; right:15px; font-size:20px; cursor:pointer; color: inherit; }

/* Кнопки в модалке: рядом, «Скасувати» слева, «Зберегти» справа */
.modal-footer{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:15px;
}
.modal-footer .cancel-button{ order:0; }
.modal-footer button[type="submit"], .modal-footer .primary{ order:1; }

/* Элементы форм внутри модалки (включая number) */
.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content input[type="email"],
.modal-content input[type="tel"],
.modal-content input[type="number"],
.modal-content select,
.modal-content textarea{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; background:#fff; color: inherit; font-size:14px; box-sizing:border-box;
}
.modal-content input[type="number"]::-webkit-outer-spin-button,
.modal-content input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.modal-content input[type="number"]{ -moz-appearance:textfield; }

.modal-content textarea{ resize:vertical; }
.modal-content .row-2 .cell { min-width: 0; }

/* Кнопки внутри модалки — одинаковая ширина */
.modal-content .button-save,
.modal-content button{ width:auto; min-width:140px; }

/* Тёмная тема модалок (включая number) */
body.dark .modal-content{ background: rgba(18,18,18,.92); color:#f0f0f0; box-shadow:0 6px 18px rgba(0,0,0,.5); }
body.dark .close-modal{ color:#f0f0f0; }
body.dark .modal-content input[type="text"],
body.dark .modal-content input[type="date"],
body.dark .modal-content input[type="email"],
body.dark .modal-content input[type="tel"],
body.dark .modal-content input[type="number"],
body.dark .modal-content select,
body.dark .modal-content textarea{
  background:#1e1e1e; border:1px solid #444; color:#f0f0f0;
}

/* Раскладка действий (как в open-alert) */
#open-alert .modal-footer,
#open-alert .modal-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; }

/* Доп. отступы для статусов в модалке */
#status-modal .status-option{ display:block; width:100%; margin-top:10px; }

/* Нижняя панель кнопок */
.bottom-buttons{
  position:fixed; bottom:0; left:0; width:100%;
  background: rgba(255,255,255,.88);
  display:flex; justify-content:space-between; padding:10px; border-top:1px solid rgba(0,0,0,.12); z-index: 900; gap:5px;
}
.bottom-buttons button{ flex:1; padding:12px; font-size:14px; font-weight:700; border-radius:5px; min-width:24%; background:#323232; color:#fff; }
.bottom-buttons button:hover{ background:#3a3a3a; }
body.dark .bottom-buttons{ background: rgba(0,0,0,.4); border-top-color: rgba(255,255,255,.15); }

/* =========================
   Поле пароля с "глазом"
   ========================= */
.field-with-eye{ position: relative; }
.field-with-eye input{ padding-right:56px; }

.password-eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; padding:0;
  width:auto !important; height:auto !important;
  font-size:16px; line-height:1; opacity:.85; z-index:3;
  cursor:pointer; user-select:none;
}
.password-eye:hover{ opacity:1; }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{ display:none !important; }
input[type="password"]::-webkit-credentials-auto-fill-button{
  visibility:hidden; display:none; pointer-events:none;
}

/* =============================
   Інфокартка під таблицею (help-card)
   ============================= */
.help-card{
  margin-top:12px;
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  padding:12px;
  color: inherit;
  position: relative;
  box-sizing: border-box;
}
.help-card::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:3px;
  background:#4285f4;
  border-radius:10px 10px 0 0;
}
.help-card__header{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.help-card__icon{ font-size:18px; line-height:1; }
.help-card h3{ margin:0; font-size:18px; font-weight:700; }
.help-card h4{ margin:10px 0 6px; font-size:15px; font-weight:700; }

.help-card .steps{ margin:0 0 8px 18px; padding:0; }
.help-card .steps li{ margin:4px 0; line-height:1.35; }

.help-card code{
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 90%;
  color: inherit;
  white-space: pre-wrap;
}
.help-card .muted{ margin:8px 0 0; font-size:13px; opacity:.8; }

body.dark .help-card{
  background: rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* TG help */
.help-card.tg-help{
  width: calc(100% - 24px);
  margin-left: 12px;
  margin-right: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.help-card.tg-help, .help-card.tg-help *{
  overflow-wrap: anywhere; word-break: break-word;
}
@media (min-width: 980px){
  .help-card.tg-help{ padding-left: 12px; padding-right: 12px; }
}

/* =========================================================
   Комбобоксы категорий/брендов
   ========================================================= */
.cat-combo{ position:relative; }
.cat-combo input[type="text"]{
  width:100%; padding:8px 10px; font-size:14px; line-height:1.3;
  border:1px solid rgba(0,0,0,.25); border-radius:6px; background: rgba(255,255,255,.9); color: inherit;
}
.cat-combo input::placeholder{ color:#9aa0a6; }
body.dark .cat-combo input[type="text"]{ background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.22); color:#f5f5f5; }

.cat-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  max-height:260px; overflow:auto; z-index:50; display:none;
  background: rgba(255,255,255,.98); border:1px solid rgba(0,0,0,.15); border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.cat-item{ padding:8px 10px; cursor:pointer; white-space:nowrap; }
.cat-item:hover, .cat-item.active{ background:#eef3ff; }
body.dark .cat-dropdown{ background: rgba(20,20,20,.95); border-color: rgba(255,255,255,.16); }
body.dark .cat-item:hover, body.dark .cat-item.active{ background: rgba(65,100,200,.25); }

/* Комбобокс брендов */
.brand-combo{ position:relative; }
.brand-combo input[type="text"]{
  width:100%; padding:8px 10px; font-size:14px; line-height:1.3;
  border:1px solid rgba(0,0,0,.25); border-radius:6px; background: rgba(255,255,255,.9); color: inherit;
}
body.dark .brand-combo input[type="text"]{ background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.22); color:#f5f5f5; }
.brand-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  max-height:260px; overflow:auto; z-index:50; display:none;
  background: rgba(255,255,255,.98); border:1px solid rgba(0,0,0,.15); border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.brand-item{ padding:8px 10px; cursor:pointer; white-space:nowrap; }
.brand-item:hover, .brand-item.active{ background:#eef3ff; }
body.dark .brand-dropdown{ background: rgba(20,20,20,.95); border-color: rgba(255,255,255,.16); }
body.dark .brand-item:hover, body.dark .brand-item.active{ background: rgba(65,100,200,.25); }

datalist#brand-list{ display:none; }

/* мини-превью/бейджи */
.dup-table .thumb{ height:40px; width:auto; border-radius:4px; display:block; }
.dup-table td{ vertical-align: middle; }
.inline-badge{ font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.12); }
.inline-badge.ean{ background:#fff9e6; border-color:#ffe08a; color:#7a5d00; }
.inline-badge.sku{ background:#e8f8ee; border-color:#a9e0bf; color:#0f6c3a; }

/* Глобально: dropdown'ы поверх соседних ячеек */
.cat-dropdown, .brand-dropdown{ position: absolute; z-index: 10000 !important; }

/* =========================================================
   product_list: превью/панель действий
   ========================================================= */
.thumb{ height:40px; width:auto; border-radius:4px; display:block; cursor:pointer; }
.inline-badge.active{ background:#e8f8ee; border-color:#a9e0bf; color:#0f6c3a; }
.inline-badge.arch{ background:#fdeaea; border-color:#f2b8b5; color:#8a1f17; }
.table-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:10px 0 6px; }
.table-actions .left, .table-actions .right{ display:flex; gap:8px; align-items:center; }
.table-actions a.button{ display:inline-block; padding:8px 12px; font-weight:700; border-radius:6px; text-decoration:none; }
.table-actions a.button.secondary{ background:#aba9a9; color:#fff; }
.table-actions a.button.secondary:hover{ background:#9b9b9b; }
.export-btn{ padding:8px 12px; width:auto; }
.amount{ text-align:right; white-space:nowrap; }

/* =========================================================
   Только для /rabota/add_brand.php
   ========================================================= */
.page-content.add-brand{ padding-top:64px; }

/* формы/фильтры НЕ поднимаем над хедером — иначе будет отдельный stacking context */
.page-content.add-brand #filters{
  position: static !important;
  z-index: auto !important;
  overflow: visible;
}

/* По умолчанию на таких страницах скроллит окно.
   Но когда контейнер «прилип» (.locked) — включаем внутренний скролл. */
.page-content.add-brand .table-container{ max-height: none !important; }
.page-content.add-brand .table-container:not(.locked){ overflow: visible !important; }
.page-content.add-brand .table-container.locked{ overflow: auto !important; }

/* липкие заголовки не учитывают высоту фикс-хедера */
.page-content.add-brand .table-container:not(.locked) thead th{
  top: calc(0px - var(--tc-pad) - var(--tbl-mt) + var(--sticky-gap));
}

/* выпадающие списки — поверх карточек, но ниже хедера */
.page-content.add-brand .cat-combo,
.page-content.add-brand .brand-combo{ position: relative; }
.page-content.add-brand .cat-dropdown,
.page-content.add-brand .brand-dropdown{
  z-index: 3600 !important;
}

/* кнопка удаления / колонка Дії (общие) */
.btn-danger{ background:#d9534f; color:#fff; border:none; border-radius:6px; padding:6px 10px; cursor:pointer; font-weight:700; }
.btn-danger:hover{ background:#c9302c; }
.col-actions{ text-align:center; white-space:nowrap; }

/* =========================================================
   ДОБАВЛЕНО: Универсальные стили действий в таблицах (.details-icon)
   ========================================================= */
.details-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:6px;
  text-decoration:none;
}
.details-icon:hover{ background: rgba(0,0,0,.06); }
body.dark .details-icon:hover{ background: rgba(255,255,255,.08); }

/* =========================================================
   ДОБАВЛЕНО: Мобильные правила для компактных 2–3 колоночных таблиц
   ========================================================= */
@media (max-width: 540px){
  table{ min-width: auto !important; }
  thead th, td{ white-space: normal; }
  .col-actions{ width:1%; white-space:nowrap; }
}

/* =========================================================
   ДОБАВЛЕНО: Стили дерева категорий
   ========================================================= */
.tree-toggle{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none; color:inherit; }
.tree-arrow{ display:inline-block; width:10px; text-align:center; font-weight:700; }
.tree-name { display:inline-block; }
.tree-row.hidden{ display:none; }

/* Модалки: ограничить высоту экрана и включить внутренний скролл */
#view-modal .modal-content,
#edit-modal .modal-content {
  max-height: 92vh;           /* не выше видимой области */
  overflow-y: auto;           /* вертикальный скролл внутри */
  -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
}

/* Картинка в просмотре: не занимать весь экран по высоте */
#view-modal #vm-img {
  max-height: 40vh;           /* чтобы остальное содержимое было видно */
  object-fit: contain;
}

/* На узких экранах — немного компактнее */
@media (max-width: 480px) {
  #view-modal .modal-content,
  #edit-modal .modal-content {
    max-height: 90vh;
    padding: 12px;            /* если нужно, слегка ужать отступы */
  }
}