/* ================================================================
   SSOT: Dev Tools Module Labels v1.0
   ================================================================
   Єдине джерело правди для відображення назв модулів у Dev Tools.
   icon + color + name — завжди однаково на кожній сторінці.

   Підключено на (14 сторінок):
     mon-tool-api-health-adc/api-health-web-adc.html
     mon-tool-alerts-adc/alerts-web-adc.html
     mon-tool-module-manager-adc/module-manager-web-adc.html
     mon-tool-monitor-adc/monitor-web-adc.html
     mon-tool-eventbus-adc/eventbus-monitor-web-adc.html
     dev-tool-debug-audit-adc/debug-report-web-adc.html
     dev-tool-profile-inspector-adc/profile-inspector-web-adc.html
     doc-tool-log-registry-adc/log-registry-web-adc.html
     doc-tool-changelog-adc/changelog-web-adc.html
     doc-tool-emoji-ref-adc/emoji-ref-web-adc.html
     doc-tool-project-map-adc/project-map-web-adc.html
     doc-tool-agent-journal-adc/agent-journal-web-adc.html
     dev-tool-testing-center-adc/testing-center-web-adc.html
     pay-tool-paymaster-adc/paymaster-tools-web-adc.html

   SSOT кольори: memory/reference_module_colors.md
   Дата: 2026-04-18
   ================================================================

   ВИКОРИСТАННЯ:
   ─────────────
   HTML pattern (inline):
     <span class="dt-module-label" data-module="observer">
       <span class="material-symbols-outlined">visibility</span>
       Observer
     </span>

   HTML pattern (compact — без тексту, тільки іконка):
     <span class="dt-module-label dt-module-label--icon-only" data-module="nexus">
       <span class="material-symbols-outlined">network_intelligence</span>
     </span>

   HTML pattern (великий — для заголовків):
     <span class="dt-module-label dt-module-label--lg" data-module="challenger">
       <span class="material-symbols-outlined">trophy</span>
       Challenger
     </span>

   JavaScript pattern (динамічне створення):
     const DT_MODULES = {
       server:     { icon: 'dns',                 color: '#ffffff',  name: 'Server'    },
       observer:   { icon: 'visibility',          color: '#2ecc71',  name: 'Observer'  },
       publisher:  { icon: 'post',                color: '#f1c40f',  name: 'Publisher' },
       executor:   { icon: 'rocket_launch',       color: '#e74c3c',  name: 'Executor'  },
       applicant:  { icon: 'id_card',             color: '#3498db',  name: 'Applicant' },
       nexus:      { icon: 'network_intelligence',color: '#00d4aa',  name: 'Nexus'     },
       challenger: { icon: 'trophy',              color: '#FF7E00',  name: 'Challenger'},
       paymaster:  { icon: 'diamond',             color: '#1a4d9a',  name: 'Paymaster' },
       devtools:   { icon: 'build',               color: '#8b5cf6',  name: 'Dev Tools' },
     };

     function renderModuleLabel(moduleKey, size = 'md') {
       const m = DT_MODULES[moduleKey];
       if (!m) return '';
       const sizeClass = size === 'lg' ? ' dt-module-label--lg' : size === 'sm' ? ' dt-module-label--sm' : '';
       return `<span class="dt-module-label${sizeClass}" data-module="${moduleKey}">
         <span class="material-symbols-outlined">${m.icon}</span>
         ${m.name}
       </span>`;
     }

   ================================================================ */

/* ─── Шрифт: Oswald (вже підключено через Google Fonts на кожній сторінці).
   Якщо сторінка не підключає Google Fonts напряму — Oswald доступний
   через --font-dt-title у dev-tools-base.css як fallback. ─── */


/* ================================================================
   БАЗОВИЙ КОМПОНЕНТ
   ================================================================ */

.dt-module-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-dt-title, 'Oswald', 'Arial Narrow', sans-serif); /* 🔧 cc-712: токен замість hardcode */
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--module-color, #ffffff);
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}

.dt-module-label .material-symbols-outlined {
  font-size: 17px;
  color: var(--module-color, #ffffff);
  flex-shrink: 0;
  line-height: 1;
  /* Легкий glow на іконці для читабельності */
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--module-color, #ffffff) 50%, transparent));
}


/* ================================================================
   РОЗМІРИ
   ================================================================ */

/* Малий — у таблицях, списках, компактних картках */
.dt-module-label--sm {
  font-size: 11px;
  letter-spacing: 0.07em;
  gap: 4px;
}
.dt-module-label--sm .material-symbols-outlined {
  font-size: 14px;
}

/* Середній — дефолт (14px вище) */

/* Великий — у заголовках секцій, hero-блоках */
.dt-module-label--lg {
  font-size: 17px;
  letter-spacing: 0.1em;
  gap: 8px;
}
.dt-module-label--lg .material-symbols-outlined {
  font-size: 22px;
}

/* Тільки іконка (без тексту) */
.dt-module-label--icon-only {
  gap: 0;
}


/* ================================================================
   КОЛЬОРИ МОДУЛІВ (data-module SSOT)
   Джерело правди: reference_module_colors.md
   ================================================================ */

.dt-module-label[data-module="server"]     { --module-color: #ffffff; }
.dt-module-label[data-module="observer"]   { --module-color: #2ecc71; }
.dt-module-label[data-module="publisher"]  { --module-color: #f1c40f; }
.dt-module-label[data-module="executor"]   { --module-color: #e74c3c; }
.dt-module-label[data-module="applicant"]  { --module-color: #3498db; }
.dt-module-label[data-module="nexus"]      { --module-color: #00d4aa; }
.dt-module-label[data-module="challenger"] { --module-color: #FF7E00; }
.dt-module-label[data-module="paymaster"]  { --module-color: #1a4d9a; }
.dt-module-label[data-module="devtools"]   { --module-color: #c58b3a; } /* 🔧 cc-790: SSOT бронза #c58b3a замість #8b5cf6 */


/* ================================================================
   ВАРІАНТИ ВІДОБРАЖЕННЯ
   ================================================================ */

/* Badge — з фоном (для фільтрів, тегів, статус-рядків) */
.dt-module-label--badge {
  padding: 3px 8px 3px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--module-color, #ffffff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--module-color, #ffffff) 25%, transparent);
}

/* Pill — для чіпів/тегів */
.dt-module-label--pill {
  padding: 2px 10px 2px 7px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--module-color, #ffffff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--module-color, #ffffff) 20%, transparent);
}

/* Underline — для заголовків секцій з лінією під текстом */
.dt-module-label--underline {
  padding-bottom: 4px;
  border-bottom: 2px solid color-mix(in srgb, var(--module-color, #ffffff) 60%, transparent);
}