/* ═══════════════════════════════════════════════════════════
   Material 3 Expressive — Dashboard (EasyFamily)
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Root: M3 Expressive Theme ─── */
:root {
  --bg: var(--m3-background);
  --ink: var(--m3-on-background);
  --ink-soft: var(--m3-on-surface-variant);
  --muted: var(--m3-outline);
  --panel: var(--m3-surface);
  --panel-2: color-mix(in srgb, var(--m3-primary) 6%, var(--m3-surface));
  --panel-3: color-mix(in srgb, var(--m3-primary) 12%, var(--m3-surface));
  --line: var(--m3-outline-variant);
  --line-strong: var(--m3-outline);
  --accent: var(--m3-primary);
  --accent-ink: var(--m3-on-primary-container);
  --accent-soft: var(--m3-primary-container);
  --nav-active-bg: var(--m3-secondary-container);
  --nav-active-ink: var(--m3-on-secondary-container);
  --nav-active-rail: var(--m3-primary);
  --blue: var(--m3-tertiary);
  --red: var(--m3-income);
  --green: var(--m3-expense);
  --shadow: var(--m3-elevation-2);
  --radius: var(--m3-shape-sm);
  --font-zh: var(--m3-font-display);
  --font-ui: var(--m3-font-body);
}

/* ─── Dark theme ─── */
[data-theme="dark"] {
  --bg: var(--m3-background);
  --ink: var(--m3-on-background);
  --ink-soft: var(--m3-on-surface-variant);
  --muted: var(--m3-outline);
  --panel: var(--m3-surface);
  --panel-2: color-mix(in srgb, var(--m3-primary) 10%, var(--m3-surface));
  --panel-3: color-mix(in srgb, var(--m3-primary) 18%, var(--m3-surface));
  --line: var(--m3-outline-variant);
  --line-strong: var(--m3-outline);
  --accent: var(--m3-primary);
  --accent-ink: var(--m3-on-primary-container);
  --accent-soft: var(--m3-primary-container);
  --nav-active-bg: color-mix(in srgb, var(--m3-primary) 14%, var(--m3-surface));
  --nav-active-ink: var(--m3-on-surface);
  --nav-active-rail: var(--m3-primary);
  --blue: var(--m3-chart-3);
  --red: var(--m3-income);
  --green: var(--m3-expense);
  --shadow: var(--m3-elevation-3);
}

/* ─── Body ─── */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image: 
    /* Subtle grid - slightly more visible */
    linear-gradient(rgba(128,128,128,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,128,128,0.04) 1px, transparent 1px),
    /* Noise texture overlay */
    var(--m3-noise-texture),
    /* Gradient surface */
    var(--m3-expressive-gradient-surface);
  background-size: 60px 60px, 60px 60px, 256px 256px, 100% 100%;
  color: var(--ink);
  font-family: var(--m3-font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Bottom wave decoration - more visible */
body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: 
    radial-gradient(ellipse 120% 100% at 50% 100%, 
      color-mix(in srgb, var(--m3-primary) 8%, transparent) 0%,
      transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* Dark theme: adjust background */
[data-theme="dark"] body {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    var(--m3-noise-texture),
    var(--m3-expressive-gradient-surface);
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Focus visible ring ─── */
:focus-visible {
  outline: 2px solid var(--m3-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--m3-primary);
  outline-offset: 2px;
}

/* ─── View transitions ─── */
.view {
  animation: m3-fade-in-up 0.35s var(--m3-motion-smooth);
}

.view.hidden {
  animation: none;
}

button, input, select, textarea { 
  font-family: var(--m3-font-body); 
  letter-spacing: 0;
}

/* ─── App Layout ─── */
.app {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  min-height: 100vh;
}

/* ─── Navigation Rail ─── */
nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0 12px;
  background: var(--m3-surface);
  border-right: 1px solid var(--m3-outline-variant);
  z-index: 10;
}

.brand {
  padding: 8px 0 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.brand h1 {
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--m3-shape-md);
  background: var(--m3-expressive-gradient-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--m3-primary) 40%, transparent);
}

.brand::after {
  content: 'EF';
  font-family: var(--m3-font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--m3-primary);
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.brand p {
  display: none;
}

.nav-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex-grow: 1;
}

nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 56px;
  min-height: 48px;
  padding: 6px 0 4px;
  border: none;
  border-radius: var(--m3-shape-md);
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-body);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-spring);
  position: relative;
  line-height: 1.2;
}

nav button:hover {
  background: color-mix(in srgb, var(--m3-on-surface) 6%, transparent);
}

nav button:active {
  transform: scale(0.92);
}

nav button.active {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-weight: 600;
}

nav button.active::before {
  display: none;
}

/* Navigation dot indicator */
nav button .nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth);
  margin-top: 1px;
}

nav button.active .nav-dot {
  background: var(--m3-primary);
  box-shadow: 0 0 6px color-mix(in srgb, var(--m3-primary) 50%, transparent);
}

/* Nav icon - Material Symbols */
nav button .nav-icon {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  opacity: 0.75;
  transition: opacity var(--m3-duration-sm) var(--m3-motion-smooth),
              font-variation-settings var(--m3-duration-sm) var(--m3-motion-smooth);
}

nav button.active .nav-icon {
  opacity: 1;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--m3-error);
  color: var(--m3-on-error);
  font-family: var(--m3-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.nav-badge.hidden { display: none; }

/* ─── Main Content ─── */
main {
  min-width: 0;
  padding: 28px 32px 48px;
  animation: m3-fade-in 0.3s var(--m3-motion-smooth);
}

/* ─── Header ─── */
header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.title h2 {
  margin: 0;
  font-family: var(--m3-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--m3-on-background);
  letter-spacing: -0.01em;
}

.muted {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

#status { display: none; }

/* ─── Toolbar ─── */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.toolbar input {
  width: 240px;
  min-height: 40px;
  padding: 8px 16px 8px 16px;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  font-size: 14px;
  outline: none;
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth);
}

.toolbar input:focus {
  border-color: var(--m3-primary);
}

.toolbar input::placeholder {
  color: var(--m3-outline);
}

/* ─── Input / Select / Textarea ─── */
input, select, textarea {
  min-height: 40px;
  min-width: 0;
  border: 1px solid var(--m3-outline);
  border-radius: 4px;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  padding: 8px 12px;
  outline: none;
  font-size: 14px;
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth),
              box-shadow var(--m3-duration-sm) var(--m3-motion-smooth);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--m3-primary);
  border-width: 2px;
}

/* ─── Period Panel ─── */
.period-panel {
  display: grid;
  gap: 12px;
  margin: -6px 0 24px;
}

.period-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
}

.period-tabs button {
  min-height: 32px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
  font-family: var(--m3-font-body);
}

.period-tabs button:not(:last-child) {
  border-right: 1px solid var(--m3-outline);
}

.period-tabs button.active {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-weight: 600;
}

.period-tabs span {
  display: none;
}

.period-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.period-range {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
}

.period-step {
  min-height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth);
}

.period-step:hover {
  background: var(--m3-surface-variant);
}

.date-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--m3-outline-variant);
  border-radius: 999px;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth);
  font-family: var(--m3-font-body);
}

.date-trigger:hover {
  border-color: var(--m3-on-surface);
}

.date-popover {
  position: absolute;
  z-index: 30;
  width: 292px;
  padding: 16px;
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-md);
  background: var(--m3-surface);
  box-shadow: var(--m3-elevation-3);
  display: grid;
  gap: 12px;
  animation: m3-fade-in-scale 0.2s var(--m3-motion-spring);
}

.date-popover.hidden { display: none; }

.date-picker-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.date-picker-head select {
  min-height: 36px;
  padding: 6px 10px;
  font-weight: 600;
}

.date-weekdays,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.date-weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  padding: 4px 0;
}

.date-grid button {
  min-height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--m3-on-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth);
  width: 36px;
  margin: 0 auto;
}

.date-grid button:hover {
  background: var(--m3-surface-variant);
}

.date-grid button.outside {
  color: var(--m3-outline);
}

.date-grid button.selected {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-weight: 600;
}

.more-periods {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  animation: m3-fade-in-up 0.25s var(--m3-motion-smooth);
}

.more-periods.hidden { display: none; }

.cycle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
}

.cycle-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cycle-tags button {
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--m3-duration-sm),
              background var(--m3-duration-sm) var(--m3-motion-smooth);
}

.cycle-tags button.active {
  border-color: var(--m3-primary);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-weight: 600;
}

/* ─── M3 Button variants mapped to old class names ─── */
button.primary, button.secondary, a.secondary, button.chip {
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  transition: box-shadow var(--m3-duration-md) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy);
}

button.primary {
  border: none;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  padding: 8px 24px;
}

button.primary:hover {
  box-shadow: var(--m3-elevation-2);
  background: color-mix(in srgb, var(--m3-primary) 90%, black);
}

button.primary:active {
  transform: scale(0.96);
}

button.secondary, a.secondary {
  border: 1px solid var(--m3-outline);
  background: transparent;
  color: var(--m3-primary);
  padding: 8px 20px;
}

button.secondary:hover, a.secondary:hover {
  border-color: var(--m3-primary);
  background: color-mix(in srgb, var(--m3-primary) 6%, transparent);
}

button.chip {
  border: 1px solid var(--m3-outline);
  background: transparent;
  color: var(--m3-on-surface-variant);
  padding: 6px 16px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  min-height: 32px;
}

button.chip:hover {
  border-color: var(--m3-on-surface);
}

/* ─── Grid ─── */
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.columns { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); align-items: start; }

.overview-visuals {
  min-height: 420px;
  grid-template-rows: auto auto;
  align-items: stretch;
}

.pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }

.overview-visuals .section {
  min-width: 0;
}

.overview-visuals h3 {
  margin-bottom: 12px;
}

.overview-visuals .section-head { margin-bottom: 12px; }

.overview-visuals .trend-card,
.overview-visuals .pie-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.overview-visuals .chart-wrap {
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.asset-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); align-items: start; }

/* ─── Card / Section ─── */
.card, .section {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-md);
  padding: 20px;
  transition: box-shadow var(--m3-duration-md) var(--m3-motion-smooth);
}

.section:hover {
  box-shadow: var(--m3-elevation-1);
}

h3 {
  margin: 0 0 12px;
  font-family: var(--m3-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--m3-on-surface);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h3 { margin: 0; }

/* ─── Level Switch ─── */
.level-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 32px;
  padding: 3px;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
  background: var(--m3-surface-variant);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.level-switch::before {
  display: none;
}

.level-switch button {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
}

.level-switch button.active {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-weight: 600;
}

/* ─── KPI Cards ─── */
.kpi {
  min-height: 110px;
  display: grid;
  align-content: center;
  gap: 8px;
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-md);
  padding: 20px 20px 18px;
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-smooth),
              box-shadow var(--m3-duration-md) var(--m3-motion-smooth),
              background var(--m3-duration-md) var(--m3-motion-smooth);
  position: relative;
  overflow: hidden;
}

/* KPI color accents */
.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  transition: opacity var(--m3-duration-md) var(--m3-motion-smooth);
}

#incomeKpi::before { background: var(--m3-income); }
#expenseKpi::before { background: var(--m3-expense); }

.kpi:hover::before {
  opacity: 1;
}

.kpi-action {
  cursor: pointer;
}

.kpi-action:hover {
  border-color: color-mix(in srgb, var(--m3-primary) 60%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--m3-elevation-2);
}

/* Income KPI warm tint on hover */
#incomeKpi.kpi-action:hover {
  background: color-mix(in srgb, var(--m3-income) 4%, var(--m3-surface));
  border-color: color-mix(in srgb, var(--m3-income) 40%, transparent);
}

/* Expense KPI cool tint on hover */
#expenseKpi.kpi-action:hover {
  background: color-mix(in srgb, var(--m3-expense) 4%, var(--m3-surface));
  border-color: color-mix(in srgb, var(--m3-expense) 40%, transparent);
}

.kpi .label {
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric {
  font-family: var(--m3-font-display);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.income { color: var(--m3-income); }
.expense { color: var(--m3-expense); }
.neutral-money { color: var(--m3-on-surface); }

[data-color-inverted="true"] .income { color: var(--m3-expense); }
[data-color-inverted="true"] .expense { color: var(--m3-income); }

/* ─── Settings ─── */
.settings-list {
  display: grid;
  gap: 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  border-bottom: 1px solid var(--m3-outline-variant);
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
}

.settings-row span {
  display: grid;
  gap: 4px;
}

.settings-row strong {
  font-family: var(--m3-font-display);
  font-size: 15px;
  font-weight: 600;
}

.settings-row em {
  font-family: var(--m3-font-body);
  color: var(--m3-on-surface-variant);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

/* M3 Switch */
.settings-row input[type="checkbox"] {
  width: 52px;
  min-height: 32px;
  height: 32px;
  appearance: none;
  padding: 0;
  border-radius: 16px;
  background: var(--m3-surface-variant);
  border: 2px solid var(--m3-outline);
  position: relative;
  cursor: pointer;
  transition: background var(--m3-duration-md) var(--m3-motion-smooth),
              border-color var(--m3-duration-md) var(--m3-motion-smooth);
}

.settings-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--m3-on-surface);
  top: 2px;
  left: 2px;
  transition: transform var(--m3-duration-md) var(--m3-motion-emphatic),
              background var(--m3-duration-md) var(--m3-motion-smooth);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.settings-row input[type="checkbox"]:checked {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
}

.settings-row input[type="checkbox"]:checked::after {
  transform: translateX(20px);
  background: var(--m3-on-primary);
}

.settings-block {
  max-width: 980px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--m3-outline-variant);
}

.settings-block:first-child {
  margin-top: 0;
}

/* ─── Category Rules ─── */
.category-rule-form {
  display: grid;
  grid-template-columns: 120px minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.category-rule-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
}

.category-rule-list {
  display: grid;
  gap: 8px;
}

.category-rule-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-sm);
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth);
}

.category-rule-row:hover {
  border-color: var(--m3-outline);
  background: color-mix(in srgb, var(--m3-secondary-container) 20%, transparent);
}

.category-rule-main {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}

.category-rule-main strong {
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  font-size: 12px;
  width: 54px;
}

/* ─── Category Rule icons ─── */
.category-rule-name {
  max-width: 220px;
  overflow-wrap: anywhere;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-rule-name .material-symbols-outlined {
  font-size: 22px;
  color: var(--m3-primary);
  opacity: 0.85;
}

.category-inline-input,
.keyword-inline-input {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy);
}

.icon-button:hover {
  background: var(--m3-surface-variant);
  color: var(--m3-primary);
}

.icon-button:active {
  transform: scale(0.88);
}

.icon-button.danger:hover {
  color: var(--m3-error);
}

.keyword-rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.text-delete {
  border: none;
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--m3-shape-xs);
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
}

.text-delete:hover {
  background: var(--m3-error-container);
  color: var(--m3-on-error-container);
}

.category-rule-row .icon-button,
.category-rule-row .text-delete,
.keyword-rule-chip button {
  opacity: 0;
  transition: opacity var(--m3-duration-sm) ease;
}

.category-rule-row:hover .icon-button,
.category-rule-row:hover .text-delete,
.category-rule-row:hover .keyword-rule-chip button {
  opacity: 1;
}

.keyword-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  max-width: 100%;
  padding: 4px 8px 4px 14px;
  border: 1px solid var(--m3-outline-variant);
  border-radius: 999px;
  background: var(--m3-surface-variant);
  color: var(--m3-on-surface);
  font-size: 13px;
  font-weight: 500;
}

.keyword-rule-chip button {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth);
}

.keyword-rule-chip button:hover {
  background: var(--m3-surface);
}

.hidden { display: none !important; }

/* ─── Entry Controls ─── */
.entry-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.entry-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--m3-on-surface-variant);
}

.entry-pager label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.entry-pager select {
  min-height: 36px;
  padding: 6px 10px;
}

.entry-pager button {
  min-height: 36px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--m3-shape-xs);
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth);
}

.entry-pager button:hover {
  background: var(--m3-surface-variant);
  color: var(--m3-on-surface);
}

.entry-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.entry-head-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.entry-head-label,
.entry-head-value {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  font-size: 13px;
  line-height: 18px;
}

.entry-head-filter:not(.static) {
  cursor: pointer;
}

.entry-head-filter.is-active .entry-head-label {
  color: var(--m3-on-surface);
}

.entry-head-arrow {
  display: inline-block;
  margin-left: 2px;
  color: var(--m3-on-surface-variant);
  font-size: 11px;
}

.entry-head-value {
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m3-on-surface);
}

.entry-head-filter > select {
  position: absolute;
  inset: -4px 0 -4px 0;
  width: 100%;
  min-width: 100%;
  cursor: pointer;
  opacity: 0;
}

.entry-time-head {
  padding-right: 86px;
}

.entry-time-head .entry-head-value {
  max-width: 82px;
}

.entry-time-selects {
  position: absolute;
  inset: -4px 0 -4px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(26px, 1fr));
  gap: 0;
  opacity: 0;
}

.entry-time-selects select {
  min-width: 0;
  cursor: pointer;
}

.entry-time-selects select:disabled {
  cursor: not-allowed;
}

.entry-table .entry-actions-head {
  width: 96px;
}

.entry-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.entry-table th:nth-child(1), .entry-table td:nth-child(1) { width: 15%; }
.entry-table th:nth-child(2), .entry-table td:nth-child(2) { width: 7%; }
.entry-table th:nth-child(3), .entry-table td:nth-child(3) { width: 12%; }
.entry-table th:nth-child(4), .entry-table td:nth-child(4) { width: 10%; }
.entry-table th:nth-child(5), .entry-table td:nth-child(5) { width: 12%; }
.entry-table th:nth-child(6), .entry-table td:nth-child(6) { width: 15%; }
.entry-table th:nth-child(7), .entry-table td:nth-child(7) { width: auto; }
.entry-table th:nth-child(8), .entry-table td:nth-child(8) { width: 96px; }

.entry-table th,
.entry-table td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.entry-row .entry-cell-text {
  display: -webkit-box;
  max-height: 2.7em;
  overflow: hidden;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.entry-th {
  display: grid;
  gap: 5px;
}

.entry-th select {
  min-height: 32px;
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
}

.entry-row .entry-actions {
  white-space: nowrap;
  text-align: right;
}

.entry-row .entry-actions button {
  border: none;
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  padding: 4px 8px;
  border-radius: var(--m3-shape-xs);
  transition: opacity var(--m3-duration-sm) ease,
              background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
}

.entry-row:hover .entry-actions button {
  opacity: 1;
}

.entry-row .entry-actions button:hover {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}

.entry-edit-row td {
  background: color-mix(in srgb, var(--m3-secondary-container) 30%, transparent);
  padding: 16px;
}

.entry-edit-panel {
  display: grid;
  grid-template-columns: 166px 76px 136px 92px 118px 118px minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.entry-edit-panel label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
}

.entry-edit-panel label.hidden {
  display: none;
}

.entry-edit-panel input,
.entry-edit-panel select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

.entry-edit-note {
  grid-column: auto;
}

.entry-edit-amount input {
  font-family: var(--m3-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.entry-edit-actions {
  display: flex;
  gap: 8px;
  align-self: end;
  justify-content: flex-end;
  justify-self: end;
  padding-left: 4px;
  white-space: nowrap;
}

.entry-edit-actions button {
  min-height: 34px;
  padding: 6px 14px;
}

/* ─── Toast ─── */
.delete-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 48px;
  padding: 12px 16px 12px 20px;
  border: none;
  border-radius: 4px;
  background: var(--m3-on-surface);
  color: var(--m3-surface);
  box-shadow: var(--m3-elevation-3);
  font-size: 14px;
  font-weight: 500;
  animation: m3-fade-in-up 0.3s var(--m3-motion-emphatic);
}

.delete-toast button {
  min-height: 32px;
  border: none;
  background: transparent;
  color: var(--m3-primary-container);
  cursor: pointer;
  padding: 4px 8px;
  font-weight: 600;
  font-family: var(--m3-font-body);
  font-size: 14px;
}

.entry-empty {
  padding: 32px 16px;
  color: var(--m3-on-surface-variant);
  text-align: center;
  font-size: 14px;
}

/* ─── Tables ─── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--m3-outline-variant);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tr:hover td {
  background: color-mix(in srgb, var(--m3-secondary-container) 16%, transparent);
}

td.money-cell {
  font-family: var(--m3-font-display);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.debt-money {
  color: var(--m3-on-surface);
}

/* ─── Canvas ─── */
canvas {
  width: 100%;
  display: block;
  border-radius: var(--m3-shape-xs);
}

.trend-card canvas {
  height: auto;
}

.pie-card canvas {
  height: auto;
}

.chart-wrap {
  position: relative;
}

.chart-wrap canvas {
  height: auto;
}

.chart-tip {
  position: absolute;
  min-width: 140px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--m3-shape-sm);
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  box-shadow: var(--m3-elevation-3);
  font-family: var(--m3-font-body);
  font-size: 13px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  display: none;
  z-index: 5;
  animation: m3-fade-in 0.15s ease;
}

.chart-tip strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

/* ─── Legend ─── */
.legend {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
}

.legend-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m3-on-surface-variant);
}

.legend-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--m3-font-display);
}

/* ─── Quick Form ─── */
.quick-form {
  margin-bottom: 20px;
  animation: m3-fade-in-up 0.25s var(--m3-motion-smooth);
}

.form {
  display: grid;
  gap: 12px;
}

.quick-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.quick-fields {
  display: grid;
  grid-template-columns: 94px 150px 120px 178px 138px;
  gap: 8px;
  align-items: end;
  justify-content: start;
}

.quick-main-row.is-transfer .quick-fields {
  grid-template-columns: 94px 120px 178px 138px 138px;
}

.quick-actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: end;
  justify-content: end;
}

.quick-more-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  align-items: end;
  padding-top: 4px;
  min-width: 0;
}

.quick-main-row .hidden { display: none; }
.quick-more-fields.hidden { display: none; }

.form label,
.quick-main-row label,
.quick-fields label,
.quick-more-fields label {
  min-width: 0;
  display: grid;
  gap: 4px;
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  white-space: normal;
}

.form label input,
.form label select {
  min-width: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  min-height: 36px;
  padding: 6px 10px;
}

.form .form-check {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  color: var(--m3-on-surface-variant);
}

.form .form-check input {
  width: auto;
  min-height: auto;
  accent-color: var(--m3-primary);
}

.help-tip {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--m3-outline);
  border-radius: 50%;
  color: var(--m3-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
}

.help-tip-content {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  padding: 12px;
  border: none;
  border-radius: var(--m3-shape-sm);
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  box-shadow: var(--m3-elevation-3);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--m3-duration-sm) ease,
              transform var(--m3-duration-sm) ease;
  z-index: 40;
}

.help-tip:hover .help-tip-content,
.help-tip:focus .help-tip-content {
  opacity: 1;
  transform: translateY(0);
}

.form button { align-self: end; }
.form button.primary { white-space: nowrap; }

.link-button {
  min-height: 36px;
  border: none;
  background: transparent;
  color: var(--m3-primary);
  padding: 0 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  font-family: var(--m3-font-body);
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth);
  border-radius: var(--m3-shape-xs);
}

.link-button:hover {
  background: color-mix(in srgb, var(--m3-primary) 10%, transparent);
}

/* ─── Pending Layout ─── */
.pending-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
}

.side-list { display: grid; gap: 8px; }

.side-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--m3-outline-variant);
  font-size: 14px;
}

.pending-stack {
  position: relative;
  min-height: 980px;
  perspective: 1200px;
}

.pending-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 22px;
  width: min(100%, 1120px);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-md);
  background: var(--m3-surface);
  padding: 24px;
}

.pending-card {
  position: absolute;
  inset: 0 auto auto 0;
  transform: translate3d(calc(var(--i) * 18px), calc(var(--i) * 20px), calc(var(--i) * -60px)) rotateX(calc(var(--i) * -2deg)) scale(calc(1 - var(--i) * .035));
  opacity: calc(1 - var(--i) * .14);
  z-index: calc(20 - var(--i));
  pointer-events: none;
  transition: transform var(--m3-duration-md) var(--m3-motion-emphatic),
              opacity var(--m3-duration-md) var(--m3-motion-smooth),
              box-shadow var(--m3-duration-md) var(--m3-motion-smooth);
}

.pending-card.is-front {
  pointer-events: auto;
  box-shadow: var(--m3-elevation-3);
}

.pending-card.is-leaving {
  transform: translate3d(70px, -24px, 0) rotateZ(4deg) scale(0.96);
  opacity: 0;
}

.pending-card:not(.is-front) input,
.pending-card:not(.is-front) textarea,
.pending-card:not(.is-front) select,
.pending-card:not(.is-front) button {
  visibility: hidden;
}

.pending-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-size: 12px;
  font-weight: 600;
}

.amount {
  font-family: var(--m3-font-display);
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--m3-on-surface);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  font-size: 16px;
}

.detail-grid span {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
}

.suggestions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
}

.suggestions.compact {
  display: flex;
}

.suggestions .chip {
  width: auto;
  min-height: 36px;
  white-space: normal;
  line-height: 1.2;
}

button.chip.all-categories {
  border-color: var(--m3-primary);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-weight: 600;
}

.category-picker {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-sm);
  background: var(--m3-surface-variant);
  max-width: 100%;
  overflow: hidden;
}

.category-picker.hidden { display: none; }

.category-group + .category-group { margin-top: 14px; }
.category-group-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
}

.category-group-options {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
}

.confirm-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.pending-object-field {
  display: grid;
  gap: 4px;
}

.pending-object-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
}

.pending-object-field input,
.pending-object-field textarea {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
}

.pending-object-field textarea {
  resize: vertical;
  line-height: 1.45;
}

/* ─── Account Table ─── */
.account-table th:nth-child(1), .account-table td:nth-child(1) { width: auto; }
.account-table th:nth-child(2), .account-table td:nth-child(2) { width: 150px; }
.account-table th:nth-child(3), .account-table td:nth-child(3) { width: 64px; }
.account-table th:nth-child(4), .account-table td:nth-child(4) { width: 54px; }

.account-name-cell,
.account-balance-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  white-space: nowrap;
}

.account-name-cell {
  min-width: 0;
}

.account-name-cell span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-name-input,
.account-balance-input {
  width: 112px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
}

.account-name-input {
  width: min(180px, 100%);
}

.account-balance-input {
  text-align: right;
}

.account-actions {
  text-align: right;
  white-space: nowrap;
}

.account-table .icon-button,
.account-table .text-delete {
  opacity: 0;
  transition: opacity var(--m3-duration-sm) ease;
}

.account-table tr:hover .icon-button,
.account-table tr:hover .text-delete {
  opacity: 1;
}

.account-add-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 120px auto;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

/* ─── Debt Table ─── */
.debt-table th:nth-child(1), .debt-table td:nth-child(1) { width: auto; }
.debt-table th:nth-child(2), .debt-table td:nth-child(2),
.debt-table th:nth-child(3), .debt-table td:nth-child(3) { width: 88px; }
.debt-table th:nth-child(4), .debt-table td:nth-child(4) { width: 54px; }

.debt-actions {
  text-align: right;
  white-space: nowrap;
}

/* ─── Nav Logout ─── */
.nav-logout {
  margin-top: auto;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--m3-outline-variant);
  border-radius: 999px;
  color: var(--m3-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--m3-font-body);
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
  width: 60px;
  text-align: center;
}

.nav-logout:hover {
  border-color: var(--m3-on-surface);
  color: var(--m3-on-surface);
}

/* ─── Responsive ─── */
@media (max-width: 1180px) {
  .overview-visuals { min-height: auto; }
}

/* ═══════════════════════════════════════════════════════════
   Creator Signature
   ═══════════════════════════════════════════════════════════ */

.creator-signature {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 4px;
  margin-top: 24px;
  border-top: 1px solid var(--m3-outline-variant);
  opacity: 0.5;
  transition: opacity var(--m3-duration-sm) ease;
}

.creator-signature:hover {
  opacity: 0.8;
}

.creator-signature-text {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  font-weight: 500;
  color: var(--m3-on-surface-variant);
  letter-spacing: 0.02em;
  position: relative;
}

.creator-signature-text::before {
  content: 'Created by ';
  font-family: var(--m3-font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--m3-outline);
  margin-right: 2px;
}

/* ═══════════════════════════════════════════════════════════
   Skeleton Loading (shimmer placeholders)
   ═══════════════════════════════════════════════════════════ */

.skeleton-grid {
  display: grid;
  gap: 14px;
  padding: 4px 0;
}

.skeleton-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: 12px;
  align-items: center;
}

.skeleton-block {
  height: 16px;
  border-radius: var(--m3-shape-xs);
  background: linear-gradient(90deg,
    var(--m3-surface-variant) 25%,
    color-mix(in srgb, var(--m3-surface-variant) 60%, var(--m3-surface)) 50%,
    var(--m3-surface-variant) 75%
  );
  background-size: 200% 100%;
  animation: m3-shimmer 1.5s ease-in-out infinite;
}

.skeleton-block.wide { grid-column: 1 / -1; }
.skeleton-block.medium { width: 60%; }
.skeleton-block.short { width: 40%; }
.skeleton-block.tall { height: 24px; }
.skeleton-block.card { height: 110px; border-radius: var(--m3-shape-md); }

/* ═══════════════════════════════════════════════════════════
   Empty State
   ═══════════════════════════════════════════════════════════ */

.empty-state {
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--m3-secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  opacity: 0.7;
}

.empty-state-title {
  font-family: var(--m3-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--m3-on-surface);
  margin: 0;
}

.empty-state-desc {
  font-size: 14px;
  color: var(--m3-on-surface-variant);
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
}

.empty-state .primary {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   Loading indicator
   ═══════════════════════════════════════════════════════════ */

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--m3-on-surface-variant);
}

.loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m3-primary);
  animation: m3-loading-pulse 1.2s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes m3-loading-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   Chart.js overrides (M3 themed)
   ═══════════════════════════════════════════════════════════ */

.chart-container {
  position: relative;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   Progress bar
   ═══════════════════════════════════════════════════════════ */

.progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--m3-surface-variant);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}

.progress-bar.active {
  display: block;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--m3-primary);
  animation: m3-progress 2s ease-in-out infinite;
  width: 30%;
}

@keyframes m3-progress {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
  100% { transform: translateX(400%); }
}

/* ═══════════════════════════════════════════════════════════
   Entry empty state
   ═══════════════════════════════════════════════════════════ */

.entry-empty {
  padding: 48px 16px;
  color: var(--m3-on-surface-variant);
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   Animations for quick form appearance
   ═══════════════════════════════════════════════════════════ */

.quick-form:not(.hidden) {
  animation: m3-slide-in-down 0.3s var(--m3-motion-emphatic);
}

@keyframes m3-slide-in-down {
  from { opacity: 0; transform: translateY(-12px) scaleY(0.95); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════
   Toast / Snackbar (M3 style - centered bottom)
   ═══════════════════════════════════════════════════════════ */

.delete-toast {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(480px, calc(100vw - 32px));
  min-height: 48px;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  background: var(--m3-on-surface);
  color: var(--m3-surface);
  box-shadow: var(--m3-elevation-3);
  font-size: 14px;
  font-weight: 500;
  animation: m3-fade-in-up 0.3s var(--m3-motion-emphatic);
}

.delete-toast button {
  min-height: 32px;
  border: none;
  background: transparent;
  color: var(--m3-primary-container);
  cursor: pointer;
  padding: 4px 8px;
  font-weight: 600;
  font-family: var(--m3-font-body);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   Mobile Responsive — Navigation at Bottom
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 940px) {
  /* ── Layout ── */
  .app {
    grid-template-columns: 1fr;
    padding-bottom: 64px; /* space for bottom nav */
  }

  /* ── Bottom Navigation Bar ── */
  nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: 64px;
    min-height: 64px;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--m3-outline-variant);
    background: color-mix(in srgb, var(--m3-surface) 95%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 50;
  }

  .brand { display: none; }

  .nav-group {
    flex-direction: row;
    width: 100%;
    gap: 0;
    flex-grow: 1;
  }

  nav button {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: auto;
    min-height: 0;
    height: 100%;
    padding: 4px 2px;
    border-radius: 0;
    font-size: 10px;
    line-height: 1.1;
    position: relative;
  }

  nav button .nav-icon {
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22;
  }

  nav button.active .nav-icon {
    opacity: 1;
  }

  nav button .nav-dot {
    display: none;
  }

  /* Active indicator: top bar instead of left */
  nav button.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--m3-primary);
  }

  .nav-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    margin-right: -22px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 3px;
  }

  /* Logout button: compact icon at end of nav */
  .nav-logout {
    margin-top: 0;
    width: 44px;
    min-width: 44px;
    height: 100%;
    border: none;
    border-left: 1px solid var(--m3-outline-variant);
    border-radius: 0;
    font-size: 10px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    color: var(--m3-on-surface-variant);
    cursor: pointer;
    font-family: var(--m3-font-body);
    font-weight: 500;
    transition: background var(--m3-duration-sm) ease, color var(--m3-duration-sm) ease;
  }

  .nav-logout:hover {
    background: color-mix(in srgb, var(--m3-on-surface) 6%, transparent);
    color: var(--m3-on-surface);
  }

  /* ── Main Content ── */
  main {
    padding: 16px 12px 20px;
  }

  main h2 { font-size: 24px; }

  header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .title h2 { font-size: 24px; }

  .toolbar {
    width: 100%;
    gap: 6px;
  }

  .toolbar input {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* prevent iOS zoom */
    padding: 8px 14px;
  }

  .toolbar button.primary,
  .toolbar a.secondary {
    flex: 1;
    min-height: 44px;
    font-size: 14px;
    padding: 8px 12px;
  }

  /* ── Period Panel ── */
  .period-panel {
    margin: -4px 0 16px;
    gap: 8px;
  }

  .period-tabs {
    width: 100%;
  }

  .period-tabs button {
    flex: 1;
    min-height: 36px;
    font-size: 12px;
    padding: 0 8px;
  }

  .period-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .period-range {
    justify-content: center;
  }

  .date-trigger {
    min-height: 40px;
    font-size: 13px;
  }

  .more-periods {
    justify-content: center;
  }

  .date-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 32px);
    max-width: 340px;
    z-index: 60;
  }

  /* ── KPI Cards: 2x2 ── */
  .kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .kpi {
    min-height: 80px;
    padding: 14px 12px;
  }

  .kpi .label {
    font-size: 11px;
  }

  .metric {
    font-size: 24px;
  }

  /* ── Grids collapse ── */
  .columns,
  .pie-grid,
  .asset-grid {
    grid-template-columns: 1fr;
  }

  .overview-visuals {
    min-height: auto;
  }

  .pie-grid {
    gap: 12px;
  }

  /* ── Quick Form ── */
  .quick-main-row,
  .quick-fields,
  .quick-actions,
  .quick-more-fields {
    grid-template-columns: 1fr;
  }

  .quick-main-row {
    gap: 8px;
  }

  .quick-fields label,
  .quick-more-fields label {
    width: 100%;
  }

  .quick-fields select,
  .quick-fields input,
  .quick-more-fields input {
    min-height: 44px;
    font-size: 16px;
  }

  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .quick-actions button {
    min-height: 44px;
  }

  .form .form-check {
    min-height: 44px;
  }

  /* ── Entry Table: horizontal scroll ── */
  #entries.section {
    padding: 0;
    overflow: hidden;
  }

  .entry-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .entry-table {
    min-width: 700px;
  }

  .entry-table th,
  .entry-table td {
    white-space: nowrap;
  }

  .entry-edit-panel {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .entry-edit-note { grid-column: 1 / -1; }

  .entry-edit-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .entry-edit-actions button {
    flex: 1;
    min-height: 44px;
  }

  .entry-head-filter {
    font-size: 12px;
  }

  .entry-row .entry-actions button {
    opacity: 1;
    padding: 6px 8px;
    min-height: 36px;
  }

  .entry-controls {
    justify-content: stretch;
  }

  .entry-pager {
    width: 100%;
    justify-content: space-between;
  }

  /* ── Pending ── */
  .pending-layout,
  .pending-row {
    grid-template-columns: 1fr;
  }

  .pending-stack {
    min-height: 500px;
  }

  .pending-card {
    transform: translate3d(0, calc(var(--i) * 12px), 0) scale(calc(1 - var(--i) * .02));
    padding: 16px;
  }

  .pending-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .amount {
    font-size: 32px;
  }

  .detail-grid {
    font-size: 14px;
  }

  .confirm-line {
    grid-template-columns: 1fr;
  }

  .confirm-line button {
    min-height: 44px;
  }

  .suggestions .chip {
    min-height: 36px;
    font-size: 12px;
  }

  .category-picker {
    padding: 10px;
  }

  /* ── Accounts ── */
  .account-add-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .account-add-form input,
  .account-add-form button {
    min-height: 44px;
  }

  .account-name-input {
    width: 100%;
    min-height: 40px;
  }

  .account-table .icon-button,
  .account-table .text-delete {
    opacity: 1;
  }

  .account-actions button {
    min-height: 36px;
  }

  /* ── Settings ── */
  .settings-row {
    min-height: 56px;
    padding: 8px 0;
  }

  .settings-row strong {
    font-size: 14px;
  }

  .category-rule-form {
    grid-template-columns: 1fr;
  }

  .category-rule-form label,
  .category-rule-form button {
    width: 100%;
  }

  .category-rule-form button {
    min-height: 44px;
  }

  .category-rule-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .category-rule-main {
    flex-wrap: wrap;
  }

  .category-rule-name {
    max-width: none;
  }

  .category-rule-row .icon-button,
  .category-rule-row .text-delete {
    opacity: 1;
  }

  .text-delete {
    justify-self: start;
    padding-left: 0;
  }

  .keyword-rule-chip {
    min-height: 36px;
  }

  /* ── Toast moves up above nav ── */
  .delete-toast {
    bottom: 80px;
    max-width: calc(100vw - 32px);
    font-size: 13px;
    padding: 10px 16px;
  }

  /* ── Signature ── */
  .creator-signature {
    margin-top: 16px;
    padding: 12px 0 4px;
  }

  .creator-signature-text {
    font-size: 15px;
  }

  /* ── Charts ── */
  canvas {
    max-height: 200px;
  }

  .pie-card canvas {
    max-height: 280px;
  }

  .trend-card canvas {
    max-height: 160px;
  }

  .chart-tip {
    display: none !important; /* too small to hover on mobile */
  }

  .legend {
    font-size: 12px;
  }

  /* ── Level switch ── */
  .level-switch button {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* ── Loading indicator ── */
  .progress-bar {
    top: auto;
    bottom: 64px;
  }
}