/* ===============================
   GLOBAL
   =============================== */
body{
  font-family: Arial, sans-serif;
  background:#0A1F4D;
  margin:0;
  color:white;
}

/* ===============================
   TOPBAR (DESKTOP / TABLET)
   =============================== */
.topbar{
  display:flex;
  align-items:center;
  padding:12px;
  box-sizing:border-box;
}

.title{
  color:#CFAF5A;
  font-size:24px;
  font-weight:bold;
  white-space:nowrap;
}

/* Hamburger Button */
.hamburger{
  display:none;
  font-size:26px;
  cursor:pointer;
  margin-left:auto;
}

/* Navigation */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* User */
.user{
  background:#1a2e5a;
  padding:10px 14px;
  border-radius:10px;
  white-space:nowrap;
}

/* Buttons */
.navBtn{
  padding:12px 18px;
  background:#CFAF5A;
  color:black;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
  white-space:nowrap;
  transition:background 0.2s,color 0.2s;
}

.navBtn:hover{
  background:#28a745;
  color:white;
}

.navBtn.active{
  background:#28a745;
  color:white;
}

/* ===============================
   PAGE CONTENT
   =============================== */
.container{
  max-width:600px;
  margin:auto;
  padding:10px;
}

.card{
  background:white;
  color:black;
  padding:14px;
  border-radius:14px;
  margin-bottom:12px;
}

input{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  background:#f2f2f2;
  margin-top:8px;
  box-sizing:border-box;
}

button{
  width:100%;
  padding:14px;
  margin-top:8px;
  border:none;
  border-radius:14px;
  font-weight:bold;
  cursor:pointer;
}

.green{background:#28a745;color:white;}
.blue{background:#007bff;color:white;}
.orange{background:#f39c12;color:white;}
.red{background:#dc3545;color:white;}

/* ===============================
   MOBILE (HAMBURGER)
   =============================== */
@media (max-width: 900px){
  .hamburger{
    display:block;
  }

  .nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    margin-left:0;
    margin-top:10px;
    gap:8px;
  }

  .nav.open{
    display:flex;
  }

  .navBtn, .user{
    width:100%;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   🌙 DARK MODE
   ========================= */
:root[data-theme="dark"] {
    --bg-main: #0b1324;
    --bg-card: #151e34;
    --bg-soft: #1e2948;

    --text-main: #f1f3f7;
    --text-soft: #a9b0c3;

    --border-soft: #2b375c;
}

/* Hintergrund */
:root[data-theme="dark"] body {
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Container / Cards */
:root[data-theme="dark"] .card {
    background-color: var(--bg-card);
    color: var(--text-main);
}

/* Tabellen */
:root[data-theme="dark"] table,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td {
    border-color: var(--border-soft);
}

/* Sekundäre Boxen (today-box etc.) */
:root[data-theme="dark"] .today-box {
    background-color: var(--bg-soft);
    color: var(--text-main);
}

/* Texte */
:root[data-theme="dark"] .kpi-title,
:root[data-theme="dark"] .today-title,
:root[data-theme="dark"] .log-meta {
    color: var(--text-soft);
}

/* Inputs */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
    background-color: var(--bg-soft);
    color: var(--text-main);
    border-color: var(--border-soft);
}

/* Buttons bleiben farbig – nur Text sauber */
:root[data-theme="dark"] button {
    color: white;
}