/* ============================================================
   Family Balance — Apple-style theme (NEW)
   Scoped under html[data-theme="apple"] so the classic look in
   styles.css stays 100% intact when the switch is OFF.
   Strategy: re-map the existing CSS variables to Apple/iOS system
   colors (instant reskin), then a few structural overrides for the
   pieces whose shape differs (segmented control, tab bar, header…).
   Also follows the system light/dark appearance.
   ============================================================ */

/* ---- Appearance switch (iOS toggle) — unscoped so it looks right in BOTH themes ---- */
.appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appearance-row .ap-title { font-weight: 700; font-size: 16px; }
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #E9E9EB; border-radius: 999px; transition: background .25s ease;
}
.switch .slider::before {
  content: ""; position: absolute; height: 27px; width: 27px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider { background: #34C759; }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ============================================================
   APPLE THEME — variable re-map (light)
   ============================================================ */
html[data-theme="apple"] {
  --bg: #F2F2F7;            /* systemGroupedBackground */
  --surface: #FFFFFF;
  --primary: #34C759;       /* systemGreen — deposit / confirm */
  --primary-dark: #248A3D;
  --secondary: #FF9500;     /* systemOrange — withdrawal */
  --accent: #007AFF;        /* systemBlue — transfer / links */
  --hero-start: #34C759;
  --hero-end: #30B0C7;      /* systemTeal */
  --text: #1C1C1E;          /* label */
  --muted: #8E8E93;         /* secondaryLabel / systemGray */
  --positive: #34C759;
  --negative: #FF3B30;      /* systemRed */
  --border: #E5E5EA;        /* systemGray5 */
  --danger: #FF3B30;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --radius: 18px;
}

/* Header — iOS large-title look (flat, hairline, dark bold title) */
html[data-theme="apple"] .app-header {
  background: var(--bg);
  color: var(--text);
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px 14px;
}
html[data-theme="apple"] .app-header h1 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
html[data-theme="apple"] .app-header .sub { color: var(--muted); opacity: 1; }
html[data-theme="apple"] .conn-pill { background: #E9E9EB; color: var(--muted); }
html[data-theme="apple"] .conn-pill.online .dot { background: #34C759; box-shadow: 0 0 0 3px rgba(52,199,89,.2); }
html[data-theme="apple"] .conn-pill.offline .dot { background: #FF9500; }
html[data-theme="apple"] .ledger-picker { background: #E9E9EB; color: var(--accent); font-weight: 600; }

/* Hero balance card — refined gradient, deeper radius, soft glow */
html[data-theme="apple"] .hero-card {
  background: linear-gradient(160deg, var(--hero-start) 0%, var(--hero-end) 100%);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(48,176,199,.22);
}
html[data-theme="apple"] .hero-card .amount { letter-spacing: -1px; }

/* Segmented control (iOS) */
html[data-theme="apple"] .mode-toggle {
  background: #E9E9EB; box-shadow: none; padding: 2px;
}
html[data-theme="apple"] .mode-toggle button { color: var(--text); font-weight: 600; }
html[data-theme="apple"] .mode-toggle button.active {
  background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Cards — softer, rounder */
html[data-theme="apple"] .bank-card { border-left-width: 5px; }

/* Buttons — iOS rounded, semibold; secondary/ghost become tinted text style */
html[data-theme="apple"] .btn { border-radius: 14px; font-weight: 600; font-size: 17px; }
html[data-theme="apple"] .btn-secondary { background: #E9E9EB; color: var(--accent); box-shadow: none; }
html[data-theme="apple"] .btn-ghost { color: var(--accent); }
html[data-theme="apple"] .fab-wrap .btn { box-shadow: 0 8px 22px rgba(52,199,89,.4); border-radius: 16px; }

/* Bottom tab bar — translucent blur, blue active */
html[data-theme="apple"] .tabbar {
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
  box-shadow: none;
}
html[data-theme="apple"] .tabbar button.active { color: var(--accent); }

/* Inputs — hairline border, blue focus ring */
html[data-theme="apple"] .field input,
html[data-theme="apple"] .field select,
html[data-theme="apple"] .field textarea {
  border-width: 1px; border-radius: 12px;
}
html[data-theme="apple"] .field input:focus,
html[data-theme="apple"] .field select:focus,
html[data-theme="apple"] .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,122,255,.15);
}

/* Chips — blue active */
html[data-theme="apple"] .chip.active { background: var(--accent); border-color: var(--accent); }

/* Type chooser & bank select active tints aligned to system colors */
html[data-theme="apple"] .type-choice.active.in { background: rgba(52,199,89,.14); }
html[data-theme="apple"] .type-choice.active.out { background: rgba(255,149,0,.14); }
html[data-theme="apple"] .type-choice.active.transfer { background: rgba(0,122,255,.12); }
html[data-theme="apple"] .bank-select button.active { background: rgba(0,122,255,.12); }
html[data-theme="apple"] .payout-toggle button.active { background: rgba(0,122,255,.12); }

/* Badges & soft fills */
html[data-theme="apple"] .badge { background: #EDEDF0; }
html[data-theme="apple"] .badge.rate { background: rgba(52,199,89,.14); color: var(--primary-dark); }
html[data-theme="apple"] .confirm-sentence { background: #EDEDF0; }

/* Modal — deeper radius */
html[data-theme="apple"] .modal { border-radius: 20px; }

/* ============================================================
   APPLE THEME — DARK (follows system appearance)
   ============================================================ */
  html[data-dark="1"][data-theme="apple"] {
    --bg: #000000;
    --surface: #1C1C1E;
    --text: #FFFFFF;
    --muted: #98989F;
    --border: #38383A;
    --primary-dark: #30D158;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  }
  html[data-dark="1"][data-theme="apple"] .app-header { background: var(--bg); }
  html[data-dark="1"][data-theme="apple"] .conn-pill,
  html[data-dark="1"][data-theme="apple"] .ledger-picker { background: #2C2C2E; }
  html[data-dark="1"][data-theme="apple"] .mode-toggle { background: #2C2C2E; }
  html[data-dark="1"][data-theme="apple"] .mode-toggle button.active { background: #636366; color: #fff; }
  html[data-dark="1"][data-theme="apple"] .btn-secondary { background: #2C2C2E; }
  html[data-dark="1"][data-theme="apple"] .tabbar { background: rgba(28,28,30,.8); }
  html[data-dark="1"][data-theme="apple"] .badge { background: #2C2C2E; color: var(--muted); }
  html[data-dark="1"][data-theme="apple"] .badge.rate { background: rgba(52,199,89,.2); color: #30D158; }
  html[data-dark="1"][data-theme="apple"] .confirm-sentence { background: #2C2C2E; }
  html[data-dark="1"][data-theme="apple"] .switch .slider { background: #39393D; }
  html[data-dark="1"][data-theme="apple"] .month-row .bar-wrap { background: #2C2C2E; }
  html[data-dark="1"][data-theme="apple"] table.ledger th { background: #2C2C2E; color: var(--muted); }
  html[data-dark="1"][data-theme="apple"] table.ledger tr.bal-row td { background: #2C2C2E; color: var(--text); }
  html[data-dark="1"][data-theme="apple"] .type-choice.active.in { background: rgba(52,199,89,.22); }
  html[data-dark="1"][data-theme="apple"] .type-choice.active.out { background: rgba(255,149,0,.22); }
  html[data-dark="1"][data-theme="apple"] .type-choice.active.transfer { background: rgba(10,132,255,.24); }
  html[data-dark="1"][data-theme="apple"] .bank-select button.active,
  html[data-dark="1"][data-theme="apple"] .payout-toggle button.active { background: rgba(10,132,255,.24); }
  html[data-dark="1"][data-theme="apple"] .banner.warn { background: rgba(255,59,48,.18); color: #FF6961; }
  html[data-dark="1"][data-theme="apple"] .banner.info { background: rgba(10,132,255,.18); color: #6CB4FF; }
  html[data-dark="1"][data-theme="apple"] .banner.ok { background: rgba(52,199,89,.18); color: #30D158; }