/* Header sizing (both looks) and the "Executive" look.
   style.css holds the layout and the "Classic" look. */

/* ---------- header: company and report name, in both looks ---------- */
.brand { display: flex; flex-direction: column; line-height: 1.15; font-size: inherit; }
.brand-name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.brand-report { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.topbar { padding-top: 16px; padding-bottom: 14px; }
.theme-pick { font-size: 13px; }
@media (max-width: 640px) { .brand-name { font-size: 20px; } }

/* ======================= Executive look ======================= */
html[data-theme="exec"] {
  color-scheme: light;
  --bg: #eef1f6; --surface: #ffffff; --soft: #f1f4f9; --text: #0f1b2d; --muted: #46556b; --faint: #8794a8;
  --line: #d9dfe8; --line-strong: #b9c3d1;
  --accent: #0b2545; --accent-soft: #e3ebf7; --warn: #8a5300; --warn-soft: #fff1cf;
  --danger: #a3261d; --danger-soft: #fbe9e7;
  --navy: #0b2545; --navy-2: #13315c; --blue: #1f6feb; --gold: #f2a900; --gold-deep: #b97f00;
  --c-calls: #0b2545; --c-connects: #1f6feb; --c-appts: #f2a900;
  --n-calls-bg: #0b2545; --n-calls-fg: #ffffff; --n-ans-bg: #1d4e89; --n-ans-fg: #ffffff;
  --n-conn-bg: #1f6feb; --n-conn-fg: #ffffff; --n-mach-bg: #a9b6c8; --n-mach-fg: #0f1b2d;
  --n-aband-bg: #e4572e; --n-aband-fg: #ffffff; --n-not-bg: #dbe2ec; --n-not-fg: #2a3a52;
  --b-none: #a9b6c8; --b-qual: #1f6feb; --b-dq: #e4572e; --b-appt: #f2a900;
}
html[data-theme="exec"] body { background: var(--bg); }

/* navy header band with white type */
html[data-theme="exec"] .topbar { background: var(--navy); color: #ffffff; }
html[data-theme="exec"] .brand-name { color: #ffffff; }
html[data-theme="exec"] .brand-report { color: var(--gold); }
html[data-theme="exec"] .topbar select,
html[data-theme="exec"] .topbar input[type=date] { background: #ffffff; color: #0f1b2d; border-color: transparent; }
html[data-theme="exec"] .topbar .muted { color: #c9d6ea; }
html[data-theme="exec"] .topbar .btn { background: var(--gold); color: #0b2545; border-color: transparent; font-weight: 600; }
html[data-theme="exec"] .topbar .btn:hover { background: #ffc233; }
html[data-theme="exec"] .topbar button.link { color: #c9d6ea; }
html[data-theme="exec"] .topbar button.link:hover { color: #ffffff; }
html[data-theme="exec"] .badge-ok { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
html[data-theme="exec"] .badge-ok .dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); }
html[data-theme="exec"] .badge-stale { background: var(--gold); color: #0b2545; }
html[data-theme="exec"] .badge-wait { background: rgba(255, 255, 255, 0.14); color: #c9d6ea; }

html[data-theme="exec"] .tabs { background: var(--navy-2); border-bottom: 0; }
html[data-theme="exec"] .tab { color: #c9d6ea; padding-top: 11px; padding-bottom: 10px; border-bottom-width: 3px; }
html[data-theme="exec"] .tab:hover { color: #ffffff; }
html[data-theme="exec"] .tab-on { color: #ffffff; border-bottom-color: var(--gold); }

/* headline tiles: a coloured rule on top, large navy figures */
html[data-theme="exec"] .tile { border: 0; border-top: 4px solid var(--navy); border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08); }
html[data-theme="exec"] .tile .label { color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
html[data-theme="exec"] .tile .value { color: var(--navy); font-weight: 700; font-size: 32px; }
html[data-theme="exec"] .tile .value-sm { font-size: 24px; }
html[data-theme="exec"] .tiles-6 .tile:nth-child(2), html[data-theme="exec"] .tiles-6 .tile:nth-child(3) { border-top-color: var(--blue); }
html[data-theme="exec"] .tiles-6 .tile:nth-child(4), html[data-theme="exec"] .tiles-6 .tile:nth-child(5) { border-top-color: #1d4e89; }
html[data-theme="exec"] .tiles-6 .tile:nth-child(6) { border-top-color: var(--gold); }
html[data-theme="exec"] .tiles-6 .tile:nth-child(6) .value { color: var(--gold-deep); }
html[data-theme="exec"] .tile-line { border-top-width: 0; border-left: 4px solid var(--line-strong); border-radius: 8px; }

/* highlight cards: solid navy, gold label */
html[data-theme="exec"] .hl { background: var(--navy); color: #ffffff; border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.12); }
html[data-theme="exec"] .hl-label { color: var(--gold); font-weight: 600; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
html[data-theme="exec"] .hl-name { font-size: 19px; font-weight: 700; }
html[data-theme="exec"] .hl-detail { color: #dbe5f3; }
html[data-theme="exec"] .hl-others { color: #b9c9e0; }
html[data-theme="exec"] .hl-empty { background: #dbe2ec; color: var(--muted); }
html[data-theme="exec"] .hl-empty .hl-label { color: var(--muted); }
html[data-theme="exec"] .hl-empty .hl-detail { color: var(--muted); }

/* cards and tables */
html[data-theme="exec"] .card { border: 0; border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08); }
html[data-theme="exec"] h2 { color: var(--navy); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
html[data-theme="exec"] table.data th { color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; border-bottom: 2px solid var(--navy); padding-bottom: 8px; }
html[data-theme="exec"] table.data tbody tr:hover td { background-color: rgba(31, 111, 235, 0.06); }
html[data-theme="exec"] table.data tfoot td { border-top: 2px solid var(--navy); color: var(--navy); }
html[data-theme="exec"] .toggle { background: #ffffff; border-color: var(--line-strong); font-weight: 600; }
html[data-theme="exec"] .toggle[aria-pressed="true"] { border-color: var(--navy); }
html[data-theme="exec"] .key { border-top-width: 3px; }
html[data-theme="exec"] .chart .axis-r { fill: var(--gold-deep); }
html[data-theme="exec"] .chip { background: var(--accent-soft); color: var(--navy); font-weight: 600; }
html[data-theme="exec"] .sw-good { background: rgba(16, 150, 90, 0.4); }
html[data-theme="exec"] .sw-bad { background: rgba(228, 87, 46, 0.4); }
html[data-theme="exec"] .period { color: var(--muted); font-weight: 600; }

/* sign-in page in the Executive look */
html[data-theme="exec"] .signin { background: var(--navy); }
html[data-theme="exec"] .signin .card { border-top: 4px solid var(--gold); }
html[data-theme="exec"] .signin h1 { color: var(--navy); }
html[data-theme="exec"] .signin button[type=submit] { background: var(--navy); }
html[data-theme="exec"] .signin button[type=submit]:hover { background: var(--navy-2); }