:root{
  --portal-blue:#165aa7;
  --portal-blue-dark:#0b3d78;
  --portal-blue-soft:#eaf3ff;
  --portal-orange:#f28c18;
  --portal-orange-dark:#d87300;
  --portal-surface:#fff;
  --portal-bg:#f4f6f9;
  --portal-line:#d8e0e9;
  --portal-text:#243247;
  --portal-muted:#66758a;
  --portal-success:#16835d;
  --portal-danger:#c73e42;
  --portal-shadow:0 3px 12px rgba(30,52,80,.08);
}

html,body{background:var(--portal-bg);color:var(--portal-text)}
body.app{grid-template-columns:250px minmax(0,1fr)}
.sidebar{
  padding:0 0 18px;
  background:linear-gradient(180deg,var(--portal-blue-dark),#082f5d);
  box-shadow:4px 0 18px rgba(10,48,91,.12);
}
.brand{
  min-height:72px;
  margin:0;
  padding:14px 19px;
  gap:11px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brandmark{
  width:40px;height:40px;border-radius:8px;
  background:#fff;color:var(--portal-blue-dark);
  box-shadow:none;
}
.brandtext{font-size:15px}.brandtext small{color:#bed3ed}
.sidebar nav{padding:14px 10px;gap:3px;overflow:auto}
.sidebar nav a{
  min-height:42px;padding:9px 12px;border-radius:6px;
  color:#d6e3f2;font-size:13.5px;font-weight:600;
}
.sidebar nav a i{font-size:16px}
.sidebar nav a:hover{background:rgba(255,255,255,.09)}
.sidebar nav a.active{
  background:#fff;color:var(--portal-blue-dark);
  box-shadow:inset 4px 0 0 var(--portal-orange),var(--portal-shadow);
}
.collapse{margin:0 10px;border-radius:6px}
.main{padding:0 26px 22px}
.main>header{
  height:72px;margin:0 -26px 22px;padding:0 26px;
  border-bottom:1px solid var(--portal-line);background:#fff;
  box-shadow:0 1px 5px rgba(30,52,80,.04);
}
.main>header h1{font-size:20px}.main>header p{font-size:12px}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.help-trigger,.ghost,.primary,.button{border-radius:5px}
.primary{background:var(--portal-orange);color:#fff}
.primary:hover{background:var(--portal-orange-dark)}
.ghost{border-color:var(--portal-line);color:var(--portal-blue-dark)}

.hero{
  padding:23px 26px;border-radius:8px;margin-bottom:16px;
  background:linear-gradient(108deg,var(--portal-blue-dark),var(--portal-blue));
  box-shadow:var(--portal-shadow);
}
.hero h2{font-size:24px}.hero .primary{color:#fff!important;background:var(--portal-orange)!important}
.eyebrow{color:#bcd8f8}.eyebrow.dark{color:var(--portal-blue)}
.metrics{gap:12px;margin:14px 0}
.metrics article,.panel{
  border:1px solid var(--portal-line);border-radius:7px;
  padding:17px;box-shadow:var(--portal-shadow);
}
.metrics article{border-top:3px solid var(--portal-blue)}
.metrics article.accent{border-top-color:var(--portal-orange)}
.metrics article strong{font-size:24px;margin:7px 0 3px}
.dashboard-attention{gap:10px}
.attention-tile{border-radius:6px;border-color:var(--portal-line);box-shadow:none}
.panel-heading{border-bottom:1px solid #e8edf3;padding-bottom:12px;margin-bottom:10px}
.panel-heading h3{margin:3px 0 0}
.activity-row{border-radius:5px}
.revenue-panel{margin:14px 0 18px}
.revenue-chart{display:grid;grid-template-columns:repeat(6,minmax(55px,1fr));gap:16px;height:220px;padding:12px 8px 0}
.revenue-column{display:grid;grid-template-rows:22px 1fr 22px;gap:5px;text-align:center;min-width:0}
.revenue-value{font-size:10px;color:var(--portal-muted);white-space:nowrap}
.revenue-track{position:relative;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--portal-line);background:linear-gradient(to top,transparent 24%,#edf1f5 25%,transparent 26%,transparent 49%,#edf1f5 50%,transparent 51%,transparent 74%,#edf1f5 75%,transparent 76%)}
.revenue-track span{display:block;width:min(48px,64%);min-height:4px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--portal-orange),#ffb24d);transition:.2s}
.revenue-column b{font-size:11px;color:#53647a}

.page-actions{
  min-height:52px;padding:10px 13px;margin:0 0 12px;
  border:1px solid var(--portal-line);border-radius:7px;background:#fff;
}
.page-actions p{margin:0;font-size:13px}
.table-wrap{border-radius:7px}
table{background:#fff}
th{height:42px;background:#f5f7fa;color:#53647a;font-size:11px}
td{height:50px;padding:11px 15px}
tbody tr:hover{background:#f7fbff}
.pill{background:#e8f5ef;color:var(--portal-success)}
.pill.status-draft{background:#eef2f7;color:#5d6b7d}
.pill.status-overdue,.pill.status-cancelled{background:#fdeced;color:var(--portal-danger)}
.row-actions{gap:6px}
.row-actions .button,.row-actions button{padding:8px 11px;font-size:12px}

.status-tabs{
  display:flex;align-items:center;gap:3px;margin:0 0 12px;
  padding:0 4px;border-bottom:1px solid var(--portal-line);
  overflow:auto;background:#fff;border-radius:7px 7px 0 0;
}
.status-tab{
  appearance:none;border:0;border-bottom:3px solid transparent;
  background:transparent;color:var(--portal-muted);padding:12px 13px 10px;
  font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;
}
.status-tab b{
  display:inline-grid;place-items:center;min-width:21px;height:21px;margin-left:5px;
  padding:0 6px;border-radius:11px;background:#edf1f5;color:#53647a;font-size:10px;
}
.status-tab:hover,.status-tab.active{color:var(--portal-blue)}
.status-tab.active{border-bottom-color:var(--portal-orange)}
.status-tab.active b{background:var(--portal-blue-soft);color:var(--portal-blue)}

.list-toolbar{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.list-search{
  flex:1;max-width:430px;height:39px;border:1px solid var(--portal-line);
  border-radius:5px;background:#fff;padding:0 12px;color:var(--portal-text);
}
.list-meta{margin-left:auto;color:var(--portal-muted);font-size:12px}

.document-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;
}
.document-preview-shell{
  min-height:760px;padding:24px;background:#e7ebf0;border:1px solid #d3dae3;border-radius:7px;
}
.document-preview-page{
  width:min(100%,800px);min-height:1030px;margin:auto;padding:48px;
  background:#fff;box-shadow:0 5px 18px rgba(24,38,58,.18);
}
.document-side-actions{position:sticky;top:92px;display:grid;gap:12px}
.document-side-actions .panel{padding:14px}

/* Belegeditor: alle Eingaben links, Dokumentvorschau dauerhaft rechts */
.document-composer{
  grid-template-columns:minmax(480px,620px) minmax(560px,1fr)!important;
  max-width:1580px!important;gap:20px!important;
}
.document-composer>.document-fields,
.document-composer>.series-fields,
.document-composer>.document-items-panel,
.document-composer>.form-actions{grid-column:1!important;width:100%!important}
.document-composer>.document-live-preview{
  grid-column:2!important;grid-row:1/20!important;
  position:sticky!important;top:88px!important;align-self:start;
  max-height:calc(100vh - 106px);overflow:auto;
}
.document-composer>.form-actions{
  position:static;margin:0!important;padding:12px;
  border:1px solid var(--portal-line);border-radius:7px;background:#fff;
}
.document-composer .document-item{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.document-composer .document-item>*{grid-column:auto!important}
.document-composer .document-item>label:first-of-type,
.document-composer .document-item .item-description,
.document-composer .document-item .remove-document-item{grid-column:1/-1!important}
.document-composer .preview-paper{min-height:700px}

.payment-invoice-list{display:grid;gap:9px}
.payment-invoice-card{display:grid;grid-template-columns:minmax(260px,1fr) 160px auto;gap:18px;align-items:center;padding:14px;border:1px solid var(--portal-line);border-radius:7px;background:#fff}
.payment-invoice-card>div:first-child span,.payment-invoice-card>div:first-child small,.payment-open span{display:block}
.payment-invoice-card>div:first-child span{margin-top:3px;color:#44546a}
.payment-invoice-card small,.payment-open span{margin-top:3px;color:var(--portal-muted);font-size:11px}
.payment-open{text-align:right}.payment-open strong{display:block;margin-top:4px;font-size:18px}
.payment-history{margin-top:16px}
.payment-entry-form{max-width:760px!important}
.payment-type-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-type-choice label{display:flex;gap:9px;align-items:flex-start;padding:12px;border:1px solid var(--portal-line);border-radius:7px;background:#f8fafc;cursor:pointer}
.payment-type-choice input{width:18px!important;height:18px!important;margin:2px 0 0!important}
.payment-type-choice span,.payment-type-choice small{display:block}.payment-type-choice small{margin-top:4px;color:var(--portal-muted);font-weight:400}
.payment-summary{display:flex;justify-content:space-between;align-items:center;padding:13px;border-radius:7px;background:var(--portal-blue-soft);color:var(--portal-blue-dark)}
.payment-summary strong{font-size:20px}

footer{padding:18px 4px;color:var(--portal-muted);font-size:11px}

body.nav-collapsed{grid-template-columns:74px minmax(0,1fr)}
body.nav-collapsed .sidebar .brandtext,
body.nav-collapsed .sidebar nav a span,
body.nav-collapsed .sidebar .nav-separator{display:none}
body.nav-collapsed .sidebar nav a{justify-content:center}
body.nav-collapsed .sidebar nav a i{width:auto}

@media(max-width:1050px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .document-workspace{grid-template-columns:1fr}
  .document-side-actions{position:static}
  .document-composer{grid-template-columns:1fr!important}
  .document-composer>.document-fields,.document-composer>.series-fields,.document-composer>.document-items-panel,.document-composer>.form-actions,.document-composer>.document-live-preview{grid-column:1!important}
  .document-composer>.document-live-preview{grid-row:auto!important;position:static!important;max-height:none}
  .payment-invoice-card{grid-template-columns:1fr auto}.payment-invoice-card .row-actions{grid-column:1/-1}
}
@media(max-width:760px){
  body.app{display:block}
  .sidebar{position:fixed;width:250px;transform:translateX(-105%);transition:.2s}
  .sidebar.open{transform:none}
  .main{padding:0 12px 18px}
  .main>header{margin:0 -12px 15px;padding:0 12px}
  .icon-button{display:inline-grid}
  .hero{padding:18px;align-items:flex-start;gap:14px;flex-direction:column}
  .metrics{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .page-actions{align-items:flex-start;gap:10px;flex-direction:column}
  .document-preview-shell{padding:8px;overflow:auto}
  .document-preview-page{min-width:680px}
  .revenue-chart{gap:7px;height:180px;padding-inline:0}.revenue-value{font-size:9px}.revenue-track span{width:72%}
  .table-wrap{overflow:visible}
  .table-wrap table{display:block;min-width:0;background:transparent}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:grid;gap:10px}
  .table-wrap tbody tr[data-status]{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px;border:1px solid var(--portal-line);border-radius:7px;background:#fff;box-shadow:var(--portal-shadow)}
  .table-wrap tbody tr[data-status] td{display:block;height:auto;padding:0;border:0;min-width:0}
  .table-wrap tbody tr[data-status] td::before{display:block;margin-bottom:4px;color:var(--portal-muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
  .table-wrap tbody tr[data-status] td:nth-child(1)::before{content:"Nummer"}
  .table-wrap tbody tr[data-status] td:nth-child(2)::before{content:"Status"}
  .table-wrap tbody tr[data-status] td:nth-child(3)::before{content:"Datum"}
  .table-wrap tbody tr[data-status] td:nth-child(4){grid-column:1/-1}
  .table-wrap tbody tr[data-status] td:nth-child(4)::before{content:"Aktionen"}
  .table-wrap .row-actions{display:flex;flex-wrap:wrap}
}
@media(max-width:480px){.metrics{grid-template-columns:1fr}}
@media(max-width:620px){.payment-invoice-card{grid-template-columns:1fr}.payment-open{text-align:left}.payment-type-choice{grid-template-columns:1fr}}