/* Grid styling adapted from legacy grid-system.css
   Placed into wwwroot/css so it can be iterated without touching the grid code.
*/
:root{
    --rp-primary: #2E5C3E;
    --rp-secondary: #4A7C59;
    --rp-accent: #6B9B7A;
    --rp-light: #E8F5E8;
    --rp-bg: #FFFFFF;
    --rp-muted-bg: #F8FDF8;
    --rp-border: #E6F0EA;
    --rp-text: #18361A;
    --rp-muted-text: #556B56;
    --rp-cell-padding: 8px 10px;
    --rp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Backwards-compatible aliases used elsewhere in the codebase */
    --grid-primary-color: var(--rp-primary);
    --grid-secondary-color: var(--rp-secondary);
    --grid-accent-color: var(--rp-accent);
    --grid-light-green: var(--rp-light);
    --grid-background-color: var(--rp-bg);
    --grid-text-dark: var(--rp-text);
    --grid-border-color: var(--rp-border);
    --grid-white: var(--rp-bg);
}

/* Basic table layout used by the life-stage parser renderHeader output */
.rp-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--rp-font);
    color:var(--rp-text);
    font-size:13px;
    box-sizing:border-box;
}

.rp-table thead th{
    padding:10px 12px;
    border-bottom:1px solid var(--rp-border);
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    overflow:hidden;
}

/* Two-tone header: top row darker, subsequent header rows slightly lighter */
.rp-table thead tr:first-child th{
    background: linear-gradient(180deg, rgba(46,92,62,0.95), rgba(46,92,62,0.9));
    color:#fff;
    font-weight:600;
    font-size:13px;
}
.rp-table thead tr:nth-child(2) th,
.rp-table thead tr:nth-child(3) th{
    background: linear-gradient(180deg, rgba(74,124,89,0.95), rgba(74,124,89,0.9));
    color:#fff;
    font-weight:500;
}

/* subtle separators between header groups */
.rp-table thead th{ border-right:1px solid rgba(255,255,255,0.06); }
.rp-table thead th:last-child{ border-right:none; }

/* body cells */
.rp-table tbody td{
    padding: var(--rp-cell-padding);
    border:1px solid #eef6ef;
    background:var(--rp-bg);
    vertical-align:middle;
    font-size:13px;
}

/* alternating row shading (very subtle) */
.rp-table tbody tr:nth-child(odd) td{ background: rgba(248,253,248,0.6); }
.rp-table tbody tr:hover td{ background: rgba(230,245,230,0.6); }

/* fixed date column header: replace text with calendar icon visually */
.rp-table-fixed-date th{
    position:relative;
    /* hide the word "Date" visually but keep accessible for screen readers */
    text-indent:-9999px;
}
.rp-table-fixed-date th::before{
    /* Use an inline SVG calendar icon so it matches the site's icon style (uses currentColor).
       Keeps accessibility by leaving the header text available to screen readers but visually hidden.
    */
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Let the icon inherit the text color so it matches header text (white in dark header) */
    color: white;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2' ry='2'></rect><path d='M16 3v4M8 3v4M3 11h18'></path></svg>");
}

/* make sure the locked date column still shows the date values centered */
.rp-table-fixed-date td{ text-align:center; }

/* numeric/currency cells use monospaced font for neat alignment */
.rp-table td.numeric,
.rp-table td.currency,
.rp-table td.shares{
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    text-align:right;
    color:var(--rp-primary);
    font-weight:500;
}

/* small visual polish for empty header cells */
.rp-table thead th:empty{ background:transparent; }

/* vertical scroller container next to grid (created by JS) */
[data-rp-vertical-scroller]{
    display:block;
    width:20px;
    min-width:20px;
    box-sizing:border-box;
}
[data-rp-vertical-scroller] input[type=range]{
    opacity:0.65;
}

/* make collaborator containers sit better when wrapped together */
#accountsTableContainer, #holdingsTableContainer{
    background:transparent;
}

/* Reserve space for custom horizontal scroller so it doesn't get clipped */
#outputsPanel, .outputs-panel {
    box-sizing: border-box;
    padding-bottom: 12px; /* room for horizontal scroller + gap */
}

#accountsTableContainer, #holdingsTableContainer {
    box-sizing: border-box;
    padding-bottom: 12px; /* small internal spacing so scroller has breathing room */
}

/* When the outputs panel is collapsed or small, avoid forcing extra whitespace */
.outputs-panel:not(.active) {
    padding-bottom: 12px;
}

/* small responsive tweaks */
@media (max-width:768px){
    .rp-table thead th{ padding:8px; font-size:12px; }
    .rp-table tbody td{ padding:6px; font-size:12px; }
}

/* Accessibility focus outlines */
.rp-table td:focus, .rp-table th:focus{ outline:2px solid rgba(46,92,62,0.14); outline-offset:0; }

/* provide a subtle drop shadow to the right (main) table to separate from the locked date column */
.rp-table{ box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset; }

/* small helper for indicator cells used in Page2 outputs rendering */
.indicator-up{ color:green; font-weight:600; }
.indicator-down{ color:red; font-weight:600; }
.indicator-flat{ color:#666; }

/* Custom scrollbars for grid tables to match slider aesthetics */
/* Targets the wrappers produced by LifeStageParser inside the accounts/holdings containers */
#accountsTableContainer > div, #holdingsTableContainer > div {
    scrollbar-width: thin;
    scrollbar-color: var(--grid-accent-color) var(--grid-light-green);
}

#accountsTableContainer > div::-webkit-scrollbar,
#holdingsTableContainer > div::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

#accountsTableContainer > div::-webkit-scrollbar-track,
#holdingsTableContainer > div::-webkit-scrollbar-track {
    background: var(--grid-light-green);
    border-radius: 10px;
    margin: 4px 0;
}

#accountsTableContainer > div::-webkit-scrollbar-thumb,
#holdingsTableContainer > div::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--grid-primary-color), var(--grid-secondary-color));
    border-radius: 10px;
    border: 3px solid var(--grid-white);
    box-shadow: 0 2px 8px rgba(46, 92, 62, 0.28);
}

#accountsTableContainer > div::-webkit-scrollbar-thumb:hover,
#holdingsTableContainer > div::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--grid-secondary-color), var(--grid-primary-color));
}

#accountsTableContainer > div::-webkit-scrollbar-thumb:active,
#holdingsTableContainer > div::-webkit-scrollbar-thumb:active {
    box-shadow: 0 4px 12px rgba(46, 92, 62, 0.36);
}

/* Style the custom vertical scroller input placed by the renderer */
[data-rp-vertical-scroller] { display:flex; align-items:center; justify-content:center; }
[data-rp-vertical-scroller] input[type="range"]{
    -webkit-appearance: none !important;
    appearance: none !important;
    width:100px; height:6px; background:var(--grid-light-green); border-radius:6px; outline:none; cursor:pointer;
}
[data-rp-vertical-scroller] input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--grid-primary-color), var(--grid-secondary-color)) !important;
    border: 3px solid var(--grid-white) !important;
    box-shadow: 0 2px 8px rgba(46, 92, 62, 0.28) !important;
}
[data-rp-vertical-scroller] input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.05); box-shadow:0 4px 12px rgba(46,92,62,0.36); }
[data-rp-vertical-scroller] input[type="range"]::-moz-range-thumb{
    background: var(--grid-primary-color, #2E5C3E) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 3px solid var(--grid-white, #FFFFFF) !important;
    box-shadow: 0 2px 8px rgba(46, 92, 62, 0.28) !important;
}

/* Ensure scroller tracks and thumbs use fallbacks so they show even if CSS variables aren't defined yet */
[data-rp-vertical-scroller] input[type="range"],
[data-rp-horizontal-scroller] input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--grid-light-green, #E8F5E8) !important;
    border-radius: 6px !important;
    height: 6px !important;
    outline: none !important;
}

[data-rp-vertical-scroller] input[type="range"]::-webkit-slider-thumb,
[data-rp-horizontal-scroller] input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--grid-primary-color, #2E5C3E) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 3px solid var(--grid-white, #FFFFFF) !important;
    box-shadow: 0 2px 8px rgba(46, 92, 62, 0.28) !important;
}

[data-rp-vertical-scroller] input[type="range"]::-moz-range-thumb,
[data-rp-horizontal-scroller] input[type="range"]::-moz-range-thumb {
    background: var(--grid-primary-color, #2E5C3E) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 3px solid var(--grid-white, #FFFFFF) !important;
    box-shadow: 0 2px 8px rgba(46, 92, 62, 0.28) !important;
}