/* ──────────────────────────────────────────────────────────────
   1. GLOBAL TOKENS (DUAL THEME ENGINE)
   ────────────────────────────────────────────────────────────── */
:root {
  /* ☁️ LIGHT MODE (CYBER-CLEAN) */
  --bg-app: #f8fafc;
  /* Ghost White */
  --bg-card: #ffffff;
  /* Pure White */
  --bg-card-hover: #ffffff;

  --text-main: #0f172a;
  /* Slate Black */
  --text-muted: #64748b;
  /* Muted Slate */

  --border: rgba(26, 26, 26, 0.1);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --glass-blur: blur(12px);

  /* Cyber Accents */
  --primary: #16a34a;
  /* Vibrant Green */
  --primary-glow: rgba(22, 163, 74, 0.2);
  --accent: #bfff00;
  /* Electric Lime */

  --danger: #e11d48;
  --warning: #d97706;
  --info: #0284c7;

  /* Popovers */
  --popover-bg: #ffffff;
  --popover-border: rgba(26, 26, 26, 0.1);
  --popover-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(26, 26, 26, 0.05);
  --nav-hover: #f1f5f9;

  /* Fonts */
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: 'Outfit', 'SF Mono', 'Monaco', monospace;

  /* CYBER-FINANCE VARIABLES (Dark Default) */
  --glass-surface: rgba(11, 15, 20, 0.85);
  --header-text: #98A2B3;
  --dropdown-bg: rgba(11, 15, 20, 0.95);
}

[data-theme="light"] {
  --bg-app: #f1f5f9;
  --bg-card: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --primary: #10b981;
  --primary-glow: rgba(16, 185, 129, 0.2);
  --accent: #4910b9;
  --accent-glow: rgba(73, 16, 185, 0.2);
  --glass-surface: rgba(255, 255, 255, 0.8);
  --header-text: #1e293b;
  --dropdown-bg: #ffffff;
  --font-data: 'Outfit', 'Inter', sans-serif;
}

[data-theme="light"] .semantic-tokens {
  --surface-low: #ffffff;
  --surface-lowest: #fdfdfd;
  --surface-high: #f8fafc;
  --surface-highest: #f1f5f9;
  --text-dim: #94a3b8;
}

[data-theme="dark"] {
  /* 🌑 NEON OBSIDIAN (STITCH NEON SAAS) */
  --bg-app: #19120f;
  /* Deep Earth Charcoal */
  --bg-card: #261e1b;
  /* Surface Container */
  --bg-card-hover: #312825;
  /* Surface Container High */
  
  --text-main: #f0dfda;
  /* Warm Ghost White */
  --text-muted: #c5c9ac;
  /* Muted Sage */

  --border: rgba(212, 255, 0, 0.15);
  /* Neon Ghost Border */
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* Cyber Accents */
  --primary: #D4FF00;
  /* Electric Lime */
  --primary-container: #caf300;
  --primary-glow: rgba(212, 255, 0, 0.2);
  --accent: #D4FF00;

  --danger: #ffb4ab;
  --warning: #fbbf24;
  --info: #d4bbff;

  /* Popovers & Glass */
  --popover-bg: rgba(38, 30, 27, 0.8);
  --popover-border: rgba(212, 255, 0, 0.2);
  --popover-shadow: 0 24px 48px rgba(0, 0, 0, 0.8);
  --glass-blur: blur(20px);

  /* Sidebar */
  --sidebar-bg: #140c0a;
  /* Surface Container Lowest */
  --sidebar-border: rgba(255, 255, 255, 0.03);
  --nav-hover: rgba(212, 255, 0, 0.05);

  /* Semantic UI Tokens */
  --surface-low: #221a17;
  --surface-lowest: #140c0a;
  --surface-high: #312825;
  --surface-highest: #3d3330;
  --text-dim: rgba(240, 223, 218, 0.6);
  --surface-container-low: #221a17;
  --surface-container-lowest: #140c0a;
  --surface-container-high: #312825;
  --surface-container-highest: #3d3330;
}

[data-theme="light"] {
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --on-surface: #191c1e;
  --on-surface-variant: #3c4a42;
}

/* MAPPING VARIABLES */
:root {
  --bg: var(--bg-app);
  --surface: var(--bg-card);
  --surface-hover: var(--bg-card-hover);
  --text: var(--text-main);
  --muted: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────
   2. BASE LAYOUT & TYPOGRAPHY
   ────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-app);
  color: var(--text-main);
  margin: 0;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* App Container & Main Content Layout */
.app-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
  /* So that absolute overlays orient correctly */
}

.content {
  /* Let Tailwind Flex handle layout in base.html */
  /* margin-left: 280px; */
  /* width: calc(100% - 280px); */
  box-sizing: border-box;
  /* Include padding within the width */
  padding: 32px 40px;
  /* 40px horizontal breathing room on each side */
  min-height: 100vh;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* sidebar-collapsed content handling removed as it is now handled by Tailwind */


/* ──────────────────────────────────────────────────────────────
   3. SIDEBAR (Premium Look)
   ────────────────────────────────────────────────────────────── */
.sidebar {
  width: 280px;
  background-color: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: 24px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  overflow: hidden;
}

body.sidebar-collapsed .sidebar {
  width: 72px;
  padding: 24px 12px;
}

/* Light Mode Overrides for Sidebar */
[data-theme="light"] .sidebar {
  background: #ffffff;
  /* Override gradient with solid white */
  backdrop-filter: none;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  /* Subtle gray border instead of green */
}

/* Sidebar Header */
.sidebar .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  padding: 30px 20px;
  margin-bottom: 20px;
  transition: padding 0.3s ease;
}

body.sidebar-collapsed .sidebar .brand {
  padding: 12px 0;
  margin-bottom: 8px;
  overflow: hidden;
}

.sidebar .logo {
  overflow: hidden;
}

.sidebar .logo img {
  height: 160px;
  /* Doubled from 80px */
  width: auto;
  max-width: 240px;
  /* Prevent overflow */
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.sidebar-collapsed .sidebar .logo img {
  height: 40px;
  max-width: 48px;
  object-fit: contain;
  object-position: center;
}

.sidebar .logo img:hover {
  transform: scale(1.1) rotate(-5deg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 32px;
}

/* ── Sidebar Toggle Button ─────────────────────────── */
.sidebar-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
  padding: 0;
}

.sidebar-toggle:hover {
  background: var(--primary);
  color: #0f172a;
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
  transform: scale(1.1);
}

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

body.sidebar-collapsed .sidebar-toggle {
  right: 50%;
  transform: translateX(50%);
  top: 12px;
}

body.sidebar-collapsed .sidebar-toggle:hover {
  transform: translateX(50%) scale(1.1);
}

body.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

[data-theme="light"] .sidebar-toggle {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .sidebar-toggle:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.brand-text strong {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Bill Item */
.bill-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.bill-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

/* Calendar Date Box */
.bill-date-box {
  width: 50px;
  height: 50px;
  background: white;
  /* Body is white */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Clip children */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.bill-month {
  background: var(--primary);
  /* Lime Header */
  color: black;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 0;

  /* Prevent horizontal scroll on mobile */
  width: 100%;
}

.bill-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bill-day {
  color: black;
  /* Contrast against white body */
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  line-height: 1;
}

.bill-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.nav-item span {
  opacity: 1;
  transition: opacity 0.2s ease 0.1s;
}

body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 12px;
}

body.sidebar-collapsed .nav-item span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.nav-item:hover {
  background-color: var(--nav-hover);
  color: var(--text-main);
}

.nav-item.active {
  background-color: transparent;
  /* Removed block background */
  color: var(--text-main);
  font-weight: 600;
}

/* THE PULSE (Thin Vertical Line) */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 3px;
  background-color: var(--primary);
  /* Theme Aware Accent */
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--primary-glow);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Tooltip on collapsed sidebar */
body.sidebar-collapsed .nav-item {
  position: relative;
}

body.sidebar-collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--popover-bg);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--popover-shadow);
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

body.sidebar-collapsed .nav-item:hover::after {
  opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto;
  position: relative;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /* Subtle divider */
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.2s ease;
}

[data-theme="light"] .sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.05);
}

/* Hide footer details when collapsed */
body.sidebar-collapsed .sidebar-footer .user-menu-pop,
body.sidebar-collapsed .sidebar-footer .user-info,
body.sidebar-collapsed .sidebar-footer .user-chev,
body.sidebar-collapsed .sidebar-footer .sidebar-meta {
  display: none;
}

body.sidebar-collapsed .sidebar-footer .user-btn {
  justify-content: center;
  padding: 8px;
}

body.sidebar-collapsed .sidebar-footer .user-avatar-container {
  margin: 0 auto;
}

.sidebar-meta {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heart-beat {
  display: inline-block;
  color: #f43f5e;
  animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* Push badge to right */
  padding: 12px 16px;
  color: var(--text-main);
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.15s;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.menu-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  /* moved gap here */
}

.menu-item span {
  transform: translateY(1px);
  /* Optical centering for text */
}

/* User Menu at Bottom */
.user-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-main);
  gap: 10px;
}

.user-btn:hover {
  background-color: var(--nav-hover);
}

.user-avatar-container {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--info));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-size: 14px;
}

.user-chev {
  width: 20px;
  height: 20px;
  margin-left: auto;
  /* Push to right edge */
  opacity: 0.7;
}


.user-menu-pop {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  /* Precise spacing above button */
  left: 0;
  right: 0;
  background: var(--popover-bg);
  border: 1px solid var(--popover-border);
  border-radius: 16px;
  /* Match the larger radius from reference */
  padding: 8px;
  /* Slightly more breathing room inside than 4px */
  box-shadow: var(--popover-shadow);
  z-index: 100;
  min-width: auto;
  /* Allow it to shrink to container */
}

.user-menu-pop.show {
  display: block;
  animation: popUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-main);
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.15s;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.menu-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8px;
  color: var(--text-muted);
}

.menu-item:hover {
  background-color: var(--nav-hover);
  color: var(--primary);
}

.menu-item:hover .menu-icon {
  color: var(--primary);
}



.menu-item:hover {
  background-color: var(--nav-hover);
}

/* ──────────────────────────────────────────────────────────
   3. TYPOGRAPHY & UTILS
   ────────────────────────────────────────────────────────── */
/* body styles consolidated in Section 2 (Base Layout) above */

/* ──────────────────────────────────────────────────────────
   TRANSACTION OVERHAUL (Cyber-Finance)
   ────────────────────────────────────────────────────────── */

/* 1. Floating Row Architecture (High Density & Smoky Glass) */
.transaction-grid-header {
  display: grid;
  grid-template-columns: 140px 2fr 1.5fr 1fr 1.2fr;
  gap: 16px;
  padding: 12px 16px;
  /* Removed border-bottom to blend */
  position: sticky;
  top: 0;
  /* Blend with dash-card: darker gradient or same glass */
  background: rgba(18, 24, 33, 0.95);
  /* Nearly opaque match for dark mode */
  backdrop-filter: blur(12px);
  z-index: 10;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px 12px 0 0;
  /* Rounded top matches card */
}

/* Light Mode Header Force Override */
[data-theme="light"] .transaction-grid-header {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .th-sort-link {
  color: #475569 !important;
  /* Slate-600 */
  font-weight: 700 !important;
}

[data-theme="light"] .th-sort-link:hover {
  color: var(--primary) !important;
}

/* Header Text (Space Mono) */
.th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Text Left/Center, Filter Right */
  position: relative;
  width: 100%;
  padding: 0 4px;
  /* Slight padding */
}

.th-sort-link {
  color: var(--header-text);
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  /* Increased from 11px */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  /* Slightly bolder */
  transition: color 0.2s;
  display: flex;
  /* Flex to align icon */
  align-items: center;
  gap: 8px;
}

.th-sort-link:hover {
  color: var(--primary);
}

/* ── FINANCIAL COMMAND CENTER (Expert Ledger) ── */
.data-table-container {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

/* Fixed layout: the Description column takes the leftover width and TRUNCATES,
   instead of `auto` layout sizing it to the longest description and forcing a
   ~990px min table width. That min pushed the Amount column off-screen on any
   viewport below ~1360px — every iPad, and narrow laptops — because the
   sidebar (280px) + page padding leave the ledger only ~720-850px there. The
   per-column widths live on the <th> elements in transactions.html. */
.data-table-container table {
  table-layout: fixed;
}
/* If the table still can't fit (a very narrow phone that somehow gets the md+
   layout), the inner .overflow-x-auto scrolls — keep that scrollbar slim. */
.data-table-container > .overflow-x-auto {
  scrollbar-width: thin;
}

.table-header-cell {
  padding: 14px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-data);
}

[data-theme="dark"] .table-header-cell {
  background: rgba(255, 255, 255, 0.02);
}

.table-body-cell {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  white-space: nowrap;
  font-family: var(--font-body);
}

[data-theme="dark"] .table-body-cell {
  border-bottom-color: rgba(255, 255, 255, 0.03);
}

.sticky-col-vendor {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 10;
  border-right: 1px solid var(--border);
}

.font-mono-data {
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.glass-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.glass-badge-primary {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.15);
}

.glass-badge-accent {
  background: rgba(73, 16, 185, 0.08);
  color: #4910b9;
  border-color: rgba(73, 16, 185, 0.15);
}

.glass-badge-slate {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.filter-input-modern {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  transition: all 0.2s ease;
  outline: none;
}

.filter-input-modern:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.bg-surface-container-lowest {
  background-color: var(--surface-container-lowest);
}

/* Row Hover & Animation */
.transaction-row-premium {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transaction-row-premium:hover {
  transform: translateX(4px);
  background-color: var(--surface-container-low);
}

/* Category Pill Styling */
.category-pill-glass {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface-container-high);
  color: var(--text-main);
  border: 1px solid var(--border);
  gap: 6px;
}

.category-emoji-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Group Headers */
.date-group-header {
  position: sticky;
  top: 168px;
  z-index: 20;
  padding: 16px 0;
  background: linear-gradient(to bottom, var(--bg-app) 70%, transparent);
  margin-bottom: 12px;
}

/* Card Rows (Smoky Obsidian / Frosted Slate) */
.transaction-card-row {
  display: grid;
  grid-template-columns: 140px 2fr 1.5fr 1fr 1.2fr;
  gap: 16px;
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  /* Apple Glass */
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Subtle border */
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  font-size: 13px;
  /* Decreased row font size */
}

[data-theme="light"] .transaction-card-row {
  background: rgba(255, 255, 255, 0.75);
  /* White Glass */
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* Sharper border */
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
  /* Soft Lift */
  color: var(--text-main);
}

.transaction-card-row:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.5);
  z-index: 5;
}

[data-theme="light"] .transaction-card-row:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--primary);
  /* Green border on hover */
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.1);
  /* Higher Lift */
}

/* Review Grid Architecture */

/* 1. Theme-Aware Glass Containers */
.review-group-card {
  --glass-bg: transparent;
  /* Changed from rgba(11, 15, 20, 0.85) to match Transactions Main Grid */
  background: var(--glass-bg) !important;
  backdrop-filter: none !important;
  /* Removed blur on container */
  border: none !important;
  border-radius: 16px;
  padding: 0 !important;
  margin-bottom: 32px;
  overflow: visible !important;
}

[data-theme="light"] .review-group-card {
  --glass-bg: rgba(248, 250, 252, 0.7);
  border: none !important;
}

.group-header {
  margin: 0;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Reverted to subtle/transparent */
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--text-main) !important;
}

[data-theme="light"] .group-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: var(--text-main) !important;
}

.group-header h3 {
  font-weight: 600;
  color: inherit;
}

/* .review-grid-header / .review-card-row (an even older review-page
   redesign attempt, predating both the "gamified mission" system above
   and review.html's current .tx-mission-row) removed 2026-08-23 — dead,
   unused by any template, and the exact landmine pattern that caused a
   real mobile-layout bug (see the GAMIFIED MISSION REVIEW SYSTEM comment
   above): identically-scoped review-page CSS left behind by an earlier
   design that a later pass could silently inherit properties from. */

/* 4. Circular Ghost Icons & Pills */
.btn-filter-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
  cursor: pointer;
}

.btn-filter-circle:hover {
  border-color: #D4FF00;
  /* Electric Lime */
  color: #D4FF00;
}

.btn-filter-circle svg {
  stroke-width: 2.5;
}

/* Account Pill Style */
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E8EDF4;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: -0.3px;
  width: fit-content;
}

[data-theme="light"] .account-pill {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1E293B;
}

/* Cyber-Pulse Action Button */
.btn-cyber-action {
  background: linear-gradient(135deg, #d4ff00 0%, #a3ff00 100%);
  color: #0B0F14;
  font-weight: 700;
  /* Bold Deep Obsidian */
  font-family: var(--font-body);
  border: none;
  border-radius: 8px;
  /* Or 50% if icon? User asked for component. Logic implies standard button shape but high energy. */
  padding: 8px 24px;
  box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
  /* Outer Glow */
  transition: all 0.2s ease;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
}

[data-theme="light"] .btn-cyber-action {
  background: var(--primary);
  /* Emerald Green */
  color: #FFFFFF;
  /* White Text */
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  /* Emerald Glow */
}

[data-theme="light"] .btn-cyber-action:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.btn-cyber-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 255, 0, 0.5);
  filter: brightness(1.1);
}

.group-footer {
  background: transparent !important;
  /* Transparent footer */
  border-top: none;
  /* Remove squared border line */
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
}

/* 3. Glass Pills (Categories - Premium) */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  /* Slimmer for density */
  border-radius: 99px;
  font-size: 11px;
  /* Slightly smaller */
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
  background: rgba(var(--pill-rgb), 0.1);
  /* Translucent fill */
  border: 1px solid rgba(var(--pill-rgb), 0.3);
  /* Matches fill */
  color: var(--pill-color);
  width: fit-content;
}

.glass-pill:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: rgba(var(--pill-rgb), 0.15);
  border-color: rgba(var(--pill-rgb), 0.6);
}

/* Specific Pill Variables applied inline or via classes */
.pill-income {
  --pill-rgb: 74, 222, 128;
  --pill-color: #4ade80;
}

.pill-expense {
  --pill-rgb: 248, 113, 113;
  --pill-color: #f87171;
}

.pill-neutral {
  --pill-rgb: 148, 163, 184;
  --pill-color: #94a3b8;
}

/* 4. Filter Icons & Badges (Circular Ghost) */
.btn-filter-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Perfect Circle */
  background: transparent;
  /* Ghost Default */
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  color: var(--accent);
  /* Electric Lime Lines */
}

/* Hover State */
.btn-filter-circle:hover {
  background: rgba(212, 255, 0, 0.1);
  border-color: rgba(212, 255, 0, 0.2);
}

/* Active State (Filter On) */
.btn-filter-circle.active {
  background: var(--accent);
  color: #0B0F14;
  /* Deep Obsidian Icon */
  box-shadow: 0 0 12px rgba(212, 255, 0, 0.4);
}

.filter-badge-number {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: black;
  font-size: 9px;
  font-weight: 800;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  z-index: 1000;
  padding: 16px;
  backdrop-filter: blur(40px);
  background: var(--dropdown-bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
}

/* 5. Scrollable Filter Lists */
.filter-search-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 8px;
  outline: none;
}

.filter-search-input:focus {
  border-color: var(--accent);
}

.checklist-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0 -8px;
  /* Expand to edges */
  padding: 0 8px;
}

/* Custom Scrollbar for Dropdown */
.checklist-container::-webkit-scrollbar {
  width: 4px;
}

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

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text-muted);
  font-size: 13px;
  user-select: none;
  width: 100%;
  /* Full width */
  box-sizing: border-box;
}

.checklist-item:hover {
  background: rgba(255, 255, 255, 0.05);
  /* Smoky Hover */
  color: var(--text-main);
}

[data-theme="light"] .checklist-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.checklist-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.category-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  letter-spacing: -0.02em;
}

.font-mono {
  font-family: var(--font-mono);
}

.text-primary {
  color: var(--primary);
}

.text-green {
  color: #10b981 !important;
  /* Unified Emerald-500 */
}

[data-theme="dark"] .text-green {
  color: #34d399 !important;
  /* Emerald-400 for Dark Mode (Brighter) */
}

.text-accent {
  color: var(--accent);
}

/* ──────────────────────────────────────────────────────────────
   4. COMPONENT ARCHITECTURE (GLASSMORPHISM)
   ────────────────────────────────────────────────────────────── */

/* Buttons (Apple-Inspired Glass) */
.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-glass:active {
  transform: scale(0.96);
  /* Haptic feel */
}

.btn-primary {
  background: var(--primary);
  color: #000;
  /* Contrast on Lime */
  border: none;
  box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
  background: var(--accent);
  /* Electric Lime */
  box-shadow: 0 6px 20px var(--primary-glow);
}

/* Glassmorphism Cards */
.dash-card,
.card {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Stronger border */
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(24px);
  /* Deeper Blur */
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  /* Deeper Shadow */
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .dash-card,
[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.85);
  /* Frosty White */
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.02);
  /* Soft diffused shadow */
}

[data-theme="light"] .dash-card:hover,
[data-theme="light"] .card:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
  /* Lifted light shadow */
  border-color: var(--primary);
  /* Emerald Border on Hover */
}

.dash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  opacity: 0.5;
}

.dash-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 255, 0, 0.05);
  /* Lime glow hint */
}

/* PREMIUM TABLES (Data Ticker) */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  /* Floating rows */
}

th {
  font-family: var(--font-body);
  font-weight: 800;
  /* Extra Bold */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0 16px 8px 16px;
  text-align: left;
}

td {
  background: rgba(255, 255, 255, 0.02);
  padding: 16px;
  font-size: 14px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

td:first-child {
  border-radius: 12px 0 0 12px;
}

td:last-child {
  border-radius: 0 12px 12px 0;
}

/* /logs "Deleted accounts". Scoped on purpose — the base `table` rule has no
   table-layout, so it is `auto` and every column grows to its content's
   intrinsic width. CLAUDE.md's Mobile Overflow Rule: body has
   overflow-x:hidden, so the spill is CLIPPED rather than scrollable, and the
   account column ("Scotiabank Chequing •• 4821 · Scotiabank") pushed this
   table to 620px inside a 310px card at 360px wide. Fixed layout + explicit
   widths + wrapping removes the content-driven minimum entirely. Not applied
   to `table` globally: that would relayout every table in the app. */
.deleted-accounts-table {
  table-layout: fixed;
}

.deleted-accounts-table th,
.deleted-accounts-table td {
  overflow-wrap: anywhere;
  white-space: normal;
}

.deleted-accounts-table th:nth-child(1),
.deleted-accounts-table td:nth-child(1) { width: 30%; }

.deleted-accounts-table th:nth-child(3),
.deleted-accounts-table td:nth-child(3) { width: 28%; }

@media (max-width: 480px) {
  .deleted-accounts-table td { padding: 10px; }
  .deleted-accounts-table th { padding: 0 10px 8px 10px; }
}

tr:hover td {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Numerical Alignment */
.amount,
.date,
.number {
  font-family: var(--font-mono);
  letter-spacing: -0.5px;
}

/* ──────────────────────────────────────────────────────────────
   5. LAYOUT & RESPONSIVENESS
   ────────────────────────────────────────────────────────────── */
.content {
  margin-left: 280px;
  padding: 32px;
  width: calc(100% - 280px);
  /* Removed max-width to allow full width, inner containers will center */
}

/* Filter Inputs (Glass) */
.filter-input-text {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-input-text:focus {
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
  outline: none;
}

/* Category Dropdown */
.category-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 12px;
  overflow: hidden;
}

.category-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.category-option.selected {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
}

/* Mobile Overrides */
@media (max-width: 768px) {
  .content {
    margin-left: 0;
    width: 100%;
    padding: 16px;
    padding-bottom: 80px;
    /* Space for bottom nav if we add one, or footer */
  }

  .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
}

/* The mobile hamburger drawer that used to live here is gone — the mobile
   topbar now opens a small profile-avatar dropdown instead (base.html),
   matching poolpo.app, and the bottom nav already covers every destination
   that drawer held. #sidebar goes back to Tailwind's plain `hidden lg:flex`. */

@media (max-width: 768px) {
  /* Stack Grids */
  .stats-grid,
  .dashboard-main-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Responsive Tables (Scrollable) */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Adjust Cards for Mobile */
  .dash-card,
  .card {
    padding: 16px;
    border-radius: 16px;
    backdrop-filter: blur(24px);
    /* Mobile blur */
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  }
}

/* ────────────────────────────────────────────────────────────────
   PAGE HEADER (Reusable Module Title Component)
   ──────────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.page-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #0f172a;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--primary-glow);
}

.page-header-icon svg {
  width: 22px;
  height: 22px;
}

.page-header-content {
  flex: 1;
  min-width: 0;
}

.page-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.page-header-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 0;
  font-weight: 400;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Accent solid bar on left edge */
.page-header::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 0;
  bottom: 24px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* Light mode subtle adjustments */
[data-theme="light"] .page-header-icon {
  color: #fff;
}

[data-theme="light"] .page-header::before {
  box-shadow: 0 0 8px var(--primary-glow);
}

/* Mobile: remove the accent bar that would go off-screen */
@media (max-width: 768px) {
  .page-header::before {
    display: none;
  }

  .page-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .page-header-title {
    font-size: 1.25rem;
  }
}

/* Header Section (New Grid Layout) */
.dashboard-header-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  /* Left (Date+Welcome), Right (Selector) */
  align-items: center;
  margin-bottom: 40px;
  gap: 20px;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-date .current-date-display {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  /* Reduced to subtitle size above Title */
  margin: 0;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.header-welcome {
  text-align: left;
}

.header-welcome h1 {
  font-size: 24px;
  /* Increased from 18px (Significant bump) */
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.header-welcome .text-primary {
  font-weight: 700;
  color: var(--primary);
  /* Lime */
}

/* Ensure right alignment for the last item (month selector) */
.dashboard-header-bar> :last-child {
  display: flex;
  justify-content: flex-end;
}


/* Month Selector */
.month-selector select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 10px 20px;
  /* Slightly larger targets */
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  box-shadow: var(--shadow);
}

/* Grid Layouts - Increased Spacing */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.dashboard-main-grid:last-child {
  margin-bottom: 0;
}


/* ──────────────────────────────────────────────────────────────
   6. WIDGET SPECIFIC STYLES
   ────────────────────────────────────────────────────────────── */

/* Stat Card */
.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  /* Glassy Icon Bg */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -1px;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Chart Container */
.chart-container {
  height: 320px;
  position: relative;
  width: 100%;
}

/* Goals Widget */
.goals-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  /* Lime */
  border-radius: 99px;
  box-shadow: 0 0 10px var(--primary-glow);
}


.bill-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
}

.bill-status {
  font-size: 12px;
}

.status-overdue {
  color: var(--danger);
  font-weight: 700;
}

.status-today {
  color: var(--warning);
  font-weight: 700;
}

.status-future {
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────
   7. UTILITIES
   ────────────────────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-success {
  color: var(--primary);
}

.text-danger {
  color: var(--danger);
}

/* Loading State */
[x-cloak] {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   8. RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr;
    /* Stack graphs and sidebar widgets */
  }
}

/* Topbar — hidden on desktop, visible on mobile */
.topbar {
  display: none;
}

/* Mobile Overlay Background */
.sidebar-mobile-overlay {
  display: none;
}

@media (max-width: 768px) {

  /* On mobile, stack vertically so topbar acts like a real topbar */
  .app-container {
    flex-direction: column;
  }

  /* Sidebar becomes an overlay */
  .sidebar {
    transform: translateX(-100%);
    width: 280px !important;
    /* Force full width on mobile slide-in */
    padding: 24px !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5) !important;
  }

  /* The overlay */
  body.sidebar-open .sidebar-mobile-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 45;
    /* Just below sidebar */
  }

  .content,
  body.sidebar-open .content {
    margin-left: 0 !important;
    width: 100% !important;
    /* Reduce side paddings heavily so cards expand nicely on mobile */
    padding: 16px 12px !important;
    overflow-x: hidden;
  }

  /* Show the top bar on mobile */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-app);
    /* Match body background */
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
    /* Below sidebar and overlay */
    width: 100%;
  }

  /* Hamburger Menu Button */
  .burger {
    background: transparent;
    border: none;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
  }

  .burger:hover {
    background: rgba(255, 255, 255, 0.05);
    /* very subtle hover */
  }

  /* Hide the desktop sidebar collapse toggle on mobile */
  .sidebar-toggle {
    display: none !important;
  }

  /* Ensure header logos etc format correctly on mobile sidebar open */
  body.sidebar-collapsed.sidebar-open .sidebar .brand {
    padding: 30px 20px;
  }

  body.sidebar-collapsed.sidebar-open .sidebar .logo img {
    height: 160px;
    max-width: 240px;
  }

  body.sidebar-collapsed.sidebar-open .nav-item {
    justify-content: flex-start;
  }

  body.sidebar-collapsed.sidebar-open .nav-item span {
    opacity: 1;
    width: auto;
  }

  body.sidebar-collapsed.sidebar-open .sidebar-footer * {
    display: flex;
  }
}

/* ——————————————————————————————————————————————————————————————————
   9. MOTION & ANIMATION (CYBER-KINETICS)
   ────────────────────────────────────────────────────────────── */

/* Graph Reveal (Grow from bottom) */
.chart-reveal {
  transform-origin: bottom;
  animation: growUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes growUp {
  from {
    transform: scaleY(0.9);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Staggered Load for Lists/Tables */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Premium Empty States */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
}

.empty-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.empty-icon {
  font-size: 32px;
  opacity: 0.5;
  filter: grayscale(100%);
}

.empty-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  max-width: 200px;
  line-height: 1.5;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger delays manually or via JS (here are some utility classes for static items) */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

/* Interactive Glow - Pulse on Hover */
.glow-hover:hover {
  box-shadow: 0 0 15px var(--primary-glow), 0 0 30px var(--primary-glow);
  border-color: var(--primary);
  z-index: 10;
}

/* Heartbeat Restore */
.heart-beat {
  display: inline-block;
  color: #f43f5e;
  animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* ──────────────────────────────────────────────────────────────
   7. AUTH PAGE OVERRIDES
   ────────────────────────────────────────────────────────────── */
body.auth-page .sidebar,
body.auth-page .topbar {
  display: none !important;
}

body.auth-page .content {
  margin-left: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
}

body.auth-page .app-container {
  flex-direction: column;
  min-height: 100vh;
}

/* ──────────────────────────────────────────────────────────────
   8. DEV ENVIRONMENT OVERRIDES (HOTFIX)
   ────────────────────────────────────────────────────────────── */
/* Hide the 'breathing' gradient border injected by Preact/DevTools */
#preact-border-shadow-host {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ──────────────────────────────────────────────────────────────
   9. COMPONENT OVERRIDES
   ────────────────────────────────────────────────────────────── */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Space between emoji and text */
  padding: 6px 14px;
  /* Larger Padding as requested */
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: var(--text-main);
  font-size: 13px;
  /* Match row font size */
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.glass-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.glass-pill .emoji {
  font-size: 14px;
}

/* --------------------------------------------------------------
   7. CATEGORIES REVAMP (Glassmorphism + Tabs)
   -------------------------------------------------------------- */

/* Tabbed Interface */
.glass-tabs {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: fit-content;
  margin: 0 auto 32px auto;
  /* Centered Tabs */
}

[data-theme='light'] .glass-tabs {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

.glass-tab {
  padding: 8px 24px;
  border-radius: 99px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid transparent;
}

.glass-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme='light'] .glass-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}

.glass-tab.active-tab {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .glass-tab.active-tab {
  background: #FFFFFF;
  color: var(--primary);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Master-Detail Layout Refinement */
.categories-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  /* Increased gap for breathing room */
  align-items: start;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 24px;
}

@media (max-width: 1024px) {
  .categories-container {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .categories-container {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  .glass-sidebar {
    display: none;
    /* Use a mobile toggle if needed, or stack */
    /* For now, assuming user focuses on grid on mobile */
  }
}

/* Glass Sidebar Group Items */
.glass-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.glass-group-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
}

[data-theme='light'] .glass-group-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.glass-group-item.active-group {
  background: rgba(212, 255, 0, 0.1);
  /* Lime Tint */
  color: #D4FF00;
  border: 1px solid rgba(212, 255, 0, 0.2);
}

[data-theme='light'] .glass-group-item.active-group {
  background: rgba(16, 185, 129, 0.1);
  /* Emerald Tint */
  color: var(--primary);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Category Grid (Uniform Square Cards) */
/* Category Grid (Responsive Matrix) */
.category-grid {
  display: grid;
  /* Mobile Default: 2 Columns ("Opposite" of 2x4 = Vertical-ish Matrix) */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

@media (min-width: 1024px) {
  .category-grid {
    /* Desktop: 4 Columns (Matches "2 by 4" style) */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  /* Force Square */
  padding: 24px;
  border-radius: 24px;
  /* More rounded */
  background: rgba(30, 41, 59, 0.4);
  /* Slightly deeper background */
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

[data-theme='light'] .category-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 0 10px var(--primary-glow);
}

[data-theme='light'] .category-card:hover {
  background: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.15);
}

.card-emoji {
  font-size: 48px;
  /* Larger Emoji */
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.category-card:hover .card-emoji {
  transform: scale(1.1);
}

.card-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.2;
}

.card-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.2s ease;
}

.category-card:hover .card-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Floating Action Button (Clean) */
.fab-add {
  /* position: fixed; Removed to be inline header button as per inspiration */
  /* Using standard fab styling regardless */
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  border: none;
  transition: transform 0.2s;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.fab-add:hover {
  transform: scale(1.05);
}

/* Form Inputs (Glass) */
.glass-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  color: white;
  font-size: 14px;
  transition: all 0.2s;
}

[data-theme='light'] .glass-input {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1e293b;
}

.glass-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-glow);
}

/* Expense Type picker (category add/edit modal) */
.expense-type-option {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

[data-theme='light'] .expense-type-option {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
}

.expense-type-option:hover {
  border-color: var(--primary);
}

.expense-type-option.active {
  background: var(--primary-glow);
  border-color: var(--primary);
  color: var(--primary);
}

/* Progress Bar Visibility Fix for Light Mode */
[data-theme="light"] .progress-track {
  background: rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------
   4. TRANSACTION COMPONENT (Grid -> Card Responsive)
   -------------------------------------------------------------- */

/* Active Background for Transaction/Review Rows */
.row-active {
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--primary);
}

/* Note indicator (desktop table row + mobile card) — only rendered when a
   transaction has a note, so its presence alone is the signal. Hover
   (desktop) or tap (mobile) reveals the note text. Same "icon → absolute
   popover" shape as budget's .bp-info/.bp-info-pop, just amber instead of
   emerald so it doesn't read as another editable-category badge. */
.tx-note-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  cursor: pointer;
  line-height: 0;
}
.tx-note-badge .material-symbols-outlined { font-size: 14px; }
.tx-note-badge:hover { color: #d97706; }

.tx-note-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 220px;
  max-width: calc(100vw - 48px);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-main);
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
[data-theme="dark"] .tx-note-pop { background: #1a2035; border-color: rgba(255, 255, 255, 0.08); }

.transaction-card-row {
  display: grid;
  /* Desktop Layout: Date, Description, Category, Amount, Account */
  grid-template-columns: 100px 2.5fr 1.5fr 120px 100px;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s ease;
  background: transparent;
}

.transaction-card-row:hover {
  background: var(--bg-secondary);
}

.transaction-grid-header {
  display: grid;
  grid-template-columns: 100px 2.5fr 1.5fr 120px 100px;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  background: var(--bg-card);
}

/* Mobile Responsiveness for Transactions Table */
@media (max-width: 768px) {
  .transaction-grid-header {
    display: none;
    /* Hide header completely on mobile */
  }

  .transaction-card-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Prevents inherit centering */
    padding: 16px;
    gap: 8px;
    /* Tighter gap */
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--bg-card);
    position: relative;
    border-bottom: none;
    /* Overriding previous border bottom for mobile cards */
  }

  /* Desktop-first resets for mobile views */
  .transaction-card-row .tx-desc {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    order: 1;
    margin-bottom: 0px;
    padding-right: 90px;
    /* Stronger space for absolute amount */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .transaction-card-row .tx-amount {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 17px;
    font-weight: 700;
    text-align: right !important;
    /* Overriding inline style limits */
    order: -1;
    /* Logical flow ignore since it's absolute */
  }

  /* Flex row container for metadata at the bottom */
  .transaction-card-row::after {
    display: none;
    /* Just using structural order */
  }

  .transaction-card-row .tx-date {
    order: 2;
    font-size: 12px;
    color: var(--text-muted);
    text-align: left;
    margin-bottom: 6px;
  }

  /* Align Category completely left */
  .transaction-card-row>div:nth-child(3) {
    /* Category Pill Wrapper */
    order: 3;
    align-self: flex-start;
  }

  .transaction-card-row>.text-small {
    /* Account text */
    position: absolute;
    bottom: 16px;
    right: 16px;
    order: 4;
    text-align: right !important;
    /* Move account info to bottom right */
    font-size: 12px;
  }

  /* .review-grid-header / .review-card-row mobile overrides removed
     2026-08-23 — dead, same superseded-by-review.html landmine as the
     desktop-scoped rules above. */
}

.table-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------
   8. BUDGET MODULE REVAMP
   -------------------------------------------------------------- */

/* Budget Input (Blends with table row) */
.budget-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 8px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
  text-align: right;
}

.budget-input:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme='light'] .budget-input:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.budget-input:focus {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-glow);
}

[data-theme='light'] .budget-input:focus {
  background: white;
}

.budget-input.changed {
  color: var(--primary);
}

/* Glass Progress Bar */
.glass-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}

[data-theme='light'] .glass-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

.glass-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: var(--primary);
  /* Default Success/Primary */
  box-shadow: 0 0 8px var(--primary-glow);
}

.glass-progress-fill.warning {
  background: #eab308;
  /* Yellow */
  box-shadow: none;
}

.glass-progress-fill.danger {
  background: #ef4444;
  /* Red */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Drilldown Link */
.drilldown-pill {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}

.drilldown-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

[data-theme='light'] .drilldown-pill:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Sticky Footer (Glass) */
.glass-sticky-footer {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 32px;
  border-radius: 99px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 600px;
  justify-content: space-between;
}

[data-theme='light'] .glass-sticky-footer {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.glass-metric {
  display: flex;
  flex-direction: column;
}

.glass-metric label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 700;
}


/* Budget Grid Architecture */

/* Budget Grid Architecture - Centered */
.budget-grid-header,
.budget-grid-row {
  display: grid;
  /* Category (35%), Budgeted (20%), Actual (20%), Remaining (25%) */
  grid-template-columns: 1.75fr 1fr 1fr 1.25fr;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  max-width: 1400px;
  /* Consistently center content */
  margin: 0 auto;
}

.budget-grid-row {
  /* margin-bottom handle separately */
  margin-bottom: 8px;
}



/* --------------------------------------------------------------
   11. GLOBAL LAYOUT — Full-width responsive containers
   Pages fill the entire .content area naturally, expanding on
   wide / ultrawide screens. Breathing room comes from .content
   padding (40px each side). Individual modal overlays still use
   their own max-width for readability.
   -------------------------------------------------------------- */
.layout-centered,
.dashboard-container,
.transactions-layout,
.budget-layout,
.review-layout,
.settings-container,
.categories-layout,
.categories-container {
  width: 100%;
  /* No max-width — let content fill the viewport on all screen sizes.
     The .content padding handles edge spacing. */
}

/* Ensure inner grids don't overflow */
.dashboard-main-grid {
  width: 100%;
}


.budget-grid-header div {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.budget-grid-row {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 16px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.budget-grid-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

[data-theme='light'] .budget-grid-row:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Mobile Responsiveness for Budget Grid */
@media (max-width: 768px) {
  .budget-grid-header {
    display: none;
    /* Hide header on mobile */
  }

  .budget-grid-row {
    grid-template-columns: 1fr;
    /* Stack vertically */
    gap: 12px;
    padding: 20px;
  }
}

.glass-metric span {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

/* ════════════════════════════════════════════════════════════════
   MODAL SYSTEM (Glassmorphic Popups)
   ════════════════════════════════════════════════════════════════ */

/* Full-screen Backdrop Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Above the mobile bottom nav and the tx bottom sheet (z-1200) — modals
     always arrive on top of whatever UI triggered them. */
  z-index: 1300;
  padding: 24px;
}

[data-theme="light"] .modal-overlay {
  background: rgba(100, 116, 139, 0.35);
}

/* ── Generic .modal Container (Glassmorphic) ────────────────────── */
.modal {
  position: relative;
  background: rgba(20, 27, 40, 0.92);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  padding: 2rem;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  color: var(--text-main);
  animation: modal-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* ── Modal Close Button (Red Circle ✕) ──────────────────────────── */
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.modal-close-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.modal-close-btn:active {
  transform: scale(0.95);
}

/* ── Modal Actions Footer ───────────────────────────────────────── */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 1.5rem;
}

/* ── Modal Icon (Centered emoji/icon) ───────────────────────────── */
.modal-icon {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Wider variant for content-heavy modals (rule suggestion, previews) */
.modal--wide {
  width: min(920px, 92vw);
}

/* ── Mobile: modals present as bottom sheets (app design language) ─ */
@media (max-width: 767px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 28px 28px 0 0;
    padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    animation: modal-sheet-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Grab handle, same bar the tx bottom sheet uses */
  .modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    margin: 0 auto 0.875rem;
  }

  /* Stack action buttons full-width, primary on top */
  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@keyframes modal-sheet-enter {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Modal Card (Glass Container) — Import Wizard */
.modal-clean {
  position: relative;
  background: rgba(20, 27, 40, 0.92);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-main);
}

[data-theme="light"] .modal-clean {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Header */
.modal-clean-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.modal-clean-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-main);
}

.modal-clean-header .text-muted {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

[data-theme="light"] .modal-clean-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Modal Card (Legacy — used in upload.html modals) */
.modal-card {
  position: relative;
  background: rgba(20, 27, 40, 0.92);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  animation: modal-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-main);
}

/* ── DASHBOARD HERO (Premium Stitch Design) ──────────────── */
.dashboard-hero {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 12px 24px -8px rgba(16, 185, 129, 0.4);
    border-radius: 24px;
    padding: 32px;
    color: #fff;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .dashboard-hero {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.hero-overlay-icon {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 200px;
    height: 200px;
    opacity: 0.1;
    pointer-events: none;
}

.hero-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.hero-welcome {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-networth {
    font-size: 42px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
    line-height: 1.1;
}

.hero-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-top: 8px;
}

.hero-avatar {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    backdrop-filter: blur(4px);
}

.hero-stats-panel {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 16px 20px;
    max-width: fit-content;
}

@media (max-width: 768px) {
    .dashboard-hero {
        padding: 24px;
        margin: -20px -20px 16px -20px;
        border-radius: 0 0 24px 24px;
    }
    .hero-networth { font-size: 32px; }
    .hero-stats-panel { width: 100%; max-width: none; justify-content: space-between; }
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.hero-stat-value {
    font-size: 20px;
    font-weight: 700;
}

.hero-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    align-self: center;
}

.hero-stat-badge {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    align-self: center;
    margin-left: 8px;
}

/* ── PREMIER CARDS & SECTIONS ──────────────── */
.card-grid-custom {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.card-span-wide { grid-column: span 8; }
.card-span-narrow { grid-column: span 4; }
.card-span-3 { grid-column: span 4; }

@media (max-width: 1100px) {
    .card-span-wide, .card-span-narrow, .card-span-3 { grid-column: span 12; }
}

.savings-progress-track {
    height: 12px;
    background: var(--nav-hover);
    border-radius: 30px;
    overflow: hidden;
    margin: 16px 0 8px;
}

.savings-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #14B8A6);
    border-radius: 30px;
    transition: width 1s ease-out;
}

.savings-tip-box {
    background: var(--primary-glow);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-top: 16px;
}

.savings-tip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.savings-tip-text {
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.4;
}

.quote-card {
    background: #0f172a;
    color: #fff;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.quote-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 160px;
    opacity: 0.1;
    font-family: serif;
}

.quote-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.quote-author {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.quote-sub {
    font-size: 11px;
    opacity: 0.6;
    font-style: italic;
}

.alert-card {
    background: var(--primary-glow);
    border: 1px dashed var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.alert-card-icon {
    font-size: 24px;
}

.alert-card-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

[data-theme="light"] .modal-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 24px 80px -12px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.modal-header {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

[data-theme="light"] .modal-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

/* Modal Actions Footer (Import Wizard) */
.modal-actions-clean {
  padding: 16px 28px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .modal-actions-clean {
  border-top-color: rgba(0, 0, 0, 0.06);
}

/* Clean Buttons (Modal-specific) */
.btn-clean-primary {
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  background: var(--primary);
  color: #0f172a;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}

.btn-clean-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--primary-glow);
  filter: brightness(1.1);
}

.btn-clean-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-clean-secondary {
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s ease;
  font-family: var(--font-body);
}

.btn-clean-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-main);
}

[data-theme="light"] .btn-clean-secondary {
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .btn-clean-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}

/* ── Legacy `.btn` + modifiers ────────────────────────────────────────
   Older modals (rule suggestion, success, category add/edit, settings,
   upload wizard) use `class="btn primary"` / `class="btn ghost"` etc.
   instead of the newer `.btn-clean-*` classes. This base class was
   missing entirely, leaving those buttons unstyled plain text. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.2;
}

.btn.primary {
  background: var(--primary);
  color: #0f172a;
}
.btn.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 16px var(--primary-glow);
}

.btn.ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn.ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-main);
  border-color: var(--text-muted);
}
[data-theme="dark"] .btn.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.btn.danger-btn {
  background: var(--danger);
  color: #fff;
}
.btn.danger-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn.text-red {
  color: var(--danger);
}

.btn.small {
  padding: 6px 14px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.btn.icon-only {
  padding: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Account Selector */
.account-select-wrap {
  margin-bottom: 20px;
  padding: 0 28px;
}

.account-select-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.clean-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  font-size: 0.9rem;
  font-family: var(--font-body);
  appearance: auto;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.clean-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

[data-theme="light"] .clean-select {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .clean-select:focus {
  border-color: var(--primary);
}

/* Drop Zone (Modern) */
.drop-zone-modern {
  margin: 0 28px 20px;
  padding: 32px 24px;
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.02);
}

.drop-zone-modern:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-glow), 0.05);
}

.drop-zone-modern.drag-active {
  border-color: var(--primary);
  background: rgba(212, 255, 0, 0.06);
  transform: scale(1.01);
  box-shadow: 0 0 24px var(--primary-glow);
}

[data-theme="light"] .drop-zone-modern {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .drop-zone-modern:hover {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.04);
}

[data-theme="light"] .drop-zone-modern.drag-active {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.08);
}

.drop-icon-circle {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

/* File List (Pending Upload) */
.file-list-modern {
  margin: 0 28px 16px;
}

.file-item-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .file-item-modern {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

.file-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.file-item-info {
  flex: 1;
  min-width: 0;
}

.file-item-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Progress Bar */
.progress-bar-wrap {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 8px;
  overflow: hidden;
}

[data-theme="light"] .progress-bar-wrap {
  background: rgba(0, 0, 0, 0.06);
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.4s ease;
}

/* Status Message (inside modal) */
.status-message {
  margin: 12px 28px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-message.success {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.status-message.error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .status-message.success {
  color: #4ade80;
}

[data-theme="dark"] .status-message.error {
  color: #fca5a5;
}

/* Mapping Row (Import Wizard Step 2) */
.modal-clean .mapping-header {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr auto 1.5fr;
  gap: 12px;
  padding: 10px 28px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .modal-clean .mapping-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.modal-clean .mapping-row {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr auto 1.5fr;
  gap: 12px;
  padding: 10px 28px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.modal-clean .mapping-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.modal-clean .mapping-row.is-mapped {
  background: rgba(22, 163, 74, 0.05);
}

[data-theme="light"] .modal-clean .mapping-row {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .modal-clean .mapping-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .modal-clean .mapping-row.is-mapped {
  background: rgba(16, 185, 129, 0.06);
}

.modal-clean .row-arrow {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.modal-clean .form-select.small {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  font-size: 0.82rem;
  font-family: var(--font-body);
  width: 100%;
}

[data-theme="light"] .modal-clean .form-select.small {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
}

/* Floating Support Bubble */
.support-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: var(--primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px var(--primary-glow);
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .support-bubble {
  color: #0B0F14;
}

.support-bubble:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 10px 24px var(--primary-glow);
}

.support-bubble svg {
  width: 28px;
  height: 28px;
}

.support-bubble .material-symbols-outlined {
  font-size: 28px;
}

/* ──────────────────────────────────────────────────
   Mobile Dashboard Hero Header (Stitch Design)
   ────────────────────────────────────────────────── */
.mobile-dashboard-hero {
  display: none; /* Hidden on desktop */
}

.desktop-only-header {
  display: flex; /* Visible on desktop */
}

@media (max-width: 768px) {
  .mobile-dashboard-hero {
    display: block;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    padding: 24px 20px 20px;
    margin: -20px -20px 16px -20px;
    border-radius: 0 0 24px 24px;
  }

  .mobile-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .mobile-hero-welcome {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 4px;
  }

  .mobile-hero-networth {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 6px;
    color: #fff;
  }

  .mobile-hero-subtitle {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .mobile-hero-subtitle svg {
    opacity: 0.8;
  }

  .mobile-hero-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
  }

  .mobile-hero-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 12px 16px;
  }

  .mobile-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-hero-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.75;
    font-weight: 500;
  }

  .mobile-hero-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  .mobile-hero-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }

  /* Hide desktop header on mobile */
  .desktop-only-header {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────
   Mobile Bottom Navigation (Stitch Design)
   ────────────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    height: 64px;
    align-items: center;
    justify-content: space-around;
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  }

  [data-theme="dark"] .mobile-bottom-nav {
    background: #0f1115;
    border-top-color: rgba(255,255,255,0.06);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    flex: 1;
    padding: 4px 0;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .bottom-nav-item.active {
    color: var(--primary, #10B981);
  }

  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary, #10B981);
    border-radius: 0 0 3px 3px;
  }

  .bottom-nav-icon {
    width: 22px;
    height: 22px;
  }

  /* Central green + button */
  .bottom-nav-add {
    flex: 0 0 auto;
    margin: 0 4px;
  }

  .bottom-nav-add-btn {
    width: 48px;
    height: 48px;
    background: var(--primary, #10B981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .bottom-nav-add-btn:active {
    transform: translateY(-6px) scale(0.95);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  }

  /* Hide support bubble on mobile to give space to bottom nav */
  .support-bubble {
    bottom: 80px;
    right: 16px;
    width: 48px;
    height: 48px;
  }

  .support-bubble svg {
    width: 22px;
    height: 22px;
  }

  .support-bubble .material-symbols-outlined {
    font-size: 22px;
  }

  /* Add padding to content so it doesn't hide behind bottom nav */
  .content {
    padding-bottom: 72px !important;
  }

  /* Hide the topbar on mobile - use bottom nav instead */
  .topbar {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────
   PREMIUM UNIFIED DASHBOARD HERO (STITCH NEON)
   ────────────────────────────────────────────────── */
.dashboard-hero {
  position: relative;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  padding: 32px 28px;
  margin-bottom: 32px;
  border-radius: 24px;
  box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

[data-theme="dark"] .dashboard-hero {
  background: linear-gradient(135deg, #D4FF00 0%, #a2c200 100%);
  color: #0f172a;
  box-shadow: 0 20px 50px -15px rgba(212, 255, 0, 0.2);
}

.hero-overlay-icon {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0.15;
}

.hero-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.hero-welcome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 8px;
}

.hero-networth {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 6px;
}

.hero-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.8;
}

.hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.3);
}

.hero-stats-panel {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
}

.hero-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
  margin-bottom: 2px;
}

.hero-stat-value {
  font-size: 22px;
  font-weight: 800;
}

.hero-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.2);
}

.hero-stat-badge {
  background: rgba(255,255,255,0.2);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────
   PREMIUM CARD GRID & SPANS (STITCH NEON)
   ────────────────────────────────────────────────── */
.card-grid-custom {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.card-span-wide { grid-column: span 6; }
.card-span-narrow { grid-column: span 3; }
.card-span-3 { grid-column: span 3; }

/* ──────────────────────────────────────────────────
   PREMIUM CARD STYLES (STITCH NEON)
   ────────────────────────────────────────────────── */
.alert-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(90deg, rgba(212, 255, 0, 0.08), rgba(212, 255, 0, 0.01));
  border-left: 4px solid #D4FF00;
  padding: 18px 24px;
  border-radius: 18px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}

.alert-card-icon { font-size: 24px; }
.alert-card-text { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.4; }
[data-theme="light"] .alert-card-text { color: #16a34a; }

.quote-card {
  grid-column: span 3;
  background: #0f172a;
  color: #fff;
  padding: 32px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  background-image: radial-gradient(circle at 10% 10%, rgba(212, 255, 0, 0.08), transparent);
}

.quote-text {
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 32px;
  opacity: 0.95;
}

.quote-author { font-weight: 800; font-size: 14px; color: #D4FF00; letter-spacing: 0.5px; }
.quote-sub { font-size: 11px; opacity: 0.4; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }

.savings-progress-track {
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  margin: 18px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.03);
}

.savings-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4FF00 0%, #BFFF00 100%);
  border-radius: 20px;
  transition: width 1.8s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 0 15px rgba(212, 255, 0, 0.3);
}

.savings-tip-box {
  margin-top: 24px;
  padding: 18px;
  background: rgba(212, 255, 0, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(212, 255, 0, 0.08);
}

.savings-tip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #D4FF00;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.savings-tip-text {
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.8;
}

@media (max-width: 1024px) {
  .card-grid-custom { grid-template-columns: repeat(2, 1fr); }
  .card-span-wide, .card-span-3, .card-span-narrow { grid-column: span 1; }
}

@media (max-width: 768px) {
  .card-grid-custom { grid-template-columns: 1fr; }
  .dashboard-hero {
    margin: -20px -20px 32px -20px;
    border-radius: 0 0 32px 32px;
    padding: 40px 24px 32px;
  }
  .hero-networth { font-size: 38px; }
  .hero-stats-panel { gap: 16px; padding: 12px 16px; }
  .hero-stat-value { font-size: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GAMIFIED MISSION REVIEW SYSTEM — most of this block was superseded when
   the review page moved to its own scoped <style> block (review.html) but
   never got deleted here. Same names, stale values — a landmine: app.css
   loads before review.html's inline <style>, so any property review.html
   forgets to re-declare silently falls back to THESE values instead of
   just not applying. That's exactly what broke the mobile card layout —
   review.html's mobile @media re-declared `display:flex; flex-direction:
   column` on .tx-mission-row but never touched `align-items`, so this
   dead rule's `align-items:center` (meant for centering a *row* in a
   grid) kept cascading in and centered every stacked field horizontally
   instead of stretching it full width. Trimmed to only what review.html
   doesn't define itself — .font-outfit is also shared with dashboard.html.
   ───────────────────────────────────────────────────────────────────────────── */

.font-outfit { font-family: 'Outfit', sans-serif !important; }

.mission-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ─────────────────────────────────────────────────────────────────────────────
   LEDGER PREMIUM UI (MOBILE & HIGH-DENSITY)
   ───────────────────────────────────────────────────────────────────────────── */

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .glass-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-shadow {
    box-shadow: 0px 4px 20px rgba(25, 28, 30, 0.04), 0px 12px 40px rgba(25, 28, 30, 0.06);
}

/* Profile / account menu (sidebar + mobile topbar) — glassmorphic surface so
   the dropdown reads as floating glass over whatever it overlaps instead of
   a flat white card. Kept as its own class (not .glass-card) so the border
   can stay the menu's existing emerald tint in light mode. */
.profile-menu-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(16, 185, 129, 0.14);
}

[data-theme="dark"] .profile-menu-glass {
    background: rgba(38, 30, 27, 0.75);
    border: 1px solid rgba(212, 255, 0, 0.14);
}

/* The links/labels inside were authored with light-mode-only Tailwind
   grays (text-slate-*), which is why the dropdown was plain bg-white
   before — recolor them for legibility now that the surface goes dark. */
[data-theme="dark"] .profile-menu-glass .text-slate-900,
[data-theme="dark"] .profile-menu-glass .text-slate-600 {
    color: #f0dfda;
}
[data-theme="dark"] .profile-menu-glass .text-slate-400 {
    color: #c5c9ac;
}
[data-theme="dark"] .profile-menu-glass .bg-slate-50 {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .profile-menu-glass a:not(.text-red-500):hover {
    background: rgba(212, 255, 0, 0.08);
    color: #D4FF00;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sticky-date-header {
    position: sticky;
    top: 72px; /* Adjust based on mobile header height */
    z-index: 30;
}

/* ─────────────────────────────────────────────────────────────
   IMPERSONATION BANNER  ("view as user", read-only)
   Rendered by base.html only when `impersonator` is set. Fixed bar
   pinned to the top; body.impersonating shifts the app chrome down
   by its height so nothing hides underneath.
   ───────────────────────────────────────────────────────────── */
:root {
    --imp-banner-h: 44px;
}

#impersonation-banner {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--imp-banner-h);
    z-index: 300; /* above the mobile topbar (110) and every profile menu (150) */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: #ea580c; /* orange-600 — reads on both themes */
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
}

#impersonation-banner .imp-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#impersonation-banner strong {
    font-weight: 800;
}

#impersonation-banner #imp-exit-btn {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
}

#impersonation-banner #imp-exit-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

#impersonation-banner #imp-exit-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

#impersonation-banner .imp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: imp-pulse 1.6s ease-in-out infinite;
}

@keyframes imp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

body.impersonating {
    padding-top: var(--imp-banner-h);
}

/* Desktop sidebar is `sticky top-0 h-screen` — pin it below the banner and
   trim its height so its footer (collapse / profile menu) isn't clipped. */
body.impersonating #sidebar {
    top: var(--imp-banner-h);
    height: calc(100vh - var(--imp-banner-h));
}

/* Mobile topbar is `fixed top-0` (viewport-relative — body padding doesn't
   move it), so offset it explicitly. <main>'s own pt-16 then stacks on the
   44px body padding to clear it. */
body.impersonating #mobileTopbar {
    top: var(--imp-banner-h);
}

/* ── PATCH BOARD (shared "cable" visual language) ──────────────────────────
   Originally built page-scoped for the CSV import wizard's column mapper
   (web_app/templates/upload.html "Connect Columns" step). Promoted here so
   the bank-link account-mapping screen (partials/_account_create_modal.html)
   can reuse the identical look — two columns of pills, bezier cables drawn
   between connected ports, click-to-arm-and-connect or drag-to-connect,
   click a cable to unplug it, a "current flowing" pulse animation on a
   fresh connection. upload.html keeps its own copy of these same rules
   (harmless duplication, not worth the risk of touching a working,
   independently-tested feature to de-duplicate) — this copy is what makes
   every OTHER page that includes the shared account-create modal (Settings,
   Net Worth, Transactions) get the same styling too. */
.mw-board-titles {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: .75rem;
}

.mw-board {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.mw-col {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 42%;
    min-width: 240px;
}

.mw-gap {
    flex: 1;
    min-width: 80px;
}

.mw-cables {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.mw-cable {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px var(--primary-glow));
}

.mw-cable-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    pointer-events: stroke;
    cursor: pointer;
}

.mw-cable-ghost {
    stroke-dasharray: 6 6;
    opacity: .6;
    filter: none;
}

.mw-cable-pulse {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 24 320;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .mw-cable.is-recent {
        animation: mw-glow 1.4s ease-out;
    }

    .mw-cable-pulse {
        animation: mw-flow 1.4s linear;
    }

    .mw-pill-target.is-connected .mw-port-in::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--primary);
        opacity: 0;
        animation: mw-spark .5s ease-out;
    }
}

@keyframes mw-flow {
    0% { stroke-dashoffset: 344; opacity: 0; }
    15% { opacity: .95; }
    85% { opacity: .95; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes mw-glow {
    0% { stroke-width: 3.5; filter: drop-shadow(0 0 10px var(--primary)); }
    100% { stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--primary-glow)); }
}

@keyframes mw-spark {
    0% { opacity: 1; transform: scale(.6); }
    100% { opacity: 0; transform: scale(1.6); }
}

.mw-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .65rem .9rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, box-shadow .15s;
    z-index: 2;
    touch-action: none;
}

.mw-pill:hover { border-color: var(--primary); }
.mw-pill.is-armed { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.mw-pill.is-connected { border-color: var(--primary); }

.mw-pill-body { flex: 1; min-width: 0; }

.mw-pill-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-pill-sample {
    font-size: .72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-port {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--text-muted);
    transform: translateY(-50%);
    z-index: 3;
}

.mw-port-out { right: -7px; }
.mw-port-in { left: -7px; }

.mw-pill.is-connected .mw-port,
.mw-pill.is-armed .mw-port {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
}

.mw-help { font-size: .78rem; margin-top: 1rem; color: var(--text-muted); }

/* Account-mapping specific: the always-available "Create new account"
   target pill is visually distinct from a real candidate — dashed border,
   not a solid one, so it reads as "the default", not "another one of your
   accounts". Never exclusive (many discovered accounts can point to it at
   once), so it never shows as is-connected the way a real candidate does. */
.mw-pill-newslot {
    border-style: dashed;
    color: var(--text-muted);
}

.mw-pill-newslot .mw-pill-name { color: var(--text-muted); font-weight: 600; }

.amw-modal-wide {
    max-width: 640px !important;
}

@media (min-width: 640px) {
    .amw-modal-wide {
        width: 92vw !important;
    }
}