/* ============================================================
   Ordinio — kombiniertes Tool
   Design: Konzept H "Weich" — übernommen aus den drei Einzeltools
   (angebots generator / qr rechnungsgenerator / Mahnwesen).
   ============================================================ */

:root{
  --bg:#FAF8F5; --panel:#FFFFFF; --ink:#2B2A27; --ink-soft:#726C62;
  --sage:#4B7B6F; --sage-soft:#9DBDB2; --line:#E9E4DA; --focus:#4B7B6F;
  --warn:#C9992E; --danger:#C0665F; --critical:#8C3B35;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#17181A; --panel:#1F2123; --ink:#EDEAE4; --ink-soft:#A6A196; --sage:#7FB3A5; --sage-soft:#3D5F55; --line:#2C2E2F; }
}
:root[data-theme="light"]{ --bg:#FAF8F5; --panel:#FFFFFF; --ink:#2B2A27; --ink-soft:#726C62; --sage:#4B7B6F; --sage-soft:#9DBDB2; --line:#E9E4DA; }
:root[data-theme="dark"]{ --bg:#17181A; --panel:#1F2123; --ink:#EDEAE4; --ink-soft:#A6A196; --sage:#7FB3A5; --sage-soft:#3D5F55; --line:#2C2E2F; }

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.55;}
.mono{font-family:ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{margin:0;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
button{font-family:inherit;}

/* ---------------------------------------------------------- */
/* Topbar / primary navigation                                */
/* ---------------------------------------------------------- */
header.topbar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; gap:24px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.12rem; flex:none;}
.brand small{font-weight:600; font-size:0.72rem; color:var(--ink-soft); background:color-mix(in srgb, var(--sage) 14%, transparent); padding:3px 10px; border-radius:20px; margin-left:6px;}

.nav-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.nav-links a{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; font-size:0.85rem; font-weight:600; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent);}
.nav-links a.active{color:var(--sage); background:color-mix(in srgb, var(--sage) 14%, transparent);}
.nav-links a.icon-only{padding:8px; line-height:0;}

.nav-cta{display:inline-flex; align-items:center; gap:8px; background:var(--sage); color:#fff; padding:10px 20px; border:none; border-radius:24px; font-size:0.86rem; font-weight:600; cursor:pointer; white-space:nowrap;}
.nav-cta:hover{filter:brightness(1.06);}

/* ---------------------------------------------------------- */
/* Shell layout for list/detail views (non-document)          */
/* ---------------------------------------------------------- */
.shell{max-width:1080px; margin:0 auto; padding:28px 28px 64px;}
.shell.narrow{max-width:760px;}

.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.page-head h1{font-size:1.5rem; font-weight:700;}
.page-head .sub{font-size:0.86rem; color:var(--ink-soft); margin-top:4px;}
.breadcrumb{display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--ink-soft); margin-bottom:10px;}
.breadcrumb a:hover{color:var(--sage);}
.breadcrumb .sep{opacity:0.5;}

.btn-back{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:8px 15px; border-radius:20px; font-size:0.82rem; font-weight:600; cursor:pointer; margin-bottom:16px;}
.btn-back:hover{border-color:var(--sage); color:var(--sage);}
.btn-back svg{flex:none;}

.actions-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

/* ---------------------------------------------------------- */
/* Cards / forms (shared everywhere)                          */
/* ---------------------------------------------------------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px; margin-bottom:18px;}
.card h2{font-size:0.98rem; margin:0 0 16px; font-weight:700; display:flex; align-items:center; gap:8px;}
.card h2 .n{width:22px; height:22px; border-radius:7px; background:var(--sage); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:0.75rem; font-family:ui-monospace,monospace;}
.card p.desc{font-size:0.82rem; color:var(--ink-soft); margin:-10px 0 16px;}
.card-head-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px;}
.card-head-row h2{margin:0;}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
@media (max-width:640px){ .row2,.row3{grid-template-columns:1fr;} }
label{font-size:0.78rem; color:var(--ink-soft);}
input, textarea, select{background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:9px 11px; color:var(--ink); font-family:inherit; font-size:0.88rem; width:100%;}
textarea{resize:vertical; min-height:64px;}
input:focus, textarea:focus, select:focus{border-color:var(--sage);}
.mini-hint{font-size:0.72rem; color:var(--ink-soft); margin:-7px 0 2px;}

.logo-row{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.logo-preview{width:48px; height:48px; border-radius:12px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--bg); overflow:hidden; flex:none;}
.logo-preview img, .logo-preview svg{width:100%; height:100%;}

.btn-ghost{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 14px; border-radius:20px; font-size:0.82rem; cursor:pointer; white-space:nowrap;}
.btn-ghost:hover{border-color:var(--sage); color:var(--sage);}
.btn-ghost:disabled{opacity:0.5; cursor:not-allowed;}
.btn-ghost.danger:hover{border-color:var(--danger); color:var(--danger);}
.btn-ghost.small{padding:6px 11px; font-size:0.76rem;}

.btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--sage); color:#fff; font-weight:600; padding:12px 22px; border:none; border-radius:24px; font-size:0.9rem; cursor:pointer;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{opacity:0.55; cursor:not-allowed; filter:none;}
.btn-primary.full{width:100%;}
.btn-primary.small{padding:8px 16px; font-size:0.82rem;}

.hint{font-size:0.76rem; color:var(--ink-soft); margin-top:10px; text-align:center;}

/* ---------------------------------------------------------- */
/* Dashboard KPI tiles                                        */
/* ---------------------------------------------------------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
@media (max-width:800px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
.kpi-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px 20px;}
.kpi-card .num{font-size:1.9rem; font-weight:700; font-family:ui-monospace,Consolas,monospace;}
.kpi-card .lbl{font-size:0.78rem; color:var(--ink-soft); margin-top:2px;}
.kpi-card a{display:block;}
.kpi-card a:hover .num{color:var(--sage);}

/* ---------------------------------------------------------- */
/* Generic row-list pattern (customers, jobs, quotes, invoices)*/
/* ---------------------------------------------------------- */
.row-list{display:flex; flex-direction:column; gap:8px;}
.list-row{border:1px solid var(--line); border-radius:14px; padding:13px 15px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; width:100%; background:var(--panel); font-family:inherit;}
.list-row:hover{border-color:var(--sage-soft);}
.list-row.active{border-color:var(--sage); background:color-mix(in srgb, var(--sage) 8%, transparent);}
.list-row .main{min-width:0;}
.list-row .title{font-weight:600; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.list-row .sub{font-size:0.76rem; color:var(--ink-soft); margin-top:2px;}
.list-row .right{text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.list-row .amount{font-family:ui-monospace,Consolas,monospace; font-size:0.86rem; font-weight:600;}

.search-row{display:flex; gap:10px; margin-bottom:16px;}
.search-row input{flex:1;}

.empty-state{text-align:center; padding:36px 20px; color:var(--ink-soft); font-size:0.88rem; border:1px dashed var(--line); border-radius:16px;}

/* ---------------------------------------------------------- */
/* Badges                                                      */
/* ---------------------------------------------------------- */
.badge{display:inline-block; font-size:0.68rem; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap;}
.badge-neutral{background:color-mix(in srgb, var(--ink-soft) 16%, transparent); color:var(--ink-soft);}
.badge-info{background:color-mix(in srgb, var(--sage-soft) 40%, transparent); color:var(--sage);}
.badge-warn{background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn);}
.badge-danger{background:color-mix(in srgb, var(--danger) 18%, transparent); color:var(--danger);}
.badge-critical{background:color-mix(in srgb, var(--critical) 20%, transparent); color:var(--critical);}
.badge-paid{background:color-mix(in srgb, var(--sage) 20%, transparent); color:var(--sage);}

/* ---------------------------------------------------------- */
/* Tabs (Kundendetail)                                         */
/* ---------------------------------------------------------- */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap;}
.tab-btn{border:none; background:transparent; color:var(--ink-soft); padding:10px 6px; margin-bottom:-1px; border-bottom:2px solid transparent; font-size:0.86rem; font-weight:600; cursor:pointer;}
.tab-btn:hover{color:var(--ink);}
.tab-btn.active{color:var(--sage); border-bottom-color:var(--sage);}
.tab-btn .count{display:inline-block; font-size:0.7rem; background:color-mix(in srgb, var(--ink-soft) 16%, transparent); color:var(--ink-soft); padding:1px 7px; border-radius:20px; margin-left:6px;}
.tab-btn.active .count{background:color-mix(in srgb, var(--sage) 20%, transparent); color:var(--sage);}

/* ---------------------------------------------------------- */
/* Stage pills (Mahnwesen)                                     */
/* ---------------------------------------------------------- */
.stage-pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.stage-pill{border:1px solid var(--line); background:transparent; color:var(--ink-soft); padding:8px 13px; border-radius:20px; font-size:0.79rem; cursor:pointer; font-family:inherit; font-weight:600;}
.stage-pill:hover{border-color:var(--sage);}
.stage-pill.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.stage-pill.active.s-info{background:var(--sage); border-color:var(--sage);}
.stage-pill.active.s-warn{background:var(--warn); border-color:var(--warn);}
.stage-pill.active.s-danger{background:var(--danger); border-color:var(--danger);}
.stage-pill.active.s-critical{background:var(--critical); border-color:var(--critical);}

.paid-note{background:color-mix(in srgb, var(--sage) 12%, transparent); border:1px solid color-mix(in srgb, var(--sage) 35%, transparent); border-radius:14px; padding:14px; font-size:0.85rem; color:var(--sage);}
.paid-note strong{display:block; margin-bottom:3px;}

.recon-result{font-size:0.83rem; border-radius:14px; padding:12px 14px; margin-top:10px;}
.recon-result.ok{background:color-mix(in srgb, var(--sage) 12%, transparent); border:1px solid color-mix(in srgb, var(--sage) 35%, transparent); color:var(--sage);}
.recon-result.info{background:color-mix(in srgb, var(--ink-soft) 10%, transparent); border:1px solid var(--line); color:var(--ink-soft);}
.info-note{font-size:0.76rem; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:14px; padding-top:12px;}

/* ---------------------------------------------------------- */
/* Chips (Mitarbeiter-Zuweisung)                                */
/* ---------------------------------------------------------- */
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); padding:7px 13px; border-radius:20px; font-size:0.82rem; cursor:pointer; font-weight:600;}
.chip:hover{border-color:var(--sage);}
.chip.selected{background:var(--sage); border-color:var(--sage); color:#fff;}
.chip.add-new{border-style:dashed;}

/* ---------------------------------------------------------- */
/* Termine (Auftragsdetail)                                    */
/* ---------------------------------------------------------- */
.termin-row{border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap;}
.termin-row .when{font-weight:600; font-size:0.88rem;}
.termin-row .where{font-size:0.78rem; color:var(--ink-soft); margin-top:2px;}
.termin-row .flags{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.termin-add-row{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:6px;}
.termin-add-row .field{flex:1; min-width:130px; margin-bottom:0;}

/* ---------------------------------------------------------- */
/* Item rows (Angebot / Rechnung Positionen)                   */
/* ---------------------------------------------------------- */
.item-row{border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; position:relative;}
.item-row .grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px;}
.item-remove{position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); cursor:pointer; font-size:0.85rem; line-height:1;}
.item-remove:hover{border-color:var(--danger); color:var(--danger);}
.add-item{width:100%; margin-top:4px;}

.inline-row{display:flex; gap:8px; align-items:flex-end; margin-bottom:12px;}
.inline-row .field{flex:1; margin-bottom:0;}

/* ---------------------------------------------------------- */
/* Document editor layout (Angebot / Rechnung / Mahnung)       */
/* ---------------------------------------------------------- */
.layout{display:grid; grid-template-columns:420px 1fr; gap:0; align-items:start;}
@media (max-width:980px){ .layout{grid-template-columns:1fr;} }

.panel-col{padding:28px; max-width:420px; margin:0 auto; width:100%;}
.stage-col{padding:28px; display:flex; justify-content:center;}

/* --- A4 preview page --- */
.page{background:#fff; color:#2B2A27; width:210mm; min-height:297mm; padding:18mm 16mm; box-shadow:0 4px 28px rgba(0,0,0,0.10); border-radius:4px; font-size:10.6pt; line-height:1.5; position:relative; display:flex; flex-direction:column;}
.invoice-body{flex:0 0 auto;}
.doc-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;}
.doc-brand{display:flex; align-items:center; gap:12px;}
.doc-brand .logo{width:46px; height:46px; flex:none;}
.doc-brand .word{font-weight:700; font-size:1.3rem; color:#2B2A27;}
.doc-sender-meta{font-size:9pt; color:#726C62; margin-top:4px; line-height:1.6;}
.doc-meta{text-align:right; font-size:9.3pt; color:#726C62;}
.doc-meta .title{font-size:1.5rem; font-weight:700; color:#2B2A27; margin-bottom:8px; font-family:inherit;}
.doc-meta div{margin-top:2px;}
.doc-meta b{color:#2B2A27; font-family:ui-monospace,Consolas,monospace;}

.doc-addr{margin-bottom:16px;}
.doc-addr .label{font-size:8pt; text-transform:uppercase; letter-spacing:0.06em; color:#9DBDB2; font-weight:700; margin-bottom:6px;}
.doc-addr div{white-space:pre-line;}

.doc-subject{font-weight:700; font-size:1.02rem; margin:0 0 10px;}
.doc-intro{color:#454339; margin:0 0 16px; white-space:pre-line;}

table.items{width:100%; border-collapse:collapse; margin-bottom:6px;}
table.items thead th{text-align:left; font-size:8.3pt; text-transform:uppercase; letter-spacing:0.05em; color:#726C62; border-bottom:1.5px solid #4B7B6F; padding:0 4px 8px;}
table.items thead th.num{text-align:right;}
table.items tbody td{padding:9px 4px; border-bottom:1px solid #E9E4DA; vertical-align:top;}
table.items tbody td.num{text-align:right; font-family:ui-monospace,Consolas,monospace; white-space:nowrap;}
table.items tbody tr:last-child td{border-bottom:1px solid #E9E4DA;}

.doc-summary{margin-left:auto; width:270px; margin-top:14px;}
.doc-summary .line{display:flex; justify-content:space-between; padding:6px 4px; font-size:9.6pt; color:#454339;}
.doc-summary .line.total{border-top:1.5px solid #2B2A27; margin-top:4px; font-weight:700; font-size:1.05rem; color:#2B2A27;}
.doc-summary .line span.mono{font-family:ui-monospace,Consolas,monospace;}

.doc-notes{margin-top:14px; font-size:9.3pt; color:#726C62; border-top:1px solid #E9E4DA; padding-top:10px; white-space:pre-line;}
.doc-closing{margin-top:22px; font-size:9.8pt; color:#2B2A27;}
.doc-closing .signee{margin-top:26px; font-weight:700;}

.doc-footer{margin-top:auto; padding-top:20px; border-top:1px solid #E9E4DA; font-size:8pt; color:#9a9488; display:flex; justify-content:space-between; gap:16px;}

.paid-stamp{position:absolute; top:120px; right:16mm; border:3px solid #4B7B6F; color:#4B7B6F; font-weight:800; font-size:1.5rem; letter-spacing:0.08em; padding:8px 22px; border-radius:10px; transform:rotate(-9deg); opacity:0.85; text-transform:uppercase; z-index:6;}

/* --- Swiss QR-bill (Zahlteil / Empfangsschein) --- */
.qr-bill-wrap{margin:auto -16mm -18mm -16mm; padding-top:3mm; border-top:1px dashed #b7b0a2; position:relative;}
.qr-cut-hint{display:flex; align-items:center; gap:5px; font-size:7pt; color:#9a9488; margin:-2.3mm 0 1.2mm 6mm; background:#fff; width:max-content; padding:0 5px; line-height:1.2;}
.qr-bill{display:flex; width:210mm; height:105mm; background:#fff; color:#000; font-family:"Helvetica Neue",Arial,sans-serif;}

.qr-receipt{width:62mm; height:105mm; padding:5mm 5mm 4mm; border-right:1px dashed #b7b0a2; display:flex; flex-direction:column;}
.qr-payment{width:148mm; height:105mm; padding:5mm 5mm 4mm 8mm; display:flex; flex-direction:column;}
.qr-receipt h3, .qr-payment h3{font-size:11pt; font-weight:700; margin:0 0 3mm; letter-spacing:0.01em;}

.qr-field{margin-bottom:2.6mm;}
.qr-field .lbl{font-size:6pt; font-weight:700; margin-bottom:0.7mm;}
.qr-field .val{font-size:8pt; line-height:1.35; white-space:pre-line;}

.qr-amount-row{display:flex; align-items:flex-end; gap:4mm; margin-top:auto;}
.qr-amount-row .qr-field{margin-bottom:0;}
.qr-annahme{margin-left:auto; font-size:6pt; align-self:flex-end;}

.qr-payment-body{display:flex; gap:5mm; flex:1;}
.qr-code-col{width:46mm; flex:none; display:flex; flex-direction:column;}
.qr-code-box{width:46mm; height:46mm; position:relative;}
.qr-code-box svg:first-child{width:100%; height:100%; display:block;}
.qr-cross-bg{position:absolute; top:50%; left:50%; width:8mm; height:8mm; transform:translate(-50%,-50%); background:#fff;}
.qr-cross{position:absolute; top:50%; left:50%; width:7mm; height:7mm; transform:translate(-50%,-50%);}
.qr-code-col .qr-amount-row{margin-top:3mm;}
.qr-info-col{flex:1;}

@media print{
  @page{ size:A4; margin:0; }
  body{ background:#fff !important; }
  header.topbar, .panel-col, .shell-toolbar{ display:none !important; }
  .layout{ display:block; }
  .stage-col{ padding:0; display:block; }
  .page{ box-shadow:none; border-radius:0; width:auto; min-height:100vh; margin:0; padding:18mm 16mm; }
}

body.embed-doc header.topbar, body.embed-doc .panel-col{ display:none; }
body.embed-doc .layout{ display:block; }
body.embed-doc .stage-col{ padding:56px; display:flex; justify-content:center; }

/* ---------------------------------------------------------- */
/* Kalender                                                      */
/* ---------------------------------------------------------- */
.cal-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.cal-nav{display:flex; align-items:center; gap:8px;}
.cal-month-label{font-weight:700; font-size:1.05rem; min-width:170px; text-align:center;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-weekday{font-size:0.72rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; text-align:center; padding:4px 0;}
.cal-cell{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:6px; min-height:96px; cursor:pointer; display:flex; flex-direction:column; gap:4px; text-align:left;}
.cal-cell:hover{border-color:var(--sage-soft);}
.cal-cell.other-month{opacity:0.4;}
.cal-cell.today .cal-daynum{background:var(--sage); color:#fff; border-radius:50%;}
.cal-cell.selected{border-color:var(--sage); background:color-mix(in srgb, var(--sage) 8%, transparent);}
.cal-daynum{font-size:0.78rem; font-weight:700; width:22px; height:22px; display:flex; align-items:center; justify-content:center;}
.cal-pill{font-size:0.66rem; padding:2px 6px; border-radius:8px; background:color-mix(in srgb, var(--sage) 16%, transparent); color:var(--sage); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;}
.cal-pill.conflict{background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger);}
.cal-pill.absence{background:color-mix(in srgb, var(--warn) 22%, transparent); color:var(--warn);}
a.cal-cell{text-decoration:none;}
.cal-more{font-size:0.66rem; color:var(--ink-soft);}
.cal-count{display:none;}
@media (max-width:760px){
  .cal-cell{min-height:56px;}
  .cal-pill, .cal-more{display:none;}
  .cal-count{display:block; font-size:0.66rem; color:var(--ink-soft); font-weight:600;}
}

.cal-day-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; margin-bottom:8px; background:var(--panel);}
.cal-day-row.conflict{border-color:var(--danger);}
.conflict-warning{background:color-mix(in srgb, var(--danger) 12%, transparent); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); color:var(--danger); border-radius:12px; padding:8px 12px; font-size:0.8rem; margin-top:8px; line-height:1.5;}

/* ---------------------------------------------------------- */
/* Automatisierungen                                            */
/* ---------------------------------------------------------- */
.rule-card{display:flex; gap:14px; align-items:flex-start;}
.rule-icon{width:38px; height:38px; border-radius:11px; background:color-mix(in srgb, var(--sage) 16%, transparent); color:var(--sage); display:flex; align-items:center; justify-content:center; flex:none; font-size:1.1rem;}
.rule-body{flex:1;}
.rule-body h3{font-size:0.94rem; font-weight:700; margin-bottom:4px;}
.rule-body p{font-size:0.83rem; color:var(--ink-soft); margin:0 0 8px;}

.log-row{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line);}
.log-row:last-child{border-bottom:none;}
.log-row .log-icon{width:30px; height:30px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; font-size:0.85rem; background:color-mix(in srgb, var(--sage) 14%, transparent); color:var(--sage);}
.log-row .log-body{flex:1; min-width:0;}
.log-row .log-text{font-size:0.85rem;}
.log-row .log-meta{font-size:0.74rem; color:var(--ink-soft); margin-top:2px;}

.simulate-banner{font-size:0.78rem; color:var(--ink-soft); background:color-mix(in srgb, var(--ink-soft) 8%, transparent); border-radius:14px; padding:12px 14px; margin-bottom:16px; line-height:1.5;}

/* ---------------------------------------------------------- */
/* Modal (Kunde/Mitarbeiter/Termin anlegen)                    */
/* ---------------------------------------------------------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(20,18,14,0.42); display:flex; align-items:flex-start; justify-content:center; padding:8vh 20px; z-index:100; overflow-y:auto;}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:24px; width:100%; max-width:460px;}
.modal h2{font-size:1.02rem; margin:0 0 16px;}
.modal .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}

/* ---------------------------------------------------------- */
/* CSV-Kundenimport                                              */
/* ---------------------------------------------------------- */
.csv-map-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; margin-top:10px;}

/* ---------------------------------------------------------- */
/* Arbeitsrapporte                                               */
/* ---------------------------------------------------------- */
.rapport-row{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px;}
.rapport-head{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:0.78rem; color:var(--ink-soft); margin-bottom:6px;}
.rapport-date{font-weight:600; color:var(--ink);}
.rapport-text{font-size:0.88rem; white-space:pre-wrap;}
.rapport-attachments{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.attachment-thumb{display:block; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line); flex:none;}
.attachment-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.attachment-file{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:0.8rem; color:var(--ink); text-decoration:none; background:var(--bg);}
.attachment-file:hover, .attachment-thumb:hover{border-color:var(--sage);}

/* ---------------------------------------------------------- */
/* Misc                                                         */
/* ---------------------------------------------------------- */
.text-danger{color:var(--danger);}
.text-soft{color:var(--ink-soft);}
.stat-inline{display:flex; gap:18px; flex-wrap:wrap; font-size:0.82rem; color:var(--ink-soft); margin-bottom:4px;}
.stat-inline b{color:var(--ink); font-family:ui-monospace,Consolas,monospace;}