@charset "UTF-8";

/* =================================================================
   Ликвидатор · Парчмент-стиль правой панели (карта-режим)
   -----------------------------------------------------------------
   Скоуп: .liq-map-panel (правая панель карты Королевства Боярд)
   Не пересекается с Glass Dark v2 — namespace через .liq-map-panel

   Содержимое будет добавлено пошагово (Шаги 2-5):
   - ШАГ 2: контейнер .liq-map-panel
   - ШАГ 3: header + filters
   - ШАГ 4: таблица .liq-tbl
   - ШАГ 5: inline action UI
   ================================================================= */

/* Пергамент-токены — локальный скоуп, не загрязняет :root */
.liq-map-panel {
  --parchment-bg-light:    #f4e4c1;
  --parchment-bg-mid:      #e8d4a1;
  --parchment-bg-th:       #d4c4a1;
  --parchment-bg-th-2:     #c4b491;
  --parchment-bg-gold-soft:#fef7d4;
  --parchment-bg-dark:     #2c1810;
  --parchment-bg-dark-2:   #3d2415;
  --parchment-text:        #2c1810;
  --parchment-text-2:      #5c4033;
  --parchment-line:        #b8a88a;
  --parchment-gold:        #c9a84c;
  --parchment-gold-bright: #ffd700;
  --parchment-gold-dark:   #8b6914;
  --parchment-red:         #8b1a1a;
}

/* ─────────────────────────────────────────────
   ШАГ 2 · Контейнер правой панели
   ───────────────────────────────────────────── */

.liq-map-panel {
    background: linear-gradient(180deg,
        var(--parchment-bg-light),
        var(--parchment-bg-mid)) !important;
    border-left: 2px solid var(--parchment-gold-dark) !important;
}

.liq-map-panel-placeholder {
    color: var(--parchment-text-2) !important;
    font: 600 13px 'Inter', sans-serif !important;
}

/* ─────────────────────────────────────────────
   ШАГ 2-Final · Header + Filters + Таблица + Inline UI
   ───────────────────────────────────────────── */

/* Header плашка — тёмная как .map-top из мокапа */
.liq-map-panel-header {
    background: linear-gradient(180deg,
        var(--parchment-bg-dark),
        var(--parchment-bg-dark-2)) !important;
    border-bottom: 2px solid var(--parchment-gold-dark) !important;
}

.liq-map-panel-title {
    font: 800 15px 'Cinzel', serif !important;
    color: var(--parchment-gold-bright) !important;
    letter-spacing: 0.02em;
}

.liq-map-panel-sub {
    color: var(--parchment-gold) !important;
    font: 500 11px 'Inter', sans-serif !important;
    margin-top: 2px;
}

/* Filters обёртка — пергаментная */
.liq-map-panel-filters {
    background: linear-gradient(180deg,
        var(--parchment-bg-th),
        var(--parchment-bg-th-2)) !important;
    border-bottom: 1px solid var(--parchment-gold-dark) !important;
    padding: 10px 14px !important;
    gap: 6px !important;
}

/* Кнопки фильтров — пергаментные мини-бейджи */
.liq-map-panel .liq-cat {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid var(--parchment-line) !important;
    color: var(--parchment-text-2) !important;
    font: 700 12px 'Inter', sans-serif !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    min-height: auto !important;
    transition: background 0.15s, border-color 0.15s;
}

.liq-map-panel .liq-cat:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: var(--parchment-gold) !important;
}

/* Активные категории — насыщенные цвета на пергаменте */
.liq-map-panel .liq-cat.active {
    background: linear-gradient(180deg,
        var(--parchment-gold),
        var(--parchment-gold-dark)) !important;
    color: #fff !important;
    border-color: var(--parchment-gold-dark) !important;
}
.liq-map-panel .liq-cat.red.active {
    background: linear-gradient(180deg, #b52a2a, var(--parchment-red)) !important;
    border-color: var(--parchment-red) !important;
}
.liq-map-panel .liq-cat.orange.active {
    background: linear-gradient(180deg, #c47220, #a85e1a) !important;
    border-color: #a85e1a !important;
}
.liq-map-panel .liq-cat.yellow.active {
    background: linear-gradient(180deg,
        var(--parchment-gold-bright),
        var(--parchment-gold)) !important;
    color: var(--parchment-text) !important;
    border-color: var(--parchment-gold-dark) !important;
}

/* Контейнер таблицы — пергаментный фон */
.liq-map-panel-table {
    background: var(--parchment-bg-light) !important;
}

/* Сама таблица */
.liq-map-panel .liq-tbl {
    background: transparent !important;
}

/* Шапка таблицы — тёмно-бежевая Cinzel */
.liq-map-panel .liq-tbl thead {
    background: linear-gradient(180deg,
        var(--parchment-bg-th),
        var(--parchment-bg-th-2)) !important;
}

.liq-map-panel .liq-tbl th {
    background: transparent !important;
    color: var(--parchment-text) !important;
    font: 700 11px 'Cinzel', serif !important;
    letter-spacing: 0.04em !important;
    border-bottom: 2px solid var(--parchment-gold-dark) !important;
    padding: 10px 6px !important;
}

.liq-map-panel .liq-tbl .liq-th-sort:hover {
    color: var(--parchment-gold-dark) !important;
}

/* Строки */
.liq-map-panel .liq-tbl tbody tr {
    background: transparent !important;
}

.liq-map-panel .liq-tbl tbody tr:hover {
    background: rgba(139, 105, 20, 0.08) !important;
}

/* Ячейки */
.liq-map-panel .liq-tbl td {
    color: var(--parchment-text) !important;
    border-bottom: 1px solid var(--parchment-line) !important;
    font: 500 12px 'Inter', sans-serif !important;
}

.liq-map-panel .liq-tbl .liq-td-article {
    color: var(--parchment-gold-dark) !important;
    font: 700 12px 'JetBrains Mono', monospace !important;
}

.liq-map-panel .liq-tbl .liq-td-name {
    color: var(--parchment-text-2) !important;
    font: 500 11px 'Inter', sans-serif !important;
}

.liq-map-panel .liq-tbl .liq-td-wh {
    color: var(--parchment-text-2) !important;
    font: 500 11px 'Inter', sans-serif !important;
}

.liq-map-panel .liq-tbl .liq-td-num {
    color: var(--parchment-text-2) !important;
    font: 600 12px 'JetBrains Mono', monospace !important;
}

.liq-map-panel .liq-tbl .liq-td-abc {
    color: var(--parchment-text) !important;
    font: 700 12px 'JetBrains Mono', monospace !important;
}

/* Border-left категорий — в пергаментных цветах */
.liq-map-panel .liq-tbl .liq-row-red {
    border-left: 3px solid var(--parchment-red) !important;
}
.liq-map-panel .liq-tbl .liq-row-orange {
    border-left: 3px solid #a85e1a !important;
}
.liq-map-panel .liq-tbl .liq-row-yellow {
    border-left: 3px solid var(--parchment-gold) !important;
}

/* DSS-цвета — переопределение под пергамент */
.liq-map-panel .liq-tbl .dss-red {
    color: var(--parchment-red) !important;
    font: 800 12px 'JetBrains Mono', monospace !important;
}
.liq-map-panel .liq-tbl .dss-orange {
    color: #a85e1a !important;
    font: 800 12px 'JetBrains Mono', monospace !important;
}
.liq-map-panel .liq-tbl .dss-yellow {
    color: var(--parchment-gold-dark) !important;
    font: 800 12px 'JetBrains Mono', monospace !important;
}

/* Inline action UI — поля ввода уценки */
.liq-map-panel .liq-act-detail {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid var(--parchment-line) !important;
    border-radius: 4px !important;
    padding: 6px !important;
    margin-top: 4px !important;
}

.liq-map-panel .liq-act-comment {
    background: #fff !important;
    border: 1.5px solid var(--parchment-line) !important;
    color: var(--parchment-text) !important;
    font: 500 11px 'Inter', sans-serif !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
}

.liq-map-panel .liq-act-select {
    background: #fff !important;
    border: 1.5px solid var(--parchment-line) !important;
    color: var(--parchment-text) !important;
    font: 500 11px 'Inter', sans-serif !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
}

.liq-map-panel .liq-price-input {
    background: #fff !important;
    border: 1.5px solid var(--parchment-gold-dark) !important;
    color: var(--parchment-text) !important;
    font: 800 13px 'JetBrains Mono', monospace !important;
    border-radius: 5px !important;
}