/* ==========================================================================
   VIP QC HUB в языке бренда N1 Partners — слой поверх Tailwind-классов страниц (body.qc).

   Страницы QC HUB собраны из Tailwind-утилит (в т.ч. в разметке, которую генерирует JS: модалки, строки
   таблиц, бейджи), и держатся на небольшой палитре: white / slate / red плюс статусные amber, emerald,
   blue. Вместо переписывания ~11 тысяч строк разметки этот файл переназначает СМЫСЛ этих классов на
   токены бренда из data_hub.css — так стиль одинаково ложится и на статическую, и на динамическую
   разметку. Подключается ПОСЛЕ data_hub.css (там токены, шрифты и компоненты сайдбара).

   Что делает: прямые углы вместо скруглений, плоские поверхности без теней, slate → нейтрали бренда,
   red → фирменный #ff230a, статусные цвета — плоские и сдержанные, заголовки и крупные цифры — Druk Wide,
   текст — Exo 2 (шрифты крупнее прежних), таблицы и формы — в строгой сетке бренда.
   Специфичность (body.qc + класс) выше, чем у Tailwind, поэтому !important почти не нужен.
   ========================================================================== */

body.qc {
    --qc-n100: #f0f0f0;
    --qc-n200: #e9e9e9;
    --qc-n300: #c9cad2;
    --qc-n400: #7d7f8e;
    --qc-n500: #6b6d7c;
    --qc-n600: #4e4e50;
    --qc-n700: #2f2f31;
    --qc-n900: #151515;

    --qc-info-ink: #1d5fbf;
    --qc-info-soft: rgba(42, 120, 214, 0.10);
    --qc-info-line: rgba(42, 120, 214, 0.32);
    --qc-violet-ink: #4a3aa7;
    --qc-violet-soft: rgba(74, 58, 167, 0.09);
    --qc-violet-line: rgba(74, 58, 167, 0.30);
    --qc-ok-line: rgba(0, 99, 0, 0.30);
    --qc-warn-line: rgba(138, 90, 0, 0.32);
    --qc-bad-line: rgba(255, 35, 10, 0.38);
}

/* ---------- шрифты и размеры (крупнее прежних; шкала та же, что в VIP DATA HUB) ---------- */
body.qc .text-\[9px\]  { font-size: 10.5px; }
body.qc .text-\[10px\] { font-size: 11.5px; }
body.qc .text-\[11px\] { font-size: 12.5px; }
body.qc .text-xs   { font-size: 13.5px; line-height: 1.45; }
body.qc .text-sm   { font-size: 15px; line-height: 1.5; }
body.qc .text-base { font-size: 16px; }
body.qc .text-lg   { font-size: 18px; }
body.qc .text-xl   { font-size: 20px; }

/* Заголовки — Druk Wide (как на сайте бренда): заглавные, letter-spacing 0 */
body.qc h1 {
    font-family: var(--dh-display); font-size: 26px; line-height: 1.25; font-weight: 900; letter-spacing: 0; text-transform: uppercase;
}
body.qc h1 .text-red-600, body.qc h1 .text-black { color: var(--dh-brand); }
body.qc h2, body.qc h3 {
    font-family: var(--dh-display); font-weight: 700; letter-spacing: 0; text-transform: uppercase; line-height: 1.4;
}
body.qc h2 { font-size: 15px; }
body.qc h3 { font-size: 13px; }
body.qc h4 { font-family: var(--dh-display); font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: 12px; line-height: 1.4; }
/* Крупные цифры плиток статистики */
body.qc .text-2xl.font-bold, body.qc .text-2xl.font-extrabold, body.qc .text-2xl.font-black,
body.qc .text-3xl.font-bold, body.qc .text-3xl.font-extrabold, body.qc .text-3xl.font-black {
    font-family: var(--dh-display); font-weight: 900; letter-spacing: 0;
}
body.qc .text-2xl { font-size: 24px; line-height: 1.2; }
body.qc .text-3xl { font-size: 30px; line-height: 1.15; }
body.qc .uppercase { letter-spacing: 0.06em; }

/* ---------- нейтральные поверхности, текст, границы ---------- */
body.qc .bg-slate-50, body.qc .hover\:bg-slate-50:hover, body.qc .focus\:bg-slate-50:focus { background-color: var(--dh-surface-2); }
body.qc .bg-slate-50\/60 { background-color: var(--dh-surface-2); }
body.qc .bg-slate-100, body.qc .hover\:bg-slate-100:hover, body.qc .hover\:bg-slate-100\/70:hover { background-color: var(--qc-n100); }
body.qc .bg-slate-200, body.qc .hover\:bg-slate-200:hover { background-color: var(--qc-n200); }
body.qc .hover\:bg-white:hover { background-color: #fff; }
body.qc .bg-slate-900 { background-color: var(--qc-n900); }
/* чёрная кнопка заливается фирменным красным при наведении — как контурные кнопки на сайте бренда */
body.qc .hover\:bg-slate-800:hover { background-color: var(--dh-brand); }
body.qc .bg-slate-900\/50 { background-color: rgba(21, 21, 21, 0.62); }

body.qc .text-slate-300 { color: var(--qc-n300); }
body.qc .text-slate-400 { color: var(--qc-n400); }
body.qc .text-slate-500 { color: var(--qc-n500); }
body.qc .text-slate-600 { color: var(--qc-n600); }
body.qc .text-slate-700, body.qc .hover\:text-slate-700:hover { color: var(--qc-n700); }
body.qc .text-slate-900, body.qc .hover\:text-slate-900:hover { color: var(--qc-n900); }
body.qc .hover\:text-slate-600:hover { color: var(--qc-n600); }

body.qc .border-slate-100 { border-color: var(--dh-line); }
body.qc .border-slate-200 { border-color: var(--dh-line-2); }
body.qc .border-slate-300, body.qc .hover\:border-slate-300:hover { border-color: var(--qc-n300); }
body.qc .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dh-line); }
body.qc ::placeholder { color: var(--qc-n400); opacity: 1; }

/* ---------- фирменный красный (вместо red-*) ---------- */
body.qc .bg-red-600, body.qc .bg-red-500 { background-color: var(--dh-brand); }
body.qc .hover\:bg-red-700:hover, body.qc .hover\:bg-red-600:hover { background-color: var(--dh-brand-hi); }
body.qc .bg-red-50, body.qc .bg-red-50\/40, body.qc .bg-red-50\/60,
body.qc .hover\:bg-red-50:hover, body.qc .hover\:bg-red-50\/40:hover { background-color: var(--dh-brand-soft); }
body.qc .hover\:bg-red-100:hover, body.qc .hover\:bg-red-100\/60:hover { background-color: rgba(255, 35, 10, 0.14); }
body.qc .text-red-600, body.qc .text-red-500, body.qc .text-red-400,
body.qc .hover\:text-red-600:hover, body.qc .group:hover .group-hover\:text-red-600 { color: var(--dh-brand-ink); }
body.qc .border-red-100 { border-color: rgba(255, 35, 10, 0.20); }
body.qc .border-red-200 { border-color: rgba(255, 35, 10, 0.32); }
body.qc .border-red-300, body.qc .hover\:border-red-300:hover { border-color: var(--dh-brand-line); }
body.qc .focus\:border-red-400:focus { border-color: var(--dh-brand); }
body.qc .focus\:ring-red-50:focus, body.qc .focus\:ring-blue-50:focus { --tw-ring-color: rgba(255, 35, 10, 0.16); }
body.qc .shadow-red-600\/20 { --tw-shadow-color: transparent; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; }

/* ---------- статусные цвета: плоские, без пастели (значение всегда дублируется подписью/иконкой) ---------- */
body.qc .bg-emerald-50, body.qc .bg-emerald-50\/40, body.qc .hover\:bg-emerald-50:hover { background-color: var(--dh-ok-soft); }
body.qc .text-emerald-600, body.qc .text-emerald-700 { color: var(--dh-ok-ink); }
body.qc .border-emerald-100, body.qc .border-emerald-200 { border-color: var(--qc-ok-line); }
body.qc .bg-emerald-500 { background-color: #0ca30c; }

body.qc .bg-amber-50, body.qc .bg-amber-50\/60, body.qc .hover\:bg-amber-50:hover { background-color: var(--dh-warn-soft); }
body.qc .text-amber-600, body.qc .text-amber-700, body.qc .group:hover .group-hover\:text-amber-600 { color: var(--dh-warn-ink); }
body.qc .border-amber-100, body.qc .border-amber-200, body.qc .border-amber-300, body.qc .hover\:border-amber-300:hover { border-color: var(--qc-warn-line); }
body.qc .bg-amber-500 { background-color: #f0a500; }

body.qc .bg-blue-50, body.qc .hover\:bg-blue-50:hover { background-color: var(--qc-info-soft); }
body.qc .hover\:bg-blue-100:hover { background-color: rgba(42, 120, 214, 0.18); }
body.qc .text-blue-400, body.qc .text-blue-600, body.qc .text-blue-700, body.qc .group:hover .group-hover\:text-blue-600 { color: var(--qc-info-ink); }
body.qc .border-blue-100, body.qc .border-blue-200, body.qc .border-blue-300, body.qc .hover\:border-blue-300:hover, body.qc .focus\:border-blue-400:focus { border-color: var(--qc-info-line); }
body.qc .bg-blue-500 { background-color: #2a78d6; }

body.qc .bg-indigo-50\/40, body.qc .bg-violet-50 { background-color: var(--qc-violet-soft); }
body.qc .text-indigo-500 { color: var(--qc-violet-ink); }
body.qc .border-indigo-100, body.qc .border-violet-200 { border-color: var(--qc-violet-line); }

/* ---------- углы и тени: прямые углы, плоские поверхности ---------- */
body.qc .rounded, body.qc .rounded-md, body.qc .rounded-lg, body.qc .rounded-xl, body.qc .rounded-2xl { border-radius: 0; }
body.qc .shadow-sm, body.qc .shadow-card, body.qc .shadow-lg, body.qc .shadow-xl, body.qc .hover\:shadow-hover:hover {
    --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;
}
body.qc .shadow-2xl { --tw-shadow: var(--dh-shadow-pop); --tw-shadow-colored: var(--dh-shadow-pop); }
body.qc [class*="hover:-translate-y"]:hover { transform: none; }

/* ---------- каркас страницы ---------- */
body.qc header.sticky, body.qc header[class*="sticky"] {
    background-color: rgba(244, 244, 244, 0.92); border-bottom: 1px solid var(--dh-line); backdrop-filter: blur(8px);
}
body.qc header.sticky > div:first-child, body.qc header[class*="sticky"] > div:first-child { padding-top: 22px; padding-bottom: 20px; }
body.qc main { padding-left: 36px; padding-right: 36px; }
body.qc header .px-6, body.qc header.px-6 { padding-left: 36px; padding-right: 36px; }

/* ---------- плитки статистики: единая панель с тонкими разделителями (как KPI в VIP DATA HUB) ---------- */
body.qc .stat-grid { gap: 0; border-top: 1px solid var(--dh-line-2); border-left: 1px solid var(--dh-line-2); background: var(--dh-surface); }
body.qc .stat-grid > * {
    border-width: 0 1px 1px 0; border-style: solid; border-color: var(--dh-line-2); background: transparent; padding: 18px 18px 20px;
    transition: background-color 0.25s;
}
body.qc .stat-grid > *:hover { background: var(--dh-hover); }
body.qc .stat-grid .uppercase { letter-spacing: 0.02em; }

/* ---------- формы и кнопки ---------- */
body.qc input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.qc select, body.qc textarea {
    font-family: inherit; border-radius: 0;
}
body.qc input:not([type="checkbox"]):not([type="radio"]):focus, body.qc select:focus, body.qc textarea:focus { outline: none; }
body.qc button, body.qc a.rounded-xl, body.qc a.rounded-lg { font-family: inherit; }
body.qc button.bg-red-600, body.qc a.bg-red-600 { font-weight: 700; }
body.qc button:disabled { cursor: not-allowed; }
body.qc input[type="checkbox"], body.qc input[type="radio"] { accent-color: var(--dh-brand); }

/* ---------- таблицы: заголовки — Druk Wide, как в VIP DATA HUB ---------- */
body.qc th {
    font-family: var(--dh-display) !important; font-weight: 700 !important; font-size: 10.5px !important;
    letter-spacing: 0 !important; text-transform: uppercase !important; line-height: 1.5 !important;
}
body.qc table { font-variant-numeric: tabular-nums; }

/* ---------- прочее ---------- */
body.qc ::selection { background: var(--dh-brand); color: #fff; }
body.qc ::-webkit-scrollbar-track { background: transparent; }
body.qc ::-webkit-scrollbar-thumb { background: var(--qc-n200); border-radius: 0; }
body.qc ::-webkit-scrollbar-thumb:hover { background: var(--qc-n400); }
body.qc .modal-panel { border: 1px solid var(--dh-line-2); }
@media (prefers-reduced-motion: reduce) { body.qc * { animation-duration: 0.001ms !important; animation-delay: 0ms !important; } }