/* ======================================================
   TaskManager 3.0 – Color System
   Dark + Light Theme (based on Helia-/Yippie-Style #696cff)
   ====================================================== */

:root {
  color-scheme: dark light;
}

/* ==== DARK MODE ====================================== */
:root[data-theme="dark"] {
  /* Base */
  --bg:            #0b0d12;   /* Haupt-Background */
  --card:          #161925;   /* Panels, Cards */
  --card-alt:      #1b1f2e;   /* Hover, aktive Flächen */
  --border:        #2a3045;   /* feine Linien */
  
  /* Text */
  --fg:            #f3f4f9;   /* Haupttext */
  --fg-muted:      #9ea4ba;   /* Sekundärtext / Label */
  --fg-invert:     #0b0d12;   /* Text auf hellen Buttons */

  /* Accent */
  --acc:           #6C5FFC;   /* Primärfarbe (Buttons, Icons) */
  --acc-hover:     #9a86ff;
  --acc-glow:      rgba(121,108,255,0.3);

  /* System Colors */
  --success:       #4ade80;
  --warning:       #facc15;
  --danger:        #ef4444;
  --info:          #38bdf8;

  /* Inputs / Surfaces */
  --input-bg:      #121622;
  --input-border:  #2a3045;
  --input-text:    #e8eaf3;
  --shadow-soft:   0 8px 24px rgba(0,0,0,0.4);
  --shadow-glow:   0 0 20px var(--acc-glow);

  /* Special UI */
  --bell:          #ffd166;
  --toggle-off:    #2b3042;
  --toggle-on:     var(--acc);
  --gradient-hero: linear-gradient(135deg, #696cff, #eb308e);
}

/* ==== LIGHT MODE ===================================== */
:root[data-theme="light"] {
  /* Base */
  --bg:            #f2f2f2;
  --card:          #ffffff;
  --card-alt:      #f0f3ff;
  --border:        #d7d9e0;

  /* Text */
  --fg:            #141625;
  --fg-muted:      #5f6479;
  --fg-invert:     #ffffff;
  --fg-hover:		#ffffff;

  /* Accent */
  --acc:           #6C5FFC;
  --acc-hover:     #514aff;
  --acc-glow:      rgba(105,108,255,0.25);

  /* System Colors */
  --success:       #16a34a;
  --warning:       #eab308;
  --danger:        #dc2626;
  --info:          #0284c7;

  /* Inputs / Surfaces */
  --input-bg:      #ffffff;
  --input-border:  #d7d9e0;
  --input-text:    #141625;
  --shadow-soft:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-glow:   0 0 12px var(--acc-glow);

  /* Special UI */
  --bell:          #a86500;
  --toggle-off:    #e4e6ef;
  --toggle-on:     var(--acc);
  --gradient-hero: linear-gradient(135deg, #696cff, #eb308e);
}


/* Body + Komponenten nutzen nur Variablen */
body{
  background:var(--bg);
  color:var(--fg);
}

input,select,textarea{
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--fg);
}
.appbar{ border-bottom:1px solid var(--border); }
.appnav a{ color:var(--ink-sub); }
.appnav a:hover{ background: color-mix(in srgb, var(--border) 30%, transparent); }
.card{ background:var(--card); }
.badge{ background:var(--danger); }
.bell-btn{ color:var(--bell); }
.dropdown{ background:var(--card); border:1px solid var(--border); }
.dropdown-head, .dropdown-foot{
  border-color:var(--border);
}
/* TaskManager 3.0 – UI Base (ausgelagert aus layout.php) */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, Segoe UI, Roboto, Ubuntu, sans-serif;
  background:var(--bg);
  color:var(--fg);
}
a{text-decoration: none}
/* Container */
.container{max-width:1100px;margin:40px auto;padding:0 16px}

/* Auth */
.auth-shell{display:grid;place-items:center;min-height:100vh}
.auth-card{
  background:var(--card);
  border-radius:16px;
  padding:28px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  width:min(460px,92vw);
}
.auth-title{margin:0 0 18px;font-weight:700}
.form-row{display:flex;flex-direction:column;gap:6px;margin:12px 0}

/* Inputs & Buttons */
input,select,textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--acc);
  background:var(--input-bg);
  color:var(--fg);
  width:100%;
}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:8px}

.btn{
  appearance:none;border:0;border-radius:10px;
  padding:8px 10px;cursor:pointer;
  background:var(--acc);color:#fff;
  font:16px/1.5 system-ui, Segoe UI, Roboto, Ubuntu, sans-serif;
}
.btn-primary{background:var(--acc);color:#fff;font-weight:600}

.link{color:var(--acc);text-decoration:none}

/* Appbar / Navigation */
.appbar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--bg);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.brand{font-weight:700;color:#fff}
.appnav{display:flex;gap:8px;margin-left:16px}
.appnav a{
  color:var(--ink-sub);
  text-decoration:none;
  padding:6px 10px;border-radius:8px;
}
.appnav a:hover{background:var(--acc-hover); color:var(--fg-hover)}

.header-right{
  margin-left:auto;display:flex;gap:12px;align-items:center;position:relative;
}
.username{opacity:.8}

/* Badge & Bell */
.bell-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;color:#ffd166;
  cursor:pointer;border-radius:8px;padding:6px;
}
.badge{
  display:inline-flex;min-width:18px;height:18px;
  border-radius:9px;background:#e11d48;color:#fff;
  align-items:center;justify-content:center;
  font-size:12px;padding:0 6px;margin-left:2px;
}

/* Dropdown */
.dropdown{
  position:absolute;right:16px;top:calc(100% + 8px);
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;width:360px;max-width:92vw;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.dropdown-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--border);
}
.dropdown-list{
  list-style:none;margin:0;padding:0;max-height:360px;overflow:auto;
}
.dropdown-foot{
  padding:10px 12px;border-top:1px solid var(--border);text-align:right;
}

/* Cards / KPIs */
.card, .kanban-col{background:var(--card);padding:16px;border-radius:14px; box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);}
.kpi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin-top:16px;
}

/* Hilfsklassen (falls benötigt) */
.scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.scroll-y{overflow-y:auto;overflow-x:hidden}

.theme-btn{
  background:transparent;
  color:var(--ink-sub);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 10px;
}
.theme-btn:hover{ background: color-mix(in srgb, var(--border) 25%, transparent); }
.theme-label{ font-size:13px; }