/* Import color tokens first (must be before any rules) */
@import url('css/_colors.css');
@import url('css/_layout.css');
@import url('css/sidebar.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Bootstrap Utility Overrides */
.text-primary {
  color: var(--color-brand-primary) !important;
}

.form-check-input:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 var(--space-1) rgba(var(--color-brand-primary-rgb), 0.2);
  border-color: var(--color-brand-primary);
}

.bg-primary {
  background-color: var(--color-brand-primary) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-surface-page);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Global Link Styles */
a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}

/* Exclude navigation and buttons from underline */
.nav-link:hover,
.navbar a:hover,
.dashboard-sidebar a:hover,
.dropdown-item:hover,
.btn:hover {
  text-decoration: none;
}

body.dashboard-page {
  overflow: hidden;
}

body.auth-page {
  overflow: hidden;
  min-height: 100vh;
}

[x-cloak] {
  display: none !important;
}

.currency-value .currency-formatted {
  display: none;
}

.currency-value.js-formatted .currency-fallback {
  display: none;
}

.currency-value.js-formatted .currency-formatted {
  display: inline;
}

.section-loading-placeholder {
  border: var(--border-width-sm) dashed var(--color-gray-400);
  border-radius: var(--border-radius-lg);
  padding: var(--size-section-loading-padding);
  min-height: var(--size-section-loading-min-height);
  background-color: var(--color-surface-frosted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.section-loading-placeholder .placeholder {
  min-height: 1.2rem;
}

/* Enhanced Navbar */
.navbar.sticky-top {
  background: var(--color-navbar-bg);
  border-bottom: var(--size-navbar-border) solid var(--color-navbar-border);
  box-shadow: var(--shadow-sm);
  padding: var(--size-navbar-padding-y) var(--size-navbar-padding-x);
  height: var(--navbar-height);
  min-height: var(--navbar-height);
  z-index: var(--z-navbar);
  /* Above sidebar (1040) */
}

.navbar .navbar-brand {
  text-decoration: none;
  /* Remove link underline */
  display: inline-block;
}

.navbar .navbar-brand:hover {
  opacity: 0.7;
  /* Subtle fade on hover */
}

/* Navbar dropdown toggle styling */
.navbar .dropdown-toggle {
  font-weight: 500;
  color: var(--color-navbar-text);
  text-decoration: none;
  transition: var(--transition);
  padding: var(--size-navbar-link-padding-y) var(--size-navbar-link-padding-x);
  border-radius: var(--border-radius);
  display: inline-block;
}

.navbar .dropdown-toggle:hover {
  background-color: var(--color-navbar-hover-bg);
  color: var(--color-navbar-text);
}

/* Remove Bootstrap's default focus/active styles for dropdown toggles */
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active,
.navbar .dropdown-toggle.show {
  color: var(--color-navbar-text);
  background-color: var(--color-navbar-hover-bg);
  outline: none;
  border: none;
  box-shadow: none;
}

/* Fixed grid layout for navbar dropdowns to prevent shifting */
.navbar-nav.mx-auto {
  display: grid;
  grid-template-columns: minmax(var(--size-navbar-grid-col-min), var(--size-navbar-grid-col-1-max)) minmax(var(--size-navbar-grid-col-min), var(--size-navbar-grid-col-2-max));
  gap: var(--size-navbar-grid-gap);
  align-items: center;
}

/* Remove the ms-5 margin as grid handles spacing */
.navbar-nav.mx-auto .nav-item.dropdown.ms-5 {
  margin-left: 0 !important;
}

/* Ensure dropdown items fill their grid cells */
.navbar-nav.mx-auto>.nav-item {
  display: flex;
  justify-content: flex-start;
}

/* Scenario name text with overflow handling */
.scenario-name-text {
  display: inline-block;
  max-width: var(--size-scenario-name-max-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  /* Align with dropdown arrow */
}

@media (max-width: 991px) {

  /* Switch to flexible layout on smaller screens */
  .navbar-nav.mx-auto {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .scenario-name-text {
    max-width: var(--size-scenario-name-max-width-sm);
  }
}

/* Dropdown Menu Customization */
.dropdown-menu {
  background-color: var(--color-gray-100);
  /* White background for dropdown */
  border: var(--border-width-sm) solid var(--color-border-default);
  /* Light gray border */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: var(--size-dropdown-padding-y) var(--space-0);
  min-width: var(--size-dropdown-min-width);
}

/* Dropdown menu items */
.dropdown-item {
  padding: var(--size-dropdown-item-padding-y) var(--size-dropdown-item-padding-x);
  color: var(--color-text-primary);
  /* Dark text */
  transition: var(--transition);
  font-weight: 500;
  font-size: 0.8rem;
}

/* Dropdown item hover state */
.dropdown-item:hover {
  background-color: var(--color-sidebar-hover-bg);
  /* Darker green on hover */
  color: var(--color-text-primary);
  /* White text on hover */
}

/* Dropdown item active/selected state */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-sidebar-active-bg);
  /* Brand green for active item */
  color: var(--color-text-primary);
  /* White text for active */
}

/* Dropdown header styling */
.dropdown-header {
  padding: var(--size-dropdown-item-padding-y) var(--size-dropdown-item-padding-x);
  color: var(--color-text-secondary);
  /* Medium gray text */
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dropdown divider */
.dropdown-divider {
  margin: var(--size-dropdown-divider-margin-y) var(--space-0);
  border-top: var(--border-width-sm) solid var(--color-border-strong);
  /* Light gray divider */
}

/* Generic btn-link styling */
.btn-link {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.btn-link:hover {
  color: var(--color-brand-hover);
}

/* Add Button - Compact styling for cluster add buttons */
.btn-add {
  /* Size L */
  padding: var(--size-btn-add-padding-y) var(--size-btn-add-padding-x) !important;
  font-size: 0.9rem !important;
  /* Shape Large */
  border-radius: var(--size-btn-add-radius);
  /* Font Medium + spacing */
  font-weight: 500;
  letter-spacing: 0.5px;
  /* Layout */
  display: inline-flex;
  align-items: center;
  /* Colors */
  background-color: var(--color-sidebar-active-bg);
  border: none !important;
  cursor: pointer;
  /* Shadow Medium */
  box-shadow: 0 2px 4px var(--color-shadow-sm);
  /* Animation */
  transition: all 0.2s ease;
}

.btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--color-shadow-md);
  background-color: var(--color-sidebar-active-bg);
}

.btn-add:focus {
  outline: none !important;
  border: none !important;
  box-shadow: 0 2px 4px var(--color-shadow-sm);
  background-color: var(--color-sidebar-active-bg);
}

.btn-add:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: 0 2px 4px var(--color-shadow-sm);
}

.btn-add:active,
.btn-add:active:focus {
  transform: translateY(0);
  box-shadow: 0 1px 2px var(--color-shadow-sm);
  border: none !important;
  outline: none !important;
  background-color: var(--color-sidebar-active-bg) !important;
}

/* Card System */
.card {
  background: var(--color-surface-card);
  border: var(--size-card-border) solid var(--color-border-default);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  /* transition: var(--transition); */
  overflow: hidden;
}

/* .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
} */

.card-header {
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  padding: var(--size-card-header-padding);
  /* Reduced from 1.5rem */
  border-bottom: var(--size-card-header-border) solid var(--color-border-default);
  /* Add subtle border */
  font-weight: 600;
  font-size: 1.1rem;
  /* Slightly smaller font */
  text-align: center;
  /* Center the card titles */
}

.card-body {
  padding: var(--size-card-padding);
}

/* Editor cards - section form cards with consistent minimum height */
.editor-card {
  min-height: var(--size-editor-card-min-height);
}

/* Enhanced Form Styling */
.section-content {
  margin: var(--size-section-content-margin-y) var(--space-0);
  /* Reduced from 3rem to bring cards closer to navbar */

}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--size-form-grid-gap);
  margin-bottom: var(--size-form-grid-margin-bottom);
}

.form-group {
  margin-bottom: var(--size-form-group-margin-bottom);
}

.form-label {
  display: block;
  margin-bottom: var(--size-form-label-margin-bottom);
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.form-control {
  width: 100%;
  padding: var(--size-form-control-padding-y) var(--size-form-control-padding-x);
  border: var(--size-form-control-border) solid var(--color-border-default);
  border-radius: var(--border-radius);
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: 1rem;
  transition: var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: none;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group-text {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border: var(--size-form-control-border) solid var(--color-brand-primary);
  border-right: none;
  padding: var(--size-form-control-padding-y) var(--size-form-control-padding-x);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-weight: 600;
  min-width: var(--size-input-group-text-min-width);
  text-align: center;
}

.input-group .form-control {
  border-left: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.form-help {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: var(--size-form-help-margin-top);
  line-height: 1.4;
}

/* Input Skin - Floating Labels (requires .input-skin wrapper) */
.input-skin .form-floating {
  position: relative;
}

.input-skin .form-floating::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--size-form-control-border) solid var(--color-brand-primary);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.input-skin .form-floating:focus-within::after {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.input-skin .form-floating>.form-control,
.input-skin .form-floating>.form-select {
  height: calc(2.75rem + 4px);
  padding: 0.875rem 1rem;
  border: var(--size-form-control-border) solid var(--color-border-default);
  border-radius: var(--border-radius);
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.input-skin .form-floating>select.form-select {
  padding-top: var(--size-form-control-padding-y);
  padding-bottom: var(--size-form-control-padding-y);
  line-height: 1.2;
}

.input-skin .form-floating>.form-control:focus,
.input-skin .form-floating>.form-select:focus {
  border-color: var(--color-border-default);
  box-shadow: none;
}

.input-skin .form-floating>.form-control:focus,
.input-skin .form-floating>.form-control:not(:placeholder-shown) {
  padding: 0.875rem 1rem;
  line-height: 1;
}

.input-skin .form-floating>label {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  height: auto;
  padding: 0.1rem 0.3rem;
  pointer-events: none;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-surface-card);
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, top 0.1s ease-in-out, color 0.1s ease-in-out;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-weight: 500;
  line-height: 1.1;
  z-index: 3;
}

.input-skin .form-floating>.form-control:focus~label,
.input-skin .form-floating>.form-control:not(:placeholder-shown)~label,
.input-skin .form-floating>.form-select~label {
  top: 0;
  opacity: 1;
  transform: scale(0.85) translateY(-50%);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.input-skin .form-floating>.form-control:focus~label {
  color: var(--color-brand-primary);
}

/* Disabled state for floating labels */
.input-skin .form-floating>.form-control:disabled~label {
  color: var(--color-text-secondary);
  opacity: 0.65;
}

.input-skin .form-floating>.form-control:disabled {
  background-color: var(--color-gray-100);
  opacity: 0.8;
}

/* ========================================
   Bootstrap Select Dropdown (replacing native <select>)
   ======================================== */

/* Container for the dropdown-as-select */
.input-skin .bootstrap-select-dropdown {
  position: relative;
}

/* The toggle button styled to look like a form-control */
.input-skin .bootstrap-select-dropdown .form-control.dropdown-toggle {
  height: calc(2.75rem + 4px);
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: normal;
  background-color: var(--color-surface-card);
  border: var(--size-form-control-border) solid var(--color-border-default);
  border-radius: var(--border-radius);
  text-align: left;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* Remove default button styling from Bootstrap */
.input-skin .bootstrap-select-dropdown .form-control.dropdown-toggle::after {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Hover state */
.input-skin .bootstrap-select-dropdown .form-control.dropdown-toggle:hover {
  border-color: var(--color-border-default);
  background-color: var(--color-surface-card);
}

/* Focus state - matches form-control (no box-shadow) */
.input-skin .bootstrap-select-dropdown .form-control.dropdown-toggle:focus {
  border-color: var(--color-border-default);
  box-shadow: none;
  background-color: var(--color-surface-card);
  outline: 0;
}

/* When dropdown is open */
.input-skin .bootstrap-select-dropdown .form-control.dropdown-toggle[aria-expanded="true"] {
  border-color: var(--color-border-default);
}

/* Floating label behavior for dropdowns - matches regular form inputs */
.input-skin .form-floating.bootstrap-select-dropdown>label {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  height: auto;
  padding: 0.1rem 0.3rem;
  pointer-events: none;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-surface-card);
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, top 0.1s ease-in-out, color 0.1s ease-in-out;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-weight: 500;
  line-height: 1.1;
  z-index: 3;
}

/* Float the label when button has value (via data attribute) or focused */
.input-skin .form-floating.bootstrap-select-dropdown>button[data-has-value="true"]~label,
.input-skin .form-floating.bootstrap-select-dropdown>.form-control.dropdown-toggle:focus~label {
  top: 0;
  opacity: 1;
  transform: scale(0.85) translateY(-50%);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* Change label color on focus */
.input-skin .form-floating.bootstrap-select-dropdown>.form-control.dropdown-toggle:focus~label {
  color: var(--color-brand-primary);
}

/* Scrollable dropdown menu for long lists (like years) */
.input-skin .dropdown-menu-scrollable {
  max-height: 250px;
  overflow-y: auto;
}

/* Style for dropdown items in select-style dropdowns */
.input-skin .bootstrap-select-dropdown .dropdown-item {
  padding: var(--size-dropdown-item-padding-y) var(--space-5);
  font-size: 0.95rem;
}

.input-skin .bootstrap-select-dropdown .dropdown-item.active {
  background-color: var(--color-sidebar-active-bg);
  color: var(--color-text-primary);
}

.input-skin .bootstrap-select-dropdown .dropdown-item:hover:not(.active) {
  background-color: rgba(var(--color-brand-primary-rgb), 0.1);
}

/* Add vertical spacing between form rows in personal cluster */
.personal-cluster .row {
  margin-bottom: var(--space-10);
}

/* Form chapter structure for organizing sections */
.form-chapter {
  margin-bottom: var(--space-10);
}

.form-chapter-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-sm) solid var(--color-text-primary);
}

.chapter-separator {
  margin: var(--space-11) var(--space-0);
  border: 0;
  border-top: var(--border-width-md) solid var(--color-border-default);
  opacity: 0.3;
}

/* Modal-specific chapter spacing (tighter than full-page forms) */
.modal-body .form-chapter {
  margin-bottom: var(--space-9);
}

.modal-body .form-chapter:last-child {
  margin-bottom: 0;
}

.modal-body .form-chapter-title {
  font-size: 1rem;
  margin-bottom: var(--space-7);
}

/* Plan Scope Button Group Styling with Sliding Background */
#plan-scope-toggle {
  position: relative;
  overflow: hidden;
  background-color: transparent !important;
}

/* Sliding background indicator - explicitly set to light teal */
#plan-scope-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--color-brand-accent) !important;
  /* Explicitly set light teal color */
  border-radius: var(--border-radius-sm);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
  /* Ensure clicks pass through to buttons */
}

/* Move background to right when "Couple" is selected */
#plan-scope-toggle:has(#plan_scope_couple:checked)::before {
  transform: translateX(100%);
}

/* Button styling - keep them completely transparent */
#plan-scope-toggle .btn-outline-primary,
#plan-scope-toggle .btn-outline-primary:hover,
#plan-scope-toggle .btn-outline-primary:focus,
#plan-scope-toggle .btn-outline-primary:active,
#plan-scope-toggle .btn-outline-primary.active,
#plan-scope-toggle .btn-check:checked+.btn-outline-primary,
#plan-scope-toggle .btn-check:checked+.btn-outline-primary:hover,
#plan-scope-toggle .btn-check:checked+.btn-outline-primary:focus,
#plan-scope-toggle .btn-check:checked+.btn-outline-primary:active,
#plan-scope-toggle .btn-check:active+.btn-outline-primary,
#plan-scope-toggle .btn-check:focus+.btn-outline-primary {
  position: relative;
  z-index: 1;
  border: none !important;
  color: var(--color-text-primary) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  font-weight: 500 !important;
}

/* Enhanced Buttons */
.btn {
  padding: var(--size-btn-padding-y) var(--size-btn-padding-x);
  border-radius: var(--border-radius);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* transition: var(--transition); */
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  font-size: 0.9rem;
}

.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--color-brand-hover);
  /* Darker green on hover */
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-gray-500);
  color: var(--color-text-inverse);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: var(--border-width-md) solid var(--color-border-default);
}

.btn-outline-secondary:hover {
  background: var(--color-text-primary);
  color: var(--color-surface-card);
}

.btn-lg {
  padding: var(--size-btn-lg-padding-y) var(--size-btn-lg-padding-x);
  font-size: 1.1rem;
}

/* Loading States */
.loading {
  display: inline-block;
  width: var(--space-8);
  height: var(--space-8);
  border: var(--border-width-lg) solid var(--color-focus-ring);
  border-radius: 50%;
  border-top-color: var(--color-brand-primary);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {

  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }


  .container {
    padding: 0 15px;
  }

  .card-body {
    padding: var(--size-card-padding-sm);
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
  }
}

/* Collapsible Content */
.collapse {
  transition: var(--transition);
}


/* Focus States for Accessibility */
.btn:focus {
  outline: var(--border-width-md) solid var(--color-brand-primary);
  outline-offset: var(--border-width-md);
}

/* Print Styles */
@media print {

  .navbar,
  .btn {
    display: none !important;
  }


  .card {
    box-shadow: none !important;
    border: var(--border-width-sm) solid var(--color-gray-400) !important;
  }
}

/* Custom Button Colors - Dark Blue Theme */
.btn-success,
.btn-outline-success {
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-text-inverse) !important;
}

.btn-success:hover,
.btn-outline-success:hover {
  background-color: var(--color-brand-hover) !important;
  border-color: var(--color-brand-hover) !important;
  color: var(--color-text-inverse) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-brand-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-text-inverse) !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-brand-primary) !important;
}

.btn-outline-danger:hover {
  background-color: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-text-inverse) !important;
}

/* === COMPONENT STYLES ================================== */

.income-summary-card,
.spending-summary-card,
.milestone-summary-card {
  background: var(--color-surface-page);
  border: var(--size-card-border) solid var(--color-border-default);
  border-radius: var(--border-radius);
  padding: var(--space-7);
  transition: var(--transition);
}

.income-summary-card:hover,
.spending-summary-card:hover,
.milestone-summary-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.income-name,
.spending-name,
.milestone-name {
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.income-details,
.spending-details,
.milestone-details {
  margin-top: var(--space-1);
  font-size: 0.8rem;
}

.income-actions .btn,
.spending-actions .btn,
.milestone-actions .btn {
  padding: var(--space-1) var(--space-3);
  font-size: 0.8rem;
}

.add-income-btn,
.add-spending-btn,
.add-milestone-btn {
  width: var(--size-icon-button);
  height: var(--size-icon-button);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.add-income-btn:hover,
.add-spending-btn:hover,
.add-milestone-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* Modal Components */
#incomeModal .modal-content,
#spendingModal .modal-content,
#milestoneModal .modal-content {
  border-radius: var(--border-radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
}

.modal-content {
  border-radius: var(--border-radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  background: var(--color-modal-header-bg);
  color: var(--color-modal-header-text);
  border-bottom: none;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  padding: 0.75rem 1rem;
}

.modal-header .modal-title {
  font-size: 1rem;
}

.modal-body {
  padding: var(--space-10);
}

/* Asset Selection Accordion Headers */
.asset-selection-accordion .accordion-item {
  border-color: var(--color-sidebar-bg);
}

.asset-selection-accordion .accordion-button {
  background-color: var(--color-sidebar-bg);
  border-color: var(--color-sidebar-bg);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.asset-selection-accordion .accordion-body {
  padding: 0.75rem;
}

.asset-selection-accordion .accordion-button:not(.collapsed) {
  background-color: var(--color-sidebar-bg);
  color: var(--color-text-primary);
  box-shadow: none;
}

.asset-selection-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: var(--color-sidebar-bg);
}

.form-help {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

/* ============================================================
   Financial Section Visibility Helpers
   ============================================================ */
.section {
  transition: opacity 0.2s ease;
}

.section.section-hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.section.section-visible {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
}

.dashboard-main-row {
  --forms-width: 50%;
  --results-width: 50%;
  --forms-visible: 1;
  --results-visible: 1;
  --results-display-mode: block;
  --results-flex-direction: column;
  --results-gap: var(--space-14);
}

.dashboard-column--editor {
  flex: 0 0 var(--forms-width);
  max-width: var(--forms-width);
  opacity: var(--forms-visible);
  transition: flex var(--layout-transition-speed) var(--layout-transition-easing),
    max-width var(--layout-transition-speed) var(--layout-transition-easing),
    opacity 0.2s ease;
}

.dashboard-column--viewer {
  flex: 0 0 var(--results-width);
  max-width: var(--results-width);
  opacity: var(--results-visible);
  display: var(--results-display-mode);
  flex-direction: var(--results-flex-direction);
  gap: var(--results-gap);
  transition: flex var(--layout-transition-speed) var(--layout-transition-easing),
    max-width var(--layout-transition-speed) var(--layout-transition-easing),
    opacity 0.2s ease;
}

.layout-forms-only {
  --forms-width: 100%;
  --results-width: 0%;
  --results-visible: 0;
}

.layout-forms-only .dashboard-column--viewer {
  display: none !important;
}

.layout-results-only {
  --forms-width: 0%;
  --forms-visible: 0;
  --results-width: 100%;
  --results-visible: 1;
}

.layout-results-only .dashboard-column--editor {
  display: none !important;
}

/* Layout-results-only visibility: both results containers visible */
.layout-results-only .shared-results,
.layout-results-only .selective-results {
  display: block;
}

.layout-split-default {
  --forms-width: 50%;
  --results-width: 50%;
  --forms-visible: 1;
  --results-visible: 1;
  --results-display-mode: block;
}

/* Layout-split-default visibility: shared-overview, selective-context, selective-results visible; shared-results hidden */
.layout-split-default .shared-overview,
.layout-split-default .selective-context,
.layout-split-default .selective-results {
  display: block;
}

.layout-split-default .shared-results {
  display: none;
}

.layout-split-lite {
  --forms-width: 50%;
  --results-width: 50%;
  --forms-visible: 1;
  --results-visible: 1;
  --results-display-mode: block;
}

/* Layout-split-lite visibility: only selective-context visible */
.layout-split-lite .selective-context {
  display: block;
}

.layout-split-lite .shared-overview,
.layout-split-lite .shared-results,
.layout-split-lite .selective-results {
  display: none;
}

.layout-split-right {
  --forms-width: 50%;
  --results-width: 50%;
  --forms-visible: 1;
  --results-visible: 1;
  --results-display-mode: flex;
}

/* Layout-split-right visibility: all 4 containers visible with flexbox layout */
.layout-split-right .shared-overview,
.layout-split-right .selective-context,
.layout-split-right .shared-results,
.layout-split-right .selective-results {
  display: block;
}

.layout-split-right .shared-overview {
  flex: 0 0 auto;
  min-height: var(--shared-overview-min-height);
  max-height: var(--shared-overview-max-height);
  overflow: hidden;
}

.layout-split-right .selective-context {
  flex: 1 1 auto;
}

/* Default: Hide shared-overview and selective-context unless layout explicitly shows them */
.shared-overview,
.selective-context {
  display: none;
  width: 100%;
}

.shared-overview .chart-card,
.selective-context .chart-card {
  height: 100%;
}

.shared-overview .htmx-indicator,
.selective-context .htmx-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   ITEM CARD HOVER BEHAVIOR
   ============================================ */

/* Wrapper controls the layout of card + settings button */
.item-card-wrapper {
  display: flex;
  align-items: stretch;
  position: relative;
}

/* Inactive item styling */
.item-card.item-card-inactive {
  position: relative;
}

.item-card.item-card-inactive::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(var(--color-black-rgb), 0.03) 10px,
      rgba(var(--color-black-rgb), 0.03) 20px);
  pointer-events: none;
  border-radius: inherit;
}

/* Card takes full width by default, shrinks on hover */
.item-card-wrapper .item-card {
  flex: 1;
  transition: margin-left 0.2s ease-out,
    margin-right 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
  cursor: pointer;
  margin-left: 0;
  margin-right: 0;
}

/* Add horizontal padding to card content for breathing room */
.item-card-wrapper .item-card .card-body {
  padding-left: var(--size-item-card-padding-x) !important;
  padding-right: var(--size-item-card-padding-x) !important;
}

/* Unified card text colors - all text uses --color-text-secondary for consistency */
.item-card-wrapper .item-card .card-body {
  color: var(--color-text-secondary);
}

/* Card border and background - shadow disabled (tokens available: --color-item-card-shadow, --size-item-card-shadow-blur) */
.item-card-wrapper .item-card {
  border-color: var(--color-item-card-border);
  background-color: var(--color-item-card-bg);
  box-shadow: none;
}

.item-card-wrapper .item-card .card-body strong {
  color: var(--color-text-secondary);
}

.item-card-wrapper .item-card .card-body i {
  color: var(--color-text-secondary) !important;
}

.item-card-wrapper .item-card .card-body .item-icon-badge i {
  color: var(--color-white, #ffffff) !important;
}

.item-card-wrapper .item-card .card-body .currency-value {
  color: var(--color-text-secondary) !important;
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-badge);
  height: var(--size-icon-badge);
  border-radius: 50%;
  background-color: var(--color-gray-500);
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================================
   Icon Badge Base Class
   Common rounded square styling for icons across the app.
   Background color is NOT included - set via component-specific
   classes or inline styles.
   ============================================================ */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white, #ffffff);
  flex-shrink: 0;
  color: var(--color-white, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Size: Small (28px) - for item cards */
.icon-badge--sm {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
}

/* Size: Medium (36px) - for compact contexts */
.icon-badge--md {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1rem;
}

/* Size: Large (48px) - for pickers and selection cards */
.icon-badge--lg {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  font-size: 1.25rem;
}

/* Category colors */
.icon-badge--savings {
  background-color: var(--color-savings-500);
}

.icon-badge--investments {
  background-color: var(--color-investments-500);
}

.icon-badge--real-assets {
  background-color: var(--color-real-assets-500);
}

.icon-badge--debts {
  background-color: var(--color-debts-500);
}

.icon-badge--income {
  background-color: var(--color-income-500);
}

.icon-badge--spending {
  background-color: var(--color-spending-500);
}

/* Neutral/picker background */
.icon-badge--neutral {
  background-color: var(--color-gray-300);
}

/* Interactive picker variant - adds hover/focus states */
.icon-badge--picker {
  background-color: var(--color-gray-500);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.icon-badge--picker:hover,
.icon-badge--picker:focus {
  background-color: var(--color-gray-600);
  border-color: var(--color-gray-400);
}

@media (max-width: 576px) {
  .icon-badge--sm {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 5px;
  }

  .icon-badge--md {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    border-radius: 6px;
  }

  .icon-badge--lg {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 8px;
  }
}

/* Legacy alias - uses base + sm size */
.item-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid var(--color-white, #ffffff);
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-white, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 576px) {
  .item-icon-badge {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 5px;
  }
}

/* Loading state while HTMX fetches modal content */
.item-card-wrapper .item-card.is-loading {
  opacity: 0.7;
  cursor: progress;
}

/* Hover effect on card */
.item-card-wrapper:hover .item-card {
  margin-left: var(--size-item-card-handle-width);
  /* Space for drag handle */
  margin-right: var(--size-item-card-settings-width);
  /* Space for settings button */
  box-shadow: none;
  background-color: var(--color-item-card-bg-hover);
}

/* Focus styles for accessibility */
.item-card-wrapper .item-card:focus {
  outline: var(--border-width-md) solid var(--color-brand-primary);
  outline-offset: var(--border-width-md);
}

/* Drag handle wrapper - positioned on the left */
.drag-handle-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--size-item-card-handle-width);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

/* Show drag handle on hover or focus-within */
.item-card-wrapper:hover .drag-handle-wrapper,
.item-card-wrapper:focus-within .drag-handle-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease-out;
}

/* Drag handle button */
.drag-handle {
  width: var(--size-item-card-action-size);
  height: var(--size-item-card-action-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: grab;
  transition: background-color 0.15s ease;
}

.drag-handle:hover,
.drag-handle:focus {
  background-color: var(--color-sidebar-active-bg);
  color: var(--color-text-primary);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Settings button wrapper - positioned on the right
   IMPORTANT: NO overflow:hidden here - dropdown menu must be visible!
   Hidden via opacity + visibility + pointer-events instead */
.item-settings-btn-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--size-item-card-settings-width);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

/* Show settings button on wrapper hover or focus-within (keyboard) */
.item-card-wrapper:hover .item-settings-btn-wrapper,
.item-card-wrapper:focus-within .item-settings-btn-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease-out;
}

/* Keep space for settings button when focused via keyboard */
.item-card-wrapper:focus-within .item-card {
  margin-left: var(--size-item-card-handle-width);
  margin-right: var(--size-item-card-settings-width);
}

/* Settings button styling */
.item-settings-btn {
  width: var(--size-item-card-action-size);
  height: var(--size-item-card-action-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.item-settings-btn:hover,
.item-settings-btn:focus {
  background-color: var(--color-sidebar-active-bg);
  color: var(--color-text-primary);
  transform: rotate(45deg);
}

/* Dropdown menu styling - ensure it's not clipped */
.item-card-wrapper .dropdown-menu {
  min-width: var(--size-item-card-dropdown-min-width);
  box-shadow: var(--shadow-md);
  border: var(--border-width-sm) solid var(--color-border-default);
  z-index: var(--z-dropdown);
}

.item-card-wrapper .dropdown-item {
  display: flex;
  align-items: center;
  padding: var(--size-dropdown-item-padding-y) var(--size-dropdown-item-padding-x);
}

.item-card-wrapper .dropdown-item i {
  width: 18px;
}

.item-card-wrapper .dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Keep settings visible when dropdown is open */
.item-card-wrapper:has(.dropdown-menu.show) .item-settings-btn-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.item-card-wrapper:has(.dropdown-menu.show) .item-card {
  margin-left: var(--size-item-card-handle-width);
  margin-right: var(--size-item-card-settings-width);
}

/* Fallback for browsers without :has() support */
.item-card-wrapper.dropdown-open .item-settings-btn-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.item-card-wrapper.dropdown-open .item-card {
  margin-left: var(--size-item-card-handle-width);
  margin-right: var(--size-item-card-settings-width);
}

/* Keep drag handle visible when dropdown is open */
.item-card-wrapper:has(.dropdown-menu.show) .drag-handle-wrapper,
.item-card-wrapper.dropdown-open .drag-handle-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* SortableJS visuals */
.sortable-ghost {
  opacity: 0.4;
  background: var(--color-surface-page);
  border: var(--border-width-md) dashed var(--color-border-default);
}

.sortable-chosen .item-card {
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

/* CRITICAL: Keep drag handle visible while item is being picked up (sortable-chosen)
   Without this, the hover state is lost when mouse moves and the drag handle
   becomes invisible/non-interactive, breaking the drag operation */
.item-card-wrapper.sortable-chosen .drag-handle-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Also keep the card margins while chosen so the layout stays consistent */
.item-card-wrapper.sortable-chosen .item-card {
  margin-left: var(--size-item-card-handle-width);
  margin-right: var(--size-item-card-settings-width);
}

/* Hide buttons on the element while it's being dragged (cleaner look) */
.sortable-drag .item-settings-btn-wrapper,
.sortable-drag .drag-handle-wrapper {
  display: none;
}

/* Special styling for scenario items (maintain border indicators) */
.item-card-wrapper .item-card.border-warning {
  border-left-width: var(--border-width-lg) !important;
}

.item-card-wrapper .item-card.border-info {
  border-left-width: var(--border-width-lg) !important;
}

/* Touch devices - tap-to-reveal pattern
   Card stays full width by default, shrinks only when .touch-active */
@media (hover: none) and (pointer: coarse) {
  .item-card-wrapper .item-card {
    margin-left: 0;
    margin-right: 0;
  }

  .item-card-wrapper .item-settings-btn-wrapper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .item-card-wrapper.touch-active .item-card {
    margin-left: var(--size-item-card-handle-width);
    margin-right: var(--size-item-card-settings-width);
  }

  .item-card-wrapper.touch-active .item-settings-btn-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .item-card-wrapper.touch-active .drag-handle-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Money Flow Sankey */
.money-flow-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-9);
  align-items: flex-start;
}

.money-flow-controls>* {
  flex: 1 1 280px;
  min-width: 0;
}

.money-flow-controls .money-flow-toggle {
  flex: 1 1 100%;
}

.sankey-container {
  position: relative;
  min-height: 300px;
}

.sankey-container canvas {
  max-width: 100%;
}

#leftover-slider {
  height: var(--size-range-track-height);
  --bs-range-track-bg: var(--color-white);
  --bs-range-thumb-bg: var(--color-white);
  --bs-range-thumb-active-bg: var(--color-white);
}

#leftover-slider::-webkit-slider-thumb {
  background: var(--bs-range-thumb-bg);
  border: var(--border-width-sm) solid var(--color-shadow-lg);
}

#leftover-slider::-moz-range-thumb {
  background: var(--bs-range-thumb-bg);
  border: var(--border-width-sm) solid var(--color-shadow-lg);
}

#leftover-slider::-webkit-slider-runnable-track {
  background: var(--bs-range-track-bg);
}

#leftover-slider::-moz-range-track {
  background: var(--bs-range-track-bg);
}

#flow-mode-toggle .btn-check:checked+.btn-outline-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: var(--color-text-inverse);
}

#flow-mode-toggle .btn-check:checked+.btn-outline-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--color-text-inverse);
}

.theme-option {
  cursor: pointer;
  text-align: center;
}

.theme-option input[type="radio"] {
  display: none;
}

.theme-preview {
  display: flex;
  width: 80px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--color-border-default);
  transition: border-color 0.2s, transform 0.2s;
}

.theme-option input:checked + .theme-preview {
  border-color: var(--color-brand-primary);
  transform: scale(1.05);
}

.theme-swatch {
  flex: 1;
}

.theme-swatch--light-1-1 { background: var(--color-Brand-1-1); }
.theme-swatch--light-1-2 { background: var(--color-Brand-1-2); }
.theme-swatch--light-1-3 { background: var(--color-Brand-1-4); }
.theme-swatch--light-2-1 { background: var(--color-Brand-2-1); }
.theme-swatch--light-2-2 { background: var(--color-Brand-2-2); }
.theme-swatch--light-2-3 { background: var(--color-Brand-2-4); }
.theme-swatch--light-3-1 { background: var(--color-Brand-3-1); }
.theme-swatch--light-3-2 { background: var(--color-Brand-3-2); }
.theme-swatch--light-3-3 { background: var(--color-Brand-3-4); }
.theme-swatch--dark-1 { background: #1e293b; }
.theme-swatch--dark-2 { background: var(--color-Brand-1-2); }
.theme-swatch--dark-3 { background: #0f172a; }

.theme-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}