/* ======= Modals ======= */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-background);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    z-index: var(--z-index-modal);
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--modal-glass-background);
    border-radius: var(--radius-large);
    padding: var(--space-8);
    max-width: var(--modal-max-width-default);
    width: var(--modal-content-width);
    position: relative;
    box-shadow: var(--shadow-large);
    border: var(--border-width-standard) solid var(--glass-border-color);
    color: var(--color-text-white-primary);
    backdrop-filter: blur(var(--modal-content-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-content-backdrop-blur));
}

/* Specific styling for disclaimer modal to make it wider */
#disclaimer-modal .modal-content {
    max-width: var(--modal-max-width-disclaimer);
    width: 90%;
    /* Constrain to the viewport and scroll internally on short screens. Without
       this the About content grows taller than the screen with no way to reach
       the top or the Reset footer (mirrors the cash-flow modal above). */
    max-height: 90vh;
    overflow-y: auto;
}

/* The preset data disclaimer blocks the Add/Edit Asset modal it is opened over,
   so it must stack above it (both share the base modal z-index otherwise). */
#preset-disclaimer-modal {
    z-index: calc(var(--z-index-modal) + 10);
}

/* Footer action row inside the About modal (holds the Reset data button). */
.modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--border-width-standard) solid var(--glass-border-color);
}

/* Cash flow modal specific styling */
#cash-flow-modal .modal-content {
    max-width: var(--modal-max-width-disclaimer);
    width: 85%;
    max-height: 90vh;
    overflow-y: auto;
}

#cash-flow-modal .modal-body {
    padding: 0;
}

/* Let the two columns share the row after the gap (the base 0 0 50% plus the
   flex gap overflows and eats the right padding). Mirrors the disclaimer modal. */
#cash-flow-modal .modal-left-column,
#cash-flow-modal .modal-right-column {
    flex: 1;
}

/* Editable growth fields: keep their fixed width and stop them shrinking below
   the digits (the shared .input-group rule sets flex:1/min-width:0 which clips). */
#cash-flow-modal .input-group .no-spinner {
    flex: 0 0 auto;
    text-align: center;
}

#cash-flow-modal .styled-table {
    width: 100%;
    margin-bottom: var(--space-6);
}

#cash-flow-modal .chart-item {
    flex: 1;
    min-width: 0;
}

/* Target the Plotly chart divs only -- a bare `.chart-item > div` also matched
   the toggle and stretched it to the chart height. */
#cash-flow-modal .chart-item > div[id^="modal-plotly-"] {
    width: 100%;
    /* Match the Plotly layout height (--chart-container-height) so the SVG is
       fully contained; a shorter box lets the chart overflow onto the text. */
    height: 350px;
}

#cash-flow-modal .section-subtitle {
    color: var(--color-text-white-primary);
    margin-bottom: var(--space-4);
}

#cash-flow-modal .form-group {
    margin-bottom: var(--space-6);
}

#cash-flow-modal .input-group {
    display: flex;
    align-items: center;
}

#cash-flow-modal .currency-symbol {
    color: var(--color-text-white-primary);
    margin-right: var(--space-1);
}


/* Ensure table text is visible in modal */
#cash-flow-modal .styled-table th,
#cash-flow-modal .styled-table td {
    color: var(--color-text-white-primary);
}

/* Modal scrollbar styling using existing variables */
#cash-flow-modal .modal-content::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

#cash-flow-modal .modal-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

#cash-flow-modal .modal-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: var(--radius-small);
}

#cash-flow-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color-hover);
}

/* Ensure all text elements in modals are white */
.modal-content h2,
.modal-content h3,
.modal-content p,
.modal-content label,
.modal-content small,
.modal-content input,
.modal-content .btn {
    color: var(--color-text-white-primary);
}

/* Ensure input text and placeholder text is white */
.modal-content input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.modal-content input::placeholder {
    color: var(--modal-input-placeholder-color);
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    font-size: var(--modal-close-font-size);
    cursor: pointer;
    color: var(--color-text-white-primary);
    transition: var(--transition-standard);
}

.modal-close:hover {
    color: var(--color-text-white-primary);
    opacity: var(--modal-close-hover-opacity);
}

/* Modal sizes */
.modal-content.small {
    max-width: var(--modal-max-width-small);
}

.modal-content.medium {
    max-width: var(--modal-max-width-medium);
}

.modal-content.large {
    max-width: var(--modal-max-width-large);
}

/* Modal animations */
.modal-content {
    animation: modalFadeIn var(--modal-animation-duration) ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(var(--modal-animation-y));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======= Modal Two Column Layout ======= */
.modal-two-column-layout {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.modal-left-column {
    flex: 0 0 50%;
    min-width: var(--modal-left-column-min-width);
}

.modal-right-column {
    flex: 0 0 50%;
    border-left: 1px solid var(--glass-border-color);
    padding-left: var(--space-6);
}

/* Specific styling for disclaimer modal two-column layout */
#disclaimer-modal .modal-left-column,
#disclaimer-modal .modal-right-column {
    flex: 1;
}

#disclaimer-modal .modal-right-column {
    padding-left: var(--space-6);
}

/* Ensure proper text styling in disclaimer modal columns */
#disclaimer-modal .modal-left-column h2,
#disclaimer-modal .modal-left-column h3,
#disclaimer-modal .modal-left-column p,
#disclaimer-modal .modal-right-column h2,
#disclaimer-modal .modal-right-column h3,
#disclaimer-modal .modal-right-column p {
    color: var(--color-text-white-primary);
    margin-bottom: var(--space-4);
}

#disclaimer-modal .modal-left-column h2,
#disclaimer-modal .modal-right-column h2 {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

#disclaimer-modal .modal-left-column h3,
#disclaimer-modal .modal-right-column h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

/* Styling for Preloaded Mix List */
.preloaded-mix-instructions {
    font-size: var(--font-size-small);
    color: var(--color-text-white-secondary);
    margin-bottom: var(--space-3);
}

/* Footer styling */
.modal-footer {
    border-top: 1px solid var(--glass-border-color);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    text-align: right;
}

/* ======= Small Screen Overlay ======= */
.small-screen-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    
    /* Use ben_affleck.jpg as the background */
    background-image: url('../ben_affleck.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Add overlay effect similar to modal overlay */
    background-color: var(--modal-overlay-background);
    background-blend-mode: overlay;
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    
    /* Position content at bottom stretching full width */
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.small-screen-overlay.active {
    display: flex;
}

/* Content container within the overlay */
.small-screen-overlay .content-container {
    position: relative;
    width: 100%;
    max-width: none;
    padding: var(--space-6) var(--space-8);

    /* Use the same glassmorphic styling as modal content */
    background-color: var(--modal-glass-background);
    backdrop-filter: blur(var(--modal-content-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-content-backdrop-blur));
    box-shadow: var(--shadow-large);

    /* Text styling */
    color: var(--color-text-white-primary);
    font-family: var(--font-primary);
    text-align: left;
    line-height: var(--line-height-base);
}

.small-screen-overlay p {
    margin-bottom: var(--space-4);
    color: var(--color-text-white-primary);
}

.small-screen-overlay p:first-child {
    font-size: var(--font-size-lead);
    font-weight: normal;
    margin-bottom: var(--space-6);
}

.small-screen-overlay p:last-child {
    margin-bottom: 0;
}

/* Wider modal for asset form to accommodate two-column radio buttons */
#asset-modal .modal-content {
    max-width: 1500px;
    width: 90%;
    max-height: 90vh;             /* Use max-height instead of fixed height */
    overflow: hidden;             /* Prevent the whole modal from scrolling */
    display: flex;                /* Use flexbox instead of grid for better control */
    flex-direction: column;       /* Stack header, body, footer vertically */
}

/* Modal header area (title and intro text with action button) - FIXED OUTSIDE SCROLL */
#asset-modal .modal-header {
    padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8); /* Standard modal padding on sides */
    border-bottom: 1px solid var(--glass-border-color);
    flex-shrink: 0;               /* Header should not shrink */
    background-color: transparent; /* Fully transparent to match modal content */
}

#asset-modal .modal-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
}

#asset-modal .modal-header-text {
    flex: 1;
}

#asset-modal .modal-header-text h2 {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text-white-primary);
}

#asset-modal .modal-header-text p {
    margin: 0;
    color: var(--color-text-white-secondary);
}

#asset-modal .modal-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Close (X) restyled to the app's button chrome -- the bare glyph looked out of place.
   A small rounded control with the standard transparent-input border/background, matching
   the vehicle/option buttons elsewhere in the modal. */
#asset-modal .modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    z-index: 2;
    border: var(--border-width-standard) solid var(--form-input-border-transparent);
    border-radius: var(--radius-medium);
    background-color: var(--form-input-bg-transparent);
    color: var(--color-text-white-secondary);
}

#asset-modal .modal-close:hover {
    background-color: var(--custom-select-option-bg-hover);
    border-color: var(--color-primary);
    color: var(--color-text-white-primary);
    opacity: 1; /* override the global .modal-close:hover dimming */
}

/* The modal body contains our content and scrolls independently */
#asset-modal .modal-body {
    flex: 1;                      /* Take remaining space after header */
    min-height: 0;                /* Allow shrinking for flexbox */
    overflow-y: auto;             /* Allow scrolling when content overflows */
    overflow-x: hidden;           /* Prevent horizontal scrolling */
    padding: 0;                   /* Remove default padding */
    /* Reserve the scrollbar gutter on BOTH sides so the right-hand gap matches the left.
       Without this the vertical scrollbar eats into the right padding only, leaving the
       view's horizontal padding visibly asymmetric. */
    scrollbar-gutter: stable both-edges;
}

/* The main content area that contains the two-column layout */
#asset-modal .modal-content-area {
    padding: var(--space-4) var(--space-8); /* Standard modal padding on sides */
    min-height: min-content;      /* Allow natural content height */
}

/* Add scrollbar styling for the modal body */
#asset-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#asset-modal .modal-body::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color-modal);
    border-radius: 4px;
}

#asset-modal .modal-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 4px;
}

#asset-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color-hover);
}

/* The two-column layout within the modal content area */
#asset-modal .modal-two-column-layout {
    display: flex;
    gap: var(--space-6);
    min-height: min-content;      /* Allow natural content height */
}

/* Left column - never scrolls, always visible.
   The two bases sum to 100%, so each gives up half the inter-column gap (var(--space-6))
   to leave room for it; without this the columns overflow by the gap width and the right
   column eats into the right padding, making the horizontal padding look asymmetric. */
#asset-modal .modal-left-column {
    flex: 0 0 calc(28% - var(--space-6) / 2);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Right column - no longer needs individual scrolling */
#asset-modal .modal-right-column {
    flex: 0 0 calc(72% - var(--space-6) / 2);
    border-left: 1px solid var(--glass-border-color);
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
}

#asset-modal .modal-right-column .form-group {
    flex: none; /* Don't flex, let it be natural height */
    display: flex;
    flex-direction: column;
}

/* Two-column layout for radio buttons in asset class selector */
.radio-button-group.column.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    max-height: none; /* Remove height restriction for two-column layout */
    overflow: visible; /* Remove scrolling since we have two columns */
}

.radio-button-group.column.two-column .radio-label-block {
    margin-bottom: var(--space-1);
    padding: var(--space-2) var(--space-3);
}

/* ======= Unified asset class selector ======= */
/* Header row: the "Asset Class" heading on the left, action cluster top-right */
#asset-modal .acs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

#asset-modal .acs-toolbar-heading {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white-primary);
}

/* Hint line below the header row */
#asset-modal .acs-hint {
    font-size: var(--font-size-small);
    color: var(--color-text-white-tertiary);
    margin: 0 0 var(--space-3);
}

/* Right-hand action cluster: total chip, vehicle toggle, preset button */
#asset-modal .acs-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

#asset-modal .acs-preset-btn {
    background-color: rgba(var(--color-secondary-rgb), var(--selector-btn-bg-opacity));
    border: 1px solid var(--form-input-border-transparent);
    color: var(--color-text-white-secondary);
    white-space: nowrap;
}

#asset-modal .acs-total {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white-secondary);
}

#asset-modal .acs-total.success {
    color: var(--color-success);
}

#asset-modal .acs-total.error {
    color: var(--color-error);
}

/* Grid / preset-list share one fixed area: the grid defines the height (it
   stays in flow under visibility:hidden when presets are open) and the preset
   list overlays it and scrolls, so the modal never resizes between views. */
#asset-modal .acs-stack {
    position: relative;
}

#asset-modal .acs-preset-list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;             /* the two inner columns scroll, not this box */
}

/* Two-column master/detail: managers on the left, that manager's funds right */
#asset-modal .acs-preset-columns {
    display: flex;
    gap: var(--space-2);
    flex: 1;
    min-height: 0;                /* allow the columns to scroll within the box */
}

#asset-modal .acs-preset-managers,
#asset-modal .acs-preset-funds {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Distinct divider between the scrolling manager list and the funds list */
#asset-modal .acs-preset-managers {
    border-right: 1px solid var(--glass-border-color);
    padding-right: var(--space-2);
}

/* Manager / fund buttons reuse .acs-option sizing; left-align their text */
#asset-modal .acs-preset-manager,
#asset-modal .acs-preset-fund {
    justify-content: flex-start;
    text-align: left;
}

/* Long fund names truncate with an ellipsis; the full name is on the button's title attribute */
#asset-modal .acs-preset-fund-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Managed-fund / KiwiSaver vehicle filter. Styled to match the modal's
   Asset Type (Lifestyle / Investment) toggle (.radio-label-inline) for
   consistency: a leading label and two separated buttons, the active one
   carrying the selected-bg + primary border/ring rather than a flat fill. */
#asset-modal .acs-preset-vehicle-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

#asset-modal .acs-vehicle-label {
    font-size: var(--font-size-small);
    color: var(--color-text-white-secondary);
    white-space: nowrap;
}

#asset-modal .acs-vehicle-btn {
    padding: var(--space-1) var(--space-3);
    border: var(--border-width-standard) solid var(--form-input-border-transparent);
    border-radius: var(--radius-medium);
    background-color: var(--form-input-bg-transparent);
    color: var(--color-text-white-secondary);
    font-size: var(--font-size-small);
    white-space: nowrap;
    transition: var(--transition-standard);
}

#asset-modal .acs-vehicle-btn:hover {
    background-color: var(--custom-select-option-bg-hover);
}

#asset-modal .acs-vehicle-btn.active {
    background-color: var(--custom-select-option-bg-selected);
    border-color: var(--color-primary);
    color: var(--color-text-white-primary);
    box-shadow: 0 0 0 var(--radio-label-box-shadow-width) var(--color-primary);
}

#asset-modal .acs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

#asset-modal .acs-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 2.75rem; /* Reserve room so options keep their height when the % input appears */
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--form-input-border-transparent);
    border-radius: var(--radius-medium);
    background-color: var(--form-input-bg-transparent);
    color: var(--color-text-white-secondary);
    cursor: pointer;
    transition: var(--transition-standard);
}

#asset-modal .acs-option:hover {
    background-color: var(--radio-label-hover-bg);
}

#asset-modal .acs-option.selected {
    background-color: var(--custom-select-option-bg-selected);
    border-color: var(--color-primary);
    color: var(--color-text-white-primary);
}

/* Swatch + label group; keeps the label left and the % input right */
#asset-modal .acs-option-main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Colour swatch matching the asset allocation chart slice for this class */
#asset-modal .acs-option-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

#asset-modal .acs-option-label {
    line-height: 1.3;
}

#asset-modal .acs-option-label small {
    opacity: var(--form-small-opacity);
    font-size: var(--font-size-small);
    color: var(--color-text-white-tertiary);
}

#asset-modal .acs-option-pct {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

#asset-modal .acs-pct-input {
    width: 60px;
    text-align: right;
    padding: 0 var(--space-2);
    font-size: var(--font-size-small);
    /* Override the global input height (42px). With the global border-box reset
       the option's 2.75rem min-height is its total, leaving ~26px of content
       area; the input must fit inside that or the selected option grows taller
       than its unselected neighbours and the grid heights jump. */
    height: 1.5rem;
    min-height: 0;
}

/* Locked (manually typed) values are emphasised; floating values are lighter */
#asset-modal .acs-pct-input.locked {
    border-color: var(--color-primary);
    color: var(--color-text-white-primary);
    font-weight: var(--font-weight-medium);
}

#asset-modal .acs-pct-input.floating {
    opacity: 0.6;
}

#asset-modal .acs-pct-symbol {
    font-size: var(--font-size-small);
    color: var(--color-text-white-secondary);
}

/* Hide number input spinner arrows on the percentage inputs */
#asset-modal .acs-pct-input::-webkit-outer-spin-button,
#asset-modal .acs-pct-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#asset-modal .acs-pct-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ======= Asset mix preview (left-column live allocation bar) ======= */
/* The preview group grows to fill the remaining left-column height so the
   vertical bar runs down to the bottom of the column. */
#asset-modal #modal-asset-mix-preview {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#asset-modal .asset-mix-preview-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-white-primary);
    flex-shrink: 0;
}

/* Donut preview: the Plotly chart fills the remaining column height. A floor
   keeps the donut legible when the column is short. */
#asset-modal .asset-mix-chart {
    width: 100%;
    flex: 1;
    min-height: 180px;
}