/* styles.css (dark) */ 
:root{
  --bg:#0f1115; --card:#171a21; --fg:#eaeefb; --muted:#a8b1c7;
  --accent:#6aa8ff; --ok:#3fb950; --warn:#d29922; --danger:#f85149;
}

*{ box-sizing:border-box }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.4 system-ui,Segoe UI,Roboto,Arial
}

a{ color:var(--accent); text-decoration:none }

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#0b0d12; border-bottom:1px solid #222
}

.controls{
  display:flex; gap:16px; align-items:center;
  padding:12px 16px; border-bottom:1px solid #222
}
.controls label{ display:flex; gap:8px; align-items:center; color:var(--muted) }

.items{
  display:flex; flex-direction:column; gap:12px; padding:16px
}

/* ==== КАРТОЧКА ТОВАРА ==== */
/* порядок: .sel | button.btn(карандаш) | button.btn(кальк.) | img | .meta | .right  */
.item{
  display:grid;
  /* БЫЛО: 5 колонок — не хватало под вторую кнопку.
     СТАЛО: 6 колонок: чекбокс, edit, calc, img, meta, right */
  grid-template-columns: 48px 48px 48px 96px 1fr auto;
  gap:12px; padding:12px;
  background:var(--card); border:1px solid #222; border-radius:12px;
  align-items:center;
}

.item img{
  width:96px; height:96px; object-fit:contain; /* было cover — могло резать изображение */
  border-radius:8px; border:1px solid #222; background:#0b0d12
}

.item .meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px
}

/* аккуратный правый столбец: тумблер справа в строку */
.item .right{
  display:flex; flex-direction:row; gap:10px;
  align-items:center; justify-content:flex-end;
  min-width:160px;
}

/* обе маленькие кнопки одинаковые */
.item > .btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  padding:0; font-size:16px
}

/* колонка чекбокса выбора */
.item .sel{ display:flex; align-items:center; justify-content:center }

/* бейджи */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; border:1px solid #333; color:var(--muted) }
.badge.ok{ color:var(--ok); border-color:var(--ok) }
.badge.off{ color:var(--danger); border-color:var(--danger) }

/* кнопки */
.btn{
  padding:6px 10px; border:1px solid #2a2f3a; border-radius:8px;
  background:#11141a; color:var(--fg); cursor:pointer
}
.btn:hover{ border-color:#3a4252 }

/* тумблер + подпись */
.switch{ display:inline-flex; gap:8px; align-items:center; color:#aab; font-size:13px }

/* кастомный toggle */
.switch input[type="checkbox"]{
  appearance:none; width:40px; height:22px; background:#555;
  border-radius:999px; position:relative; cursor:pointer; outline:none;
  transition:background .2s ease; margin:0;
}
.switch input[type="checkbox"]::after{
  content:''; position:absolute; top:2px; left:2px;
  width:18px; height:18px; background:#fff; border-radius:50%;
  transition:transform .2s ease;
}
.switch input[type="checkbox"]:checked{ background:#2ecc71 }
.switch input[type="checkbox"]:checked::after{ transform:translateX(18px) }

.price{ font-weight:600 }
.kv{ font-size:13px; color:var(--muted) }
.kv b{ color:var(--fg) }

.pagination{
  display:flex; gap:8px; align-items:center; justify-content:center;
  padding:16px; border-top:1px solid #222
}

/* ===== МОДАЛКИ (исправленный z-index) ===== */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000 !important;   /* поверх sticky панелей */
}

.modal.hidden {
    display: none;
}

.modal__content {
    background: var(--card);
    border: 1px solid #222;
    border-radius: 12px;
    padding: 16px;
    min-width: 320px;
    max-width: 420px;
    position: relative;
    z-index: 2100 !important;
}

.modal__content form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.modal__close {
    position: absolute;
    right: 24px;
    top: 24px;
    border: none;
    background: transparent;
    color: var(--fg);
    font-size: 22px;
    cursor: pointer;
}


/* ===== СТРАНИЦА НАСТРОЕК ===== */
.settings{ padding:16px }
.settings form{ display:flex; flex-direction:column; gap:12px; max-width:400px }

/* для строк в модалке колонок */
.cols-row{
  display:flex; align-items:center; gap:8px; padding:6px;
  border:1px solid #2a2f3a; border-radius:8px; background:#11141a;
  margin-bottom:6px; cursor:move
}
.cols-row .drag{ font-size:18px; opacity:.7 }
.cols-row .move{ display:flex; gap:6px; margin-left:auto }

.cards{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid #222;border-radius:12px;padding:12px 16px;min-width:220px}
.card__title{color:var(--muted);font-size:13px;margin-bottom:6px}
.card__value{font-size:24px;font-weight:700}

/* --- Tabs --- */
.tabs{display:flex;gap:8px;align-items:center;padding:8px 16px;border-bottom:1px solid #222;background:#0b0d12}
.tab{padding:8px 12px;border:1px solid #2a2f3a;border-bottom:none;border-radius:10px 10px 0 0;background:#11141a;color:var(--fg);cursor:pointer}
.tab:hover{border-color:#3a4252}
.tab.active{background:var(--card);border-color:#3a4252}

/* секции вкладок */
.section-tab{display:none;padding:16px}
.section-tab.active{display:block}

.btn.sm{ padding:4px 8px; font-size:12px }
.btn.red{ border-color:#4a2a2a; color:#f85149 }
.btn.red:hover{ border-color:#f85149 }

/* ====== Toolbar: adaptive wrap ====== */
.controls{
  display:flex;
  flex-wrap:wrap;          /* ← разрешаем перенос на новые строки */
  gap:8px 12px;            /* компактнее промежутки: row col */
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid #222;
  position:sticky; top:0;  /* приятно фиксируется при скролле */
  z-index:10; background:#0b0d12;
}
.controls > *{ flex:0 0 auto; }  /* ничего не растягивать на всю ширину */
.controls label{ 
  display:flex; gap:8px; align-items:center; 
  color:var(--muted); white-space:nowrap; /* чтобы подписи не ломались */
}

/* компактные поля и кнопки на средней ширине */
.controls input[type="text"],
.controls select,
.controls .btn{
  height:32px;
  padding:4px 8px;
  font-size:13px;
}

/* ещё чуть компактнее на узких экранах/окнах */
@media (max-width: 1400px){
  .controls{ gap:6px 10px; }
  .controls input[type="text"],
  .controls select{ max-width:150px; } /* чтобы не разъезжались */
}

@media (max-width: 1100px){
  .controls input[type="text"],
  .controls select{ max-width:130px; }
}

/* если совсем критично — можно включить горизонтальный скролл вместо переносов:
   добавь к .controls класс .scroll-x (по желанию) */
.controls.scroll-x{
  flex-wrap:nowrap;
  overflow-x:auto;
  white-space:nowrap;
}

/* ====== Панель управления: группами, адаптивная сетка ====== */
.controls-grid{
  display:grid;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid #222;
  background:#0b0d12;
  position:sticky; top:0; z-index:10;
  grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
}

.ctrl-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:10px 12px;
  border:1px solid #222;
  border-radius:10px;
  background:#11141a;
}

.ctrl-title{
  font-size:12px;
  color:#a8b1c7;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-right:6px;
  padding:2px 6px;
  border:1px solid #2a2f3a;
  border-radius:6px;
  background:#0f1115;
}

.controls-grid label{
  display:flex; align-items:center; gap:6px; color:var(--muted);
  white-space:nowrap;
}

.controls-grid input[type="text"],
.controls-grid select,
.controls-grid .btn{
  height:32px; padding:4px 8px; font-size:13px;
}

/* компактнее на средних ширинах */
@media (max-width: 1200px){
  .controls-grid{ grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); }
  .controls-grid input[type="text"], .controls-grid select{ max-width:160px; }
}

/* очень узко */
@media (max-width: 900px){
  .controls-grid input[type="text"], .controls-grid select{ max-width:140px; }
}

/* Сетка брендов */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

/* Карточка одной строки */
.brand-row {
    background: #0e0e0e;
    border: 1px solid #222;
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

/* Верхняя строка */
.brand-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Название бренда */
.brand-name {
    font-weight: bold;
    font-size: 15px;
    color: #fff;
}

/* Правая зона с кнопкой */
.brand-right {
    margin-top: 6px;
    text-align: right;
}

/* Сообщение */
.brand-msg {
    margin-top: 6px;
    font-size: 13px;
    color: #8bc34a;
    word-break: break-all;
}

/* Статус */
.badge {
    background: #333;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    color: #bbb;
}
.badge.ok {
    background: #1b5e20;
    color: #a5e6a6;
}

.log-view {
    background: #111;
    color: #0f0;
    padding: 12px;
    font-family: Consolas, monospace;
    border-radius: 6px;
    min-height: 380px;
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 65vh;
}

.log-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.img-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.img-item {
    position: relative;
    width: 70px;
    height: 70px;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    background:#000;
}

.img-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-item .del {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,.6);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 14px;
    cursor: pointer;
}

.img-add {
    display: flex;
    gap: 6px;
}

.img-item.dragging {
    opacity: 0.3;
}



/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (до 600px)
   ============================================================ */
@media (max-width: 600px) {

    body { font-size: 14px; }

    /* Убираем горизонтальный скролл */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ---- Панели фильтров ---- */
    .controls,
    .controls-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .controls > *,
    .controls-grid > * {
        width: 100%;
        max-width: 100%;
    }

    /* Поля ввода + селекты на всю ширину */
    .controls input[type="text"],
    .controls select,
    .controls .btn,
    .controls-grid input[type="text"],
    .controls-grid select,
    .controls-grid .btn {
        width: 100%;
        max-width: 100%;
        height: 38px;
        font-size: 14px;
    }

    /* ---- КАРТОЧКА ТОВАРА ---- */
    .item {
        grid-template-columns: 40px 40px 40px 80px 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 10px;
    }

    /* Чекбокс, edit, calc — первая строка */
    .item .sel { grid-column: 1; grid-row: 1; }
    .item > .btn:nth-child(2) { grid-column: 2; grid-row: 1; }
    .item > .btn:nth-child(3) { grid-column: 3; grid-row: 1; }

    /* Изображение */
    .item img {
        grid-column: 1 / span 3;
        grid-row: 2;
        width: 80px;
        height: 80px;
    }

    /* Мета-информация — под картинкой */
    .item .meta {
        grid-column: 4 / 6;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Правая часть (тумблер) — перенос вниз */
    .item .right {
        grid-column: 1 / 6;
        grid-row: 3;
        justify-content: flex-start;
        margin-top: 6px;
    }

    /* Укороченные кнопки */
    .item > .btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* ---- Текст в meta — не рвётся вертикально ---- */
    .meta, .meta * {
        white-space: normal !important;
        word-break: break-word;
    }

    /* ---- Таб-кнопки (Парсинг / Категории / и т.д.) ---- */
    .tabs {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }
    .tab {
        width: calc(50% - 6px);
        text-align: center;
        padding: 10px;
        font-size: 14px;
    }

    /* Карточки статистики */
    .cards {
        flex-direction: column;
    }
    .card {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================================
   СУПЕР-МАЛЕНЬКИЕ ЭКРАНЫ (до 380px — iPhone 12/13 Mini)
   ============================================================ */
@media (max-width: 380px) {

    .item {
        grid-template-columns: 32px 32px 32px 70px 1fr;
    }

    .item img {
        width: 70px;
        height: 70px;
    }

    .tab {
        width: 100%;
    }

    .controls input[type="text"],
    .controls select {
        font-size: 13px;
    }

}