/*
 * Executive Interviews brand colours (sampled from the EI logo) and a few shared classes.
 * Use these tokens for every new design instead of Bootstrap defaults or one-off hex values.
 * First used by Sales Reports (Summary by employee / region / country).
 */
:root {
  --ei-ink: #383838;        /* wordmark grey: headings, table text */
  --ei-muted: #5c5c66;      /* secondary text (passes 4.5:1 on white) */
  --ei-purple: #563481;     /* primary */
  --ei-plum: #711e50;       /* primary hover / pressed */
  --ei-magenta: #ac0f81;
  --ei-crimson: #c61833;    /* errors, negative values */
  --ei-orange: #eeab30;     /* warnings */
  --ei-lime: #cddb1b;       /* fills only, never text */
  --ei-green: #68b73b;
  --ei-blue: #4d6dac;
  --ei-slate: #425e7a;

  --ei-bg: #f6f5f8;
  --ei-line: #e3e0ea;
  --ei-field-line: #cfcadb;
  --ei-tint: #f1eef6;       /* table header, bar tracks */
  --ei-tint-strong: #e6e0f0;
  --ei-zebra: #faf8fc;
  --ei-warn-bg: #fdf5e3;
  --ei-warn-icon: #9a6400;
  --ei-info-bg: #eef2f9;
  --ei-info-icon: #3b5689;
  --ei-radius: 10px;
  --ei-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Chart fills: brand hues stepped into the readable lightness band, validated for colour-blind
     separation in this order (use them in order, never cycled). */
  --ei-chart-1: #6b47a3;    /* purple */
  --ei-chart-2: #d9901a;    /* orange */
  --ei-chart-3: #4d6dac;    /* blue */
  --ei-chart-4: #5a9e32;    /* green */
  --ei-chart-5: #c61833;    /* crimson */
  --ei-chart-6: #1f9e93;    /* teal */
  --ei-chart-team: #b5338f; /* magenta: team sales */
  --ei-chart-other: #a3a3ad;/* grey: unassigned / other */
  --ei-chart-office-uk: #6b47a3;
  --ei-chart-office-as: #5a9e32;
  --ei-chart-office-us: #4d6dac;
}

.ei-page { color: var(--ei-ink); }
.ei-num { font-variant-numeric: tabular-nums; }

/* Brand strip in the logo's colours */
.ei-strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 4px; border-radius: 2px; overflow: hidden; }
.ei-strip span:nth-child(1) { background: var(--ei-purple); }
.ei-strip span:nth-child(2) { background: var(--ei-plum); }
.ei-strip span:nth-child(3) { background: var(--ei-magenta); }
.ei-strip span:nth-child(4) { background: var(--ei-crimson); }
.ei-strip span:nth-child(5) { background: var(--ei-orange); }
.ei-strip span:nth-child(6) { background: var(--ei-lime); }
.ei-strip span:nth-child(7) { background: var(--ei-green); }
.ei-strip span:nth-child(8) { background: var(--ei-blue); }

/* Page header + tabs */
.ei-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ei-page-header h2 { font-family: var(--ei-font-display); font-weight: 600; font-size: 2.2rem; margin: 0; color: var(--ei-ink); letter-spacing: .3px; }
.ei-page-header .ei-source { font-size: .82rem; color: var(--ei-muted); }
.ei-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ei-line); flex-wrap: wrap; margin: 6px 0 18px; }
.ei-tabs a { padding: 10px 16px; font-size: .9rem; font-weight: 500; color: var(--ei-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.ei-tabs a:hover { color: var(--ei-purple); }
.ei-tabs a.active { color: var(--ei-purple); font-weight: 600; border-bottom-color: var(--ei-purple); }

/* Cards */
.ei-card { background: #fff; border: 1px solid var(--ei-line); border-radius: var(--ei-radius); }
.ei-card-head { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--ei-line); }
.ei-card-head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ei-ink); }
.ei-card-note { padding: 10px 18px; font-size: .78rem; line-height: 1.6; color: var(--ei-muted); border-top: 1px solid var(--ei-line); background: #fbfafc; border-radius: 0 0 var(--ei-radius) var(--ei-radius); }
.ei-hint { font-size: .82rem; color: var(--ei-muted); }

/* Filter bar */
.ei-filter { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
.ei-label { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--ei-muted); margin-bottom: 6px; }
.ei-filter .form-control, .ei-filter .form-select { height: 40px; border-color: var(--ei-field-line); }
.ei-filter fieldset { border: 0; margin: 0; padding: 0; }
.ei-filter legend { float: none; width: auto; padding: 0; }
.ei-segmented { display: inline-flex; border: 1px solid var(--ei-field-line); border-radius: 6px; overflow: hidden; height: 40px; }
.ei-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.ei-segmented label { display: flex; align-items: center; padding: 0 14px; font-size: .9rem; cursor: pointer; margin: 0; }
.ei-segmented label:not(:first-of-type) { border-left: 1px solid var(--ei-field-line); }
.ei-segmented input:checked + label { background: var(--ei-purple); color: #fff; font-weight: 500; }
.ei-segmented input:focus-visible + label { outline: 2px solid var(--ei-blue); outline-offset: -2px; }
.ei-checks { display: flex; gap: 16px; height: 40px; align-items: center; }
.ei-checks label { display: flex; gap: 6px; align-items: center; margin: 0; font-size: .9rem; }
.ei-checks input { accent-color: var(--ei-purple); width: 18px; height: 18px; }
.ei-filter-actions { display: flex; gap: 10px; margin-left: auto; }

/* Buttons */
.ei-btn-primary, .ei-btn-outline { height: 42px; padding: 0 20px; border-radius: 6px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.ei-btn-primary { background: var(--ei-purple); color: #fff; border: 1px solid var(--ei-purple); }
.ei-btn-primary:hover, .ei-btn-primary:focus { background: var(--ei-plum); border-color: var(--ei-plum); color: #fff; }
.ei-btn-outline { background: #fff; color: var(--ei-purple); border: 1px solid var(--ei-purple); }
.ei-btn-outline:hover, .ei-btn-outline:focus { background: var(--ei-tint); color: var(--ei-plum); }

/* KPI tiles */
.ei-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ei-kpi { background: #fff; border: 1px solid var(--ei-line); border-top: 4px solid var(--ei-purple); border-radius: var(--ei-radius); padding: 14px 18px; }
.ei-kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--ei-muted); }
.ei-kpi-value { font-family: var(--ei-font-display); font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--ei-ink); font-variant-numeric: tabular-nums; }
.ei-kpi-note { font-size: .78rem; color: var(--ei-muted); }
.ei-kpi--primary { background: var(--ei-purple); border-color: var(--ei-purple); }
.ei-kpi--primary .ei-kpi-label, .ei-kpi--primary .ei-kpi-note, .ei-kpi--primary .ei-kpi-value { color: #fff; }
.ei-kpi--UK { border-top-color: var(--ei-chart-office-uk); }
.ei-kpi--AS { border-top-color: var(--ei-chart-office-as); }
.ei-kpi--US { border-top-color: var(--ei-blue); }

/* Notices */
.ei-notice { border-radius: var(--ei-radius); padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; font-size: .9rem; line-height: 1.5; }
.ei-notice svg { flex-shrink: 0; margin-top: 2px; }
.ei-notice-body { flex: 1 1 520px; }
.ei-notice ul { margin: 4px 0 0; padding-left: 18px; }
.ei-notice--warn { background: var(--ei-warn-bg); border: 1px solid var(--ei-orange); }
.ei-notice--warn svg { color: var(--ei-warn-icon); }
.ei-notice--info { background: var(--ei-info-bg); border: 1px solid var(--ei-blue); }
.ei-notice--info svg { color: var(--ei-info-icon); }
.ei-notice a { color: var(--ei-purple); font-weight: 600; }
.ei-notice--ok { background: #eef7e8; border: 1px solid var(--ei-green); }
.ei-notice--ok svg, .ei-notice--ok .bi { color: #3f7a1f; }
.ei-notice--error { background: #fbeaed; border: 1px solid var(--ei-crimson); }
.ei-notice--error svg, .ei-notice--error .bi { color: var(--ei-crimson); }
.ei-notice--warn .bi { color: var(--ei-warn-icon); }

/* Tables */
.ei-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--ei-ink); }
.ei-table thead th { background: var(--ei-tint); padding: 11px 14px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.ei-table thead tr.ei-group-row th { background: #fff; text-transform: uppercase; font-size: .68rem; padding: 8px 14px 4px; position: static; }
.ei-table td, .ei-table tbody th { padding: 10px 14px; border-top: 1px solid #efecf4; white-space: nowrap; }
.ei-table tbody tr:nth-child(even) { background: var(--ei-zebra); }
.ei-table tbody tr:hover { background: var(--ei-tint); }
.ei-table .ei-r { text-align: right; }
.ei-table .ei-total-col { background: #f6f3fa; font-weight: 600; }
.ei-table thead .ei-total-col { background: var(--ei-tint-strong); }
.ei-table tfoot td, .ei-table tfoot th { border-top: 2px solid var(--ei-purple); padding: 12px 14px; font-weight: 700; white-space: nowrap; }
.ei-table tfoot .ei-total-col { background: var(--ei-tint-strong); }
.ei-table .ei-muted { color: var(--ei-muted); font-weight: 500; }
.ei-table a.ei-drill { color: var(--ei-ink); text-decoration: none; border-bottom: 1px dotted var(--ei-field-line); }
.ei-table a.ei-drill:hover, .ei-table a.ei-drill:focus { color: var(--ei-purple); border-bottom-color: var(--ei-purple); }
.ei-table a.ei-drill.ei-active { background: #f7e3f1; color: var(--ei-magenta); }
.ei-group--person { color: var(--ei-purple); border-bottom: 2px solid var(--ei-purple); }
.ei-group--team { color: var(--ei-magenta); border-bottom: 2px solid var(--ei-magenta); }
.ei-group--unassigned { color: var(--ei-muted); border-bottom: 2px solid #a3a3ad; }
.ei-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .75rem; font-weight: 600; }
.ei-pill--NORAM { background: var(--ei-blue); color: #fff; }
.ei-pill--EMEA { background: var(--ei-purple); color: #fff; }
.ei-pill--APAC { background: #e3f1da; color: #2f5f17; }
.ei-pill--LATAM { background: #fbe9c4; color: #7a4b00; }
.ei-pill--none { background: #ececef; color: var(--ei-muted); }
.ei-share { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.ei-share-track { flex: 1; height: 10px; background: var(--ei-tint); border-radius: 5px; overflow: hidden; }
.ei-share-bar { height: 10px; background: var(--ei-purple); border-radius: 5px; }
.ei-empty { padding: 40px 18px; text-align: center; color: var(--ei-muted); }

/* Modal */
.ei-modal .modal-content { border: 0; border-radius: 12px; overflow: hidden; }
.ei-modal .modal-header { border-top: 5px solid var(--ei-purple); align-items: flex-start; }
.ei-modal .modal-title { font-family: var(--ei-font-display); font-size: 1.8rem; font-weight: 600; }