/* ============================================================
   Nimbus — Faktura-App · Paper Aeroplane Studio
   Design aus der Markenfibel/stationery: ruhig, reduziert, pastell.
   Space Grotesk (Marke/Titel/Zahlen), Hanken Grotesk (Text).
   ============================================================ */

/* ---- Schrift (lokal, Website-Subsets) ---- */
@font-face{ font-family:"Hanken Grotesk"; font-weight:400 500; font-display:swap;
  src:url(../assets/fonts/hanken-grotesk-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Hanken Grotesk"; font-weight:400 500; font-display:swap;
  src:url(../assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Space Grotesk"; font-weight:400 500; font-display:swap;
  src:url(../assets/fonts/space-grotesk-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Space Grotesk"; font-weight:400 500; font-display:swap;
  src:url(../assets/fonts/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- Tokens (Markenfibel) ---- */
:root{
  --nacht:#1E2A5A; --creme:#F7F0DC; --blaugrau:#9AA6C9; --papier:#F2F1EC;
  --card:#FFFFFF; --ink:#17160F; --muted:#83806F; --muted-2:#A7A494;
  --line:#E6E3DA; --akzent:#2B3A67; --gold:#B8801A; --kraft:#ECE2CD;
  --gruen:#6F9E7C; --amber:#C8A54E; --rost:#B8776B;
  --sidebar:240px; --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(30,42,90,.06), 0 10px 30px rgba(30,42,90,.08);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--papier); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.sg{ font-family:"Space Grotesk",sans-serif; letter-spacing:-.01em; }
.num{ font-feature-settings:"tnum" 1,"lnum" 1; }
button{ font:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* ============ App-Gerüst ============ */
.app{ display:flex; min-height:100%; }

/* ---- Sidebar ---- */
.side{ width:var(--sidebar); flex:none; background:var(--nacht); color:var(--creme);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh; }
.brand{ display:flex; align-items:center; gap:11px; padding:4px 8px 22px; }
.brand img{ width:30px; height:30px; border-radius:7px; display:block; }
.brand .wm{ font-family:"Space Grotesk"; font-weight:500; font-size:18px; letter-spacing:-.01em; line-height:1; color:#fff; }
.brand .sub{ font-size:9.5px; letter-spacing:.14em; text-transform:lowercase; color:var(--blaugrau); margin-top:3px; }

.nav{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.nav .lbl{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blaugrau);
  opacity:.75; padding:14px 10px 6px; }
.nav a{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--blaugrau); font-weight:500; font-size:13.5px; transition:background .12s, color .12s; }
.nav a svg{ width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; opacity:.9; }
.nav a:hover{ background:rgba(255,255,255,.05); color:var(--creme); }
.nav a.active{ background:rgba(247,240,220,.12); color:#fff; }
.nav a.active svg{ opacity:1; }

.side .foot{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.side .foot .who{ display:flex; align-items:center; gap:9px; padding:6px 8px; font-size:12px; color:var(--blaugrau); }
.side .foot .who .dot{ width:26px; height:26px; border-radius:50%; background:rgba(247,240,220,.14);
  display:grid; place-items:center; font-family:"Space Grotesk"; font-weight:500; color:var(--creme); font-size:11px; }

/* ---- Main ---- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ display:flex; align-items:center; gap:16px; padding:20px 30px; border-bottom:1px solid var(--line);
  background:var(--papier); position:sticky; top:0; z-index:5; }
.topbar h1{ font-family:"Space Grotesk"; font-weight:500; font-size:22px; color:var(--nacht); letter-spacing:-.02em; }
.topbar .spacer{ flex:1; }
.search{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px 12px; width:240px; color:var(--muted); }
.search svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; }
.search input{ border:0; outline:0; background:transparent; font:inherit; color:var(--ink); width:100%; }
.search input::placeholder{ color:var(--muted-2); }

.content{ padding:26px 30px 60px; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:var(--radius-sm);
  padding:9px 15px; font-family:"Space Grotesk"; font-weight:500; font-size:13.5px; letter-spacing:-.01em; transition:background .12s,border-color .12s,transform .04s; }
.btn:active{ transform:translateY(.5px); }
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.btn.primary{ background:var(--nacht); color:#fff; }
.btn.primary:hover{ background:#182350; }
.btn.ghost{ background:var(--card); border-color:var(--line); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--muted-2); }

/* Dropdown */
.menu{ position:relative; }
.menu .pop{ position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; min-width:230px; display:none; z-index:20; }
.menu.open .pop{ display:block; }
.menu .pop button{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:0;
  padding:10px 11px; border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink); }
.menu .pop button:hover{ background:var(--papier); }
.menu .pop button .k{ font-family:"Space Grotesk"; font-weight:500; }
.menu .pop button small{ display:block; color:var(--muted); font-size:11.5px; margin-top:1px; }

/* ---- Filter-Chips ---- */
.filters{ display:flex; gap:7px; margin-bottom:18px; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px;
  padding:6px 13px; font-size:12.5px; font-weight:500; transition:all .12s; }
.chip:hover{ border-color:var(--muted-2); color:var(--ink); }
.chip.active{ background:var(--nacht); border-color:var(--nacht); color:#fff; }
.chip .n{ opacity:.6; margin-left:5px; font-feature-settings:"tnum" 1; }

/* ---- Tabelle ---- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.docs{ width:100%; border-collapse:collapse; }
table.docs th{ text-align:left; font-family:"Hanken Grotesk"; font-weight:500; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); padding:13px 18px; border-bottom:1px solid var(--line); background:#fcfbf8; }
table.docs th.r, table.docs td.r{ text-align:right; }
table.docs td{ padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.docs tr:last-child td{ border-bottom:0; }
table.docs tbody tr{ transition:background .1s; cursor:pointer; }
table.docs tbody tr:hover{ background:#fcfbf7; }
.docnr{ font-family:"Space Grotesk"; font-weight:500; color:var(--nacht); font-feature-settings:"tnum" 1,"lnum" 1; }
td .type{ display:block; font-family:"Hanken Grotesk"; font-weight:500; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2); margin-top:3px; }
.kunde{ font-weight:500; color:var(--ink); }
.betreff{ color:var(--muted); font-size:13px; }
.datum{ color:var(--muted); font-feature-settings:"tnum" 1; white-space:nowrap; }
.betrag{ font-family:"Space Grotesk"; font-weight:500; color:var(--ink); font-feature-settings:"tnum" 1,"lnum" 1; white-space:nowrap; }

/* ---- Status-Pills ---- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.entwurf{ background:#f0efe9; color:#8a8775; }
.pill.offen{ background:#f6efd9; color:#a07d1e; }
.pill.angenommen{ background:#e6efe8; color:#4f7d5e; }
.pill.abgelehnt{ background:#f4e7e4; color:#a05d50; }
.pill.bezahlt{ background:#e6efe8; color:#2f5e42; }

/* ---- Empty state ---- */
.empty{ text-align:center; padding:70px 20px; color:var(--muted); }
.empty .ico{ width:54px; height:54px; margin:0 auto 16px; color:var(--muted-2); }
.empty .ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.3; }
.empty h3{ font-family:"Space Grotesk"; font-weight:500; font-size:17px; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.empty p{ max-width:360px; margin:0 auto 20px; }

/* ---- Platzhalter-Ansichten ---- */
.soon{ padding:60px 20px; text-align:center; color:var(--muted); }
.soon .tag{ display:inline-block; font-family:"Hanken Grotesk"; font-weight:500; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--akzent); background:var(--kraft); padding:5px 11px; border-radius:999px; margin-bottom:14px; }
.soon h3{ font-family:"Space Grotesk"; font-weight:500; font-size:18px; color:var(--ink); margin-bottom:6px; }

/* Demo-Hinweis */
.demo-note{ font-size:11.5px; color:var(--muted-2); margin:14px 2px 0; display:flex; align-items:center; gap:7px; }
.demo-note::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); }

.view{ display:none; }
.view.active{ display:block; }

@media (max-width:820px){
  :root{ --sidebar:62px; }
  .brand .wm,.brand .sub,.nav .lbl,.nav a span,.side .foot .who span{ display:none; }
  .brand{ justify-content:center; padding:4px 0 18px; }
  .nav a{ justify-content:center; }
  .topbar,.content{ padding-left:18px; padding-right:18px; }
  .search{ width:150px; }
}