/*
 * ═══════════════════════════════════════════════════════════════════════
 *  darx_intel.css — Daralbeida "Intelligence" design system (CENTRAL)
 *  DAB-VIS-CSS-INTEL-001 · v1.0 · May 2026
 *
 *  Shared dark-charcoal system for the BI / competitive-intelligence pages,
 *  modelled on DARX_BI_KBI_DASHBOARD. Link it by ABSOLUTE path so it works at
 *  any folder depth on this domain:
 *      <link rel="stylesheet" href="/darmaster/css/darx_intel.css">
 *
 *  EDIT HERE → every page that links this file updates. Page-specific data and
 *  behaviour stay inline in each page.
 *
 *  SECTIONS: 1 tokens · 2 base · 3 header+stats · 4 sticky tabs · 5 controls
 *            6 record count · 7 tables · 8 gallery cards · 9 chips/flags/dots
 *           10 modal · 11 footer/notes · 12 responsive
 * ═══════════════════════════════════════════════════════════════════════ */

/* Self-hosted fonts — no external domains. woff2 in ./fonts/, declared in
   fonts.css (relative @import → /darmaster/css/fonts.css regardless of page depth). */
@import url('fonts.css');

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root{
  --charcoal:#28333A;   /* page bg (canonical, from the dashboard)        */
  --deep:#1A4D6D;       /* deep blue                                      */
  --gold:#B8832A;       /* atlas gold                                     */
  --gold2:#C8973A;
  --gold-lt:#D4A855;
  --ivory:#F6F1E7;
  --ocean:#4A7C9E;
  --sand:#EDE3CE;
  --terra:#C4856A;
  --olive:#6B7F4A;
  --silver:#8A9BA8;
  --card:#222d34;       /* card / surface                                */
  --rule:rgba(184,131,42,0.20);
  --mist:rgba(246,241,231,0.55);
  --faint:rgba(246,241,231,0.30);
  --f-d:'Cormorant Garamond', Georgia, serif;
  --f-b:'Montserrat', system-ui, sans-serif;
  --f-m:'DM Mono', ui-monospace, monospace;
}

/* ── 2. BASE ────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--charcoal); color:var(--ivory); font-family:var(--f-b); font-weight:300; font-size: var(--ui-fs-value); min-height:100vh; -webkit-font-smoothing:antialiased; }

/* ── 3. HEADER + STATS ──────────────────────────────────────────────── */
.intel-header{
  background:linear-gradient(135deg,#0d2535 0%,var(--deep) 60%,#1e3a50 100%);
  border-bottom:1px solid var(--rule); padding:32px 40px 22px; position:relative; overflow:hidden;
}
.intel-header::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 72% 50%, rgba(184,131,42,0.08) 0%, transparent 70%); }
.intel-eyebrow{ font-family:var(--f-m); font-size: var(--ui-fs-label); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; position:relative; }
.intel-title{ font-family:var(--f-d); font-size: var(--ui-fs-display); font-weight:300; line-height:1.1; color:var(--ivory); position:relative; }
.intel-title em{ font-style:italic; color:var(--gold-lt); }
.intel-sub{ font-size: var(--ui-fs-label); color:var(--mist); margin-top:8px; line-height:1.6; max-width:640px; position:relative; }
.stats{ display:flex; gap:30px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap; position:relative; }
.sv{ font-family:var(--f-d); font-size: var(--ui-fs-display); color:var(--gold); line-height:1; }
.sl{ font-family:var(--f-m); font-size: var(--ui-fs-label); letter-spacing:.13em; color:var(--mist); text-transform:uppercase; margin-top:3px; }

/* ── 4. STICKY TABS ─────────────────────────────────────────────────── */
.tabs{ position:sticky; top:0; z-index:1000; display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:13px 20px; background:rgba(30,40,46,0.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); }
.tab-btn{ font-family:var(--f-m); font-size: var(--ui-fs-label); letter-spacing:.13em; text-transform:uppercase; font-weight:400;
  padding:8px 18px; border:1px solid rgba(184,131,42,0.22); background:rgba(26,77,109,0.12); color:var(--mist);
  border-radius:4px; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.tab-btn:hover{ border-color:rgba(184,131,42,0.45); color:var(--ivory); }
.tab-btn.active{ background:var(--deep); border-color:var(--gold); color:var(--gold); }
.panel{ display:none; } .panel.active{ display:block; }

/* ── 5. CONTROLS ────────────────────────────────────────────────────── */
.ctrl{ padding:10px 40px; background:rgba(26,77,109,.15); border-bottom:1px solid rgba(255,255,255,.06); display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.ctrl.tier2{ background:rgba(26,77,109,.1); }
.fl{ font-family:var(--f-m); font-size: var(--ui-fs-label); letter-spacing:.16em; color:var(--mist); text-transform:uppercase; margin-right:1px; white-space:nowrap; }
.fb{ background:transparent; border:1px solid rgba(255,255,255,.11); color:var(--mist); font-family:var(--f-m); font-size: var(--ui-fs-label); letter-spacing:.07em; padding:4px 9px; cursor:pointer; transition:all .15s; text-transform:uppercase; white-space:nowrap; border-radius:3px; }
.fb:hover,.fb.active{ background:var(--gold); border-color:var(--gold); color:#221700; }
.fb.mo{ border-color:rgba(107,127,74,.5); color:var(--olive); }
.fb.mo:hover,.fb.mo.active{ background:var(--olive); border-color:var(--olive); color:#fff; }
.fb.wboo{ border-color:rgba(74,124,158,.5); color:var(--ocean); }
.fb.wboo:hover,.fb.wboo.active{ background:var(--ocean); border-color:var(--ocean); color:#fff; }
.view-toggle{ display:flex; gap:4px; margin-left:auto; }
.vbtn{ background:transparent; border:1px solid rgba(255,255,255,.11); color:var(--mist); font-family:var(--f-m); font-size: var(--ui-fs-label); padding:4px 10px; cursor:pointer; transition:all .15s; border-radius:3px; }
.vbtn.active{ background:rgba(255,255,255,.1); color:var(--ivory); border-color:rgba(255,255,255,.2); }
input.srch{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--ivory); font-family:var(--f-m); font-size: var(--ui-fs-label); padding:5px 12px; width:230px; outline:none; margin-left:auto; border-radius:3px; }
input.srch::placeholder{ color:var(--mist); opacity:.5; }
input.srch:focus{ border-color:var(--gold); }

/* ── 6. RECORD COUNT ────────────────────────────────────────────────── */
.rc{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--mist); padding:6px 40px; border-bottom:1px solid rgba(255,255,255,.04); }
.rc span{ color:var(--gold-lt); }

/* ── 7. TABLES ──────────────────────────────────────────────────────── */
.tw{ padding:0 40px 48px; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size: var(--ui-fs-label); }
thead tr{ border-bottom:1px solid rgba(184,131,42,.4); }
th{ font-family:var(--f-m); font-size: var(--ui-fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:400; padding:9px 10px; text-align:left; white-space:nowrap; cursor:pointer; user-select:none; }
th:hover,th.sorted{ color:var(--gold-lt); }
th .si{ opacity:.35; font-size: var(--ui-fs-micro); margin-left:2px; } th.sorted .si{ opacity:1; }
th.ra{ text-align:right; }
tbody tr{ border-bottom:1px solid rgba(255,255,255,.032); transition:background .1s; }
tbody tr:hover{ background:rgba(74,124,158,.09); }
tbody tr.mo-row{ background:rgba(107,127,74,.05); }
tbody tr.mo-row td:first-child{ border-left:2px solid var(--olive); }
tbody tr.dab-row td{ background:rgba(184,131,42,.1); border-left:3px solid var(--gold); }
td{ padding:7px 10px; vertical-align:middle; }
.td-n{ font-family:var(--f-d); font-size: var(--ui-fs-value); font-weight:400; min-width:180px; white-space:normal; line-height:1.3; }
.td-p{ font-size: var(--ui-fs-label); color:var(--mist); min-width:110px; white-space:normal; }
.td-c{ font-size: var(--ui-fs-label); white-space:nowrap; }
.td-g{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--gold-lt); text-align:right; font-weight:500; }
.td-s{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:#b0c4d0; text-align:right; }
.td-t{ font-family:var(--f-m); font-size: var(--ui-fs-label); text-align:right; }
.td-r{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--gold); text-align:right; }
.td-r.top{ color:var(--gold-lt); font-weight:500; }
.td-wp{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--ocean); text-align:right; }
.td-wm{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--sand); text-align:right; }
.td-v{ font-size: var(--ui-fs-label); color:var(--sand); min-width:90px; white-space:normal; }
.td-i{ font-size: var(--ui-fs-label); white-space:nowrap; }
.td-pr{ font-family:var(--f-m); font-size: var(--ui-fs-label); text-align:right; }
.td-p1{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--mist); text-align:right; }
.td-src{ font-family:var(--f-m); font-size: var(--ui-fs-micro); color:var(--mist); opacity:.7; white-space:nowrap; }
.src-both{ color:var(--gold); }
.t-thumb{ width:32px; height:42px; object-fit:contain; display:block; }
.t-ph{ width:32px; height:42px; background:rgba(255,255,255,.04); border-radius:2px; display:flex; align-items:center; justify-content:center; }
.t-ph-inner{ width:12px; height:30px; background:rgba(184,131,42,.15); border-radius:2px; }

/* ── 8. GALLERY CARDS ───────────────────────────────────────────────── */
.gallery{ display:flex; padding:24px 40px 48px; gap:14px; flex-wrap:wrap; }
.card{ width:160px; background:var(--card); border:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; cursor:pointer; position:relative; transition:transform .15s,border-color .15s; }
.card:hover{ transform:translateY(-3px); border-color:rgba(184,131,42,.4); }
.card.mo-card{ border-color:rgba(107,127,74,.3); }
.card.dab-card{ border-color:var(--gold); background:rgba(184,131,42,.08); }
.card-img{ width:100%; aspect-ratio:3/4; background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.card-img img{ max-height:90%; max-width:90%; object-fit:contain; transition:opacity .4s; opacity:0; }
.card-img img.loaded{ opacity:1; }
.card-img .placeholder{ width:30px; height:80px; background:linear-gradient(to bottom,rgba(184,131,42,.2),rgba(184,131,42,.05)); border-radius:4px; }
.card-award{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: var(--ui-fs-micro); font-weight:700; font-family:var(--f-m); }
.award-g{ background:linear-gradient(135deg,#B8832A,#D4A855); color:#1a1a1a; }
.award-s{ background:linear-gradient(135deg,#6b7f8a,#8A9BA8); color:#fff; }
.card-body{ padding:8px; flex:1; }
.card-name{ font-family:var(--f-d); font-size: var(--ui-fs-label); font-weight:400; line-height:1.3; color:var(--ivory); margin-bottom:3px; }
.card-prod{ font-size: var(--ui-fs-label); color:var(--mist); line-height:1.3; margin-bottom:4px; }
.card-meta{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.card-flag{ font-size: var(--ui-fs-label); }
.card-rank{ font-family:var(--f-m); font-size: var(--ui-fs-micro); color:var(--gold); margin-top:3px; }

/* ── 9. CHIPS / FLAGS / INTENSITY DOTS ──────────────────────────────── */
.flag{ font-size: var(--ui-fs-value); margin-right:3px; }
.badge{ display:inline-block; padding:1px 6px; font-family:var(--f-m); font-size: var(--ui-fs-micro); letter-spacing:.09em; text-transform:uppercase; }
.bg{ background:rgba(184,131,42,.2); color:var(--gold-lt); border:1px solid rgba(184,131,42,.35); }
.bs{ background:rgba(138,155,168,.1); color:#b0c4d0; border:1px solid rgba(138,155,168,.2); }
.id{ display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.id-d{ background:var(--ocean); } .id-m{ background:var(--olive); } .id-r{ background:var(--terra); }
.ot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:rgba(107,127,74,.25); border:1px solid var(--olive); color:var(--olive); font-size: var(--ui-fs-micro); font-weight:600; text-align:center; line-height:11px; }

/* ── 10. MODAL ──────────────────────────────────────────────────────── */
.modal-bg{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:2000; align-items:center; justify-content:center; }
.modal-bg.open{ display:flex; }
.modal{ background:var(--deep); border:1px solid rgba(184,131,42,.4); max-width:500px; width:90%; padding:28px; position:relative; }
.modal-close{ position:absolute; top:12px; right:16px; background:none; border:none; color:var(--mist); font-size: var(--ui-fs-display); cursor:pointer; font-family:var(--f-m); }
.modal-close:hover{ color:var(--ivory); }
.modal-img{ height:220px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.modal-img img{ max-height:200px; max-width:200px; object-fit:contain; }
.modal-name{ font-family:var(--f-d); font-size: var(--ui-fs-display); font-weight:400; color:var(--ivory); margin-bottom:4px; }
.modal-prod{ font-size: var(--ui-fs-label); color:var(--mist); margin-bottom:12px; }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modal-field label{ font-family:var(--f-m); font-size: var(--ui-fs-micro); letter-spacing:.15em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:2px; }
.modal-field span{ font-size: var(--ui-fs-label); color:var(--ivory); }
.modal-url{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.modal-url label{ font-family:var(--f-m); font-size: var(--ui-fs-micro); letter-spacing:.15em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:4px; }
.modal-url a{ font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--ocean); word-break:break-all; text-decoration:none; }
.modal-url a:hover{ color:var(--gold-lt); }

/* ── 11. FOOTER / NOTES ─────────────────────────────────────────────── */
.note{ margin:0 40px 28px; padding:12px 18px; background:rgba(26,77,109,.18); border-left:3px solid var(--gold); font-size: var(--ui-fs-label); color:var(--mist); line-height:1.8; }
.note strong{ color:var(--gold-lt); font-weight:500; } .note .hl{ color:var(--olive); font-weight:500; }
.intel-foot{ padding:16px 40px 40px; font-family:var(--f-m); font-size: var(--ui-fs-label); color:var(--faint); letter-spacing:.06em; }

/* ── 12. RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:680px){
  .intel-header,.ctrl,.rc,.tw,.gallery,.note,.intel-foot{ padding-left:18px; padding-right:18px; }
  .intel-title{ font-size: var(--ui-fs-display); }
}