/* ==========================================================================
   THEME TOKENS
   ========================================================================== */
:root {
  --primary-color: #2563eb;
  --primary-hover: #0f4ed8;

  --border-subtle: rgba(15, 23, 42, 0.04);
  --shadow-soft: 0 10px 22px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 12px 28px rgba(15, 23, 42, 0.06);

  --text-muted: #6c757d;
  --text-dark: #212529;
  --icon-color: #374151;
  --section-title-color: #495057;

  --hover-blue-03: rgba(0, 123, 255, 0.03);
  --hover-blue-05: rgba(0, 123, 255, 0.05);
  --hover-blue-10: rgba(0, 123, 255, 0.1);
  --blue-accent: #007bff;

  /* Progress / semantic colors (centralized for maintainability) */
  --good: #198754;
  --bad: #dc3545;
  --neutral: #6c757d;
  --on-target: #0d6efd;

  --surface: #fff;
  --surface-muted: #f8f9fa;
  --border-strong: #dee2e6;

  color-scheme: light;
}

/* ==========================================================================
   NAV / BRANDING
   ========================================================================== */
.fin-navbar {
  background-color: var(--primary-color);
}

/* Profile switcher: white icons/text, but don't let Bootstrap hover fill turn it solid white */
.fin-navbar #profileDropdown {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background-color: transparent;
}

.fin-navbar #profileDropdown i,
.fin-navbar #currentProfileLabel,
.fin-navbar #currentProfileLabel i {
  color: #fff;
}

.fin-navbar #profileDropdown:hover,
.fin-navbar #profileDropdown:focus,
.fin-navbar #profileDropdown.show {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

.fin-navbar #profileDropdown:hover i,
.fin-navbar #profileDropdown:focus i,
.fin-navbar #profileDropdown.show i,
.fin-navbar #profileDropdown:hover #currentProfileLabel,
.fin-navbar #profileDropdown:focus #currentProfileLabel,
.fin-navbar #profileDropdown.show #currentProfileLabel {
  color: #fff;
}

.main-logo {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-fin {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.btn-fin:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

.btn-fin:focus,
.btn-fin:active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(46, 53, 81, 0.5);
  color: #fff;
}

/* ==========================================================================
   COLLAPSIBLE SECTIONS
   ========================================================================== */
.collapse-toggle {
  cursor: pointer;
  user-select: none;
}

.collapse-toggle:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.collapse-icon {
  transition: transform 0.2s ease-in-out;
}

.collapse-icon.collapsed {
  transform: rotate(-90deg);
}

.tx-advanced-panel {
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  margin-top: 0.25rem;
}

.tx-advanced-panel .collapse-toggle:focus {
  outline: none;
  box-shadow: none;
}

.tx-advanced-panel .collapse-toggle:hover {
  background-color: transparent;
}

/* ==========================================================================
   CARDS / KPI TILES
   ========================================================================== */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 10px 14px;
}

.kpi-label {
  color: #6b7280;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.kpi-value {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Dashboard cards */
.dashboard-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

/* Current month breakdown: match height of donut vs category bar cards */
.dashboard-breakdown-row .dashboard-chart-body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
}

.dashboard-breakdown-row .dashboard-chart-body canvas {
  max-height: 240px;
  width: 100% !important;
}

/* Budget vs actual: per-category paired bars */
.budget-vs-actual {
  --bva-track-bg: rgba(148, 163, 184, 0.22);
}

.bva-row + .bva-row {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.bva-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.bva-barline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.bva-barline:last-child {
  margin-bottom: 0;
}

.bva-barlabel {
  flex: 0 0 3.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #64748b;
}

.bva-track {
  flex: 1 1 auto;
  height: 11px;
  border-radius: 999px;
  background: var(--bva-track-bg);
  overflow: hidden;
}

.bva-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 0;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.bva-amount {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #475569;
  max-width: 38%;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .bva-amount {
    font-size: 0.68rem;
    max-width: 42%;
  }
}

/* ==========================================================================
   TABLES: BASE / SHARED
   ========================================================================== */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

/* Cleaner row separators for Budget + Transactions */
#budgetTable tbody tr,
#txTable tbody tr {
  border-bottom: 1px solid #f1f3f5;
}

#budgetTable tbody tr:last-child,
#txTable tbody tr:last-child {
  border-bottom: none;
}

/* Bootstrap section divider rows */
tr.table-secondary {
  border-top: 2px solid var(--border-strong);
}

tr.table-secondary:first-child {
  border-top: none;
}

/* ==========================================================================
   BUDGET TABLE
   ========================================================================== */

/* Section headers (Income, Expenses, etc.) */
.budget-section-header {
  background: linear-gradient(135deg, var(--surface-muted) 0%, #e9ecef 100%);
  border-bottom: 1px solid var(--border-strong);
  border-top: 2px solid var(--border-strong);
}

.budget-section-header:first-child {
  border-top: none;
}

.budget-section-title {
  color: var(--section-title-color);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
}

/* ==========================================================================
   TRANSACTION TABLE
   ========================================================================== */
.transaction-cell {
  border-left: none !important;
  box-shadow: inset 3px 0 0 transparent;
  padding: 0.85rem 1rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.transaction-row-clickable:hover .transaction-cell {
  background-color: var(--hover-blue-05);
  box-shadow: inset 3px 0 0 var(--blue-accent);
}

.transaction-description {
  color: var(--text-dark);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.transaction-subtitle {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 0.8rem;
  justify-content: space-between;
  line-height: 1.35;
}

.transaction-subtitle-left {
  flex-grow: 1;
}

.transaction-amount-container {
  margin-left: 16px;
  min-width: 110px;
  text-align: right;
}

.transaction-amount {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}

.transaction-date {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: right;
}

/* Details text below main content */
.transaction-details {
  font-size: 0.75rem;
  line-height: 1.2;
  margin-top: 2px;
}

/* Quieter row separators (dashboard + budget tx lists) */
.table.table-sm tbody tr.transaction-row-clickable > td,
#txTable tbody tr > td.transaction-cell {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

.table.table-sm tbody tr.transaction-row-clickable:last-child > td,
#txTable tbody tr:last-child > td.transaction-cell {
  border-bottom: none;
}

/* ==========================================================================
   ACCOUNTS TABLE
   ========================================================================== */
#accountsTable {
  border: none;
}

#accountsTable tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#accountsTable tbody tr:last-child {
  border-bottom: none;
}

.account-section-header {
  background: linear-gradient(135deg, var(--surface-muted) 0%, #e9ecef 100%);
  border-bottom: 1px solid var(--border-strong);
  border-top: 2px solid var(--border-strong);
}

.account-section-header:first-child {
  border-top: none;
}

.account-section-title {
  color: var(--section-title-color);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
}

.account-row-clickable {
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, border-left-color 0.2s ease, opacity 0.2s ease;
}

.account-row-clickable:hover {
  background-color: var(--hover-blue-03);
  border-left-color: var(--blue-accent);
}

.account-row-inactive {
  background-color: rgba(0, 0, 0, 0.02);
  opacity: 0.5;
}

.account-row-inactive:hover {
  background-color: var(--hover-blue-05);
  opacity: 0.7;
}

.account-name-cell {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.account-balance-cell {
  padding: 0.75rem 1rem;
  text-align: right;
  vertical-align: middle;
}

.account-name {
  color: var(--text-dark);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.account-subtitle {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.25rem;
}

.account-balance {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 600;
}

/* ==========================================================================
   CATEGORIES TABLE
   ========================================================================== */
#categoriesTable {
  border: none;
}

#categoriesTable tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#categoriesTable tbody tr:last-child {
  border-bottom: none;
}

.category-section-header {
  background: linear-gradient(135deg, var(--surface-muted) 0%, #e9ecef 100%);
  border-bottom: 1px solid var(--border-strong);
  border-top: 2px solid var(--border-strong);
}

.category-section-header:first-child {
  border-top: none;
}

.category-section-title {
  color: var(--section-title-color);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
}

.category-row-clickable {
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, border-left-color 0.2s ease, opacity 0.2s ease;
}

.category-row-clickable:hover {
  background-color: var(--hover-blue-03);
  border-left-color: var(--blue-accent);
}

.category-row-inactive {
  background-color: rgba(0, 0, 0, 0.02);
  opacity: 0.5;
}

.category-row-inactive:hover {
  background-color: var(--hover-blue-05);
  opacity: 0.7;
}

.category-cell {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.category-name {
  color: var(--text-dark);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ==========================================================================
   RULES TABLE
   ========================================================================== */
#rulesTable {
  border: none;
}

#rulesTable tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#rulesTable tbody tr:last-child {
  border-bottom: none;
}

#rulesTable tbody tr:hover {
  background-color: var(--hover-blue-03);
}

.rule-row-clickable {
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, border-left-color 0.2s ease, opacity 0.2s ease;
}

.rule-row-clickable:hover {
  background-color: var(--hover-blue-03);
  border-left-color: var(--blue-accent);
}

.rule-row-inactive {
  background-color: rgba(0, 0, 0, 0.02);
  opacity: 0.5;
}

.rule-row-inactive:hover {
  background-color: var(--hover-blue-05);
  opacity: 0.7;
}

.rule-keyword-cell {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  width: 60%;
}

.rule-category-cell {
  padding: 0.75rem 1rem;
  text-align: right;
  vertical-align: middle;
  width: 40%;
}

.rule-keyword {
  color: var(--text-dark);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.rule-category {
  color: var(--text-dark);
  font-size: 0.95rem;
  font-weight: 500;
}

.rule-subtitle {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.25rem;
}

/* Category Cards */
.category-card {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
  min-height: 70px;
  display: flex;
  align-items: center;
}

.category-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
  transform: translateY(-2px);
}

.category-card-inactive {
  opacity: 0.6;
  background: #f9fafb;
}

/* Rule Cards */
.rule-card {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
  min-height: 90px;
}

.rule-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
  transform: translateY(-2px);
}

.rule-card-inactive {
  opacity: 0.6;
  background: #f9fafb;
}

/* ==========================================================================
   ANNUAL VIEW
   ========================================================================== */

/* Controls */
#monthlyPeriodControls {
  display: inline-block;
}

#annualPeriodControls {
  display: none;
}

/* Month picker (base) */
#monthPicker {
  font-size: 0.875rem;
  text-align: center;
  width: 140px;
}

/* Annual summary table */
#annualSummaryTable {
  font-size: 0.7rem;
}

#annualSummaryTable th,
#annualSummaryTable td {
  padding: 0.3rem 0.25rem;
  vertical-align: middle;
  white-space: nowrap;
}

#annualSummaryTable thead th {
  background: var(--surface-muted);
  font-size: 0.7rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Sticky left column */
#annualSummaryTable .sticky-col {
  background: var(--surface);
  font-weight: 600;
  left: 0;
  max-width: 180px;
  min-width: 180px;
  overflow: hidden;
  position: sticky;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 10;
}

#annualSummaryTable thead .sticky-col {
  background: var(--surface-muted);
  z-index: 11;
}

/* Total column (right-most) */
#annualSummaryTable tbody tr td:last-child,
#annualSummaryTable thead tr th:last-child {
  background: var(--surface-muted);
  font-weight: 600;
  max-width: 85px;
  min-width: 85px;
}

/* Month cells */
.month-cell {
  font-size: 0.7rem;
  max-width: 75px;
  min-width: 75px;
}

.month-budget {
  color: var(--text-muted);
  font-size: 0.6rem;
  line-height: 1.1;
  margin-top: 1px;
}

.month-actual {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Category name wrapper in sticky col */
#annualSummaryTable .sticky-col .category-name-wrapper {
  align-items: center;
  display: flex;
  max-width: 100%;
}

#annualSummaryTable .sticky-col .category-name-wrapper i {
  flex-shrink: 0;
  font-size: 0.7rem;
  margin-right: 6px;
  width: 16px;
}

#annualSummaryTable .sticky-col .category-name-text {
  flex: 1;
  font-size: 0.75rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reduce icon size in table */
#annualSummaryTable i.fa-briefcase,
#annualSummaryTable i.fa-wallet,
#annualSummaryTable i.fa-car-side,
#annualSummaryTable i.fa-home,
#annualSummaryTable i.fa-utensils,
#annualSummaryTable i[class*="fa-"] {
  font-size: 0.7rem !important;
}

/* Annual month status colors
   Conflict fix: keep these "status" classes authoritative by using tokens */
.month-actual.over-budget { color: var(--bad); }
.month-actual.under-budget { color: var(--good); }
.month-actual.on-budget { color: var(--on-target); }

/* If you also apply Bootstrap text-* classes to .month-actual, keep them consistent */
.month-actual.text-success { color: var(--good) !important; }
.month-actual.text-danger { color: var(--bad) !important; }
.month-actual.text-primary { color: var(--on-target) !important; }
.month-actual.text-muted { color: var(--neutral) !important; }

/* Variance colors */
.variance-positive { color: var(--good); }
.variance-negative { color: var(--bad); }
.variance-neutral { color: var(--neutral); }

/* ==========================================================================
   ICONS
   ========================================================================== */
.category-icon-sm,
.category-icon-md,
.category-icon-lg {
  color: var(--icon-color);
}

.category-icon-sm { font-size: 14px; }
.category-icon-md { font-size: 18px; }
.category-icon-lg { font-size: 24px; }

/* ==========================================================================
   COLOR UTILITIES (Bootstrap override parity)
   NOTE: Keeping these, but prefer using Bootstrap classes directly where possible.
   ========================================================================== */
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-muted { color: var(--text-muted) !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* <= 1200px (Annual view sizing) */
@media (max-width: 1200px) {
  .month-cell {
    max-width: 65px;
    min-width: 65px;
  }

  .month-actual { font-size: 0.7rem; }
  .month-budget { font-size: 0.55rem; }
}

/* <= 768px */
@media (max-width: 768px) {
  /* Compact table cells */
  .table-sm td,
  .table-sm th {
    font-size: 0.75rem;
    padding: 0.25rem 0.15rem;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Budget table: keep grid tight + sticky first column */
  #budgetTable th,
  #budgetTable td {
    white-space: nowrap;
  }

  #budgetTable th:first-child,
  #budgetTable td:first-child {
    background-color: var(--surface);
    left: 0;
    max-width: 90px;
    min-width: 70px;
    position: sticky;
    white-space: normal;
    word-wrap: break-word;
    z-index: 1;
  }

  #budgetTable thead th:first-child {
    background-color: var(--surface-muted);
  }

  #budgetTable .table-secondary td:first-child {
    background-color: #e2e3e5 !important;
  }

  #budgetTable .table-light td:first-child,
  #budgetTable tr.budget-total-row td:first-child {
    background-color: var(--surface-muted) !important;
  }

  #budgetTable th:not(:first-child),
  #budgetTable td:not(:first-child) {
    font-size: 0.7rem;
    min-width: 70px;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
  }

  /* Total row mobile adjustments */
  .budget-total-row td {
    font-size: 0.75rem;
    padding-bottom: 0.4rem;
    padding-top: 0.4rem;
  }

  .budget-total-row td:first-child {
    padding-left: 0.75rem;
  }

  /* Transaction table: allow wrapping + sticky first column */
  #txTable th,
  #txTable td {
    white-space: normal;
    word-wrap: break-word;
  }

  #txTable th:first-child,
  #txTable td:first-child {
    background-color: var(--surface);
    left: 0;
    max-width: 65px;
    min-width: 55px;
    position: sticky;
    z-index: 1;
  }

  #txTable thead th:first-child {
    background-color: var(--surface-muted);
  }

  /* Make date column more compact */
  #txTable th:nth-child(1),
  #txTable td:nth-child(1) {
    font-size: 0.7rem;
  }

  /* Hide account column on small screens */
  #txTable th:nth-child(2),
  #txTable td:nth-child(2) {
    display: none;
  }

  #txTable th:nth-child(3),
  #txTable td:nth-child(3) {
    font-size: 0.7rem;
    max-width: 90px;
  }

  #txTable th:nth-child(4),
  #txTable td:nth-child(4) {
    max-width: 130px;
  }

  #txTable th:nth-child(5),
  #txTable td:nth-child(5) {
    max-width: 80px;
    min-width: 65px;
  }

  /* Budget / TX text scaling */
  .budget-section-title {
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
  }

  .budget-category-name,
  .transaction-description {
    font-size: 0.85rem;
  }

  .budget-subtitle,
  .budget-subtitle-left,
  .budget-subtitle-right,
  .transaction-subtitle,
  .transaction-date {
    font-size: 0.72rem;
  }

  .budget-amount,
  .transaction-amount {
    font-size: 0.9rem;
  }

  .budget-category-cell,
  .budget-amount-cell,
  .transaction-cell {
    padding: 0.6rem 0.75rem;
  }

  .budget-amount-cell {
    width: 35%;
  }

  /* Accounts */
  .account-name { font-size: 0.85rem; }
  .account-subtitle { font-size: 0.72rem; }
  .account-balance { font-size: 0.95rem; }
  .account-section-title {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
  .account-name-cell,
  .account-balance-cell {
    padding: 0.5rem 0.75rem;
  }

  /* Categories */
  .category-name { font-size: 0.85rem; }
  .category-section-title {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
  .category-cell { padding: 0.5rem 0.75rem; }

  /* Rules */
  .rule-keyword,
  .rule-category { font-size: 0.85rem; }
  .rule-subtitle { font-size: 0.72rem; }
  .rule-keyword-cell,
  .rule-category-cell { padding: 0.5rem 0.75rem; }
}

/* <= 576px */
@media (max-width: 576px) {
  /* KPI tiles */
  .kpi-card { padding: 8px 10px; }
  .kpi-label { font-size: 0.7rem; }
  .kpi-value { font-size: 0.9rem; }
  .kpi-budget { font-size: 0.7rem !important; }

  /* Further compress tables */
  .table-sm td,
  .table-sm th {
    font-size: 0.7rem;
    padding: 0.2rem 0.1rem;
  }

  /* Reduce button sizes (navbar controls overridden below) */
  .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  .fin-navbar #profileDropdown {
    font-size: 0.95rem;
    padding: 0.45rem 0.75rem;
    line-height: 1.3;
  }

  .fin-navbar #profileDropdown i,
  .fin-navbar #currentProfileLabel i {
    font-size: 1rem;
  }

  .fin-navbar #userDropdown {
    font-size: 1.15rem;
    padding: 0.45rem 0.7rem;
    line-height: 1.2;
  }

  .fin-navbar #userDropdown i {
    font-size: 1.2rem;
  }

  .fin-navbar .d-flex.align-items-center {
    gap: 0.65rem !important;
  }

  /* Dashboard cards more compact (scoped) */
  .dashboard-card .card-body,
  .dashboard-card .card-header {
    padding: 0.5rem !important;
  }

  .dashboard-breakdown-row .dashboard-chart-body {
    min-height: 240px;
  }

  /* Period controls / picker */
  #currentPeriodDisplay { width: 100%; }

  /* Conflict fix: single source-of-truth for display here */
  #monthlyPeriodControls { display: inline-flex !important; }
  #monthlyPeriodControls.hidden { display: none !important; }
  #annualPeriodControls.active { display: inline-flex !important; }

  #monthPicker {
    font-size: 0.8rem;
    width: 130px !important;
  }

  #currentMonthLabel { font-size: 0.9rem; }

  .btn-group-sm .btn {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
  }

  /* Budget table even tighter */
  #budgetTable th:first-child,
  #budgetTable td:first-child {
    font-size: 0.65rem;
    max-width: 80px;
    min-width: 65px;
  }

  #budgetTable th:not(:first-child),
  #budgetTable td:not(:first-child) {
    font-size: 0.65rem;
    min-width: 62px;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
  }

  .budget-total-row td {
    font-size: 0.7rem;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
  }

  .budget-total-row td:first-child {
    padding-left: 0.5rem;
  }

  /* Budget / TX text scaling */
  .budget-section-title {
    font-size: 0.8rem;
    padding: 0.5rem;
  }

  .budget-category-name,
  .transaction-description { font-size: 0.8rem; }

  .budget-subtitle,
  .budget-subtitle-left,
  .budget-subtitle-right,
  .transaction-subtitle,
  .transaction-date { font-size: 0.7rem; }

  .budget-amount,
  .transaction-amount { font-size: 0.85rem; }

  .budget-category-cell,
  .budget-amount-cell,
  .transaction-cell { padding: 0.5rem !important; }

  .budget-amount-cell { width: 40%; }

  .transaction-amount-container { min-width: 100px; }

  /* Transaction table tighter */
  #txTable th:first-child,
  #txTable td:first-child {
    max-width: 55px;
    min-width: 48px;
  }

  #txTable th:nth-child(3),
  #txTable td:nth-child(3) {
    font-size: 0.65rem;
    max-width: 75px;
  }

  #txTable th:nth-child(4),
  #txTable td:nth-child(4) {
    font-size: 0.65rem;
    max-width: 110px;
  }

  #txTable th:nth-child(5),
  #txTable td:nth-child(5) {
    max-width: 70px;
    min-width: 55px;
  }

  /* Icons + details */
  .category-icon-container {
    height: 32px;
    width: 32px;
  }

  .category-icon-md { font-size: 16px; }

  .budget-details,
  .transaction-details { font-size: 0.7rem; }
}

/* ==========================================================================
   FIXED: removed invalid nested media query from your original CSS.
   If you need this desktop-only rule, keep it at top-level (as below).
   ========================================================================== */
@media (min-width: 992px) {
  #weeklyLine {
    min-height: 320px;
  }
}

.budget-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
}

@media (max-width: 991px) {
  .budget-grid-compact {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.budget-donut-compact {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  min-height: 100px;
}

.budget-donut-compact:hover {
  border-color: #0d6efd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.budget-donut-total {
  background: #f8f9fa;
  border-color: #495057;
  cursor: default;
}

.budget-donut-total:hover {
  border-color: #495057;
  box-shadow: none;
  transform: none;
}

.budget-donut-chart-mini {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.budget-donut-center-mini {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.budget-donut-percentage-mini {
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
  line-height: 1;
}

.budget-donut-info-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.budget-donut-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.budget-donut-header i {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}

.budget-donut-name-compact {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.budget-donut-actual {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.budget-donut-budget-muted {
  font-size: 0.875rem;
  color: #6c757d;
  line-height: 1.3;
}

/* Mobile optimizations */
@media (max-width: 991px) {
  .budget-donut-compact {
    padding: 0.875rem;
    gap: 0.875rem;
    min-height: 90px;
  }
  
  .budget-donut-chart-mini {
    width: 65px;
    height: 65px;
  }
  
  .budget-donut-percentage-mini {
    font-size: 1rem;
  }
  
  .budget-donut-name-compact {
    font-size: 0.9rem;
  }
  
  .budget-donut-actual {
    font-size: 0.95rem;
  }
  
  .budget-donut-budget-muted {
    font-size: 0.85rem;
  }
}

/* Clean finance-style budget meter cards */
.budget-meter-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.budget-meter-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.budget-meter-total {
  background: #f8fafc;
  border-color: #cbd5e1;
  cursor: default;
}

.budget-meter-total:hover {
  border-color: #cbd5e1;
  box-shadow: none;
  transform: none;
}

.budget-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.budget-meter-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  line-height: 1.1;
}

.budget-meter-pill-good {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.budget-meter-pill-bad {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.budget-meter-pill-neutral {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

.budget-meter-track {
  height: 10px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.55rem;
}

.budget-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
}

.budget-meter-fill-good {
  background: linear-gradient(90deg, #86efac, #4ade80);
}

.budget-meter-fill-bad {
  background: linear-gradient(90deg, #fca5a5, #fb7185);
}

.budget-meter-fill-neutral {
  background: #cbd5e1;
}

.budget-meter-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.budget-meter-footnote {
  font-size: 0.76rem;
  margin-top: 0.3rem;
}

@media (max-width: 991px) {
  .budget-meter-card {
    padding: 0.8rem 0.9rem;
  }

  .budget-meter-values .budget-donut-actual {
    font-size: 0.9rem;
  }

  .budget-meter-values .budget-donut-budget-muted {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   DARK THEME
   Dark grey surfaces (not pure black); Bootstrap data-bs-theme="dark" handles
   most components; these tokens cover custom app chrome.
   ========================================================================== */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --primary-color: #3b82f6;
  --primary-hover: #60a5fa;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow-soft: 0 10px 22px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.4);

  --text-muted: #9ca3af;
  --text-dark: #e5e7eb;
  --icon-color: #d1d5db;
  --section-title-color: #e9ecef;

  --hover-blue-03: rgba(59, 130, 246, 0.08);
  --hover-blue-05: rgba(59, 130, 246, 0.12);
  --hover-blue-10: rgba(59, 130, 246, 0.2);
  --blue-accent: #60a5fa;

  --good: #34d399;
  --bad: #f87171;
  --neutral: #9ca3af;
  --on-target: #60a5fa;

  --surface: #2b3035;
  --surface-muted: #343a40;
  --border-strong: #495057;

  --bs-body-bg: #212529;
  --bs-body-color: #e9ecef;
  --bs-secondary-bg: #2b3035;
  --bs-tertiary-bg: #343a40;
  --bs-border-color: #495057;
  --bs-card-bg: #2b3035;
  --bs-card-cap-bg: #343a40;
  --bs-modal-bg: #2b3035;
  --bs-modal-border-color: #495057;
}

[data-bs-theme="dark"] body {
  background-color: #212529 !important;
  color: var(--text-dark);
}

/* Keep Bootstrap "light" utility surfaces readable in dark mode */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--surface-muted) !important;
  color: var(--text-dark) !important;
}

[data-bs-theme="dark"] .table-light {
  --bs-table-bg: #343a40;
  --bs-table-color: #e9ecef;
  --bs-table-border-color: #495057;
}

[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: #343a40;
  --bs-table-color: #e9ecef;
}

[data-bs-theme="dark"] .btn-outline-dark {
  color: #e9ecef;
  border-color: #adb5bd;
}

[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus {
  color: #212529;
  background-color: #e9ecef;
  border-color: #e9ecef;
}

[data-bs-theme="dark"] .fin-navbar {
  background-color: var(--primary-color);
}

[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .dashboard-card,
[data-bs-theme="dark"] .category-card,
[data-bs-theme="dark"] .rule-card,
[data-bs-theme="dark"] .budget-meter-card,
[data-bs-theme="dark"] .budget-donut-card,
[data-bs-theme="dark"] .budget-donut-card-compact {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-dark);
  box-shadow: var(--shadow-soft);
}

[data-bs-theme="dark"] .kpi-label,
[data-bs-theme="dark"] .bva-title,
[data-bs-theme="dark"] .bva-barlabel,
[data-bs-theme="dark"] .bva-amount,
[data-bs-theme="dark"] .budget-donut-budget-muted,
[data-bs-theme="dark"] .account-subtitle,
[data-bs-theme="dark"] .month-budget {
  color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .account-section-header,
[data-bs-theme="dark"] .budget-section-header,
[data-bs-theme="dark"] .category-section-header,
[data-bs-theme="dark"] .tx-section-header {
  background: linear-gradient(90deg, #343a40, #2b3035) !important;
  color: var(--section-title-color);
  border-color: var(--border-strong);
}

[data-bs-theme="dark"] .account-section-title,
[data-bs-theme="dark"] .budget-section-title,
[data-bs-theme="dark"] .category-section-title {
  color: var(--section-title-color) !important;
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-dark);
  --bs-table-border-color: var(--border-strong);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
  border-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .table.table-sm tbody tr.transaction-row-clickable > td,
[data-bs-theme="dark"] #txTable tbody tr > td.transaction-cell {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .transaction-cell {
  border-left: none !important;
  box-shadow: inset 3px 0 0 transparent;
}

[data-bs-theme="dark"] .transaction-row-clickable:hover .transaction-cell {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 3px 0 0 var(--blue-accent);
}

[data-bs-theme="dark"] .transaction-amount.text-success,
[data-bs-theme="dark"] .text-success {
  color: var(--good) !important;
}

[data-bs-theme="dark"] .transaction-amount.text-danger,
[data-bs-theme="dark"] .text-danger {
  color: var(--bad) !important;
}

[data-bs-theme="dark"] #txTable tbody tr,
[data-bs-theme="dark"] #budgetTable tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .account-row-clickable:hover,
[data-bs-theme="dark"] .tx-row-clickable:hover,
[data-bs-theme="dark"] tr[onclick]:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .sticky-col,
[data-bs-theme="dark"] .annual-table .sticky-col {
  background-color: var(--surface) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: #212529;
  border-color: var(--border-strong);
  color: var(--text-dark);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #212529;
  border-color: var(--primary-color);
  color: var(--text-dark);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border-strong);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-dark);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item.active {
  background-color: rgba(59, 130, 246, 0.2);
  color: #fff;
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--surface);
  color: var(--text-dark);
  border-color: var(--border-strong);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--border-strong);
}

[data-bs-theme="dark"] .card {
  background-color: var(--surface);
  border-color: var(--border-strong);
}

[data-bs-theme="dark"] .card-header {
  background-color: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--text-dark);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-dark);
}

[data-bs-theme="dark"] .budget-meter-track {
  background: rgba(148, 163, 184, 0.2);
}

[data-bs-theme="dark"] .budget-meter-pill-neutral {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}

[data-bs-theme="dark"] .tx-advanced-panel {
  border-top-color: var(--border-strong);
}

[data-bs-theme="dark"] .text-dark {
  color: var(--text-dark) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
  border-color: var(--border-strong) !important;
}

[data-bs-theme="dark"] .hr,
[data-bs-theme="dark"] hr {
  border-color: var(--border-strong);
  opacity: 0.4;
}

/* ==========================================================================
   MOBILE APP SHELL (phone / PWA / Capacitor)
   Desktop keeps .fin-desktop-nav; mobile uses floating actions + bottom tabs.
   ========================================================================== */
:root {
  --fin-mobile-topbar-h: 52px;
  --fin-bottom-nav-h: 64px;
}

.fin-mobile-topbar,
.fin-bottom-nav {
  display: none;
}

@media (max-width: 991.98px) {
  .fin-desktop-nav {
    display: none !important;
  }

  .fin-mobile-topbar {
    align-items: flex-start;
    background: transparent;
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 0 8px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
  }

  .fin-mobile-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
    pointer-events: auto;
  }

  .fin-mobile-icon-btn {
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-dark, #212529);
    display: inline-flex;
    font-size: 1.55rem;
    height: 44px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    width: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .fin-mobile-icon-btn:hover,
  .fin-mobile-icon-btn:focus,
  .fin-mobile-icon-btn:active {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--primary-color);
    outline: none;
  }

  .fin-mobile-profile-btn.dropdown-toggle::after {
    display: none;
  }

  .fin-mobile-profile-btn .fin-profile-label,
  .fin-mobile-profile-btn .fin-profile-label i {
    font-size: inherit;
    line-height: 1;
  }

  .fin-mobile-settings-btn.active {
    color: var(--primary-color);
  }

  .fin-bottom-nav {
    background: var(--surface, #fff);
    border-top: 1px solid var(--border-strong, #dee2e6);
    bottom: 0;
    display: flex;
    height: calc(var(--fin-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    left: 0;
    padding: 0 2px env(safe-area-inset-bottom, 0px);
    position: fixed;
    right: 0;
    z-index: 1040;
  }

  .fin-bottom-nav-item {
    align-items: center;
    color: var(--text-muted, #6c757d);
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 0.68rem;
    font-weight: 500;
    gap: 2px;
    justify-content: center;
    min-height: 44px;
    padding: 6px 2px;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .fin-bottom-nav-item i {
    font-size: 1.15rem;
    line-height: 1;
  }

  .fin-bottom-nav-item:hover,
  .fin-bottom-nav-item:focus {
    color: var(--primary-color);
    text-decoration: none;
  }

  .fin-bottom-nav-item.active {
    color: var(--primary-color);
    font-weight: 600;
  }

  body.bg-body,
  body.bg-light {
    padding-bottom: calc(var(--fin-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
    padding-top: calc(var(--fin-mobile-topbar-h) + env(safe-area-inset-top, 0px));
  }

  #pwa-floating-install {
    bottom: calc(var(--fin-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

/* Installed PWA / Capacitor: keep mobile shell even on wider tablets */
body.pwa-standalone .fin-desktop-nav,
body.capacitor-app .fin-desktop-nav {
  display: none !important;
}

body.pwa-standalone .fin-mobile-topbar,
body.capacitor-app .fin-mobile-topbar {
  align-items: flex-start;
  background: transparent;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 0 8px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1040;
}

body.pwa-standalone .fin-mobile-actions,
body.capacitor-app .fin-mobile-actions {
  align-items: center;
  display: flex;
  gap: 0.25rem;
  pointer-events: auto;
}

body.pwa-standalone .fin-mobile-icon-btn,
body.capacitor-app .fin-mobile-icon-btn {
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-dark, #212529);
  display: inline-flex;
  font-size: 1.55rem;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  width: 44px;
}

body.pwa-standalone .fin-mobile-icon-btn:hover,
body.capacitor-app .fin-mobile-icon-btn:hover,
body.pwa-standalone .fin-mobile-icon-btn:focus,
body.capacitor-app .fin-mobile-icon-btn:focus {
  background: transparent;
  color: var(--primary-color);
}

body.pwa-standalone .fin-mobile-profile-btn.dropdown-toggle::after,
body.capacitor-app .fin-mobile-profile-btn.dropdown-toggle::after {
  display: none;
}

body.pwa-standalone .fin-bottom-nav,
body.capacitor-app .fin-bottom-nav {
  background: var(--surface, #fff);
  border-top: 1px solid var(--border-strong, #dee2e6);
  bottom: 0;
  display: flex;
  height: calc(var(--fin-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
  left: 0;
  padding: 0 2px env(safe-area-inset-bottom, 0px);
  position: fixed;
  right: 0;
  z-index: 1040;
}

body.pwa-standalone.bg-body,
body.pwa-standalone.bg-light,
body.capacitor-app.bg-body,
body.capacitor-app.bg-light {
  padding-bottom: calc(var(--fin-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
  padding-top: calc(var(--fin-mobile-topbar-h) + env(safe-area-inset-top, 0px));
}

body.pwa-standalone .fin-bottom-nav-item,
body.capacitor-app .fin-bottom-nav-item {
  align-items: center;
  color: var(--text-muted, #6c757d);
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.68rem;
  font-weight: 500;
  gap: 2px;
  justify-content: center;
  min-height: 44px;
  padding: 6px 2px;
  text-align: center;
  text-decoration: none;
}

body.pwa-standalone .fin-bottom-nav-item.active,
body.capacitor-app .fin-bottom-nav-item.active,
body.pwa-standalone .fin-bottom-nav-item:hover,
body.capacitor-app .fin-bottom-nav-item:hover {
  color: var(--primary-color);
  text-decoration: none;
}

body.pwa-standalone .fin-bottom-nav-item.active,
body.capacitor-app .fin-bottom-nav-item.active {
  font-weight: 600;
}

[data-bs-theme="dark"] .fin-bottom-nav {
  background: var(--surface);
  border-top-color: var(--border-strong);
}

[data-bs-theme="dark"] .fin-bottom-nav-item {
  color: var(--text-muted);
}

[data-bs-theme="dark"] .fin-bottom-nav-item.active,
[data-bs-theme="dark"] .fin-bottom-nav-item:hover,
[data-bs-theme="dark"] .fin-bottom-nav-item:focus {
  color: var(--primary-hover, #60a5fa);
}

[data-bs-theme="dark"] .fin-mobile-icon-btn {
  color: var(--text-dark);
}

[data-bs-theme="dark"] .fin-mobile-icon-btn:hover,
[data-bs-theme="dark"] .fin-mobile-icon-btn:focus,
[data-bs-theme="dark"] .fin-mobile-settings-btn.active {
  color: var(--primary-hover, #60a5fa);
}

.tracking-group-title {
  color: var(--section-title-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0.75rem;
  text-transform: uppercase;
}

.sub-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: inherit;
  display: block;
  padding: 0.9rem 1rem;
  text-align: left;
  width: 100%;
}

.sub-card:hover,
.sub-card:focus {
  border-color: var(--primary-color);
  outline: none;
}

.sub-card-inactive {
  opacity: 0.72;
}

.sub-card-name {
  font-weight: 600;
  line-height: 1.3;
}

.sub-card-amount {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

.sub-card-period,
.sub-card-meta,
.sub-card-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.sub-card-meta,
.sub-card-note {
  margin-top: 0.2rem;
}