/**
 * Схемы цвета, формы и текстуры каталога.
 *
 * Цвет:     data-theme    → teal | azure | navy | ink | noir | volt | pulse | neon | …
 * Форма:    data-shape    → soft | sharp | pill
 * Текстура: data-texture  → none | carbon | diag | dots
 *           (локальные SVG → assets/patterns/)
 *
 * На проде: layout_directory ← admin /settings (дефолты в directory.php).
 * localStorage / theme.js — только для .project/prototypes/.
 */
:root {
  --dir-font-display: "Fraunces", Georgia, serif;
  --dir-font-body: "Outfit", system-ui, sans-serif;

  --dir-accent: #0f766e;
  --dir-accent-dark: #115e59;
  --dir-accent-soft: #ccfbf1;
  --dir-accent-2: #0369a1;

  --dir-surface: #ffffff;
  --dir-surface-2: #f4f7f6;
  --dir-text: #14201e;
  --dir-text-muted: #5b6b67;
  --dir-border: #d7e2df;
  --dir-border-w: 1px;

  --dir-page-bg: #eef3f1;

  /* soft by default — переопределяется data-shape */
  --dir-radius: 18px;
  --dir-radius-sm: 12px;
  --dir-radius-pill: 999px;
  --dir-radius-logo: 20px;

  --dir-shadow: 0 8px 28px rgba(20, 32, 30, 0.07);
  --dir-shadow-hover: 0 16px 40px rgba(20, 32, 30, 0.12);

  --dir-hero-from: #d8f3ef;
  --dir-hero-via: #e8f0f8;
  --dir-hero-to: #f3efe6;
  --dir-hero-gradient: linear-gradient(145deg, var(--dir-hero-from) 0%, var(--dir-hero-via) 52%, var(--dir-hero-to) 100%);

  --dir-footer-bg: #0f1c1a;
  --dir-footer-text: #a8bbb6;

  --dir-star: #d4a017;
  --dir-danger: #c2410c;
  --dir-on-accent: #ffffff;

  /* Текстура страницы (subtle-patterns style) */
  --dir-texture-image: none;
  --dir-texture-size: 120px 120px;
  --dir-texture-opacity: 0;
  --dir-texture-blend: multiply;

  --bs-primary: var(--dir-accent);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--dir-accent);
  --bs-link-hover-color: var(--dir-accent-dark);
  --bs-body-bg: var(--dir-page-bg);
  --bs-body-color: var(--dir-text);
  --bs-secondary-color: var(--dir-text-muted);
  --bs-tertiary-bg: var(--dir-surface-2);
  --bs-secondary-bg: var(--dir-surface-2);
  --bs-border-color: var(--dir-border);
  --bs-emphasis-color: var(--dir-text);
}

/* ——— Форма / скругления ——— */

html[data-shape="soft"] {
  --dir-radius: 18px;
  --dir-radius-sm: 12px;
  --dir-radius-pill: 999px;
  --dir-radius-logo: 20px;
  --dir-border-w: 1px;
}

html[data-shape="sharp"] {
  --dir-radius: 2px;
  --dir-radius-sm: 0;
  --dir-radius-pill: 0;
  --dir-radius-logo: 0;
  --dir-border-w: 1.5px;
  --dir-shadow: 0 2px 0 color-mix(in srgb, var(--dir-text) 8%, transparent);
  --dir-shadow-hover: 0 4px 0 color-mix(in srgb, var(--dir-accent) 35%, transparent);
  --dir-font-display: "Outfit", system-ui, sans-serif;
}

html[data-shape="pill"] {
  --dir-radius: 28px;
  --dir-radius-sm: 18px;
  --dir-radius-pill: 999px;
  --dir-radius-logo: 999px;
  --dir-border-w: 1px;
  --dir-shadow: 0 12px 36px rgba(20, 32, 30, 0.08);
  --dir-shadow-hover: 0 20px 48px rgba(20, 32, 30, 0.14);
}

/* ——— Текстуры (Subtle Patterns–style, локальные SVG) ——— */

html[data-texture="none"] {
  --dir-texture-image: none;
  --dir-texture-opacity: 0;
}

html[data-texture="carbon"] {
  --dir-texture-image: url("../patterns/carbon.svg");
  --dir-texture-size: 16px 16px;
  --dir-texture-opacity: 0.55;
  --dir-texture-blend: soft-light;
}

html[data-texture="diag"] {
  --dir-texture-image: url("../patterns/diag.svg");
  --dir-texture-size: 24px 24px;
  --dir-texture-opacity: 0.4;
  --dir-texture-blend: multiply;
}

html[data-texture="dots"] {
  --dir-texture-image: url("../patterns/dots.svg");
  --dir-texture-size: 12px 12px;
  --dir-texture-opacity: 0.55;
  --dir-texture-blend: multiply;
}

/* На тёмных темах диагональ/точки лучше через soft-light */
html[data-theme="noir"][data-texture="diag"],
html[data-theme="volt"][data-texture="diag"],
html[data-theme="pulse"][data-texture="diag"],
html[data-theme="neon"][data-texture="diag"],
html[data-theme="noir"][data-texture="dots"],
html[data-theme="volt"][data-texture="dots"],
html[data-theme="pulse"][data-texture="dots"],
html[data-theme="neon"][data-texture="dots"] {
  --dir-texture-blend: soft-light;
  --dir-texture-opacity: 0.35;
}

/* ——— Цвета ——— */

html[data-theme="teal"] {
  /* :root defaults */
}

html[data-theme="ink"] {
  --dir-accent: #1e3a5f;
  --dir-accent-dark: #152a45;
  --dir-accent-soft: #e2eaf4;
  --dir-accent-2: #0e7490;
  --dir-page-bg: #eef1f5;
  --dir-surface-2: #f5f7fa;
  --dir-border: #d5dde8;
  --dir-text: #121826;
  --dir-text-muted: #5b6578;
  --dir-hero-from: #dce6f2;
  --dir-hero-via: #e8edf4;
  --dir-hero-to: #f0ebe3;
  --dir-footer-bg: #101826;
  --dir-footer-text: #9aa8bc;
  --bs-primary-rgb: 30, 58, 95;
}

/* Чистый синий — fresher, sky */
html[data-theme="azure"] {
  --dir-accent: #2563eb;
  --dir-accent-dark: #1d4ed8;
  --dir-accent-soft: #dbeafe;
  --dir-accent-2: #0891b2;
  --dir-page-bg: #eef4fb;
  --dir-surface: #ffffff;
  --dir-surface-2: #f3f7fd;
  --dir-text: #0f172a;
  --dir-text-muted: #64748b;
  --dir-border: #cfe0f5;
  --dir-hero-from: #cfe4ff;
  --dir-hero-via: #e0efff;
  --dir-hero-to: #eef6ff;
  --dir-footer-bg: #0b1f3a;
  --dir-footer-text: #9eb6d4;
  --dir-star: #f59e0b;
  --bs-primary-rgb: 37, 99, 235;
}

/* Тёмно-синий navy — чуть плотнее, «деловой» */
html[data-theme="navy"] {
  --dir-accent: #1e3a8a;
  --dir-accent-dark: #172554;
  --dir-accent-soft: #dbe3f8;
  --dir-accent-2: #0369a1;
  --dir-page-bg: #e8edf6;
  --dir-surface: #f8fafc;
  --dir-surface-2: #eef2f8;
  --dir-text: #0b1220;
  --dir-text-muted: #4b5872;
  --dir-border: #c5d0e4;
  --dir-hero-from: #c5d4ef;
  --dir-hero-via: #d5dff0;
  --dir-hero-to: #e8e4d8;
  --dir-footer-bg: #0a1224;
  --dir-footer-text: #8fa0bf;
  --dir-star: #ca8a04;
  --bs-primary-rgb: 30, 58, 138;
}

/* Чёрный / nearly dark UI */
html[data-theme="noir"] {
  --dir-accent: #e8e8e8;
  --dir-accent-dark: #ffffff;
  --dir-accent-soft: #2a2a2a;
  --dir-accent-2: #94a3b8;
  --dir-on-accent: #0a0a0a;
  --dir-page-bg: #0c0c0c;
  --dir-surface: #161616;
  --dir-surface-2: #1e1e1e;
  --dir-text: #f4f4f5;
  --dir-text-muted: #a1a1aa;
  --dir-border: #2e2e32;
  --dir-hero-from: #1a1a1a;
  --dir-hero-via: #141414;
  --dir-hero-to: #0f0f12;
  --dir-footer-bg: #050505;
  --dir-footer-text: #71717a;
  --dir-star: #fbbf24;
  --dir-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --dir-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.55);
  --bs-primary-rgb: 232, 232, 232;
}

/* Агрессивный: чёрный + жёлтый/оранжевый */
html[data-theme="volt"] {
  --dir-accent: #f5a524;
  --dir-accent-dark: #ea580c;
  --dir-accent-soft: #3a2a12;
  --dir-accent-2: #fb923c;
  --dir-on-accent: #120c04;
  --dir-page-bg: #0a0a0a;
  --dir-surface: #141414;
  --dir-surface-2: #1c1c1c;
  --dir-text: #fff7e8;
  --dir-text-muted: #b5a48a;
  --dir-border: #3a3224;
  --dir-hero-from: #1a1408;
  --dir-hero-via: #12100a;
  --dir-hero-to: #0c0c0c;
  --dir-footer-bg: #050505;
  --dir-footer-text: #8a7a62;
  --dir-star: #fbbf24;
  --dir-shadow: 0 0 0 1px rgba(245, 165, 36, 0.08), 0 12px 32px rgba(0, 0, 0, 0.55);
  --dir-shadow-hover: 0 0 24px rgba(245, 165, 36, 0.22), 0 16px 40px rgba(0, 0, 0, 0.6);
  --bs-primary-rgb: 245, 165, 36;
}

/* Агрессивный: фитнес — чёрный + красный */
html[data-theme="pulse"] {
  --dir-accent: #ef4444;
  --dir-accent-dark: #dc2626;
  --dir-accent-soft: #3a1212;
  --dir-accent-2: #f97316;
  --dir-on-accent: #fff;
  --dir-page-bg: #090909;
  --dir-surface: #121212;
  --dir-surface-2: #1a1a1a;
  --dir-text: #fafafa;
  --dir-text-muted: #a3a3a3;
  --dir-border: #3f1f1f;
  --dir-hero-from: #2a0c0c;
  --dir-hero-via: #140808;
  --dir-hero-to: #0a0a0a;
  --dir-footer-bg: #050505;
  --dir-footer-text: #8f6f6f;
  --dir-star: #fbbf24;
  --dir-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --dir-shadow-hover: 0 0 28px rgba(239, 68, 68, 0.25), 0 16px 40px rgba(0, 0, 0, 0.55);
  --bs-primary-rgb: 239, 68, 68;
}

/* Агрессивный: неон — чёрный + лайм/циан (nightlife / e-sport) */
html[data-theme="neon"] {
  --dir-accent: #a3e635;
  --dir-accent-dark: #84cc16;
  --dir-accent-soft: #1a2a12;
  --dir-accent-2: #22d3ee;
  --dir-on-accent: #0a1204;
  --dir-page-bg: #05070a;
  --dir-surface: #0c1016;
  --dir-surface-2: #121820;
  --dir-text: #ecfccb;
  --dir-text-muted: #86a8a0;
  --dir-border: #1f3a32;
  --dir-hero-from: #0a1a14;
  --dir-hero-via: #061018;
  --dir-hero-to: #05070a;
  --dir-footer-bg: #020406;
  --dir-footer-text: #5f7a72;
  --dir-star: #bef264;
  --dir-shadow: 0 0 0 1px rgba(163, 230, 53, 0.1), 0 12px 32px rgba(0, 0, 0, 0.55);
  --dir-shadow-hover: 0 0 28px rgba(34, 211, 238, 0.22), 0 16px 40px rgba(0, 0, 0, 0.6);
  --bs-primary-rgb: 163, 230, 53;
}

html[data-theme="rose"] {
  --dir-accent: #be3a6f;
  --dir-accent-dark: #9d2f5a;
  --dir-accent-soft: #fce8f0;
  --dir-accent-2: #7c3aed;
  --dir-page-bg: #f7f0f3;
  --dir-surface-2: #fbf6f8;
  --dir-border: #ead5de;
  --dir-hero-from: #f8e4ec;
  --dir-hero-via: #efe8f8;
  --dir-hero-to: #f7efe6;
  --dir-footer-bg: #2a1520;
  --bs-primary-rgb: 190, 58, 111;
}

html[data-theme="sand"] {
  --dir-accent: #b45309;
  --dir-accent-dark: #92400e;
  --dir-accent-soft: #fef3c7;
  --dir-accent-2: #0f766e;
  --dir-page-bg: #f5efe4;
  --dir-surface-2: #faf6ee;
  --dir-border: #e5d9c5;
  --dir-text: #1c1917;
  --dir-text-muted: #78716c;
  --dir-hero-from: #f3e7cf;
  --dir-hero-via: #efe8dc;
  --dir-hero-to: #e7efe9;
  --dir-footer-bg: #1c1410;
  --bs-primary-rgb: 180, 83, 9;
}

html[data-theme="violet"] {
  --dir-accent: #6d28d9;
  --dir-accent-dark: #5b21b6;
  --dir-accent-soft: #ede9fe;
  --dir-accent-2: #db2777;
  --dir-page-bg: #f3f0fa;
  --dir-surface-2: #f8f6fc;
  --dir-border: #ddd6fe;
  --dir-hero-from: #e9e2ff;
  --dir-hero-via: #f3e8ff;
  --dir-hero-to: #fff1e8;
  --dir-footer-bg: #1a1028;
  --bs-primary-rgb: 109, 40, 217;
}

html[data-theme="custom"] {
  --dir-accent: #2a6f6f;
  --dir-accent-dark: #1f5555;
  --dir-accent-soft: #d7ecec;
  --dir-accent-2: #c45c26;
  --dir-page-bg: #eef4f2;
  --dir-hero-from: #d9ebe8;
  --dir-hero-via: #e8efe6;
  --dir-hero-to: #f2e9df;
  --bs-primary-rgb: 42, 111, 111;
}

/* ——— Vertical packs (из tmp/themes) ——— */

html[data-theme="blush"] {
  --dir-accent: #db2777;
  --dir-accent-dark: #be185d;
  --dir-accent-soft: #fce7f3;
  --dir-accent-2: #a855f7;
  --dir-page-bg: #fdf2f8;
  --dir-surface-2: #fff7fb;
  --dir-border: #f5d0e4;
  --dir-hero-from: #fce7f3;
  --dir-hero-via: #fae8ff;
  --dir-hero-to: #fff1f2;
  --dir-footer-bg: #4a044e;
  --bs-primary-rgb: 219, 39, 119;
}

html[data-theme="coffee"] {
  --dir-accent: #92400e;
  --dir-accent-dark: #78350f;
  --dir-accent-soft: #fef3c7;
  --dir-accent-2: #b45309;
  --dir-page-bg: #f5efe6;
  --dir-surface: #fffaf3;
  --dir-surface-2: #f7f0e6;
  --dir-text: #1c1410;
  --dir-text-muted: #78716c;
  --dir-border: #e7d8c4;
  --dir-hero-from: #f3e0c4;
  --dir-hero-via: #efe6d6;
  --dir-hero-to: #e8efe6;
  --dir-footer-bg: #1c1410;
  --dir-footer-text: #c4b5a0;
  --bs-primary-rgb: 146, 64, 14;
}

html[data-theme="kids"] {
  --dir-accent: #ea580c;
  --dir-accent-dark: #c2410c;
  --dir-accent-soft: #ffedd5;
  --dir-accent-2: #2563eb;
  --dir-page-bg: #fff7ed;
  --dir-surface-2: #fffbeb;
  --dir-border: #fed7aa;
  --dir-hero-from: #fdba74;
  --dir-hero-via: #fde68a;
  --dir-hero-to: #bfdbfe;
  --dir-footer-bg: #7c2d12;
  --bs-primary-rgb: 234, 88, 12;
}

html[data-theme="garage"] {
  --dir-accent: #f5a524;
  --dir-accent-dark: #d97706;
  --dir-accent-soft: #3a2a12;
  --dir-accent-2: #fb923c;
  --dir-on-accent: #120c04;
  --dir-page-bg: #12100c;
  --dir-surface: #1c1812;
  --dir-surface-2: #241e16;
  --dir-text: #f5f0e6;
  --dir-text-muted: #b5a48a;
  --dir-border: #3a3224;
  --dir-hero-from: #1a1408;
  --dir-hero-via: #12100a;
  --dir-hero-to: #0c0c0c;
  --dir-footer-bg: #050505;
  --dir-footer-text: #8a7a62;
  --dir-star: #fbbf24;
  --dir-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --bs-primary-rgb: 245, 165, 36;
}

html[data-theme="steel"] {
  --dir-accent: #64748b;
  --dir-accent-dark: #475569;
  --dir-accent-soft: #e2e8f0;
  --dir-accent-2: #0ea5e9;
  --dir-page-bg: #eef2f6;
  --dir-surface: #f8fafc;
  --dir-surface-2: #f1f5f9;
  --dir-text: #0f172a;
  --dir-text-muted: #64748b;
  --dir-border: #cbd5e1;
  --dir-hero-from: #dbe4ef;
  --dir-hero-via: #e8eef5;
  --dir-hero-to: #f1f5f9;
  --dir-footer-bg: #0f172a;
  --dir-footer-text: #94a3b8;
  --bs-primary-rgb: 100, 116, 139;
}

html[data-theme="copper"] {
  --dir-accent: #c2410c;
  --dir-accent-dark: #9a3412;
  --dir-accent-soft: #3b2418;
  --dir-accent-2: #ea580c;
  --dir-on-accent: #fff7ed;
  --dir-page-bg: #1a120e;
  --dir-surface: #241812;
  --dir-surface-2: #2c1e16;
  --dir-text: #fff7ed;
  --dir-text-muted: #d6b8a0;
  --dir-border: #4a3224;
  --dir-hero-from: #2a1810;
  --dir-hero-via: #1c120e;
  --dir-hero-to: #120c0a;
  --dir-footer-bg: #0a0604;
  --dir-footer-text: #a87860;
  --bs-primary-rgb: 194, 65, 12;
}

html[data-theme="safety"] {
  --dir-accent: #eab308;
  --dir-accent-dark: #ca8a04;
  --dir-accent-soft: #3a3212;
  --dir-accent-2: #facc15;
  --dir-on-accent: #1c1404;
  --dir-page-bg: #14140e;
  --dir-surface: #1c1c14;
  --dir-surface-2: #24241a;
  --dir-text: #fefce8;
  --dir-text-muted: #c4b89a;
  --dir-border: #3f3a22;
  --dir-hero-from: #2a2410;
  --dir-hero-via: #1a180c;
  --dir-hero-to: #10100a;
  --dir-footer-bg: #080806;
  --dir-footer-text: #a89a6a;
  --bs-primary-rgb: 234, 179, 8;
}

html[data-theme="volt-dark"] {
  --dir-accent: #a3e635;
  --dir-accent-dark: #84cc16;
  --dir-accent-soft: #1a2a12;
  --dir-accent-2: #22d3ee;
  --dir-on-accent: #0a1204;
  --dir-page-bg: #05070a;
  --dir-surface: #0c1016;
  --dir-surface-2: #121820;
  --dir-text: #ecfccb;
  --dir-text-muted: #86a8a0;
  --dir-border: #1f3a32;
  --dir-hero-from: #0a1a14;
  --dir-hero-via: #061018;
  --dir-hero-to: #05070a;
  --dir-footer-bg: #020406;
  --dir-footer-text: #5f7a72;
  --dir-star: #bef264;
  --bs-primary-rgb: 163, 230, 53;
}

html[data-theme="garage"][data-texture="carbon"],
html[data-theme="copper"][data-texture="carbon"],
html[data-theme="safety"][data-texture="carbon"],
html[data-theme="volt-dark"][data-texture="carbon"],
html[data-theme="garage"][data-texture="diag"],
html[data-theme="copper"][data-texture="diag"],
html[data-theme="safety"][data-texture="diag"],
html[data-theme="volt-dark"][data-texture="diag"] {
  --dir-texture-blend: soft-light;
  --dir-texture-opacity: 0.35;
}

/* ——— Привязка UI к токенам темы ——— */

body {
  background-color: var(--dir-page-bg);
  color: var(--dir-text);
  font-family: var(--dir-font-body);
}

/* Текстура страницы поверх фона */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--dir-texture-image);
  background-size: var(--dir-texture-size);
  background-repeat: repeat;
  opacity: var(--dir-texture-opacity);
  mix-blend-mode: var(--dir-texture-blend);
}

/* Акцент для обычных ссылок; кнопки/шеллы инженера и поля задают цвет сами */
a:not(.btn):not(.lp-btn):not(.eng-btn):not(.eng-nav-link):not(.field-btn):not(.field-navbtn):not(.field-tab):not(.field-object):not(.field-listrow):not(.field-back):not(.field-scan-big):not(.field-iconbtn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: var(--dir-accent);
}

a:not(.btn):not(.eng-btn):not(.eng-nav-link):not(.field-btn):not(.field-navbtn):not(.field-tab):not(.field-object):not(.field-listrow):not(.field-back):not(.field-scan-big):not(.field-iconbtn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
  color: var(--dir-accent-dark);
}

/* Тёмный сайдбар инженера — не перекрашивать в --dir-accent */
.eng-side .eng-nav a.eng-nav-link,
.eng-side .eng-nav a.eng-nav-link:visited {
  color: #c5d3e0;
}

.eng-side .eng-nav a.eng-nav-link:hover,
.eng-side .eng-nav a.eng-nav-link.active {
  color: #fff;
}

a.eng-btn-primary,
.eng-btn-primary {
  color: var(--dir-on-accent, #fff);
}

a.eng-btn-primary:hover,
.eng-btn-primary:hover {
  color: var(--dir-on-accent, #fff);
}

a.eng-btn-sec,
.eng-btn-sec {
  color: var(--dir-text, #152033);
}

a.eng-btn-sec:hover,
.eng-btn-sec:hover {
  color: var(--dir-text, #152033);
}

/* Primary + Dark (в шаблонах везде btn-dark) → акцент темы */
.btn-primary,
.btn-dark {
  --bs-btn-color: var(--dir-on-accent);
  --bs-btn-bg: var(--dir-accent);
  --bs-btn-border-color: var(--dir-accent);
  --bs-btn-hover-color: var(--dir-on-accent);
  --bs-btn-hover-bg: var(--dir-accent-dark);
  --bs-btn-hover-border-color: var(--dir-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--dir-on-accent);
  --bs-btn-active-bg: var(--dir-accent-dark);
  --bs-btn-active-border-color: var(--dir-accent-dark);
  --bs-btn-disabled-color: var(--dir-on-accent);
  --bs-btn-disabled-bg: var(--dir-accent);
  --bs-btn-disabled-border-color: var(--dir-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--dir-accent);
  --bs-btn-border-color: var(--dir-accent);
  --bs-btn-hover-color: var(--dir-on-accent);
  --bs-btn-hover-bg: var(--dir-accent);
  --bs-btn-hover-border-color: var(--dir-accent);
  --bs-btn-active-color: var(--dir-on-accent);
  --bs-btn-active-bg: var(--dir-accent-dark);
  --bs-btn-active-border-color: var(--dir-accent-dark);
  --bs-btn-disabled-color: var(--dir-accent);
  --bs-btn-disabled-border-color: var(--dir-accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--dir-accent) 55%, var(--dir-border));
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--dir-accent) 20%, transparent);
}

.form-check-input:checked {
  background-color: var(--dir-accent);
  border-color: var(--dir-accent);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--dir-accent);
  color: var(--dir-on-accent);
}

/* Навбар в цвете акцента темы */
.app-navbar {
  background-color: var(--dir-accent) !important;
  border-bottom-color: color-mix(in srgb, var(--dir-accent-dark) 55%, transparent) !important;
  color: var(--dir-on-accent);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .btn-link {
  color: var(--dir-on-accent) !important;
}

.app-navbar .nav-link,
.app-navbar .app-navbar-muted {
  color: color-mix(in srgb, var(--dir-on-accent) 72%, transparent) !important;
}

.app-navbar .nav-link:hover,
.app-navbar .btn-link:hover,
.app-navbar .app-navbar-muted:hover {
  color: var(--dir-on-accent) !important;
}

.app-navbar .btn-outline-light,
.app-navbar .btn-outline-on-accent {
  --bs-btn-color: var(--dir-on-accent);
  --bs-btn-border-color: color-mix(in srgb, var(--dir-on-accent) 70%, transparent);
  --bs-btn-hover-color: var(--dir-accent);
  --bs-btn-hover-bg: var(--dir-on-accent);
  --bs-btn-hover-border-color: var(--dir-on-accent);
  --bs-btn-active-color: var(--dir-accent);
  --bs-btn-active-bg: var(--dir-on-accent);
  --bs-btn-active-border-color: var(--dir-on-accent);
}

/* Навбар: принудительно тёмный или светлый (directory.navbar_chrome) */
html[data-navbar-chrome="dark"] .app-navbar {
  background-color: var(--dir-footer-bg) !important;
  border-bottom-color: color-mix(in srgb, var(--dir-footer-text) 35%, transparent) !important;
  color: #fff;
}

html[data-navbar-chrome="dark"] .app-navbar .navbar-brand,
html[data-navbar-chrome="dark"] .app-navbar .nav-link,
html[data-navbar-chrome="dark"] .app-navbar .btn-link {
  color: #fff !important;
}

html[data-navbar-chrome="dark"] .app-navbar .nav-link,
html[data-navbar-chrome="dark"] .app-navbar .app-navbar-muted {
  color: var(--dir-footer-text) !important;
}

html[data-navbar-chrome="dark"] .app-navbar .nav-link:hover,
html[data-navbar-chrome="dark"] .app-navbar .btn-link:hover,
html[data-navbar-chrome="dark"] .app-navbar .app-navbar-muted:hover {
  color: #fff !important;
}

html[data-navbar-chrome="light"] .app-navbar {
  background-color: var(--dir-surface) !important;
  border-bottom-color: var(--dir-border) !important;
  color: var(--dir-text);
}

html[data-navbar-chrome="light"] .app-navbar .navbar-brand,
html[data-navbar-chrome="light"] .app-navbar .nav-link,
html[data-navbar-chrome="light"] .app-navbar .btn-link {
  color: var(--dir-text) !important;
}

html[data-navbar-chrome="light"] .app-navbar .nav-link,
html[data-navbar-chrome="light"] .app-navbar .app-navbar-muted {
  color: var(--dir-text-muted) !important;
}

html[data-navbar-chrome="light"] .app-navbar .nav-link:hover,
html[data-navbar-chrome="light"] .app-navbar .btn-link:hover,
html[data-navbar-chrome="light"] .app-navbar .app-navbar-muted:hover {
  color: var(--dir-text) !important;
}

/* Bootstrap «белый/серый» → поверхности темы (иначе тёмные темы ломают контраст) */
.bg-white {
  background-color: var(--dir-surface) !important;
  color: var(--dir-text);
}

.bg-light,
.bg-body-secondary,
.bg-body-tertiary,
.bg-light-subtle {
  background-color: var(--dir-surface-2) !important;
  color: var(--dir-text);
}

.bg-body {
  background-color: var(--dir-page-bg) !important;
  color: var(--dir-text);
}

.text-body,
.text-dark {
  color: var(--dir-text) !important;
}

.text-muted,
.text-body-secondary,
.text-secondary,
.link-secondary {
  color: var(--dir-text-muted) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--dir-border) !important;
}

.app-sidebar {
  background-color: var(--dir-surface) !important;
  color: var(--dir-text);
  border-color: var(--dir-border) !important;
}

.app-sidebar .nav-link,
.app-sidebar .btn-link,
.app-sidebar .offcanvas-title {
  color: var(--dir-text);
}

.app-sidebar .text-body {
  color: var(--dir-text) !important;
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--dir-surface);
  border-color: var(--dir-border);
  color: var(--dir-text);
}

.form-control::placeholder {
  color: var(--dir-text-muted);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--dir-surface-2);
  color: var(--dir-text-muted);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--dir-surface);
  color: var(--dir-text);
}

/* file input — единый вид на светлых и тёмных темах */
.form-control[type="file"] {
  padding: 0.375rem 0.75rem;
  color: var(--dir-text-muted);
  background-color: var(--dir-surface);
  border-color: var(--dir-border);
  color-scheme: light dark;
}

.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button {
  margin-right: 0.75rem;
  margin-inline-end: 0.75rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--dir-accent-dark) 35%, transparent) !important;
  border-radius: var(--dir-radius-sm, 0.375rem);
  background-color: var(--dir-accent) !important;
  color: var(--dir-on-accent) !important;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button,
.form-control[type="file"]:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--dir-accent-dark) !important;
  border-color: color-mix(in srgb, var(--dir-accent-dark) 55%, transparent) !important;
  color: var(--dir-on-accent) !important;
}

.form-control[type="file"]:focus::file-selector-button,
.form-control[type="file"]:focus::-webkit-file-upload-button {
  background-color: var(--dir-accent-dark) !important;
  color: var(--dir-on-accent) !important;
}

.form-control[type="file"]:disabled::file-selector-button,
.form-control[type="file"]:disabled::-webkit-file-upload-button {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-control-color {
  width: 3rem;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.25rem;
}

.table {
  --bs-table-color: var(--dir-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--dir-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--dir-text) 4%, var(--dir-surface));
  --bs-table-striped-color: var(--dir-text);
  --bs-table-hover-bg: color-mix(in srgb, var(--dir-accent) 8%, var(--dir-surface));
  --bs-table-hover-color: var(--dir-text);
  --bs-table-active-bg: color-mix(in srgb, var(--dir-accent) 12%, var(--dir-surface));
  --bs-table-active-color: var(--dir-text);
  color: var(--dir-text);
  border-color: var(--dir-border);
}

.list-group-item {
  background-color: var(--dir-surface);
  color: var(--dir-text);
  border-color: var(--dir-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--dir-surface-2);
  color: var(--dir-text);
}

.nav-tabs {
  border-bottom-color: var(--dir-border);
}

.nav-tabs .nav-link {
  color: var(--dir-text-muted);
}

.nav-tabs .nav-link:hover {
  border-color: var(--dir-border);
  color: var(--dir-text);
}

.nav-tabs .nav-link.active {
  background-color: var(--dir-surface);
  border-color: var(--dir-border) var(--dir-border) var(--dir-surface);
  color: var(--dir-text);
}

.nav-link {
  color: var(--dir-text-muted);
}

.dropdown-menu {
  background-color: var(--dir-surface);
  border-color: var(--dir-border);
  color: var(--dir-text);
}

.dropdown-item {
  color: var(--dir-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dir-surface-2);
  color: var(--dir-text);
}

.dropdown-divider {
  border-top-color: var(--dir-border);
}

.accordion-item {
  background-color: var(--dir-surface);
  border-color: var(--dir-border);
  color: var(--dir-text);
}

.accordion-button {
  background-color: var(--dir-surface);
  color: var(--dir-text);
}

.accordion-button:not(.collapsed) {
  background-color: var(--dir-surface-2);
  color: var(--dir-text);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width, 1px)) 0 var(--dir-border);
}

.accordion-button::after {
  filter: none;
  opacity: 0.75;
}

.accordion-body {
  background-color: var(--dir-surface);
  color: var(--dir-text);
}

.modal-content {
  background-color: var(--dir-surface);
  color: var(--dir-text);
  border-color: var(--dir-border);
}

.modal-header,
.modal-footer {
  border-color: var(--dir-border);
}

.card {
  background-color: var(--dir-surface);
  color: var(--dir-text);
  border-color: var(--dir-border);
}

.text-bg-light {
  background-color: var(--dir-surface-2) !important;
  color: var(--dir-text) !important;
}

.offcanvas {
  background-color: var(--dir-surface);
  color: var(--dir-text);
  border-color: var(--dir-border);
}

.offcanvas-header {
  border-color: var(--dir-border);
}

.pagination {
  --bs-pagination-color: var(--dir-text);
  --bs-pagination-bg: var(--dir-surface);
  --bs-pagination-border-color: var(--dir-border);
  --bs-pagination-hover-color: var(--dir-text);
  --bs-pagination-hover-bg: var(--dir-surface-2);
  --bs-pagination-hover-border-color: var(--dir-border);
  --bs-pagination-focus-color: var(--dir-text);
  --bs-pagination-focus-bg: var(--dir-surface-2);
  --bs-pagination-active-color: var(--dir-on-accent);
  --bs-pagination-active-bg: var(--dir-accent);
  --bs-pagination-active-border-color: var(--dir-accent);
  --bs-pagination-disabled-color: var(--dir-text-muted);
  --bs-pagination-disabled-bg: var(--dir-surface-2);
  --bs-pagination-disabled-border-color: var(--dir-border);
}

.btn-outline-secondary {
  --bs-btn-color: var(--dir-text-muted);
  --bs-btn-border-color: var(--dir-border);
  --bs-btn-hover-color: var(--dir-text);
  --bs-btn-hover-bg: var(--dir-surface-2);
  --bs-btn-hover-border-color: var(--dir-border);
  --bs-btn-active-color: var(--dir-text);
  --bs-btn-active-bg: var(--dir-surface-2);
  --bs-btn-active-border-color: var(--dir-border);
}

/* Кнопки в flex-шапках карточек: не растягивать и не ломать padding */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.25;
}

a.btn:hover,
a.btn:focus-visible {
  text-decoration: none;
}

.btn-sm {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.75rem;
  min-height: 2rem;
}

.card-page-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.card-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.d-flex.justify-content-between > .btn,
.d-flex.justify-content-between > a.btn,
.d-flex.justify-content-between > form,
.d-flex.justify-content-between > .btn-group,
.d-flex.justify-content-between > .card-page-actions {
  align-self: flex-start;
  flex-shrink: 0;
}

.d-flex.align-items-center > .btn,
.d-flex.align-items-center > a.btn {
  align-self: center;
}

code {
  color: color-mix(in srgb, var(--dir-accent) 70%, var(--dir-text));
}

/* Нативные контролы / скроллбары под тёмную палитру */
html[data-theme="noir"],
html[data-theme="volt"],
html[data-theme="pulse"],
html[data-theme="neon"],
html[data-theme="garage"],
html[data-theme="copper"],
html[data-theme="safety"],
html[data-theme="volt-dark"] {
  color-scheme: dark;
}