/* ============================================================
   THEME V4 — third visual-only reskin attempt: this one changes
   the LAYOUT, not just the palette — a vertical icon rail instead
   of a horizontal bar, and an asymmetric "bento" content grid.
   Toggled via body.theme-v4 (cookie theme_variant=v4). Nothing
   here changes markup semantics, routes, or data — same DOM as
   style.css / style-v2.css / style-v3.css, all of which stay
   fully intact and untouched.
   ============================================================ */

body.theme-v4 {
  --v4-bg: #f2f3f7;
  --v4-panel: #ffffff;
  --v4-border: #e5e7ee;
  --v4-ink: #171923;
  --v4-muted: #6b7280;
  --v4-rail-bg: #14162a;
  --v4-rail-ink: #9497b3;
  --v4-accent: #ff6b4a;
  --v4-accent-2: #ffb84a;
  --v4-blue: #4361ee;
  --v4-blue-bg: #eaeefd;
  --v4-green: #16a34a;
  --v4-green-bg: #e9f9ee;
  --v4-radius: 16px;
  --v4-radius-sm: 10px;
  --v4-shadow: 0 1px 2px rgba(23, 25, 35, 0.04), 0 8px 24px rgba(23, 25, 35, 0.06);

  background: var(--v4-bg);
  color: var(--v4-ink);
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
}

/* ---- shell: vertical icon rail instead of a horizontal bar ---- */
body.theme-v4 .sidebar { display: none; }
body.theme-v4 .app-shell {
  display: block;
  min-height: 100vh;
  padding-inline-start: 78px;
}
body.theme-v4 .main-col { display: block; width: 100%; }

body.theme-v4 .v2-topnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 78px;
  background: var(--v4-rail-bg);
  padding: 16px 0 14px;
  z-index: 25;
  overflow-y: auto;
}
body.theme-v4 .v2-topnav-brand {
  order: -1;
  flex-direction: column;
  margin-inline-start: 0;
  margin-bottom: 18px;
}
body.theme-v4 .v2-topnav-brand-text { display: none; }
body.theme-v4 .v2-topnav-brand-badge {
  background: linear-gradient(135deg, var(--v4-accent), var(--v4-accent-2));
  border-radius: 12px;
  width: 38px;
  height: 38px;
}

body.theme-v4 .v2-nav-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
body.theme-v4 .v2-nav-items a {
  flex-direction: column;
  gap: 3px;
  width: 58px;
  padding: 9px 2px;
  border-radius: 12px;
  color: var(--v4-rail-ink);
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
}
body.theme-v4 .v2-nav-items a svg { width: 19px; height: 19px; }
body.theme-v4 .v2-nav-items a span { line-height: 1.1; }
body.theme-v4 .v2-nav-items a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
body.theme-v4 .v2-nav-items a.active {
  background: linear-gradient(135deg, var(--v4-accent), var(--v4-accent-2));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 107, 74, 0.35);
}

body.theme-v4 .topbar {
  background: var(--v4-panel);
  border-bottom: 1px solid var(--v4-border);
}
body.theme-v4 .topbar-search input {
  background: var(--v4-bg);
  border-color: var(--v4-border);
  border-radius: 10px;
}
body.theme-v4 .btn.btn-sync {
  background: var(--v4-ink);
  border-radius: 10px;
}

body.theme-v4 .content {
  max-width: 1320px;
  padding: 24px 32px 44px;
}

body.theme-v4 h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
body.theme-v4 h2 { font-weight: 700; font-size: 0.98rem; }

/* ---- generic surfaces ---- */
body.theme-v4 .panel,
body.theme-v4 .card,
body.theme-v4 .stat-box {
  background: var(--v4-panel);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow);
}
body.theme-v4 .panel { padding: 20px 22px; }

/* ---- bento-style asymmetric stat cards (dashboard) ---- */
body.theme-v4 .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(64px, auto);
  gap: 14px;
}
body.theme-v4 .card {
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 18px;
}
body.theme-v4 .card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, #171a2e, #2a2f57);
  border: none;
}
body.theme-v4 .card:nth-child(1) .card-label { color: #b6b9d6; }
body.theme-v4 .card:nth-child(1) .card-value { color: #fff; font-size: 2rem; }
body.theme-v4 .card:nth-child(1) .stat-icon { background: linear-gradient(135deg, var(--v4-accent), var(--v4-accent-2)); }
body.theme-v4 .card:nth-child(2) { grid-column: span 2; }
body.theme-v4 .card:nth-child(n+3) { grid-column: span 1; }

body.theme-v4 .stat-icon {
  border-radius: var(--v4-radius-sm);
  background: var(--v4-blue-bg);
}
body.theme-v4 .stat-icon.icon-green { background: var(--v4-green-bg); }
body.theme-v4 .stat-icon.icon-red { background: #fde7e2; }
body.theme-v4 .stat-icon.icon-orange { background: #fdf0dd; }
body.theme-v4 .card-value { font-weight: 800; }
body.theme-v4 .card-value-success { color: var(--v4-green); }
body.theme-v4 .card-value-danger { color: var(--v4-accent); }

/* ---- asymmetric content grid + reordering ---- */
body.theme-v4 .grid-2 { grid-template-columns: 3fr 2fr; gap: 16px; }
body.theme-v4 .grid-2 ~ .grid-2 > *:first-child { order: 2; }

body.theme-v4 .filter-row {
  background: var(--v4-panel);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-sm);
  padding: 10px 16px;
}
body.theme-v4 .year-nav { background: var(--v4-bg); border-color: var(--v4-border); border-radius: 999px; }
body.theme-v4 .dash-tabs { background: var(--v4-bg); border-color: var(--v4-border); border-radius: 999px; }
body.theme-v4 .dash-tab.active { background: var(--v4-ink); border-radius: 999px; }

/* ---- charts ---- */
body.theme-v4 .line-current { stroke: var(--v4-accent); }
body.theme-v4 .line-prev { stroke: var(--v4-border); }
body.theme-v4 .swatch-income { background: var(--v4-accent); }
body.theme-v4 .swatch-expense { background: var(--v4-ink); }
body.theme-v4 .bar-income { background: var(--v4-accent); border-radius: 4px 4px 0 0; }
body.theme-v4 .bar-expense { background: var(--v4-ink); border-radius: 4px 4px 0 0; }
body.theme-v4 .yoy-dot-current { fill: var(--v4-accent); }
body.theme-v4 .yoy-tooltip { border-radius: var(--v4-radius-sm); }

/* ---- buttons ---- */
body.theme-v4 .btn { border-radius: 10px; font-weight: 600; }
body.theme-v4 .btn-primary { background: var(--v4-ink); border-color: var(--v4-ink); }
body.theme-v4 .btn-primary:hover { background: #2a2d3d; }
body.theme-v4 .btn-danger { border-color: var(--v4-accent); color: var(--v4-accent); }
body.theme-v4 .btn-danger:hover { background: var(--v4-accent); color: #fff; }
body.theme-v4 .icon-btn-small,
body.theme-v4 .icon-btn { color: var(--v4-muted); border-radius: 8px; }
body.theme-v4 .icon-btn-small:hover,
body.theme-v4 .icon-btn:hover { background: var(--v4-bg); color: var(--v4-ink); }

body.theme-v4 a { color: var(--v4-blue); }

/* ---- tables ---- */
body.theme-v4 .data-table { border-radius: var(--v4-radius); border-color: var(--v4-border); box-shadow: var(--v4-shadow); }
body.theme-v4 .data-table th { background: var(--v4-bg); color: var(--v4-muted); font-weight: 700; font-size: 0.75rem; border-bottom: none; }
body.theme-v4 .data-table td { border-bottom: 1px solid var(--v4-border); }
body.theme-v4 .data-table tr:hover td { background: #fafafc; }

/* ---- forms ---- */
body.theme-v4 .form-row input,
body.theme-v4 .form-row select,
body.theme-v4 .form-row textarea,
body.theme-v4 .hebrew-cal-picker-btn {
  border-radius: 10px;
  border-color: var(--v4-border);
}
body.theme-v4 .form-row input:focus,
body.theme-v4 .form-row select:focus,
body.theme-v4 .form-row textarea:focus {
  border-color: var(--v4-ink);
  box-shadow: 0 0 0 3px var(--v4-bg);
  outline: none;
}

/* ---- chips / badges ---- */
body.theme-v4 .chip { border-radius: 999px; border-color: var(--v4-border); }
body.theme-v4 .chip.chip-active,
body.theme-v4 .chip.chip-primary.chip-active { background: var(--v4-ink); border-color: var(--v4-ink); }
body.theme-v4 .chip.chip-active-green { background: var(--v4-accent); border-color: var(--v4-accent); }
body.theme-v4 .badge { border-radius: 999px; }
body.theme-v4 .badge-status-שולם { background: var(--v4-green-bg); color: #15803d; }
body.theme-v4 .badge-status-ממתין,
body.theme-v4 .badge-status-חלקי { background: #fdf0dd; color: #b45309; }

/* ---- flash / banners ---- */
body.theme-v4 .flash { border-radius: var(--v4-radius-sm); }
body.theme-v4 .flash-success { background: var(--v4-green-bg); color: #15803d; }
body.theme-v4 .flash-error { background: #fde7e2; color: #c2410c; }
body.theme-v4 .unmatched-banner { background: #fdf0dd; border-color: #f3d391; border-radius: var(--v4-radius-sm); }
body.theme-v4 .reminder-row-due { background: var(--v4-blue-bg); border-radius: var(--v4-radius-sm); }
body.theme-v4 .reminder-row-warning { background: #fdf0dd; border-radius: var(--v4-radius-sm); }

/* ---- dropdowns / modals ---- */
body.theme-v4 .notif-dropdown,
body.theme-v4 .user-menu-dropdown,
body.theme-v4 .autocomplete-dropdown {
  border-radius: var(--v4-radius-sm);
  border-color: var(--v4-border);
  box-shadow: var(--v4-shadow), 0 10px 30px rgba(23, 25, 35, 0.1);
}
body.theme-v4 dialog { border-radius: var(--v4-radius); border: none; box-shadow: 0 20px 60px rgba(23, 25, 35, 0.25); }
body.theme-v4 .alerts-popup-header { background: var(--v4-bg); }
body.theme-v4 .alert-item { border-radius: var(--v4-radius-sm); }

/* ---- member header / misc ---- */
body.theme-v4 .member-avatar { background: var(--v4-ink); border-radius: var(--v4-radius-sm); }
body.theme-v4 .stat-box strong { color: var(--v4-ink); }
body.theme-v4 .payment-icon { background: var(--v4-blue-bg); color: var(--v4-blue); border-radius: 8px; }

/* ---- auth pages ---- */
body.theme-v4.auth-body { background: var(--v4-bg); }
body.theme-v4 .auth-card {
  background: var(--v4-panel);
  border-color: var(--v4-border);
  border-radius: var(--v4-radius);
  box-shadow: var(--v4-shadow);
}

@media (max-width: 900px) {
  body.theme-v4 .app-shell { padding-inline-start: 0; padding-bottom: 70px; }
  body.theme-v4 .v2-topnav {
    flex-direction: row;
    top: auto;
    bottom: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    width: auto;
    height: 64px;
    padding: 6px 8px;
    overflow-x: auto;
  }
  body.theme-v4 .v2-topnav-brand { display: none; }
  body.theme-v4 .v2-nav-items { flex-direction: row; }
}