:root {
  --primary-color: #355872;
  --primary-hover: #2a4559;
  --bg-color: #f7f8f0;
  --sidebar-bg: #f7f8f0;
  --card-bg: #f7f8f0;
  --text-main: #355872;
  --text-muted: #7aaace;
  --border-color: rgba(122, 170, 206, 0.35);
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

html {
  background: linear-gradient(135deg, #355872 0%, #2a4559 100%);
  min-height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

/* Checkbox Styles */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.checkbox-label {
  display: block;
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: var(--card-bg);
  text-align: center;
  font-size: 0.9rem;
}

.checkbox-label:hover {
  border-color: var(--primary-color);
  background-color: rgba(53, 88, 114, 0.05);
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkbox-label.checked {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.checkbox-label.checked:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.checkbox-text {
  line-height: 1.3;
}

/* Sidebar Navigation */
.sidebar {
  width: 260px;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  /* z-index: 1200; */
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 2.5rem;
  padding-left: 0.5rem;
}

.nav-links {
  list-style: none;
}

.nav-links li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.nav-links li:hover {
  background-color: rgba(122, 170, 206, 0.15);
  color: var(--text-main);
}

.nav-links li.active {
  background-color: var(--primary-color);
  color: white;
  box-shadow: 0 4px 12px rgba(53, 88, 114, 0.2);
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 260px;
  padding: 0rem 2rem 2rem 2rem;
  width: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}

h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.user-info {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--primary-color);
  background: #f7f8f0;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(53, 88, 114, 0.2);
  font-size: 0.875rem;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

#tab-name-badge-userinfo {
  background: var(--primary-color);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.8rem;
  margin-right: 0.25rem;
}


@media (max-width: 768px) {
  .user-info {
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    gap: 0.6rem;
  }
}

.header-filters-btn {
  border: 1px solid var(--border-color);
  background: #f7f8f0;
  color: var(--text-muted);
}

.header-filters-btn:hover {
  color: var(--primary-color);
  background: rgba(53, 88, 114, 0.05);
  border-color: rgba(53, 88, 114, 0.25);
}

.header-filters-btn.active {
  color: var(--primary-color);
  background: rgba(53, 88, 114, 0.08);
  border-color: rgba(53, 88, 114, 0.35);
}

#privacy-toggle {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: 50%;
}

#privacy-toggle:hover {
  color: var(--primary-color);
  background: rgba(53, 88, 114, 0.05);
}

body.privacy-mode #privacy-toggle {
  color: var(--primary-color);
}

/* Privacy Mode Blurring */

/* Upcoming Widget positioning */
.upcoming-widget {
  position: relative;
}

body.privacy-mode #total-income,
body.privacy-mode #total-spending,
body.privacy-mode #total-balance,
body.privacy-mode #total-ar,
body.privacy-mode #hero-spending,
body.privacy-mode #hero-income,
body.privacy-mode #hero-this-month-val,
body.privacy-mode #hero-ar-display,
body.privacy-mode .amount-income,
body.privacy-mode .amount-spending,
body.privacy-mode .amount-account_receivable,
body.privacy-mode [class*="amount-"],
body.privacy-mode .transaction-amount .amount,
body.privacy-mode #records-table td:nth-child(5),
body.privacy-mode #records-table td:nth-child(6),
body.privacy-mode #recent-records-table td:nth-child(5),
body.privacy-mode .savings-records-table td:nth-child(3),
body.privacy-mode #stats-table td:nth-child(2),
body.privacy-mode #stats-table td:nth-child(3),
body.privacy-mode #stats-table td:nth-child(4),
body.privacy-mode .kpi-card p,
body.privacy-mode .kpi-details p,
body.privacy-mode .savings-kpis p,
body.privacy-mode .chart-container canvas,
body.privacy-mode .week-stat,
body.privacy-mode .upcoming-amount,
body.privacy-mode .upcoming-income-item .income-amount,
body.privacy-mode .upcoming-income-popup .income-amount,
body.privacy-mode #carry-over-text,
body.privacy-mode #carry-over-hint,
body.privacy-mode .carry-over-section .amount-num,
body.privacy-mode .transaction-card .amount-num,
body.privacy-mode .transaction-amount .amount-num,
body.privacy-mode .dashboard-records-list .amount-num,
body.privacy-mode #record-details-content .detail-value.income,
body.privacy-mode #record-details-content .detail-value.spending,
body.privacy-mode #record-details-content .amount-num,
body.privacy-mode #record-details-content [style*="color: #059669"],
body.privacy-mode #record-details-content [style*="color: #dc2626"],
body.privacy-mode #record-details-content [style*="color: #1e40af"],
body.privacy-mode #record-details-content [style*="text-align: right"] {
  filter: blur(10px) !important;
  color: transparent !important;
  text-shadow: 0 0 10px rgba(30, 41, 59, 0.8) !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Cards & Components */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  margin-bottom: 0.8rem;
}

.card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-main);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-header h3 {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.actions-bar .card-header {
  flex-wrap: nowrap;
  overflow-x: visible;
  /* Prevent clipping of hover transforms and shadows */
  padding-bottom: 0.25rem;
  padding-top: 4px;
  /* Space for hover lift */
}

.actions-bar .card-header::-webkit-scrollbar {
  height: 6px;
}

.actions-bar .card-header::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.actions-bar .card-header #add-record-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Filter Toggle Button */
.filter-toggle-btn {
  position: relative;
  background: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
}

.filter-toggle-btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(53, 88, 114, 0.25);
}

.filter-toggle-btn.active {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: white;
}

/* Floating action buttons (Records / Analytics) */
.fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 950;
  box-shadow: var(--shadow-lg);
  border-radius: 999px;
  padding: 0.6rem 0.85rem;
  min-height: 44px;
  transform: translateZ(0);
  width: auto;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.fab .fab-label {
  white-space: nowrap;
  display: inline;
}

.fab i {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  display: none;
  /* Hide icon in desktop view */
}

/* Font Awesome glyph centering inside its box */
.fab i::before {
  display: block;
  line-height: 1;
}

/* second FAB stacks above the primary */
.fab-secondary {
  bottom: 92px;
}

.tab-content:not(.active) .fab {
  display: none;
}

/* Filter panel displayed when Filters toggled */
.filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Desktop Floating Filter Panel (Full width row) */
@media (min-width: 1024px) {
  .filter-panel {
    position: absolute;
    top: 5.5rem;
    right: 2rem;
    bottom: auto;
    left: 2rem;
    width: auto !important;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    z-index: 100;
    padding: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
  }
  
  .filter-panel .filter-modal-content {
    pointer-events: auto;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--primary-color) !important;
  }
  
  .filter-panel .filter-modal-header {
    background: var(--primary-color);
    padding: 0.75rem 1.5rem;
  }
  
  .filter-panel .filter-modal-header h2 {
    color: white;
    font-size: 1rem;
  }

  .filter-panel .filter-form-body {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
    padding: 1.25rem 1.5rem !important;
    overflow-y: visible !important;
  }

  .filter-panel .modal-actions {
    justify-content: flex-end !important;
    padding: 1rem 1.5rem !important;
  }

  .filter-panel .modal-actions .btn {
    flex: none !important;
    min-width: 120px;
  }
}

.filter-panel .filter-controls-group {
  margin-top: 0;
}

/* Filter options in two columns on desktop */
.filter-panel .filter-controls-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: end;
}

.filter-panel .filter-group {
  min-width: 0;
  width: 100%;
}

/* Ensure buttons span correctly in the grid */
.filter-panel .btn-outline,
.filter-panel .btn-secondary,
.filter-panel #clear-filters,
.filter-panel #analytics-clear-filters,
.filter-panel #dashboard-clear-filters,
.filter-panel .filter-close-btn {
  grid-column: span 2;
  width: 100%;
  margin-top: 0.25rem;
}

/* Floating Filter Card Styles */
.filter-controls-group,
.filter-modal-content {
  width: 100% !important;
  max-width: 500px !important;
  max-height: 90vh !important;
  background: #f7f8f0 !important;
  padding: 0 !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  animation: slideDown 0.3s ease-out;
}

.filter-modal-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: #f7f8f0;
}

.filter-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-color);
}

.filter-form-body,
.filter-controls-group > .filter-group {
  padding: 1rem 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.filter-modal-content .modal-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.75rem !important;
  padding: 1.25rem 1.5rem !important;
  border-top: 1px solid var(--border-color) !important;
  background: white !important;
  margin-top: 0 !important;
  order: 100;
}

.filter-modal-content .modal-actions .btn,
.filter-controls-group .modal-actions .btn {
  flex: 1 !important;
  margin: 0 !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 140px;
  flex: 1 1 0;
}

.filter-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.filter-group input[type="date"],
.filter-group select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: white;
  font-size: 0.875rem;
  min-width: 100%;
  height: 40px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.filter-group input[type="date"]:hover,
.filter-group select:hover {
  border-color: var(--primary-color);
  background: rgba(53, 88, 114, 0.02);
}

.filter-group input[type="date"]:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(53, 88, 114, 0.1);
  background: white;
}

#filter-category,
#analytics-filter-category {
  min-width: 150px;
  text-overflow: ellipsis;
}

.filter-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

#clear-filters {
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  height: 40px;
  white-space: nowrap;
  margin-top: 1rem;
}

/* Analytics filter specific styling */
#analytics .filter-controls-group {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

#analytics .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 140px;
  flex: 1 1 0;
}

#analytics .filter-group select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: white;
  font-size: 0.875rem;
  min-width: 100%;
  height: 40px;
  transition: all 0.2s ease;
}

#analytics .filter-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(53, 88, 114, 0.1);
}

#analytics-clear-filters {
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  height: 40px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .filter-controls-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    overflow-x: visible;
    margin-top: 0.75rem;
  }

  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  .filter-group input[type="date"],
  .filter-group select {
    width: 100%;
    min-width: auto;
    height: 40px;
    font-size: 0.875rem;
  }

  #clear-filters,
  #analytics-clear-filters {
    width: 100%;
    height: 40px;
    justify-content: center;
    font-size: 0.875rem;
  }

  .filter-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }

  /* Filter toggle button mobile styles */
  .filter-toggle-btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  /* Actions bar header stacking */
  .actions-bar .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .actions-bar .card-header::-webkit-scrollbar {
    display: none;
  }

  #add-record-btn {
    order: 1;
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .filter-toggle-btn {
    order: 2;
    width: 100%;
    justify-content: center;
  }

  .filter-controls-group {
    order: 3;
  }

  /* FABs: keep above bottom nav, larger tap targets */
  .fab {
    right: 16px !important;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    min-height: 56px;
    min-width: 56px;
    padding: 0;
    margin: 0 !important;
    border-radius: 8px;
  }

  .fab-secondary {
    bottom: calc(156px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep FAB icon-only on mobile too */
  .fab .fab-label {
    display: none;
  }

  .fab i {
    font-size: 1.35rem;
    display: flex;
    /* Show icon in mobile view */
  }
}

/* Mobile filter panel modal behavior */
@media (max-width: 480px) {
  .filter-panel.active {
    display: flex !important;
  }

  .filter-panel.active {
    display: flex !important;
  }

  .filter-panel .filter-controls-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease-out;
    padding: 0 !important;
    gap: 0;
    position: relative;
    z-index: 51;
    margin: auto !important;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }

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

  /* Close button for mobile filter */
  .filter-panel .filter-controls-group::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
    flex-shrink: 0;
  }

  .filter-panel .filter-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto;
  }

  .filter-panel .filter-group select,
  .filter-panel .filter-group input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Clear button distinct styling */
  .filter-panel #clear-filters,
  .filter-panel #analytics-clear-filters {
    background: rgba(122, 170, 206, 0.1);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    margin-top: 0.5rem;
    flex: 0 0 auto;
    width: 100%;
  }

  .filter-panel .filter-close-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    margin-top: 0.75rem !important;
    font-weight: 600;
  }

  .filter-panel #clear-filters:hover,
  .filter-panel #analytics-clear-filters:hover {
    background: rgba(122, 170, 206, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
  }

  /* Body scroll lock when filter is open */
  body.filter-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

/* Add Transaction modal layout (better sticky header/footer UX) */
#record-modal .modal-content,
#upcoming-income-modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
}

#record-modal .modal-content h2,
#upcoming-income-modal .modal-content h2 {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f7f8f0;
  padding: 1.25rem 1.5rem 1rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
}

#record-modal #record-form,
#upcoming-income-modal #upcoming-income-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

/* Scrollable form body; footer stays pinned */
#record-modal #record-form .record-form-body,
#upcoming-income-modal #upcoming-income-form .record-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.5rem 1rem;
}

#record-modal .modal-actions,
#upcoming-income-modal .modal-actions {
  flex: 0 0 auto;
  z-index: 3;
  background: #f7f8f0;
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--border-color);
  margin-top: 0;
  display: flex;
  gap: 0.75rem;
}

/* Keep action buttons aligned nicely (and override global mobile full-width button rules) */
#record-modal .modal-actions .btn,
#upcoming-income-modal .modal-actions .btn {
  flex: 1 1 0;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* Mobile: prevent global button rules from affecting FABs */
@media (max-width: 768px) {
  .btn.fab {
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  #record-modal #record-form .record-form-body,
  #upcoming-income-modal #upcoming-income-form .record-form-body {
    padding: 1rem 1rem 1rem;
  }

  #record-modal .modal-content h2,
  #upcoming-income-modal .modal-content h2 {
    padding: 1.1rem 1rem 0.9rem;
  }

  #record-modal .modal-actions,
  #upcoming-income-modal .modal-actions {
    padding: 0.75rem 1rem 1rem;
  }
}

@media (max-width: 480px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  /* Keep recent transactions header horizontal on mobile */
  .recent-records .card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Category items responsive on mobile */
  .category-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .category-item {
    padding: 0.75rem;
    min-height: 50px;
  }

  .category-item strong {
    font-size: 0.875rem;
  }

  .category-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    max-width: 80px;
  }

  .category-item .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  /* Management cards on small mobile */
  .management-row .card {
    padding: 1rem;
  }

  .add-category-form-container {
    padding: 1rem;
  }

  .add-category-form-container .form-group {
    margin-bottom: 1rem;
  }

  .add-category-form-container .btn {
    min-height: 48px;
    font-size: 0.875rem;
  }

  .data-actions {
    gap: 0.4rem;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  /* Show more button for chart categories */
  .show-more-categories {
    margin-top: 0.75rem !important;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

  @media (min-width: 769px) {
    .show-more-categories {
      display: none !important;
    }
  }

  .filter-controls-group {
    order: 2;
  }

  #add-record-btn {
    order: 1;
    width: 100%;
    justify-content: center;
  }
}

/* Monthly Separators */
.month-separator {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--primary-color) 20%,
    var(--primary-color) 80%,
    transparent 100%
  );
  margin: 1rem 0;
  position: relative;
}

.month-separator::before {
  content: attr(data-month);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.month-separator + .month-separator {
  margin-top: 1.5rem;
}

/* Mobile view - move badge to left */
@media (max-width: 768px) {
  .month-separator::before {
    left: 0;
    transform: translateY(-50%);
  }

  .month-separator {
    background: var(--primary-color);
  }
}

/* Month separator row background */
.month-separator td {
  background: rgba(53, 88, 114, 0.05) !important;
}

/* KPI Cards */
.kpi-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}

#dashboard .kpi-container {
  display: none;
  /* Hide individual KPI cards entirely, replaced by global summary hero */
}

/* Class to hide header on dashboard (Desktop & Mobile) */
header.dashboard-header-hide {
  display: none;
}

/* Global Summary Hero (Mobile & Desktop) */
.mobile-summary-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgb(4, 29, 61) 0%,
    rgb(80, 148, 193) 60%,
    rgb(255, 255, 255) 100%
  );
  color: white;
  padding: 3.5rem 1.5rem 1.5rem 1.5rem;
  margin: -2rem -2rem 2rem -2rem;
  /* Adjusted to exactly negate .main-content padding */
  position: relative;
  overflow: hidden;
  border-radius: 0;
  min-height: 280px;
}

.mobile-summary-hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
  pointer-events: none;
}

.mobile-summary-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.hero-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.hero-month-selector {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-month-selector:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hero-eye-icon {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.8;
}

.hero-metrics {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  gap: 1rem;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.hero-metric-box {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  overflow: visible;
}

.hero-metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.hero-metric-value {
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 800;
  white-space: nowrap;
  color: white;
  overflow: visible;
  line-height: 1.2;
}

.hero-metric-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  align-self: center;
  flex-shrink: 0;
}

.hero-this-month {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
  align-self: center;
  transition: all 0.2s ease;
}

.hero-this-month:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hero-this-month .trend-down {
  color: #ffb3b3;
}

.hero-this-month .trend-up {
  color: #a8f0c0;
}

.hero-ar {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 1.5rem;
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 700;
}

#hero-spending {
  color: white;
}

#hero-spending .spending-icon {
  color: #ffb3b3;
}

#hero-income {
  color: white;
}

#hero-income .income-icon {
  color: #a8f0c0;
}

#hero-ar-display {
  color: white;
}

#hero-ar-display .ar-icon {
  color: #ffd700;
}

/* Monthly Balance Carry-Over Section */
.carry-over-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.75rem 0;
  position: relative;
  z-index: 1;
}

.carry-over-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.carry-over-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.carry-over-btn.active {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.6);
  color: #a8f0c0;
}

.carry-over-btn i {
  font-size: 0.75rem;
}

.carry-over-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
  font-style: italic;
}

.carry-over-hint.carry-active {
  color: #a8f0c0;
  font-weight: 500;
}

/* Week Separators */
.week-separator {
  display: flex;
  flex-direction: column;
  margin: 1rem 0 0.5rem;
}

.week-separator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: rgba(122, 170, 206, 0.1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  gap: 1rem;
}

.week-name {
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  position: relative;
  display: block;
}

.week-name span {
  display: inline-block;
}

.week-name.animate-scroll {
  text-overflow: clip;
}

.week-name.animate-scroll span {
  animation: scroll-text var(--scroll-duration, 4s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.week-separator-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-main);
}

.week-stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.week-stat i {
  font-size: 0.7rem;
  opacity: 0.8;
}

.week-stat.spending i {
  color: var(--danger);
}

.week-stat.income i {
  color: var(--success);
}

.week-stat.count i {
  color: var(--primary-color);
}

.kpi-card {
  background: #f7f8f0;
  padding: 1.2rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  transition: transform 0.2s;
}

.kpi-card:hover {
  transform: translateY(-2px);
}

.kpi-icon {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.income .kpi-icon {
  background: #dcfce7;
  color: var(--success);
}

.spending .kpi-icon {
  background: #fee2e2;
  color: var(--danger);
}

.balance .kpi-icon {
  background: rgba(122, 170, 206, 0.2);
  color: var(--primary-color);
}

.accounts-receivable .kpi-icon {
  background: #fef3c7;
  color: #d97706;
}

/* savings-specific KPI modifiers */
.withdrawal .kpi-icon {
  background: #fee2e2;
  color: var(--danger);
}

.month .kpi-icon {
  background: rgba(156, 213, 255, 0.3);
  color: #355872;
}

.cashflow .kpi-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.kpi-details h3 {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-details p {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
}

.income .kpi-details p {
  color: var(--success);
}

.spending .kpi-details p {
  color: var(--danger);
}

.accounts-receivable .kpi-details p {
  color: #d97706;
}

.records-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-main);
  margin-right: 1.5rem;
}

/* Charts */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

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

/* Tables */
.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}

/* Mobile table fixes */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    width: calc(100% + 1rem);
    max-width: none;
  }

  .table-responsive::-webkit-scrollbar {
    height: 6px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
  }

  /* Ensure table fits without scrollbar on mobile */
  .table-responsive .stats-table {
    min-width: auto;
  }
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

th {
  padding: 1rem;
  background: rgba(122, 170, 206, 0.15);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
}

td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9375rem;
  color: var(--text-main);
  word-break: normal;
}

tr:last-child td {
  border-bottom: none;
}

/* Sub-row Grouping Styles */
.sub-row td {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  font-size: 0.875rem !important;
  border-bottom: none !important;
}

.sub-row.group-end td {
  border-bottom: 2px solid var(--primary-color) !important;
}

.sub-row.spending td {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

.sub-row.income td {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

.sub-row.account_receivable td {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

.sub-row .item-cell {
  padding-left: 3rem !important;
  position: relative;
}

.sub-row .item-cell::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: currentColor;
  opacity: 0.3;
}

.sub-row .item-cell::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
}

.sub-row.group-start .item-cell::before {
  top: 50%;
}

.sub-row.group-end .item-cell::before {
  bottom: 50%;
}

/* Branch pip */
.sub-row.spending .item-cell::after,
.sub-row.spending .item-cell::before {
  color: var(--danger);
}

.sub-row.income .item-cell::after,
.sub-row.income .item-cell::before {
  color: var(--success);
}

.sub-row.account_receivable .item-cell::after,
.sub-row.account_receivable .item-cell::before {
  color: var(--warning);
}

.parent-group-row {
  font-weight: 700;
}

.parent-group-row td {
  background-color: rgba(53, 88, 114, 0.05) !important;
  border-top: 2px solid var(--primary-color) !important;
  border-bottom: none !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.parent-group-row .item-cell {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-color) !important;
}

.sub-category-label {
  display: none;
  /* Hidden because we show actual category now */
}

/* Dashboard Hero - White numbers on dark blue bg */
.mobile-summary-hero .amount-income,
.mobile-summary-hero .amount-spending,
.mobile-summary-hero .amount-num,
.mobile-summary-hero .dollar-positive,
.mobile-summary-hero .dollar-negative,
.mobile-summary-hero .currency-sign,
.mobile-summary-hero .dollar-icon,
#hero-spending,
#hero-income,
#hero-this-month-val,
#hero-ar-display,
.hero-this-month,
.hero-ar {
  color: white !important;
}

/* Hero icons stay colored - matching site colors */
.mobile-summary-hero .income-icon {
  color: #10b981 !important;
}

.mobile-summary-hero .spending-icon {
  color: #ef4444 !important;
}

.mobile-summary-hero .ar-icon {
  color: white !important;
}

/* Dashboard balance - green dollar sign (no + prefix) */
.mobile-summary-hero #hero-this-month-val .currency-sign,
#hero-this-month-val .currency-sign {
  color: #10b981 !important;
}

/* AR dollar signs - gold/yellow */
.amount-account_receivable .dollar-icon,
.amount-account_receivable .currency-sign,
.amount-account_receivable .ar-icon,
#hero-ar-display .dollar-icon,
#hero-ar-display .ar-icon,
.mobile-summary-hero #hero-ar-display .dollar-icon,
.mobile-summary-hero #hero-ar-display .ar-icon {
  color: #f59e0b !important;
}

/* Week stats - colored dollar signs matching transaction cards */
.week-stat.spending .currency-sign,
.week-stat.spending .dollar-icon,
.week-stat.spending .dollar-negative {
  color: #ef4444 !important;
}

.week-stat.income .currency-sign,
.week-stat.income .dollar-icon,
.week-stat.income .dollar-positive {
  color: #10b981 !important;
}

/* Analytics & Savings - Primary color numbers on white bg */
#analytics .amount-income,
#analytics .amount-spending,
#analytics .amount-num,
#analytics .currency-sign,
#savings .amount-income,
#savings .amount-spending,
#savings .amount-num,
#savings .currency-sign,
#analytics .kpi-details p,
#savings .kpi-details p,
.savings-kpis .kpi-details p {
  color: var(--primary-color) !important;
}

/* Analytics dollar signs - colored */
#analytics .dollar-positive,
#analytics .currency-positive,
#analytics .amount-income .currency-sign {
  color: #10b981 !important;
}

#analytics .dollar-negative,
#analytics .currency-negative,
#analytics .amount-spending .currency-sign {
  color: #ef4444 !important;
}

/* Analytics/Savings KPI cards - use primary color for all numbers */
#analytics .income .kpi-details p,
#analytics .spending .kpi-details p,
#analytics .accounts-receivable .kpi-details p,
#savings .income .kpi-details p,
#savings .spending .kpi-details p,
#savings .accounts-receivable .kpi-details p {
  color: var(--primary-color) !important;
}

/* Default amount colors - unified with site colors */
.amount-income {
  font-weight: 700;
}

.amount-income .dollar-positive,
.amount-income .currency-sign {
  color: #10b981;
}

.amount-spending {
  font-weight: 700;
}

.amount-spending .dollar-negative,
.amount-spending .currency-sign {
  color: #ef4444;
}

/* Dollar sign colors - unified with site colors */
.dollar-positive,
.currency-positive {
  color: #10b981;
  font-weight: 700;
}

.dollar-negative,
.currency-negative {
  color: #ef4444;
  font-weight: 700;
}

/* Neutral amount numbers */
.amount-num,
.amount-value {
  color: var(--text-main);
  font-weight: 700;
}

/* Hero section dollar icons - matching site colors */
.income-icon {
  color: #10b981;
}

.spending-icon {
  color: #ef4444;
}

.ar-icon {
  color: #f59e0b;
}

.savings-icon {
  color: #3b82f6;
}

/* Carried forward indicator */
.carried-forward-indicator {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.8rem;
  background: rgba(53, 88, 114, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Savings transfer indicator */
.savings-transfer-indicator {
  color: var(--success);
  font-weight: 600;
  font-size: 0.8rem;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  margin-left: 0;
  white-space: nowrap;
}

.category-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-spending {
  background: rgba(122, 170, 206, 0.2);
  color: var(--text-muted);
}

.badge-income {
  background: #dcfce7;
  color: var(--success);
}

.badge-account_receivable {
  background: #fef3c7;
  color: #d97706;
}

.badge-account_receivable.collected {
  background: #dcfce7;
  color: var(--success);
}

.badge-account_receivable.pending {
  background: #fef3c7;
  color: #d97706;
}

.badge-savings {
  background: rgba(53, 88, 114, 0.12);
  color: var(--primary-color);
  border: 1px solid rgba(53, 88, 114, 0.25);
}

.savings-transfer-row td {
  background-color: rgba(53, 88, 114, 0.1) !important;
  border-bottom-color: rgba(53, 88, 114, 0.18) !important;
}

.sub-row.savings-transfer-row td {
  background-color: rgba(53, 88, 114, 0.1) !important;
}

#records-body tr.savings-transfer-row:hover td {
  background-color: rgba(53, 88, 114, 0.16) !important;
}

.notes-cell {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.item-cell {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.pagination-controls .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-controls {
  user-select: none;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(53, 88, 114, 0.25);
}

.btn-secondary {
  background: rgba(122, 170, 206, 0.15);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: rgba(122, 170, 206, 0.25);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-outline:hover {
  background: rgba(53, 88, 114, 0.08);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-danger {
  background: #fff1f2;
  color: var(--danger);
}

.btn-danger:hover {
  background: #ffe4e6;
}

.btn-text {
  background: transparent;
  color: var(--primary-color);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border: none;
  font-weight: 600;
}

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

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: 0.2s;
}

.action-btns {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.edit-btn {
  background: rgba(122, 170, 206, 0.2);
  color: #355872;
}

.edit-btn:hover {
  background: rgba(122, 170, 206, 0.35);
}

.delete-btn {
  background: #fff1f2;
  color: #dc2626;
}

.delete-btn:hover {
  background: #ffe4e6;
}

.collect-btn {
  background: #dcfce7;
  color: var(--success);
}

.collect-btn:hover {
  background: #bbf7d0;
}

.undo-btn {
  background: #fef3c7;
  color: #d97706;
}

.undo-btn:hover {
  background: #fde68a;
}

.edit-btn {
  background: rgba(122, 170, 206, 0.2);
  color: #355872;
}

.edit-btn:hover {
  background: rgba(122, 170, 206, 0.35);
}

.collect-btn {
  background: #dcfce7;
  color: #16a34a;
}

.collect-btn:hover {
  background: #bbf7d0;
}

.undo-btn {
  background: #fef3c7;
  color: #d97706;
}

.undo-btn:hover {
  background: #fde68a;
}

/* Tabs Content */
.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-out;
  position: relative; /* For absolutely positioned filter panels */
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal.active {
  display: flex;
}

.modal-content {
  width: 100%;
  max-width: 700px;
  max-height: calc(96vh - 70px);
  background: #f7f8f0;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

/* Premium Confirmation Modal Refinement */
.confirm-modal-content {
  max-width: 380px !important;
  padding: 2.5rem 2.25rem 2rem !important;
  text-align: center;
  border-radius: 28px !important;
  border: 1px solid rgba(53, 88, 114, 0.08) !important;
  background: #fdfdfb !important;
}

.confirm-modal-content h2 {
  font-size: 1.65rem;
  margin-bottom: 0.85rem;
  color: var(--primary-color);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.confirm-modal-content p {
  font-size: 1.05rem;
  color: #64748b;
  margin-bottom: 2rem !important;
  line-height: 1.6;
  font-weight: 500;
}

.confirm-modal-content .modal-actions {
  margin-top: 0 !important;
  padding: 0 !important;
  gap: 1rem !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
}

.confirm-modal-content .btn {
  flex: 1;
  height: 52px;
  font-weight: 700;
  border-radius: 16px;
  font-size: 1rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-modal-content .btn-secondary {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.confirm-modal-content .btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.confirm-modal-content .btn-primary {
  background: var(--primary-color);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(53, 88, 114, 0.2);
}

.confirm-modal-content .btn-primary:hover {
  background: #2a455a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(53, 88, 114, 0.3);
}

.modal-content h2 {
  margin-bottom: 1.5rem;
  font-weight: 800;
}

/* Record Details Modal */
#record-details-modal .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#record-details-modal .modal-content h2 {
  padding: 1.5rem 2rem 1rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-color);
}

.details-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem;
  margin-bottom: 0;
}

#record-details-modal .modal-actions {
  padding: 1.25rem 2rem 1.5rem;
  margin-top: 0;
  border-top: 1px solid var(--border-color);
  background: #f7f8f0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}

/* Full width balance calculation section in details modal */
.detail-row[style*="background: #f8fafc"] {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1rem;
  border-radius: var(--radius-sm);
  margin: 0.5rem 0;
}

.detail-row[style*="background: #f8fafc"] .detail-label,
.detail-row[style*="background: #f8fafc"] .detail-value {
  max-width: 100%;
  text-align: left;
}

.detail-row[style*="background: #F7F8F0"] > div[style*="display: grid"] {
  width: 100%;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.detail-value {
  font-weight: 600;
  color: var(--text-main);
  font-size: 1rem;
  word-break: break-word;
  max-width: 60%;
  text-align: right;
}

.detail-value.notes {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.detail-value.income {
  color: var(--success);
}

.detail-value.spending {
  color: var(--danger);
}

#custom-confirm-modal .modal-content {
  text-align: center;
  max-width: 400px;
}

@media (max-width: 480px) {
  #custom-confirm-modal .modal-content {
    max-width: 90%;
    padding: 1.5rem;
  }
}

/* Table Row Clickable */
#records-body tr {
  cursor: pointer;
  transition: background-color 0.2s;
}

#records-body tr:hover {
  background-color: rgba(122, 170, 206, 0.1);
}

#records-body tr td:last-child {
  cursor: default;
}

#records-body tr td:last-child:hover {
  background-color: transparent;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(53, 88, 114, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Savings Styles */
.savings-list {
  display: grid;
  /* always one card per row */
  grid-template-columns: 1fr;
  gap: 0.5rem;
  overflow-x: hidden;
  /* prevent any card from causing horizontal scroll */
}

.savings-card .account-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  /* prevent action buttons from shrinking, keep them accessible */
}

/* mobile: row layout with smaller icons */
@media (max-width: 768px) {
  .savings-card .account-actions {
    flex-direction: row;
    gap: 0.25rem;
  }

  .savings-card .account-actions .btn-icon {
    width: 28px;
    height: 28px;
  }
}

/* row type coloring */
.savings-records-table td.type-income {
  color: var(--success);
  font-weight: 600;
}

.savings-records-table td.type-withdrawal {
  color: var(--danger);
  font-weight: 600;
}

.savings-kpis .kpi-card {
  padding: 1rem;
}

/* Account Mini Dashboard - New Layout */
.account-mini-dashboard {
  padding: 0.5rem 0.25rem;
  margin-bottom: 0.25rem;
}

.dashboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dashboard-row.top-row {
  margin-bottom: 0.25rem;
}

.dashboard-row.bottom-row {
  justify-content: center;
}

/* Mini stats (Withdrawn & Deposits) - smaller side elements */
.mini-stat {
  flex: 0 0 auto;
  text-align: center;
  min-width: 70px;
}

.mini-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mini-stat-value {
  font-size: 0.95rem;
  font-weight: 600;
}

.mini-stat-value.positive {
  color: var(--success);
}

.mini-stat-value.negative {
  color: var(--danger);
}

/* Main Balance - larger center element */
.main-balance {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
}

.balance-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.balance-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.1;
}

/* Cashflow - under the balance (no box) */
.cashflow-stat {
  text-align: center;
  padding: 0;
  background: none;
  border: none;
}

.cashflow-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-right: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cashflow-value {
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.cashflow-value.positive {
  color: var(--success);
}

.cashflow-value.negative {
  color: var(--danger);
}

.cashflow-value i {
  font-size: 0.7rem;
}

/* Top Action Buttons - Single Row */
.account-actions-top {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  margin: 0.5rem 0;
  justify-content: center;
  flex-wrap: nowrap;
}

.account-actions-top .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem !important;
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

/* Mobile responsiveness for mini dashboard */
@media (max-width: 768px) {
  .dashboard-row.top-row {
    gap: 0.3rem;
  }

  .main-balance {
    padding: 0 0.3rem;
  }

  .balance-value {
    font-size: 1.25rem;
  }

  .mini-stat {
    min-width: 60px;
  }

  .mini-stat-value {
    font-size: 0.75rem;
  }

  .mini-stat-label {
    font-size: 0.6rem;
  }

  .cashflow-value {
    font-size: 0.75rem;
  }

  .account-actions-top {
    gap: 0.3rem;
  }

  .account-actions-top .btn {
    padding: 0.2rem !important;
    min-width: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
  }

  .mini-stat-label {
    font-size: 0.65rem;
  }

  .mini-stat-value {
    font-size: 0.9rem;
  }

  .balance-label {
    font-size: 0.7rem;
  }

  .balance-value {
    font-size: 1.4rem;
  }
}

/* Savings Transactions List - Card Based Layout */
.savings-transactions-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}

.savings-transactions-list .transaction-card {
  background: rgba(122, 170, 206, 0.15);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.savings-transactions-list .transaction-card:hover {
  background: rgba(122, 170, 206, 0.25);
  border-color: var(--border-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.savings-transactions-list .transaction-card.income {
  border-left: 3px solid var(--success);
}

.savings-transactions-list .transaction-card.spending {
  border-left: 3px solid var(--danger);
}

.savings-transactions-list .transaction-card.income .transaction-icon {
  background: #dcfce7;
  color: #10b981;
}

.savings-transactions-list .transaction-card.spending .transaction-icon {
  background: #fee2e2;
  color: #ef4444;
}

/* Mobile responsiveness for savings transaction cards */
@media (max-width: 768px) {
  .savings-transactions-list .transaction-card {
    padding: 0.75rem;
    gap: 0.6rem;
    flex-wrap: nowrap;
  }

  .savings-transactions-list .transaction-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .savings-transactions-list .transaction-name {
    font-size: 0.9rem;
  }

  .savings-transactions-list .transaction-amount .amount {
    font-size: 1rem;
  }
}

/* Settings Styles */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  width: 100%;
}

/* Category and People Management Responsiveness */
.management-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  overflow: hidden;
  width: 100%;
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
  .management-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    overflow: hidden;
    width: 100%;
  }

  .category-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    overflow: hidden;
    width: 100%;
  }

  #person-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    overflow: hidden;
    width: 100%;
  }
}

.management-row .card {
  margin: 0;
  padding: 0.85rem;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.data-management-card {
  width: 100%;
}

/* Settings header decorations */
.settings-grid .card h3 {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

/* Removed header underline */

/* Background styles for specific card headers removed as underlines are gone */

/* Monthly Summary Styles */
.monthly-summary-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.monthly-summary-controls .form-row {
  gap: 0.6rem;
}

.summary-options .checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.summary-options .checkbox-label {
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
}

#generate-pdf-btn {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

.summary-options .checkbox-label {
  display: block;
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: var(--card-bg);
  text-align: center;
  font-size: 0.9rem;
}

.summary-options .checkbox-label:hover {
  border-color: var(--primary-color);
  background-color: rgba(53, 88, 114, 0.05);
}

.summary-options .checkbox-label input[type="checkbox"] {
  display: none;
}

.summary-options .checkbox-label.checked {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.summary-options .checkbox-label.checked:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.summary-options .checkbox-text {
  line-height: 1.3;
}

#generate-pdf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

#generate-pdf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(53, 88, 114, 0.3);
}

/* PDF Message Notifications */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

.pdf-message {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.add-category-form-container {
  background: rgba(122, 170, 206, 0.15);
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  overflow: hidden;
  width: 100%;
}

/* Person list should match category list styling */
#person-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  overflow: hidden;
  width: 100%;
}

/* Better responsiveness for category items */
@media (max-width: 1200px) {
  .category-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    overflow: hidden;
    width: 100%;
  }

  #person-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    overflow: hidden;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .category-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow: hidden;
    width: 100%;
  }

  #person-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow: hidden;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .category-list {
    grid-template-columns: 1fr;
    overflow: hidden;
    width: 100%;
  }

  #person-list {
    grid-template-columns: 1fr;
    overflow: hidden;
    width: 100%;
  }
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f7f8f0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s;
  min-height: 60px;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.category-item:hover {
  border-color: var(--primary-color);
}

.category-item > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-right: 0.5rem;
  width: 100%;
}

.category-item strong {
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.category-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  line-height: 1.3;
}

.data-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
  width: 100%;
}

.data-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (min-width: 768px) {
  .data-actions {
    flex-direction: row;
    gap: 0.5rem;
  }

  .data-actions .btn {
    width: auto;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Combined Transactions Styles */
.combined-transactions-list {
  margin-bottom: 1rem;
}

.combined-transaction-item {
  background: rgba(122, 170, 206, 0.15);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
}

.combined-transaction-item .transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.combined-transaction-item .transaction-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.combined-transaction-item .transaction-detail {
  display: flex;
  justify-content: space-between;
}

.combined-transaction-item .transaction-detail label {
  font-weight: 600;
  color: var(--text-muted);
}

.combined-transaction-item .transaction-detail span {
  color: var(--text-main);
}

.combined-transaction-item .remove-transaction {
  background: #fee2e2;
  color: var(--danger);
  border: none;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.2s;
}

.combined-transaction-item .remove-transaction:hover {
  background: #fecaca;
}

.combined-transaction-summary {
  background: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.add-transaction-btn {
  width: 100%;
  justify-content: center;
}

.combined-transactions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.combined-transactions-header .add-transaction-btn {
  width: auto;
  flex: 1;
  margin-bottom: 0;
  min-width: 200px;
}

.combined-transaction-summary {
  background: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 300px;
}

@media (max-width: 768px) {
  .combined-transactions-header {
    flex-direction: column;
    align-items: stretch;
  }

  .combined-transactions-header .add-transaction-btn {
    width: 100%;
    order: 2;
  }

  .combined-transaction-summary {
    width: 100%;
    max-width: none;
    text-align: center;
    order: 1;
    white-space: normal;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: 70px;
    bottom: 0;
    top: auto;
    flex-direction: row;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--border-color);
    justify-content: space-around;
    align-items: center;
    background: rgba(247, 248, 240, 0.95);
    backdrop-filter: blur(10px);
    z-index: 100;
  }

  .logo {
    display: none;
  }

  .nav-links {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 0;
  }

  .nav-links li {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 0.7rem;
    margin-bottom: 0;
    border-radius: 0;
    flex: 1;
    justify-content: center;
  }

  .nav-links li.active {
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: none;
  }

  /* main content should fill width when nav moves to bottom */
  .main-content {
    margin-left: 0;
    padding: 1rem;
    padding-bottom: 90px;
  }

  /* Dashboard section - remove top padding */
  #dashboard {
    padding-top: 0;
    overflow-x: visible;
  }

  #dashboard .mobile-summary-hero {
    margin: -1rem -1rem 1rem -1rem !important;
    width: calc(100% + 2rem) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }

  .nav-links li i {
    font-size: 1.25rem;
  }

  header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  /* header.dashboard-header-hide now global */

  h1 {
    font-size: 1.5rem;
  }

  .user-info {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }

  .charts-row,
  .management-row {
    grid-template-columns: 1fr;
  }

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

  .kpi-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #dashboard .kpi-container {
    display: none;
  }

  .mobile-summary-hero {
    padding: 1.5rem 1rem;
  }

  .hero-metric-value {
    font-size: 1.8rem;
  }

  .hero-metric-divider {
    height: 40px;
  }

  .category-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .category-item {
    padding: 0.875rem;
    min-height: 56px;
  }

  .category-item strong {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .category-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    max-width: 100px;
  }

  .category-item .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .card {
    padding: 1rem;
  }

  .monthly-summary-controls {
    gap: 0.3rem;
  }

  .monthly-summary-controls .form-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .summary-options .checkbox-label {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
  }

  #generate-pdf-btn {
    padding: 0.6rem;
    font-size: 0.87rem;
  }

  /* Mobile button sizing fixes */
  .btn:not(.btn-icon) {
    padding: 0.875rem 1.25rem;
    min-height: 48px;
    font-size: 0.875rem;
  }

  .btn-primary:not(.btn-icon),
  .btn-secondary:not(.btn-icon),
  .btn-outline:not(.btn-icon) {
    width: 100%;
    margin: 0.2rem;
  }

  .form-row .btn:not(.btn-icon) {
    width: 80%;
  }

  /* Category and People Management specific fixes */
  .add-category-form-container {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    width: 100%;
  }

  .add-category-form-container .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    overflow: hidden;
    width: 100%;
  }

  .add-category-form-container .btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.9rem;
    overflow: hidden;
  }

  .management-row .card {
    padding: 1.25rem;
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }

  .management-row .card h3 {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Show more buttons */
  #show-more-categories,
  #show-more-people {
    padding: 0.75rem;
    font-size: 0.9rem;
    min-height: 44px;
    overflow: hidden;
    width: 100%;
  }

  /* Ensure btn-icon stays small everywhere on mobile */
  .btn-icon {
    width: 36px;
    height: 36px;
    min-height: unset;
    padding: 0;
  }

  /* ---- Savings tab responsive fixes ---- */

  /* Make savings KPIs more compact */
  .savings-kpis {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .savings-kpis .kpi-card {
    padding: 0.75rem 1rem;
  }

  .savings-kpis .kpi-details h4 {
    font-size: 0.75rem;
  }

  .savings-kpis .kpi-details p {
    font-size: 1.25rem;
  }

  .savings-kpis .kpi-icon {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }

  /* Savings table: smaller text + tighter padding so columns fit */
  .savings-records-table th,
  .savings-records-table td {
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* Constrain the Notes column so it doesn't eat up all the space */
  .savings-records-table td:nth-child(4) {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .savings-records-table th:nth-child(4) {
    max-width: 80px;
  }

  /* Smaller action buttons inside savings table */
  .savings-records-table .btn-icon {
    width: 28px;
    height: 28px;
    min-height: unset;
    padding: 0;
    font-size: 0.7rem;
  }

  /* Keep account-actions header buttons compact in a row */
  .account-actions .btn-icon {
    width: 32px;
    height: 32px;
    min-height: unset;
    padding: 0;
  }

  /* Pagination buttons should auto-size, not full-width */
  .pagination .btn {
    width: auto;
    min-height: 36px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  /* Card header inside savings cards: buttons on RIGHT side */
  .savings-card .card-header {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: space-between;
  }

  .savings-card .card-header h3 {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }

  /* ---- Modal with sticky buttons inside card ---- */
  .modal {
    padding: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal-content {
    width: 100%;
    max-height: 90vh;
    min-height: 300px;
    padding: 1.5rem;
    border-radius: var(--radius);
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Upcoming Income Modal - same styling as Record Modal */
  #upcoming-income-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
  }

  #upcoming-income-modal .modal-content h2 {
    padding: 1.1rem 1rem 0.9rem;
    margin: 0;
  }

  #upcoming-income-modal #upcoming-income-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  #upcoming-income-modal #upcoming-income-form .record-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1rem 1rem;
  }

  #upcoming-income-modal .modal-actions {
    flex: 0 0 auto;
    z-index: 3;
    background: #f7f8f0;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
    display: flex;
    gap: 0.75rem;
  }

  #upcoming-income-modal .modal-actions .btn {
    flex: 1 1 0;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .modal-content h2 {
    margin-bottom: 1.5rem;
    font-weight: 800;
  }


  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }

  /* ---- General table responsive fixes ---- */
  table th,
  table td {
    padding: 0.65rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* Make notes column wrap on mobile */
  .notes-cell {
    max-width: 120px;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Item column wrapping */
  .item-cell {
    max-width: 150px;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Category badge smaller on mobile */
  .category-badge {
    max-width: 160px;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  /* Prevent horizontal overflow globally */
  .tab-content {
    overflow-x: hidden;
    width: 100%;
  }

  /* Ensure all cards respect container width */
  .card {
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
  }

  /* Analytics filter panel - styled exactly like Add Transaction modal */
  #analytics .filter-modal-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: auto !important;
    width: calc(100% - 32px) !important;
    max-width: 500px;
    max-height: 90vh !important;
    border-radius: var(--radius);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: #f7f8f0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* Enhanced blur backdrop for filter panel - on top of everything */
  #analytics .filter-panel {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10001 !important;
  }

  /* Filter panel header - white background */
  #analytics .filter-modal-header {
    background: white;
    padding: 1.25rem 1.5rem 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
  }

  #analytics .filter-modal-header h2 {
    color: #355872;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    text-align: left;
  }

  /* Scrollable filter content body */
  #analytics .filter-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.5rem 0.75rem;
  }

  #analytics .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    margin-bottom: 1rem;
  }

  /* Dark blue labels like Add Transaction */
  #analytics .filter-group .filter-label {
    color: #355872;
    font-weight: 600;
    font-size: 0.9rem;
  }

  #analytics .filter-group select {
    width: 100%;
    min-width: auto;
    height: 44px;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
  }

  /* Footer with side-by-side buttons like Add Transaction */
  #analytics .filter-modal-content .modal-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem 1rem;
    background: #f7f8f0;
    border-top: 1px solid var(--border-color);
    margin: 0;
  }

  #analytics .filter-modal-content .modal-actions .btn {
    flex: 1 1 0;
    width: auto !important;
    height: 44px;
    font-size: 0.95rem;
    margin: 0 !important;
    justify-content: center;
    border-radius: var(--radius-sm);
  }

  #analytics #analytics-filter-close.btn-secondary {
    background: rgba(122, 170, 206, 0.15);
    border: 1px solid var(--border-color);
    color: #355872;
  }

  #analytics #analytics-clear-filters.btn-primary {
    background: #355872;
    color: white;
    border: none;
    font-weight: 600;
  }

  .savings-card {
    overflow: hidden;
  }

  /* Fix modal content overflow */
  .modal-content {
    overflow-x: hidden;
    word-wrap: break-word;
  }

  /* Fix form inputs overflow */
  .form-group input,
  .form-group select,
  .form-group textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Dashboard Records Section Styles */
.records-section {
  padding: 1rem 1.5rem;
}

.records-header {
  margin-bottom: 0.75rem;
}

/* Dashboard filter panel: inline (not floating) */
#dashboard-filter-panel {
  position: static;
  width: 100%;
  z-index: auto;
  margin-top: 0.75rem;
  display: none;
  /* Still conditionally displayed via JS */
}

/* Adjust mobile layout for inline filter in records container */
@media (max-width: 480px) {
  #dashboard-filter-panel {
    position: static;
    /* Override modal styling for dashboard filter */
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    margin-top: 1rem;
  }

  #dashboard-filter-panel .filter-controls-group {
    box-shadow: none;
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin: 0;
    background: var(--bg-color);
  }

  #dashboard-filter-panel .filter-controls-group::before {
    display: none;
    /* Hide the pull indicator for inline filters */
  }
}

#dashboard-filter-panel .filter-controls-group {
  box-shadow: var(--shadow);
  animation: slideDown 0.3s ease-out;
  /* Add smooth slide animation */
}

.records-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.records-title-row h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.records-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Add Transaction Button - styled like the screenshots */
.add-transaction-btn {
  background: linear-gradient(135deg, #7aaace 0%, #355872 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(53, 88, 114, 0.3);
}

.add-transaction-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(53, 88, 114, 0.4);
  background: linear-gradient(135deg, #8ab8d8 0%, #456882 100%);
}

.add-transaction-btn i {
  font-size: 0.875rem;
}

/* Filter Button */
.filter-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(122, 170, 206, 0.15);
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.filter-btn:hover {
  background: rgba(122, 170, 206, 0.25);
  color: var(--text-main);
}

.filter-btn.active {
  background: rgba(122, 170, 206, 0.3);
  color: #355872;
}

/* Dashboard Records List - Card Based */
.dashboard-records-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Tightened gap between cards */
}

/* Transaction Card */
.transaction-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(122, 170, 206, 0.15);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.transaction-card:hover {
  background: rgba(122, 170, 206, 0.25);
  border-color: var(--border-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.transaction-card.savings-belong {
  border-color: var(--danger) !important;
  border-width: 1.5px;
  background: rgba(239, 68, 68, 0.03);
}

.transaction-card.savings-belong:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Transaction Icon */
.transaction-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.transaction-card.income .transaction-icon {
  background: #dcfce7;
  color: #10b981;
}

.transaction-card.spending .transaction-icon {
  background: #fee2e2;
  color: #ef4444;
}

.transaction-card.account_receivable .transaction-icon {
  background: #fef3c7;
  color: #d97706;
}

.transaction-card.savings .transaction-icon {
  background: rgba(156, 213, 255, 0.4);
  color: var(--primary-color);
}

/* Combined Transaction Styles - simplified: just icon and border */
.transaction-card.combined {
  border: 1px solid var(--primary-color);
  border-left: 3px solid var(--primary-color);
}

.transaction-card.combined .transaction-icon {
  background: linear-gradient(135deg, #355872 0%, #7aaace 100%);
  color: white;
}

/* Mobile adjustments for combined cards */
@media (max-width: 768px) {
  .transaction-card.combined {
    border-left-width: 3px;
  }
}

/* Transaction Info */
.transaction-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.transaction-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: block;
}

.transaction-name span {
  display: inline-block;
}

.transaction-name.animate-scroll {
  text-overflow: clip; /* Remove ellipsis to show full text when animating */
}

.transaction-name.animate-scroll span {
  animation: scroll-text var(--scroll-duration, 4s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Breakdown table category name animation */
.breakdown-category-name {
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-category-name span {
  display: inline-block;
}

.breakdown-category-name.animate-scroll {
  text-overflow: clip;
}

.breakdown-category-name.animate-scroll span {
  animation: scroll-text var(--scroll-duration, 4s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Desktop responsive for breakdown tables */
@media (min-width: 769px) {
  .breakdown-category-name {
    max-width: 180px;
    font-size: 0.9rem;
  }
}

/* Tablet responsive for breakdown tables */
@media (min-width: 481px) and (max-width: 768px) {
  .breakdown-category-name {
    max-width: 120px;
    font-size: 0.85rem;
  }
}

/* Mobile responsive for breakdown tables */
@media (max-width: 480px) {
  .breakdown-category-name {
    max-width: 80px;
    font-size: 0.72rem;
  }

  /* Column widths inherit from mobile percentage rules */
  .stats-table td:nth-child(1),
  .stats-table th:nth-child(1) {
    min-width: 50px;
  }
}

@keyframes scroll-text {
  0%, 25% {
    transform: translateX(0);
  }
  75%, 100% {
    transform: translateX(var(--scroll-dist));
  }
}

.transaction-category {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.transaction-category .category-badge {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Desktop: category badge visible full-width */
@media (min-width: 769px) {
  .transaction-category .category-badge {
    max-width: none;
  }
}

/* Transaction Amount */
.transaction-amount {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.transaction-amount .amount {
  font-weight: 700;
  font-size: 1.1rem;
}

.transaction-amount .amount.income {
  color: #10b981;
}

.transaction-amount .amount.spending {
  color: #ef4444;
}

.transaction-amount .amount.account_receivable {
  color: #d97706;
}

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

/* Action Buttons on Card - Always Visible */
.transaction-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: 0.5rem;
  align-items: center;
}

.transaction-actions .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.transaction-actions .edit-btn {
  background: #355872;
  color: white;
}

.transaction-actions .edit-btn:hover {
  background: #2a4559;
  transform: scale(1.05);
}

.transaction-actions .delete-btn {
  background: #ef4444;
  color: white;
}

.transaction-actions .delete-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--border-color);
}

.empty-state p {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.empty-state span {
  font-size: 0.875rem;
  display: block;
  margin: 0 auto;
  line-height: 1.5;
}

/* Mobile Responsive for Records Cards */
@media (max-width: 768px) {
  .records-section {
    padding: 1rem;
    flex: 1;
    min-width: 0;
  }

  .records-actions {
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
  }

  .add-transaction-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset;
  }

  .add-transaction-btn span {
    display: none;
  }

  .add-transaction-btn i {
    font-size: 1rem;
    margin: 0;
  }

  .filter-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    min-height: unset;
  }

  .transaction-card {
    padding: 0.75rem;
    gap: 0.6rem;
    flex-wrap: nowrap;
  }

  .transaction-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border-radius: 8px;
  }

  .transaction-info {
    flex: 1;
    min-width: 0;
    gap: 0.15rem;
  }

  .transaction-name {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .transaction-category {
    font-size: 0.75rem;
    gap: 0.25rem;
    flex-wrap: wrap;
  }

  .transaction-category .category-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    max-width: 140px;
    display: none;
  }

  .transaction-category span:last-child {
    font-size: 0.7rem;
  }

  .transaction-amount {
    flex-shrink: 0;
    min-width: 74px;
  }

  .transaction-amount .amount {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .transaction-amount .date {
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .transaction-actions {
    gap: 0.3rem;
    margin-left: 0.15rem;
    flex-shrink: 0;
  }

  .transaction-actions .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
}

/* Desktop: show labels on button */
@media (min-width: 769px) {
  .add-transaction-btn span {
    display: inline;
  }

  .add-transaction-btn i {
    display: inline;
  }
}

/* ========================================
   BUDGET TAB STYLES
   ======================================== */

/* Budget KPI Cards */
.kpi-card.budget .kpi-icon {
  background: rgba(53, 88, 114, 0.15);
  color: var(--primary-color);
}

.kpi-card.warning .kpi-icon {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.kpi-card.danger .kpi-icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.kpi-card.warning .kpi-details p {
  color: var(--warning);
}

.kpi-card.danger .kpi-details p {
  color: var(--danger);
}

/* Budget Limits List */
.budget-limits-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Budget Limit Item */
.budget-limit-item {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

.budget-limit-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(53, 88, 114, 0.1);
}

.budget-limit-item.near-limit {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.03);
}

.budget-limit-item.capped {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.03);
}

/* Budget Limit Header */
.budget-limit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.budget-limit-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.budget-limit-category {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
}

/* Status Badges */
.budget-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.budget-status-badge.safe {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.budget-status-badge.near {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.budget-status-badge.capped {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* Budget Limit Actions */
.budget-limit-actions {
  display: flex;
  gap: 0.5rem;
}

.budget-limit-actions .btn-icon {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
}

/* Budget Amount Display */
.budget-amount-display {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  gap: 0.25rem;
}

.budget-amount-display .spent {
  font-weight: 600;
}

.budget-amount-display .spent.near {
  color: var(--warning);
}

.budget-amount-display .spent.capped {
  color: var(--danger);
}

.budget-amount-display .limit {
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Progress Bar Container */
.budget-progress-container {
  position: relative;
  height: 8px;
  background: rgba(122, 170, 206, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

/* Progress Bar Fill */
.budget-progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease, background-color 0.3s ease;
  position: relative;
}

.budget-progress-bar.safe {
  background: var(--success);
}

.budget-progress-bar.near {
  background: var(--warning);
}

.budget-progress-bar.capped {
  background: var(--danger);
}

/* Progress Bar Animation */
@keyframes progressPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.budget-progress-bar.near,
.budget-progress-bar.capped {
  animation: progressPulse 2s ease-in-out infinite;
}

/* Budget Reset Button */
#reset-all-budgets-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* Budget Modal Adjustments */
#budget-limit-modal .modal-content {
  max-width: 450px;
}

/* Budget Limit Percentage Display */
.budget-percentage {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.budget-percentage.near {
  color: var(--warning);
}

.budget-percentage.capped {
  color: var(--danger);
}

/* ========================================
   UPCOMING WIDGET STYLES
   ======================================== */

.upcoming-widget {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.upcoming-widget-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.upcoming-widget-header i {
  font-size: 1rem;
  color: white !important;
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upcoming-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.upcoming-date {
  min-width: 70px;
  font-weight: 600;
  color: white !important;
  font-size: 0.8rem;
}

.upcoming-amount {
  font-weight: 700;
  min-width: 75px;
  font-size: 0.9rem;
  color: white !important;
  display: flex;
  gap: 0;
}

.upcoming-amount .amount-value {
  color: white !important;
  font-weight: 700;
}

.upcoming-amount .currency-sign {
  font-weight: 700;
}

.upcoming-amount .currency-sign.positive {
  color: #4ade80 !important;
  text-shadow: 0 0 2px rgba(255,255,255,0.3);
}

.upcoming-amount .currency-sign.negative {
  color: #f87171 !important;
  text-shadow: 0 0 2px rgba(255,255,255,0.3);
}

.upcoming-desc {
  flex: 1;
  color: white;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.upcoming-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

/* Mobile Budget Adjustments */
@media (max-width: 768px) {
  .budget-limit-header {
    flex-wrap: wrap;
  }

  .budget-limit-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #budget-kpis {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  #budget-kpis .kpi-card {
    padding: 0.75rem;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  #budget-kpis .kpi-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    background: rgba(53, 88, 114, 0.15);
  }

  #budget-kpis .kpi-details h3 {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
  }

  #budget-kpis .kpi-details p {
    font-size: 1.25rem;
    color: var(--text-main);
    font-weight: 700;
  }

  #budget-kpis .kpi-card.budget .kpi-icon {
    background: rgba(53, 88, 114, 0.15);
    color: #355872;
  }

  #budget-kpis .kpi-card.warning .kpi-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
  }

  #budget-kpis .kpi-card.danger .kpi-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
  }

  .upcoming-widget {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
  }

  .upcoming-item {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
  }

  .upcoming-date {
    min-width: 60px;
    font-size: 0.75rem;
    color: white !important;
  }

  .upcoming-amount {
    min-width: 65px;
    font-size: 0.85rem;
    color: white !important;
  }

  .upcoming-desc {
    width: 100%;
    order: 3;
    font-size: 0.8rem;
  }
}

/* ========================================
   TAB CONTENT MARGINS & MODAL FIXES
   ======================================== */

/* Tab Content - ensure proper spacing from header on all pages */
.tab-content {
  padding-top: 1rem;
}

/* Specific page top margins for pages with floating user-info */
#analytics,
#budget,
#savings,
#settings {
  padding-top: 2.5rem;
}

/* Modal active state - ensure display */
.modal.active {
  display: flex !important;
}

/* Budget Limit Modal specific */
#budget-limit-modal.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Budget Tab FAB Button - ensure it's visible and clickable */
#budget .fab {
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: flex !important;
}

#add-budget-limit-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex !important;
}

@media (max-width: 768px) {
  #add-budget-limit-btn {
    right: 12px;
    bottom: 80px;
    z-index: 9999 !important;
    display: flex !important;
  }
  
  #add-budget-limit-btn .fab-label {
    display: none;
  }
}

/* Ensure Budget tab content is properly layered */
#budget.tab-content {
  position: relative;
  z-index: 1;
}

/* Fix modal to ensure it's on top */
#budget-limit-modal {
  z-index: 10000 !important;
}

#budget-limit-modal .modal-content {
  z-index: 10001 !important;
}


/* ========================================
   UPCOMING INCOME SECTION FOR BUDGET TAB
   ======================================== */

.upcoming-income-section {
  margin-bottom: 1.5rem;
}

.upcoming-income-section .card-header {
  margin-bottom: 1rem;
}

.upcoming-income-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upcoming-income-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.upcoming-income-item:hover {
  border-color: var(--success);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.upcoming-income-item .income-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.upcoming-income-item .income-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.upcoming-income-item .income-details {
  display: flex;
  flex-direction: column;
}

.upcoming-income-item .income-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.95rem;
}

.upcoming-income-item .income-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.upcoming-income-item .income-amount {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--success);
}

.upcoming-ar-item {
  border-left: 3px solid #d97706;
}

.upcoming-ar-item .income-icon {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

.upcoming-ar-item .income-amount {
  color: #d97706;
}

.upcoming-ar-item .collect-btn {
  padding: 0.5rem 1rem;
  background: var(--success);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upcoming-ar-item .collect-btn:hover {
  background: #059669;
}

.upcoming-income-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.upcoming-income-empty i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Upcoming Income Actions */
.upcoming-income-item .income-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upcoming-income-item .income-actions .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.upcoming-income-item .income-actions .btn-icon:hover {
  background: rgba(53, 88, 114, 0.1);
  color: var(--primary-color);
}

.upcoming-income-item .income-actions .btn-icon.delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.upcoming-income-item .income-info {
  cursor: pointer;
  flex: 1;
}

.upcoming-income-item.upcoming-projected {
  border-left: 3px solid var(--success);
}

.upcoming-income-item.upcoming-recurring {
  border-left: 3px solid #8b5cf6; /* Purple accent for recurring */
}

.upcoming-income-item.upcoming-recurring .income-icon {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

/* Recurring checkbox styling - looks like active button when checked */
.recurring-checkbox-wrapper {
  transition: all 0.2s ease;
}

.recurring-checkbox-wrapper:has(input:checked),
.recurring-checkbox-wrapper.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.recurring-checkbox-wrapper:has(input:checked) label,
.recurring-checkbox-wrapper.active label {
  color: white;
}

/* Enhanced Received button for recurring income */
.upcoming-income-item.upcoming-recurring .collect-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.upcoming-income-item.upcoming-recurring .collect-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

/* Upcoming Income Popup */
.upcoming-income-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  min-width: 320px;
  max-width: 90vw;
  animation: popupFadeIn 0.2s ease;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.upcoming-income-popup .popup-content {
  padding: 1.5rem;
}

.upcoming-income-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.upcoming-income-popup .popup-header h3 {
  font-size: 1.1rem;
  color: var(--text-main);
  margin: 0;
}

.upcoming-income-popup .popup-header .close-popup {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.upcoming-income-popup .popup-header .close-popup:hover {
  background: rgba(53, 88, 114, 0.1);
  color: var(--primary-color);
}

.upcoming-income-popup .popup-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upcoming-income-popup .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.upcoming-income-popup .detail-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.upcoming-income-popup .detail-value {
  font-size: 0.9rem;
  color: var(--text-main);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.upcoming-income-popup .detail-value.income-amount {
  color: var(--success);
  font-size: 1.1rem;
}

.upcoming-income-popup .detail-value.collected {
  color: var(--success);
}

.upcoming-income-popup .detail-value.pending {
  color: #d97706;
}

.upcoming-income-popup .detail-value.notes-text {
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 200px;
}

/* Responsive styles for upcoming income items */
@media (max-width: 480px) {
  .upcoming-income-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }

  .upcoming-income-item .income-info {
    width: 100%;
  }

  .upcoming-income-item .income-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .upcoming-income-item .income-amount {
    font-size: 1rem;
    margin-right: auto;
  }

  .upcoming-income-item .income-name {
    font-size: 0.9rem;
  }

  .upcoming-ar-item .collect-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .upcoming-income-item .income-actions .btn-icon {
    width: 28px;
    height: 28px;
  }
}


/* --- Insights Table Refinements --- */
.stats-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.stats-table th {
  padding: 0.75rem 0.5rem;
  font-size: 0.75rem;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  border-bottom: 2px solid var(--border-color);
  background: rgba(122, 170, 206, 0.05);
  text-align: center;
}

.stats-table td {
  padding: 0.75rem 0.35rem;
  vertical-align: middle;
  text-align: center;
  font-size: 0.85rem;
}

/* Mobile reduce padding further */
@media (max-width: 768px) {
  .stats-table th {
    padding: 0.5rem 0.25rem;
    font-size: 0.7rem;
  }

  .stats-table td {
    padding: 0.5rem 0.2rem;
    font-size: 0.8rem;
  }
}

/* Desktop column widths (min-width 769px) */
@media (min-width: 769px) {
  /* Specific column widths - balanced ratios for desktop */
  .stats-table td:nth-child(1),
  .stats-table th:nth-child(1) { width: 20%; text-align: left; padding-left: 1rem !important; }
  .stats-table td:nth-child(2),
  .stats-table th:nth-child(2) { width: 12%; text-align: center; }
  .stats-table td:nth-child(3),
  .stats-table th:nth-child(3) { width: 28%; text-align: center; }
  .stats-table td:nth-child(4),
  .stats-table th:nth-child(4) { width: 40%; text-align: center; padding-right: 1rem !important; }
}

/* Mobile column widths (max-width 768px) */
@media (max-width: 768px) {
  .stats-table td:nth-child(1),
  .stats-table th:nth-child(1) { width: 32%; text-align: left; padding-left: 0.75rem !important; }
  .stats-table td:nth-child(2),
  .stats-table th:nth-child(2) { width: 16%; text-align: center; }
  .stats-table td:nth-child(3),
  .stats-table th:nth-child(3) { width: 28%; text-align: center; }
  .stats-table td:nth-child(4),
  .stats-table th:nth-child(4) { width: 16%; text-align: center; padding-right: 0.5rem !important; }
  
  /* Reduce percentage text size on tablet */
  .percentage-text {
    font-size: 0.65rem;
    min-width: 28px;
  }
}

/* Small mobile (max-width 480px) */
@media (max-width: 480px) {
  .stats-table td:nth-child(1),
  .stats-table th:nth-child(1) { width: 38%; text-align: left; padding-left: 0.4rem !important; }
  .stats-table td:nth-child(2),
  .stats-table th:nth-child(2) { width: 12%; text-align: center; }
  .stats-table td:nth-child(3),
  .stats-table th:nth-child(3) { width: 26%; text-align: center; }
  .stats-table td:nth-child(4),
  .stats-table th:nth-child(4) { width: 14%; text-align: center; padding-right: 0.2rem !important; }

  .stats-table th {
    padding: 0.4rem 0.15rem;
    font-size: 0.6rem;
  }

  .stats-table td {
    padding: 0.4rem 0.15rem;
    font-size: 0.72rem;
  }
}

/* Footer cells centered */
.stats-table tfoot td:nth-child(1) { text-align: center; }
.stats-table tfoot td:nth-child(2) { text-align: center; }
.stats-table tfoot td:nth-child(3) { text-align: center; }
.stats-table tfoot td:nth-child(4) { text-align: center; }

.stats-table tfoot tr {
  background: rgba(53, 88, 114, 0.03) !important;
}

.stats-table tfoot td {
  padding: 1rem 0.5rem !important;
  font-size: 0.85rem !important;
  color: var(--primary-color) !important;
  border-top: 2px solid var(--border-color) !important;
  font-weight: 800 !important;
  text-align: center;
}

@media (max-width: 768px) {
  .stats-table tfoot td {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  .stats-table tfoot td {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.7rem !important;
  }
}

.pagination-controls {
  padding: 1.25rem 0.75rem;
  gap: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#breakdown-page-info {
  font-size: 0.75rem !important;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  flex: 1;
}

.pagination-controls .btn-sm {
  padding: 0.4rem 0.75rem !important;
  min-width: 90px;
  font-size: 0.75rem !important;
}

/* Percentage column visualization */
.percentage-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.percentage-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  overflow: hidden;
  min-height: 6px;
}

.percentage-bar-fill {
  height: 100%;
  width: 100%;
  background: rgba(53, 88, 114, 0.2);
  border-radius: 3px;
}

.percentage-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 35px;
}

/* Mobile: Show percentage text only, hide progress bar */
@media (max-width: 768px) {
  .percentage-bar {
    display: none;
  }

  .percentage-bar-container {
    gap: 0;
    justify-content: center;
  }

  .percentage-text {
    font-size: 0.65rem;
    min-width: 28px;
    text-align: center;
  }
}

/* Very small mobile: Further optimization */
@media (max-width: 480px) {
  .percentage-text {
    font-size: 0.6rem;
    min-width: 24px;
    text-align: center;
  }
}

/* ========================================
   AR COLLECTION FLOATING CARD
   ======================================== */

.ar-collection-card {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 400px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  border: 1px solid var(--border-color);
  animation: arCardSlideIn 0.3s ease;
}

@keyframes arCardSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -55%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.ar-collection-card.active {
  display: flex;
  flex-direction: column;
}

.ar-collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(53, 88, 114, 0.05) 0%, rgba(122, 170, 206, 0.05) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}

.ar-collection-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ar-collection-header h3::before {
  content: '\f4e4';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--success);
}

.ar-collection-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ar-collection-info {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ar-collection-total,
.ar-collection-remaining {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ar-info-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.ar-info-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary-color);
}

.ar-collection-remaining .ar-info-value {
  color: var(--warning);
}

.ar-collection-body .form-group {
  margin: 0;
}

.ar-collection-body .form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  display: block;
}

.ar-collection-body input[type="number"] {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
  transition: all 0.2s ease;
  background: white;
}

.ar-collection-body input[type="number"]:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(53, 88, 114, 0.1);
}

.ar-collection-quick-actions {
  display: flex;
  justify-content: center;
}

.ar-collection-quick-actions .btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.ar-collection-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ar-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.ar-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success) 0%, #34d399 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ar-progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
}

.ar-collection-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(53, 88, 114, 0.02) 0%, rgba(122, 170, 206, 0.02) 100%);
  border-radius: 0 0 var(--radius) var(--radius);
}

.ar-collection-actions .btn {
  flex: 1;
  justify-content: center;
}

/* AR Collection Card Overlay */
.ar-collection-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(53, 88, 114, 0.4);
  backdrop-filter: blur(2px);
  z-index: 1999;
}

.ar-collection-overlay.active {
  display: block;
}

/* Mobile responsiveness for AR collection card */
@media (max-width: 480px) {
  .ar-collection-card {
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .ar-collection-header {
    padding: 1rem;
  }

  .ar-collection-body {
    padding: 1.25rem;
  }

  .ar-collection-actions {
    padding: 0.875rem 1rem 1.25rem;
  }

  .ar-collection-info {
    padding: 0.875rem;
  }
}