projectbased/assets/app.css

/* 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);
}