/* ─── myGTD – Styles ─────────────────────────────────── */

/* ─── Self-hosted Fonts ─────────────────────────────── */
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-300.woff2') format('woff2'); font-weight: 300; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-800.woff2') format('woff2'); font-weight: 800; font-display: swap; font-style: normal; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-800.woff2') format('woff2'); font-weight: 800; font-display: swap; font-style: normal; }

:root {
  --bg: #FBF8F4; --card: #ffffff; --border: #EDE8E1; --border-light: #F5F0E8;
  --text: #2D2A26; --text-mid: #8C8680; --text-light: #B5AFA8; --text-faint: #D5D0C9;
  --accent: #C06830; --accent-light: #FDF0E8; --accent-glow: rgba(192,104,48,0.14);
  --red: #C06830; --amber: #C06830; --amber-bg: #FDF0E8;
  --done-green: #8C8680; --sit-brown: #8C8680;
  --radius: 12px; --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(45,42,38,0.04); --shadow-md: 0 4px 12px rgba(45,42,38,0.08);
  --transition: 0.15s ease;
  --font: 'Satoshi', 'DM Sans', sans-serif;
  --font-d: 'Cabinet Grotesk', 'Manrope', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ─── iOS Safe Areas ──────────────────────────────────── */
body {
  font-family: var(--font), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  /* iOS: Prevent pull-to-refresh in standalone mode */
  overscroll-behavior-y: contain;
  /* Safe area padding */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
input, textarea, select, button { font-family: inherit; font-size: 16px; }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="tel"],
input[type="number"], textarea, select {
  font-size: 16px; /* iOS won't zoom if >= 16px */
}

/* iOS: Smooth scrolling everywhere */
.modal-body, .main-content, .tab-content {
  -webkit-overflow-scrolling: touch;
}

/* iOS: Fix sticky position with transform */
@supports (-webkit-touch-callout: none) {
  .header { 
    position: -webkit-sticky; 
    position: sticky; 
  }
}

/* ─── Login Screen ─────────────────────────────────────── */
.login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--bg);
}

.login-box {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; width: 100%;
  max-width: 380px; box-shadow: var(--shadow-md);
}

.login-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.login-subtitle { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }

.login-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  margin-bottom: 16px;
}

/* ─── User Dropdown ────────────────────────────────────── */
.user-dropdown {
  position: fixed; top: 50px; right: 12px; z-index: 45;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  min-width: 200px; overflow: hidden;
}

.dropdown-user-info {
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--border); color: var(--text-light);
}

.dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 16px; border: none; background: none;
  font-size: 14px; cursor: pointer; color: var(--text);
  transition: background var(--transition);
}

.dropdown-item:hover { background: var(--border-light); }
.dropdown-item.dropdown-danger { color: var(--red); }
.dropdown-item.dropdown-danger:hover { background: #fef2f2; }

/* ─── Layout ───────────────────────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  background: rgba(245,243,238,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header h1 { font-family: var(--font-d); font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.header .logo-icon { color: var(--accent); }

.save-indicator {
  font-size: 10px; padding: 2px 8px; border-radius: 20px;
  background: var(--border-light); color: var(--text-light);
}

.main {
  flex: 1; padding: 16px; padding-bottom: 80px;
  max-width: 640px; margin: 0 auto; width: 100%;
}

/* ─── Bottom Nav ───────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: center;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); padding: 4px 0;
  padding-bottom: max(env(safe-area-inset-bottom), 6px);
}

.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: var(--radius); border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  transition: all var(--transition); position: relative;
  min-width: 0; flex: 1;
}
.nav-btn.active { color: var(--text); background: var(--border-light); }
.nav-btn .nav-icon { font-size: 18px; line-height: 1; }
.nav-btn .nav-label { font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.nav-badge {
  position: absolute; top: -2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ─── Cards ────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-sm); margin-bottom: 8px;
}
.card-warning { border-color: var(--amber); }

/* ─── Badges ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1.5px solid transparent; cursor: default;
  transition: all var(--transition); white-space: nowrap;
}
.badge.clickable { cursor: pointer; }
.badge.clickable:hover { transform: scale(1.05); }
.badge.clickable:active { transform: scale(0.95); }

/* Context badges use .badge-ctx with --ctx-color */
.badge-neutral { color: var(--text-mid); background: rgba(107,114,128,0.08); border-color: rgba(107,114,128,0.2); }
.badge-neutral.active { color: #fff; background: #6b7280; border-color: #6b7280; }
.badge-ctx { color: var(--ctx-color, var(--text-mid)); background: transparent; border-color: var(--ctx-color, var(--border)); }
.badge-ctx.active { color: #fff; background: var(--ctx-color); border-color: var(--ctx-color); }
.badge-sit { color: var(--sit-brown); background: rgba(146,64,14,0.08); border-color: rgba(146,64,14,0.2); }
.badge-sit.active { color: #fff; background: var(--sit-brown); border-color: var(--sit-brown); }
.badge-danger { color: var(--red); background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ─── Forms ────────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; font-size: 14px; color: var(--text);
  background: var(--card); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.input-lg { padding: 12px 16px; font-size: 16px; }
.textarea { resize: none; min-height: 80px; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.field-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); margin-bottom: 6px; }
.field-required { color: var(--danger); font-weight: 700; }
.validation-errors { margin-top: 12px; }
.validation-box {
  background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--radius);
  padding: 12px 16px; color: #991b1b; font-size: 13px;
}
.validation-box strong { display: block; margin-bottom: 6px; }
.validation-box ul { margin: 0; padding-left: 20px; }
.validation-box li { margin-bottom: 2px; }

/* ─── Icon Picker ──────────────────────────────────────── */
.icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 8px; cursor: pointer; border: 2px solid transparent;
  background: var(--bg-card); transition: all 0.15s;
}
.icon-pick:hover { background: var(--border-light); }
.icon-pick.active { border-color: var(--accent); background: var(--accent-light, rgba(59,130,246,0.1)); }
.icon-pick-selected {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 10px; background: var(--border-light); flex-shrink: 0;
}
.color-pick {
  width: 44px; height: 44px; min-width: 44px; padding: 2px; border: 2px solid var(--border);
  border-radius: 10px; cursor: pointer; background: transparent; flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
}
.color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.color-pick::-webkit-color-swatch { border: none; border-radius: 6px; }
.color-pick::-moz-color-swatch { border: none; border-radius: 6px; }
.field-group { margin-bottom: 16px; }

/* ─── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text-mid);
  cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-row { display: flex; gap: 8px; }

/* ─── Sections ─────────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; margin-bottom: 12px; }
.section-label { font-family: var(--font-d); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-faint); }

/* ─── Empty state ──────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 0; opacity: 0.55; }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--text-mid); }
.empty-state .empty-sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* ─── Inbox ────────────────────────────────────────────── */
.inbox-item { display: flex; flex-direction: column; gap: 10px; }
.inbox-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.inbox-item-title { font-size: 14px; font-weight: 500; flex: 1; }
.inbox-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─── Actions ──────────────────────────────────────────── */
.action-item { display: flex; align-items: flex-start; gap: 12px; }
.action-check {
  appearance: none; -webkit-appearance: none;
  width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px;
  border-radius: 50%; border: 2.5px solid var(--text-faint);
  background: transparent; cursor: pointer; flex-shrink: 0;
  padding: 0; margin: 0; box-sizing: border-box; line-height: 0;
  transition: all var(--transition);
}
.action-check:hover, .action-check:active { 
  border-color: var(--done-green); 
  background: rgba(34,197,94,0.15); 
}
.action-check.completing {
  border-color: var(--done-green);
  background: var(--done-green);
}
.action-content { flex: 1; min-width: 0; }
.action-title { font-size: 14px; font-weight: 500; cursor: pointer; }
.action-title:hover { text-decoration: underline; }
.action-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.action-notes { font-size: 12px; color: var(--text-light); margin-top: 6px; line-height: 1.5; }

/* ─── Projects ─────────────────────────────────────────── */
.project-group-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius); border: none;
  background: transparent; cursor: pointer; transition: background var(--transition);
}
.project-group-btn:hover { background: var(--border-light); }
.project-group-btn .group-icon { font-size: 18px; }
.project-group-btn .group-label { font-size: 14px; font-weight: 700; flex: 1; text-align: left; }
.project-group-btn .group-count { font-size: 12px; color: var(--text-faint); }
.project-group-btn .group-chevron { font-size: 11px; color: var(--text-faint); }
.area-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); padding: 6px 8px; }
.project-card { margin-left: 8px; cursor: pointer; transition: box-shadow var(--transition); }
.project-card:hover { box-shadow: var(--shadow-md); }
.project-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-title { font-size: 14px; font-weight: 500; }
.project-action-count { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.project-action-count.warning { color: var(--amber); }
.project-purpose { font-size: 12px; color: var(--text-light); margin-top: 4px; line-height: 1.4; }

/* ─── Review ───────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.stat-card { text-align: center; padding: 12px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat-label { font-size: 10px; color: var(--text-light); margin-top: 2px; }
.review-check { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 8px; cursor: pointer; }
.review-check:hover { background: rgba(0,0,0,0.02); }
.review-check input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--done-green); }
.review-check-text { font-size: 14px; flex: 1; }
.review-check-text.checked { color: var(--text-faint); text-decoration: line-through; }
.warning-box { background: var(--amber-bg); border: 1.5px solid var(--amber); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; }
.warning-title { font-size: 12px; font-weight: 700; color: var(--sit-brown); margin-bottom: 4px; }
.warning-item { font-size: 12px; color: var(--sit-brown); }
.last-review { font-size: 12px; color: var(--text-light); margin-bottom: 12px; padding: 0 4px; }

/* ─── Lists ────────────────────────────────────────────── */
.tab-bar, .tab-bar-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding-bottom: 4px; }
.tab-btn { padding: 8px 12px; border-radius: var(--radius); font-size: 12px; font-weight: 600; white-space: nowrap; border: 1.5px solid var(--border); background: var(--card); color: var(--text-mid); cursor: pointer; }
.tab-btn.active { background: var(--text); color: #fff; border-color: var(--text); }
.list-item { display: flex; flex-direction: column; gap: 8px; }
.list-item-content { flex: 1; min-width: 0; }
.list-item-title { font-size: 14px; font-weight: 500; }
.list-item-title.done { color: var(--text-faint); }
.list-item-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Settings ─────────────────────────────────────────── */
.settings-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Admin ────────────────────────────────────────────── */
.admin-user-row {
  display: flex; flex-direction: column; gap: 8px;
}
.admin-user-info { min-width: 0; }
.admin-user-name {
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.admin-user-meta { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.admin-user-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Modal ────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-content { position: relative; width: 100%; max-width: 520px; max-height: 88vh; background: var(--bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.25s ease; padding-bottom: env(safe-area-inset-bottom); }
.modal-overlay.open .modal-content { transform: translateY(0); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background: transparent; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-mid); padding: 0; box-sizing: border-box; appearance: none; -webkit-appearance: none; }
.modal-close:hover { background: var(--border); }
.modal-body { overflow-y: auto; padding: 20px; flex: 1; }

/* ─── Helpers ──────────────────────────────────────────── */
.flex-row { display: flex; gap: 8px; }
.flex-row-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }

@media (min-width: 640px) {
  .modal-content { border-radius: var(--radius-lg); }
  .modal-overlay { align-items: center; }
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.loading { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; }
.loading .spinner { font-size: 48px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }

/* ═══════════════════════════════════════════════════════════ */
/* iOS / iPhone Optimierungen                                 */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Touch Targets (min. 44px gemäss Apple HIG) ────────── */
/* Nur für interaktive Elemente, NICHT für Display-Badges */
.btn, .tab-btn, .dropdown-item, .modal-close {
  min-height: 44px;
}
/* Clickable badges grösser nur auf Touch-Geräten */
@media (pointer: coarse) {
  .badge.clickable, .filter-btn {
    min-height: 36px;
    padding: 6px 12px;
  }
}

/* Grössere Nav-Buttons auf Touch-Geräten */
@media (pointer: coarse) {
  .nav-btn {
    min-height: 50px;
    padding: 8px 4px;
  }
  .nav-btn .nav-icon { font-size: 22px; }
  .nav-btn .nav-label { font-size: 10px; }
}

/* Touch Feedback */
.btn:active, .tab-btn:active, .badge:active, .card:active,
.nav-btn:active, .dropdown-item:active {
  opacity: 0.7;
  transition: opacity 0.05s;
}

/* ─── User dropdown Safe Area ────────────────────────── */
@media (max-width: 639px) {
  .user-dropdown {
    top: calc(50px + env(safe-area-inset-top));
  }
}

/* ─── iOS Standalone Mode (PWA) ──────────────────────── */
@media (display-mode: standalone) {
  .header {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  
  /* Kein Bounce-Effekt am oberen Rand */
  html {
    overflow: hidden;
    height: 100%;
  }
  body {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── iOS-spezifische Fixes ──────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* Fix für iOS 100vh Bug */
  .login-screen, .app, .loading {
    min-height: -webkit-fill-available;
  }
  
  /* Smooth momentum scrolling */
  .modal-body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix für fixed positioning bei iOS-Keyboard */
  .bottom-nav {
    transform: translateZ(0);
  }
  
  /* Text-Size-Adjust deaktivieren */
  html {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Fix für iOS rubber-banding in Modals */
  .modal-overlay.open .modal-body {
    overscroll-behavior: contain;
  }
}

/* ─── iPhone Keyboard: Bottom-Nav ausblenden ─────────── */
@media (max-height: 500px) and (max-width: 639px) {
  .bottom-nav {
    display: none !important;
  }
  .main {
    padding-bottom: 16px;
  }
}

/* ─── Dark Mode (folgt System-Setting) ───────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a; --card: #2a2a2a; --border: #3a3a3a; --border-light: #333;
    --text: #e5e5e5; --text-mid: #aaa; --text-light: #777; --text-faint: #555;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  }
  
  .header { background: rgba(26,26,26,0.88); }
  .bottom-nav { background: rgba(26,26,26,0.92); }
  .login-box, .user-dropdown { background: var(--card); }
  .login-error { background: #3b1111; border-color: #5c2020; color: #fca5a5; }
  .card, .section-card { background: var(--card); }
  .modal-content { background: var(--bg); }
  .modal-backdrop { background: rgba(0,0,0,0.6); }
  .input, .textarea { background: #333; border-color: #444; color: #e5e5e5; }
  .input:focus, .textarea:focus { border-color: var(--accent); }
  .dropdown-item:hover { background: #333; }
  .dropdown-item.dropdown-danger:hover { background: #3b1111; }
  .nav-btn.active { background: #333; }
  .badge, .badge-privat, .badge-arbeit { opacity: 0.9; }
  .tab-btn { background: #333; color: #aaa; }
  .tab-btn.active { background: var(--accent); color: #fff; }
  
  #ios-install-banner > div {
    background: #2a2a2a !important;
    border-top-color: #3a3a3a !important;
  }
}

/* ─── Reduced Motion (Barrierefreiheit) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}