/* Apinator design system — doppeltplus brand (red #e52721 on dark #17161a).
   Global stylesheet loaded via importmap('app') on every page. */

:root {
    --brand:#e52721; --brand-hover:#c01f1a; --brand-text:#ff6b63; --brand-text-hover:#ff8a84;
    --bg:#17161a; --panel:#232226; --panel-2:#1a191d; --border:#2e2d31;
    --text:#e8eaed; --muted:#b6bac2; --faint:#9aa0a6;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.5; }
a { color:var(--brand-text); text-decoration:none; }
a:hover { color:var(--brand-text-hover); }
h1 { font-size:1.6rem; margin:0 0 4px; }
h2 { font-size:1.2rem; margin:24px 0 10px; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
code { background:var(--panel-2); color:var(--brand-text-hover); padding:2px 6px; border-radius:5px; font-size:.9em; }

/* Erster Tabstopp: der Sprung an Topbar und Menü vorbei. Er sitzt außerhalb
   des Sichtfelds und kommt erst herein, wenn er den Fokus hat — sichtbar für
   die Tastatur, unsichtbar für alle anderen. `visibility:hidden` wäre falsch:
   dann bekäme er den Fokus gar nicht erst. */
.skip-link {
    position:absolute; left:12px; top:-100px; z-index:100;
    padding:9px 14px; border-radius:0 0 8px 8px;
    background:var(--brand); color:#fff; font-weight:600; font-size:.92rem;
    transition:top .12s ease-out;
}
.skip-link:focus { top:0; }
#inhalt:focus { outline:none; }

/* topbar + nav — burger menu on every viewport: one calm top row with
   brand · search · bell · ☰, the links open as a full-width column below
   and close on navigation (pages are server-rendered). */
.topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 28px; border-bottom:1px solid var(--border); background:var(--panel); }
.topbar .brand { margin-right:auto; }
.topbar .brand img { height:26px; width:auto; display:block; }
/* The menu is grouped by purpose (see templates/ui/layout.html.twig). The gap
   between groups is the whole mechanism — it is what lets the eye land on a
   heading instead of reading fourteen labels — so keep groups further apart
   than the links inside them. Fourteen links plus five headings can outgrow a
   short window, hence the scroll cap rather than an overflowing panel. */
.nav { display:none; order:10; flex:1 1 100%; flex-direction:column; gap:11px; margin-top:6px; padding-top:8px; border-top:1px solid var(--border); max-height:calc(100vh - 84px); overflow-y:auto; scrollbar-width:thin; }
.topbar.nav-open .nav { display:flex; }
.nav-group { display:flex; flex-direction:column; gap:1px; }
.nav-group-label { color:var(--faint); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; padding:0 12px 3px; }
.nav a { color:var(--muted); padding:7px 12px; border-radius:7px; font-weight:500; font-size:.97rem; }
.nav a:hover { background:var(--panel-2); color:var(--text); }
.nav a.active { background:var(--brand); color:#fff; }
/* Der Fokus wird beim Öffnen ins Panel gesetzt — dann muss er auch zu sehen
   sein. Der Standard-Outline des Browsers verschwindet auf dem dunklen Panel
   fast. `:focus-visible`, damit die Maus keinen Ring hinterlässt. */
.nav a:focus-visible, .nav-toggle:focus-visible, .bell:focus-visible {
    outline:2px solid var(--brand-text); outline-offset:2px;
}
.nav .nav-user { margin-top:2px; padding:10px 12px 2px; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; }
.nav-toggle {
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; flex:0 0 auto; font-size:1.25rem; line-height:1;
    background:var(--panel-2); border:1px solid var(--border); border-radius:9px;
    color:var(--text); cursor:pointer;
}
.nav-toggle:hover { border-color:var(--faint); }
.topbar.nav-open .nav-toggle { background:var(--brand); border-color:var(--brand); color:#fff; }

/* global search (topbar) */
.topsearch { flex:0 0 auto; }
.topsearch input { width:170px; max-width:40vw; padding:7px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:.9rem; }
.topsearch input::placeholder { color:var(--faint); }
.topsearch input:focus { outline:none; border-color:var(--brand); width:260px; }

/* list quick-filter toolbar + global-search results */
.toolbar { display:flex; align-items:center; gap:10px; margin:14px 0 10px; flex-wrap:wrap; }
.toolbar .js-filter { max-width:340px; }
.filter-empty { display:none; }
.search-group { margin:22px 0; }
.search-group h2 { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.search-group h2 .count { font-size:.85rem; color:var(--faint); font-weight:500; }
.search-hit { display:block; border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:12px 14px; color:inherit; transition:border-color .15s; }
.search-hit + .search-hit { margin-top:8px; }
a.search-hit:hover { border-color:var(--brand); }
.search-hit .h-title { font-weight:600; color:var(--text); }
.search-hit .h-sub { font-size:.85rem; color:var(--muted); margin-top:2px; }
.search-hit .h-tag { float:right; font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }

.container { width:100%; max-width:none; margin:0; padding:24px 28px 48px; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Reiterleiste eines Moduls (templates/ui/_subnav.html.twig). Steht direkt
   unter der Überschrift, damit die Geschwisterseiten dort erwartet werden, wo
   sie auf jeder Seite des Moduls stehen. */
.subnav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 18px; }

/* 404/403 (templates/bundles/TwigBundle/Exception/). Sie behalten Menü und
   Suche — eine Fehlerseite ohne Weg zurück ist eine Sackgasse. Die
   Sammel-Fehlerseite bringt ihre Stile selbst mit und kommt hier nicht vor. */
.err { max-width:34rem; margin:12vh auto 0; text-align:center; }
.err-code { font-size:3.4rem; font-weight:800; color:var(--brand); margin:0; line-height:1; }
.err h1 { margin:14px 0 8px; }
.err-actions { margin:22px 0 14px; }
.err kbd {
    display:inline-block; padding:1px 6px; border:1px solid var(--border);
    border-bottom-width:2px; border-radius:5px; background:var(--panel-2);
    color:var(--text); font-family:inherit; font-size:.88em;
}
.spread { justify-content:space-between; }
.crumbs { font-size:.9rem; margin-bottom:14px; }
.crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--text); }
.stack > * + * { margin-top:10px; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:.95rem; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--faint); color:var(--text); }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); color:#fff; }
.btn-danger { color:#ffb4b4; border-color:#5a2a2a; }
.btn-danger:hover { background:#3a1717; color:#ffd0d0; }
.btn-sm { padding:5px 10px; font-size:.85rem; }

/* forms */
.field { margin-bottom:14px; }
.field label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:5px; }
.input, select.input, textarea.input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:16px; font-family:inherit; }
.input:focus { outline:none; border-color:var(--brand); }
textarea.input { min-height:90px; resize:vertical; }
.form-narrow { max-width:560px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* panels / cards / tables */
.panel { border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:18px; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table th { color:var(--muted); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.table tr:last-child td { border-bottom:0; }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; }

/* dashboard module grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,260px),1fr)); gap:16px; margin-top:20px; }
.card { display:block; border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:18px; color:inherit; transition:border-color .15s; }
a.card:hover { border-color:var(--brand); }
.card .name { font-weight:600; font-size:1.1rem; }

/* badges */
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.02em; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.b-epic{ background:#2c2150; color:#cbb4ff; border-color:#43356e; }
.b-story{ background:#16321f; color:#9ae6b4; border-color:#2c5a3c; }
.b-task{ background:#16273f; color:#9ec5ff; border-color:#2c4a72; }
.b-bug{ background:#3a1717; color:#ffb4b4; border-color:#5a2a2a; }
.b-subtask{ background:#2a2a2a; color:#c9c9c9; border-color:#444; }
.p-highest,.p-high{ color:#ff8a84; } .p-medium{ color:#ffcf8a; } .p-low,.p-lowest{ color:#9ec5ff; }
.st-todo{ background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.st-in_progress{ background:#16273f; color:#9ec5ff; border-color:#2c4a72; }
.st-in_review{ background:#2c2150; color:#cbb4ff; border-color:#43356e; }
.st-done{ background:#16321f; color:#9ae6b4; border-color:#2c5a3c; }
.ss-future{ background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.ss-active{ background:#16321f; color:#9ae6b4; border-color:#2c5a3c; }
.ss-closed{ background:#232226; color:var(--faint); }

/* kanban board */
.board { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:14px; }
/* horizontally scrolling board for a variable number of columns (sales stages) */
.board-x { display:flex; gap:14px; margin-top:14px; overflow-x:auto; padding-bottom:6px; }
.board-x .col { flex:0 0 270px; }
.col { background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px; min-height:80px; }
.col h3 { margin:0 0 10px; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; justify-content:space-between; }
.icard { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:11px; margin-bottom:10px; transition:border-color .15s; }
.icard:hover { border-color:var(--brand); }
.icard .ikey { font-size:.8rem; color:var(--faint); }
.icard .ititle { display:block; color:var(--text); font-weight:600; margin:2px 0 8px; }
.icard .ititle:hover { color:var(--brand-text); }
.icard .imeta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Pipedrive-style sales board: interlocking chevron stage headers (funnel) +
   slim deal cards. Columns scroll horizontally for any number of stages. */
.pd-board { display:flex; gap:3px; margin-top:16px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.pd-col { flex:0 0 250px; min-width:250px; display:flex; flex-direction:column; }
.pd-head {
    position:relative; background:linear-gradient(#2d323c,#262a32); color:#eef1f5;
    padding:9px 16px 9px 26px; min-height:52px;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
}
.pd-col:first-child .pd-head {
    padding-left:15px; border-radius:7px 0 0 7px;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.pd-head .s-name { display:block; font-size:.82rem; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-head .s-sum { display:block; font-size:.74rem; color:#9fb1c4; margin-top:3px; }
.pd-head .s-sum b { color:#7fd6a0; font-weight:700; }
.pd-list { flex:1; background:var(--panel-2); border:1px solid var(--border); border-top:0; border-radius:0 0 8px 8px; padding:8px; min-height:60px; }
.pd-card { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:9px 11px; margin-bottom:7px; transition:border-color .15s, box-shadow .15s; }
.pd-card:hover { border-color:var(--brand); box-shadow:0 2px 10px rgba(0,0,0,.35); }
.pd-card .t { display:block; font-weight:600; color:var(--text); font-size:.9rem; line-height:1.25; }
.pd-card .t:hover { color:var(--brand-text); }
.pd-card .org { font-size:.82rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-card .foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.pd-card .val { font-weight:700; font-size:.86rem; color:var(--text); }
.pd-av { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; font-size:.66rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.pd-actions { display:none; gap:6px; margin-top:8px; }
.pd-card:hover .pd-actions { display:flex; }
.pd-actions form:first-child { flex:1; }
.pd-actions .input { padding:5px 8px; font-size:.8rem; }
.pd-empty { color:var(--faint); font-size:.82rem; padding:6px 4px; }

/* flash */
.flash { padding:11px 14px; border-radius:9px; margin-bottom:16px; font-weight:500; }
.flash-success { background:#16321f; border:1px solid #2c5a3c; color:#bdf0cd; }
.flash-error { background:#3a1717; border:1px solid #730000; color:#ffb4b4; }
.empty { color:var(--faint); padding:18px; text-align:center; }

/* login */
.login-wrap { max-width:380px; margin:12vh auto 0; padding:0 22px; text-align:center; }
.login-wrap .logo { width:240px; max-width:78%; height:auto; display:block; margin:0 auto 6px; }
.login-form { display:flex; flex-direction:column; gap:12px; margin-top:18px; text-align:left; }
.login-form input { box-sizing:border-box; width:100%; padding:12px; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:16px; }
.login-form input::placeholder { color:var(--faint); }
.login-form input:focus { outline:none; border-color:var(--brand); }
.login-form button { padding:12px; border-radius:8px; border:0; background:var(--brand); color:#fff; font-weight:600; font-size:1rem; cursor:pointer; }
.login-form button:hover { background:var(--brand-hover); }
.alert { background:#3a1717; border:1px solid #730000; color:#ffb4b4; padding:10px 12px; border-radius:8px; margin:14px 0; }

/* KPI tiles (dashboard + module heads) */
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,190px),1fr)); gap:14px; margin:18px 0; }
.kpi { display:block; border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:14px 16px; color:inherit; transition:border-color .15s; }
a.kpi:hover { border-color:var(--brand); color:inherit; }
.kpi-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.kpi-value { font-size:1.55rem; font-weight:700; margin-top:2px; line-height:1.2; }
.kpi-sub { font-size:.85rem; color:var(--faint); margin-top:2px; }
.kpi-alert .kpi-value { color:var(--brand-text); }

/* server-rendered SVG bar charts */
.charts { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,320px),1fr)); gap:16px; margin:18px 0; }
.chart-panel h2 { margin:0 0 12px; font-size:1rem; }
.chart-panel svg { width:100%; height:auto; display:block; }

@media (max-width: 820px) { .board { grid-template-columns:1fr 1fr; } }

/* Hier lag bis zum 16.08.2026 ein drittes Menü-Layout für 701–859 px: eine
   rechtsbündige 320-px-Spalte unter dem Burger. Es ist ersatzlos entfallen.
   Auf einem 800-px-Fenster ließ es die linken 60 % der Breite leer und
   scrollte die fünfzehn Links trotzdem in einem Fenster durch — genau die
   Wand, gegen die das Mega-Panel gebaut wurde. Das Panel wird stattdessen
   schon ab 701 px eingeschaltet (siehe unten); sein Flex-Umbruch macht daraus
   von selbst drei statt fünf Spalten.
   Nebenbei galt die Regel mangels Obergrenze auch im Mega-Panel mit und wurde
   dort nur von der späteren Regel überstimmt — zwei Layouts für dieselbe
   Breite, von denen eines wirkungslos war. */

/* Mobile: tighter search so brand · search · bell · ☰ share one row.
   .m-first pulls a panel (e.g. quick entry) above its siblings once grids
   collapse to one column. */
@media (max-width: 700px) {
    .topsearch { flex:0 1 auto; min-width:0; }
    .topsearch input { width:100%; max-width:36vw; }
    .topsearch input:focus { width:100%; }
}
@media (max-width: 600px) {
    h1 { font-size:1.35rem; }
    .board { grid-template-columns:1fr; }
    .grid-2 { grid-template-columns:1fr; }
    .container { padding:18px 14px 40px; }
    .topbar { padding:10px 14px; }
    .login-wrap { margin-top:8vh; }
    .kpis { grid-template-columns:1fr 1fr; gap:10px; }
    .kpi { padding:12px 13px; }
    .kpi-value { font-size:1.25rem; }
    .charts { grid-template-columns:1fr; }
    .table th, .table td { padding:8px 9px; }
    .m-first { order:-1; }
}

/* ============================================================
   Support / Ticketing module
   ============================================================ */

/* priority + SLA + channel badges */
.badge.prio-p1 { background:#3a1717; color:#ffb4b4; border-color:#5a2a2a; }
.badge.prio-p2 { background:#3a2a12; color:#ffcf8a; border-color:#5c451e; }
.badge.prio-p3 { background:#16273f; color:#9ec5ff; border-color:#2c4a72; }
.badge.prio-p4 { background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.badge.sla-breached { background:#3a1717; color:#ffb4b4; border-color:#7a2a2a; }
.badge.sla-risk { background:#3a2a12; color:#ffcf8a; border-color:#5c451e; }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:.82rem; color:var(--muted); }

/* status badges not already provided by the PM board */
.st-new { background:#2a2a2a; color:#e8eaed; border-color:#444; }
.st-received { background:#1c2733; color:#a9c7e6; border-color:#33475c; }
.st-customer_query { background:#332150; color:#cbb4ff; border-color:#4a3570; }
.st-planned { background:#16283a; color:#8fd1ff; border-color:#2c4a66; }
.st-waiting_customer { background:#3a2a12; color:#ffcf8a; border-color:#5c451e; }
.st-waiting_third_party { background:#33240f; color:#e0b578; border-color:#54401c; }
.st-closed { background:#232226; color:var(--faint); border-color:var(--border); }

/* filter toolbar */
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0; padding:14px; }
.filters .input { width:auto; min-width:150px; flex:0 1 auto; }
.filters .input[type=search] { flex:1 1 220px; }

/* ticket detail layout */
.ticket-grid { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; margin-top:16px; }
.prewrap { white-space:pre-wrap; word-break:break-word; }

/* chronology timeline */
.timeline { display:flex; flex-direction:column; gap:12px; }
.tl-item { border-left:3px solid var(--border); padding:4px 0 4px 14px; }
.tl-item.tl-public_comment, .tl-item.tl-email_outbound { border-left-color:var(--brand); }
.tl-item.tl-email_inbound, .tl-item.tl-whatsapp { border-left-color:#7fd6a0; }
.tl-item.tl-internal { border-left-color:#ffcf8a; background:#211d14; border-radius:0 8px 8px 0; padding-right:12px; }
.tl-item.tl-system { border-left-color:#3a3a3f; }
.tl-item.tl-system .tl-kind { color:var(--faint); }
.tl-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.85rem; }
.tl-kind { font-weight:700; color:var(--text); }
.tl-body { margin-top:5px; }
.tl-internal-badge { background:#3a2a12; color:#ffcf8a; border-color:#5c451e; font-size:.68rem; }

/* definition list in the ticket sidebar */
.deflist { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0; font-size:.9rem; }
.deflist dt { color:var(--muted); }
.deflist dd { margin:0; color:var(--text); text-align:right; }

/* category management */
.cat-children { list-style:none; margin:10px 0 0; padding:0; }
.cat-children li { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px solid var(--border); }

/* notification bell in the topbar */
.bell { position:relative; font-size:1.15rem; text-decoration:none; padding:2px 4px; }
.bell .bell-count {
    position:absolute; top:-6px; right:-8px; background:var(--brand); color:#fff;
    font-size:.66rem; font-weight:700; line-height:1; padding:2px 5px; border-radius:999px;
}
.bell.has-unread { filter:drop-shadow(0 0 3px rgba(229,39,33,.6)); }

/* notification centre */
.notif { display:block; }
.notif-btn {
    width:100%; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
    background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:inherit;
}
.notif-btn:hover { border-color:var(--brand); }
.notif-unread .notif-btn { border-left:3px solid var(--brand); }
.notif-read .notif-btn { opacity:.6; }
.notif-icon { font-size:1.3rem; }
.notif-main { flex:1; display:flex; flex-direction:column; gap:2px; }
.notif-title { font-weight:600; }
.notif-title.notif-alert { color:var(--brand-text); }
.notif-time { white-space:nowrap; }

@media (max-width:860px) {
    .ticket-grid { grid-template-columns:1fr; }
    .deflist dd { text-align:left; }
    .filters .input { flex:1 1 100%; }
}

/* ============================================================
   Finance module
   ============================================================ */
.amt-in { color:#9ae6b4; font-weight:600; }
.amt-out { color:#ffb4b4; font-weight:600; }
.badge.tx-income { background:#16321f; color:#9ae6b4; border-color:#2c5a3c; }
.badge.tx-expense { background:#3a1717; color:#ffb4b4; border-color:#5a2a2a; }
.badge.tx-transfer { background:#16273f; color:#9ec5ff; border-color:#2c4a72; }

.acct-balance { font-size:1.35rem; font-weight:700; margin:8px 0 4px; }
.acct-balance-big { font-size:1.3rem; font-weight:700; }
.account-archived { opacity:.55; }

/* budget utilisation bars */
.budget-row.budget-over { border-color:#5a2a2a; }
.budget-bar { height:8px; background:var(--panel-2); border:1px solid var(--border); border-radius:999px; margin:10px 0 8px; overflow:hidden; }
.budget-fill { height:100%; background:var(--brand); border-radius:999px; transition:width .2s; }
.budget-fill.over { background:#ff5a52; }

/* ============================================================
   Social module
   ============================================================ */
.badge.post-draft { background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.badge.post-scheduled { background:#16273f; color:#9ec5ff; border-color:#2c4a72; }
.badge.post-published { background:#16321f; color:#9ae6b4; border-color:#2c5a3c; }
.badge.post-failed { background:#3a1717; color:#ffb4b4; border-color:#5a2a2a; }

.post-content { white-space:pre-wrap; overflow-wrap:anywhere; }
.post-row .post-content { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.metric-cells { display:flex; gap:18px; flex-wrap:wrap; }
.metric-cell { min-width:90px; }
.metric-cell .num { font-size:1.25rem; font-weight:700; }
.metric-cell .lbl { font-size:.78rem; color:var(--muted); }

/* ============================================================
   HotLeads module — deliberately calm: big rows, one action
   ============================================================ */
.lead-list { display:flex; flex-direction:column; gap:12px; margin-top:20px; max-width:720px; }
.lead-card { display:flex; align-items:center; gap:16px; border:1px solid var(--border); background:var(--panel); border-radius:14px; padding:18px 20px; }
.lead-card.lead-next { border-color:var(--brand); }
.lead-main { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; text-decoration:none; }
.lead-name { font-size:1.15rem; font-weight:700; color:var(--text); }
.lead-company { color:var(--muted); }
.lead-since { font-size:.85rem; color:var(--faint); }
.lead-since.is-overdue { color:#ffb4b4; font-weight:600; }
.lead-touch-btn { white-space:nowrap; }
.lead-hero { border:1px solid var(--border); background:var(--panel); border-radius:14px; padding:24px; max-width:720px; }
.lead-hero.lead-overdue, .lead-card.lead-overdue { border-color:#5a2a2a; }
.lead-reach { display:flex; gap:18px; margin-top:10px; }
.lead-touch-form { display:flex; gap:10px; margin-top:18px; }
.lead-touch-form .input { flex:1; }
.lead-history-row { display:flex; gap:14px; padding:7px 0; border-bottom:1px solid var(--border); }
.lead-history-row:last-child { border-bottom:0; }

/* ============================================================
   WhatsApp module — desktop-app-style two-pane chat
   ============================================================ */
.wa-status { color:var(--muted); font-size:.9rem; }
.wa-status.is-on { color:#9ae6b4; }

.wa-app { display:grid; grid-template-columns:340px 1fr; gap:0; margin-top:14px;
    border:1px solid var(--border); border-radius:14px; overflow:hidden;
    height:calc(100dvh - 210px); min-height:420px; background:var(--panel); }

.wa-side { display:flex; flex-direction:column; border-right:1px solid var(--border); min-width:0; }
.wa-side-head { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--border); }
.wa-side-head .input { flex:1; min-width:0; }
.wa-new { flex:0 0 auto; width:42px; padding:0; justify-content:center; font-size:1.2rem; }
.wa-chats { flex:1; overflow-y:auto; }
.wa-chat-row { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border);
    padding:11px 14px; cursor:pointer; color:var(--text); }
.wa-chat-row:hover { background:var(--panel-2); }
.wa-chat-row.is-active { background:var(--panel-2); box-shadow:inset 3px 0 0 var(--brand); }
.wa-chat-top { display:flex; justify-content:space-between; gap:8px; }
.wa-chat-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-chat-time { color:var(--faint); font-size:.78rem; flex:0 0 auto; }
.wa-chat-bottom { display:flex; justify-content:space-between; gap:8px; margin-top:2px; }
.wa-chat-last { color:var(--muted); font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-unread { flex:0 0 auto; background:#00a884; color:#04120d; font-weight:700; font-size:.74rem;
    border-radius:999px; padding:2px 7px; }

.wa-main { display:flex; flex-direction:column; min-width:0; background:#0d1418; }
.wa-chat-head { padding:12px 16px; border-bottom:1px solid var(--border); background:var(--panel); display:flex; align-items:baseline; gap:10px; }
.wa-head-jid { font-size:.85rem; }
.wa-messages { flex:1; overflow-y:auto; padding:16px 6%; display:flex; flex-direction:column; gap:4px; }
.wa-placeholder { margin:auto; text-align:center; color:var(--faint); line-height:1.8; font-size:1.05rem; }
.wa-day { align-self:center; background:var(--panel-2); color:var(--muted); font-size:.76rem;
    padding:4px 10px; border-radius:8px; margin:10px 0 6px; }
.wa-row { display:flex; }
.wa-row.is-out { justify-content:flex-end; }
.wa-bubble { max-width:65%; padding:7px 10px; border-radius:10px; background:#202c33; color:#e9edef;
    font-size:.95rem; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-row.is-out .wa-bubble { background:#005c4b; }
.wa-sender { font-size:.78rem; font-weight:700; color:#53bdeb; margin-bottom:2px; }
.wa-time { display:inline-block; margin-left:8px; font-size:.7rem; color:rgba(233,237,239,.55); vertical-align:bottom; }
.wa-composer { display:flex; gap:10px; padding:10px 14px; border-top:1px solid var(--border); background:var(--panel); }
.wa-composer .input { flex:1; }

@media (max-width: 900px) {
    .wa-app { grid-template-columns:1fr; height:calc(100dvh - 190px); }
    .wa-side { display:flex; }
    .wa-app.has-chat .wa-side { display:none; }   /* one pane at a time on phones */
    .wa-main { display:none; }
    .wa-app.has-chat .wa-main { display:flex; }
}
.wa-composer[hidden] { display:none; }
.wa-accounts { display:flex; gap:6px; padding:10px 10px 0; flex-wrap:wrap; }
.wa-account { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
    border:1px solid var(--border); background:var(--panel-2); color:var(--muted);
    font-size:.88rem; font-weight:600; cursor:pointer; }
.wa-account:hover { color:var(--text); border-color:var(--faint); }
.wa-account.is-active { background:var(--brand); border-color:var(--brand); color:#fff; }
.wa-dot { width:8px; height:8px; border-radius:999px; background:#8a8a8a; flex:0 0 auto; }
.wa-dot.is-on { background:#00d97f; }
.wa-older { padding:8px 16px 0; text-align:center; }
.wa-older[hidden] { display:none; }

/* --- avatars --- */
.wa-avatar { flex:0 0 auto; width:42px; height:42px; border-radius:999px; background:var(--panel-2);
    color:var(--muted); font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center;
    overflow:hidden; user-select:none; }
.wa-avatar img { width:100%; height:100%; object-fit:cover; }
.wa-avatar.is-small { width:34px; height:34px; font-size:.85rem; }
.wa-chat-row { display:flex; gap:11px; align-items:center; }
.wa-chat-row > .wa-chat-body { flex:1; min-width:0; }

/* --- chat list extras --- */
.wa-chat-flags { color:var(--faint); font-size:.78rem; flex:0 0 auto; }
.wa-chat-menu-btn { flex:0 0 auto; border:0; background:none; color:var(--faint); cursor:pointer;
    font-size:1rem; padding:2px 4px; border-radius:6px; visibility:hidden; }
.wa-chat-row:hover .wa-chat-menu-btn { visibility:visible; }
.wa-chat-menu-btn:hover { background:var(--panel); color:var(--text); }
.wa-unread.is-muted { background:var(--panel-2); color:var(--muted); }
.wa-archive-toggle { display:block; width:100%; text-align:center; background:none; border:0; border-bottom:1px solid var(--border);
    color:var(--muted); font-size:.85rem; padding:9px; cursor:pointer; }
.wa-archive-toggle:hover { background:var(--panel-2); color:var(--text); }
.wa-search-section { padding:8px 14px 4px; color:var(--faint); font-size:.76rem; text-transform:uppercase;
    letter-spacing:.06em; border-bottom:1px solid var(--border); }
.wa-search-hit .wa-chat-last { color:var(--text); }

/* --- chat head --- */
.wa-chat-head { align-items:center; }
.wa-chat-head-info { flex:1; min-width:0; cursor:default; }
.wa-chat-head-info.is-group { cursor:pointer; }
.wa-chat-head-title { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-chat-head-sub { color:var(--muted); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-chat-head-sub.is-typing { color:#00d97f; }
.wa-group-panel { position:absolute; top:100%; left:0; right:0; z-index:30; background:var(--panel);
    border-bottom:1px solid var(--border); box-shadow:0 12px 24px rgba(0,0,0,.45); max-height:50vh; overflow-y:auto; padding:12px 16px; }
.wa-group-panel h4 { margin:0 0 8px; }
.wa-group-member { display:flex; gap:10px; align-items:center; padding:5px 0; font-size:.9rem; }
.wa-group-member .faint { font-size:.8rem; }
.wa-group-admin { color:#00d97f; font-size:.74rem; border:1px solid #00d97f55; border-radius:6px; padding:1px 6px; }
.wa-head-wrap { position:relative; }

/* --- bubbles: media, quotes, reactions, menu --- */
.wa-row { position:relative; }
.wa-bubble .wa-media-img, .wa-bubble .wa-media-video { display:block; max-width:min(320px,100%); max-height:340px;
    border-radius:8px; margin:2px 0 4px; cursor:pointer; }
.wa-bubble .wa-media-video { cursor:default; width:320px; max-width:100%; }
.wa-bubble audio { display:block; max-width:260px; margin:2px 0 4px; }
.wa-media-doc { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border-radius:8px;
    padding:8px 10px; margin:2px 0 4px; color:inherit; text-decoration:none; font-size:.9rem; max-width:280px; }
.wa-media-doc:hover { background:rgba(255,255,255,.12); }
.wa-media-sticker { max-width:150px; max-height:150px; display:block; margin:2px 0; }
.wa-media-missing { color:rgba(233,237,239,.6); font-style:italic; font-size:.85rem; }
.wa-quote { display:block; border-left:3px solid #53bdeb; background:rgba(255,255,255,.07); border-radius:6px;
    padding:5px 8px; margin-bottom:4px; font-size:.85rem; color:rgba(233,237,239,.8); cursor:pointer;
    overflow:hidden; max-height:66px; }
.wa-quote-sender { display:block; color:#53bdeb; font-weight:600; font-size:.78rem; }
.wa-deleted { font-style:italic; color:rgba(233,237,239,.55); }
.wa-edited { font-size:.7rem; color:rgba(233,237,239,.5); margin-left:6px; }
.wa-ticks { display:inline-block; margin-left:4px; font-size:.75rem; color:rgba(233,237,239,.55); letter-spacing:-.12em; }
.wa-ticks.is-read { color:#53bdeb; }
.wa-reactions { display:flex; gap:4px; margin-top:2px; }
.wa-row.is-out .wa-reactions { justify-content:flex-end; }
.wa-reaction { background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:1px 7px;
    font-size:.8rem; cursor:pointer; color:var(--text); }
.wa-reaction.is-mine { border-color:#00a884; }
.wa-stack { position:relative; display:flex; flex-direction:column; max-width:65%; }
.wa-row.is-out .wa-stack { align-items:flex-end; }
.wa-stack .wa-bubble { max-width:100%; }
.wa-msg-menu-btn { position:absolute; top:-9px; right:-9px; border:1px solid var(--border); background:var(--panel);
    color:var(--muted); cursor:pointer; border-radius:999px; width:24px; height:24px; line-height:1; font-size:.85rem;
    display:none; align-items:center; justify-content:center; z-index:5; }
.wa-row:hover .wa-msg-menu-btn { display:flex; }
.wa-back { display:none; }
@media (max-width: 900px) { .wa-back { display:inline-flex; } }
.wa-menu { position:fixed; z-index:60; background:var(--panel); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 28px rgba(0,0,0,.5); min-width:180px; padding:4px; }
.wa-menu button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--text);
    padding:8px 12px; border-radius:7px; cursor:pointer; font-size:.9rem; }
.wa-menu button:hover { background:var(--panel-2); }
.wa-menu .is-danger { color:#f28b82; }
.wa-menu-emojis { display:flex; gap:2px; padding:4px 6px 6px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.wa-menu-emojis button { padding:4px 6px; font-size:1.15rem; width:auto; }
.wa-highlight { animation:wa-flash 2s; }
@keyframes wa-flash { 0%,60% { background:rgba(0,168,132,.25); border-radius:10px; } 100% { background:transparent; } }

/* --- composer --- */
.wa-composer { flex-wrap:wrap; align-items:center; gap:8px; }
.wa-icon-btn { flex:0 0 auto; border:0; background:none; color:var(--muted); cursor:pointer; font-size:1.25rem;
    padding:6px 8px; border-radius:8px; line-height:1; }
.wa-icon-btn:hover { background:var(--panel-2); color:var(--text); }
.wa-icon-btn.is-recording { background:#a93226; color:#fff; animation:wa-pulse 1.2s infinite; }
@keyframes wa-pulse { 50% { opacity:.6; } }
.wa-reply-bar { flex-basis:100%; display:flex; align-items:center; gap:8px; background:var(--panel-2);
    border-left:3px solid #53bdeb; border-radius:8px; padding:6px 10px; font-size:.85rem; color:var(--muted); }
.wa-reply-bar .wa-quote-sender { flex:0 0 auto; }
.wa-reply-bar .wa-reply-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-attach-chip { flex-basis:100%; display:flex; align-items:center; gap:8px; background:var(--panel-2);
    border-radius:8px; padding:6px 10px; font-size:.85rem; }
.wa-attach-chip img { max-height:52px; border-radius:6px; }
.wa-bar-close { margin-left:auto; border:0; background:none; color:var(--faint); cursor:pointer; font-size:1rem; }
.wa-bar-close:hover { color:var(--text); }
.wa-emoji-panel { position:absolute; bottom:64px; left:10px; z-index:50; background:var(--panel);
    border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.5);
    padding:10px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; width:320px; max-width:90vw; }
.wa-emoji-panel button { border:0; background:none; font-size:1.3rem; cursor:pointer; border-radius:6px; padding:4px; }
.wa-emoji-panel button:hover { background:var(--panel-2); }
.wa-main { position:relative; }

/* --- overlays: forward picker, lightbox --- */
.wa-overlay { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.6); display:flex;
    align-items:center; justify-content:center; padding:20px; }
.wa-dialog { background:var(--panel); border:1px solid var(--border); border-radius:14px; width:420px;
    max-width:94vw; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.wa-dialog-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); font-weight:700; }
.wa-dialog-body { overflow-y:auto; }
.wa-lightbox { position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.88); display:flex;
    align-items:center; justify-content:center; cursor:zoom-out; }
.wa-lightbox img { max-width:94vw; max-height:92vh; border-radius:6px; }

/* ============================================================
   Planning module — the restructuring cockpit.
   Design rule for this module: unpleasant numbers must read as
   unpleasant. Negatives are red everywhere, warnings are ranked, and
   nothing is softened. Calm layout, no decoration.
   ============================================================ */

/* one way back from a detail page — replaces the old seven-link sub-nav */
.pl-back { margin:0 0 18px; font-size:.95rem; }
.pl-back a { color:var(--muted); }
.pl-back a:hover { color:var(--text); }

/* ------------------------------------------------------------
   Calm entry page (/planung).
   Built for being read under stress: one column, capped width,
   three figures, one warning, one action. Everything competing
   for attention here has been removed on purpose — do not add a
   fourth tile, a chart or a table to this screen.
   ------------------------------------------------------------ */
.pl-calm { max-width:760px; }
.pl-calm-title { font-size:1.1rem; font-weight:600; color:var(--muted); margin:0; letter-spacing:.02em; }
.pl-calm-date { color:var(--faint); font-size:.85rem; margin:2px 0 22px; }

/* the three figures */
.pl-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.pl-tile { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px 16px; }
.pl-tile .t-label { color:var(--faint); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.pl-tile .t-value { font-size:1.9rem; font-weight:700; line-height:1.15; margin-top:8px; font-variant-numeric:tabular-nums; }
.pl-tile .t-sub { color:var(--muted); font-size:.82rem; margin-top:6px; line-height:1.35; }
.pl-tile.is-alert .t-value { color:#ff8a84; }

/* exactly one warning, sized to be read rather than skimmed */
.pl-calm-warn { margin-top:22px; border:1px solid var(--border); border-left:4px solid var(--faint); background:var(--panel); border-radius:12px; padding:16px 18px; }
.pl-calm-warn .w-title { font-weight:700; font-size:1.05rem; }
.pl-calm-warn .w-detail { color:var(--muted); font-size:.92rem; margin-top:5px; line-height:1.5; max-width:64ch; }
.pl-calm-warn.is-critical { border-color:#7a2a2a; border-left-color:var(--brand); background:#2a1616; }
.pl-calm-warn.is-critical .w-title { color:#ffb4b4; }
.pl-calm-warn.is-critical .w-detail { color:#e7cfcf; }
.pl-calm-warn.is-warning { border-left-color:#ffcf8a; }
.pl-calm-warn.is-info { border-left-color:#2c4a72; }
.pl-calm-warn.is-none .w-title { color:var(--muted); font-weight:600; font-size:1rem; }

/* the single next action */
.pl-focus { margin-top:22px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); padding:18px; }
.pl-focus .f-kicker { color:var(--faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.pl-focus .f-title { font-size:1.15rem; font-weight:700; margin-top:6px; }
.pl-focus .f-amount { font-size:1.6rem; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; }
.pl-focus .f-covers { color:var(--brand-text); font-size:.88rem; margin-top:2px; }
.pl-focus .f-detail { color:var(--muted); font-size:.9rem; margin-top:8px; line-height:1.5; max-width:64ch; }

/* everything else, collapsed */
.pl-more { margin-top:26px; border-top:1px solid var(--border); padding-top:12px; }
.pl-more > summary { cursor:pointer; color:var(--muted); font-size:.9rem; list-style:none; }
.pl-more > summary::-webkit-details-marker { display:none; }
.pl-more > summary::before { content:'▸ '; color:var(--faint); }
.pl-more[open] > summary::before { content:'▾ '; }
.pl-more > summary:hover { color:var(--text); }
.pl-more-body { margin-top:14px; }
.pl-more-body h2 { font-size:1rem; margin:20px 0 8px; }
.pl-more-body h2:first-child { margin-top:0; }
.pl-links { list-style:none; padding:0; margin:0; color:var(--muted); font-size:.9rem; }
.pl-links li { padding:6px 0; border-bottom:1px solid var(--border); }
.pl-links li:last-child { border-bottom:0; }

@media (max-width:600px) {
    .pl-tiles { grid-template-columns:1fr; }
    .pl-tile .t-value { font-size:1.7rem; }
}

/* numbers */
.pl-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.table th.pl-num, .table td.pl-num { text-align:right; }
.pl-neg { color:#ff8a84; }
.pl-warn-text { color:#ffcf8a; }
.pl-block { display:block; font-size:.78rem; font-weight:400; line-height:1.3; }

/* ranked warning list */
.pl-warnings { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.pl-warn { border:1px solid var(--border); border-left:4px solid var(--faint); background:var(--panel); border-radius:10px; padding:12px 16px; }
.pl-warn .w-title { font-weight:700; }
.pl-warn .w-detail { color:var(--muted); font-size:.92rem; margin-top:3px; }
.pl-warn.is-critical { border-color:#7a2a2a; border-left-color:var(--brand); background:#2a1616; }
.pl-warn.is-critical .w-title { color:#ffb4b4; font-size:1.05rem; }
.pl-warn.is-critical .w-detail { color:#e7cfcf; }
.pl-warn.is-warning { border-left-color:#ffcf8a; }
.pl-warn.is-info { border-left-color:#2c4a72; }

/* table rows that carry a verdict */
.table tr.pl-key-row td { background:var(--panel-2); font-weight:600; }
.table tr.pl-alert-row td { background:#251818; }
.table tr.pl-total-row td { border-top:2px solid var(--faint); font-weight:700; }
.table tr.pl-off-row td.pl-num { text-decoration:underline; text-decoration-color:#ffcf8a; text-underline-offset:3px; }
.pl-dim { opacity:.55; }

/* explanatory copy — the module explains itself, it does not assume */
.pl-legend { color:var(--muted); font-size:.94rem; max-width:78ch; margin:0 0 8px; }
.pl-legend:last-child { margin-bottom:0; }
.pl-note { color:var(--faint); font-size:.85rem; margin:8px 0 0; max-width:88ch; }
.pl-reading { margin:14px 0; }
.pl-reading h2 { margin-top:0; }

/* monthly plan/actual sections */
.pl-month { margin-top:18px; }
.pl-month-head { margin:0 0 10px; font-size:1.02rem; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pl-month-tag { font-size:.8rem; font-weight:400; }

/* inline form controls that sit inside a table row */
.pl-inline-input, .pl-inline-select { width:auto; min-width:130px; padding:5px 8px; font-size:.85rem; }
.badge.pl-badge-risk { background:#3a1717; color:#ffb4b4; border-color:#5a2a2a; }

/* ---------------------------------------------------------------------------
   Liquidität (/liquiditaet) — one ledger, iFinance-style: the two number
   columns are the page. Everything else stays quiet so the eye lands on the
   Kontostand column. Planned rows are dimmed, due rows are loud, negative
   balances are red — the plan is allowed to look unpleasant.
   ------------------------------------------------------------------------- */
.lq-warn { border:1px solid var(--border); border-left:4px solid var(--faint); background:var(--panel); border-radius:10px; padding:12px 16px; margin:16px 0; font-weight:600; }
.lq-warn-critical { border-color:#7a2a2a; border-left-color:var(--brand); background:#2a1616; color:#ffb4b4; }
.lq-warn-warning { border-left-color:#ffcf8a; color:#ffcf8a; }

/* the single action, folded away until needed */
.lq-add { margin:16px 0; border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:12px 16px; }
.lq-add > summary { cursor:pointer; font-weight:700; color:var(--brand-text); list-style:none; }
.lq-add > summary::-webkit-details-marker { display:none; }
.lq-add > summary:hover { color:var(--brand-text-hover); }
.lq-add[open] > summary { margin-bottom:12px; }
.lq-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lq-form .input { width:auto; min-width:150px; font-size:.92rem; padding:8px 10px; }
.lq-form .lq-f-desc { flex:1 1 220px; min-width:180px; }
.lq-form .lq-f-amount { max-width:170px; }
.lq-form .lq-f-dir { max-width:140px; }
.lq-check { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.9rem; white-space:nowrap; }
.lq-check input { accent-color:var(--brand); }
.lq-hint { font-size:.85rem; margin:10px 0 0; max-width:80ch; }

/* ledger */
.lq-wrap { margin-top:16px; }
.lq-table td, .lq-table th { padding:9px 12px; }
.lq-c-date { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted); width:1%; }
.lq-c-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; width:1%; }
.table th.lq-c-num { text-align:right; }
.lq-c-act { width:1%; }
.lq-desc { color:var(--text); font-weight:600; }
.lq-desc:hover { color:var(--brand-text); }
.lq-balance { font-weight:700; }
.lq-balance.is-neg { color:#ff8a84; }
.lq-actions { display:flex; gap:6px; justify-content:flex-end; }

.lq-table tr.is-planned td { background:repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(255,255,255,.018) 7px, rgba(255,255,255,.018) 14px); }
.lq-table tr.is-planned .lq-desc { font-weight:500; color:var(--muted); }
.lq-table tr.is-due td { background:#2a1616; }
.lq-table tr.is-opening td { background:var(--panel-2); }
.lq-table tr.lq-carry td { background:var(--panel-2); color:var(--muted); }
.lq-table tr.lq-total td { border-top:2px solid var(--faint); font-weight:700; background:var(--panel-2); }

.badge.lq-b-plan { background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.badge.lq-b-due { background:#3a1717; color:#ffb4b4; border-color:#5a2a2a; }
.badge.lq-b-start { background:#16273f; color:#9ec5ff; border-color:#2c4a72; }

/* --- Erwartungen ---------------------------------------------------------
   Eine Erwartung darf nie wie eine belastbare Zahlung aussehen. Sie steht
   deshalb kursiv, gedämpft und mit einem eigenen Randstreifen; die Spalte
   „Kontostand" bleibt bei ihr leer. Die zweite Saldenspalte ist ihrerseits
   ruhiger gesetzt als die reale — welche Zahl belastbar ist, muss auf einen
   Blick klar sein. */
.lq-table tr.lq-exp-row td { background:rgba(122,162,247,.05); font-style:italic; }
.lq-table tr.lq-exp-row td:first-child { box-shadow:inset 3px 0 0 #4a6fa5; }
.lq-table tr.lq-exp-row .lq-desc { font-weight:500; color:#a8c0e0; }
.lq-table tr.lq-exp-row.is-verworfen td { opacity:.5; text-decoration:line-through; }
.lq-table tr.lq-exp-row.is-ueberfuehrt td { opacity:.62; }
.lq-exp-delta { opacity:.8; }
.lq-exp-note { font-size:.85rem; font-style:normal; margin-top:3px; }

.lq-c-exp { color:#a8c0e0; }
.lq-c-exp .lq-balance { font-weight:600; }
.table th.lq-c-exp { color:#8fa8c8; font-weight:600; }

/* „Auf dem Konto": nur gebuchtes Geld. Ruhiger gesetzt als der Plan-Kontostand,
   damit die Leitspalte die Leitspalte bleibt — negativ bleibt trotzdem rot. */
.lq-c-acc { color:#c8cdd3; }
.lq-c-acc .lq-balance { font-weight:600; }
.table th.lq-c-acc { color:var(--muted); font-weight:600; }

/* Ausgebliebener Eingang: der Betrag bleibt lesbar (er ist weiterhin zu holen),
   aber durchgestrichen — sonst sieht die daneben unbewegte Saldenspalte wie
   ein Rechenfehler aus. */
.lq-nocount { opacity:.5; text-decoration:line-through; }

.lq-exp-switch { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }

.badge.lq-b-exp { background:#1b2a44; color:#a8c0e0; border-color:#33507d; }
.badge.lq-b-charge { background:#2a2536; color:#c5b8e0; border-color:#453a5c; }
.badge.lq-b-prob { background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.badge.st-open { background:#1b2a44; color:#a8c0e0; border-color:#33507d; }
.badge.st-converted { background:#16301f; color:#8fd9a8; border-color:#2a5c3c; }
.badge.st-discarded { background:#2a2a2a; color:#9a9a9a; border-color:#444; }

.lq-f-count { width:70px; }

/* the depth behind a fold — never on the entry screen itself */
.lq-details { margin-top:16px; color:var(--muted); }
.lq-details > summary { cursor:pointer; color:var(--faint); font-size:.9rem; }
.lq-facts { list-style:none; padding:0; margin:10px 0 0; font-size:.92rem; }
.lq-facts li { padding:5px 0; border-bottom:1px solid var(--border); }
.lq-facts li:last-child { border-bottom:0; }

@media (max-width:600px) {
    .lq-form .input, .lq-form .lq-f-desc, .lq-form .lq-f-amount, .lq-form .lq-f-dir { width:100%; max-width:none; flex:1 1 100%; }
    .lq-form .btn { width:100%; justify-content:center; }
}
.lq-form .lq-f-vat { max-width:140px; }
.badge.lq-b-auto { background:#231f2e; color:#b9a8e0; border-color:#3d3357; font-weight:600; }

/* Finanzplan (/liquiditaet/plan) — Ist, Plan und Fortschreibung dürfen nie
   gleich aussehen: eine fortgeschriebene Zahl hat niemand zugesagt. */
.lq-plan-lead { max-width:80ch; margin:6px 0 16px; }
.lq-plan-year { margin-top:16px; }
.lq-plan-year > summary { cursor:pointer; font-weight:700; color:var(--brand-text); padding:6px 0; }
.lq-plan-year > summary:hover { color:var(--brand-text-hover); }
.lq-table tr.lq-year-row td { background:var(--panel-2); }
.lq-table tr.lq-now-row td { box-shadow:inset 3px 0 0 var(--brand); }
.lq-table tr.lq-dim-row td { opacity:.62; }
.badge.lq-s-ist { background:#16321f; color:#9ae6b4; border-color:#2c5a3c; }
.badge.lq-s-plan { background:#16273f; color:#9ec5ff; border-color:#2c4a72; }
.badge.lq-s-fort { background:#2a2a2a; color:#cfcfcf; border-color:#444; }
.lq-window { font-size:.85rem; margin:2px 0 12px; }

/* Liquiditäts-Filter — eine Zeile, kein Panel: die Liste ist der Inhalt,
   der Filter nur das Werkzeug davor. */
.lq-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px; }
.lq-filter .input { width:auto; font-size:.9rem; padding:7px 10px; }
.lq-filter .lq-f-q { flex:1 1 220px; min-width:160px; }
.lq-filter .lq-f-sel { max-width:170px; }
.lq-range { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.lq-range-btn { padding:7px 12px; font-size:.88rem; font-weight:600; color:var(--muted); background:var(--panel-2); }
.lq-range-btn + .lq-range-btn { border-left:1px solid var(--border); }
.lq-range-btn:hover { color:var(--text); background:var(--panel); }
.lq-range-btn.is-on { background:var(--brand); color:#fff; }
.lq-range-btn.is-on:hover { color:#fff; }
@media (max-width:600px) {
    .lq-filter .lq-f-q, .lq-filter .lq-f-sel { flex:1 1 100%; max-width:none; width:100%; }
    .lq-range { width:100%; }
    .lq-range-btn { flex:1; text-align:center; }
}

/* ---------------------------------------------------------------------------
   Mega-Menü, sobald mehr als eine Spalte in die Breite passt (701 px, vorher
   860 px — dazwischen lag ein drittes Layout, siehe oben).
   Die Topbar bleibt, was sie ist — Logo · Suche · Glocke · Burger. Geöffnet
   klappt das Menü aber nicht mehr als lange Spalte auf, sondern als
   Vollbreiten-Panel mit allen Gruppen nebeneinander: fünf Überschriften auf
   einen Blick statt fünfzehn Links im Scrollfenster. Genau das war der Grund
   für die Gruppierung — hier zahlt sie sich erst richtig aus.
   ------------------------------------------------------------------------- */
@media (min-width:701px) {
    /* Flex statt Grid: die Gruppen teilen sich die Breite gleichmäßig auf,
       egal wie viele es sind. Ein Raster mit fester Spaltenbreite erzeugt bei
       1440 px sieben Spalten für fünf Gruppen — die Links laufen dann aus
       ihrer Spalte in die nächste. */
    .topbar.nav-open .nav {
        display:flex; flex-direction:row; flex-wrap:wrap;
        align-items:flex-start;
        gap:6px 28px;
        max-height:none; overflow:visible;
        margin-top:10px; padding:18px 0 6px;
    }
    .nav-group { flex:1 1 180px; min-width:0; gap:2px; }
    .nav-group-label {
        padding:0 10px 6px; margin-bottom:5px;
        border-bottom:1px solid var(--border);
    }
    .nav a { padding:8px 10px; }
    /* Die Nutzerzeile gehört unter alles, nicht in eine Spalte. */
    .nav .nav-user {
        flex:1 1 100%;
        margin-top:12px; padding:12px 10px 0;
        text-align:right;
    }
}

/* Hinweis für Nur-Lese-Konten: sichtbar, aber kein Alarm — es ist kein
   Fehler, sondern eine Eigenschaft des Zugangs. */
.readonly-note {
    border:1px solid var(--border); border-left:4px solid #2c4a72;
    background:var(--panel); color:var(--muted);
    border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:.92rem;
}

/* Kontostandverlauf und Zahlungsströme (/liquiditaet/plan) */
.lq-chart-panel { margin:16px 0; }
.lq-chart-panel h2 { margin-top:0; }
.lq-chart { width:100%; height:auto; display:block; }
.lq-chart-note { font-size:.85rem; margin:8px 0 0; max-width:80ch; }
.lq-flow { margin-top:16px; }
.lq-flow-chart {
    display:flex; align-items:flex-end; gap:3px;
    height:150px; margin:12px 0 22px; padding:0 2px;
    border-bottom:1px solid var(--border);
    overflow-x:auto;
}
.lq-flow-col { flex:1 1 0; min-width:9px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative; }
.lq-flow-bars { display:flex; align-items:flex-end; gap:1px; height:100%; }
.lq-flow-bars span { flex:1; border-radius:2px 2px 0 0; min-height:1px; }
.lq-flow-in { background:#9ae6b4; }
.lq-flow-out { background:#ff8a84; }
.lq-flow-year { position:absolute; bottom:-18px; left:0; font-size:.7rem; color:var(--faint); }
.lq-own { color:#cbb4ff; }
.lq-warn-box { border:1px solid #43356e; background:#221c33; border-radius:10px; padding:12px 16px; margin:14px 0; }
.lq-warn-box > summary { cursor:pointer; font-weight:700; color:#cbb4ff; }
.lq-warn-box[open] > summary { margin-bottom:8px; }
.lq-warn-box .lq-facts { color:var(--muted); }
/* Ausgabenstruktur: der Balken macht den größten Block auf einen Blick sichtbar */
.lq-spend .lq-spend-bar-head { width:34%; }
.lq-spend-bar-cell { padding-right:14px !important; }
.lq-spend-bar { display:block; height:9px; border-radius:5px; background:#ff8a84; min-width:2px; }
.lq-spend tr.lq-dim-row .lq-spend-bar { background:var(--faint); }
.badge.lq-s-mixed { background:#2c2150; color:#cbb4ff; border-color:#43356e; }