:root{
  --bg:#0e1116;
  --fg:#e8eaed;
  --line:#2a2f3a;
  --accent:#f7d500;
  --muted:#a6adb7;
}

*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  line-height: 1.45;
}

a{ color:var(--fg); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-box{
  width:min(520px, 92vw);
  text-align:center;
}

.title{
  font-size:18px;
  margin-bottom:22px;
}

.msg{
  margin: 0 0 16px 0;
  opacity:0.85;
  font-size:14px;
}

.field{
  width:100%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:12px 10px;
  outline:none;
  font-family:inherit;
  font-size:16px;
  border-radius:0;
  margin: 10px 0;
}

.actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

.textbtn{
  cursor:pointer;
  user-select:none;
  display:inline-block;
  padding:4px 2px;
}

.textbtn:hover{ text-decoration:underline; }

/* --- Modal (custom overlay, no browser dialogs) --- */
.modal{ position:fixed; inset:0; display:none; z-index:9999; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(640px, 92vw);
  background:rgba(20,24,32,0.98);
  border:1px solid var(--line);
  padding:16px 16px 14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.modal-title{ font-size:16px; margin-bottom:10px; }
.modal-body{ font-size:14px; opacity:0.92; white-space:pre-wrap; }
.modal-actions{ margin-top:14px; display:flex; justify-content:flex-end; gap:10px; }

.topbar{
  width:100%;
  border-bottom:1px solid var(--line);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.page{
  min-height:100%;
}

.content{
  padding:18px 14px;
  opacity:0.9;
  font-size:14px;
}

.page-title{
  font-size: 38px;
  font-weight: 700;
  margin: 6px 0 18px 0;
  opacity: 0.95;
}


/* --- App Shell (Header + left hover drawer menu) --- */
.app-shell{ min-height:100vh; display:flex; flex-direction:column; }
.app-body{ flex:1; display:flex; position:relative; }

/* Sidebar-Konfig */
:root{
  --sidebar-w: 260px;       /* volle Menübreite */
  --sidebar-peek: 18px;     /* sichtbarer Spalt links */
  --sidebar-gap: 14px;      /* Innenabstand */
}

/* Sidebar ist fixed/overlay und fährt aus dem Sichtbereich raus */
.sidebar{
  position: fixed;
  top: var(--header-h, 56px);
  left: 0;
  bottom: 0;

  width: var(--sidebar-w);
  padding: 18px var(--sidebar-gap);

  border-right: 1px solid var(--line);

  /* Falls deine Seite sonst transparent ist, sorgt das hier für sauberen Hintergrund */
  background: var(--bg);

  z-index: 50;

  /* Start: fast komplett links draußen (nur Peek bleibt) */
  transform: translateX(calc(-1 * (var(--sidebar-w) - var(--sidebar-peek))));
  transition: transform 180ms ease;
}

/* Hover-Fallback: auch ohne JS öffnet sich die Sidebar */
.sidebar-peek:hover + .sidebar,
.sidebar:hover{
  transform: translateX(0);
}


/* geöffnet */
.sidebar.open,
.sidebar.is-open{
  transform: translateX(0);
}

/* Der kleine sichtbare Streifen links */
.sidebar-peek{position:fixed;left:0;top:var(--header-h,56px);bottom:0;width:18px;background:transparent;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;cursor:pointer;}

/* Pfeil */
.sidebar-peek .chev{
  color: var(--fg);
  opacity: 0.9;
  font-size: 16px;
  user-select:none;
}

/* Nav Links */
.navitem{
  color: var(--fg);
  text-decoration:none;
  display:block;
  line-height: 1.2;
  opacity: 0.9;
  margin-bottom: 10px;
}

.navitem:hover{
  text-decoration: underline;
  opacity: 1;
}

.navitem.active{
  opacity: 1;
}

/* Content: Standard nach rechts schieben, damit Peek-Spalte nichts überlappt */
.app-body .content{
  flex: 1;
  padding: 18px 14px 18px calc(var(--sidebar-peek) + 24px);
  margin-left: 0;
  transition: padding-left 180ms ease;
}

/* Wenn Sidebar offen ist, Content weiter nach rechts schieben (kein Überlappen) */
.sidebar.open ~ .content,
.sidebar.is-open ~ .content,
.sidebar-peek:hover + .sidebar ~ .content,
.sidebar:hover ~ .content{
  padding-left: calc(var(--sidebar-w) + 24px);
}


/* Mobile */
@media (max-width: 768px){
  :root{ --sidebar-w: 220px; --sidebar-peek: 16px; }
  .sidebar{ padding: 16px 12px; }
}

/* --- Enterprise / Binance UI (nur Content-Bereich, Header/Sidebar bleibt unverändert) --- */

.enterprise-shell{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 24px;
  min-height: 60vh;
}

.enterprise-actions{
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding-top: 6px;
}

.enterprise-btn{
  display:inline-block;
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  font-family:inherit;
  font-size:16px;
  color:var(--fg);
  cursor:pointer;
  text-align:left;
}

.enterprise-btn:hover{ text-decoration: underline; }

.enterprise-years{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
  padding-top: 6px;
  min-width: 120px;
}

.year-item{
  color: #f3d000;
  font-size: 16px;
  text-decoration:none;
}
.year-item:hover{ text-decoration:underline; }

.year-empty{ opacity:0.0; }

/* --- Simulation UI (Enterprise) --- */

.simulation-shell{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  min-height:60vh;
}

.simulation-left{ flex: 1 1 auto; }

.sim-calc{
  background:transparent;
  border:none;
  padding:0;
  margin:6px 0 18px 0;
  font-family:inherit;
  font-size:16px;
  color:var(--fg);
  cursor:pointer;
  text-align:left;
}

.sim-calc:hover{ text-decoration:underline; }

.sim-cats{ display:flex; flex-direction:column; gap:12px; }

.sim-cat{ position:relative; }

.sim-cat-title{
  font-size:16px;
  color:var(--fg);
}

.sim-dropdown{
  display:none;
  flex-direction:column;
  gap:10px;
  padding:10px 0 0 18px;
}

.sim-cat:hover .sim-dropdown{ display:flex; }

.sim-item{
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  font-family:inherit;
  font-size:16px;
  color:#f3d000;
  cursor:pointer;
  text-align:left;
}

.sim-item:hover{ text-decoration:underline; }

.simulation-right{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  padding-top: 6px;
  min-width: 260px;
}

.sim-ev{ color:#ff2a2a; font-size:14px; text-align:right; }
.sim-ev-btn{ background:transparent; border:none; padding:4px 0; width:100%; cursor:pointer; }
.sim-ev-btn:hover{ text-decoration:underline; }
.sim-ev-n{ margin-right:6px; }
.sim-ev-a{ margin-left:10px; }
.sim-ev-empty{ opacity:0.0; }

/* Modal */
.sim-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.sim-modal.open{ display:flex; }

.sim-modal-card{
  width: min(720px, 100%);
  background:#1a1a1a;
  border:1px solid #333;
  padding:18px;
}

.sim-modal-title{ font-size:16px; margin-bottom:10px; }
.sim-modal-desc{ font-size:14px; opacity:0.9; margin-bottom:14px; }

.sim-modal-fields{ display:flex; flex-direction:column; gap:12px; }

.sim-field-row{ display:flex; flex-direction:column; gap:6px; }
.sim-field-label{ font-size:13px; opacity:0.95; }

.sim-field-input{
  background:#3a3a3a;
  border:1px solid #555;
  padding:8px 10px;
  font-family:inherit;
  font-size:15px;
  color:#f3d000;
  outline:none;
}

.sim-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

.sim-modal-btn{
  background:transparent;
  border:1px solid #444;
  padding:8px 12px;
  font-family:inherit;
  font-size:14px;
  color:var(--fg);
  cursor:pointer;
}

.sim-modal-btn.primary{ border-color:#777; }
.sim-modal-btn.danger{ border-color:#7a3030; color:#ff4b4b; }

/* Result */
.simres-shell{ position:relative; min-height:60vh; }
.simres-actions{ position:absolute; top:6px; right:0; }
.simres-save{
  background:transparent;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:16px;
  color:var(--fg);
  cursor:pointer;
}
.simres-save:hover{ text-decoration:underline; }

.simres-lines{ padding-top:36px; display:flex; flex-direction:column; gap:10px; }
.simres-line{ color:#f3d000; font-size:15px; }
.simres-line.simres-warn{ color:#ffb020; }
.simres-line.simres-risk{ color:#ff3b3b; }
.simres-line.simres-positive{ color:#00ff66; }

.simres-line.simres-info{ color:#f3d000; }
.simres-back{ margin-top:18px; }
.simres-backlink{ color:var(--fg); text-decoration:none; }
.simres-backlink:hover{ text-decoration:underline; }

.binance-title{
  font-size: 16px;
  margin: 6px 0 18px 0;
}

.binance-form-wrap{
  max-width: 980px;
}

.binance-form{
  display:block;
}

.binance-section{
  margin: 18px 0 10px 0;
  opacity: 0.95;
}

.binance-row{
display:flex;
  align-items:center;
  gap: 8px;
  padding: 2px 0;
}

.binance-label{
flex: 1 1 auto;
  min-width: 240px;
  font-size: 12px;
  line-height: 1.15;
}

.binance-label .idx{ opacity:0.9; }

.binance-input{
flex: 0 0 180px;
  border: none;
  outline: none;
  border-radius: 0;
  background: #3a3a3a;
  color: #f3d000;
  padding: 2px 6px;
  font-family:inherit;
  font-size: 12px;
  line-height: 1.2;
  height: 22px;
}

.binance-input[readonly]{
  opacity: 0.9;
}

.binance-actions{
  margin-top: 18px;
  display:flex;
  gap: 14px;
  align-items:center;
}

.binance-save,
.binance-delete{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  padding: 8px 12px;
  cursor: pointer;
}

.binance-save:hover,
.binance-delete:hover{
  text-decoration: underline;
}

.binance-select{
  max-width: 600px;
}

.binance-year-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.binance-year-item{
  color: #f3d000;
  cursor: pointer;
  user-select:none;
  width: fit-content;
}

.binance-year-item:hover{ text-decoration: underline; }

.binance-year-item.is-selected{
  text-decoration: underline;
}

.binance-year-empty{
  opacity:0.8;
}

@media (max-width: 768px){
  .enterprise-shell{ flex-direction:column; align-items:flex-start; }
  .enterprise-years{ align-items:flex-start; }
  .binance-row{ flex-direction:column; align-items:flex-start; }
  .binance-input{ width:min(420px, 92vw); flex: 0 0 auto; }
  .binance-label{ min-width: auto; }
}

.result-line.positive{
  color: #00ff66;
}

.positive { color: #00ff66; }



/* --- Strategy Engine additions --- */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:8px 10px;
  text-align:left;
  font-size: 14px;
}
.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  text-decoration:none;

}
.muted{ opacity:0.75; }


/* --- Form spacing (App pages) --- */
.form{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.form label{
  margin-top: 6px;
  opacity: 0.9;
}
.form input[type="text"],
.form input[type="number"],
.form input[type="password"],
.form input[type="file"],
.form select,
.form textarea{
  border:1px solid rgba(255,255,255,0.18);
  background:transparent;
  color:var(--fg);
  padding:10px 10px;
  outline:none;
  font-family:inherit;
  font-size:14px;
}
.form textarea{ min-height: 110px; }
.form button{
  align-self:flex-start;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.18);
  background:transparent;
  color:var(--fg);
  cursor:pointer;
}
.form button:hover{
  border-color: rgba(255,255,255,0.35);
}

/* =========================
   Dashboard UI
========================= */

.pagehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.btn{
  display:inline-block;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  color: var(--fg);
  text-decoration:none;
  background: rgba(255,255,255,0.02);
}
.btn:hover{ border-color: rgba(255,255,255,0.35); }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:12px; }
@media (max-width: 980px){
  .grid2, .grid3{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:14px;
  background: rgba(255,255,255,0.02);
}

/* --- vertical breathing room between stacked sections (cards / grids) --- */
.content > .card{ margin-bottom: 18px; }
.content > .grid-2,
.content > .grid2,
.content > .grid-3,
.content > .grid3{ margin-bottom: 18px; }
.cardtitle{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.8;
  margin-bottom:10px;
}

.ampelgrid{ display:flex; flex-direction:column; gap:10px; }
.ampelitem{ display:flex; align-items:center; gap:10px; }
.ampel.light{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); }
.ampel.light.green{ background: rgba(0,255,140,0.55); }
.ampel.light.yellow{ background: rgba(255,220,0,0.55); }
.ampel.light.red{ background: rgba(255,70,70,0.60); }

.kpirow{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
@media (max-width: 980px){ .kpirow{ grid-template-columns: 1fr; } }
.kpi{ border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:10px; }
.kpilabel{ font-size:12px; opacity:0.7; }
.kpivalue{ font-size:22px; font-weight:700; margin-top:2px; }

.donutwrap{ display:flex; gap:12px; align-items:center; }
.donut{
  width:84px; height:84px;
  border-radius:50%;
  background: conic-gradient(rgba(255,255,255,0.55) calc(var(--p)*1%), rgba(255,255,255,0.10) 0);
  position:relative;
}
.donut::after{
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.10);
}

/* multi-segment donut (a/b/c) */
.donutgrid{ display:flex; flex-direction:column; gap:12px; }
.donutcard{ display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:10px; }
.donutmulti{
  width:78px; height:78px;
  border-radius:50%;
  /* segments in % (a, b, c). Colors kept minimal/neutral. */
  background: conic-gradient(
    rgba(255,255,255,0.55) 0 calc(var(--a)*1%),
    rgba(120,170,255,0.55) 0 calc((var(--a) + var(--b))*1%),
    rgba(255,220,0,0.55) 0 100%
  );
  position:relative;
}
.donutmulti::after{
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.10);
}

.card.inner{ padding:12px; background: rgba(255,255,255,0.015); }

.whatif{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:10px;
  background: rgba(255,255,255,0.02);
}

.donutsmallgrid{ display:flex; flex-wrap:wrap; gap:6px; }
.pill{
  display:inline-flex;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  font-size:12px;
  opacity:0.9;
}

/* simple list rows (admin applications) */
.list{ display:flex; flex-direction:column; gap:10px; }
.list .row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(255,255,255,0.015);
}
.list .row:hover{ border-color: rgba(255,255,255,0.22); text-decoration:none; }

.bullets{ margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.bullet{ display:flex; gap:10px; align-items:flex-start; }
.bullet .dot{ width:10px; height:10px; border-radius:50%; margin-top:4px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.10); }
.bullet.info .dot{ background: rgba(120,170,255,0.55); }
.bullet.warning .dot{ background: rgba(255,220,0,0.55); }
.bullet.critical .dot{ background: rgba(255,70,70,0.60); }
.bullet.risk .dot{ background: rgba(255,70,70,0.60); }
.bullet.positive .dot{ background: rgba(0,255,140,0.55); }

.benchgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 980px){ .benchgrid{ grid-template-columns: 1fr; } }
.benchitem{ border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:10px; }
.quote{ border-left:3px solid rgba(255,255,255,0.22); padding-left:10px; opacity:0.9; }

.fanwrap{ width:100%; overflow:hidden; }
.fanmeta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.advisorline{ display:block; text-decoration:none; color:inherit; border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:12px; }
.advisorline:hover{ border-color: rgba(255,255,255,0.30); }


.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;margin-right:6px;border:1px solid var(--border);}
.pill-info{background:rgba(0,0,0,0.03);} .pill-warning{background:rgba(255,165,0,0.12);} .pill-critical{background:rgba(255,0,0,0.10);}


.content h2{ margin: 6px 0 14px 0; }
.content h3{ margin: 6px 0 12px 0; }
.content h4{ margin: 14px 0 10px 0; }
.content p{ margin: 8px 0 10px 0; }
.grid-2{ gap: 18px; }
.grid-3{ gap: 18px; }
.table{ margin-top: 10px; }


/* --- Modal (manual import) --- */
.dialog-modal{
  /* Make manual entry dialogs large enough to show the full schema without nested scroll areas */
  width:min(1400px, 98vw);
  max-height: 92vh;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,10,0.96);
  color: var(--fg);
  border-radius: 16px;
  padding:0;
  overflow:auto;
}

/* Manual dialogs: allow scrolling inside the dialog body (no clipped content) */
#manualBalanceDlg.dialog-modal,
#manualPnlDlg.dialog-modal{
  max-height: 92vh;
  overflow: auto;
}
#manualBalanceDlg .modal-inner,
#manualPnlDlg .modal-inner{
  padding: 10px;
  height: 100%;
}
#manualBalanceDlg .modal-body,
#manualPnlDlg .modal-body{
  margin-top: 6px;
  overflow: auto;
}

/* Manual import header spacing (reduce large dark area above fields) */
#manualBalanceDlg .modal-head,
#manualPnlDlg .modal-head{ padding-bottom: 6px; }
#manualBalanceDlg .modal-head h2,
#manualPnlDlg .modal-head h2,
#manualBalanceDlg .modal-head h3,
#manualPnlDlg .modal-head h3{ margin: 0 0 4px 0; }
.dialog-modal::backdrop{
  background: rgba(0,0,0,0.55);
}
.modal-inner{
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.modal-body{
  margin-top:10px;
  flex: 1;
  min-height: 0;
}
.modal-foot{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.stack{ display:flex; flex-direction:column; }
.btn.ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,0.18);
}
.btn.ghost:hover{ border-color: rgba(255,255,255,0.35); }

/* Manual statement entry (Bilanz/GuV) */
.schema-wrap{
  /* Avoid inner scrollbars (dialog itself can scroll if ever needed) */
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.schema-sec{
border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:6px 8px;
  margin-top:6px;
}
.schema-sec > summary{ cursor:pointer; font-weight:600; }
.schema-grid{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:6px;
}
.schema-row{
  display:grid;
  grid-template-columns: 1fr 130px;
  gap:8px;
  align-items:start;
  padding:2px 6px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  background: rgba(255,255,255,0.01);
}
.schema-label{
font-size:12px;
  line-height:1.15;
}
.schema-input{ width:100%; }

/* Make label + key a single compact line (prevents tall “cards” per row) */
.schema-row > div{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width: 0;
}
.schema-row > div .schema-label{
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.schema-row > div .muted.small{
  margin:0;
  font-size:10px;
  line-height:1.1;
  opacity:0.75;
  white-space:nowrap;
}
.schema-row > div code{ font-size:10px; }

/* Ultra-compact rows so Bilanz & GuV fit on one screen */
.schema-row input[type="text"],
.schema-row input[type="number"],
.schema-row input,
.schema-row select{
  height: 22px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 8px;
}
.schema-row input[type="number"]{ text-align:right; }
.schema-sec > summary{ font-size: 13px; }


/* Strategy import: show Bilanz (Aktiva/Passiva) side-by-side on one view */
#balanceSchemaWrap{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px;
  align-items:start;
}

/* Bilanz manuell: AKTIVA links (Sektionen 1–3), PASSIVA rechts (ab Sektion 4).
   Wichtig: PASSIVA startet in Zeile 1 rechts (nicht versetzt unter Aktiva). */
#balanceSchemaWrap > details.schema-sec:nth-child(1){ grid-column:1; grid-row:1; }
#balanceSchemaWrap > details.schema-sec:nth-child(2){ grid-column:1; grid-row:2; }
#balanceSchemaWrap > details.schema-sec:nth-child(3){ grid-column:1; grid-row:3; }

#balanceSchemaWrap > details.schema-sec:nth-child(4){ grid-column:2; grid-row:1; }
#balanceSchemaWrap > details.schema-sec:nth-child(5){ grid-column:2; grid-row:2; }
#balanceSchemaWrap > details.schema-sec:nth-child(6){ grid-column:2; grid-row:3; }
#balanceSchemaWrap > details.schema-sec:nth-child(7){ grid-column:2; grid-row:4; }
#balanceSchemaWrap > details.schema-sec:nth-child(8){ grid-column:2; grid-row:5; }
#balanceSchemaWrap > details.schema-sec:nth-child(9){ grid-column:2; grid-row:6; }
#balanceSchemaWrap > details.schema-sec:nth-child(10){ grid-column:2; grid-row:7; }
#balanceSchemaWrap > details.schema-sec:nth-child(11){ grid-column:2; grid-row:8; }
#balanceSchemaWrap > details.schema-sec:nth-child(12){ grid-column:2; grid-row:9; }

@media (max-width: 980px){
  /* Mobile: wieder untereinander */
  #balanceSchemaWrap > details.schema-sec{ grid-column:auto; grid-row:auto; }
}
@media (max-width: 980px){
  #balanceSchemaWrap{ grid-template-columns: 1fr; }
}
#balanceSchemaWrap .schema-sec{ margin-top:0; }
#balanceSchemaWrap > details.schema-sec{ min-width: 0; }

/* Bilanz: AKTIVA links (typisch 4 Sektionen), PASSIVA rechts (rest) */

/* Strategy import: compact GuV so it fits without an extra inner scroll */
#pnlSchemaWrap .schema-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px){
  #pnlSchemaWrap .schema-grid{ grid-template-columns: 1fr; }
}
#balanceSchemaWrap .schema-row,
#pnlSchemaWrap .schema-row{
  grid-template-columns: 1fr 140px;
  padding: 3px 6px;
  gap: 8px;
}
#balanceSchemaWrap .schema-label,
#pnlSchemaWrap .schema-label{
  font-size: 12px;
  line-height: 1.15;
}

/* --- Decision Panel (full width, keep layout intact) --- */
.decision-panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.04);
  padding:14px 14px;
  margin: 0 0 14px 0;
}
.decision-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.decision-title{
  font-weight:700;
  font-size:16px;
  margin:0;
  color: var(--accent);
}
.decision-sub{
  margin:6px 0 0 0;
  color: var(--fg);
  opacity:0.95;
}
.decision-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (max-width: 980px){
  .decision-grid{ grid-template-columns:1fr; }
}
.decision-list{
  margin:8px 0 0 18px;
  padding:0;
}
.decision-list li{ margin:6px 0; }
.decision-pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.decision-pill{
  border:1px solid var(--line);
  padding:6px 10px;
  background: rgba(255,255,255,0.03);
  color: var(--fg);
  font-size:12px;
}

/* color-only tweaks (layout unchanged) */
.muted{ color: var(--muted) !important; }


.num{font-family: Consolas, "Cascadia Mono", "Courier New", monospace;}


/* --- High-end SaaS UI (Simulation / Import / Ledger) --- */

/* Scope: apply only when a container has .saas-page */
.saas-page{
  --card-bg: rgba(255,255,255,0.035);
  --card-line: rgba(255,255,255,0.10);
  --card-line-strong: rgba(255,255,255,0.04);
  --shadow: 0 22px 55px rgba(0,0,0,0.45);
  --shadow-soft: 0 12px 28px rgba(0,0,0,0.35);
  --soft: rgba(255,255,255,0.06);
}

.saas-page .pagehead{
  margin-bottom: 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.saas-page .pagehead .titleblock h2{
  margin:0;
  font-size: 34px;
  letter-spacing:-0.02em;
}

.saas-page .pagehead .subtitle{
  margin-top:6px;
  max-width: 78ch;
  opacity:0.82;
  font-size: 14px;
}

.saas-page .crumbs{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  font-size: 13px;
  opacity:0.82;
}

.saas-page .crumbs a{ opacity:0.9; }
.saas-page .crumbs .dot{ opacity:0.5; }

.saas-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 18px;
}

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

.saas-card{
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background:
    radial-gradient(1200px 420px at 20% -10%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(900px 380px at 110% 0%, rgba(120,187,255,0.08), transparent 55%),
    var(--card-bg);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.saas-card + .saas-card{ margin-top: 18px; }

.saas-card .saas-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.saas-card .saas-card-head h3,
.saas-card .saas-card-head h4{
  margin:0;
}

.saas-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  opacity:0.92;
}

.saas-badge .dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}

.saas-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin: 12px 0 2px 0;
}

@media (max-width: 980px){
  .saas-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.saas-kpi{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
}

.saas-kpi .k{ font-size: 12px; opacity:0.78; }
.saas-kpi .v{ margin-top:4px; font-size: 16px; font-weight: 650; letter-spacing:-0.01em; }

.saas-steps{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  margin: 10px 0 12px 0;
}

.saas-step{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  opacity:0.92;
}

.saas-step .n{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--fg);
}

.saas-section{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(0,0,0,0.10);
  padding: 14px;
}

.saas-section + .saas-section{ margin-top: 14px; }

.saas-section .section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.saas-section .section-title h4{
  margin:0;
  font-size: 15px;
  letter-spacing:-0.01em;
}

.saas-hint{
  font-size: 12px;
  opacity: 0.78;
  max-width: 62ch;
}

.saas-page .form{ gap: 12px; }
.saas-page .form input[type="text"],
.saas-page .form input[type="number"],
.saas-page .form input[type="file"],
.saas-page .form textarea,
.saas-page .form select{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  padding: 11px 12px;
}

.saas-page .form input:focus,
.saas-page .form textarea:focus,
.saas-page .form select:focus{
  outline:none;
  border-color: rgba(255,255,255,0.04);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}

.saas-actionsbar{
  position: sticky;
  top: calc(var(--header-h, 56px) + 12px);
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.saas-actionsbar .btnrow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.saas-actionsbar .btn{
  border-radius: 14px;
}

.saas-primary{
  border-color: rgba(255,255,255,0.04) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  box-shadow: 0 12px 28px rgba(255,255,255,0.04);
}

.saas-ghost{
  background: rgba(255,255,255,0.02);
}

.saas-divider{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 12px 0;
}

/* Tables / lists inside SaaS cards */
.saas-table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 16px;
}

.saas-table th, .saas-table td{
  text-align:left;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}

.saas-table th{ opacity:0.78; font-weight:600; }
.saas-table tr:hover td{ background: rgba(255,255,255,0.02); }

/* Make details sections feel more premium */
.saas-page details.schema-sec{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* Manual dialogs: keep sections as compact as possible (matches edit-view density) */
#manualBalanceDlg details.schema-sec,
#manualPnlDlg details.schema-sec{
  padding: 6px 8px !important;
  margin-bottom: 8px !important;
}

#manualBalanceDlg details.schema-sec > summary,
#manualPnlDlg details.schema-sec > summary{
  padding: 0 !important;
}

.saas-page details.schema-sec > summary{
  cursor:pointer;
  list-style:none;
  font-weight:650;
  letter-spacing:-0.01em;
}

.saas-page details.schema-sec[open]{
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* Dialog premium touch */
.saas-page .dialog-modal{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(1200px 420px at 20% -10%, rgba(255,255,255,0.04), transparent 60%),
    rgba(10,10,10,0.96);
}


/* --- Billion-Dollar Polish (scoped) --- */

/* Background glow + subtle texture (only on saas pages) */
.saas-page{
  position: relative;
  isolation: isolate;
}
.saas-page::before{
  content:"";
  position:absolute;
  inset:-32px -18px -48px -18px;
  z-index:-1;
  background:
    radial-gradient(900px 420px at 18% 6%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(700px 380px at 82% 0%, rgba(120,160,255,0.10), transparent 55%),
    radial-gradient(780px 520px at 55% 92%, rgba(78,220,170,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));
  filter: saturate(1.05);
  pointer-events:none;
}
/* Tiny grain (no images) */
.saas-page::after{
  content:"";
  position:absolute;
  inset:-32px -18px -48px -18px;
  z-index:-1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 2px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0px, rgba(255,255,255,0.010) 1px, transparent 2px, transparent 7px);
  opacity:0.12;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Typography polish */
.saas-page h2{ letter-spacing:-0.02em; }
.saas-page h3{ letter-spacing:-0.015em; }
.saas-page .subtitle{ max-width: 84ch; }

/* Modern focus ring */
.saas-page :is(a,button,input,select,textarea,.btn):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(120,160,255,0.35), 0 0 0 6px rgba(0,0,0,0.35);
  border-color: rgba(120,160,255,0.55) !important;
}

/* Cards: depth + hover */
.saas-page .saas-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.028));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.32);
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.saas-page .saas-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 68px rgba(0,0,0,0.42);
  border-color: rgba(255,255,255,0.15);
}

/* KPI tiles: clearer emphasis */
.saas-page .saas-kpi{
  background: linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.026));
  border: 1px solid rgba(255,255,255,0.11);
}
.saas-page .saas-kpi .v{
  font-variant-numeric: tabular-nums;
}

/* Tabs (pure HTML anchors, no JS) */
.saas-tabs{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.saas-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.02);
  color: var(--fg);
  opacity: 0.9;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
}
.saas-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  text-decoration:none;
}
.saas-tab .pill{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0.85;
}
.saas-divider{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 14px 0;
}

/* Sticky primary action on wide screens */
.saas-sticky-actions{
  position: sticky;
  top: calc(var(--header-h, 56px) + 14px);
}

/* Buttons: premium hover + press */
.saas-page .btn{
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}
.saas-page .btn:hover{ transform: translateY(-1px); text-decoration:none; }
.saas-page .btn:active{ transform: translateY(0px); }
.saas-primary{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04)) !important;
  box-shadow: 0 14px 30px rgba(255,255,255,0.04);
}
.saas-primary:hover{
  border-color: rgba(255,255,255,0.04) !important;
  box-shadow: 0 20px 42px rgba(255,255,255,0.04);
}
.saas-ghost{
  background: rgba(255,255,255,0.02) !important;
}
.saas-ghost:hover{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .saas-page *{ transition: none !important; scroll-behavior: auto !important; }
  .saas-page .saas-card:hover{ transform:none; }
  .saas-page .btn:hover{ transform:none; }
  .saas-tab:hover{ transform:none; }
}


/* =========================================================
   2026 UI refinement patch — auditor-grade clarity, no feature changes
   ========================================================= */
:root{
  --bg:#0b1017;
  --bg-elev:#111826;
  --bg-soft:#151f2f;
  --panel:#101722;
  --panel-2:#121c2b;
  --fg:#edf2f7;
  --fg-soft:#c8d2df;
  --line:#243144;
  --line-strong:#33445d;
  --accent:#e4c44c;
  --accent-soft:rgba(255,255,255,0.04);
  --danger:#ff6b6b;
  --success:#42d392;
  --warning:#ffc857;
  --shadow-xl:0 24px 60px rgba(0,0,0,0.34);
  --shadow-lg:0 18px 42px rgba(0,0,0,0.28);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
}

html, body{
  background:
    radial-gradient(1100px 640px at 10% -10%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(900px 560px at 100% 0%, rgba(92,131,255,0.07), transparent 58%),
    linear-gradient(180deg, #0a0f16 0%, #0b1119 52%, #0b1017 100%);
  color:var(--fg);
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ text-underline-offset:3px; }

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  min-height:64px;
  padding:12px 22px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(9,14,22,0.86);
  backdrop-filter: blur(16px);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.topbar-left,
.topbar-right{ display:flex; align-items:center; gap:12px; }
.topbar-brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.topbar-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
}
.topbar-subtitle{
  font-size:11px;
  color:var(--fg-soft);
  opacity:0.76;
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.topbar-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
  color:var(--fg);
  text-decoration:none;
  transition:background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.topbar-link:hover{
  text-decoration:none;
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.16);
  transform:translateY(-1px);
}

.sidebar{
  width:calc(var(--sidebar-w) - 10px);
  top:72px;
  bottom:14px;
  left:10px;
  padding:20px 14px 18px 14px;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(18,26,39,0.96), rgba(13,19,30,0.96));
  box-shadow:var(--shadow-xl);
}
.sidebar nav{ display:flex; flex-direction:column; gap:4px; height:100%; }
.sidebar-peek{position:fixed;left:0;top:var(--header-h,56px);bottom:0;width:18px;background:transparent;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;cursor:pointer;}
.sidebar-peek .chev{
  margin-top:10px;
  width:18px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-lg);
}
.navsection-title{
  margin:14px 10px 8px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--fg-soft);
  opacity:0.8;
}
.navsep{
  margin:10px 8px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}
.navitem{
  display:block;
  margin:0;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:14px;
  color:var(--fg);
  opacity:0.92;
  transition:background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.navitem:hover{
  text-decoration:none;
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
  transform:translateX(2px);
}
.navitem.active{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.companyname{ font-weight:600; }
.companyitem .muted.small{ margin-top:4px; color:var(--fg-soft); }

.app-body .content{
  width:100%;
  padding:28px 24px 24px calc(var(--sidebar-peek) + 34px);
}
.sidebar.open ~ .content,
.sidebar.is-open ~ .content,
.sidebar-peek:hover + .sidebar ~ .content,
.sidebar:hover ~ .content{
  padding-left:calc(var(--sidebar-w) + 34px);
}
.content > *{
  max-width:1500px;
}

.page-title,
.pagehead h2{
  letter-spacing:-0.03em;
}
.pagehead{
  align-items:flex-end;
  gap:18px;
  margin-bottom:18px;
}
.pagehead .muted.small{ margin-top:8px; color:var(--fg-soft); }
.row{ display:flex; flex-wrap:wrap; }

.card,
.whatif,
.kpi,
.donutcard,
.list .row,
.table-wrap,
.modal-panel,
.sim-modal-card,
.login-box,
.binance-form-wrap{
  background:linear-gradient(180deg, rgba(18,26,39,0.94), rgba(13,19,30,0.94));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-lg);
}
.card,
.whatif,
.login-box,
.modal-panel,
.sim-modal-card{
  border-radius:var(--radius-xl);
}
.card{ padding:18px 18px 16px; }
.card.inner,
.kpi,
.donutcard,
.whatif{
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
}
.cardtitle{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  color:var(--fg-soft);
  margin-bottom:12px;
}

.kpirow{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.kpi{
  padding:14px 14px 12px;
  min-height:94px;
}
.kpilabel,
.kpi-label{
  color:var(--fg-soft);
  font-size:12px;
  line-height:1.35;
}
.kpivalue,
.kpi-value{
  margin-top:6px;
  font-size:28px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}

.ampelgrid{ gap:14px; }
.ampelitem{
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
}
.ampel.light{
  width:16px;
  height:16px;
  margin-top:2px;
  box-shadow:0 0 0 3px rgba(255,255,255,0.03);
}
.ampel.light.green{ background:rgba(66,211,146,0.9); }
.ampel.light.yellow{ background:rgba(255,200,87,0.92); }
.ampel.light.red{ background:rgba(255,107,107,0.92); }

.grid2,
.grid3,
.grid-2{
  gap:16px;
}

.pill,
.decision-pill{
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--fg-soft);
}

.table,
.saas-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.table th,.table td,
.saas-table th,.saas-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  vertical-align:top;
}
.table th,
.saas-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(15,22,34,0.96);
  color:var(--fg-soft);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.table tr:hover td,
.saas-table tr:hover td{
  background:rgba(255,255,255,0.025);
}

.btn,
.form button,
.binance-save,
.binance-delete,
.sim-modal-btn{
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  box-shadow:none;
  transition:background 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.btn:hover,
.form button:hover,
.binance-save:hover,
.binance-delete:hover,
.sim-modal-btn:hover{
  text-decoration:none;
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}
.btn.primary,
.sim-modal-btn.primary,
.form button[type="submit"]{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.04);
}

.field,
.form input[type="text"],
.form input[type="number"],
.form input[type="password"],
.form input[type="file"],
.form select,
.form textarea,
.binance-input,
.sim-field-input{
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
}
.form textarea{ min-height:130px; }
:is(a,button,input,select,textarea,.btn,.navitem):focus-visible{
  outline:none;
  border-color:rgba(255,255,255,0.04) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,0.04);
}

.login-box{
  width:min(520px, 92vw);
  padding:28px;
  text-align:left;
}
.login-box .title{ font-size:24px; font-weight:700; margin-bottom:8px; }
.login-box .msg{ color:var(--fg-soft); margin-bottom:18px; }
.actions{ align-items:stretch; }
.textbtn{ opacity:0.86; }

.pagehead + .card .muted,
.card .muted,
.whatif .muted,
.small{
  color:var(--fg-soft);
}

canvas{
  display:block;
  width:100%;
  max-width:100%;
}

.fanwrap,
.donutwrap{
  justify-content:flex-start;
  gap:16px;
}
.donut,
.donutmulti{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.16);
}
.fanmeta{ display:flex; flex-wrap:wrap; gap:10px; }

/* Landing page: preserve structure, improve polish */
.lp-nav{
  position:sticky;
  top:0;
  z-index:90;
  padding:16px 28px;
  background:rgba(9,14,22,0.78);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.lp-logo{ letter-spacing:-0.04em; }
.lp-tag{ color:var(--fg-soft); }
.lp-hero-grid,
.lp-container,
.lp-footer,
.lp-newsbar{
  max-width:1360px;
  margin-left:auto;
  margin-right:auto;
}
.lp-hero-card,
.lp-feature,
.lp-ucard,
.lp-stat,
.lp-demo,
.lp-newsbar,
.lp-glow{
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-lg);
}
.lp-btn{
  border-radius:999px;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
}
.lp-btn.primary{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.04);
}
.lp-btn.ghost{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
}
.lp-pill,
.lp-chip{
  border-color:rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
}

/* Dashboard and decision pages become denser but clearer */
.decision-panel,
.card,
.whatif{
  backdrop-filter:blur(10px);
}
.decision-grid,
.benchgrid,
.donutgrid{
  gap:12px;
}
.benchitem,
.advisorline,
.bullet,
.info,
.warning{
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.benchitem b,
.advisorline b,
.bullet b,
.info b,
.warning b{ font-weight:700; }
.quote{ color:var(--fg-soft); }

/* Mobile density */
@media (max-width: 980px){
  .topbar{ padding:12px 14px; }
  .topbar-subtitle{ display:none; }
  .sidebar{ left:8px; bottom:10px; width:calc(var(--sidebar-w) - 8px); }
  .sidebar-peek{position:fixed;left:0;top:var(--header-h,56px);bottom:0;width:18px;background:transparent;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;cursor:pointer;}
  .app-body .content{ padding:20px 14px 18px calc(var(--sidebar-peek) + 18px); }
  .sidebar.open ~ .content,
  .sidebar.is-open ~ .content,
  .sidebar-peek:hover + .sidebar ~ .content,
  .sidebar:hover ~ .content{
    padding-left:calc(var(--sidebar-w) + 18px);
  }
  .pagehead{ flex-direction:column; align-items:flex-start; }
  .kpirow{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .card{ padding:14px; border-radius:18px; }
  .btn,.field,.form input,.form select,.form textarea{ width:100%; }
  .row{ width:100%; }
  .topbar-link{ min-height:38px; padding:0 12px; }
}

/* ============================================
   UI Professional Patch v2
   Ziel: höchstübersichtliche Bedienbarkeit,
   schnelle Orientierung, WP-/CFO-Niveau,
   ohne Seiten, Inhalte oder Funktionen zu ändern.
============================================ */

:root{
  --bg:#0b1016;
  --bg-elev:#111823;
  --bg-elev-2:#151f2c;
  --panel:#121a25;
  --panel-soft:#172232;
  --fg:#eef3f8;
  --muted:#9aa8b8;
  --line:#263241;
  --line-strong:#334255;
  --accent:#f7d500;
  --accent-soft:rgba(255,255,255,0.04);
  --ok:#1fb16b;
  --warn:#d8a11b;
  --danger:#cf5454;
  --shadow-1:0 10px 28px rgba(0,0,0,0.24);
  --shadow-2:0 18px 44px rgba(0,0,0,0.32);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --content-max:1580px;
}

html, body{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.03), transparent 24%),
    linear-gradient(180deg, #0a1016 0%, #0d141d 100%);
  color:var(--fg);
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:rgba(255,255,255,0.04); }

/* Global readability */
.content,
.card,
.table,
.form,
.list .row,
.kpi,
.whatif,
.donutcard,
.benchitem,
.schema-row,
.decision-panel,
.saas-card,
.saas-section,
.admin-table,
.admin-list .row{
  font-size:14px;
}

.small{ font-size:12px; }
.muted{ color:var(--muted); opacity:1; }
.num{ font-variant-numeric: tabular-nums; }

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:70;
  min-height:68px;
  padding:14px 22px 14px 18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(11,16,22,0.88);
  backdrop-filter: blur(14px);
  box-shadow:0 8px 28px rgba(0,0,0,0.18);
}
.topbar-left,
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-brand{ display:flex; flex-direction:column; gap:2px; }
.topbar-title{
  font-size:18px;
  font-weight:700;
  letter-spacing:0.01em;
}
.topbar-subtitle{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.topbar-link,
.topbar-right a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
}
.topbar-link:hover,
.topbar-right a:hover{
  text-decoration:none;
  border-color:rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.07);
}

/* App shell & sidebar */
.app-body{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent 220px);
}
.sidebar{
  width:280px;
  padding:18px 14px 20px 14px;
  border-right:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(19,28,39,0.98), rgba(12,18,26,0.98));
  box-shadow:var(--shadow-2);
}
.sidebar nav{ display:flex; flex-direction:column; gap:6px; }
.sidebar-peek{position:fixed;left:0;top:var(--header-h,56px);bottom:0;width:18px;background:transparent;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;cursor:pointer;}
.sidebar-peek .chev{
  margin-top:12px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
}
.navsep{
  height:1px;
  margin:8px 4px;
  background:linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}
.navsection-title{
  padding:6px 10px 4px 10px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.navitem{
  display:block;
  padding:11px 12px;
  border-radius:12px;
  color:var(--fg);
  text-decoration:none;
  transition:background 120ms ease, border-color 120ms ease, transform 120ms ease;
  border:1px solid transparent;
  margin-bottom:2px;
}
.navitem:hover{
  text-decoration:none;
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.08);
}
.navitem.active{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.navitem .companyname{
  font-weight:650;
  line-height:1.3;
}
.companyitem .muted.small{ margin-top:2px; display:block; }

.app-body .content{
  width:100%;
  max-width:none;
  padding:26px 28px 34px calc(var(--sidebar-peek) + 28px);
}
.sidebar.open ~ .content,
.sidebar.is-open ~ .content,
.sidebar-peek:hover + .sidebar ~ .content,
.sidebar:hover ~ .content{
  padding-left: calc(var(--sidebar-w) + 28px);
}
.content > *{
  max-width:var(--content-max);
}

/* Titles and page head */
.page-title{
  font-size:34px;
  line-height:1.15;
  margin:4px 0 16px 0;
  letter-spacing:-0.02em;
}
.pagehead{
  align-items:flex-end;
  gap:18px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.pagehead > div:first-child{ min-width:0; }
.pagehead .muted.small,
.pagehead .muted{ max-width:900px; }
.row{
  display:flex;
  flex-wrap:wrap;
}

/* Cards */
.card,
.whatif,
.donutcard,
.benchitem,
.kpi,
.list .row,
.schema-sec,
.schema-row,
.decision-panel,
.advisorline,
.saas-card,
.saas-section,
.dialog-modal,
.modal-panel,
.admin-list .row,
.danger-note{
  border-color:rgba(255,255,255,0.08) !important;
  background:linear-gradient(180deg, rgba(20,29,41,0.92), rgba(15,22,31,0.92));
  box-shadow:var(--shadow-1);
}
.card{
  padding:18px 18px 16px 18px;
  border-radius:var(--radius-lg);
}
.cardtitle,
.section-title,
.decision-h,
.modal-title{
  color:#d8e2ec;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
}
.card h3,
.card h2,
.saas-card h3,
.saas-card h2{
  letter-spacing:-0.01em;
}

/* Grid rhythm */
.grid2,
.grid3,
.grid-2,
.grid-3,
.admin-grid,
.cust-grid,
.benchgrid{
  gap:16px;
}
.content > .card,
.content > .grid-2,
.content > .grid2,
.content > .grid-3,
.content > .grid3{
  margin-bottom:20px;
}

/* Buttons */
.btn,
.form button,
.binance-save,
.binance-delete,
.sim-modal-btn,
button.btn,
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  color:var(--fg);
  font-weight:600;
  text-decoration:none;
  box-shadow:none;
  transition:transform 100ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.btn:hover,
.form button:hover,
.binance-save:hover,
.binance-delete:hover,
.sim-modal-btn:hover,
a.btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.24);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
}
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible{
  outline:2px solid rgba(255,255,255,0.04);
  outline-offset:2px;
}
.btn.secondary,
.btn.ghost,
.saas-ghost{
  background:rgba(255,255,255,0.03);
}
.btn.danger,
button.btn.danger{
  background:linear-gradient(180deg, rgba(167,53,53,0.20), rgba(109,37,37,0.18));
  border-color:rgba(207,84,84,0.30);
}
.saas-primary,
.btn.saas-primary{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.04);
}

/* Inputs / forms */
.field,
.form input[type="text"],
.form input[type="number"],
.form input[type="password"],
.form input[type="file"],
.form input[type="email"],
.form input[type="date"],
.form select,
.form textarea,
.admin-input,
.cust-input,
.sim-field-input,
.binance-input,
.schema-input,
.admin-search{
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
input[type="file"]{ padding:8px 10px; }
.form textarea{ min-height:120px; }
.form label{ color:#dbe4ee; font-weight:600; }
.formrow{ display:flex; flex-wrap:wrap; gap:12px; }

/* Tables */
.table,
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.table th,
.table td,
.admin-table td{
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:11px 12px;
  vertical-align:top;
}
.table tr:last-child td,
.admin-table tr:last-child td{ border-bottom:none; }
.table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#c7d1db;
  background:rgba(255,255,255,0.04);
}

/* KPI area */
.kpirow{
  gap:12px;
}
.kpi{
  border-radius:16px;
  padding:14px 14px 12px 14px;
}
.kpilabel{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.kpivalue{
  margin-top:6px;
  font-size:28px;
  line-height:1.05;
  font-weight:750;
  letter-spacing:-0.02em;
}

/* Traffic lights */
.ampelgrid{ gap:12px; }
.ampelitem{
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.ampel.light{
  width:16px;
  height:16px;
  margin-top:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,0.03);
}
.ampel.light.green{ background:rgba(31,177,107,0.88); }
.ampel.light.yellow{ background:rgba(216,161,27,0.88); }
.ampel.light.red{ background:rgba(207,84,84,0.90); }

/* Donuts / metric visual blocks */
.donutgrid{ gap:14px; }
.donutcard{
  padding:12px 14px;
  border-radius:16px;
}
.donutmulti,
.donut{
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.22));
}
.donutcard .muted.small{ line-height:1.45; }

/* Pills / labels */
.pill,
.admin-pill,
.saas-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  color:#d9e3ee;
  font-size:12px;
  font-weight:600;
}
.saas-badge .dot,
.pill .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); }

/* Decision panel */
.decision-panel{
  margin:0 0 18px 0;
  padding:18px 18px 16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(20,29,41,0.96));
}
.decision-head{ gap:14px; }
.decision-title{
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:#fff6b8;
}
.decision-sub{
  margin-top:6px;
  color:#edf3f8;
  opacity:0.94;
}
.decision-grid{ gap:16px; margin-top:14px; }
.decision-col{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
}
.rec-item{ padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.07); }
.rec-item:last-child{ border-bottom:none; }
.rec-title{ font-weight:700; }
.rec-msg{ color:#dde7f1; margin-top:4px; }
.rec-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.mini-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mini-row:last-child{ border-bottom:none; }
.mini-ul{ margin:8px 0 0 0; padding-left:18px; }
.mini-ul li{ margin:8px 0; }

/* Dashboard helper cards */
.quote{
  border-left:3px solid rgba(255,255,255,0.04);
  padding:8px 0 8px 12px;
  color:#dfe8f1;
}
.bullet{ gap:12px; }
.bullet .dot{ margin-top:5px; }
.advisorline{
  border-radius:16px;
  padding:14px 15px;
}
.advisorline:hover{ text-decoration:none; }

/* Import / workflow UI */
.saas-card,
.saas-section{
  border-radius:18px;
  padding:18px;
}
.saas-card-head,
.section-title,
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.saas-hint{ color:var(--muted); margin-top:4px; }
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* Manual import dialogs */
.dialog-modal{
  width:min(1460px, 98vw);
  max-height:94vh;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(16,23,32,0.98), rgba(12,18,26,0.98));
}
.modal-inner{ padding:18px; }
.modal-head{ padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.07); }
.modal-body{ margin-top:12px; }
.modal-foot{ margin-top:16px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); }
.schema-sec{ padding:10px 10px 8px 10px; }
.schema-sec > summary{
  padding:4px 4px 8px 4px;
  font-size:13px;
  color:#dde7f1;
}
.schema-grid{ gap:6px; }
.schema-row{
  padding:6px 8px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
}
.schema-row > div .schema-label{
  font-size:12px;
  color:#edf3f8;
}
.schema-row > div .muted.small{ color:var(--muted); }
.schema-row input[type="text"],
.schema-row input[type="number"],
.schema-row input,
.schema-row select{
  height:32px;
  min-height:32px;
  padding:4px 8px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
}

/* Enterprise / ledger / legacy areas */
.enterprise-shell,
.simulation-shell,
.simres-shell,
.binance-form-wrap{
  max-width:var(--content-max);
}
.enterprise-actions,
.enterprise-years,
.simulation-right{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}
.enterprise-btn,
.year-item,
.sim-item,
.sim-calc,
.binance-year-item,
.simres-save,
.simres-backlink{
  padding:8px 0;
  text-decoration:none;
}
.binance-row{
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.binance-row:last-child{ border-bottom:none; }
.binance-label{ font-size:13px; color:#dfe7ef; }
.binance-input{ height:34px; }

/* Admin / customer pages */
.admin-dashboard,
.cust-wrap{ max-width:var(--content-max); }
.admin-grid .card,
.cust-grid .card{ min-height:100%; }
.kv{ gap:12px; }
.kv > div:nth-child(odd){ color:var(--muted); }
.listrow{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
}

/* Login */
.container{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04), transparent 18%),
    radial-gradient(circle at 80% 0%, rgba(120,170,255,0.10), transparent 22%);
}
.login-box{
  width:min(560px, 92vw);
  padding:28px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(18,25,35,0.96), rgba(13,19,27,0.96));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-2);
}
.title{
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:10px;
}
.msg{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.textbtn{
  min-width:180px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
}
.textbtn:hover{ text-decoration:none; background:rgba(255,255,255,0.06); }

/* Responsive polish */
@media (max-width: 1180px){
  .grid3{ grid-template-columns:1fr 1fr; }
  .grid3 > .card:first-child{ grid-column:1 / -1; }
}
@media (max-width: 980px){
  .topbar{ padding:12px 16px; }
  .app-body .content{ padding:20px 16px 26px calc(var(--sidebar-peek) + 18px); }
  .sidebar.open ~ .content,
  .sidebar.is-open ~ .content,
  .sidebar-peek:hover + .sidebar ~ .content,
  .sidebar:hover ~ .content{
    padding-left: calc(var(--sidebar-w) + 18px);
  }
  .page-title{ font-size:28px; }
  .decision-title{ font-size:18px; }
  .kpivalue{ font-size:24px; }
  .schema-row{ grid-template-columns: 1fr 120px; }
}
@media (max-width: 768px){
  .topbar{
    min-height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .topbar-right{ width:100%; justify-content:flex-start; }
  .sidebar{ width:240px; }
  .grid3,
  .grid2,
  .grid-2,
  .benchgrid,
  .admin-grid,
  .cust-grid,
  .kpirow{ grid-template-columns:1fr !important; }
  .pagehead{ flex-direction:column; align-items:flex-start; }
  .dialog-modal{ width:min(100vw, 100vw); max-height:100vh; border-radius:0; }
  .modal-inner{ padding:14px; }
}

/* ============================================
   Patch: Gelben Hintergrund entfernen + Sidebar schmaler
   Diese Regeln stehen absichtlich ganz am Ende und überschreiben frühere Styles.
============================================ */
:root{
  --accent:#7aa2ff;
  --accent-soft:rgba(122,162,255,0.12);
  --warn:#f0b35a;
  --sidebar-w:228px;
  --sidebar-peek:10px;
}

html, body{
  background:#0d141d !important;
  background-image:none !important;
}

body::before,
body::after,
.page::before,
.page::after,
.app-shell::before,
.app-shell::after,
.app-body::before,
.app-body::after,
.content::before,
.content::after,
.container::before,
.container::after{
  display:none !important;
  content:none !important;
}

::selection{ background:rgba(122,162,255,0.22); }

.app-body,
.container{
  background:none !important;
  background-image:none !important;
}

.sidebar{
  width:228px !important;
  padding:16px 10px 18px 10px !important;
}

.sidebar-peek{position:fixed;left:0;top:var(--header-h,56px);bottom:0;width:18px;background:transparent;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;cursor:pointer;}

.sidebar-peek .chev{
  width:18px !important;
  height:18px !important;
  margin-top:10px !important;
  background:rgba(255,255,255,0.05) !important;
}

.app-body .content{
  padding:24px 24px 30px calc(var(--sidebar-peek) + 20px) !important;
}

.sidebar.open ~ .content,
.sidebar.is-open ~ .content,
.sidebar-peek:hover + .sidebar ~ .content,
.sidebar:hover ~ .content{
  padding-left: calc(var(--sidebar-w) + 20px) !important;
}

.navitem.active{
  background:rgba(122,162,255,0.10) !important;
  border-color:rgba(122,162,255,0.18) !important;
  box-shadow:none !important;
}

.topbar,
.card,
.whatif,
.donutcard,
.benchitem,
.kpi,
.list .row,
.schema-sec,
.schema-row,
.decision-panel,
.advisorline,
.saas-card,
.saas-section,
.dialog-modal,
.modal-panel,
.admin-list .row,
.danger-note,
.login-box{
  background-image:none !important;
}

@media (max-width: 960px){
  :root{
    --sidebar-w:210px;
    --sidebar-peek:8px;
  }

  .sidebar{ width:210px !important; }
  .sidebar-peek{position:fixed;left:0;top:var(--header-h,56px);bottom:0;width:18px;background:transparent;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;cursor:pointer;}

  .app-body .content{
    padding:20px 16px 24px calc(var(--sidebar-peek) + 14px) !important;
  }

  .sidebar.open ~ .content,
  .sidebar.is-open ~ .content,
  .sidebar-peek:hover + .sidebar ~ .content,
  .sidebar:hover ~ .content{
    padding-left: calc(var(--sidebar-w) + 14px) !important;
  }
}

/* Patch: ensure manual dialogs have solid background */
#manualBalanceDlg .modal-inner,
#manualPnlDlg .modal-inner,
.dialog-modal,
.modal-panel{
  background:#0f1621 !important;
  backdrop-filter:none !important;
}


/* ============================================
   Dashboard-Statusfarben für Kurzfazit-Kästchen
   Nur das große obere Kästchen bekommt die Statusfarbe.
============================================ */
.decision-panel{
  position: relative;
  overflow: hidden;
}

.decision-panel.ok{
  background: linear-gradient(180deg, rgba(38, 120, 77, 0.22), rgba(15, 22, 31, 0.96)) !important;
  border-color: rgba(88, 201, 138, 0.22) !important;
}
.decision-panel.ok .decision-title{
  color: #dff7e8 !important;
}

.decision-panel.warn{
  background: linear-gradient(180deg, rgba(168, 128, 32, 0.22), rgba(15, 22, 31, 0.96)) !important;
  border-color: rgba(236, 196, 92, 0.22) !important;
}
.decision-panel.warn .decision-title{
  color: #fff1c7 !important;
}

.decision-panel.danger{
  background: linear-gradient(180deg, rgba(136, 44, 44, 0.22), rgba(15, 22, 31, 0.96)) !important;
  border-color: rgba(233, 107, 107, 0.22) !important;
}
.decision-panel.danger .decision-title{
  color: #ffd8d8 !important;
}

.decision-panel.ok .decision-pill{
  background: rgba(88, 201, 138, 0.10) !important;
  border-color: rgba(88, 201, 138, 0.18) !important;
}
.decision-panel.warn .decision-pill{
  background: rgba(236, 196, 92, 0.10) !important;
  border-color: rgba(236, 196, 92, 0.18) !important;
}
.decision-panel.danger .decision-pill{
  background: rgba(233, 107, 107, 0.10) !important;
  border-color: rgba(233, 107, 107, 0.18) !important;
}


#manualAccountModal .modal-panel{
  width: min(720px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}

/* --- Center page content without touching layout --- */
.app-body .content{
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.sidebar.open ~ .content,
.sidebar.is-open ~ .content,
.sidebar-peek:hover + .sidebar ~ .content,
.sidebar:hover ~ .content{
  margin-left: auto;
  margin-right: auto;
}

.sidebar-peek .chev{
  width:auto !important;
  height:auto !important;
  display:block !important;
  margin-top:12px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:var(--fg) !important;
  opacity:0.9 !important;
  font-size:16px !important;
  line-height:1 !important;
}

/* Global loader overlay */
.app-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.app-loader.open{
  display: block;
}
.app-loader-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 20, 0.48);
  backdrop-filter: blur(4px);
}
.app-loader-panel{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
  max-width: min(92vw, 420px);
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(20,27,38,0.96), rgba(12,18,28,0.98));
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  text-align: center;
}
.app-loader-spinner{
  width: 54px;
  height: 54px;
  margin: 0 auto 14px auto;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.14);
  border-top-color: rgba(255,255,255,0.95);
  animation: app-loader-spin 0.9s linear infinite;
}
.app-loader-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.app-loader-text{
  font-size: 14px;
  opacity: 0.82;
}
@keyframes app-loader-spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}