/* =========================================================================
   BLG-PLATFORM: MODULAR THEME ENGINE & RELATIONSHIPS SYSTEM
   Each module possesses its own scoped color tokens, contrast rules & styles.
   ========================================================================= */

/* Root tokens for modular architecture */
:root {
  --mod-radius: 14px;
  --mod-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base module container styling */
[data-module] {
  width: 100%;
  min-height: 100%;
  transition: var(--mod-transition);
}

/* =========================================================================
   1. MODULE TOP BANNER (Header, Relations Strip, Theme Controls)
   ========================================================================= */
.mod-header-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
  padding: 16px 20px;
  background: var(--mod-card-bg, var(--glass-bg));
  border: 1px solid var(--mod-card-border, var(--glass-border));
  border-radius: var(--mod-radius);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.mod-header-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mod-accent, #3b82f6), transparent 70%);
}

.mod-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mod-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mod-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--mod-accent-bg, rgba(59, 130, 246, 0.15));
  border: 1px solid var(--mod-accent-glow, rgba(59, 130, 246, 0.3));
  color: var(--mod-accent, #3b82f6);
  flex-shrink: 0;
}

.mod-title-text h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--mod-text, var(--text));
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mod-title-text p {
  font-size: 12px;
  color: var(--mod-text-muted, var(--text-muted));
  margin: 2px 0 0 0;
}

/* Controls Toolbar */
.mod-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mod-color-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--mod-text, var(--text));
  cursor: pointer;
  transition: var(--mod-transition);
}

.mod-color-ctrl-btn:hover {
  background: var(--glass-bg-hover);
  border-color: var(--mod-accent, #3b82f6);
  transform: translateY(-1px);
}

.mod-palette-popover {
  position: absolute;
  top: 100%; right: 20px;
  margin-top: 8px;
  z-index: 1000;
  background: rgba(18, 24, 40, 0.95);
  border: 1px solid var(--glass-border-strong);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  width: 290px;
  display: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-theme="light"] .mod-palette-popover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.mod-palette-popover.open {
  display: block;
  animation: modalSlideIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mod-pop-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mod-palette-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.mod-palette-chip {
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.mod-palette-chip:hover {
  transform: scale(1.08);
}

.mod-palette-chip.active {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
}

body[data-theme="light"] .mod-palette-chip.active {
  border-color: #0f172a;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Relationship strip */
.mod-rel-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--glass-border);
}

.mod-rel-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mod-text-muted, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mod-rel-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mod-rel-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--mod-accent-bg, rgba(59, 130, 246, 0.10));
  border: 1px solid var(--mod-accent-glow, rgba(59, 130, 246, 0.22));
  color: var(--mod-accent, #3b82f6);
  text-decoration: none;
  cursor: pointer;
  transition: var(--mod-transition);
}

.mod-rel-pill:hover {
  background: var(--mod-accent, #3b82f6);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   2. SCOPED PALETTES BY MODULE KEY
   ========================================================================= */

/* 1. Личный кабинет (Cabinet) - Platinum Royal Slate */
[data-module="cabinet"] {
  --mod-accent: #3b82f6;
  --mod-accent-light: #60a5fa;
  --mod-accent-glow: rgba(59, 130, 246, 0.35);
  --mod-accent-bg: rgba(59, 130, 246, 0.15);
  --mod-card-bg: rgba(26, 35, 60, 0.70);
  --mod-card-border: rgba(59, 130, 246, 0.22);
  --mod-text: #ffffff;
  --mod-text-muted: #cbd5e1;
}
body[data-theme="light"] [data-module="cabinet"] {
  --mod-accent: #1d4ed8;
  --mod-accent-light: #2563eb;
  --mod-accent-glow: rgba(29, 78, 216, 0.25);
  --mod-accent-bg: rgba(29, 78, 216, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(29, 78, 216, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #334155;
}

/* 2. Аналитические дашборды (Dashboards) - Neon Sky & Violet */
[data-module="dashboards"] {
  --mod-accent: #6366f1;
  --mod-accent-light: #818cf8;
  --mod-accent-glow: rgba(99, 102, 241, 0.35);
  --mod-accent-bg: rgba(99, 102, 241, 0.15);
  --mod-card-bg: rgba(30, 27, 75, 0.70);
  --mod-card-border: rgba(99, 102, 241, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #e0e7ff;
}
body[data-theme="light"] [data-module="dashboards"] {
  --mod-accent: #4338ca;
  --mod-accent-light: #4f46e5;
  --mod-accent-glow: rgba(67, 56, 202, 0.25);
  --mod-accent-bg: rgba(67, 56, 202, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(67, 56, 202, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #334155;
}

/* 3. Документооборот (Documents) - Deep Sapphire & Electric Cyan */
[data-module="documents"] {
  --mod-accent: #0284c7;
  --mod-accent-light: #38bdf8;
  --mod-accent-glow: rgba(2, 132, 199, 0.35);
  --mod-accent-bg: rgba(2, 132, 199, 0.15);
  --mod-card-bg: rgba(12, 38, 64, 0.70);
  --mod-card-border: rgba(2, 132, 199, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #bae6fd;
}
body[data-theme="light"] [data-module="documents"] {
  --mod-accent: #0369a1;
  --mod-accent-light: #0284c7;
  --mod-accent-glow: rgba(3, 105, 161, 0.25);
  --mod-accent-bg: rgba(3, 105, 161, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(3, 105, 161, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #334155;
}

/* 4. Платежи и казначейство (Payments) - Emerald Mint */
[data-module="payments"] {
  --mod-accent: #10b981;
  --mod-accent-light: #34d399;
  --mod-accent-glow: rgba(16, 185, 129, 0.35);
  --mod-accent-bg: rgba(16, 185, 129, 0.15);
  --mod-card-bg: rgba(6, 44, 30, 0.70);
  --mod-card-border: rgba(16, 185, 129, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #a7f3d0;
}
body[data-theme="light"] [data-module="payments"] {
  --mod-accent: #047857;
  --mod-accent-light: #059669;
  --mod-accent-glow: rgba(4, 120, 87, 0.25);
  --mod-accent-bg: rgba(4, 120, 87, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(4, 120, 87, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #1e3a2f;
}

/* 5. Маршруты согласования BPM (Approvals) - Amber Gold */
[data-module="approvals"] {
  --mod-accent: #f59e0b;
  --mod-accent-light: #fbbf24;
  --mod-accent-glow: rgba(245, 158, 11, 0.35);
  --mod-accent-bg: rgba(245, 158, 11, 0.15);
  --mod-card-bg: rgba(48, 30, 8, 0.70);
  --mod-card-border: rgba(245, 158, 11, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #fde68a;
}
body[data-theme="light"] [data-module="approvals"] {
  --mod-accent: #b45309;
  --mod-accent-light: #d97706;
  --mod-accent-glow: rgba(180, 83, 9, 0.25);
  --mod-accent-bg: rgba(180, 83, 9, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(180, 83, 9, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #451a03;
}

/* 6. Поручения (Tasks) - Azure Sky */
[data-module="tasks"] {
  --mod-accent: #0ea5e9;
  --mod-accent-light: #38bdf8;
  --mod-accent-glow: rgba(14, 165, 233, 0.35);
  --mod-accent-bg: rgba(14, 165, 233, 0.15);
  --mod-card-bg: rgba(15, 34, 54, 0.70);
  --mod-card-border: rgba(14, 165, 233, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #bae6fd;
}
body[data-theme="light"] [data-module="tasks"] {
  --mod-accent: #0284c7;
  --mod-accent-light: #0ea5e9;
  --mod-accent-glow: rgba(2, 132, 199, 0.25);
  --mod-accent-bg: rgba(2, 132, 199, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(2, 132, 199, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #0c4a6e;
}

/* 7. Чат и сообщения (Messaging) - Electric Violet */
[data-module="messaging"] {
  --mod-accent: #8b5cf6;
  --mod-accent-light: #a78bfa;
  --mod-accent-glow: rgba(139, 92, 246, 0.35);
  --mod-accent-bg: rgba(139, 92, 246, 0.15);
  --mod-card-bg: rgba(35, 18, 58, 0.70);
  --mod-card-border: rgba(139, 92, 246, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #ddd6fe;
}
body[data-theme="light"] [data-module="messaging"] {
  --mod-accent: #6d28d9;
  --mod-accent-light: #7c3aed;
  --mod-accent-glow: rgba(109, 40, 217, 0.25);
  --mod-accent-bg: rgba(109, 40, 217, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(109, 40, 217, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #4c1d95;
}

/* 8. CRM и сделки (CRM) - Sunset Orange / Amber */
[data-module="crm"] {
  --mod-accent: #f97316;
  --mod-accent-light: #fb923c;
  --mod-accent-glow: rgba(249, 115, 22, 0.35);
  --mod-accent-bg: rgba(249, 115, 22, 0.15);
  --mod-card-bg: rgba(48, 24, 10, 0.70);
  --mod-card-border: rgba(249, 115, 22, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #fed7aa;
}
body[data-theme="light"] [data-module="crm"] {
  --mod-accent: #c2410c;
  --mod-accent-light: #ea580c;
  --mod-accent-glow: rgba(194, 65, 12, 0.25);
  --mod-accent-bg: rgba(194, 65, 12, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(194, 65, 12, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #431407;
}

/* 9. Оргструктура (Org) - Teal Jade */
[data-module="org"] {
  --mod-accent: #14b8a6;
  --mod-accent-light: #2dd4bf;
  --mod-accent-glow: rgba(20, 184, 166, 0.35);
  --mod-accent-bg: rgba(20, 184, 166, 0.15);
  --mod-card-bg: rgba(10, 38, 35, 0.70);
  --mod-card-border: rgba(20, 184, 166, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #99f6e4;
}
body[data-theme="light"] [data-module="org"] {
  --mod-accent: #0f766e;
  --mod-accent-light: #0d9488;
  --mod-accent-glow: rgba(15, 118, 110, 0.25);
  --mod-accent-bg: rgba(15, 118, 110, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(15, 118, 110, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #134e4a;
}

/* 10. Пользователи и права (Users) - Royal Indigo */
[data-module="users"] {
  --mod-accent: #6366f1;
  --mod-accent-light: #818cf8;
  --mod-accent-glow: rgba(99, 102, 241, 0.35);
  --mod-accent-bg: rgba(99, 102, 241, 0.15);
  --mod-card-bg: rgba(24, 32, 47, 0.70);
  --mod-card-border: rgba(99, 102, 241, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #e2e8f0;
}
body[data-theme="light"] [data-module="users"] {
  --mod-accent: #334155;
  --mod-accent-light: #475569;
  --mod-accent-glow: rgba(51, 65, 85, 0.25);
  --mod-accent-bg: rgba(51, 65, 85, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(51, 65, 85, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #1e293b;
}

/* 11. Реестр модулей (Modules) - Purple Amethyst */
[data-module="modules"] {
  --mod-accent: #a855f7;
  --mod-accent-light: #c084fc;
  --mod-accent-glow: rgba(168, 85, 247, 0.35);
  --mod-accent-bg: rgba(168, 85, 247, 0.15);
  --mod-card-bg: rgba(36, 15, 54, 0.70);
  --mod-card-border: rgba(168, 85, 247, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #e9d5ff;
}
body[data-theme="light"] [data-module="modules"] {
  --mod-accent: #7e22ce;
  --mod-accent-light: #9333ea;
  --mod-accent-glow: rgba(126, 34, 206, 0.25);
  --mod-accent-bg: rgba(126, 34, 206, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(126, 34, 206, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #3b0764;
}

/* 12. Системный мониторинг (System) - Rose Crimson */
[data-module="system"] {
  --mod-accent: #f43f5e;
  --mod-accent-light: #fb7185;
  --mod-accent-glow: rgba(244, 63, 94, 0.35);
  --mod-accent-bg: rgba(244, 63, 94, 0.15);
  --mod-card-bg: rgba(48, 12, 24, 0.70);
  --mod-card-border: rgba(244, 63, 94, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #fecdd3;
}
body[data-theme="light"] [data-module="system"] {
  --mod-accent: #be123c;
  --mod-accent-light: #e11d48;
  --mod-accent-glow: rgba(190, 18, 60, 0.25);
  --mod-accent-bg: rgba(190, 18, 60, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(190, 18, 60, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #4c0519;
}

/* 13. 1С Синхронизация (OneC) - 1C Classic Warm Ochre */
[data-module="onec"] {
  --mod-accent: #d97706;
  --mod-accent-light: #fbbf24;
  --mod-accent-glow: rgba(217, 119, 6, 0.35);
  --mod-accent-bg: rgba(217, 119, 6, 0.15);
  --mod-card-bg: rgba(42, 28, 10, 0.70);
  --mod-card-border: rgba(217, 119, 6, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #fef08a;
}
body[data-theme="light"] [data-module="onec"] {
  --mod-accent: #b45309;
  --mod-accent-light: #d97706;
  --mod-accent-glow: rgba(180, 83, 9, 0.25);
  --mod-accent-bg: rgba(180, 83, 9, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(180, 83, 9, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #451a03;
}

/* 14. Внешние коннекторы (Integrations) - Deep Cyan */
[data-module="integrations"] {
  --mod-accent: #06b6d4;
  --mod-accent-light: #22d3ee;
  --mod-accent-glow: rgba(6, 182, 212, 0.35);
  --mod-accent-bg: rgba(6, 182, 212, 0.15);
  --mod-card-bg: rgba(8, 38, 48, 0.70);
  --mod-card-border: rgba(6, 182, 212, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #a5f3fc;
}
body[data-theme="light"] [data-module="integrations"] {
  --mod-accent: #0e7490;
  --mod-accent-light: #0891b2;
  --mod-accent-glow: rgba(14, 116, 144, 0.25);
  --mod-accent-bg: rgba(14, 116, 144, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(14, 116, 144, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #164e63;
}

/* 15. Настройки платформы (Settings) - Sky Blue */
[data-module="settings"] {
  --mod-accent: #38bdf8;
  --mod-accent-light: #7dd3fc;
  --mod-accent-glow: rgba(56, 189, 248, 0.35);
  --mod-accent-bg: rgba(56, 189, 248, 0.15);
  --mod-card-bg: rgba(20, 26, 38, 0.70);
  --mod-card-border: rgba(56, 189, 248, 0.25);
  --mod-text: #ffffff;
  --mod-text-muted: #e2e8f0;
}
body[data-theme="light"] [data-module="settings"] {
  --mod-accent: #334155;
  --mod-accent-light: #475569;
  --mod-accent-glow: rgba(51, 65, 85, 0.25);
  --mod-accent-bg: rgba(51, 65, 85, 0.08);
  --mod-card-bg: rgba(255, 255, 255, 0.92);
  --mod-card-border: rgba(51, 65, 85, 0.16);
  --mod-text: #0f172a;
  --mod-text-muted: #1e293b;
}

/* =========================================================================
   3. UNIVERSAL ENFORCEMENT OF LEGIBILITY INSIDE ANY [data-module]
   ========================================================================= */
[data-module] .card-title,
[data-module] h1, [data-module] h2, [data-module] h3 {
  color: var(--mod-text) !important;
}

[data-module] .metric-val {
  color: var(--mod-text) !important;
}

[data-module] .metric-lbl,
[data-module] .biz-kpi-label {
  color: var(--mod-text-muted) !important;
}

[data-module] .card,
[data-module] .biz-card {
  border-color: var(--mod-card-border);
}

[data-module] .tab.active,
[data-module] .subtab.active {
  color: var(--mod-accent-light, var(--mod-accent)) !important;
  border-color: var(--mod-accent) !important;
}

[data-module] .tab:not(.active),
[data-module] .subtab:not(.active) {
  color: var(--mod-text-muted, #e2e8f0) !important;
}

[data-module] .tab:hover,
[data-module] .subtab:hover {
  color: var(--mod-text, #ffffff) !important;
}

[data-module] table th,
[data-module] .table th {
  color: var(--mod-text-muted, #e2e8f0) !important;
}

[data-module] .form-label,
[data-module] label {
  color: var(--mod-text, #ffffff) !important;
}

body[data-theme="light"] [data-module] .tab:not(.active),
body[data-theme="light"] [data-module] .subtab:not(.active) {
  color: #475569 !important;
}

body[data-theme="light"] [data-module] .tab:hover,
body[data-theme="light"] [data-module] .subtab:hover {
  color: #0f172a !important;
}

body[data-theme="light"] [data-module] table th,
body[data-theme="light"] [data-module] .table th {
  color: #475569 !important;
}

body[data-theme="light"] [data-module] .form-label,
body[data-theme="light"] [data-module] label {
  color: #334155 !important;
}