/**
 * PennyBot Page-Specific Styles v3.0
 *
 * Contains ONLY page-specific component styles.
 * All shared components are in pennybot-components.css
 * All layout primitives are in pennybot-layouts.css
 * All utility classes are in pennybot-utilities.css
 *
 * Load order: design-tokens.css → pennybot-components.css → pennybot-layouts.css → pennybot-utilities.css → pennybot-styles.css
 */

/* ============================================
   SETTINGS PAGE COMPONENTS
   ============================================ */

/* Disabled/locked setting item */
.disabled-setting {
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.disabled-setting:last-child {
  margin-bottom: 0;
}

.disabled-setting .checkbox-label span {
  color: var(--color-text-muted);
}

/* Settings section title */
.settings-section-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

/* Settings sub-section title */
.settings-sub-section-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

/* Email processing card */
.email-card {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.email-card--receipt {
  background: rgba(127, 225, 176, 0.15);
  border: 2px solid var(--color-positive);
}

.email-card--statement {
  background: rgba(93, 169, 233, 0.1);
  border: 2px solid var(--color-brand-secondary);
}

.email-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.email-card__icon {
  font-size: var(--font-size-2xl);
}

.email-card__input-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Webhook documentation styles */
.webhook-docs {
  margin-top: var(--space-6);
}

/* ============================================
   FINANCIAL INSIGHTS COMPONENTS
   ============================================ */

/* Forecast loading/error states */
.forecast-state {
  text-align: center;
  padding: 60px var(--space-5);
}

.forecast-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-5);
}

.forecast-state__title {
  margin-bottom: var(--space-3);
}

.forecast-state__title--loading {
  color: var(--color-brand-primary);
}

.forecast-state__title--error {
  color: var(--color-negative);
}

.forecast-state__title--info {
  color: var(--color-text-muted);
}

.forecast-state__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Cash flow warning box */
.cashflow-warning {
  background: var(--color-negative-bg, #fee2e2);
  border: 2px solid var(--color-negative);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.cashflow-warning__title {
  color: var(--color-negative-strong, #991b1b);
  margin: 0 0 var(--space-3) 0;
}

.cashflow-warning__item {
  color: #7f1d1d;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

/* Stats grid 3-col */
.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Chart container */
.chart-container {
  background: var(--color-bg-base);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.chart-container__title {
  margin: 0 0 var(--space-5) 0;
  color: var(--color-text-default);
}

.chart-container canvas {
  max-height: 300px;
}

/* Data tables - forecast style */
.forecast-table {
  width: 100%;
  border-collapse: collapse;
}

.forecast-table thead tr {
  background: var(--color-bg-subtle);
  border-bottom: 2px solid var(--color-border-default);
}

.forecast-table th {
  padding: var(--space-3);
  text-align: left;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.forecast-table th.text-right {
  text-align: right;
}

.forecast-table tbody tr {
  border-bottom: 1px solid var(--color-border-default);
}

.forecast-table td {
  padding: var(--space-3);
}

.forecast-table .month-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.forecast-table .warning-icon {
  color: var(--color-negative);
  margin-left: var(--space-2);
}

.forecast-table .income-cell {
  text-align: right;
  color: var(--color-positive);
  font-weight: var(--font-weight-semibold);
}

.forecast-table .expense-cell {
  text-align: right;
  color: var(--color-negative);
  font-weight: var(--font-weight-semibold);
}

.forecast-table .net-cell {
  text-align: right;
  font-weight: var(--font-weight-bold);
}

.forecast-table .net-cell--positive {
  color: var(--color-positive);
}

.forecast-table .net-cell--negative {
  color: var(--color-negative);
}

.forecast-table tr.row-warning {
  background: rgba(254, 226, 226, 0.5);
}

/* Disclaimer box */
.disclaimer-box {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-5);
}

.disclaimer-box p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Budget template cards */
.template-card {
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.template-card--50-30-20 {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
}

.template-card--zero-based {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.template-card--envelope {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.template-card--pay-yourself {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.template-card__title {
  margin: 0 0 var(--space-3) 0;
}

.template-card__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  opacity: 0.95;
}

.template-card__hint {
  margin-top: var(--space-3);
  opacity: 0.8;
  font-size: var(--font-size-sm);
}

/* Template grid */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* Section header with actions */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  background: var(--color-bg-base);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.section-header__info h2 {
  color: var(--color-brand-primary);
  margin: 0;
  font-family: var(--font-accent);
}

.section-header__info p {
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.section-header__actions {
  display: flex;
  gap: var(--space-3);
}

/* Button groups */
.btn-group {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.btn-group--equal > * {
  flex: 1;
}

/* Health actions container */
.health-actions {
  display: none;
}

.health-actions--visible {
  display: block;
}

/* Quick actions container */
.quick-actions {
  margin-bottom: var(--space-5);
}

/* Gradient button */
.btn-gradient-primary {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
}

/* Modal title text */
.modal-title-text {
  margin: 0;
}

/* Goal type cards */
.goal-type-card--emergency {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.goal-type-card--vacation {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.goal-type-card--down-payment {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.goal-type-card--general {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Auto-contribute section */
.auto-contribute-card {
  background: var(--color-positive-bg, #f0fdf4);
  border: 2px solid var(--color-positive);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.auto-contribute-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.auto-contribute-label input {
  margin-right: var(--space-3);
}

.auto-contribute-label span {
  font-weight: var(--font-weight-semibold);
}

.auto-contribute-settings {
  display: none;
  margin-top: var(--space-4);
}

/* Toolbar button alignment */
.toolbar-btn {
  margin-top: 22px;
}

/* Search input min-width */
.search-input-wide {
  min-width: 250px;
}

/* Warning callout box */
.warning-callout {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-warning-bg, #fff3cd);
  border-left: 4px solid #ffc107;
  border-radius: var(--radius-sm);
}

/* Merge preview section */
.merge-preview {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}

.merge-preview h4 {
  margin-top: 0;
}

/* Checkbox field alignment */
.checkbox-field {
  display: flex;
  align-items: center;
  padding-top: var(--space-5);
}

/* Toolbar actions container */
.toolbar-actions {
  margin-top: 22px;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.toolbar-actions--right {
  margin-left: auto;
}

/* Form actions centered */
.form-actions-centered {
  margin-top: var(--space-4);
  justify-content: center;
}

/* Modal content width variants */
.modal-content--wide {
  max-width: 700px;
}

.modal-content--narrow {
  max-width: 400px;
}

/* Tree container */
.tree-container {
  padding: var(--space-5);
}

/* Status indicator badges */
.status-indicator {
  font-size: 11px;
}

.status-indicator--active {
  color: var(--color-positive);
}

.status-indicator--inactive {
  color: var(--color-negative);
}

/* Provider badges */
.provider-badge {
  color: white;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  margin-left: var(--space-2);
}

.provider-badge--quickbooks {
  background: #2CA01C;
}

.provider-badge--xero {
  background: #13B5EA;
}

.provider-badge--pennybot {
  background: var(--color-brand-primary);
}

/* Category tree item */
.category-tree-item {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  transition: background 0.2s, box-shadow 0.2s;
}

.category-tree-item--child {
  border-left: 2px solid var(--color-border-default);
}

.category-tree-item__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.category-tree-item__checkbox {
  cursor: pointer;
}

.category-tree-item__toggle {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  width: 16px;
  text-align: center;
}

.category-tree-item__spacer {
  width: 16px;
}

.category-tree-item__icon {
  font-size: 16px;
}

.category-tree-item__name {
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.category-tree-item__type {
  color: var(--color-text-muted);
  font-size: 13px;
}

.category-tree-item__children-count {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Drag handle */
.drag-handle {
  cursor: grab;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

/* Category children container */
.category-children {
  display: block;
}

/* Split modal styles */
.split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.split-header h4 {
  margin: 0;
}

.split-actions {
  display: flex;
  gap: var(--space-2);
}

.split-total-section {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.split-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.split-total-label {
  font-weight: var(--font-weight-semibold);
}

.split-total-value {
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
}

.split-validation-message {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  display: none;
}

/* Amount weight styling */
.amount-weight {
  font-weight: var(--font-weight-semibold);
}

/* AI badge */
.ai-badge {
  background: var(--color-ai-accent);
  color: white;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: help;
  margin-left: var(--space-2);
}

/* Selection counter */
.selection-counter {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-4);
}

/* Empty table message */
.empty-table-message {
  text-align: center;
  color: var(--color-text-muted);
}

.empty-split-message {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-5);
}

/* AI categorize button */
.btn-ai {
  background: var(--color-ai-accent);
  color: white;
}

.btn-ai:hover {
  background: var(--color-ai-accent-strong);
}

/* Merge modal description */
.merge-description {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
}

/* Category indent display */
.category-indent {
  display: inline-block;
}

/* ============================================
   ADMIN DASHBOARD COMPONENTS
   ============================================ */

.admin-actions {
  display: flex;
  gap: var(--space-3);
}

.admin-summary {
  margin-bottom: var(--space-5);
}

.admin-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.admin-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.admin-grid-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.select-auto-width {
  width: auto;
}

/* Metric cards for admin dashboard */
.metric-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.metric-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.metric-card__title {
  margin: 0;
}

.metric-card__content {
  display: grid;
  gap: var(--space-3);
}

/* Status badges */
.status-badge {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  text-transform: uppercase;
  color: white;
}

.status-badge--error {
  background: var(--color-negative);
}

.status-badge--warning {
  background: var(--color-warning);
}

.status-badge--info {
  background: var(--color-info);
}

.status-badge--success {
  background: var(--color-positive);
}

.status-badge--active {
  color: var(--color-positive);
}

.status-badge--inactive {
  color: var(--color-negative);
}

/* Error card for sentry errors */
.error-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.error-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.error-card__info {
  flex: 1;
}

.error-card__title {
  margin: 0 0 5px 0;
}

.error-card__message {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.error-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.error-card__stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.error-card__stat-value {
  font-weight: var(--font-weight-semibold);
}

.error-card__stat-value--sm {
  font-weight: var(--font-weight-semibold);
  font-size: 12px;
}

.error-card__footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

/* Error level badge */
.error-level-badge {
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  text-transform: uppercase;
}

/* Error grid container */
.error-grid {
  display: grid;
  gap: var(--space-4);
}

/* Connection badge */
.connection-item {
  margin-top: var(--space-2);
}

/* Admin tables */
.admin-table {
  font-size: 12px;
}
.admin-table td.small-text {
  font-size: 10px;
}
.admin-table td.email-text {
  font-size: 11px;
}
.admin-table td.bold-text {
  font-weight: var(--font-weight-semibold);
}

/* User detail section */
.user-detail-section {
  margin-top: var(--space-5);
}

/* Warning banner */
.warning-banner {
  background: var(--color-warning-bg, #fff5cc);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-warning);
}

.warning-banner__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

.warning-banner__text {
  font-size: var(--font-size-sm);
  margin: 0;
}

.warning-banner__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.warning-banner code {
  background: var(--color-bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Code inline */
.code-inline {
  background: var(--color-bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* No data message */
.no-data-message {
  color: var(--color-text-muted);
  text-align: center;
}

/* Cache hint */
.cache-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* View more link container */
.view-more-container {
  text-align: center;
  margin-top: var(--space-5);
}

/* Inline badge */
.inline-badge {
  padding: var(--space-3);
}

/* Modal text link */
.modal-text-link {
  display: inline-block;
  text-decoration: none;
}

/* Admin stat grid */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.admin-stat-grid--narrow {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.admin-stat-grid--small {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.admin-stat-grid--tools {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

/* Stat card (admin) */
.admin-stat-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.admin-stat-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.admin-stat-card__title {
  margin: 0;
}
.admin-stat-card__title--with-margin {
  margin: 0 0 var(--space-4) 0;
}

/* Stat box (colored backgrounds) */
.stat-box {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}
.stat-box--gray { background: var(--color-bg-subtle); }
.stat-box--blue { background: var(--color-info-bg, #e0f2ff); }
.stat-box--green { background: var(--color-positive-bg, #d1f4e0); }
.stat-box--yellow { background: var(--color-warning-bg, #fff5cc); }
.stat-box--red { background: var(--color-negative-bg, #ffe5e5); }
.stat-box--warning {
  background: var(--color-warning-bg, #fff5cc);
  border-left: 4px solid var(--color-warning);
  padding: var(--space-5);
}

.stat-box__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.stat-box__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}
.stat-box__value--primary { color: var(--color-brand-primary); }
.stat-box__value--success { color: var(--color-positive); }
.stat-box__value--warning { color: var(--color-warning); }
.stat-box__value--danger { color: var(--color-negative); }

/* Admin empty/error states */
.admin-empty-message {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}
.admin-error-message {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-negative);
}
.admin-error-inline {
  color: var(--color-negative);
}

/* Errors list container */
.errors-grid {
  display: grid;
  gap: var(--space-4);
}

/* ============================================
   SAVINGS GOALS COMPONENTS
   ============================================ */

/* Auto-contribute box */
.auto-contribute-box {
  background: var(--color-positive-bg, #f0fdf4);
  border: 2px solid var(--color-positive);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Milestone section */
.milestone-section h4 {
  margin: 0 0 var(--space-4) 0;
}

.milestone-section p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* Form actions with flex */
.form-actions-flex {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.form-actions-flex .btn {
  flex: 1;
}

/* Contribution form */
.contribution-box {
  background: var(--color-positive-bg, #f0fdf4);
  border: 2px solid var(--color-positive);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
}

.contribution-box h4 {
  margin: 0 0 var(--space-4) 0;
}

.contribution-form-row {
  display: flex;
  gap: var(--space-3);
  align-items: end;
}

.contribution-form-row > div {
  flex: 1;
}

.btn-nowrap {
  white-space: nowrap;
}

/* Modal header with title only */
.modal-header-title {
  margin: 0;
}

/* Goal intro text */
.goal-intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* AI suggestion center */
.ai-suggestion-center {
  text-align: center;
  padding: var(--space-8);
}

.ai-suggestion-center p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* Error center state */
.error-center {
  text-align: center;
  padding: 60px var(--space-5);
  color: var(--color-negative);
}

/* Loading/empty state center */
.state-center {
  text-align: center;
  padding: 60px var(--space-5);
  color: var(--color-text-muted);
}

/* AI suggest button gradient */
.btn-ai-gradient {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  color: white;
}

/* Form grid layout */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Form help text */
.form-help-center {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

/* Goal target date */
.goal-target-date {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
}

/* Projection status */
.projection-status__icon {
  font-size: var(--font-size-xl);
}

/* Contribution item */
.contribution-item__notes {
  font-weight: var(--font-weight-medium);
}

/* ============================================
   BUDGET DASHBOARD COMPONENTS
   ============================================ */

/* Budget empty state */
.budget-empty-state {
  text-align: center;
  padding: 60px var(--space-5);
}

.budget-empty-state h3 {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.budget-empty-state p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* Category allocation row */
.category-allocation--detail {
  flex-direction: column;
  align-items: flex-start;
}

.category-allocation__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.category-allocation__name {
  font-weight: var(--font-weight-medium);
}

.category-allocation__amounts {
  color: var(--color-text-muted);
}

.progress-bar-bg--full {
  width: 100%;
}

/* Alert status */
.alert-status {
  font-weight: var(--font-weight-semibold);
}

.alert-status--triggered {
  color: var(--color-negative);
}

.alert-status--ok {
  color: var(--color-positive);
}

/* AI recommendation loading */
.ai-loading {
  text-align: center;
  padding: 60px;
}

.ai-loading__icon {
  font-size: 48px;
  margin-bottom: var(--space-5);
}

.ai-loading__title {
  font-size: var(--font-size-lg);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
}

.ai-loading__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ai-loading__bar {
  width: 200px;
  height: 4px;
  background: var(--color-border-default);
  margin: var(--space-6) auto;
  border-radius: 2px;
  overflow: hidden;
}

.ai-loading__bar-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
  animation: loading 2s ease-in-out infinite;
}

/* AI recommendation result */
.ai-result {
  padding: var(--space-5);
}

.ai-result__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.ai-result__badge {
  background: linear-gradient(135deg, var(--color-positive) 0%, #059669 100%);
  color: white;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.ai-result__income {
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.ai-result__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* AI insights box */
.ai-insights {
  background: var(--color-info-bg, #f0f9ff);
  border-left: 4px solid var(--color-info);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
}

.ai-insights h4 {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-info-strong);
}

.ai-insights ul {
  margin: 0;
  padding-left: var(--space-5);
}

.ai-insights li {
  margin-bottom: var(--space-2);
  color: var(--color-text-default);
}

/* Budget recommendation card */
.budget-recommend-card {
  background: var(--color-bg-base);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.budget-recommend-card h4 {
  margin: 0 0 var(--space-5) 0;
  color: var(--color-text-default);
  font-size: var(--font-size-xl);
}

.budget-total-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.budget-total-banner__label {
  color: white;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.budget-total-banner__amount {
  color: white;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
}

/* Category list scrollable */
.category-scroll {
  max-height: 400px;
  overflow-y: auto;
}

/* Category item in recommendations */
.category-recommend-item {
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-4) 0;
}

.category-recommend-item__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.category-recommend-item__info {
  flex: 1;
}

.category-recommend-item__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
  margin-bottom: var(--space-1);
}

.category-recommend-item__reasoning {
  font-size: 13px;
  color: var(--color-text-muted);
}

.category-recommend-item__amounts {
  text-align: right;
  margin-left: var(--space-5);
}

.category-recommend-item__recommended {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}

.category-recommend-item__current {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Goals grid */
.goals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.goal-card {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}

.goal-card--emergency {
  background: var(--color-warning-bg, #fef3c7);
}

.goal-card--savings {
  background: #d1fae5;
}

.goal-card__label {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.goal-card--emergency .goal-card__label {
  color: var(--color-warning-strong, #92400e);
}

.goal-card--savings .goal-card__label {
  color: var(--color-positive-strong);
}

.goal-card__amount {
  font-size: 32px;
  font-weight: var(--font-weight-bold);
}

.goal-card--emergency .goal-card__amount {
  color: #d97706;
}

.goal-card--savings .goal-card__amount {
  color: #059669;
}

.goal-card__hint {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

.goal-card--emergency .goal-card__hint {
  color: var(--color-warning-strong, #92400e);
}

.goal-card--savings .goal-card__hint {
  color: var(--color-positive-strong);
}

/* AI error state */
.ai-error {
  text-align: center;
  padding: 60px;
}

.ai-error__icon {
  font-size: 48px;
  margin-bottom: var(--space-5);
}

.ai-error__message {
  font-size: var(--font-size-lg);
  color: var(--color-negative);
  margin-bottom: var(--space-3);
}

/* Budget tabs */
.budget-tabs {
  margin-bottom: var(--space-5);
}

/* ============================================
   CATEGORY TREE VIEW
   ============================================ */

/* Source system badges */
.source-badge {
  color: white;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  margin-left: var(--space-2);
}
.source-badge--quickbooks {
  background: #2CA01C;
}
.source-badge--xero {
  background: #13B5EA;
}
.source-badge--pennybot {
  background: var(--color-brand-primary);
}

/* Tree node wrapper */
.category-tree-node {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  transition: background 0.2s, box-shadow 0.2s;
}
.category-tree-node--child {
  border-left: 2px solid var(--color-border-default);
}

/* Tree node row */
.tree-node-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Tree toggle arrow */
.tree-toggle {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  width: 16px;
  text-align: center;
}

/* Spacer for alignment */
.tree-spacer {
  width: 16px;
}

/* Category icon */
.category-icon {
  font-size: 16px;
}

/* Category name */
.category-name {
  font-weight: var(--font-weight-medium);
  flex: 1;
}

/* Category type */
.category-type {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Children count */
.children-count {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Category checkbox */
.category-checkbox {
  cursor: pointer;
}

/* Category selection indicator */
.category-selection-count {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
  margin-right: 1rem;
}

/* Merge preview styles */
.merge-preview-error {
  color: var(--color-negative);
}
.merge-preview-note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

/* Table status text */
.status-text--active {
  color: var(--color-positive);
  font-weight: var(--font-weight-medium);
}
.status-text--inactive {
  color: var(--color-negative);
  font-weight: var(--font-weight-medium);
}

/* Source badges (list view variant) */
.source-badge-lg {
  color: white;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.source-badge-lg--quickbooks {
  background: #2CA01C;
}
.source-badge-lg--xero {
  background: #13B5EA;
}
.source-badge-lg--pennybot {
  background: var(--color-brand-primary);
}

/* Empty state for tables */
.table-empty-message {
  text-align: center;
  color: var(--color-text-muted);
}

/* Line items empty state */
.line-items-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-5);
}

/* Category tree indented name */
.category-name-indent {
  display: inline-block;
}

/* ============================================
   FINANCIAL INSIGHTS - CATEGORY BREAKDOWN
   ============================================ */

.category-breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-default);
}

.category-breakdown-item:last-child {
  border-bottom: none;
}

.category-breakdown-item__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.category-breakdown-item__name {
  font-weight: var(--font-weight-medium);
}

.category-breakdown-item__amounts {
  color: var(--color-text-muted);
}

/* ============================================
   FINANCIAL INSIGHTS - SUGGESTIONS
   ============================================ */

/* Priority Badge */
.priority-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.priority-badge--high {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.priority-badge--normal {
  background: rgba(107, 114, 128, 0.2);
  color: var(--color-text-muted);
}

/* Suggestion Card */
.suggestion-card {
  background: var(--color-bg-base);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  transition: all 0.3s;
}

.suggestion-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.suggestion-card__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-default);
}

.suggestion-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-bg-subtle);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.suggestion-stat {
  text-align: center;
}

.suggestion-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.suggestion-stat__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.suggestion-stat__value--primary {
  color: var(--color-brand-primary);
}

.suggestion-stat__value--success {
  color: var(--color-positive);
}

.suggestion-card__reasoning {
  background: var(--color-positive-bg, #f0fdf4);
  border-left: 4px solid var(--color-positive);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.suggestion-card__reasoning-text {
  font-size: 13px;
  color: var(--color-positive-strong);
  line-height: 1.6;
}

/* Financial Snapshot */
.financial-snapshot {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  color: white;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.financial-snapshot__title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-lg);
  color: white;
}

.financial-snapshot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.financial-snapshot__label {
  font-size: var(--font-size-xs);
  opacity: 0.9;
  margin-bottom: var(--space-1);
}

.financial-snapshot__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

/* Section Title */
.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
  margin: 0 0 var(--space-5) 0;
}

/* Section Description */
.section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Modal Footer */
.modal-footer {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border-default);
}

/* ============================================
   WIDE CONTENT CONTAINER
   ============================================ */

.settings-content--wide {
  max-width: 1600px;
  margin: 0 auto;
}

/* Text color utilities for success/error */
.text-error {
  color: var(--color-negative);
}

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

/* Loading text */
.loading-text {
  color: var(--color-text-muted);
}

/* Error text */
.error-text {
  color: var(--color-negative);
}

/* Error/empty/info messages */
.empty-message {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.info-message {
  color: var(--color-text-muted);
  text-align: center;
}

/* Button danger */
.btn-danger {
  background: var(--color-negative) !important;
}

/* Grid utilities */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-gap-4 { gap: var(--space-4); }

/* Margin left auto */
.ml-auto {
  margin-left: auto;
}