/* Projekt-Ökonomie Demo – UI v6 (Light/Dark + Typography fixes) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0b1220;
  --fg:#E8EDF7;
  --muted:rgba(232,237,247,0.86);
  --card:rgba(255,255,255,0.085);
  --card-border:rgba(255,255,255,.10);
  --nav:rgba(255,255,255,.06);
  --nav-border:rgba(255,255,255,.10);
  --link:#9FD3FF;
  --primary:#2a69ff;
  --input-bg:rgba(255,255,255,.08);
  --input-border:rgba(255,255,255,.14);
  --table-border:rgba(255,255,255,.12);
  --soft:rgba(255,255,255,0.07);
  --soft-border:rgba(255,255,255,0.14);
}

[data-theme="light"]{
  --bg:#f6f8fc;
  --fg:#0f172a;
  --muted:rgba(15,23,42,.70);
  --card:rgba(255,255,255,.92);
  --card-border:rgba(15,23,42,.10);
  --nav:rgba(255,255,255,.90);
  --nav-border:rgba(15,23,42,.10);
  --link:#0b5ed7;
  --primary:#2a69ff;
  --input-bg:rgba(15,23,42,.04);
  --input-border:rgba(15,23,42,.18);
  --table-border:rgba(15,23,42,.12);
  --soft:rgba(42,105,255,.10);
  --soft-border:rgba(42,105,255,.18);
}

html,body{height:100%;}
html{font-size:16px;}

body{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(42,105,255,.20), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(159,211,255,.18), transparent 55%),
    radial-gradient(900px 500px at 50% 95%, rgba(255,77,94,.10), transparent 55%),
    var(--bg);
  color:var(--fg);
}


/* Typography */
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,h5,h6{ color: var(--fg); }
.lead{ color: var(--fg); opacity: .86; }
[data-theme="light"] .lead{ opacity: .82; }

/* Theme-aware controls (Bootstrap overrides) */
.btn-outline-light{
  color: var(--fg) !important;
  border-color: var(--card-border) !important;
  background: transparent !important;
}
.btn-outline-light:hover{
  background: var(--soft) !important;
  border-color: var(--soft-border) !important;
}
.badge.badge-soft{
  background: var(--soft) !important;
  border: 1px solid var(--soft-border) !important;
  color: var(--fg) !important;
}
.table thead th{ color: var(--fg); opacity: .9; }
.form-label{ color: var(--fg); opacity: .9; }

/* Dark mode contrast tweak */
[data-theme="dark"] :root{}
[data-theme="dark"] .muted{ color: rgba(232,237,247,0.86) !important; }

a{color:var(--link);}
.muted{color:var(--muted);}

.navbar{
  background:var(--nav)!important;
  border-bottom:1px solid var(--nav-border);
  backdrop-filter:blur(10px);
}

.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
}

.badge-soft{
  background:var(--soft);
  color:var(--fg);
  border:1px solid var(--soft-border);
}

h1,h2,h3,h4,h5,h6{color:var(--fg);}

.btn-primary{background:var(--primary);border-color:var(--primary);}
.btn-outline-light{border-color:rgba(255,255,255,.35);color:var(--fg);}
[data-theme="light"] .btn-outline-light{border-color:rgba(15,23,42,.25);}

.form-control,.form-select,textarea{
  background:var(--input-bg)!important;
  border:1px solid var(--input-border)!important;
  color:var(--fg)!important;
}
.form-control:focus,.form-select:focus{box-shadow:none;border-color:rgba(159,211,255,.6)!important;}
.form-control::placeholder{color:rgba(232,237,247,.55);} 
[data-theme="light"] .form-control::placeholder{color:rgba(15,23,42,.45);} 

.table{color:var(--fg);}
.table td,.table th{border-top:1px solid var(--table-border)!important;}
.table thead th{color:var(--fg);border-bottom:1px solid var(--table-border)!important;}

.kpi{display:flex;gap:12px;align-items:center;}
.kpi .dot{width:10px;height:10px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 6px rgba(42,105,255,.18);}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;}

.codebox{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px;
  overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;
  line-height:1.45;
}
[data-theme="light"] .codebox{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.10);} 

.diff .add{background:rgba(25,135,84,.20);} 
.diff .del{background:rgba(220,53,69,.20);} 
.diff .ln{color:var(--muted);user-select:none;}


/* v4 layout helpers */
.container-narrow{ max-width: 1100px; }
.hero{
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(42,105,255,0.22), rgba(159,211,255,0.10));
  border: 1px solid var(--card-border);
}
[data-theme="light"] .hero{
  background: linear-gradient(135deg, rgba(42,105,255,0.10), rgba(159,211,255,0.06));
}
.hero h1{ letter-spacing:-0.4px; }
.hero .lead{ color: var(--muted); max-width: 60ch; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--soft-border);
  background: var(--soft);
  color: var(--fg);
  font-size: 12px;
}
.grid-2{ display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 992px){ .grid-2{ grid-template-columns: 1.2fr 0.8fr; } }
.kpi-box{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;
}
.kpi-tile{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.kpi-tile .num{ font-size: 22px; font-weight: 700; letter-spacing:-0.3px; }
.kpi-tile .lbl{ color: var(--muted); font-size: 12px; }
.btn{
  border-radius: 12px;
}


/* v5: Sidebar layout + animated background orb + contrast fixes */

body{ position:relative; overflow-x:hidden; }

.bg-orb{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-orb::before{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  left: -140px;
  top: 18%;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(42,105,255,0.35), rgba(42,105,255,0.12), transparent 65%);
  filter: blur(1px);
  animation: orbPulse 6.5s ease-in-out infinite;
}
.bg-orb::after{
  content:"";
  position:absolute;
  width: 460px;
  height: 460px;
  right: -160px;
  top: 55%;
  border-radius: 999px;
  background: radial-gradient(circle at 60% 40%, rgba(159,211,255,0.30), rgba(159,211,255,0.10), transparent 65%);
  animation: orbDrift 10s ease-in-out infinite;
  opacity: .85;
}
@keyframes orbPulse{
  0%,100%{ transform: scale(1) translateY(0); opacity: .95; }
  50%{ transform: scale(1.08) translateY(-10px); opacity: .75; }
}
@keyframes orbDrift{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(-18px) translateX(-10px) scale(1.05); }
}

/* Shell */
.layout-shell{
  position: relative;
  z-index: 1;
  display:flex;
  min-height: 100vh;
}
.sidebar{
  width: 260px;
  flex: 0 0 260px;
  padding: 18px 14px;
  background: rgba(255,255,255,0.05);
  border-right: 1px solid var(--nav-border);
  backdrop-filter: blur(10px);
}
[data-theme="light"] .sidebar{
  background: rgba(255,255,255,0.72);
  border-right: 1px solid rgba(15,23,42,0.10);
}
.sidebar .brand{
  font-weight: 800;
  letter-spacing:-0.3px;
  margin-bottom: 10px;
}
.side-group{ margin-top: 14px; }
.side-title{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin: 10px 10px 6px;
}
.side-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--fg);
  text-decoration:none;
  border: 1px solid transparent;
}
.side-link:hover{
  background: rgba(255,255,255,0.06);
  border-color: var(--card-border);
}
[data-theme="light"] .side-link:hover{
  background: rgba(15,23,42,0.04);
}
.side-pill{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--soft-border);
  background: var(--soft);
  color: var(--fg);
}
.side-actions{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--nav-border);
  display:flex;
  flex-direction: column;
  gap:8px;
}
.content{
  flex: 1 1 auto;
  min-width: 0;
}
.topbar{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nav-border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
}
[data-theme="light"] .topbar{
  background: rgba(255,255,255,0.78);
}
.content-inner{
  padding: 20px 18px 36px;
}

/* Contrast improvements */
.hero .lead{ color: var(--fg); opacity: .82; }
.muted{ opacity: .85; }
[data-theme="dark"] .muted{ color: rgba(232,237,247,0.82); }


/* v7: Dark-mode text utility fixes (Bootstrap + custom) */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .text-secondary{
  color: var(--muted) !important;
}
[data-theme="dark"] .text-dark{
  color: var(--fg) !important;
}
[data-theme="dark"] .nav-link,
[data-theme="dark"] a.side-link{
  color: var(--fg) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .hero{
  color: var(--fg);
}
[data-theme="dark"] .card .muted,
[data-theme="dark"] .hero .muted{
  color: var(--muted) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th{
  color: var(--fg);
}



/* === Responsive fixes (v11.7.0) === */
@media (max-width: 991.98px){
  .sidebar{
    position: fixed !important;
    left: -290px;
    top: 0;
    height: 100vh;
    width: 290px;
    z-index: 1050;
    transition: left .2s ease;
  }
  .sidebar.is-open{ left: 0; }
  .content-wrap, .main, .page-content{
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .topbar, header.topbar{
    position: sticky;
    top: 0;
    z-index: 1040;
  }
  .btn, .btn-group>.btn{
    width: 100%;
  }
  .table-responsive{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card{ border-radius: 18px; }
}
@media (min-width: 992px){
  .sidebar{ left: 0 !important; }
}

/* Cookie banner */
.po-cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px;
  z-index:9999;
  max-width:920px; margin:0 auto;
  border-radius:16px;
  padding:14px 14px;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.86);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
[data-theme="dark"] .po-cookie-banner{
  background: rgba(18,22,30,0.86);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.50);
}
.po-cookie-title{ font-weight:700; margin-bottom:4px; }
.po-cookie-text{ font-size:0.92rem; color: var(--muted); }
.po-cookie-text a{ color: var(--link); text-decoration: underline; }
.po-cookie-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* Dark mode contrast fixes */
[data-theme="dark"] .card,
[data-theme="dark"] .table,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--fg) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
[data-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,0.55) !important; }
[data-theme="dark"] .table thead th{ color: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] .table td{ color: rgba(255,255,255,0.78) !important; }
[data-theme="dark"] .badge{ color: rgba(255,255,255,0.9) !important; }


/* Dark-mode contrast hardening (v11.11.0) */
html[data-theme="dark"], body[data-theme="dark"], [data-theme="dark"]{
  color: var(--fg);
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .form-text,
[data-theme="dark"] .muted{
  color: rgba(232,237,247,0.78) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .table,
[data-theme="dark"] .list-group-item{
  color: var(--fg);
}
[data-theme="dark"] .table{
  --bs-table-color: var(--fg);
  --bs-table-striped-color: var(--fg);
  --bs-table-hover-color: var(--fg);
  --bs-table-bg: rgba(255,255,255,0.03);
  --bs-table-striped-bg: rgba(255,255,255,0.05);
  --bs-table-hover-bg: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--fg);
}
[data-theme="dark"] .form-control::placeholder{
  color: rgba(232,237,247,0.55);
}
[data-theme="dark"] .btn-outline-secondary{
  border-color: rgba(255,255,255,0.20);
  color: rgba(232,237,247,0.85);
}


/* Mobile layout (v11.11.0) */
@media (max-width: 900px){
  .content{padding: 14px 12px !important;}
  .kpi-grid{grid-template-columns: 1fr !important;}
  .grid-2{grid-template-columns: 1fr !important;}
  .hero{padding: 18px;}
}




/* v11.12 dark-mode contrast hardening */
:root[data-theme="dark"]{
  --po-fg:#eef3ff;
  --po-muted:rgba(238,243,255,.78);
  --po-border:rgba(255,255,255,.12);
}
:root[data-theme="dark"] body{color:var(--po-fg);}
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-body-secondary{color:var(--po-muted)!important;}
:root[data-theme="dark"] .card{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.12)!important;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control{
  background:rgba(8,10,16,.65)!important;
  color:var(--po-fg)!important;
  border-color:var(--po-border)!important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] .form-control::placeholder{color:rgba(238,243,255,.55)!important;}


/* Mobile sidebar offcanvas (v11.12.1) */
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
}

@media (max-width: 991.98px){
  .layout-shell{ display:block; }
  .sidebar{
    position:fixed;
    top:0; bottom:0; left:0;
    width:min(86vw, 320px);
    max-width: 320px;
    transform: translateX(-110%);
    transition: transform .18s ease;
    z-index: 1050;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .content{ min-height:100vh; }
  body.sidebar-open .sidebar{
    transform: translateX(0);
  }
  body.sidebar-open .sidebar-backdrop{
    display:block;
  }
  body.sidebar-open{
    overflow:hidden;
    touch-action: none;
  }
}

/* Make topbar wrap nicely on phones */
@media (max-width: 575.98px){
  .topbar{ gap:10px; flex-wrap:wrap; }
  .topbar .fw-semibold{ max-width: 100%; }
}