/* =====================================================================================
   Karen Huber Group — Executive Dashboard theme for Metabase OSS (served by the front proxy).
   Light only. Hooks are Metabase data-testids / ARIA roles, never hashed class names.
   ===================================================================================== */
:root {
  --khg-mist: #F5F9F7;        /* page */
  --khg-paper: #FFFFFF;       /* cards, header */
  --khg-line: #DDEBE1;        /* hairlines */
  --khg-leaf-1: #EEF8F0;      /* tab idle */
  --khg-leaf-2: #D9F0DE;      /* tab hover / active filter fill */
  --khg-leaf-3: #BFE6C7;      /* tab selected */
  --khg-leaf-edge: #86CF96;   /* tab frame */
  --khg-green: #43A05A;       /* accents */
  --khg-cyan: #0AA6B8;        /* KHG mark */
  --khg-violet: #7C5CFF;      /* KHG mark */
  --khg-ink: #2E3B4E;         /* body text (soft slate, never black) */
  --khg-ink-2: #5E6B7D;       /* secondary text */
  --khg-header-h: 56px;
  --khg-radius: 14px;
}

/* ---------- page frame: our header on top, Metabase fills the rest ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: var(--khg-mist) !important; }
#root { flex: 1 1 auto; min-height: 0; position: relative; }

#khg-header {
  flex: 0 0 var(--khg-header-h);
  height: var(--khg-header-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--khg-paper);
  position: relative; z-index: 3;
  font-family: inherit; color: var(--khg-ink);
  box-shadow: 0 1px 0 var(--khg-line);
}
/* signature: the three bars of the KHG mark, laid out as one accent line */
#khg-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--khg-cyan) 0 33.3%, var(--khg-violet) 33.3% 66.6%, var(--khg-green) 66.6% 100%);
}
#khg-header .khg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
#khg-header .khg-brand img { width: 32px; height: 32px; flex: none; border-radius: 8px; box-shadow: 0 1px 3px rgba(10,166,184,.18); }
#khg-header .khg-words { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#khg-header .khg-group { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--khg-cyan); }
#khg-header .khg-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#khg-header .khg-fa { font-weight: 600; color: var(--khg-ink-2); margin-inline-start: 8px; font-size: 15px; }
#khg-header .khg-spacer { flex: 1; }
#khg-clear {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 700; color: #2F7A43;
  background: var(--khg-leaf-1); border: 1px solid var(--khg-leaf-edge); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease;
}
#khg-clear:hover { background: var(--khg-leaf-2); box-shadow: 0 2px 8px rgba(67,160,90,.18); }
#khg-clear:focus-visible, #khg-header .khg-brand:focus-visible { outline: 2px solid var(--khg-cyan); outline-offset: 2px; }
#khg-clear[hidden] { display: none; }
#khg-clear[disabled] { opacity: .6; cursor: progress; }
#khg-clear svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  #khg-header { gap: 10px; padding: 0 12px; }
  #khg-header .khg-fa, #khg-clear .khg-clear-fa { display: none; }
  #khg-header .khg-title { font-size: 15px; }
}

/* ---------- Metabase's own top bar: lighter, sits under our header ---------- */
[data-testid="app-bar"] { background: var(--khg-paper) !important; border-bottom: 1px solid var(--khg-line) !important; box-shadow: none !important; }

/* ---------- dashboard header + title ---------- */
[data-testid="dashboard-header-container"] { background: transparent !important; }
[data-testid="dashboard-name-heading"] { font-weight: 800 !important; letter-spacing: -.01em; color: var(--khg-ink) !important; }

/* ---------- dashboard tabs only: bold, framed, light green — like website tabs ---------- */
[data-testid="fixed-width-dashboard-tabs"] [role="tablist"] { border-bottom: 2px solid var(--khg-leaf-edge) !important; gap: 6px !important; }
[data-testid="fixed-width-dashboard-tabs"] [role="tab"] {
  color: #2F6B3E !important;
  background: var(--khg-leaf-1) !important;
  border: 1px solid var(--khg-leaf-edge) !important; border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 8px 16px !important; margin-bottom: 0 !important;
  transition: background .15s ease;
}
/* tab names are rendered inside inputs */
[data-testid="fixed-width-dashboard-tabs"] [role="tab"],
[data-testid="fixed-width-dashboard-tabs"] [role="tab"] input { font-weight: 700 !important; color: inherit !important; background-color: transparent; }
[data-testid="fixed-width-dashboard-tabs"] [role="tab"]:hover { background: var(--khg-leaf-2) !important; }
[data-testid="fixed-width-dashboard-tabs"] [role="tab"][aria-selected="true"] {
  background: var(--khg-leaf-3) !important; color: #1F5A30 !important;
  border-color: var(--khg-green) !important;
  box-shadow: inset 0 -3px 0 var(--khg-green) !important;
}

/* ---------- filter bar: white strip, chips framed, active filters green ---------- */
[data-testid="dashboard-parameters-widget-container"] {
  background: var(--khg-paper) !important;
  border: 1px solid var(--khg-line) !important; border-radius: var(--khg-radius) !important;
  padding: 8px 10px !important; margin: 6px 0 10px !important;
  box-shadow: 0 1px 2px rgba(46,59,78,.04);
}
[data-testid="parameter-widget"] {
  border-radius: 10px !important; border-color: var(--khg-line) !important; background: var(--khg-paper) !important;
}
[data-testid="parameter-widget"]:hover { border-color: var(--khg-leaf-edge) !important; }

/* ---------- cards: rounded, soft border, gentle lift ---------- */
[data-testid="dashcard"] {
  border-radius: var(--khg-radius) !important;
  border: 1px solid var(--khg-line) !important;
  background: var(--khg-paper) !important;
  box-shadow: 0 1px 2px rgba(46,59,78,.05), 0 2px 10px rgba(46,59,78,.03) !important;
  transition: box-shadow .18s ease, transform .18s ease;
}
[data-testid="dashcard"]:hover { box-shadow: 0 4px 18px rgba(67,160,90,.12) !important; }
[data-testid="dashcard"] h1, [data-testid="dashcard"] h2, [data-testid="dashcard"] h3 { color: var(--khg-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  #khg-clear, [data-testid="fixed-width-dashboard-tabs"] [role="tab"], [data-testid="dashcard"] { transition: none !important; }
}