/* ============================================================
   Тема «Графит» (slate) — оверлей поверх styles.css.
   Палитра из прототипа: светлый корпус + графитовая тёмная шапка + оранжевый акцент.
   Подключать ПОСЛЕ styles.css. Только для локального превью.
   ============================================================ */

/* Перекрываем палитру для всех режимов (:root и data-theme), чтобы превью всегда было «Графит» */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --accent: #EE5F1B;
    --accent-hover: #C44A12;
    --accent-light: #FCE9DC;
    --ring: rgba(238, 95, 27, 0.20);

    --bg: #E9ECEF;
    --card-bg: #FFFFFF;
    --card-bg-soft: #F3F5F8;

    --text: #13171B;
    --text-secondary: #5A6570;
    --text-muted: #6B7682;

    --border: #DFE4EA;
    --border-hover: #CAD2DA;
    --muted: #F3F5F8;

    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 30, .05);
    --shadow-md: 0 1px 2px rgba(15, 23, 30, .05), 0 8px 22px rgba(15, 23, 30, .06);
    --shadow-lg: 0 12px 32px rgba(15, 23, 30, .10), 0 2px 6px rgba(15, 23, 30, .05);
    --shadow-xl: 0 12px 32px rgba(15, 23, 30, .12), 0 4px 10px rgba(15, 23, 30, .06);

    --font-display: 'Geologica', 'Inter', -apple-system, sans-serif;
    --header-bg: #13171B;
}

body { background: var(--bg); }

/* Графитовая шапка: тёмная подложка, светлый текст */
.header {
    background: #13171B !important;
    border-bottom: 1px solid #23282E !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 6px 22px rgba(15,23,30,.18) !important;
}
.header__text { color: #EDF0F3 !important; font-family: var(--font-display); letter-spacing: -0.01em; }
.header__subtitle { color: #9AA6B2 !important; }
.header__company-name, #header-company-name { color: #EDF0F3 !important; }
.theme-toggle { color: #C7CFD8 !important; border-color: rgba(255,255,255,.12) !important; }
.theme-toggle:hover { background: rgba(255,255,255,.06) !important; }
.header-role-btn { border-color: rgba(255,255,255,.14) !important; }

/* Заголовочный шрифт Графита — на ключевые тексты */
h1, h2, h3, .category-card__name, .result-total, .mgr-calcs-summary strong,
.header__text { font-family: var(--font-display); }

/* Карточки категорий — интерактив из прототипа (.mg-card): подъём, акцентная рамка/тень,
   блик-проблеск, иконка вращается и заливается акцентом, название → акцент. */
.category-card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .3s;
}
.category-card::after {
    content: '';
    position: absolute; top: 0; left: 0; width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.5), transparent);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform .8s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.category-card:hover::after { transform: translateX(360%) skewX(-18deg); }
.category-card:hover,
.category-card.is-hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 22px 44px -18px var(--accent);
}
.category-card__icon {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s;
}
.category-card:hover .category-card__icon,
.category-card.is-hover .category-card__icon {
    transform: rotate(-7deg) scale(1.1);
    background: var(--accent);
    color: #fff;
}
.category-card:hover .category-card__icon svg,
.category-card.is-hover .category-card__icon svg { stroke: #fff; color: #fff; }
.category-card:hover .category-card__name,
.category-card.is-hover .category-card__name { color: var(--accent); }

/* ===== Меню-табы в шапке (как в прототипе) ===== */
.gp-tabs { display: flex; gap: 4px; align-items: center; margin: 0 auto 0 24px; flex-wrap: wrap; }
.gp-tabs button {
    padding: 8px 13px; border-radius: 9px; border: none; cursor: pointer;
    font-size: 13.5px; font-weight: 600; font-family: 'Golos Text','Inter',sans-serif;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: #EDF0F3; opacity: .78; transition: all .18s;
}
.gp-tabs button:hover { opacity: 1; background: rgba(255,255,255,.06); }
.gp-tabs button.active { background: var(--accent-light); color: var(--accent); opacity: 1; }
.gp-cart-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
    font-family: var(--font-mono); display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 720px){ .gp-tabs{ margin-left: 8px; } .gp-tabs button{ padding:7px 10px; font-size:12.5px; } }

/* ===== Поля формы — как в прототипе (фон surface2, мягкая рамка/радиус) ===== */
.form-group input, .form-group select, .form-group textarea,
.fields-container input, .fields-container select, .fields-container textarea {
    background: var(--card-bg-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.fields-container input:focus, .fields-container select:focus, .fields-container textarea:focus {
    border-color: var(--accent) !important;
    background: var(--card-bg) !important;
    box-shadow: 0 0 0 3px var(--ring) !important;
    outline: none !important;
}
.form-group label { font-weight: 600; color: var(--text); }

/* ===== Блок результата — чистая акцентная карточка ===== */
.result-total-section, .result-section { border-radius: var(--radius-md); }
.result-total { font-family: var(--font-display); }
#result-total, .result-total { color: var(--text); }
.btn-primary { border-radius: var(--radius-sm); }
.btn-secondary { border-radius: var(--radius-sm); }

/* ===== «Общий расчёт» как отдельная страница-вид ===== */
#cart-panel.cart-panel { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; background: transparent; border: none; }
#cart-panel .cart-header { margin-top: 8px; }

/* ===== Доп.опции — тоггл-строки как в прототипе (безопасно: только стиль) ===== */
.extras-section .checkbox-group {
    padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card-bg-soft); margin-bottom: 8px;
    transition: border-color .18s, background .18s; gap: 10px;
}
.extras-section .checkbox-group:hover { border-color: var(--accent); background: var(--card-bg); }
.extras-section .checkbox-group label { font-weight: 500; color: var(--text); }
.extras-section .checkbox-group input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; }

/* ===== Доводка: шапка-бренд не сжимается ===== */
.header__brand { flex: 0 0 auto; min-width: 0; }
.header__text, .header__subtitle { white-space: nowrap; }
.header__inner { flex-wrap: wrap; row-gap: 6px; }

/* ===== Пустая корзина: прячем тёмную плашку итога, показываем пустое состояние ===== */
#cart-total:empty { display: none; }
#cart-items:empty::after {
    content: 'Корзина пуста — добавьте расчёты кнопкой «В общий расчёт»';
    display: block; padding: 28px 18px; text-align: center;
    color: var(--text-muted); background: var(--card-bg-soft);
    border: 1px dashed var(--border); border-radius: var(--radius-md); font-size: 14px;
}

/* ===== «Мои расчёты» как отдельная страница-вид ===== */
#manager-panel.manager-panel { max-width: 980px; margin: 0 auto; }

/* ===== Фикс: «Только Графит» — прячем переключатель темы (он ломал статусы кабинета) ===== */
.theme-toggle { display: none !important; }

/* Недостающие переменные статусов/ролей — фиксируем СВЕТЛЫЕ значения для любой data-theme,
   иначе при data-theme=dark бейджи кабинета («Мои расчёты») получали тёмный фон на светлом фоне. */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --manager: #7C3AED; --manager-hover: #6D28D9;
    --success: #16A34A; --success-hover: #15803D;
    --warning: #D97706; --info: #0EA5E9;
    --status-saved-fg:      #D97706; --status-saved-bg:      #FEF3C7;
    --status-approved-fg:   #0369A1; --status-approved-bg:   #E0F2FE;
    --status-production-fg: #7C3AED; --status-production-bg: #EDE9FE;
    --status-done-fg:       #15803D; --status-done-bg:       #DCFCE7;
    --status-cancelled-fg:  #71717A; --status-cancelled-bg:  #F4F4F5;
}