/* ==========================================================
   Budget Planner — "Dark Modern" theme
   Restyle only: every class/id used by index.html + app.js is
   kept exactly as before. Only colors, fonts, radii and a couple
   of previously-unstyled auth-screen rules were added/changed.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#0d0d0f;
  --sidebar:#111113;
  --panel:#18181b;
  --panel2:#1f1f23;
  --border:rgba(255,255,255,.08);
  --text:#ffffff;
  --muted:#9c9a92;
  --blue:#8b7ef2;      /* primary accent (violet) */
  --accent2:#3987e5;   /* secondary / informational blue */
  --green:#3ddc84;
  --red:#f2666b;
  --purple:#c48ce8;
  --orange:#f0a92c;
  --radius:14px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
  /* Sicherheitsnetz: nichts soll die Seite je in die Breite sprengen
     und horizontales Scrollen der ganzen Seite erzwingen — einzelne
     Bereiche (Tabellen, Kalender) scrollen stattdessen selbst
     (overflow-x:auto), siehe weiter unten. */
  overflow-x:hidden;
}

h1,h2,h3,
.brand-title,.stat-value,.kpi-big,.donut-center{
  font-family:'Space Grotesk','IBM Plex Sans',sans-serif;
  letter-spacing:-0.01em;
}

button,input,select{font:inherit}
button{cursor:pointer}

body.light{
  --bg:#f9f9f7;
  --sidebar:#ffffff;
  --panel:#ffffff;
  --panel2:#f7f6f2;
  --border:rgba(11,11,11,.08);
  --text:#0b0b0b;
  --muted:#6b6a63;
  --shadow:0 2px 10px rgba(11,11,11,.06);
}

/* ---------- Login / Registrierung ---------- */

.auth-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(139,126,242,.10), transparent 45%),
    var(--bg);
}
.auth-card{
  width:100%;
  max-width:400px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 32px;
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
}
.auth-card h1{font-size:21px;margin:0 0 6px}
.auth-subtitle{font-size:13px;color:var(--muted);margin:0 0 22px}
.auth-error{
  font-size:12.5px;
  color:var(--red);
  min-height:1px;
  margin:2px 0 4px;
}
.auth-notice{
  font-size:12.5px;
  color:var(--text);
  background:rgba(245,166,35,.12);
  border:1px solid rgba(245,166,35,.35);
  border-radius:10px;
  padding:10px 12px;
  margin:0 0 18px;
  line-height:1.4;
}
.auth-submit{width:100%;margin-top:6px;padding:12px 16px}
.auth-switch{
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
  margin:20px 0 0;
}
.auth-switch button{
  background:transparent;
  border:0;
  color:var(--blue);
  font-weight:600;
  padding:0 0 0 4px;
}
.auth-hint{font-size:11px;color:var(--muted);margin:-6px 0 12px}
.local-security-note{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
}

/* ---------- Sidebar ---------- */

.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:244px;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:22px 14px;
  z-index:10;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 25px}
.brand-logo{
  width:38px;height:38px;
  border:2px solid var(--blue);
  border-radius:11px;
  display:grid;place-items:center;
  color:var(--blue);
  font-weight:700;font-size:19px;
  flex:none;
}
.brand-title{font-weight:700;font-size:17px}
.brand-version{font-size:11px;color:var(--muted);margin-top:2px}

/* "✕"-Button, um die mobile Menü-Schublade zu schließen — auf dem
   Desktop unsichtbar, die Sidebar steht dort ja sowieso immer offen. */
.sidebar-close-btn{
  display:none;margin-left:auto;flex:none;
  width:30px;height:30px;border:0;background:transparent;color:var(--muted);
  font-size:15px;border-radius:8px;align-items:center;justify-content:center;
}
.sidebar-close-btn:hover{background:var(--panel2);color:var(--text)}

/* ---------- Mobile Topleiste + Menü-Schublade ----------
   Unterhalb von 750px (siehe Media Query weiter unten) wird die
   Sidebar zu einer Schublade, die per Hamburger-Button ein-/
   ausgeblendet wird, statt permanent Platz wegzunehmen oder sich in
   ein enges Mehrspalten-Raster zu quetschen. Auf Desktop/Tablet
   bleiben Topleiste und Abdunklung unsichtbar (display:none). */
.mobile-topbar{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:40;
  align-items:center;gap:12px;height:56px;padding:0 16px;
  background:var(--sidebar);border-bottom:1px solid var(--border);
}
.mobile-menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:36px;height:36px;border:0;background:transparent;flex:none;
  border-radius:9px;padding:0;
}
.mobile-menu-btn:hover{background:var(--panel2)}
.mobile-menu-btn span{width:18px;height:2px;background:var(--text);border-radius:2px;margin:0 auto}
.mobile-topbar-brand{display:flex;align-items:center;gap:10px;min-width:0}
.mobile-topbar-brand .brand-logo{width:30px;height:30px;font-size:15px;border-radius:9px}
.mobile-topbar-brand .brand-title{font-size:15px}

.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;
}
.sidebar-backdrop.show{display:block}

#mainNav{display:flex;flex-direction:column;gap:3px}
nav{display:flex;flex-direction:column;gap:3px}
.nav-item{
  border:0;background:transparent;color:var(--muted);
  text-align:left;border-radius:10px;padding:10px 12px;
  display:flex;gap:13px;align-items:center;font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;
}
.nav-item span{width:20px;text-align:center;font-size:17px}
.nav-item:hover{background:var(--panel2);color:var(--text)}
.nav-item.active{background:var(--blue);color:#fff}

.sidebar-account{margin-top:auto;border-top:1px solid var(--border);padding-top:17px}
.side-label{font-size:11px;color:var(--muted);margin:0 6px 9px;letter-spacing:.04em}
.sidebar-account select{
  width:100%;background:var(--panel2);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:10px;
}
.new-account-btn{
  width:100%;margin-top:9px;border:1px solid var(--border);
  background:transparent;color:var(--text);border-radius:10px;padding:9px;
}
.sidebar-footer{border-top:1px solid var(--border);margin-top:17px;padding-top:13px;color:var(--muted);font-size:10px;line-height:1.4}

/* Theme-Button + Statuspunkt + "Lokale Datenbank" in einer Zeile —
   alle drei auf derselben Höhe (align-items:center) und mit
   einheitlichem, kleinem Abstand (gap statt margin-right:auto), statt
   wie vorher unterschiedlich groß und über zwei Zeilen verteilt. */
.footer-actions{display:flex;align-items:center;gap:7px}
.footer-actions button{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:none;padding:0;
  background:transparent;border:0;color:var(--muted);font-size:13px;
}
.footer-actions button:hover{color:var(--text)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex:none}

/* ---------- User profile button (sidebar footer) ---------- */

.user-profile-button{
  width:100%;display:flex;align-items:center;gap:10px;
  background:transparent;border:0;padding:8px;border-radius:10px;color:var(--text);
}
.user-profile-button:hover{background:var(--panel2)}
.user-avatar{
  width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:rgba(139,126,242,.18);color:#cfc6fb;
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.user-profile-info{display:flex;flex-direction:column;text-align:left;line-height:1.3}
.user-profile-info strong{font-size:12.5px}
.user-profile-info span{font-size:10.5px;color:var(--muted)}
.profile-arrow{margin-left:auto;color:var(--muted)}
.footer-divider{height:1px;background:var(--border);margin:10px 0}

/* Statt einer Zeile mit justify-content:space-between (die bei der
   schmalen Sidebar-Breite zum Umbrechen und damit zu ungleicher Höhe
   geführt hat): App-Name/Version und Status je eine eigene, volle
   Zeile — dadurch bricht hier nichts mehr um und beide Zeilen haben
   denselben linken Rand und denselben Zeilenabstand. */
.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* ---------- Main / topbar ---------- */

.main{margin-left:244px;padding:28px 22px 45px;max-width:1800px}
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.topbar h1{font-size:25px;margin:0 0 4px;font-weight:700}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px}

.month-picker{
  height:38px;display:flex;align-items:center;
  border:1px solid var(--border);border-radius:10px;background:var(--panel);overflow:hidden;
}
.month-picker button{height:100%;width:37px;border:0;background:transparent;color:var(--muted);font-size:20px}
.month-picker strong{padding:0 10px;font-size:13px;min-width:105px;text-align:center;font-weight:600}

.primary{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:10px 16px;font-weight:600}

.grid{display:grid;gap:18px}
.stats{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:19px 18px;box-shadow:var(--shadow)}
.stat-head{display:flex;justify-content:space-between;align-items:center}
.stat-label{font-size:12px;font-weight:700;color:var(--muted)}

.green{color:var(--green)}
.red{color:var(--red)}
.blue{color:var(--accent2)}
.purple{color:var(--purple)}

.stat-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-size:19px}
.icon-green{background:#123322;color:var(--green)}
.icon-red{background:#3a1f22;color:var(--red)}
.icon-blue{background:#182a44;color:var(--accent2)}
.icon-purple{background:#2a2140;color:var(--purple)}

.stat-value{font-size:24px;margin:8px 0 7px;font-weight:700}
.stat-sub{font-size:11px;color:var(--muted)}
.trend{margin-left:6px;font-weight:700}

/* ---------- Dashboard panels ---------- */

.dashboard-main{grid-template-columns:1.45fr .9fr;margin-top:18px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 9px}
.panel-head h3{font-size:13.5px;margin:0;font-weight:700}
.panel-head small{color:var(--muted)}
.link-btn{background:transparent;border:0;color:var(--blue);font-size:12px;font-weight:600}

.chart-wrap{padding:4px 15px 14px;height:285px}
.chart-svg{width:100%;height:100%}

.donut-area{padding:7px 18px 18px;display:flex;align-items:center;gap:22px;min-height:258px}
.donut{width:170px;height:170px;border-radius:50%;position:relative;flex:none}
.donut:after{content:"";position:absolute;inset:43px;border-radius:50%;background:var(--panel)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;z-index:1;font-weight:700;font-size:14px;line-height:1.1}
.donut-center small{font-weight:600;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:10px;width:100%;font-size:11.5px}
.legend-row{display:flex;align-items:center;gap:8px}
.legend-dot{width:9px;height:9px;border-radius:50%}
.legend-row .amount{margin-left:auto;color:var(--muted)}

.bottom-grid{grid-template-columns:1.2fr 1.1fr 1.1fr;margin-top:18px}
.list{padding:3px 17px 13px}
.list-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:0}
.row-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:var(--panel2)}
.row-main{flex:1}
.row-title{font-size:12.5px;font-weight:500}
.row-meta{font-size:10.5px;color:var(--muted);margin-top:3px}
.amount{font-size:12.5px;font-weight:700}
.amount.expense{color:var(--red)}
.amount.income{color:var(--green)}

.progress{height:7px;background:var(--panel2);border-radius:10px;overflow:hidden;margin-top:7px}
.progress i{height:100%;display:block;background:var(--orange);border-radius:10px}

.empty{padding:40px;text-align:center;color:var(--muted)}

/* ---------- Generic page layout ---------- */

.page-grid{grid-template-columns:repeat(3,1fr)}
.table-panel{overflow:hidden}
/* -webkit-overflow-scrolling:touch macht das seitliche Wischen durch
   breite Tabellen in Safari auf dem iPhone butterweich statt ruckelig. */
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:13px 15px;border-bottom:1px solid var(--border);font-size:12.5px;text-align:left;white-space:nowrap}
.table th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.table td:last-child,.table th:last-child{text-align:right}
.actions{display:flex;justify-content:flex-end;gap:6px}
.icon-btn{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:8px;padding:6px 9px}
.danger{color:var(--red)}

/* flex-wrap:wrap, damit Titel + Button (z. B. "Ausgabe hinzufügen")
   auf schmalen Bildschirmen untereinander stehen statt die Seite in
   die Breite zu drücken. */
.page-title-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}
.page-title-row h2{font-size:16px;margin:0;font-weight:700}
.dashboard-add-actions{display:flex;flex-wrap:wrap;gap:10px}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.card h3{font-size:14px;margin:0 0 14px;font-weight:700}
.kpi-big{font-size:28px;font-weight:700}
.muted{color:var(--muted)}

.category-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.category-card{position:relative}
.category-color{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:8px}
.category-card .card-actions{position:absolute;right:12px;top:12px;display:flex;gap:6px}
.category-card h3{padding-right:76px}

.budget-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.budget-card{position:relative}
.budget-value{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin:8px 0}
.budget-value span:first-child{color:var(--muted);flex:none}
.budget-value span:last-child{text-align:right}

.goal-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.contract-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.badge{
  display:inline-block;padding:3px 9px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--border);
  color:var(--muted);font-size:11px;font-weight:600;white-space:nowrap;
}

/* ---------- Calendar ---------- */

/* Sicherheitsnetz: Falls die 7 Spalten auf einem sehr schmalen
   Bildschirm trotz kleinerer Zellen (siehe Media Query) enger werden
   müssten, als noch lesbar ist, kann man hier seitlich wischen statt
   dass die ganze Seite in die Breite gedrückt wird. */
.calendar-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(38px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cal-head,.cal-day{background:var(--panel);padding:10px}
.cal-head{font-size:11px;color:var(--muted);text-align:center;font-weight:600}
.cal-day{min-height:105px;position:relative}
.cal-day .num{font-size:11px;color:var(--muted)}
.cal-day.today{outline:2px solid var(--blue);outline-offset:-2px}
.event{margin-top:7px;font-size:10px;padding:5px;border-radius:6px;background:var(--panel2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event.exp{color:var(--red)}
.event.inc{color:var(--green)}

/* ---------- Settings / forms ---------- */

.settings-grid{grid-template-columns:1fr 1fr}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel2);color:var(--text);outline:none;
}
.field input:focus,.field select:focus{border-color:var(--blue)}
.field select.auto-guessed{border-color:var(--blue);box-shadow:0 0 0 3px rgba(139,126,242,.25);transition:box-shadow .25s ease}

/* ---------- Gesperrte Felder mit Bearbeiten-Button (Profil) ---------- */

.field-label-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;
}
.field-label-row label{margin-bottom:0}
.field-edit-btn{
  flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:6px;color:var(--muted);
  cursor:pointer;font-size:12.5px;padding:0;
}
.field-edit-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.field input[readonly],.field textarea[readonly]{
  opacity:.7;cursor:default;
}
.field select:disabled{
  opacity:.7;cursor:default;
}

.field-note{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;margin:2px 0 16px;font-size:11.5px;line-height:1.55;color:var(--muted);
}
.field-note strong{color:var(--text)}
.field-note .icon{flex:none;font-size:13px;line-height:1.4}
.field-note.warn{border-color:rgba(240,169,44,.35)}
.field-note.warn .icon{color:var(--orange)}

.radio-row{display:flex;gap:10px}

/* Passwort-Anzeigen-Button in Login/Registrierung */
.password-field{position:relative}
.password-field input{padding-right:42px}
.password-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:0;color:var(--muted);font-size:16px;
  border-radius:8px;cursor:pointer;
}
.password-toggle:hover{background:var(--panel2);color:var(--text)}
.password-toggle.active{color:var(--blue)}
.type-choice{flex:1;border:1px solid var(--border);background:var(--panel2);color:var(--muted);padding:11px;border-radius:10px;text-align:center}
.type-choice.active{border-color:var(--blue);color:#fff;background:var(--blue)}

/* ---------- Modal / Toast / Notice ---------- */

.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:50;align-items:center;justify-content:center}
.modal-backdrop.open{display:flex}
.modal{width:min(560px,calc(100% - 30px));max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.5);padding:22px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-head h2{font-size:17px;margin:0;font-weight:700}
.close{border:0;background:transparent;color:var(--muted);font-size:22px}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.secondary{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;padding:10px 15px}

.toast{
  position:fixed;right:25px;bottom:25px;
  background:#1c1c20;color:#fff;border:1px solid var(--border);
  padding:12px 16px;border-radius:12px;
  display:flex;align-items:center;gap:14px;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;z-index:80;
}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast-action{
  background:transparent;border:0;color:var(--blue);font-weight:600;
  cursor:pointer;padding:4px 6px;border-radius:6px;white-space:nowrap;font-size:13px;
}
.toast-action:hover{background:rgba(255,255,255,.1)}

.notice{
  background:rgba(139,126,242,.10);
  border:1px solid rgba(139,126,242,.30);
  border-radius:10px;padding:12px 14px;font-size:12px;margin-bottom:15px;
}

/* ---------- Reports ---------- */

.report-grid{grid-template-columns:1fr 1fr}
.mini-bars{display:flex;align-items:end;gap:8px;height:180px;padding:10px 0}
.mini-bar{flex:1;background:var(--blue);border-radius:5px 5px 0 0;min-height:4px;position:relative}
.mini-bar span{position:absolute;bottom:-20px;width:100%;text-align:center;font-size:9px;color:var(--muted)}

/* ---------- Mini-Select (Dashboard-Chart-Zeitraum) ---------- */

.mini-select{
  padding:6px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--panel2);color:var(--text);font-size:12px;outline:none;
}

/* ---------- Such-/Filterleiste (Einnahmen/Ausgaben) ---------- */

.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;
}
.search-input{
  flex:1 1 240px;min-width:180px;padding:10px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel2);color:var(--text);
  outline:none;font-family:inherit;
}
.search-input:focus{border-color:var(--blue)}
.search-input::placeholder{color:var(--muted)}
.filter-bar .mini-select{padding:10px 12px;font-size:13px}
.filter-bar .secondary{padding:9px 14px;font-size:12.5px}

/* ---------- 2FA-Einrichtung (Profil) ---------- */

.twofa-setup-grid{
  display:flex;gap:18px;align-items:flex-start;margin:14px 0;flex-wrap:wrap;
}
.twofa-setup-grid img{
  width:160px;height:160px;border-radius:10px;border:1px solid var(--border);
  background:#fff;padding:8px;flex:0 0 auto;
}
.twofa-setup-grid > div{flex:1 1 200px;min-width:180px}
.twofa-setup-grid label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.mono-code{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:13px;letter-spacing:.5px;word-break:break-all;
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;color:var(--text);
}

/* ---------- Profil-Seite ---------- */

.profile-content{display:flex;flex-direction:column;gap:18px}

/* align-items:stretch (Grid-Standard) statt "start", damit zwei
   nebeneinanderliegende Karten IMMER dieselbe Höhe haben, auch wenn
   eine davon mehr Inhalt hat als die andere — sonst wirken die
   unteren Kanten wie zufällig verschoben. */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.profile-top-grid{grid-template-columns:1fr}

/* .panel-head wurde für .panel (ohne eigenes Padding) entworfen.
   Innerhalb von .card (das schon 18px Padding mitbringt) stattdessen
   nur eine Trennlinie statt doppeltem Innenabstand. */
.card .panel-head{
  padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--border);
}

.profile-header-card{display:flex;align-items:center;gap:20px}

.profile-large-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;
  background:rgba(139,126,242,.18);color:#cfc6fb;
  display:grid;place-items:center;font-weight:700;font-size:24px;
}
.profile-large-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-large-avatar.small{width:44px;height:44px;font-size:16px}

/* Avatar-Bild + darunterliegende Ändern/Entfernen-Buttons, direkt im
   Profil-Header-Balken (statt in einer separaten Karte). */
.profile-avatar-block{
  display:flex;flex-direction:column;align-items:center;gap:9px;flex:none;
}

.avatar-actions{display:flex;gap:8px}
.avatar-actions-compact{gap:6px}

.avatar-btn{
  border:1px solid var(--border);background:transparent;color:var(--text);
  border-radius:8px;padding:5px 10px;font-size:11px;font-weight:600;
  white-space:nowrap;
}
.avatar-btn:hover{background:var(--panel2)}
.avatar-btn.danger{color:var(--red);border-color:rgba(242,102,107,.35)}

.profile-header-info{flex:1;min-width:0}

.profile-header-card h2{font-size:17px;margin:0 0 4px;font-weight:700}
.profile-header-card p{margin:0;color:var(--muted);font-size:12.5px}

.profile-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--green);margin-top:8px;
}

.profile-hint{font-size:11px;margin-top:7px;max-width:340px;line-height:1.5;display:block}

.profile-meta{
  display:flex;justify-content:space-between;gap:14px;
  margin:16px 0;padding:14px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.profile-meta > div{display:flex;flex-direction:column;gap:5px}
.profile-meta span{font-size:11px;color:var(--muted)}
.profile-meta strong{font-size:13px;font-weight:600}

.security-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--border);
}
.security-row:last-child{border-bottom:0}
.security-row strong{display:block;font-size:13px;margin-bottom:4px;font-weight:600}
.security-row p{font-size:12px;color:var(--muted);margin:0;line-height:1.55}

.switch{position:relative;display:inline-block;width:40px;height:22px;flex:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch span{
  position:absolute;inset:0;background:var(--panel2);border:1px solid var(--border);
  border-radius:22px;transition:.2s;cursor:pointer;
}
.switch span::before{
  content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;
  background:var(--muted);border-radius:50%;transition:.2s;
}
.switch input:checked + span{background:var(--blue);border-color:var(--blue)}
.switch input:checked + span::before{transform:translateX(18px);background:#fff}
.switch input:disabled + span{opacity:.5;cursor:not-allowed}

.danger-card{border-color:rgba(242,102,107,.35)}
.danger-text{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 14px}

.user-profile-button.profile-active{background:var(--panel2)}

/* ---------- Responsive ---------- */

@media(max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .dashboard-main,.bottom-grid,.settings-grid,.report-grid,.profile-grid,.profile-top-grid{grid-template-columns:1fr}
  .sidebar{width:210px}
  .main{margin-left:210px}
}

/* Handy-Layout: Die Sidebar wird zu einer Schublade, die über den
   Hamburger-Button in der fixierten Mobile-Topleiste ein- und
   ausgeblendet wird (siehe .mobile-topbar/.mobile-menu-btn weiter
   oben) — dadurch bleiben Kontoauswahl, Profil-Zugang und
   Theme-Umschalter auch am Handy erreichbar, statt wie vorher ganz
   zu verschwinden, und die Navigation frisst nicht mehr den
   halben Bildschirm oberhalb der eigentlichen Seite. */
@media(max-width:750px){
  .mobile-topbar{display:flex}
  .sidebar-close-btn{display:flex}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);height:100%;
    transform:translateX(-100%);transition:transform .25s ease;
    z-index:90;box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{z-index:85}

  .main{margin-left:0;padding:18px;padding-top:74px}

  .topbar{gap:15px;flex-direction:column;align-items:flex-start}
  .stats{grid-template-columns:1fr}
  .page-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .profile-header-card{flex-direction:column;align-items:flex-start;text-align:left}
  .security-row{flex-direction:column;align-items:flex-start;gap:10px}

  /* Kompaktere Tabellen — Inhalte bleiben auf einer Zeile
     (white-space:nowrap, siehe oben) und die Tabelle scrollt seitlich
     innerhalb ihres eigenen Rahmens statt die Seite zu sprengen. */
  .table th,.table td{padding:11px 13px;font-size:12px}

  /* Kompakterer Kalender, damit alle 7 Spalten ohne seitliches
     Scrollen auf den Bildschirm passen. */
  .cal-head,.cal-day{padding:5px}
  .cal-day{min-height:64px}
  .cal-day .num{font-size:10px}
  .event{font-size:9px;padding:3px;margin-top:4px}

  .chart-wrap{height:220px}
  .donut-area{flex-direction:column;align-items:stretch;min-height:0}
  .donut{margin:0 auto}
}