/* ==========================================================================
   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;

  --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;
}

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

.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);
}

/* ==========================================================================
   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);
}

/* Pie chart container sizing */
.dashboard-card:has(#expensePie) .card-body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
}

#expensePie {
  max-height: 220px !important;
}

/* ==========================================================================
   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: #495057;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
}

/* ==========================================================================
   TRANSACTION TABLE
   ========================================================================== */
.transaction-cell {
  border-left: 3px solid transparent;
  padding: 0.75rem 1rem;
  transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

.transaction-row-clickable:hover .transaction-cell {
  background-color: var(--hover-blue-05);
  border-left-color: var(--blue-accent);
}

.transaction-description {
  color: var(--text-dark);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

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

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

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

.transaction-amount {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
}

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

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

/* ==========================================================================
   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: #495057;
  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: #495057;
  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 */
  .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

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

  .dashboard-card canvas {
    min-height: 280px;
  }

  /* 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;
  }
}

#budgetActualBar {
  min-height: 280px !important;
}