/* Tricora TeamPlay - frontend, ported from the pilot.
   Chat-first shell: a collapsible sidebar (Chat / Favorieten / Dashboards),
   a main view, and a chat drawer that can be opened from any other view. */

:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #e3e6ef;
  --border-strong: #d5d9e3;
  --text: #1a1a2e;
  --muted: #6b7280;
  --faint: #9ca3af;
  /* Tricora green. The logo's own mint (#12da8e) cannot be used for interface
     colour: it sits above the usable lightness band and gives only 1.83:1
     against white. These are the nearest steps that carry the brand and still
     pass: white text on --accent is 5.14:1, and --accent-text on --accent-soft
     is 5.84:1. The blue this replaced was 4.34:1 - below AA. */
  --accent: #0a7d57;
  --accent-soft: #e8f5ef;
  --accent-text: #076b4a;
  --on-accent: #ffffff;          /* ink ON an accent-filled button */
  --accent-hover: #096a49;
  --accent-ring: rgba(10, 125, 87, 0.18);
  --accent-glow: rgba(10, 125, 87, 0.35);
  --danger: #c0392b;
  --star: #e5a100;
  --star-soft: #fff9e6;
  --star-border: #f1d98a;
  --chip-text: #2a6b5f;
  --chip-bg: #e6f5f2;
  --chip-border: #bfe3db;
  --code-bg: #fbfcfe;
  --code-head-bg: #f2f4fa;
  --subtle-bg: #eef0f6;
  --handle: #bbbbbb;
  --handle-strong: #aaaaaa;
  --toast-bg: #1a1a2e;
  --toast-text: #ffffff;
  --toast-action: #8fe3c2;
  --chart-grid: #eef0f4;
  --chart-tick: #6b7280;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.13);
  --shadow-drag: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-drawer: -8px 0 30px rgba(0, 0, 0, 0.12);
  --sidebar-w: 248px;
  --drawer-w: 520px;
  --radius: 10px;
}

/* Dark theme. Selected, not an inversion of the light one: each value was
   measured against the dark surface. The differences that matter -
   - the accent is lighter (#16b37c), because the light-mode green is too dark
     to read against a dark panel; and its ink flips to near-black, since white
     on that green is only 2.7:1 while near-black is 7.0:1;
   - body text is #e8eaed at 13.9:1 on the panel, muted #a1a7b0 at 6.9:1;
   - borders lift rather than darken, because a dark panel needs a lighter edge
     to read as an edge at all.
   The chart palette has its own dark steps in app.js for the same reason. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121417;
  --panel: #1b1e23;
  --border: #2b2f36;
  --border-strong: #3a3f48;
  --text: #e8eaed;
  --muted: #a1a7b0;
  --faint: #7c838d;
  --accent: #16b37c;
  --accent-soft: #14312a;
  --accent-text: #4fd3a0;
  --on-accent: #0d1117;
  --accent-hover: #1ec98d;
  --accent-ring: rgba(22, 179, 124, 0.28);
  --accent-glow: rgba(22, 179, 124, 0.32);
  --danger: #ef6a5c;
  --star: #f0b429;
  --star-soft: #3a2f10;
  --star-border: #5c4a17;
  --chip-text: #8fe3c2;
  --chip-bg: #16322b;
  --chip-border: #24503f;
  --code-bg: #15181c;
  --code-head-bg: #1f232a;
  --subtle-bg: #1f232a;
  --handle: #555b64;
  --handle-strong: #6b727c;
  --toast-bg: #2b3039;
  --toast-text: #e8eaed;
  --toast-action: #4fd3a0;
  --chart-grid: #2b2f36;
  --chart-tick: #a1a7b0;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.6);
  --shadow-drag: 0 10px 28px rgba(0, 0, 0, 0.7);
  --shadow-drawer: -8px 0 30px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

/* The browser's own rule for [hidden] is display:none at the weakest possible
   specificity, so any of our display:grid/flex rules silently outranks it and
   the element stays visible while el.hidden reads true. One global guard. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
button { font: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: var(--accent-text); }

/* ---------- app shell ---------- */
.app { display: flex; height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.18s ease;
}
.app.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w)); }

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
/* The mark sits beside the product name, not instead of it: at 24px the
   hexagon reads, the TRICORA wordmark would not. width/height are set on the
   element too, so the sidebar doesn't reflow while the image loads. */
.brand-mark { width: 24px; height: 24px; flex: 0 0 24px; display: block; }
.brand-name { font-weight: 700; font-size: 0.95rem; }
.brand-sub { font-size: 0.7rem; color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; }
.brand-env { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #b45309; font-weight: 700; }

.icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent-text); }

.nav { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}
.nav-item:hover { background: var(--accent-soft); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item .nav-icon { width: 1.2rem; text-align: center; font-size: 1rem; }
.nav-sub { display: flex; flex-direction: column; gap: 0.1rem; margin: 0.1rem 0 0.4rem 1.6rem; }
.nav-sub .nav-item { padding: 0.4rem 0.6rem; font-size: 0.86rem; font-weight: 400; color: var(--muted); }
.nav-sub .nav-item[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.nav-sub .nav-add { color: var(--accent-text); font-size: 0.82rem; }
.nav-sub .nav-add:hover { text-decoration: underline; background: none; }
.nav-inline-form { display: flex; gap: 0.3rem; padding: 0.2rem 0.4rem; }
.nav-inline-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.sidebar-foot { padding: 0.75rem 0.9rem; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--faint); line-height: 1.4; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.topbar h1 { font-size: 1.05rem; }
.topbar .spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 0.4rem; }
/* The theme toggle sits last in the top bar, so it is in the same corner on
   every screen. It carries the brand green rather than the muted icon colour,
   because it is the one control that is always there. Each icon shows the mode
   you would switch TO, which is the convention every app the user named
   follows. */
.theme-toggle { color: var(--accent-text); }
.theme-toggle:hover { background: var(--accent-soft); color: var(--accent-text); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.view { flex: 1; min-height: 0; overflow-y: auto; }
.view-inner { padding: 1.5rem 1.75rem 3rem; max-width: 1400px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 0.86rem;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent-text); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; border-radius: 6px; }
.btn-star.saved { color: var(--star); border-color: var(--star-border); background: var(--star-soft); }

/* popover menus (dashboard picker, gear panel, favourite naming) */
.pop-anchor { position: relative; display: inline-block; }
.popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 230px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  padding: 0.4rem;
}
.popover.right { left: auto; right: 0; }
.popover-title { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.5rem; }
.popover .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
}
.popover .menu-item:hover { background: var(--accent-soft); }
.popover .menu-item:disabled { color: var(--faint); cursor: default; background: none; }
.popover .menu-item .tick { color: var(--accent-text); font-size: 0.8rem; }
.popover .menu-item.danger { color: var(--danger); }
.popover .menu-sep { border-top: 1px solid var(--border); margin: 0.3rem 0; }
.popover form { display: flex; gap: 0.35rem; padding: 0.3rem 0.4rem; }
.popover form input { flex: 1; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 6px; }
.popover label { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 600; margin: 0.35rem 0.4rem 0.15rem; }
.popover select, .popover input[type="color"] {
  width: calc(100% - 0.8rem);
  margin: 0 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
}
.popover input[type="color"] { height: 1.9rem; padding: 0; cursor: pointer; }
.popover .settings-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; }
/* Series names come from the data and can be long ("40ft High Cube"), so the
   label is clipped rather than allowed to widen the popover. */
.popover .settings-cols label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- chat ---------- */
.view-chat { display: flex; flex-direction: column; }
.chat-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.chat-scroll.empty { justify-content: center; }
.chat-hero { text-align: center; padding: 2rem 1.5rem; max-width: 720px; margin: 0 auto; }
.chat-hero h2 { font-size: 1.7rem; font-weight: 600; margin-bottom: 0.4rem; }
.chat-hero p { color: var(--muted); margin: 0 0 1.4rem; }
.chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.chip {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.85rem;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

.chat-log { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 1.5rem 1rem; max-width: 920px; width: 100%; margin: 0 auto; }
.chat-turn { display: flex; flex-direction: column; gap: 0.8rem; }
.chat-user { align-self: flex-end; max-width: 80%; background: var(--accent-soft); color: var(--text); padding: 0.6rem 0.9rem; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.chat-assistant { display: flex; flex-direction: column; gap: 0.75rem; }
.chat-answer-text { line-height: 1.55; white-space: pre-wrap; }
.chat-answer-text.thinking { color: var(--muted); font-style: italic; }
.chat-error { color: var(--danger); }
.chat-numbers { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.chat-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.chat-composer { padding: 0.75rem 1.5rem 0.4rem; max-width: 920px; width: 100%; margin: 0 auto; }
.composer-box {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  box-shadow: var(--shadow);
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.composer-box textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  max-height: 160px;
  padding: 0.3rem 0;
  background: transparent;
}
.send-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.send-btn:disabled { opacity: 0.5; cursor: default; }
.chat-foot { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.25rem 1.5rem 0.8rem; max-width: 920px; width: 100%; margin: 0 auto; font-size: 0.74rem; color: var(--faint); }
.chat-foot-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.chat-foot button { border: none; background: none; color: var(--accent-text); cursor: pointer; font-size: 0.74rem; padding: 0; }
.chat-foot button:hover { text-decoration: underline; }
/* EU AI Act Art. 50 transparency: the user must be told they are talking to
   an AI, and that its answers can be wrong - kept small but always visible,
   never hidden behind a click, on every screen the chat can appear on. */
.chat-disclaimer { font-size: 0.68rem; color: var(--faint); line-height: 1.4; }

/* provenance under an answer */
.provenance-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.domain-badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.sql-toggle { border: none; background: none; padding: 0; font-size: 0.78rem; color: var(--accent-text); cursor: pointer; }
.sql-toggle:hover { text-decoration: underline; }
.provenance-note { font-size: 0.75rem; color: var(--faint); font-style: italic; }
.sql-panel { margin-top: 0.5rem; display: grid; gap: 0.6rem; }
.sql-block { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--code-bg); }
.sql-block-head { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.6rem; font-size: 0.7rem; color: var(--muted); background: var(--code-head-bg); border-bottom: 1px solid var(--border); }
.sql-copy { border: 1px solid var(--border-strong); background: var(--panel); border-radius: 5px; font-size: 0.7rem; padding: 0.1rem 0.45rem; cursor: pointer; color: var(--accent-text); }
.sql-code { margin: 0; padding: 0.6rem 0.7rem; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 0.74rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ---------- cards: charts, numbers, tables ---------- */
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; min-height: 1.8rem; }
.card-title { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.chart-wrap { position: relative; height: 240px; }
.number-card { min-width: 190px; display: flex; flex-direction: column; justify-content: center; }
.number-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; }
.number-value { font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.number-card .card-head { margin-bottom: 0.15rem; min-height: 0; }
.table-wrap { overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.data th, table.data td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); }
table.data th { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child td { border-bottom: none; }
.table-note { font-size: 0.72rem; color: var(--faint); padding: 0.4rem 0.1rem 0; }
.chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 6rem; font-size: 0.85rem; color: var(--muted); }
.card-error { color: var(--danger); font-size: 0.82rem; }

/* ---------- favourites page ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h2 { font-size: 1.25rem; }
.page-head .sub { color: var(--muted); font-size: 0.86rem; margin-top: 0.2rem; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.fav-card { display: flex; flex-direction: column; gap: 0.5rem; }
.fav-question { font-size: 0.8rem; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-body { min-height: 90px; }
.fav-body .chart-wrap { height: 200px; }
.fav-body .number-value { font-size: 2rem; }
.fav-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.2rem; }
.fav-on { font-size: 0.74rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind-badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.45rem; }
/* favourite folders: breadcrumb, folder tiles, drag and drop */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.crumb { font: inherit; color: inherit; background: none; border: none; padding: 0.05rem 0.25rem; margin: 0 -0.25rem; border-radius: 6px; }
button.crumb { color: var(--muted); cursor: pointer; }
button.crumb:hover { color: var(--accent-text); background: var(--accent-soft); }
.crumb-sep { color: var(--faint); font-weight: 400; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.folder-card { display: flex; align-items: center; gap: 0.65rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.6rem 0.7rem 0.85rem; cursor: pointer; min-width: 0; }
.folder-card:hover { border-color: var(--accent); }
.folder-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.folder-icon { color: var(--muted); display: flex; flex-shrink: 0; }
.folder-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.folder-name { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-meta { font-size: 0.74rem; color: var(--faint); }
.folder-card .inline-edit { font-size: 0.88rem; }
.folder-more { flex-shrink: 0; }
.folder-pick { max-height: 320px; overflow-y: auto; }
.popover-note { padding: 0 0.5rem 0.4rem; font-size: 0.8rem; color: var(--muted); max-width: 260px; }
.drag-handle { cursor: grab; }
.dragging { opacity: 0.45; }
.drop-over { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-text); }
.empty-state { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty-state h3 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--text); }
.inline-edit { font: inherit; font-weight: 600; font-size: 0.86rem; border: 1px solid var(--accent); border-radius: 6px; padding: 0.15rem 0.4rem; width: 100%; }

/* ---------- dashboards ---------- */
.dash-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.dash-head h2 { font-size: 1.25rem; }
.dash-head .spacer { flex: 1; }
.dash-title-input { font: inherit; font-size: 1.25rem; font-weight: 600; border: 1px solid var(--accent); border-radius: 6px; padding: 0.1rem 0.4rem; }
/* A free-placement grid: every card sits at an explicit {x,y,w,h} grid-column/
   grid-row (see placeElement() in app.js), 24 columns wide with 20px rows -
   must match python/dashboards_store.py's COLS/ROW_PX. The grid itself has no
   gap (so pixel<->grid-unit math during drag stays exact); the visible gutter
   between cards instead comes from .dash-item > .card being inset from its
   grid cell. */
.dash-grid { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 20px; gap: 0; margin-top: 1rem; }
.dash-grid-overlay {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(24, 1fr);
  pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 0;
  outline: 1px dashed var(--border-strong); outline-offset: -1px;
  background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 20px);
}
.dash-grid.interacting .dash-grid-overlay { opacity: 1; }
.dash-grid-col { border-left: 1px dashed var(--border); border-right: 1px dashed var(--border); }
.dash-grid-ghost { background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: var(--radius); pointer-events: none; z-index: 2; opacity: 0.7; }
.dash-item { position: relative; z-index: 1; min-width: 0; }
.dash-item.dash-item-active { z-index: 50; }
.dash-item.dash-item-active > .card { box-shadow: var(--shadow-drag); }
.dash-item > .card { position: absolute; inset: 0.5rem; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.dash-item .card-head { margin-bottom: 0.4rem; }
.drag-handle { cursor: grab; font-size: 1.05rem; color: var(--handle); user-select: none; line-height: 1; padding: 0 0.2rem; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.dash-item .chart-wrap { flex: 1; min-height: 0; height: auto; }
.dash-item .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.dash-item .card.number-card { justify-content: flex-start; }
.dash-item .number-value { margin-top: auto; margin-bottom: auto; }
.resize-handle { position: absolute; right: 3px; bottom: 2px; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 0.9rem; color: var(--handle); cursor: nwse-resize; user-select: none; touch-action: none; }
.resize-handle:hover { color: var(--accent); }
.gear-btn { color: var(--handle-strong); font-size: 0.95rem; padding: 0.1rem 0.3rem; }
.gear-btn:hover { color: var(--accent-text); }
.dash-empty { grid-column: 1 / -1; }

/* ---------- filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; background: var(--subtle-bg); border-radius: 8px; }
.filter-rows { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-row { display: flex; align-items: center; gap: 0.25rem; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.1rem 0.25rem 0.1rem 0.45rem; }
.filter-row select { border: none; padding: 0.2rem 0.1rem; background: transparent; font: inherit; font-size: 0.84rem; }
.filter-row-remove { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0.1rem 0.2rem; }
.filter-row-remove:hover { color: var(--danger); }
.filter-add-select { font: inherit; font-size: 0.84rem; color: var(--accent-text); border: 1px dashed var(--border-strong); border-radius: 6px; padding: 0.3rem 0.45rem; background: var(--panel); }
.filter-bar input[type="date"] { font: inherit; font-size: 0.84rem; padding: 0.28rem 0.45rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel); }
.filter-group.inline { display: flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--muted); }
.filter-clear-btn { border: 1px solid var(--border-strong); background: var(--panel); border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.8rem; cursor: pointer; color: var(--muted); }
.filter-clear-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.filter-active-note { font-size: 0.78rem; color: var(--accent-text); }
/* One filter set per domain. The switch only appears on a dashboard that
   holds more than one domain; "Alle" stacks every domain's set, each led by
   its name, and a domain's button shows only that one. A dot marks a domain
   whose filters are active while it is out of view. */
.filter-domains { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; background: var(--panel); }
.filter-domain { font: inherit; font-size: 0.8rem; padding: 0.3rem 0.65rem; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.filter-domain + .filter-domain { border-left: 1px solid var(--border-strong); }
.filter-domain:hover { color: var(--accent-text); }
.filter-domain[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.filter-domain.has-filters::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.35rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.filter-section { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.filter-domains ~ .filter-section { flex-basis: 100%; }
.filter-domain-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); min-width: 7.5rem; }
.ms-wrap { position: relative; }
.ms-toggle { font: inherit; font-size: 0.84rem; padding: 0.2rem 0.35rem; border: none; background: transparent; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--text); }
.ms-toggle:hover { color: var(--accent-text); }
.ms-panel { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 0.25rem; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-pop); padding: 0.4rem 0; max-height: 240px; overflow-y: auto; min-width: 180px; }
.ms-option { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; font-size: 0.84rem; cursor: pointer; white-space: nowrap; }
.ms-option:hover { background: var(--accent-soft); }

/* ---------- chat drawer + floating button ---------- */
.fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 70;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--accent-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fab:hover { background: var(--accent-hover); }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(var(--drawer-w), 100vw);
  z-index: 80;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
}
.drawer-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel); min-height: 56px; }
.drawer-head h2 { font-size: 0.95rem; flex: 1; }
.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer .chat-log, .drawer .chat-composer, .drawer .chat-foot { padding-left: 1rem; padding-right: 1rem; }
.drawer .chat-charts { grid-template-columns: 1fr; }
.drawer .chat-hero h2 { font-size: 1.2rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--toast-bg);
  color: var(--toast-text);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.86rem;
}
.toast button { border: none; background: none; color: var(--toast-action); cursor: pointer; font-weight: 600; padding: 0; }
.toast button:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 75; height: 100vh; }
  .chat-charts { grid-template-columns: 1fr; }
}

/* Signed-in account + sign-out, under the sidebar footer (added with the
   Entra ID login; the pilot page had no concept of an account). */
.sidebar-foot.account { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sidebar-foot.account #account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The running version, small and quiet; hidden where there is none (local). */
.sidebar-foot.app-version { padding: 0.45rem 0.9rem; font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.sidebar-foot.app-version:empty { display: none; }

/* The sign-in gate: the only thing on screen until MSAL reports an account. */
.auth-gate { display: flex; align-items: center; justify-content: center; height: 100vh; }
.auth-gate-card { text-align: center; color: var(--muted); }
/* The sign-in gate is the first thing anyone sees, so it gets the full stacked
   logo rather than the bare mark. */
.auth-gate-logo { width: 128px; height: 128px; display: block; margin: 0 auto 1rem; }
.auth-gate-card .brand-name { display: block; margin-bottom: 0.5rem; }
.auth-gate-text { font-size: 0.9rem; }