/* ============================================================
   Praxis-Buchhaltung — Shared stylesheet
   Klingberg Design System · variant: Rounded · green=Lime · accent=Mint
   Single entry point: design tokens (:root) + components.
   Reused across every page. Theme it all from here.
   ============================================================ */

/* ---- Webfonts (Nunito = headings, Nunito Sans = body/UI) ---- */
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   DESIGN TOKENS  (theme everything from here)
   ============================================================ */
:root {
  /* --- Markengrün · Lime (primary ramp) --- */
  --green-50:#f3f8e9; --green-100:#e4f0cf; --green-200:#cce2a3; --green-300:#b1d275;
  --green-400:#9cc850; --green-500:#8DBE3D; --green-600:#6f9e2c; --green-700:#567c22;
  --green-800:#45631e; --green-900:#2f4416;
  --brand:var(--green-500); --brand-strong:var(--green-700); --brand-deep:var(--green-900);

  /* --- Akzent · Mint --- */
  --mint-soft:#e3f4f0; --mint:#2FA593; --mint-ink:#0f5a50;
  --accent:var(--mint); --accent-soft:var(--mint-soft); --accent-ink:var(--mint-ink); --accent-on:#ffffff;

  /* --- Warm neutrals --- */
  --n-00:#ffffff; --n-25:#faf9f5; --n-100:#f2f1ea; --n-200:#e6e5dc;
  --n-300:#cbcabf; --n-500:#8a8a7e; --n-700:#56564d; --n-900:#23231d;

  /* --- Semantic signals --- */
  --success:#567c22; --success-soft:#eaf2d8;
  --warning:#E0A92E; --warning-soft:#fbf0d6;
  --danger:#D2553C; --danger-soft:#f8e5df;

  /* --- Functional aliases --- */
  --bg:var(--n-25); --surface:var(--n-00); --surface-soft:var(--green-50);
  --ink:var(--n-900); --muted:#6f6f64; --line:var(--n-200); --link:var(--accent-ink);
  --selection-bg:#cfe69b; --selection-fg:#2f4416;

  /* Money colours — restrained, not oversaturated */
  --money-pos:var(--green-700);
  --money-neg:#b8492f; /* derived: slightly deeper than --danger for legibility on light */

  /* --- Type --- */
  --font-head:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800; --fw-black:900;
  --fs-display:56px; --fs-h1:40px; --fs-h2:34px; --fs-h3:22px; --fs-h4:18px;
  --fs-body-lg:17px; --fs-body:16px; --fs-sm:14px; --fs-caption:12px; --fs-eyebrow:12px;
  --lh-tight:1.02; --lh-snug:1.1; --lh-head:1.2; --lh-body:1.6; --lh-loose:1.7;
  --ls-head:-0.01em; --ls-display:-0.02em; --ls-caption:0.04em; --ls-eyebrow:0.18em;

  /* --- Spacing --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-18:74px; --space-24:96px;
  --gutter:28px; --content-max:1100px;

  /* --- Radii --- */
  --radius-xs:8px; --radius-sm:9px; --radius-md:11px; --radius-lg:16px;
  --radius-xl:18px; --radius-pill:999px;
  --input-radius:10px; --button-radius:11px; --card-radius:18px;

  /* --- Elevation & borders --- */
  --border:1px solid var(--line);
  --shadow-xs:0 1px 2px rgba(40,50,20,.06);
  --shadow-sm:0 4px 14px -6px rgba(40,50,20,.20);
  --shadow-md:0 12px 30px -18px rgba(40,50,20,.30);
  --shadow-lg:0 24px 50px -26px rgba(40,50,20,.40);
  --shadow-xl:0 30px 70px -40px rgba(40,50,20,.40);
  --focus-ring:0 0 0 3px var(--mint-soft);

  --mark:url('assets/klingberg-mark.svg');
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--fw-regular);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ font-family:var(--font-head); color:var(--brand-deep); margin:0 0 .5em; line-height:var(--lh-head); }
h1{ font-size:var(--fs-h1); font-weight:var(--fw-extra); letter-spacing:var(--ls-head); }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-bold); letter-spacing:var(--ls-head); }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-semibold); }
h4{ font-size:var(--fs-h4); font-weight:var(--fw-bold); }
p{ margin:0 0 1em; text-wrap:pretty; }
a{ color:var(--link); text-decoration-color:var(--accent); text-underline-offset:3px; }
strong{ font-weight:var(--fw-bold); }
small{ font-size:var(--fs-sm); }
::selection{ background:var(--selection-bg); color:var(--selection-fg); }

.kb-eyebrow{
  font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--accent); margin:0;
}
.kb-mark{
  display:inline-block; -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat; background:var(--brand);
}
.muted{ color:var(--muted); }
.tnum{ font-variant-numeric:tabular-nums; }

/* ============================================================
   APP SHELL — top nav + flash + content column
   ============================================================ */
.app-nav{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.app-nav__inner{
  max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:var(--space-6); height:64px;
}
.app-nav__brand{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  white-space:nowrap;
}
.app-nav__brand .kb-mark{ width:40px; height:40px; background:var(--brand-strong); }
.app-nav__brand .brand-lines__name{ font-size:16px; }

/* Two-line practice brand: eyebrow over owner name. Shared by nav + login. */
.brand-lines{ display:flex; flex-direction:column; line-height:1.12; }
.brand-lines__eyebrow{
  font-family:var(--font-head); font-weight:var(--fw-semibold); font-size:10px;
  text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--muted);
}
.brand-lines__name{
  font-family:var(--font-head); font-weight:var(--fw-extra); font-size:18px;
  color:var(--brand-deep); letter-spacing:var(--ls-head);
}
.app-nav__links{
  display:flex; align-items:center; gap:2px; flex:1; min-width:0;
  overflow:visible; scrollbar-width:none;
}
.app-nav__links::-webkit-scrollbar{ display:none; }
.app-nav__link{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:var(--radius-md);
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:14px;
  color:var(--n-700); text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.app-nav__link:hover{ background:var(--green-50); color:var(--brand-strong); }
.app-nav__link.is-active{ background:var(--brand-strong); color:#fff; }
.app-nav__link:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.app-nav__user{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-size:14px; color:var(--muted);
}
.app-nav__user b{ color:var(--ink); font-weight:var(--fw-bold); }

/* --- Nav tools: icon buttons + dropdown menus --- */
.app-nav__tools{ display:flex; align-items:center; gap:6px; flex:none; }
.nav-menu{ position:relative; }
.nav-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:14px; color:var(--n-700);
  background:transparent; border:1.5px solid transparent; border-radius:var(--radius-md);
  padding:7px 10px; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-btn:hover{ background:var(--green-50); color:var(--brand-strong); }
.nav-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.nav-btn svg{ width:18px; height:18px; }
.nav-btn--icon{ padding:8px; }
.nav-menu.is-open > .nav-btn{ background:var(--green-50); color:var(--brand-strong); }
.nav-btn.is-active{ background:var(--brand-strong); color:#fff; }
.nav-btn__chev{ width:15px !important; height:15px !important; color:var(--n-500); transition:transform .15s ease; }
.nav-menu.is-open .nav-btn__chev{ transform:rotate(180deg); }
.nav-avatar{
  width:28px; height:28px; flex:none; border-radius:50%; background:var(--brand-strong); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:var(--fw-extra); font-size:11px; letter-spacing:.02em;
}
.nav-btn--user .nav-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:6px; opacity:0; transform:translateY(-6px);
  pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.nav-menu.is-open .menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.menu--start{ left:0; right:auto; }
.menu__header{
  padding:8px 12px 9px; font-size:12px; color:var(--muted); line-height:1.4;
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.menu__header b{ display:block; color:var(--ink); font-size:13px; font-weight:var(--fw-bold); }
.menu__item{
  /* flex-start statt center: bei umbrechenden Labels („Webmail Verwaltung")
     sitzt das Icon an der ersten Zeile statt mittig im Zweizeiler. */
  display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:var(--fw-semibold); color:var(--ink); text-decoration:none;
  background:transparent; border:none; width:100%; cursor:pointer; text-align:left;
  transition:background .12s ease, color .12s ease;
}
.menu__item svg{ width:17px; height:17px; color:var(--n-500); flex:none; margin-top:1px; }
.menu__item:hover, .menu__item:focus-visible{ background:var(--green-50); color:var(--brand-strong); outline:none; }
.menu__item:hover svg, .menu__item:focus-visible svg{ color:var(--brand-strong); }
.menu__item.is-active{ color:var(--brand-strong); }
.menu__item.is-active svg{ color:var(--brand-strong); }
.menu__item--danger{ color:#8c2f1c; }
.menu__item--danger svg{ color:#b8492f; }
.menu__item--danger:hover, .menu__item--danger:focus-visible{ background:var(--danger-soft); color:#8c2f1c; }
.menu__item--danger:hover svg, .menu__item--danger:focus-visible svg{ color:#8c2f1c; }
.menu__sep{ height:1px; background:var(--line); border:none; margin:6px 4px; }

.app-main{ max-width:var(--content-max); margin:0 auto; padding:var(--space-10) var(--gutter) var(--space-24); }

/* Flash area */
.flash-area{ max-width:var(--content-max); margin:0 auto; padding:var(--space-5) var(--gutter) 0; display:flex; flex-direction:column; gap:var(--space-3); }
.flash-area:empty{ padding:0; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header{ margin-bottom:var(--space-8); }
.page-header h1{ margin:0 0 6px; }
.page-header__meta{ color:var(--muted); font-size:var(--fs-body); margin:0; }
.page-header__meta b{ color:var(--ink); font-weight:var(--fw-bold); }
.page-header--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }

/* ============================================================
   ALERTS  /  FLASH BANNERS  /  DISCLAIMER
   ============================================================ */
.alert{
  display:flex; gap:12px; align-items:flex-start;
  border-radius:14px; padding:14px 18px; font-size:14px; line-height:1.55;
}
.alert__icon{ flex:none; width:20px; height:20px; margin-top:1px; }
.alert__icon svg{ width:20px; height:20px; display:block; }
.alert__body{ min-width:0; }
.alert__title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:14px; margin:0 0 3px; }
.alert__body p{ margin:0; font-weight:var(--fw-medium); }
.alert--info{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink); }
.alert--info .alert__title{ color:var(--accent-ink); }
.alert--success{ background:var(--success-soft); border:1px solid var(--success); color:var(--brand-deep); }
.alert--warning{ background:var(--warning-soft); border:1px solid var(--warning); color:#7a5a09; }
.alert--danger{ background:var(--danger-soft); border:1px solid var(--danger); color:#8c2f1c; }
.alert--danger .alert__title{ color:#8c2f1c; }
.alert .alert__close{
  margin-left:auto; flex:none; border:none; background:transparent; cursor:pointer;
  color:inherit; opacity:.6; padding:2px; border-radius:6px; display:inline-flex;
}
.alert .alert__close:hover{ opacity:1; }
.alert .alert__close svg{ width:16px; height:16px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:14px; line-height:1;
  padding:12px 22px; border-radius:var(--button-radius); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn svg{ width:16px; height:16px; }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn--sm{ padding:8px 15px; font-size:13px; border-radius:var(--radius-sm); }
.btn--block{ width:100%; }

.btn--primary{ background:var(--brand-strong); color:#fff; border-color:var(--brand-strong); }
.btn--primary:hover{ background:var(--green-800); border-color:var(--green-800); }
.btn--secondary{ background:var(--surface); color:var(--brand-strong); border-color:var(--brand-strong); }
.btn--secondary:hover{ background:var(--green-50); }
.btn--subtle{ background:transparent; color:var(--accent-ink); border-color:transparent; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; padding-left:10px; padding-right:10px; }
.btn--subtle:hover{ color:var(--mint); background:var(--mint-soft); text-decoration:none; }
.btn--accent{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.btn--accent:hover{ background:var(--mint-ink); border-color:var(--mint-ink); }

.btn:disabled, .btn.is-disabled{
  background:var(--n-100); color:#b4b3a8; border-color:var(--n-100);
  cursor:not-allowed; text-decoration:none;
}
/* loading state */
.btn.is-loading{ color:transparent !important; position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; color:#fff;
  animation:btn-spin .6s linear infinite;
}
.btn--secondary.is-loading::after{ color:var(--brand-strong); }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; }
.field__label, .label{
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:11px; color:var(--muted);
  letter-spacing:.01em;
}
.field__hint{ font-size:12px; color:var(--muted); }
.field__hint.is-error{ color:var(--danger); }

.input, .select-native{
  width:100%; box-sizing:border-box; border:1.5px solid var(--line);
  border-radius:var(--input-radius); padding:10px 13px;
  font-family:var(--font-body); font-size:14px; font-weight:var(--fw-regular);
  color:var(--ink); background:var(--surface); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color:var(--n-300); }
.input:hover, .select-native:hover{ border-color:var(--n-300); }
.input:focus, .select-native:focus{ border-color:var(--brand); box-shadow:var(--focus-ring); }
.input:disabled, .select-native:disabled{ background:var(--n-100); color:var(--n-500); cursor:not-allowed; }
.input.is-invalid{ border-color:var(--danger); }
.input.is-invalid:focus{ box-shadow:0 0 0 3px var(--danger-soft); }

/* amount input — tabular, right aligned, with € suffix */
.input-amount{ position:relative; }
.input-amount .input{ text-align:right; padding-right:30px; font-variant-numeric:tabular-nums; }
.input-amount::after{ content:"€"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:var(--fw-bold); font-size:13px; pointer-events:none; }

/* select — custom chevron, brand border */
.select{ position:relative; }
.select .select-native{ appearance:none; -webkit-appearance:none; border-color:var(--brand); padding-right:38px; cursor:pointer; }
.select .select-native:disabled{ border-color:var(--n-200); }
.select::after{
  content:""; position:absolute; right:13px; top:50%; width:11px; height:11px;
  transform:translateY(-60%) rotate(45deg); border-right:2px solid var(--brand-strong);
  border-bottom:2px solid var(--brand-strong); pointer-events:none;
}

/* checkbox */
.checkbox{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-body); font-weight:var(--fw-medium); font-size:13px; color:var(--ink);
  user-select:none;
}
.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox__box{
  width:18px; height:18px; flex:none; border-radius:5px; background:var(--surface);
  border:1.5px solid var(--n-300); display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.checkbox__box svg{ width:13px; height:13px; color:#fff; opacity:0; }
.checkbox input:checked + .checkbox__box{ background:var(--brand-strong); border-color:var(--brand-strong); }
.checkbox input:checked + .checkbox__box svg{ opacity:1; }
.checkbox input:focus-visible + .checkbox__box{ box-shadow:var(--focus-ring); }
.checkbox input:disabled + .checkbox__box{ background:var(--n-100); border-color:var(--n-200); }
.checkbox:has(input:disabled){ color:var(--n-300); cursor:not-allowed; }

/* ============================================================
   CARDS
   ============================================================ */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius); padding:26px; }
.card--soft{ background:var(--surface-soft); }
.card--accent{ background:var(--accent-soft); border-color:var(--accent); }
.card--pad-sm{ padding:20px; }
.card__icon{
  width:46px; height:46px; border-radius:13px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-soft); color:var(--brand-strong);
}
.card__icon svg{ width:24px; height:24px; }
.card__title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:17px; color:var(--brand-deep); margin:0 0 7px; }

/* ============================================================
   KPI / STAT CARD
   ============================================================ */
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  padding:20px 22px; display:flex; flex-direction:column; gap:6px;
}
.kpi__label{ font-size:13px; font-weight:var(--fw-bold); color:var(--muted); display:flex; align-items:center; gap:8px; }
.kpi__value{ font-family:var(--font-head); font-weight:var(--fw-extra); font-size:30px; color:var(--brand-deep); line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:var(--ls-head); }
.kpi__sub{ font-size:13px; color:var(--muted); }
.kpi__value.is-pos{ color:var(--money-pos); }
.kpi__value.is-neg{ color:var(--money-neg); }
/* attention KPI — actionable, mint-tinted with CTA */
.kpi--attention{ border-color:var(--accent); background:var(--accent-soft); }
.kpi--attention .kpi__label{ color:var(--accent-ink); }
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-5); }
/* A KPI card that occupies two grid slots (e.g. the wider Datensicherung card).
   Falls back to one slot when the grid is only one column wide (mobile). */
.kpi--wide{ grid-column:span 2; }
@media (max-width:560px){ .kpi--wide{ grid-column:span 1; } }
/* Full-row KPI card (Eingangsrechnungen): spans the whole kpi-row. */
.kpi--full{ grid-column:1 / -1; }
/* Posteingang card: one column per mailbox, rows deep-link into Roundcube.
   The block is lazy-loaded via HTMX (IMAP costs ~1s per mailbox). */
.mailprev{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:2px; min-width:0; }
@media (max-width:700px){ .mailprev{ grid-template-columns:1fr; } }
.mailprev__col{ min-width:0; }
.mailprev__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:4px; }
.mailprev__head a{ font-size:13px; font-weight:var(--fw-bold); }
.mailprev__row{ display:block; padding:5px 0; border-top:1px solid var(--line); text-decoration:none; }
.mailprev__meta{ display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--ink); }
.mailprev__meta b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mailprev__when{ color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; }
.mailprev__subj{ display:block; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mailprev__row:hover .mailprev__subj{ color:var(--ink); }

/* ============================================================
   TOOLBAR / FILTER BAR
   ============================================================ */
.toolbar{
  display:flex; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 20px; margin-bottom:var(--space-6);
}
.toolbar .field{ min-width:150px; }
.toolbar__field--grow{ flex:1; min-width:200px; }
.toolbar__actions{ display:flex; gap:var(--space-3); margin-left:auto; }
.toolbar__sep{ flex-basis:100%; height:0; }

/* ============================================================
   DATA TABLE
   ============================================================ */
.table-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
}
.table-scroll{ overflow:auto; max-height:none; }
/* Gekürzte Tabellen: Ausblend-Verlauf mit zentriertem „Alle anzeigen"-Button */
.table-fade{ position:relative; }
.table-fade__more{
  position:absolute; left:0; right:0; bottom:0; height:110px;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:var(--space-3);
  background:linear-gradient(to bottom, transparent, var(--surface) 80%);
  pointer-events:none;
}
.table-fade__more .btn{ pointer-events:auto; box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table thead th{
  position:sticky; top:0; z-index:2; background:var(--green-50); color:var(--brand-deep);
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:12px;
  letter-spacing:.02em; text-transform:uppercase; text-align:left;
  padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.table thead th a{ color:inherit; text-decoration:none; }
.table thead th a:hover{ color:var(--brand); }
.table thead th .th-arrow{ font-size:10px; opacity:.7; }
.table thead th.num a{ display:inline-flex; align-items:center; gap:4px; }
.table tbody td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink); }
.table tfoot td{ padding:14px 16px; }  /* footer/sum rows had no padding → content sat flush against the rounded edge */
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr{ transition:background .12s ease; }
.table tbody tr:hover{ background:var(--green-50); }
.table--zebra tbody tr:nth-child(even){ background:#fcfbf6; }
.table--zebra tbody tr:nth-child(even):hover{ background:var(--green-50); }
/* density */
.table--compact thead th{ padding:9px 14px; }
.table--compact tbody td, .table--compact tfoot td{ padding:9px 14px; }
.table--roomy thead th{ padding:16px 20px; }
.table--roomy tbody td{ padding:18px 20px; }
/* numeric columns */
.table .num, .table th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table__sum-row td{ border-top:2px solid var(--brand); font-weight:var(--fw-bold); background:var(--green-50); }
.table__sum-row td:first-child{ color:var(--brand-deep); }

/* cell helpers */
.cell-primary{ font-weight:var(--fw-bold); color:var(--ink); }
.cell-sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.cell-middle{ vertical-align:middle; }
.cell-truncate{ display:block; max-width:440px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* which own bank account a row's transaction sits on (Prüfung queue) */
.acct-chip{ display:block; width:fit-content; margin-top:4px; padding:1px 8px; border-radius:999px;
  font-size:11px; font-weight:var(--fw-semibold); background:var(--n-100); color:var(--n-700); white-space:nowrap; }
.acct-chip--reserve{ background:var(--green-100); color:var(--brand-strong); }
.cell-date{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--n-700); }
/* Buchungen archive: give each column a sensible share; Belegnr. gets room and
   never wraps, the description column absorbs the rest. */
#buchungen-table .col-beleg{ white-space:nowrap; }

/* ============================================================
   AMOUNT  (money figure + badge)
   ============================================================ */
.amount{ font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); white-space:nowrap; }
.amount--pos{ color:var(--money-pos); }
.amount--neg{ color:var(--money-neg); }
.amount-badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); font-size:13px; white-space:nowrap;
}
.amount-badge--pos{ background:var(--success-soft); color:var(--money-pos); }
.amount-badge--neg{ background:var(--danger-soft); color:var(--money-neg); }

/* ============================================================
   BADGE / CHIP
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body);
  font-weight:var(--fw-bold); font-size:11px; line-height:1; letter-spacing:.01em;
  padding:5px 11px; border-radius:var(--radius-pill); border:1px solid transparent;
}
.badge svg{ width:13px; height:13px; }
/* Volle-Breite-Streifen in der Prüfung (erkannte Rechnung, Beleg-Auswahl):
   die Trennlinie zwischen Umsätzen zieht die Zeilen-GRUPPE, nicht jede
   Einzelzeile — so gehören Streifen optisch zu ihrem Umsatz. */
tbody.queue-group{ border-bottom:1px solid var(--line); }
tbody.queue-group td{ border-bottom:0; }
.opmatch-row > td, .beleg-row > td{ padding:0 16px 10px; }
.op-strip{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 14px; border-radius:var(--radius, 8px); font-size:13px; }
.op-strip--ok{ background:var(--success-soft); }
.op-strip--diff{ background:var(--warning-soft); }
.op-strip--beleg{ background:var(--n-100); margin-top:6px; }
/* Beleg-Bereich eingeklappt: dezenter Link, aufklappbar (native details) */
.beleg-details > summary{ cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.beleg-details > summary::-webkit-details-marker{ display:none; }
.beleg-details > summary:hover{ color:var(--ink); text-decoration:underline; }
.beleg-details > summary svg{ width:13px; height:13px; }
.beleg-slot--summary:not(:empty){ color:var(--success); font-weight:var(--fw-bold); }
.op-strip__spacer{ flex:1; }
/* Pill als Button mit Entfernen-× (Belegarchiv: Kennzeichen abwählen) */
button.badge{ cursor:pointer; }
.badge__x{ opacity:.5; }
button.badge:hover .badge__x{ opacity:1; }
.badge--brand{ background:var(--green-50); color:var(--brand-strong); }
.badge--accent{ background:var(--accent-soft); color:var(--mint-ink); }
.badge--neutral{ background:var(--n-100); color:var(--n-700); }
.badge--success{ background:var(--success-soft); color:var(--success); }
.badge--warning{ background:var(--warning-soft); color:#7a5a09; }
.badge--danger{ background:var(--danger-soft); color:#8c2f1c; }
.badge--outline{ background:var(--surface); color:var(--brand-strong); border-color:var(--brand); }

/* ============================================================
   INLINE ROW-FORM  (last cell of Prüfung table)
   ============================================================ */
.row-form{ display:flex; flex-direction:column; gap:8px; min-width:280px; }
.row-form__controls{ display:flex; gap:8px; align-items:stretch; }
.row-form__controls .select{ flex:1; min-width:180px; }
.row-form__controls .select .select-native{ padding-top:8px; padding-bottom:8px; font-size:13px; }
.row-form__controls .btn{ flex:none; }
/* Prüfung: the Kategorisieren column carries a whole booking form (~330px). The
   shared .cell-truncate 440px cap pushed this 5-col table past --content-max, so
   the action column overflowed and clipped. Cap the purpose column on this table
   only — and WRAP instead of ellipsis: der Verwendungszweck trägt oft die
   Rechnungsnummer, die man beim Kategorisieren lesen muss. overflow-wrap:
   anywhere, weil Bank-Zwecke lange Strings ohne Leerzeichen sind. */
#pruefung-table .cell-truncate{
  max-width:240px; white-space:normal; overflow-wrap:anywhere;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:64px 24px; gap:14px;
}
.empty__icon{
  width:64px; height:64px; border-radius:50%; background:var(--green-50);
  display:flex; align-items:center; justify-content:center; color:var(--brand-strong);
}
.empty__icon svg{ width:30px; height:30px; }
.empty__title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:20px; color:var(--brand-deep); margin:0; }
.empty__text{ color:var(--muted); margin:0; max-width:36ch; }

/* ============================================================
   MODULE GRID (dashboard hub)
   ============================================================ */
.module-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--space-5); }
.tile{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  padding:22px; color:var(--ink);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--green-200); }
.tile:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.tile__icon{
  width:46px; height:46px; border-radius:13px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-soft); color:var(--brand-strong);
}
.tile__icon svg{ width:24px; height:24px; }
.tile__title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:17px; color:var(--brand-deep); }
.tile__desc{ font-size:13.5px; color:var(--muted); line-height:1.5; }

/* ============================================================
   SECTION HEADINGS / LAYOUT HELPERS
   ============================================================ */
.section{ margin-top:var(--space-10); }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); }
.section__head h2{ font-size:var(--fs-h3); margin:0; }
.stack{ display:flex; flex-direction:column; gap:var(--space-6); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.divider{ height:1px; background:var(--line); border:none; margin:var(--space-8) 0; }

/* big balance display (Kassenbuch) */
.balance{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  padding:24px 28px; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); flex-wrap:wrap;
}
.balance__label{ font-size:13px; font-weight:var(--fw-bold); color:var(--muted); margin:0 0 4px; text-transform:uppercase; letter-spacing:.04em; }
.balance__value{ font-family:var(--font-head); font-weight:var(--fw-extra); font-size:42px; color:var(--brand-deep); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:var(--ls-head); }
.balance__value.is-neg{ color:var(--money-neg); }

/* simple CSS bar chart (Auswertungen) */
.barchart{ display:flex; align-items:flex-end; gap:14px; height:180px; padding:8px 4px 0; }
.barchart__col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.barchart__bar{ width:100%; max-width:46px; border-radius:8px 8px 0 0; background:var(--brand); min-height:4px; transition:height .3s ease; }
.barchart__bar.is-neg{ background:var(--money-neg); opacity:.85; }
/* Planspiel: simulierter Mehrumsatz als heller Aufsatz auf dem Ist-Balken */
.barchart__bar--sim{ background:var(--accent); margin-bottom:-8px; }
.barchart__bar--sim + .barchart__bar{ border-radius:0; }
.barchart__label{ font-size:12px; color:var(--muted); font-weight:var(--fw-semibold); }
.barchart__val{ font-size:11px; color:var(--n-700); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); }

/* GOT-Vergleich: Laborwert-Balken — Spanne = gesetzlicher Rahmen 1×–3×,
   Punkt = Marcs Ist-Faktor. Drittel-Schraffur als niedrig/mittel/hoch-Anker. */
.gotbar{ position:relative; width:110px; height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(to right, var(--warning-soft) 33%, var(--n-100) 33% 67%, var(--success-soft) 67%);
  border:1px solid var(--line); display:inline-block; vertical-align:middle; }
.gotbar__dot{ position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px;
  border-radius:50%; border:2px solid var(--surface); box-shadow:var(--shadow-xs); background:var(--n-500); }
.gotbar__dot--unter{ background:var(--danger); }
.gotbar__dot--niedrig{ background:var(--warning); }
.gotbar__dot--mittel{ background:var(--n-500); }
.gotbar__dot--hoch{ background:var(--success); }
.gotbar-label{ display:block; font-size:12px; margin-top:2px; color:var(--muted); }
.gotbar-label--unter{ color:var(--money-neg); font-weight:var(--fw-bold); }

/* responsive */
@media (max-width:780px){
  .grid-2{ grid-template-columns:1fr; }
  .app-nav__inner{ gap:var(--space-3); }
  .toolbar__actions{ margin-left:0; width:100%; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   AUTH — standalone login page (no app nav)
   ============================================================ */
.auth-body{ min-height:100vh; display:grid; place-items:center; padding:var(--gutter); }
.auth-wrap{ width:100%; max-width:380px; }
.auth-card{ display:flex; flex-direction:column; gap:var(--space-4); }
.auth-brand{ display:flex; align-items:center; gap:14px; }
.auth-brand .kb-mark{ width:52px; height:52px; background:var(--brand-strong); }
.auth-brand .brand-lines__eyebrow{ font-size:11px; }
.auth-brand .brand-lines__name{ font-size:21px; }