/*
 * Patronus-Plattform Dashboard-Stylesheet (A2-PR-6b).
 *
 * Quelle: 1:1-Extraktion aus dem Concord-Bestands-Dashboard
 *   (Budget-Dashboard_2026-05-11(1).html, OneDrive\KI\Kosten-Dashboard Concord Scan\Archiv\).
 *
 * Mapping Bestands-HTML -> Plattform-EJS:
 *   .container       -> .content
 *   header           -> .site-header
 *   .title           -> .brand
 *   .header-right    -> .user-nav
 *   .subtitle        -> .dashboard__subtitle
 *   .kpi-grid        -> .dashboard__kpis
 *   .kpi             -> .kpi-card
 *   .kpi.hero        -> .kpi-card--hero
 *   .kpi .label      -> .kpi-card__label
 *   .kpi .value      -> .kpi-card__value
 *   .chart-row       -> .dashboard__charts
 *   .chart-card      -> .chart
 *   .chart-card h3   -> .chart__caption
 *   .table-card      -> .dashboard__entries
 *   table            -> .entries
 *   .status-bar      -> .status-bar (unverändert)
 *
 * Spec §10.3: desktop-first, keine Mobile-Optimierung in A2.
 */

/* === Montserrat Variable Font (Spec §10.2, self-hosted) === */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/Montserrat/Montserrat-VariableFont_wght.woff2') format('woff2');
}

/* === Design-Tokens === */
:root {
  --bg: #ffffff;
  --bg-elev: #faf8f3;
  --bg-elev2: #f2eee4;
  --line: #d6d0c2;
  --line-soft: #e8e3d6;
  --text: #000000;
  --text-dim: #4a463d;
  --text-mute: #8a8478;
  --accent: #9c8a66;
  --accent-soft: #c4b694;
  --warn: #b8702e;
  --good: #4a7a3e;
  --danger: #c2342f;
}

/* === Reset === */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #7a6b4f; }

/* === Header + Content === */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.user-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.user-name {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 12px;
}

.user-nav__logout-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.user-nav__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px;
  color: var(--text-mute);
  cursor: pointer;
  line-height: 0;
}

.user-nav__logout:hover {
  color: var(--accent);
}

.content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}

/* === Dashboard-Sektion === */
.dashboard__header {
  margin-bottom: 24px;
}

.dashboard__header h1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.dashboard__subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 4px;
}

/* === KPI-Reihe (Spec §8.2: hero + 3 normale Karten) === */
.dashboard__kpis {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 32px;
}

.kpi-card {
  background: var(--bg-elev);
  padding: 24px 28px;
  position: relative;
}

.kpi-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 14px;
  font-weight: 500;
}

.kpi-card__value {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 300;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kpi-card--hero .kpi-card__value {
  font-size: 56px;
  color: var(--accent);
}

/* === Chart-Reihe === */
.dashboard__charts {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.chart {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 20px 24px;
}

.chart__caption {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text);
}

/* Optionaler Untertitel unter dem Chart-Caption (Session-7-Tour-Wunsch:
   "Stunden je Kalenderwoche" beim Admin-Wochenaufwand-Chart). Kleiner,
   uppercase, Patronus-Mute-Farbe -- analog Bestands-HTML-Mockup. */
.chart__subtitle {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 4px;
  font-weight: 400;
}

/* Wrapper-DIV um <canvas> gibt die feste Hoehe vor (Chart.js-Empfehlung
   bei responsive=true + maintainAspectRatio=false). Direktes height auf
   <canvas> wird sonst von Chart.js per inline-style ueberschrieben und
   kann ueber den Container hinaus rendern. */
.chart__canvas-wrap {
  position: relative;
  height: 320px;
}

.chart canvas {
  display: block;
}

/* === Tabelle Tätigkeiten + Imports === */
.dashboard__entries {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 20px 24px;
  margin-bottom: 32px;
}

.dashboard__entries h2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 16px;
}

.entries,
.imports {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.entries thead th,
.imports thead th {
  text-align: left;
  padding: 8px 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.entries tbody td,
.imports tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.entries tbody tr:hover {
  background: var(--bg-elev2);
}

/* Imports-Tabelle: keine Hover-Affordance, weil Zeilen aktuell keinen
   Detail-View haben. Verhindert die "sieht klickbar aus, tut aber
   nichts"-Erwartungsfalle aus der UI-Tour. */
.imports tbody tr {
  cursor: default;
}

/* === Status-Bar (Spec §8.2) === */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  margin-bottom: 24px;
  font-size: 12px;
}

.status-bar__label {
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.status-bar__file {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color: var(--text-dim);
}

.status-bar__time,
.status-bar__count {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color: var(--text-dim);
}

.status-bar__customer {
  margin-left: auto;
  color: var(--text-dim);
  font-style: italic;
}

.status-bar__status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
}

.status-bar__status--success {
  color: var(--good);
  border-color: var(--good);
}

.status-bar__status--failed {
  color: var(--danger);
  border-color: var(--danger);
}

.status-bar__empty {
  color: var(--text-mute);
  font-style: italic;
}

/* === Customer-Picker (Admin landet hier) === */
.picker {
  max-width: 800px;
}

.picker h1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.picker__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.picker__item {
  background: var(--bg-elev);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background 0.15s ease;
}

.picker__item:hover {
  background: var(--bg-elev2);
}

.picker__item a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  color: var(--text);
}

.picker__item a:hover {
  color: var(--accent);
}

.picker__name {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.picker__subtitle {
  color: var(--text-dim);
  font-size: 12px;
}

.picker__status {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid var(--line);
}

.picker__status--success {
  color: var(--good);
  border-color: var(--good);
}

.picker__status--failed {
  color: var(--danger);
  border-color: var(--danger);
}

.picker__status--none {
  color: var(--text-mute);
}

/* === Admin-Overview === */
.admin-overview h1,
.admin-customer h1,
.admin-imports h1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.admin-overview h2,
.admin-customer h2,
.admin-imports h2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin: 32px 0 16px;
}

.admin-overview__customers-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.admin-overview__customers,
.admin-overview__imports {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.admin-overview__customers li,
.admin-overview__imports li {
  background: var(--bg-elev);
  padding: 12px 16px;
}

.admin-overview__customers li:hover {
  background: var(--bg-elev2);
}

.admin-overview__customers a {
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.admin-overview__customers a:hover {
  color: var(--accent);
}

.admin-overview__customers strong {
  font-weight: 500;
}

.admin-overview__customer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-overview__customer-row > a {
  flex: 1;
}

.admin-overview__customer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-link {
  font-size: 13px;
  color: var(--text-mute);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.action-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.admin-overview__import-form {
  display: inline-flex;
  margin: 0;
}

.admin-overview__archive-form {
  display: inline-flex;
  margin: 0;
}

.admin-overview__archive-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px;
  color: var(--text-mute);
  cursor: pointer;
  line-height: 0;
}

.admin-overview__archive-button:hover {
  color: var(--warn);
}

/* === Banner === */
.banner {
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  margin-bottom: 24px;
  font-size: 13px;
}

.banner--warn {
  border-color: var(--warn);
  background: #fbf2e6;
  color: var(--warn);
}

.banner--warn a {
  color: var(--warn);
  text-decoration: underline;
}

/* === Import-Row (Admin-Overview) === */
.import-row {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1.4fr 0.6fr 2fr;
  gap: 12px;
  align-items: baseline;
  font-size: 12px;
}

.import-row__customer {
  font-weight: 500;
  color: var(--text);
}

.import-row__file {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-row__time {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color: var(--text-dim);
}

.import-row__status {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 500;
}

.import-row--success .import-row__status {
  color: var(--good);
}

.import-row--failed .import-row__status {
  color: var(--danger);
}

.import-row__error {
  color: var(--danger);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Imports-Tabelle === */
/* text-transform: uppercase entfernt -- der formatStatusDe-Helper
   liefert jetzt schon korrekt geschriebene deutsche Labels ("Erfolg"
   statt "success"), zusaetzliches Caps-Lock wuerde "ERFOLG" daraus
   machen und wirkt schreiend. */
.imports__row--success td:nth-child(4) {
  color: var(--good);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.imports__row--failed td:nth-child(4) {
  color: var(--danger);
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* === Admin-Customer Konfig-Form (Spec §11.1) === */
.admin-customer {
  max-width: 640px;
}

.config-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.config-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  font-weight: 500;
}

.config-form input,
.config-form textarea {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 2px;
  width: 100%;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.config-form textarea {
  resize: vertical;
  min-height: 96px;
}

.config-form input:focus,
.config-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.config-form button {
  align-self: flex-start;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: var(--accent);
  color: #ffffff;
  border: 1px solid var(--accent);
  padding: 10px 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.config-form button:hover {
  background: #7a6b4f;
  border-color: #7a6b4f;
}

/* === Util === */
.muted {
  color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 12px;
}

/* === PR-7: Frontend-JS Interaktion === */

.entries__controls {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.entries__search,
.entries__filter {
  flex: 1 1 200px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  border-radius: 2px;
}

.entries__search:focus,
.entries__filter:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.entries thead th[data-sort-key] {
  user-select: none;
}

.entries thead th[aria-sort='ascending']::after {
  content: ' \25B2';
  color: var(--accent);
}

.entries thead th[aria-sort='descending']::after {
  content: ' \25BC';
  color: var(--accent);
}

.entries td.num {
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

.entries__row--out td {
  color: var(--text-mute);
}

.entries__empty {
  text-align: center;
  color: var(--text-mute);
  padding: 16px 8px;
  font-style: italic;
}

.config-form__banner {
  padding: 10px 14px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  font-size: 13px;
  border-radius: 2px;
}

.config-form__banner[data-variant='success'] {
  background: rgba(74, 122, 62, 0.10);
  border-color: var(--good);
  color: var(--good);
}

.config-form__banner[data-variant='error'] {
  background: rgba(184, 112, 46, 0.10);
  border-color: var(--warn);
  color: var(--warn);
}

.config-form__banner[data-variant='info'] {
  background: rgba(156, 138, 102, 0.10);
  border-color: var(--accent);
  color: var(--text-dim);
}

/* Login-Seite (views/auth/login.ejs). Optik portiert aus dem frueheren
   public/login.html, das in PR #15-Folge ersetzt wurde. */
.login-card {
  max-width: 360px;
  margin: 80px auto;
  padding: 32px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.login-card h1 {
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 24px;
}

.login-card label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-mute);
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  font: inherit;
  font-size: 14px;
}

.login-card button {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.login-card button:hover {
  background: #7a6b4f;
  border-color: #7a6b4f;
}

.login-card__error {
  margin: 12px 0 0;
  padding: 8px 10px;
  background: rgba(184, 112, 46, 0.10);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 13px;
}

.config-form__label--invalid > input,
.config-form__label--invalid > textarea {
  border-color: var(--warn);
}

.config-form__error {
  display: block;
  margin-top: 4px;
  color: var(--warn);
  font-size: 12px;
}

/* Frueher (fix(dev-env)) hatte .chart eine feste height: 280px, um den
   Chart.js-ResizeObserver-Loop zu deckeln. Mit dem Wrapper-Pattern
   (.chart__canvas-wrap mit fester Hoehe oben) liest Chart.js die
   Wrapper-Hoehe -- der Loop kann nicht mehr entstehen, weil das Canvas
   nie hoeher rendert als sein Wrapper. Eine erzwungene height auf
   .chart wuerde jetzt im Gegenteil die Charts ueber den Container
   hinauslaufen lassen, wenn Caption + Wrapper hoeher sind.
   position: relative bleibt fuer Chart.js-Tooltip-Anker. */
.chart {
  position: relative;
}