/* MyLife – Design-System
   Farben und Typografie nach Brand Identity Guide. */
:root{
  --deep-blue:#1C2755;
  --petrol:#115D62;
  --teal:#1D8A88;
  --mint:#5BBCA3;
  --coral:#E69D71;
  --orange:#F58160;

  --ink:#1B1F2A;
  --ink-soft:#5A6172;
  --ink-faint:#8A90A0;
  --line:#E6E6E2;
  --line-soft:#EFEFEC;
  --paper:#FFFFFF;
  --canvas:#FBFBF9;
  --sidebar:#F7F7F4;
  --danger:#C0392B;

  --radius:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(28,39,85,.06), 0 1px 3px rgba(28,39,85,.04);
  --shadow-md:0 4px 16px rgba(28,39,85,.08);
  --font-head:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--canvas);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- Layout ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex:0 0 248px;background:var(--sidebar);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 12px 12px;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
.brand-mark{width:30px;height:30px;object-fit:contain}
.brand-name{font-family:var(--font-head);font-size:22px;font-weight:600;color:var(--deep-blue);letter-spacing:.2px}

.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--ink-soft);text-decoration:none;font-weight:500;border:0;background:none;text-align:left;width:100%;
}
.nav-item:hover{background:#EDEDE8;color:var(--ink)}
.nav-item.active{background:var(--deep-blue);color:#fff}
.nav-item.active .nav-icon{color:#fff}
.nav-icon{width:18px;height:18px;flex:0 0 18px;color:var(--petrol)}
.nav-icon svg{width:18px;height:18px;display:block}
.sidebar-foot{border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
.ghost-link{background:none;border:0;color:var(--ink-faint);padding:6px 10px;border-radius:6px;font-size:13px}
.ghost-link:hover{background:#EDEDE8;color:var(--ink)}

.main{flex:1;min-width:0;background:var(--paper)}
.view{max-width:1040px;margin:0 auto;padding:40px 48px 80px}

/* ---------- Kopf ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}
.page-title{font-family:var(--font-head);font-size:34px;line-height:1.15;font-weight:600;color:var(--deep-blue);margin:0 0 6px}
.page-sub{color:var(--ink-soft);margin:0;font-size:14px}
.page-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;padding-top:6px}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:8px 14px;border-radius:8px;font-weight:500;display:inline-flex;align-items:center;gap:7px;
  transition:background .15s,border-color .15s,transform .05s;white-space:nowrap;
}
.btn:hover{background:#F5F5F1;border-color:#D9D9D3}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn-primary:hover{background:#0E4F53;border-color:#0E4F53}
.btn-danger{color:var(--danger);border-color:#EBD4D0}
.btn-danger:hover{background:#FBF1EF}
.btn-block{width:100%;justify-content:center;padding:10px 14px}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-icon{padding:7px;line-height:0}

/* ---------- Karten ---------- */
.grid-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.kpi-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:10px}
.kpi-value{font-size:28px;font-weight:600;color:var(--deep-blue);line-height:1.1;letter-spacing:-.02em}
.kpi-value small{font-size:14px;font-weight:500;color:var(--ink-soft);margin-left:3px}
.kpi-note{font-size:12.5px;color:var(--ink-faint);margin-top:7px}
.kpi-note.ok{color:var(--teal)}
.kpi-note.warn{color:#B4693F}
.kpi-note.bad{color:var(--danger)}
.delta-up{color:#B4693F}
.delta-down{color:var(--teal)}

.chart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.card-title{font-family:var(--font-head);font-size:19px;font-weight:600;color:var(--deep-blue);margin:0}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.segmented button{background:#fff;border:0;padding:5px 11px;font-size:12.5px;color:var(--ink-soft);border-right:1px solid var(--line)}
.segmented button:last-child{border-right:0}
.segmented button.on{background:var(--deep-blue);color:#fff}
.card-pending{border-color:var(--line)}
.pending-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line-soft)}
.pending-row:first-of-type{border-top:0}
.pending-main{flex:1;min-width:0}
.pending-date{font-size:13.5px;font-weight:500;color:var(--ink)}
.pending-meta{font-size:12px;color:var(--ink-faint);margin-top:2px}
.pending-weight{font-size:15px;font-weight:600;color:var(--deep-blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.pending-actions{display:flex;gap:6px}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn-quiet{color:var(--ink-faint)}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:20px;letter-spacing:.02em}
.tag-warn{background:#FBEDE6;color:#9A4F2C}
.chart-wrap{position:relative}
.chart-wrap svg{cursor:crosshair}
.chart-tip{
  position:absolute;pointer-events:none;z-index:5;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-md);padding:9px 12px;min-width:130px;
}
.chart-tip-date{font-size:11.5px;color:var(--ink-faint);letter-spacing:.02em;margin-bottom:2px}
.chart-tip-value{font-size:17px;font-weight:600;color:var(--deep-blue);letter-spacing:-.01em}
.chart-tip-meta{font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-faint);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---------- Tabelle ---------- */
.table-wrap{margin-top:18px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;padding:0 12px 9px;border-bottom:1px solid var(--line);
}
td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:hover{background:#FAFAF7;cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.row-del{background:none;border:0;color:var(--ink-faint);padding:4px 6px;border-radius:6px;line-height:0}
.row-del:hover{background:#FBF1EF;color:var(--danger)}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:500;background:#EAF4F2;color:var(--petrol)}
.empty{text-align:center;padding:56px 20px;color:var(--ink-faint)}
.empty h3{font-family:var(--font-head);color:var(--deep-blue);font-size:20px;margin:0 0 6px;font-weight:600}

/* ---------- Formular / Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,27,48,.42);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(20,27,48,.28);width:100%;max-width:460px;padding:26px}
.modal h2{font-family:var(--font-head);font-size:22px;color:var(--deep-blue);margin:0 0 18px;font-weight:600}
.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,138,136,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal-error{color:var(--danger);font-size:13px;margin:0 0 10px}
.hint{font-size:12px;color:var(--ink-faint);margin-top:4px}

/* ---------- Login ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 600px at 20% -10%, #EAF4F2 0%, transparent 60%),
  radial-gradient(900px 500px at 110% 110%, #FDF0E9 0%, transparent 55%), var(--canvas);padding:20px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-md);padding:34px 32px;width:100%;max-width:380px}
.login-logo{width:100%;max-width:230px;display:block;margin:0 auto 6px}
.login-sub{text-align:center;color:var(--ink-faint);font-size:13px;margin:0 0 22px}
.login-error{color:var(--danger);font-size:13px;text-align:center;margin:10px 0 0}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--deep-blue);color:#fff;
  padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow-md);z-index:60}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .field-row,.field-row-3{grid-template-columns:1fr}
}
@media (max-width:820px){
  .shell{display:block}
  .sidebar{position:static;height:auto;width:auto;flex:none;border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .brand{padding:0 4px 10px}
  .nav{flex-direction:row;overflow-x:auto;gap:6px}
  .nav-item{white-space:nowrap;width:auto}
  .sidebar-foot{display:none}
  .view{padding:24px 18px 60px}
  .page-head{flex-direction:column;gap:12px}
  .page-actions{padding-top:0}
  .page-title{font-size:27px}
}