/* Import main popup styles */
@import url('main_popup.css');

:root {
    --content-width: 1200px;

    /* ===== FULL UNIFIED COLOR PALETTE ===== */

    /* Brand Blues */
    --brand-700: #16548C;  /* Darkest brand blue - pressed states */
    --brand-600: #1E6AB1;  /* Main brand blue - headers, CTAs, active states */
    --brand-300: #AFCDE6;  /* Light brand blue - borders, accents */
    --brand-100: #E6F1FA;  /* Lightest brand blue - backgrounds, hover bg */

    /* Neutrals (Grays) */
    --gray-900: #111827;   /* Darkest text */
    --gray-800: #1F2937;   /* Very dark text/backgrounds */
    --gray-600: #4B5563;   /* Main readable text */
    --gray-300: #D1D5DB;   /* Borders, dividers */
    --gray-100: #F3F4F6;   /* Light backgrounds */
    --gray-50: #F8FAFC;    /* Lightest backgrounds */

    /* Semantic Accents */
    --success-50: #F0FDF4;   /* Lightest green for gradients */
    --success-100: #E6F4EA;  /* Success backgrounds */
    --success-300: #86EFAC;  /* Light green for borders */
    --success-600: #2F8F4E;  /* Success states */
    --success-700: #047857;  /* Darker success */
    --warning-600: #c46b28;  /* Warning states */
    --warning-700: #b91616;  /* Darker warning */
    --warning-100: #FEF3C7;  /* Warning backgrounds */
    --danger-600: #b91616;   /* Danger/error states */
    --danger-700: #b91616;   /* Darker danger */
    --danger-300: #fca5a5;   /* Light danger for hover states */
    --danger-200: #fecaca;   /* Light danger for borders */
    --danger-100: #FEE2E2;   /* Danger backgrounds */
    --danger-50: #fef2f2;    /* Lightest danger for backgrounds */
    --info-600: #1E6AB1;     /* Info states (same as brand-600) */
    --info-700: var(--brand-700);  /* Darker info */

    /* Additional utility colors */
    --brand-glow: rgba(30, 106, 177, 0.25);  /* For focus rings/glows */

    /* Popup Icon Palette - Harmonious colors for section icons */
    --popup-icon-1: #1E6AB1;  /* Primary Blue (brand-600) */
    --popup-icon-2: #2F8F4E;  /* Success Green (success-600) */
    --popup-icon-3: #8B5CF6;  /* Violet - complements blue/green */
    --popup-icon-4: #26d6dc;  /* Red - for emphasis/important items */

    --popup-icon-5: #497E76;  /* Primary Blue (brand-600) */
    --popup-icon-6: #8A9A5B;  /* Success Green (success-600) */
    --popup-icon-7: #a486c2;  /* Violet - complements blue/green */
    --popup-icon-8: #E2725B;  /* Red - for emphasis/important items */


    /* Legacy color mappings (keeping these for backwards compatibility) */
    --blue-600: var(--brand-600);
    --blue-700: var(--brand-700);
    --blue-100: var(--brand-100);
    --blue-300: var(--brand-300);
    --blue-glow: var(--brand-glow);
    --green-600: var(--success-600);
    --green-100: var(--success-100);
    --red-600: var(--danger-600);
    --red-100: var(--danger-100);
    --gray-700: #374151;   /* Additional gray shade */
    --gray-500: #6B7280;   /* Secondary text */
    --gray-400: #9CA3AF;   /* Muted text */
    --gray-200: #E5E7EB;   /* Light borders */

    /* ===== SEMANTIC TOKENS (map old vars to new palette) ===== */
    --primary-color: var(--gray-600);  /* Was #666666 */
    --secondary-color: var(--gray-100);  /* Was #f0f0f0 */
    --box-header-bg: var(--gray-700);  /* Was #8f8f8f */
    --box-header-color: white;
    --slider-color: var(--blue-600);  /* Was #5488bd */
    --slider-track-color: var(--gray-200);  /* Was #e0e0e0 */
    --slider-progress-color: var(--blue-600);  /* Was #5488bd */
    --slider-thumb-color: var(--blue-600);  /* Was #5488bd */
    --tab-active-color: var(--blue-600);  /* Was #5488bd */
    --common-blue: var(--blue-600);  /* Was #5488bd */
    --tab-inactive-color: var(--gray-200);  /* Was #e0e0e0 */
    --tab-text-color: var(--gray-700);  /* Was #333 */
    --tab-active-text-color: white;

    /* Additional semantic tokens for common uses */
    --brand-primary: var(--blue-600);
    --brand-primary-hover: var(--blue-700);
    --brand-primary-light: var(--blue-100);
    --border-color: var(--gray-300);
    --text-primary: var(--gray-700);
    --text-secondary: var(--gray-500);
    --bg-primary: white;
    --bg-secondary: var(--gray-50);
}

html {
    height: 100%;
}





body {
    font-family: Roboto, sans-serif;
    letter-spacing: .6px;
   
  }
  h1, h2, h3, .section-header {
    font-family: Roboto, sans-serif;
    font-weight: 600;
  }
  button, input, select {
    font-family: Roboto, sans-serif;
    font-weight: 500;
  }

/* ===== NOTICE/INFO BOX UTILITY CLASSES ===== */
/* Simple, reusable classes for displaying informational messages */

.notice-box {
    font-family: Roboto, sans-serif;
    display: block;
    background: var(--brand-100);
    border: 1px solid var(--brand-600);
    border-radius: clamp(4px, 0.6vw, 8px);
    padding: clamp(4px, 0.8vw, 12px) clamp(6px, 1vw, 15px);
    margin-bottom: clamp(3px, 0.6vw, 10px);
    margin-top: clamp(3px, 0.6vw, 10px);
    width: 100%;
    box-sizing: border-box;
}

.notice-box-icon {
    color: var(--brand-600);
    font-size: clamp(12px, 1.3vw, 18px);
    margin-right: clamp(4px, 0.8vw, 8px);
    vertical-align: middle;
}

.notice-box-content {
    /* Legacy class for backwards compatibility - no longer needed */
}

.notice-box-text {
    margin: 0;
    font-size: clamp(10px, 0.95vw, 14px);
    color: var(--gray-600);
    line-height: clamp(1.2, 1.3vw, 1.4);
    word-wrap: break-word;
    white-space: normal;
    display: inline;
}

.notice-box-link {
    color: var(--brand-600);
    text-decoration: underline;
    white-space: nowrap;
    font-weight: bold;
}

.notice-box-link:hover {
    color: var(--brand-700);
}

/* Variants for different types of notices */
.notice-box.success {
    background: var(--success-100);
    border-color: var(--success-600);
}

.notice-box.success .notice-box-icon {
    color: var(--success-600);
}

.notice-box.success .notice-box-link {
    color: var(--success-600);
}

.notice-box.success .notice-box-link:hover {
    color: var(--success-700);
}

.notice-box.warning {
    background: var(--warning-100);
    border-color: var(--warning-600);
}

.notice-box.warning .notice-box-icon {
    color: var(--warning-600);
}

.notice-box.warning .notice-box-link {
    color: var(--warning-600);
}

.notice-box.warning .notice-box-link:hover {
    color: var(--warning-700);
}

.notice-box.danger {
    background: var(--danger-100);
    border-color: var(--danger-600);
}

.notice-box.danger .notice-box-icon {
    color: var(--danger-600);
}

.notice-box.danger .notice-box-link {
    color: var(--danger-600);
}

.notice-box.danger .notice-box-link:hover {
    color: var(--danger-700);
}

/* ===== BUTTON UTILITY CLASSES ===== */
/* Standardized button styles for consistent UI */

.secondary-button {
    background-color: white;
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    border-radius: clamp(4px, 0.5vw, 6px);
    padding: clamp(6px, 0.8vw, 10px) clamp(12px, 1.5vw, 20px);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-button:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
}

.secondary-button:active {
    background-color: var(--gray-100);
}

/* ===== MODAL BUTTON CONTAINER ===== */

.modal-buttons {
    display: flex;
    gap: clamp(8px, 1vw, 12px);
    justify-content: center;
    margin-top: clamp(15px, 2vw, 20px);
    flex-wrap: wrap;
}

/* ===== AUTH FORM CONTAINER ===== */
/* Reusable container for authentication forms (signup, login, forgot password, etc.) */

.auth-form-container {
    max-width: 550px;
    margin: clamp(20px, 4vw, 50px) auto;
    padding: clamp(20px, 3vw, 35px) clamp(25px, 4vw, 45px);
    background: white;
    border-radius: clamp(8px, 1vw, 12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-form-container .logo {
    display: block;
    margin: 0 auto clamp(8px, 1vw, 12px);
    max-width: clamp(150px, 30vw, 200px);
    height: auto;
}

.auth-form-container h1 {
    text-align: center;
    color: var(--gray-800);
    font-size: clamp(20px, 2.5vw, 28px);
    margin-bottom: clamp(10px, 1.5vw, 15px);
    font-weight: 600;
}

.auth-form-container .form-group {
    margin-bottom: clamp(8px, 1vw, 12px);
}

.auth-form-container label {
    display: block;
    margin-bottom: clamp(4px, 0.5vw, 6px);
    color: var(--gray-700);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;
}

.auth-form-container input[type="text"],
.auth-form-container input[type="email"],
.auth-form-container input[type="password"] {
    width: 100%;
    padding: clamp(8px, 1vw, 12px);
    border: 1px solid var(--gray-300);
    border-radius: clamp(4px, 0.5vw, 6px);
    font-size: clamp(12px, 1vw, 14px);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.auth-form-container input:focus {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.auth-form-container .submit-button {
    width: 100%;
    padding: clamp(10px, 1.2vw, 14px);
    background-color: var(--brand-600);
    color: white;
    border: none;
    border-radius: clamp(4px, 0.5vw, 6px);
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: clamp(2px, 0.5vw, 6px);
}

.auth-form-container .submit-button:hover {
    background-color: var(--brand-700);
}

.auth-form-container .submit-button:active {
    transform: translateY(1px);
}

.auth-form-container .divider {
    text-align: center;
    margin: clamp(8px, 1vw, 12px) 0;
    position: relative;
}

.auth-form-container .divider::before,
.auth-form-container .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background-color: var(--gray-300);
}

.auth-form-container .divider::before {
    left: 0;
}

.auth-form-container .divider::after {
    right: 0;
}

.auth-form-container .divider-text {
    background: white;
    padding: 0 clamp(8px, 1vw, 12px);
    color: var(--gray-500);
    font-size: clamp(11px, 0.9vw, 13px);
    display: inline-block;
    position: relative;
}

.auth-form-container .auth-footer {
    text-align: center;
    margin-top: clamp(8px, 1vw, 12px);
    font-size: clamp(12px, 1vw, 14px);
    color: var(--gray-600);
}

.auth-form-container .auth-footer a {
    color: var(--brand-600);
    text-decoration: none;
    font-weight: 500;
}

.auth-form-container .auth-footer a:hover {
    text-decoration: underline;
}

/* Google OAuth button for auth forms */
.auth-form-container .google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(10px, 1.2vw, 14px);
    border: 1px solid var(--gray-600);
    border-radius: clamp(4px, 0.5vw, 6px);
    background-color: white;
    cursor: pointer;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    text-decoration: none;
    color: var(--gray-800);
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-bottom: clamp(6px, 0.8vw, 10px);
}

.auth-form-container .google-btn:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-700);
}

.auth-form-container .google-btn img {
    width: clamp(16px, 2vw, 20px);
    height: clamp(16px, 2vw, 20px);
    margin-right: clamp(8px, 1vw, 12px);
}

.container {
    width: 100%;
    max-width: none !important;
    display: flex;
    padding: 0;
    min-height: 100vh;
    flex: 1;
}

.content {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
    /* Removed box-shadow to eliminate visual gap */
    padding: 0;
}

.header {
    display: flex;
    justify-content: space-between; /* Keeps items spaced out */
    align-items: center;
    padding: clamp(3px, 0.4vw, 5px) clamp(10px, 1.8vw, 25px) clamp(3px, 0.4vw, 5px) clamp(5px, 0.8vw, 10px); /* Responsive padding */
    /*  background-color: #397ec4; Same gray as Monte Carlo Summary */
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-700) 100%);
    border-bottom: 1px solid #ccc; /* Slightly darker border */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Add subtle shadow */
    color: white;
}

.header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
    padding-left: 30px; /* 30px left padding as requested */
}

.accounts-data-display {
    font-size:14px;
}

#header-logo {
    height: 80px; /* Keep size */
    margin-right: 0; /* Remove margin since h3 has padding-left */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 0; /* Remove bottom margin */
    margin-left: 0; /* Remove left margin */
    display: block; /* Ensure it behaves as a block element */
}

.header h1 {
    margin: 0;
    font-size: 20px; /* Slightly larger title */
    font-weight: 600; /* Adjust weight if needed */
    color: white;
    flex-grow: 1; /* Allow title to take available space */
    text-align: left; /* Align title to the left after logo */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.8vw, 10px); /* Responsive gap */
}

.header-button {
    padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px); /* Responsive padding */
    font-size: clamp(10px, 1.1vw, 13px); /* Responsive font size */
    border: 1px solid #6c757d;
    border-radius: clamp(3px, 0.4vw, 5px); /* Responsive border radius */
    background-color: white;
    color: #6c757d;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-button:hover {
    background-color: #f1f1f1;
}

.header-button.primary {
    background-color: var(--brand-600); /* Brand blue */
    border-color: var(--brand-600);
    color: white;
}

.header-button.primary:hover {
    background-color: var(--brand-700); /* Darker brand blue */
    border-color: var(--brand-700);
}

/* Trustpilot Header Logo Styles */
.trustpilot-header-link {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.trustpilot-header-link:hover {
    opacity: 0.8;
}

.trustpilot-header-logo {
    height: 22px;
    width: auto;
    display: block;
}

/* Facebook Header Icon Styles */
.facebook-header-link {
    display: inline-flex;
    align-items: center;
    margin-right: 1px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.facebook-header-link:hover {
    opacity: 0.8;
}



/* X (Twitter) Header Icon Styles */
.x-header-link {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.x-header-link:hover {
    opacity: 0.8;
}

.x-header-icon {
    font-size: 22px;
    color: #000000; /* X brand: black */
    line-height: 1;
}

h2 {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 8px;
    font-weight: 600;
}

h3 {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 8px;
    font-weight: 600;
}


.main-content {
    display: flex;
    flex: 1;
    padding: 0px;
    min-height: calc(100vh - 100px); /* Subtract approximate header height */
    height: 100%;
    overflow: hidden;
}

/* Allow main-content to expand for scrollable tabs */
body.has-scrollable-tab .main-content {
    height: auto !important;
    overflow: visible !important;
}

.controls-panel {
    /* widened to accommodate new content-box-v2 design */
    flex: 0 0 clamp(460px, 33vw, 470px);
    padding: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 10px);
    border-right: 1px solid #ddd;

    /* we'll reserve space based on the scale (updated in media query) */
    --panel-scale: 1;
    flex-basis: calc(clamp(460px, 33vw, 470px) * var(--panel-scale));
  }
  
  /* Wrap inner content so transform doesn’t collapse layout space */
  .controls-panel__inner {
    transform-origin: top left;
    transform: scale(var(--panel-scale));
  }
  
  /* Narrower screens - aggressive scaling for smaller laptops/iPads */

  /* Summary container scaling - uses zoom for proper layout (unlike transform, zoom affects layout flow) */
  /* Firefox doesn't support zoom, so Firefox users will see unscaled content */
  #graphnew-summary-container {
    --summary-scale: 1;
    zoom: var(--summary-scale);
  }

  /* Graph selection tabs scaling - uses zoom for proper layout */
  .graph-selection-tabs {
    --tabs-scale: 1;
    zoom: var(--tabs-scale);
  }

  /* Main tabs header scaling - uses zoom for proper layout */
  .tabs-header.tabs {
    --header-tabs-scale: 1;
    zoom: var(--header-tabs-scale);
  }

  /* Data column scaling - uses transform for cross-browser support */
  #graphnew-data-column-container {
    --data-column-scale: 1;
    transform-origin: top right;
    transform: scale(var(--data-column-scale));
  }

  /* Extra large screens (2200px and below) */
  @media (max-width: 2200px) {
    .controls-panel {
      --panel-scale: 0.9;
    }
    #graphnew-summary-container {
      --summary-scale: 0.9;
    }
    .tabs-header.tabs {
      --header-tabs-scale: 0.9;
    }
    #graphnew-data-column-container {
      --data-column-scale: 0.9;
    }
  }

  /* Large screens (1800px and below) */
  @media (max-width: 1800px) {
    .controls-panel {
      --panel-scale: 0.85;
    }
    #graphnew-summary-container {
      --summary-scale: 0.80;
    }
    .tabs-header.tabs {
      --header-tabs-scale: 0.85;
    }
    #graphnew-data-column-container {
      --data-column-scale: 0.85;
    }
  }

  /* Large laptops / small desktops (1366px and below) */
  @media (max-width: 1366px) {
    .controls-panel {
      --panel-scale: 0.8;
    }
    #graphnew-summary-container {
      --summary-scale: 0.7;
    }
    .graph-selection-tabs {
      --tabs-scale: 0.85;
    }
    .tabs-header.tabs {
      --header-tabs-scale: 0.8;
    }
    #graphnew-data-column-container {
      --data-column-scale: 0.8;
    }
  }

  /* Small laptops / iPad Pro landscape (1024px and below) */
  @media (max-width: 1024px) {
    .controls-panel {
      --panel-scale: 0.75;
    }
    #graphnew-summary-container {
      --summary-scale: 0.6;
    }
    .graph-selection-tabs {
      --tabs-scale: 0.75;
    }
    .tabs-header.tabs {
      --header-tabs-scale: 0.75;
    }
    #graphnew-data-column-container {
      --data-column-scale: 0.75;
    }
  }

  /* iPad portrait / smaller tablets (900px and below) */
  @media (max-width: 900px) {
    .controls-panel {
      --panel-scale: 0.7;
    }
    #graphnew-summary-container {
      --summary-scale: 0.5;
    }
    .graph-selection-tabs {
      --tabs-scale: 0.7;
    }
    .tabs-header.tabs {
      --header-tabs-scale: 0.7;
    }
    #graphnew-data-column-container {
      --data-column-scale: 0.7;
    }
  }





.visualization-panel {
    flex: 1;
    padding: 5px 20px 0 20px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    height: 100%;
}

/* Allow scrolling for visualization panel when showing scrollable tabs */
.visualization-panel.scrollable {
    overflow: visible !important;
    height: auto !important;
    min-height: calc(100vh - 100px) !important;
    max-height: none !important;
}

/* When scrollable tabs are active, adjust parent containers */
.visualization-panel.scrollable .tabs-container {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

/* Content Box Styles */
.content-box {
    border: 2px solid #6c757d;
    margin-bottom: 10px;
    border-radius: 3px;
    overflow: hidden;
    min-width: 415px;
    border-radius: 8px;
}

/* Checkbox Grid Styles */
.checkbox-grid {
    display: flex;
    flex-direction: column;

}

.checkbox-columns {
    display: flex;

}

.checkbox-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 120px;
    /* Removed max-width to allow columns to expand and fill available space */
}

.checkbox-row {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 5px;
}

.checkbox-row .checkbox-item {
    flex: 1;
    min-width: 120px;
    max-width: 120px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: clamp(11px, 1.2vw, 13px);
    white-space: nowrap;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 6px;
    flex-shrink: 0;
}

.checkbox-item label {
    white-space: nowrap;
}

.content-box-header {
    background-color: var(--gray-500);
    color: var(--box-header-color);
    padding: 5px 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    font-size: 14px;
    pointer-events: none;
}

.box-title {
  
    pointer-events: none;
}

.content-box-body {
    padding: 15px;
    transition: max-height 0.4s cubic-bezier(0.8, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.8, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.8, 0, 0.2, 1);
    overflow: hidden;
    font-size: 12px;
    max-height: 2000px; /* Increased to accommodate claiming table expansion */
}

.content-box-body.collapsed {
    /* max-height handled via inline styles for animation */
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

/* Content Box Summary - shown when box is collapsed */
.content-box-summary {
    display: none;
    padding: 5px 15px;
    font-size: 12px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: auto;
}

.content-box-summary.visible {
    display: block;
    opacity: 1;
}

.summary-item {
    margin-right: 15px;
    white-space: nowrap;
}

/* For narrower screens or many items */
@media (max-width: 800px) {
    .summary-item {
        margin-right: 8px;
    }
}

.toggle-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer !important;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.2s;
    position: relative;
    z-index: 100;
    pointer-events: auto !important;
    margin-left: 10px;
    outline: none;
}

/* Special styling for the summary toggle button */
#summary-toggle-button {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer !important;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.2s;
    position: relative;
    z-index: 1000;
    pointer-events: auto !important;
    margin-left: 10px;
    outline: none;
}

#summary-toggle-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.toggle-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Content Box V2 - New UI Design
   ============================================ */
.content-box-v2 {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    background: #ffffff;
    margin-bottom: 14px;
}

.content-box-v2 .content-box-header {
    background: linear-gradient(135deg, #16548C, #1E6AB1);
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #f9fafb;
    border: none;
}

.content-box-v2 .content-box-body {
    background: #f3f5fb;
    padding: 14px 16px;
}

.content-box-v2 .content-box-body.collapsed {
    padding: 0;
}

/* V2 header buttons - lighter style for blue background */
.content-box-v2 .toggle-button {
    background: rgba(15, 23, 42, 0.16);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    color: #e5e7eb;
    transition: background 0.18s ease-out, transform 0.1s ease-out;
}

.content-box-v2 .toggle-button:hover {
    background: rgba(15, 23, 42, 0.3);
    transform: translateY(-1px);
}

.content-box-v2 .toggle-button:active {
    transform: translateY(0);
}

/* V2 header action buttons (help icons, etc.) */
.content-box-v2 .icon-button {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    background: rgba(15, 23, 42, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #e5e7eb;
    font-size: 15px;
    transition: background 0.18s ease-out, transform 0.1s ease-out;
}

.content-box-v2 .icon-button:hover {
    background: rgba(15, 23, 42, 0.3);
    transform: translateY(-1px);
}

/* V2 Editing Bar - "Currently editing plan" display */
/* Sits between header and body with full-width white background */
.content-box-v2 .editing-bar {
    padding: 14px 20px;
    border-bottom: 1px solid #dde2ee;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

.content-box-v2 .editing-label {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.content-box-v2 .editing-label .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
    flex-shrink: 0;
}

.content-box-v2 .plan-link {
    font-weight: 500;
    color: #2f7af8;
    cursor: pointer;
    text-decoration: none;
    margin-left: 6px;
}

.content-box-v2 .plan-link:hover {
    text-decoration: underline;
    color: #1f5dcc;
}

.content-box-v2 .stop-editing-btn {
    border-radius: 999px;
    border: none;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(248, 113, 113, 0.9);
    color: #fdf2f2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25);
    transition: background 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.1s ease-out;
    flex-shrink: 0;
    white-space: nowrap;
}

.content-box-v2 .stop-editing-btn:hover {
    background: #ef4444;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3);
    transform: translateY(-1px);
}

.content-box-v2 .stop-editing-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.3);
}

/* V2 Content Sections - White sub-containers */
.content-section {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    margin-bottom: 14px;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.content-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    white-space: nowrap;
}

.content-section-subtitle {
    font-size: 12px;
    color: #9ca3af;
}

/* V2 Allocation Card - Investment Summary with Donut Chart */
.allocation-card {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at top left, #eef2ff, #f9fafb 55%, #fefce8);
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
}

.allocation-pie {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
    /* Default gradient - will be overridden by JS */
    background: conic-gradient(#3b82f6 0 100%);
}

.allocation-pie::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: #f9fafb;
}

.allocation-pie-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #111827;
    z-index: 1;
}

.allocation-legend {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.legend-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.legend-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.legend-dot.pre-tax {
    background: #3b82f6;
}

.legend-dot.roth {
    background: #22c55e;
}

.legend-dot.taxable {
    background: #f97316;
}

.legend-label {
    font-weight: 500;
    color: #111827;
}

.legend-percent {
    font-weight: 500;
    color: #4b5563;
}

.allocation-total {
    margin-top: 6px;
    font-size: 12px;
    color: #4b5563;
}

/* Toggle Switch (On/Off control) */
.toggle-switch {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: background 0.16s ease-out, border 0.16s ease-out;
    flex-shrink: 0;
}

.toggle-switch-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: inherit;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.35);
    transition: transform 0.18s ease-out;
    pointer-events: none; /* Clicks pass through to parent */
}

.toggle-switch[data-on="true"] {
    background: #22c55e;
    border-color: #16a34a;
}

.toggle-switch[data-on="true"] .toggle-switch-thumb {
    transform: translateX(18px);
}

.toggle-switch:hover {
    border-color: #9ca3af;
}

.toggle-switch[data-on="true"]:hover {
    background: #16a34a;
    border-color: #15803d;
}

.toggle-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.toggle-switch-label {
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
    margin-left: 8px;
}

/* V2 Info/Help Icons */
.content-box-v2 .info-icon,
.content-box-v2 .help-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: #f9fafb;
    cursor: pointer;
    margin-left: 4px;
}

/* V2 Slider Label Styling */
.content-box-v2 .slider-label {
    min-width: 150px;
    max-width: 150px;
    font-size: 13px;
    font-weight: 500;
    color: #1d2433;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* V2 Slider Container */
.content-box-v2 .slider-container {
    margin-bottom: 10px;
}

/* V2 Input and Select Styling */
.content-box-v2 input[type="text"],
.content-box-v2 input[type="number"],
.content-box-v2 select {
    font-family: "Roboto", system-ui, sans-serif;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    padding: 6px 10px;
    background: #f8fafc;
    outline: none;
    min-width: 0;
    transition: border 0.14s ease-out, box-shadow 0.14s ease-out, background 0.14s ease-out;
}

.content-box-v2 input[type="text"]:focus,
.content-box-v2 input[type="number"]:focus,
.content-box-v2 select:focus {
    border-color: #2f7af8;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.content-box-v2 select {
    padding-right: 24px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
        linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    background-color: #f8fafc;
}

/* V2 Birth Date Container Styling */
.content-box-v2 #birth-date-container {
    margin-bottom: 10px;
}

.content-box-v2 #birth-date-container label {
    min-width: 150px;
    max-width: 150px;
    font-size: 13px;
    font-weight: 500;
    color: #1d2433;
}

/* V2 Accounts Inner Box - light blue background with less rounded corners */
.content-box-v2 .accounts-inner-box {
    background: #eef4ff;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* V2 Slider Input Styling - off-white background */
.content-box-v2 .slider-input input {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
   line-height:15px;
}

.content-box-v2 .slider-input input:focus {
    border-color: #2f7af8;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* Slider Styles */
.slider-container {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: nowrap; /* Prevent wrapping */
    min-width: 0; /* Allow flex items to shrink */
}

.slider-label {
    min-width: clamp(190px, 1.2vw, 280px);
    max-width:  clamp(190px, 1.2vw, 280px);
    font-size: clamp(12px, 1.2vw, 14.5px);
    flex-shrink: 0; /* Maintain consistent behavior on smaller screens */
    font-family:Roboto, sans-serif;
    font-weight:600;

}

.slider-control {
    margin: 0 2px;
    min-width: 104px;

    /* Remove max-width constraint that might cause wrapping */
    flex-grow: 1;
    flex-shrink: 1;

    /* Track styling to match Accounts tab */
    -webkit-appearance: none;
    appearance: none;
    background: #e3ebff;
    border-radius: 3px;
    height: 6px;
    overflow: visible; /* Allow box-shadow glow to extend beyond track */
}

.slider-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2b74d7;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(43, 116, 215, 0.25);
    margin-top: -4px; /* Center thumb on 6px track: (6-14)/2 = -4 */
}

.slider-control::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2b74d7;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(43, 116, 215, 0.25);
}

.slider-control::-ms-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2b74d7;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(43, 116, 215, 0.25);
}

.slider-control::-webkit-slider-runnable-track {
    height: 6px;
    background: #e3ebff;
    border-radius: 3px;
}

.slider-control::-moz-range-track {
    height: 6px;
    background: #e3ebff;
    border-radius: 3px;
}

.slider-input {
    width: 100px;
    flex-shrink: 0; /* Prevent input area from shrinking */
    text-align: right;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.slider-input-padded {
    width: 100px;
    flex-shrink: 0; /* Prevent input area from shrinking */
    text-align: right;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding-left:10px;
}


.slider-input input {
    width: 80px;
    padding: 2px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* Tighter layout for the Spouse Profile panel to prevent wrapping */
#spouse-profile-box .slider-label {
    min-width: 130px;
    max-width: 130px;
}

#spouse-profile-box .slider-control {
    margin: 0 8px;
    min-width: 90px;
}

#spouse-profile-box .slider-input {
    width: 110px;
}

#spouse-profile-box .slider-input input {
    width: 88px;
}

.spinner-buttons {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 2px;
}

.spinner-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    height: 14px;
    width: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;
}

.spinner-button:hover {
    background-color: #e1e1e1;
}

.spinner-up {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom: none;
}

.spinner-down {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* ========================================
   Compact Slider Styles (Two-Line Layout)
   For account balance inputs in Personal Profile
   ======================================== */

.compact-slider-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.compact-slider-container:hover {
    background-color: #f1f3f5;
    border-color: #dee2e6;
}

/* Line 1: Label + Input + Spinner */
.compact-slider-line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.compact-slider-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.compact-slider-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.compact-slider-label-text {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-slider-bucket-label {
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    flex-shrink: 0;
}

.compact-slider-input-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 8px;
}

.compact-slider-input {
    width: 100px;
    padding: 4px 8px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
}

.compact-slider-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

/* Line 2: Full-width Slider */
.compact-slider-line2 {
    width: 100%;
}

.compact-slider-range {
    width: 100%;
    height: 6px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: #e3ebff;
    border-radius: 3px;
    cursor: pointer;
}

.compact-slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2b74d7;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(43, 116, 215, 0.25);
    transition: transform 0.1s ease;
    margin-top: -4px; /* Center thumb on 6px track: (6-14)/2 = -4 */
}

.compact-slider-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.compact-slider-range::-webkit-slider-thumb:active {
    transform: scale(1.15);
    background: #2563eb;
}

.compact-slider-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2b74d7;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(43, 116, 215, 0.25);
}

.compact-slider-range::-moz-range-track {
    height: 6px;
    background: #e3ebff;
    border-radius: 3px;
}

/* Compact slider spinner buttons (uses existing styles but override positioning) */
.compact-slider-input-wrapper .spinner-buttons {
    margin-left: 2px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .compact-slider-container {
        padding: 6px 8px;
    }

    .compact-slider-label-text {
        font-size: 12px;
    }

    .compact-slider-input {
        width: 85px;
        font-size: 12px;
        padding: 3px 6px;
    }

    .compact-slider-dot {
        width: 8px;
        height: 8px;
        margin-right: 6px;
    }
}

/* ========================================
   End Compact Slider Styles
   ======================================== */

/* Tabs Styles */
.tabs-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    height: 100%;
}

/* Override height constraints when showing scrollable tabs */
.visualization-panel.scrollable .tabs-container {
    height: auto !important;
    flex: none !important;
}

/* Fancy Tabs Container */
.tabs-header.tabs {
    position: relative;
    display: flex;
    gap: clamp(2px, 0.3vw, 4px);
    padding: clamp(4px, 0.5vw, 8px);
    background: var(--gray-300);  /* Using gray-300 from palette */
    border: 1px solid var(--gray-300);  /* Matching border color */
    border-radius: clamp(6px, 1.5vw, 8px);
    overflow: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.tabs-header.tabs::-webkit-scrollbar { display: none; }

/* Tab Buttons */
.tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.5vw, 8px);
    height: clamp(32px, 4vw, 42px);
    padding: 0 clamp(8px, 1vw, 14px);
    border-radius: clamp(8px, 1vw, 14px);
    color: var(--gray-700);  /* Using gray-700 for inactive tabs */
    background: transparent;
    border: 0;
    font-size: clamp(10px, 1.1vw, 17px);
    font-weight: 800;
    font-family: Roboto, sans-serif;
    letter-spacing: .03125em !important;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease, transform .08s ease;
    flex: 1 1 auto;
    min-width: 0;
}

.tab:focus-visible {
    outline: 3px solid var(--brand-glow);  /* Using brand glow for focus */
    outline-offset: 2px;
    border-radius: clamp(10px, 1.2vw, 16px);
}

.tab:hover:not(.active) {
    color: var(--gray-900);  /* Darker text on hover */
    background: var(--gray-100);  /* Subtle background on hover */
    border-radius: clamp(8px, 1vw, 14px);
}

.tab:active {
    transform: translateY(1px);
}

.tab.active {
    color: white;
    font-weight: 600;
}

.tab__icon {
    opacity: .9;
    flex-shrink: 0;
    width: clamp(14px, 1.8vw, 18px);
    height: clamp(14px, 1.8vw, 18px);
}

.tab.active .tab__icon {
    color: white;
    opacity: 1;
}

.tab__ext {
    opacity: .6;
    margin-left: clamp(4px, 0.5vw, 8px);
    flex-shrink: 0;
    width: clamp(12px, 1.4vw, 14px);
    height: clamp(12px, 1.4vw, 14px);
    transition: opacity 0.2s;
}

.tab:hover .tab__ext {
    opacity: .9;
}

.tab:not(.active) .tab__ext {
    opacity: .3;
}

.tab.active .tab__ext {
    color: white;
    opacity: .9;
}

/* Hide external link icons on screens smaller than 1300px */
@media (max-width: 1299px) {
    .tab__ext {
        display: none;
    }
}

/* Smart flex allocation by content length */
.tab[data-tab="graphnew"],
.tab[data-tab="tablenew"],
.tab[data-tab="monthly-budget"] {
    flex-grow: 0.9;
}

.tab[data-tab="accounts"],
.tab[data-tab="allocation-explorer"],
.tab[data-tab="compare"] {
    flex-grow: 1.1;
}

.tab[data-tab="networth"],
.tab[data-tab="saved-plans"] {
    flex-grow: 1.2;
}

.tab[data-tab="spending-smile"] {
    flex-grow: 1.6;
}

/* Sliding active indicator pill */
.tabs__indicator {
    position: absolute;
    z-index: 0;
    height: calc(clamp(32px, 4vw, 42px) - clamp(6px, 0.8vw, 8px));
    top: 50%;
    transform: translateY(-50%);
    border-radius: clamp(8px, 1vw, 14px);
    background: var(--brand-600);  /* Using brand-600 directly */
    border: 1px solid var(--brand-700);  /* Darker brand border */
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px var(--brand-glow);
    transition: left .25s cubic-bezier(.22,.61,.36,1), width .25s cubic-bezier(.22,.61,.36,1), opacity .3s;
    pointer-events: none;
    opacity: 0;
}

.tabs__indicator.positioned {
    opacity: 1;
}

/* Disable transition during browser resize to keep indicator in correct position */
.tabs__indicator.no-transition {
    transition: none !important;
}

.tab-content {
    display: none;
    padding: 0px;
    min-height: 0;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    padding-bottom: 0px;
    font-size:16px;
    height: 100%;
}
.btn-label {

    font-family:Roboto, sans-serif;
}
/* Scrollable tabs should expand naturally */
#monthly-budget-tab.active,
#budget-tab.active,
#saved-plans-tab.active,
#spending-smile-tab.active,
#allocation-explorer-tab.active,
#accounts-tab.active,
#networth-tab.active {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
}

/* Tab Icon Styles */
.tab-icon {
    color: var(--gray-700);  /* Using gray-700 from palette */
    margin-right: clamp(3px, 0.5vw, 8px); /* Responsive margin */
    font-size: clamp(10px, 0.9vw, 14px); /* Smaller icons on small screens */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.tab.active .tab-icon {
    color: white;
    opacity: 1;
}

.tab:hover:not(.active) .tab-icon {
    opacity: 1;
    transform: scale(1.05);  /* Slightly smaller scale for subtlety */
}

/* Investment Mode Selector Container */
.investment-mode-selector {
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 12px;
    background-color: var(--brand-100);  /* Light brand blue background */
    border-radius: 6px;
    border: 1px solid var(--brand-300);  /* Brand blue border */
}

/* Hide tab icons on narrow screens to save space */
@media (max-width: 1480px) {
    .tab-icon {
        display: none !important;
    }

    /* Adjust tab padding when icons are hidden - even more aggressive
    .tab {
        padding: clamp(3px, 0.5vw, 6px) clamp(4px, 0.7vw, 10px);
        font-size: clamp(8px, 0.7vw, 14px);
    }
         */
}

/* Ultra-compact mode for very small screens 
@media (max-width: 600px) {
    .tab {
        padding: clamp(2px, 0.3vw, 4px) clamp(3px, 0.5vw, 8px);

        font-size: clamp(7px, 0.6vw, 12px); 
        letter-spacing: -0.5px; 
    }
        */
}

/* Container for both summary and table */
.table-view-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Ensure summary stays at top and doesn't scroll */
#summary-box {
    flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
    margin-bottom: 10px;
    position: relative;
    z-index: 2; /* Ensure summary stays above table */
    background: white; /* Ensure background is solid */
}

#results-container {
    flex: 1 1 auto;
    min-height: 0;
    /* Dynamic height that accounts for parent container and ensures bottom is visible */
    height: calc(100vh - 190px); /* Reduced from 250px to use more vertical space */
    max-height: calc(100vh - 190px);
    overflow: auto;
    border: 1px solid #ccc;
    position: relative;
    margin-bottom: 10px; /* Reduced margin to ensure bottom visibility */
    background: white;
}

/* Ensure parent containers handle overflow properly */
#table-tab.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Account for header and tabs */
    overflow: hidden;
    padding: 10px; /* Consistent padding */
}

.table-view-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px; /* Add padding here instead */
}

/* Results Table Styles - CONSOLIDATED */
.results-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Let browser optimize column widths */
    font-size: 12.0px; /* Set a base font size */
}

.results-table th {
    position: sticky;
    top: 0;
    background-color: var(--box-header-bg); /* Restore desired background */
    color: var(--box-header-color); /* Restore desired text color */
    z-index: 1; /* Keep headers above scrolling content */
    padding: 8px 6px; /* Reduced padding to allow more wrapping */
    border: 1px solid #dee2e6;
    /* Adjust border color slightly to work with darker bg */
    border-left-color: #aaa;
    border-right-color: #aaa;
    border-top-color: #aaa;
    border-bottom-color: #777; /* Darker bottom border */
    text-align: center; /* Center header titles */
    font-weight: 600; /* Make headers bolder */
    white-space: normal; /* Allow header text to wrap */
    word-wrap: break-word; /* Break long words if needed */
    word-break: normal; /* Don't break words unless necessary */
    hyphens: none; /* Disable hyphenation */
    line-height: 1.2; /* Tighter line height for wrapped text */
    vertical-align: middle; /* Center multi-line headers vertically */
}

/* Ensure header background covers scrolled content */
.results-table th::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--box-header-bg); /* Match header background */
    border-bottom: 1px solid #777; /* Match header bottom border */
    z-index: -1;
}

.results-table td {
    padding: 4px 6px;
    border: 1px solid #dee2e6;
    border-bottom: 1px solid #eee; /* Lighter bottom border for rows */
    transition: background-color 0.2s ease; /* Smooth hover */
    white-space: nowrap; /* Prevent data from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ... for very long content */
}

.results-table .even-row td {
    background-color: #cadae7; /* Use td for alternating rows */
}

.results-table .odd-row td {
    background-color: #ffffff; /* Explicit white for odd rows */
}

/* Hover effect removed per user request */

/* Home column separator styles */
.home-column-separator {
    border-left: 2px solid #999;
}

.results-table th.home-column-separator {
    border-left: 2px solid #bbb; /* Adjust header separator color slightly */
}

.results-table td.home-column-separator {
    border-left: 2px solid #999;
}

/* Very simple column constraints */
.results-table th:first-child,
.results-table td:first-child {
    width: 1%; /* Age column - as narrow as possible */
}

/* Prevent data from wrapping but allow headers to wrap */
.results-table td {
    white-space: nowrap;
}

/* Withdrawal Strategy Table - natural sizing with reasonable minimums */
.withdrawal-strategy-table {
    table-layout: auto; /* Let browser optimize column widths */
}

/* Age column narrow */
.withdrawal-strategy-table th:first-child,
.withdrawal-strategy-table td:first-child {
    width: 1%; /* Age column - as narrow as possible */
}

/* Set reasonable minimum widths to prevent excessive header wrapping */
.withdrawal-strategy-table th {
    min-width: 80px !important; /* Force minimum widths */
    padding: 4px 6px !important;
    border-bottom: 2px solid #dee2e6 !important;
    text-align: center !important;
    font-weight: bold !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    width: auto !important; /* Override any width constraints */
}

/* Age column - narrower */
.withdrawal-strategy-table th.age-col {
    min-width: 40px !important;
    width: 1% !important;
}

/* Specific adjustments for different column types */
.withdrawal-strategy-table th.percent-col {
    min-width: 50px !important; /* Percentage columns can be narrower */
}

.withdrawal-strategy-table th.details-col {
    min-width: 70px !important; /* Details column */
}

/* Prevent data from wrapping */
.withdrawal-strategy-table td {
    white-space: nowrap;
}





/* Note: #table-tab.active styles are defined above at line 626 */
/* Removed duplicate definition to avoid conflicts */

#summary-box,
.table-controls {
    flex: 0 0 auto; /* Don't grow or shrink */
    margin-bottom: 10px;
}

/* For very wide screens, allow unlimited table expansion */
@media (min-width: 1600px) {
    /* controls-panel now uses clamp() for smooth growth, no override needed */

    .visualization-panel {
        flex: 1; /* Take all remaining space */
        min-width: 800px; /* Ensure minimum space for table */
    }
}

@media (max-width: 1240px) {
    .controls-panel {
        width: 40%;
        min-width: 300px;
        max-width: 500px;
    }
    
    .visualization-panel {
        width: 60%;
        min-width: 300px;
    }
    
    /* Ensure checkbox grid remains usable on smaller screens */
    .checkbox-columns {
        flex-wrap: wrap;
    }
    
    .checkbox-column {
        min-width: 120px;
    }
    
    .checkbox-row {
        flex-wrap: wrap;
    }
    
    .checkbox-row .checkbox-item {
        min-width: 120px;
    }
}

/* Scale down content boxes for 1080p screens or smaller */
@media (max-width: 1220px) {
    /* Reduce font sizes */
    body {
        font-size: 18px;
    }
    
    h1 {
        font-size: 18px;
    }
    
    /* Scale down content boxes */
    .content-box-header {
        padding: 4px 12px;
        font-size: 12px;
    }
    
    .content-box-body {
        padding: 12px;
        font-size: 10px;
    }
    

    .slider-control {
        margin: 0 2px;
        min-width: 104px;
        max-width:104px;
    }
    
 
    /* Scale down spinner buttons */
    .spinner-button {
        height: 11px;
        width: 14px;
        font-size: 8px;
    }
    
    /* Scale down checkbox items */
    .checkbox-item {
        font-size: 10px;
    }
    
    /* Scale down summary items */
    .box-summary {
        font-size: 8px;
    }
    
    .summary-item {
        margin-right: 12px;
    }
    
    /* Adjust padding for controls panel */
    .controls-panel {
        padding: 16px;
    }
}

@media (max-width: 800px) {
    .main-content {
        flex-direction: column;
    }
    
    .controls-panel {
        min-width: auto;
        max-width: 100%;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    
    .visualization-panel {
        width: 100%;
        height: 500px;
        min-height: 500px;
        overflow: visible;
    }
}

/* Checkbox Component Styles */
.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 8px;
}

.checkbox-container label {
    cursor: pointer;
}

/* Radio Group Styles */
.radio-group {
    display: flex;
    margin-bottom: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 12px;
}

.radio-option input[type="radio"] {
    margin-right: 5px;
}

.radio-option label {
    cursor: pointer;
}

/* Graph View Styles */
.graph-controls {
    margin-bottom: 15px;
}

.graph-container {
    width: 100%;
    height: calc(100% - 20px);
    position: relative;
    padding: 10px 10px 5px 10px; /* Reduced bottom padding for tighter spacing */
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-sizing: border-box;
}

/* Ensure canvas properly fills container */
#retirement-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
}

/* Ensure graph tab has proper flex layout and prevents overflow */
#graph-tab.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Ensure summary containers stay in bounds */
#graph-summary-container,
#mc-all-summary-container {
    flex-shrink: 0;
}

/* Debug View Styles */
.debug-controls {
    margin-bottom: 15px;
}

.action-button {
    background-color: #235685;
    color: white;
    border: none;
    padding: 6px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    margin-right: 10px;
}

.action-button:hover {
    background-color: #555;
}

.mainbutton {
    background: linear-gradient(135deg, rgb(0, 123, 255), rgb(0, 86, 179));
    color: white;
    border: none;

    padding: clamp(8px, 1vw, 12px);
    border-radius: 6px;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.4vw, 4px);
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
    transform: translateY(0px);
    height: clamp(36px, 4vw, 45px);
    letter-spacing: .1cap;
}

.mainbutton:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
}

.mainbutton:active {
    transform: translateY(0px);
}

.mainbutton:disabled {
    background: linear-gradient(135deg, rgb(150, 150, 150), rgb(100, 100, 100));
    cursor: not-allowed;
    opacity: 0.6;
}

.settings-output-container {
    width: 100%;
    margin-top: 15px;
}

#settings-output {
    width: 100%;
    height: 500px;
    font-family: monospace;
    font-size: 12px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    resize: vertical;
    overflow-y: auto;
    white-space: pre;
}

/* Results Summary Styles */
.results-summary {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.results-summary h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--primary-color);
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.summary-table th {
    background-color: var(--primary-color);
    color: white;
    padding: 8px;
    text-align: left;
}

.summary-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.summary-total {
    font-weight: bold;
    background-color: #e5efff;
}

/* Table View Styles */
.table-controls {
    margin-bottom: 15px;
}

/* Column Selector Styles */
.column-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
    z-index: 1000;
    overflow-y: auto;
}

.column-selector-popup {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 700px;
    max-width: 90%;
    max-height: 95vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.column-selector-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-selector-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary-color);
}

.column-selector-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.column-selector-close:hover {
    color: #333;
}

.column-selector-content {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 0;
}

.column-selector-column {
    flex: 1;
    min-width: 300px;
}

/* Responsive scaling for smaller screens - ONLY when popup would actually be cut off */
@media (max-height: 480px) {
    .column-selector-popup {
        min-height: 400px;
        max-height: 92vh;
        transform: scale(0.95);
        transform-origin: top center;
    }
    .column-selector-overlay {
        padding-top: 10px;
    }
}

@media (max-height: 420px) {
    .column-selector-popup {
        min-height: 350px;
        max-height: 90vh;
        transform: scale(0.85);
        transform-origin: top center;
    }
    .column-selector-overlay {
        padding-top: 5px;
    }
}

.column-group {
    margin-bottom: 20px;
}

.column-group h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Column Group Header Styles */
.column-group-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.column-group-header input[type="checkbox"] {
    margin-right: 8px;
}

.column-group-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--primary-color);
    border-bottom: none;
    padding-bottom: 0;
}

.column-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    margin-left: 20px;
    gap: 8px;
}

.column-selector-footer {
    padding: 15px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.primary-button {
    background-color: var(--slider-color);
}

.primary-button:hover {
    background-color: #2980b9;
}

/* Ensure the graph tab has appropriate minimum height */
/* #graph-tab {
    min-height: 600px; 
} */

/* Responsive height adjustments */
@media (max-height: 900px) {
    /* Media query intentionally left empty - disabled height restrictions */
}

@media (max-height: 700px) {
    /* Media query intentionally left empty - disabled height restrictions */
}

/* Inflation Table Styles */
.inflation-table-container {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.inflation-table-container h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
}

.inflation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.inflation-table th,
.inflation-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.inflation-table th {
    background-color: #f1f1f1;
    font-weight: 600;
    color: #333;
}

.inflation-table tr:hover {
    background-color: #f5f5f5;
}

.inflation-table td:first-child {
    font-weight: 500;
}

.inflation-table td:last-child {
    font-family: monospace;
    text-align: right;
}

/* General Popup Styles (reused from column selector, slightly modified) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.popup-container {
    background-color: white;
    border-radius: 8px;
    /* Enhanced shadow for more depth - opacity 0.8 as requested */
    box-shadow: 0 8px 25px rgba(0,0,0,0.8), 0 4px 10px rgba(0,0,0,0.8);
    width: 500px;
    max-width: 90%;
    max-height: 120vh;
    display: flex;
    flex-direction: column;
    /* Padding removed from container */
}

.popup-header {
    /* Darker gradient using more saturated light/medium blues */
    background: linear-gradient(135deg, #667eea 0%, #5388bb 100%);
    padding: 15px 25px; /* Keep padding here */
    border-bottom: 1px solid #a0c8e8; /* Darker border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Apply top radius to the header */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color:white;
}

.popup-header h3 {
    margin: 0;
    font-size: 18px;
    color: white; /* Slightly darker text */
    text-align: center;
}

.popup-close {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: white; /* Adjust color for darker header */
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s ease;
}

.popup-close:hover {
    color: var(--slider-color);
}

.popup-content {
    padding: 20px 25px; /* Keep padding here */
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}

/* Help Icon Styles */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border: 1.5px solid #888;
    border-radius: 50%;
    color: #777;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    margin-left: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.help-icon:hover {
    background-color: #e0e0e0;
    color: #333;
    border-color: #555;
}

/* Ensure summary and controls don't grow and stay fixed at top */
#summary-box, .table-controls, .column-selector-container {
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* --- Styles for Debug 2 Dummy Table --- */
#dummy-table-container {
    width: 100%;
    height: 400px; /* Give it a fixed height */
    overflow: auto; /* Enable scrolling */
    border: 1px solid blue; /* Make it visible */

}

#dummy-table {
    width: 100%;
    border-collapse: collapse;
}

#dummy-table th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border: 1px solid #ddd;
    padding: 8px;
    z-index: 1;
}

#dummy-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

#dummy-table tr:nth-child(even) {background-color: #f9f9f9;}

/* --- Main Navigation Bar Styles --- */
.main-nav {
    display: flex;
    background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-600) 100%);
    padding: 0 20px; /* Horizontal padding */
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.nav-link {
    color: white; /* White text for better contrast */
    text-decoration: none;
    padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.5vw, 20px); /* Responsive padding */
    font-size: clamp(10px, 1.2vw, 14px); /* Responsive font size */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-right: 1px solid var(--brand-700); /* Separator using darker brand color */
}

.nav-link:first-child {
    border-left: 1px solid var(--brand-700); /* Add border to the first item */
}

.nav-link:hover {
    background-color: var(--brand-700);
    color: white;
}

/* Consider an 'active' state if needed later */
/* .nav-link.active {
    background-color: var(--primary-color); 
    color: white;
} */

/* === Condensed Header Styles === */
.header-condensed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(4px, 0.6vw, 8px) clamp(10px, 1.8vw, 25px) clamp(4px, 0.6vw, 8px) clamp(5px, 0.8vw, 10px); /* Responsive padding */
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    border-bottom: 1px solid var(--brand-700);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: white;
    height: clamp(32px, 5vw, 42px); /* Responsive height */
}

.header-condensed-logo {
    height: 30px;
    margin-right: 10px;
    margin-left: 0;
    display: block;
}

.nav-link-condensed {
    color: white;
    text-decoration: none;
    padding: clamp(4px, 0.6vw, 8px) clamp(8px, 1.2vw, 15px); /* Responsive padding */
    font-size: clamp(9px, 1.1vw, 13px); /* Responsive font size */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-right: 1px solid var(--brand-700);
    white-space: nowrap;
}

.nav-link-condensed:first-of-type {
    border-left: 1px solid var(--brand-700);
}

.nav-link-condensed:hover {
    background-color: var(--brand-700);
    color: white;
}

.header-button-condensed {
    padding: clamp(2px, 0.3vw, 4px) clamp(5px, 0.8vw, 10px); /* Responsive padding */
    font-size: clamp(9px, 1vw, 12px); /* Responsive font size */
    border: 1px solid var(--gray-300);
    border-radius: clamp(2px, 0.3vw, 4px); /* Responsive border radius */
    background-color: white;
    color: var(--gray-600);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-button-condensed:hover {
    background-color: var(--gray-100);
}

.header-button-condensed.primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: white;
}

.header-button-condensed.primary:hover {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}

/* Header Toggle Button Styles */
.header-toggle-btn {
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 6px); /* Responsive gap */
    padding: clamp(4px, 0.6vw, 8px) clamp(6px, 0.9vw, 12px); /* Responsive padding */
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: clamp(2px, 0.3vw, 4px); /* Responsive border radius */
    color: #f0f0f0;
    font-size: clamp(9px, 1vw, 12px); /* Responsive font size */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: clamp(8px, 1.2vw, 15px); /* Responsive margin */
}

.header-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.header-toggle-btn i {
    font-size: 12px;
    line-height: 1;
}

.header-toggle-btn .toggle-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Condensed version of toggle button */
.header-toggle-btn.condensed {
    padding: clamp(2px, 0.3vw, 4px) clamp(4px, 0.6vw, 8px); /* Responsive padding */
    font-size: clamp(8px, 0.9vw, 11px); /* Responsive font size */
    margin-left: clamp(5px, 0.8vw, 10px); /* Responsive margin */
}

.header-toggle-btn.condensed i {
    font-size: clamp(8px, 0.9vw, 10px); /* Responsive icon size */
}

.header-toggle-btn.condensed .toggle-text {
    font-size: clamp(8px, 0.9vw, 10px); /* Responsive text size */
}


/* === Inflation Projection Popup Styles === */
#inflation-projection-popup .popup-container {
    width: 650px;
    max-width: 90%;
}

#inflation-projection-popup table {
    font-size: 13px;
}

#inflation-projection-popup th {
    background-color: var(--box-header-bg) !important;
    color: var(--box-header-color) !important;
    font-weight: 600 !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

#inflation-projection-popup .even-row td {
    background-color: #cadae7;
}

#inflation-projection-popup .odd-row td {
    background-color: #ffffff;
}

/* === Login Modal Styles (Moved from index.html) === */
.modal-overlay {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
}
.modal-content {
    background-color: white;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 400px;
    width: 90%;
    max-height: 100vh;
    overflow-y: auto;
    position: relative; /* For positioning the close button */
}
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 21px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    border: none;
    background: none;
}
.modal-close-btn:hover {
    color: #333;
}
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 18px;
    color: #333;
}
.modal-content p {
    font-size: 18px;
}
.modal-content h4 {
    font-size: 18px;
    font-weight:600;
}
.modal-content .login-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 15px;
}
.modal-content .login-form button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: #6a0dad; /* Match signup button */
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px; /* Space before divider */
}
.modal-content .divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    margin: 20px 0;
    font-size: 13px;
}
.modal-content .divider::before, .modal-content .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}
.modal-content .divider:not(:empty)::before { margin-right: .5em; }
.modal-content .divider:not(:empty)::after { margin-left: .5em; }

.modal-content .google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
    color: #333;
    box-sizing: border-box;
}
.modal-content .google-btn img {
    width: 20px;
    margin-right: 10px;
}

#table-mc-year-slider-container {
    margin-bottom: 10px;
    max-width: 400px; /* Limit width of the slider to a reasonable size */
    box-sizing: border-box;
    padding-right: 15px; /* Add some padding to match table insets */
}

/* Adjust styling for the progress message above the slider */
#mc-table-progress {
    margin-bottom: 15px;
}

.success-text {
    white-space: nowrap;
  }
  
/* Table tab placeholder styling */
.table-tabs-placeholder {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    font-style: italic;
    color: #666;
}

/* Monte Carlo Table Tabs Styling */
.table-mc-tabs-container {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #fff;
    overflow: hidden;
}

.table-mc-tabs-header {
    display: flex;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ddd;
}

.table-mc-tab-button {
    padding: 10px 15px;
    background: none;
    border: none;
    border-right: 1px solid #ddd;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    outline: none;
    transition: all 0.2s ease;
}

.table-mc-tab-button:hover {
    background-color: #e9ecf3;
    color: #333;
}

.table-mc-tab-button.active {
    background-color: #fff;
    color: #3498db;
    border-bottom: 2px solid #3498db;
    font-weight: 600;
}

.table-mc-tab-contents {
    background-color: #fff;
}

.table-mc-tab-content {
    display: none;
    padding: 10px;
}

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

/* Make sure the table inside tab has proper margins */
.table-mc-tab-content #results-container {
    margin-top: 0;
}

/* TableNew and Graph tabs need height constraints */
#tablenew-tab.active,
#table-tab.active,
#graph-tab.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important; /* Fill parent container */
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* NOTE: GraphNew tab layout CSS is in index.ejs embedded styles */

/* Override the inline style="padding: 20px;" on the inner div */
#tablenew-tab.active > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 20px !important; /* Keep original padding for consistency */
    height: 100% !important;
    box-sizing: border-box !important;
}

#tablenew-results {
    flex: 1 1 auto !important; /* Allow it to grow */
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important; /* Prevent overflow */
}

#tablenew-results .calculation-summary {
    flex: 0 0 auto !important;
    margin-bottom: 10px !important;
    background: #f5f5f5 !important;
    padding: 10px !important;
    border-radius: 5px !important;
}

/* Direct child div that contains .table-container */
#tablenew-results > div {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#tablenew-results .table-container {
    /* JavaScript will set height/max-height dynamically */
    overflow-y: auto !important; /* Enable vertical scrolling */
    overflow-x: auto !important; /* Enable horizontal scrolling */
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Removed obsolete .table-scroll-container rules - now using .table-container directly */

/* Column visibility controls in TableNew tab */
#tablenew-results .column-visibility-tabs {
    flex: 0 0 auto !important; /* Don't flex, maintain fixed height */
    margin: 10px 0 !important;
    padding: 8px !important;
    background: #f5f5f5 !important;
    border-radius: 4px !important;
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Ensure table gets proper space */
#tablenew-results .table-container table {
    width: 100%;
}

/* Sticky header for table in container */
#tablenew-results .table-container thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    /* Background and color are set inline in the HTML */
}

/* Make sure the table shows properly */
#tablenew-results .calculation-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

#tablenew-results .calculation-table thead {
    background: #2c5282;
}

#tablenew-results .calculation-table th {
    padding: 10px 12px;
    background: #2c5282;
    color: white;
    font-weight: 600;
    border: none;
}

#tablenew-results .calculation-table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

#tablenew-results .calculation-table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

#tablenew-results .calculation-table td {
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-top: none;
}

/* Placeholder styling for empty tabs */
.table-mc-tab-placeholder {
    padding: 30px;
    text-align: center;
    color: #888;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 20px;
}

.table-mc-tab-placeholder p {
    font-style: italic;
    margin: 0;
}

.saved-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size:14px;
}

.saved-items-table th,
.saved-items-table td {
    border: 1px solid #ddd;

    text-align: left;
    vertical-align: middle;

  
}

/* Only apply light gray background to th elements that are NOT using dark-table-header */
.saved-items-table thead tr:not(.dark-table-header) th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.saved-items-table .share-url-column {
    /* Potentially more specific styling for this column if needed */
}

.saved-items-table td .action-button {
    padding: 4px 8px; /* Adjust if too large */
    margin-right: 4px;
}
.saved-items-table td .action-button i {
    margin-right: 0; /* Remove margin if only icon */
}

/* ===== Polished Saved Plans Styling ===== */

/* Light background for the tab to make white cards pop */
#saved-plans-tab {
    background: #f7f9fc !important;
    padding: 20px !important;
}

#monthly-budget-tab {
    background: #f2f5f5 !important;
    padding: 20px !important;
}




/* Section card container */
.saved-plans-section {
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(18, 38, 63, 0.08);
    padding: 22px 22px 14px;
    margin-bottom: 24px;
}

/* Section header layout */
.saved-plans-section-header {
    margin-bottom: 16px;
}

.saved-plans-section-title {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 10px);
    font-size: clamp(14px, 1vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #24324a;
    margin-bottom: 6px;
}

.saved-plans-title-badge {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 6px);
    padding: clamp(4px, 0.5vw, 6px) clamp(6px, 0.8vw, 10px);
    border-radius: 999px;
    background: #eef5ff;
    color: #0b72e7;
    font-weight: 600;
    font-size: clamp(11px, 0.75vw, 0.85rem);
}

.saved-plans-title-badge.success {
    background: #eaf7f1;
    color: #1aa76c;
}

.saved-plans-section-subtitle {
    color: #637083;
    font-size: clamp(12px, 0.8vw, 0.92rem);
    margin-bottom: 12px;
}

/* Table wrapper with rounded corners */
.saved-plans-table-wrap {
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
}

/* Enhanced table styling */
.saved-items-table {
    border: none;
    margin-top: 0;
}

.saved-plans-table-wrap .saved-items-table th,
.saved-plans-table-wrap .saved-items-table td {
    border: none;
    border-bottom: 1px solid #f1f3f7;
    font-size: clamp(11px, 0.9vw, 14px);


}

.saved-plans-table-wrap .saved-items-table thead {
    background-color: var(--gray-500);
    background: var(--gray-500);
    position: relative;
}

.saved-plans-table-wrap .saved-items-table thead th {
    background: transparent !important;
    font-size: clamp(10px, 0.72vw, 0.82rem);
    letter-spacing: 0.3px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.saved-plans-table-wrap .saved-items-table thead th:first-child {
    border-top-left-radius: 12px;
}

.saved-plans-table-wrap .saved-items-table thead th:last-child {
    border-top-right-radius: 12px;
}

.saved-plans-table-wrap .saved-items-table tbody tr:hover {
    background: #fbfdff;
}

.saved-plans-table-wrap .saved-items-table tbody tr:last-child td {
    border-bottom: none;
}

/* Plan name link styling */
.saved-plans-table-wrap .saved-items-table .plan-name-link {
    color: #0b72e7;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.saved-plans-table-wrap .saved-items-table .plan-name-link:hover {
    text-decoration: underline;
}

/* Share URL input styling */
.saved-plans-table-wrap .share-url-input {
    width: 100%;
    max-width: 400px;
    border: 1px dashed #ccd6e3;
    background: #fbfdff;
    padding: 8px 10px;
    border-radius: 8px;
    color: #3b4a64;
    font-size: 0.92rem;
    font-family: 'Courier New', monospace;
}

/* Action buttons in table */
.saved-plans-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 6px);
    padding: clamp(4px, 0.6vw, 7px) clamp(6px, 0.8vw, 10px);
    border-radius: 8px;
    border: 1px solid #e5eaf1;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(10px, 0.75vw, 0.85rem);
    color: #2b3a55;
    transition: all 0.2s ease;
}

.saved-plans-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.saved-plans-icon-btn.share-btn {
    background: #eef5ff;
    color: #0b72e7;
    border-color: #d8e7ff;
}

.saved-plans-icon-btn.copy-btn {
    background: #f6f9ff;
    color: #2b3a55;
}

.saved-plans-icon-btn.delete-btn {
    background: #fff5f4;
    color: #df3c30;
    border-color: #ffd8d5;
}

/* Visit badge */
.saved-plans-visits-badge {
    display: inline-block;
    padding: clamp(2px, 0.3vw, 4px) clamp(6px, 0.8vw, 10px);
    border-radius: 999px;
    font-size: clamp(10px, 0.72vw, 0.82rem);
    font-weight: 700;
    background: #eef0f6;
    color: #46536a;
}

/* Info message styling */
.saved-plans-info-message {
    padding: clamp(10px, 1.2vw, 14px);
    background: #fbfdff;
    border: 1px dashed #d8e1ee;
    border-radius: 12px;
    color: #5a6b88;
    margin-bottom: 16px;
    font-size: clamp(12px, 0.8vw, 0.92rem);
    line-height: 1.5;
}

/* Controls area */
.saved-plans-controls {
    margin-bottom: 16px;
}

/* Saved Plans Tabs */
.saved-plans-tabs-container {
    margin: 16px 0;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.saved-plans-tab-button {
    padding: clamp(3px, 0.5vw, 6px) clamp(6px, 1vw, 12px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: clamp(10px, 1.2vw, 14px);
    font-weight: 500;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.5vw, 6px);
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    user-select: none;
}

.saved-plans-tab-button:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.saved-plans-tab-button.active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

.saved-plans-tab-button.active:hover {
    background: #0056b3;
}

.saved-plans-tab-content {
    display: none;
}

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

/* Placeholder styling */
.saved-plans-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: #637083;
}

.saved-plans-placeholder h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: #24324a;
}

.saved-plans-placeholder p {
    font-size: 1rem;
    line-height: 1.6;
}

.phase{
    font-size:14px;
    max-width:300px;
}

#alloc-explorer-explanation{
    font-size:12px;
}

/* Investment Details Popup */
#investment-popup {
    display: none; /* Hidden by default */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 25px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    min-width: 300px;
    max-width: 450px;
}

#investment-popup-content h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: .9em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.investment-popup-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse; /* Ensures borders look clean */
}

.investment-popup-table td {
    padding: 8px 5px;
    font-size: 0.7em;
}

.investment-popup-table tr:not(:last-child) td {
    border-bottom: 1px solid #f0f0f0; /* Light lines between rows, except the last */
}

.investment-popup-table td:last-child {
    text-align: right;
    font-weight: 500;
}


.investment-popup-close {
    display: block; /* Make it a block to center it easily */
    margin: 20px auto 0 auto; /* Center the button */
    padding: 10px 20px;
    background-color: #6a0dad; /* Using a purple from your signup page */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
}

.investment-popup-close:hover {
    background-color: #5a0bad; /* Darker purple on hover */
}

/* Reviews Tab Styles */
.reviews-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.reviews-header {
    text-align: center;
    margin-bottom: 40px;
}

.reviews-header h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.reviews-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

.reviews-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.google-reviews-container {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid #e1e5e9;
}

.reviews-placeholder {
    text-align: center;
    padding: 60px 40px;
}

.placeholder-content h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.placeholder-content p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.review-button {
    display: inline-block;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 0 10px;
}

.review-button.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.review-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.review-button.secondary {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
}

.review-button.secondary:hover {
    background: #667eea;
    color: white;
}

.fallback-testimonials {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 40px;
}

.fallback-testimonials h3 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-left: 4px solid #667eea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.testimonial-card .stars {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #ffc107;
}

.testimonial-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-card cite {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
    font-style: normal;
}

.reviews-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
}

.reviews-cta h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: white;
}

.reviews-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.reviews-cta .review-button.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.reviews-cta .review-button.secondary:hover {
    background: white;
    color: #667eea;
    border-color: white;
}

/* Mobile responsiveness for reviews */
@media (max-width: 768px) {
    .reviews-header h2 {
        font-size: 2rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .reviews-placeholder {
        padding: 40px 20px;
    }
    
    .fallback-testimonials,
    .google-reviews-container,
    .reviews-cta {
        padding: 30px 20px;
    }
    
    .review-button {
        display: block;
        margin: 10px 0;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Phase 3A: Budget Data Indicator Styles */
.budget-indicator {
    display: inline-block;
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    vertical-align: middle;
}

.budget-indicator:hover {
    opacity: 1;
}

/* Alternative text-based budget indicator for better accessibility */
.budget-indicator-text {
    font-size: 9px;
    color: #0066cc;
    font-weight: bold;
    margin-left: 4px;
    vertical-align: super;
}

/* Phase 3B: Budget Status Indicator Styles */
.budget-status-indicator {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #f1f8e9 100%);
    border: 1px solid #2196f3;
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 10px;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.1);
    transition: all 0.2s ease;
}

/* Phase 3C: Table Header Method Indicators */
.header-method-indicator {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 0px;
    vertical-align: super;
    white-space: nowrap;
    margin-right:6px;
}

.header-method-indicator.budget-driven {
    background-color: #4caf50;
    color: white;
    border: 1px solid #388e3c;
}

.header-method-indicator.inflation-adjusted {
    background-color: #ff9800;
    color: white;
    border: 1px solid #f57c00;
}

.budget-status-indicator:hover {
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.15);
    transform: translateY(-1px);
}

.budget-status-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.budget-status-icon {
    font-size: 14px;
    line-height: 1;
}

.budget-status-text {
    font-size: 12px;
    font-weight: 600;
    color: #1976d2;
}

.budget-status-type {
    font-size: 11px;
    color: #4caf50;
    font-weight: 500;
}

/* Responsive adjustments for budget status */

/* Performance Mode Indicator Styles */
.performance-indicator {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.95) 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.performance-indicator:hover {
    /* No transform changes - keep it centered */
}

.performance-indicator-icon {
    margin-right: 6px;
    font-size: 14px;
}

.performance-indicator-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.performance-level {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.performance-details {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
}

/* Performance level specific colors */
.performance-indicator.fast {
    border-color: #28a745;
}

.performance-indicator.fast .performance-level {
    color: #28a745;
}

.performance-indicator.medium {
    border-color: #ffc107;
}

.performance-indicator.medium .performance-level {
    color: #856404;
}

.performance-indicator.slow {
    border-color: #fd7e14;
}

.performance-indicator.slow .performance-level {
    color: #fd7e14;
}

.performance-indicator.very-slow {
    border-color: #dc3545;
}

.performance-indicator.very-slow .performance-level {
    color: #dc3545;
}

.performance-indicator.detecting {
    border-color: #6c757d;
    animation: pulse 1.5s ease-in-out infinite;
}

.performance-indicator.detecting .performance-level {
    color: #6c757d;
}

.performance-indicator.error {
    border-color: #dc3545;
}

.performance-indicator.error .performance-level {
    color: #dc3545;
}

@keyframes pulse {
    0% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    50% {
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }
    100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
}

/* Performance tooltip */
.performance-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
}

.performance-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 16px;
    border: 5px solid transparent;
    border-bottom-color: #333;
}

.performance-indicator:hover .performance-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Hide on small screens */
@media (max-width: 768px) {
    .performance-indicator {
        display: none;
    }
}
@media (max-width: 1200px) {
    .budget-status-text {
        font-size: 11px;
    }
    
    .budget-status-type {
        font-size: 10px;
    }
}

@media (max-width: 900px) {
    .budget-status-indicator {
        padding: 4px 8px;
    }
    
    .budget-status-content {
        gap: 4px;
    }
}

/* Social Security Trust Fund section slider styling */
.ss-reduction-content .slider-container {
    min-width: 380px; /* Ensure enough width for label + slider + input */
    width: 100%;
}

.ss-reduction-content {
    overflow: visible; /* Allow content to expand as needed */
}

/* Disabled slider styling */
.slider-container.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.slider-container.disabled .slider-label {
    color: #6c757d !important;
}

.slider-container.disabled input,
.slider-container.disabled input[type="range"] {
    cursor: not-allowed !important;
}

.slider-container.disabled button {
    cursor: not-allowed !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* Footer Styles */
footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #ecf0f1;
    padding: 40px 0 30px;
    margin-top: 60px;
    border-top: 4px solid #3498db;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-container p {
    margin: 0;
    font-size: 14px;
    color: #bdc3c7;
    letter-spacing: 0.5px;
}

.footer-nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.footer-nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px 10px;
    border-radius: 4px;
}

.footer-nav a:hover {
    color: #3498db;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #3498db;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.footer-nav a:hover::after {
    width: 80%;
}

/* Add separator between links */
.footer-nav a:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Responsive footer */
@media (max-width: 768px) {
    footer {
        padding: 30px 0 20px;
        margin-top: 40px;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 15px;
    }

    .footer-nav a:not(:last-child)::before {
        display: none;
    }

    .footer-container p {
        font-size: 13px;
    }

    .footer-nav a {
        font-size: 13px;
        padding: 8px 15px;
    }
}

/* Add some visual interest with a subtle pattern */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px
        );
    pointer-events: none;
}

/* ============================================
   POPUP WINDOW MODE STYLES
   ============================================ */

/* Hide unnecessary UI elements in popup mode */
body.popup-mode .header,
body.popup-mode .header-condensed,
body.popup-mode .main-nav,
body.popup-mode .controls-panel,
body.popup-mode .tabs-header {
    display: none !important;
}

/* Make visualization panel full-width in popup mode */
body.popup-mode .visualization-panel {
    width: 100% !important;
    flex: 1 !important;
    padding: 10px !important;
    margin: 0 !important;
}

/* Remove padding from main content in popup mode */
body.popup-mode .main-content {
    padding: 0 !important;
}

/* Ensure content fills the window in popup mode */
body.popup-mode {
    overflow: auto;
}

body.popup-mode .content {
    height: 100vh;
    overflow-y: auto;
}

/* Tab content should fill available space in popup mode */
body.popup-mode .tab-content.active {
    height: 100%;
    flex: 1;
}

.clamp15 {
    font-size:clamp(5px, 1.1vw, 15px);
}

.clamp16 {
    font-size:clamp(8px, 1.1vw, 16px);
    line-height:clamp(6px, 1.1vw, 16px);
    font-family:Roboto, sans-serif;
}

.clamp20 {
    font-size:clamp(11px, 1.1vw, 20px);
}

.clamp18 {
    font-size:clamp(11px, 1.1vw, 18px);
}

/* ========================================
   Responsive Slider Styles for Tablets
   ======================================== */

/* Hide range sliders and increase input font size on smaller screens */
@media (max-width: 1100px) {
    /* Hide the range slider on tablets and smaller devices */
    .slider-control {
        display: none !important;
    }

    /* Increase font size for slider input fields for better touch interaction */
    .slider-input input[type="text"] {
        font-size: 18px !important;
    }

    /* Make input fields expand to fill the space when slider is hidden */
    .slider-input {
        width: 180px !important;
    }

    .slider-input input[type="text"] {
        width: 160px !important;
    }

    /* Increase font size for Add box checkboxes on tablets/smaller screens */
    .checkbox-item {
        font-size: 16px !important;
    }
}

/* ===== Scroll Down Notification Animation ===== */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-15px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
        padding-top: 12px;
        padding-bottom: 12px;
        margin-top: 15px;
    }
}

/* Scroll down notification styles - appears in Add box */
.scroll-down-notification {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInFromTop 0.4s ease-out;
    margin-top: 15px;
    border-left: 4px solid #2e7d32;
}

.scroll-down-notification i {
    font-size: 18px;
    flex-shrink: 0;
}

.scroll-down-notification span {
    line-height: 1.4;
    flex: 1;
}


/* Fix for Roth Conversion fixed amount slider wrapping */
#roth-conversion-fixed-amount-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* ============================================
   ROTH CONVERSION OPTIMIZATION STYLES
   ============================================ */

/* Optimize section container */
.optimize-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-300);
}

/* Optimize button */
#roth-optimize-button {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(30, 106, 177, 0.2);
}

#roth-optimize-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-700) 100%);
    box-shadow: 0 4px 8px rgba(30, 106, 177, 0.3);
    transform: translateY(-1px);
}

#roth-optimize-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(30, 106, 177, 0.2);
}

#roth-optimize-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#roth-optimize-button i {
    margin-right: 6px;
}

/* Progress bar container */
#roth-optimize-progress {
    font-size: 12px;
}

#roth-optimize-progress .progress {
    background-color: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

#roth-optimize-progress-bar {
    background: linear-gradient(90deg, var(--brand-600), var(--brand-700));
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
}

/* Results container */
#roth-optimize-results .alert {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    animation: slideInFromTop 0.3s ease-out;
}

#roth-optimize-results .alert-success {
    background: linear-gradient(135deg, var(--success-50) 0%, var(--success-100) 100%);
    border: 1px solid var(--success-300);
    color: var(--gray-800);
}

#roth-optimize-results .alert-warning {
    background: linear-gradient(135deg, #FFF7ED 0%, var(--warning-100) 100%);
    border: 1px solid #FCD34D;
    color: var(--gray-800);
}

#roth-optimize-results .alert-info {
    background: linear-gradient(135deg, #EFF6FF 0%, var(--brand-100) 100%);
    border: 1px solid var(--brand-300);
    color: var(--gray-800);
}

#roth-optimize-results .alert-danger {
    background: linear-gradient(135deg, var(--danger-50) 0%, var(--danger-100) 100%);
    border: 1px solid var(--danger-200);
    color: var(--gray-800);
}

/* Chart container */
#roth-optimize-chart {
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Animation for results appearing */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Portfolio Data Column Styles
   ============================================ */

.portfolio-data-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: white;
}

.portfolio-data-column.hidden {
    display: none;
}

/* Column Header */
.portfolio-data-column-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #1E6AB1, #2980b9);
    color: white;
    border-bottom: 1px solid #e0e0e0;
}

.portfolio-data-column-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-data-column-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.portfolio-data-column-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

.portfolio-data-column-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.portfolio-data-column-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
    line-height: 1;
}

.portfolio-data-column-close:hover {
    opacity: 1;
}

/* Age Slider Control Area */
.portfolio-data-column-slider {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.portfolio-data-column-slider label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.portfolio-age-slider {
    flex: 1;
    min-width: 80px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
}

.portfolio-age-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #1E6AB1;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.portfolio-age-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.portfolio-age-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #1E6AB1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.portfolio-age-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.portfolio-age-slider::-moz-range-track {
    background: #ddd;
    border-radius: 3px;
    height: 6px;
}

.portfolio-age-display {
    font-size: 12px;
    font-weight: 600;
    color: #1E6AB1;
    min-width: 55px;
    text-align: right;
}

/* Column Content */
.portfolio-data-column-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

/* Placeholder when no data selected */
.portfolio-data-column-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

.portfolio-data-column-placeholder .placeholder-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.portfolio-data-column-placeholder .placeholder-text {
    font-size: 12px;
    line-height: 1.4;
}

/* Toggle button to show column when hidden */
.portfolio-column-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #1E6AB1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, transform 0.1s;
    z-index: 100;
}

.portfolio-column-toggle-btn:hover {
    background: #155891;
    transform: translateY(-1px);
}

.portfolio-column-toggle-btn:active {
    transform: translateY(0);
}

.portfolio-column-toggle-btn i {
    font-size: 14px;
}

/* Tree Section Styles */
.portfolio-tree-section {
    margin-bottom: 2px;
}

.portfolio-tree-section:last-child {
    margin-bottom: 0;
}

/* Section Header (top-level categories) */
.portfolio-tree-section-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.portfolio-tree-section-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Tree Row */
.portfolio-tree-row {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.portfolio-tree-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

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

/* Chevron Icon */
.portfolio-tree-chevron {
    width: 14px;
    font-size: 8px;
    color: #6c757d;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    cursor: pointer;
}

/* Spacer for non-expandable rows */
.portfolio-tree-spacer {
    width: 14px;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Label */
.portfolio-tree-label {
    flex: 1;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Value */
.portfolio-tree-value {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    min-width: 70px;
    margin-left: 8px;
}

/* Children Container (for animations) */
.portfolio-tree-children {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* Depth-based styling */
.portfolio-tree-depth-0 {
    font-size: 13px;
    font-weight: 600;
}

.portfolio-tree-depth-1 {
    padding-left: 12px;
    font-size: 12px;
}

.portfolio-tree-depth-2 {
    padding-left: 24px;
    font-size: 11px;
}

.portfolio-tree-depth-3 {
    padding-left: 36px;
    font-size: 11px;
}

.portfolio-tree-depth-4 {
    padding-left: 48px;
    font-size: 10px;
}

/* Node within children - add left border accent */
.portfolio-tree-node {
    border-left: 2px solid transparent;
    margin-left: 6px;
}

.portfolio-tree-section > .portfolio-tree-children > .portfolio-tree-node {
    border-left-color: #e0e0e0;
}

/* ========================================
   GRAPH SELECTOR TABS
   Matches the Budget Calculator tab style
   ======================================== */

.graph-selection-tabs {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
    flex-wrap: wrap;
}

.graph-tab {
    padding: 10px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.graph-tab:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.graph-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    font-weight: 600;
}

.graph-tab i {
    font-size: 13px;
}

/* Responsive adjustments for graph tabs */
@media (max-width: 1300px) {
    .graph-tab {
        padding: 8px 14px;
        font-size: 13px;
    }
    .graph-tab i {
        font-size: 12px;
    }
}

@media (max-width: 1100px) {
    .graph-tab {
        padding: 6px 10px;
        font-size: 12px;
        gap: 4px;
    }
    .graph-tab i {
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .graph-selection-tabs {
        gap: 2px;
    }
    .graph-tab {
        padding: 5px 8px;
        font-size: 11px;
        gap: 3px;
    }
    .graph-tab i {
        font-size: 10px;
    }
}

/* ========================================
   MONTE CARLO SUB-TABS
   Sub-tabs for switching between Full Results and Percentiles views
   ======================================== */

.mc-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
}

.mc-sub-tab {
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mc-sub-tab:hover:not(.active) {
    background: #e9ecef;
    border-color: #ccc;
}

.mc-sub-tab.active {
    background: #1E6AB1;
    color: white;
    border-color: #1E6AB1;
}

/* Responsive adjustments for Monte Carlo sub-tabs */
@media (max-width: 1100px) {
    .mc-sub-tab {
        padding: 5px 12px;
        font-size: 12px;
    }
}

@media (max-width: 900px) {
    .mc-sub-tabs {
        gap: 3px;
    }
    .mc-sub-tab {
        padding: 4px 10px;
        font-size: 11px;
    }
}