/*styles.css*/
/* === 1. Reset / Defaults === */
/* Global box-sizing and margin/padding reset */
/*Universal*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 { font-size: 1.3em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }

body, h1, h2, p, ul, ol {
    margin: 0;
    padding: 0;
}

/*img, */
video {
    max-width: 100%;
    height: auto;
    display: block;
}

.logoBlue {
    color: #0d008a;
}

/* === LAYOUT GRID (updated) === */
body { /* contains left panel, top-bar, snippet-container, rightPanel */
    width: 100vw;                 /* was 1030px; let right panel claim remaining space */
    height: 606px;
    font-family: Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    overflow: hidden;
    display: grid;

    /* 3 columns: left fixed, center fixed, right flexible */
    grid-template-columns: 174px 856px 1fr;
    grid-template-rows: 30px 1fr;

    /* Row 1: original top bar over center, new bar over right */
    /* Row 2: left panel + center snippets + right panel */
    grid-template-areas:
      "left-panel top-bar top-bar-right"
      "left-panel snippet-container right-panel";
}

#left-panel {
    grid-area: left-panel;
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

#logo {
    height: 1fr;
    background-size: contain;
    margin: auto;
}

.version {
    font-size: 8px;
    font-weight: normal;
    text-align: center;
}
#year-select {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    padding: 6px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

#tax-year {
    background: darkblue;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 4px;
}

#nav-radios {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 160px;
    row-gap: 2px;
    padding: 4px 0;
    border: 0
}
#nav-radios input[type="radio"] { display: none; }
#nav-radios label {
    background: none; /*  #ccc; lightgray;*/
    color: darkblue;
    font-weight: bold;
    padding: 4px;
    margin-bottom: 2px;
    display: block;
    border-radius: 6px;
}
.hugRadio{ margin-left: -6px; }

#tool-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px 0;
}
#tool-buttons button {
    background: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px;
}

/* stacked "except / medical" next to the main word */
.btn-stacked-label {
    display: inline-block;
    vertical-align: top;
    line-height: 1.05;
    font-weight: normal;
    font-size: 0.65em;      /* smaller than label text */
    text-align: center;
    margin-left: 4px;
}

.btn-stacked-label > span { display: block; } /* stack the two words */

#tool-buttons button:hover { background-color: #0d008a; }
#top-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    grid-area: top-bar;
    background: #ddd;
    display: flex;
    max-height: 36px;
    align-items: center;
    padding: 0 4px;
    gap: 0;
}
#top-bar-right {
    grid-area: top-bar-right;
    position: sticky;      /* stick like the original */
    top: 0;
    z-index: 99;           /* just below your #top-bar z-index:100 */
    background: #ddd;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    max-height: 36px;
    border-left: 1px solid black; /* subtle seam where it meets center bar */
}
#top-bar-right .rightbar-title {
    font-weight: bold;
    padding-left: 4px;
}
#top-bar-right .rightbar-spacer { flex: 1; }
#top-bar-right .rightbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#top-logo {
    max-height: 28px;
    background-size: contain;
    padding: 0;
    visibility: hidden;
}

#top-year-select select,
#nav-dropdown select,
#menu-dropdown select {
    background: darkblue;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    height: 24px;
    visibility: hidden;
}

.spacer { flex-grow: 1; }

.role {
    width: 112px;
    text-align: center;
    font-weight: bold;
}
.role-joint {
    width: 107px;
    text-align: center;
}
.role-mfj-stacked { padding-right: 6px; }

#snippet-container {
    grid-area: snippet-container;
    background: #fff;
    scroll-padding-top: 64px;
    overflow-y: auto;
    padding: 4px;
}

.marginLeft-10 { margin-left: 10px; }

/*++++++++++++++++++++++++++++++*/
/*For all snippets */
#snippet-container .fed { background-color: #e3eafb; }
#snippet-container .state { background-color: #ff0000; }
/*++++++++++++++++++++++++++++++*/
/*For table layouts only (snippets) */
.section {
    margin-top: 5px;
    /*border-top: 5px solid darkblue !important;*/
    border-bottom: 2px solid darkblue !important;
}

#rightPanel {
    grid-area: right-panel;
    /*max-height: 565px;*/
     max-height: 95vh;
    margin-right: 5px;
    border: 3px solid darkgreen;
    padding: 6px;
    background: #fff;
    overflow-y: auto;               /* scroll independently if needed */
    min-width: 220px;               /* optional: avoid collapsing too small */
}

.clickableARIATextLink {
    color: blue;
    text-decoration: underline;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icon-cell {
    width: 24px;
    height: 25px;
    text-align: center;
    padding-left: 2px;
}
.bold-centered-text {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
.verbiage-cell {
    width: 465px;
    padding-left: 6px;
    height: 25px;
}
.reserved {
    /*background-color: #999999;*/
    background-color: #eee;
}
.dep-X {
    padding-left: 6px;
    height: 25px;
}
tr td { border: 1px solid black; }

.value-cell {
    width: 112px;
    text-align: right;
}

.value-cell-narrow .cell-wrapper input {
    width: 80px;
    box-sizing: border-box;
    text-align: right;
}

.tax-table {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.text-left {
    text-align: left;
    padding-left: 6px;
}

.text-right {
    text-align: right;
    padding-right: 6px;
}

/*To remove added height from top-bar when snippets dont fill the container*/
/*To remove white space above table snippets*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*For grid layouts*/
.grid-container {
    display: grid;
    grid-template-columns: 24px 458px 112px 112px 112px;
    overflow-y: auto;
}

.grid-row { display: contents; }

.value-cell {
    background-color: #eee;
    font-size: .8em;
}

.cell {
    height: 25px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.justifyContentRight {
    justify-content: flex-end;
    margin-right: 6px;
}

.shiftRight {
    padding-left: 300px;
}

.T-cell,
.S-cell,
.J-cell { justify-content: flex-end; }

.ckbox { margin: auto; }

.grid-container {
    display: grid;
    grid-template-columns: 24px 458px 112px 112px 112px;
    overflow-y: auto;
}

.grid-row { display: contents; }

.cell {
    height: 25px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 13px;
}

input[type="text"] {
    width: 100%;
    height: 100%;
    border: none;
    text-align: right;
    box-sizing: border-box;
    font-size: 13px;
    /*background-color: #f0f0f0;*/
    color: black;
}

/* END For Grid Layouts=========================================*/

/*++++++++++++++++++++++++++++++*/
/*For tables and grids (and flex if exists)*/
/*For <input> boxes*/
.invalid-input { background-color: yellow; }
.negative-value { background-color: red; }
/*++++++++++++++++++++++++++++++*/
/*For grids and flex if exists*/
.grid-row > div,
.grid-row > div > span { border-bottom: 1px solid black; }
.grid-row { background-color: #0d008a; }
.grid-container {
    display: grid;
    grid-template-columns: 24px 458px 112px 112px 112px;
    overflow-y: auto;
}
.grid-row { display: contents; }
.cell {
    height: 25px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.icon {
    width: 20px;
    height: 18px;
    margin: 3px 1px 0 1px;
}
.icon-next-to-text {
    width: 18px;
    height: 16px;
    margin: 3px 1px 1px 1px;
}

.verbiage {
    justify-content: flex-start;
    padding-left: 6px;
}

.justifyContentRight {
    justify-content: flex-end;
    margin-right: 6px;
}

.shiftRight { padding-left: 280px; }

.T-cell,
.S-cell,
.J-cell { justify-content: flex-end; }

.depName { /*dependent name */
    max-width: 180px;
    margin-right: 15px;
    border: 1px solid black;
    text-align: left;
}
input.depName {
    border-left: 1px solid darkgray;
    border-right: 1px solid darkgray;
    border-bottom: 3px solid darkgray;
    text-align: left;
    padding: 4px; /* optional, improves readability */
}

.ui-choice-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.tax-ui {
    /*.ui-choice-left*/
    justify-content: flex-start;
    justify-content: center;
    font-weight: normal;
}

.tax-ui .ui-choice-right { justify-content: flex-end; }

.tax-ui .ui-choice {
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none; /* WebKit-specific */
    outline: none;
    background-color: white;
    border: 2px solid #333;
    cursor: pointer;
    position: relative;
    margin: 2px;
}

.tax-ui .ui-choice:hover {
    border-color: #555;
    background-color: #d1dbff;
}

.tax-ui .ui-choice[type="checkbox"] { border-radius: 4px; }

.tax-ui .ui-choice[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    background: transparent;
}

.tax-ui .ui-choice[type="radio"] { border-radius: 50%; }

.tax-ui .ui-choice[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: #0d008a;
    border-radius: 50%;
}
.tax-ui .ui-choice:focus-visible { box-shadow: 0 0 0 3px rgba(13, 0, 138, 0.4); }

.tax-ui .inline-flex-center {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.boldText { font-weight: bold; }

.radio-with-divider {
    display: flex;
    align-items: center; /* Aligns all elements vertically */
    height: 100%; /* Ensures the container takes full height if inside a <td> or similar */
    gap: 0.5em; /* Optional: adds spacing */
}

.vertical-rule { border-right: 1px solid black; }

/* Checkbox checkmark */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid #0d008a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Radio dot */
input[type="radio"] { border-radius: 50%; }

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    background: #0d008a;
    border-radius: 50%;
}

.shortenedInput {
    max-width: 80px;
    margin: 0 0 0 30px;
    text-align: right;
}

.shortenedInput-withCheckbox {
    max-width: 80px;
    margin: 0 0 0 5px;
}

/* === Text alignment inside text inputs === */
.ui-choice-left input[type="text"] { text-align: left; }
.ui-choice-right input[type="text"] { text-align: right; }
.ui-choice-centered input[type="text"] { text-align: center; }

.right-justify {
    float: right;
    text-align: right;
    margin-right: 6px;
}

.grayText { color: gray; }

.itemizedYellow { background-color: #f6f2e4; }

.highlightYellow { background-color: #fbffd9; }

.visually-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); /* IE6, IE7 */
    clip-path: inset(50%); /* Modern browsers */
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
}

label.active-section {
    border: 3px double darkblue;
    background-color: white !important;
    font-weight: normal !important;
}

.border-l { border-left: 1px solid black; }
.border-r { border-right: 1px solid black; }

/* Accessibility + Interactive Styling */
button:hover, button:focus,
select:hover, select:focus,
#nav-radios label:hover, #nav-radios label:focus {
    outline: 2px solid #004080;
    background-color: transparent; /*or initial or inherit*/
}

.ageRelated { background-color: #eee; }

.popup-overlay {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    width: 560px;
    background: white;
    border: 2px solid #0d008a;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.popup-box {
    position: relative;
    padding: 16px;
}
.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.2rem;
    background: none;
    border: none;
    cursor: pointer;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    width: 360px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    position: relative;
    transition: transform 0.3s ease;
    border: 2px solid #ccc;
    text-align: center;
}

.modal-box {
    background: white;
    max-width: 600px;
    width: 90%;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px #000;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* controls space between radio and text */
    font-size: 14px;
}

.fed-blue-light { background-color: rgb(226, 237, 246); }
.fed-blue-dark { background-color: rgb(193 217 233); }
.state-green-light { background-color: #daf4e7; }
.SD-light-gray, withholding {
    background-color: rgb(241, 248, 255); /*light blue*/
    background-color: #eeeeee; /*light gray*/
}
.calc { color: red; }
.bb3d { border-bottom: 3px double black; }
.bb3 { border-bottom: 3px solid black; }
.bt3 { border-top: 3px solid black; }
.bb2s { border-bottom: 2px solid black; }
.bt2s { border-top: 2px solid black; }

/* Responsive Enhancements */
#snippet-container { margin-left: 6px; }

.unsaved { border: 2px solid #0047ab; } /*highlight unsaved changes in input["text"]*/

#skip_SD_dropdown_0 { margin-right: 45px; }
#txt_SD_name_0 { border: 1px solid darkblue; }    /*background-color: #f4faff;*/

.scenario-row.active-sd {
    margin-left: 25px;
    font-size: .8rem;
    font-weight: normal;
    border: 2px solid #004080;
    backdrop-filter: #eee;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    gap: 1em;
}
#txt_SD-name-0 { text-align: left; }
.active-label {
    color: #004080;
    margin-left: 0.25em;
}

.sd-dropdown-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.75em 0 0.75em 25px;
}
.SD_buttons_left {
    margin-left: 100px;
}
.sd-action-buttons button {
    background-color: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px 4px;
    cursor: pointer;
}

.sd-action-buttons button:hover { background-color: #0d008a; }

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.toast {
    background-color: #004225; /* dark green */
    color: #fff;
    padding: 10px 16px;
    margin-top: 6px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    opacity: 0.9;
    animation: fadeOut 0.4s ease-out forwards;
    animation-delay: 3s;
}

.export-modal, .import-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* dim background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.importFilenamePattern{
    color: #0d008a;
    font-weight: normal;
    font-size: .8rem;
}
.export-modal-content, .import-modal-content {
    background: #e8e7e7;
    padding: 24px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-width: 90vw;
    width: 520px;
    box-sizing: border-box;
    text-align: left;
}
.import-modal-content {
    margin: 35px auto;
    height: 340px !important;
    width: 420px !important;
}

#importDropArea {
    display: flex;
    flex-direction: column; /* stack items vertically */
    justify-content: center; /* center vertically */
    align-items: center;     /* center horizontally */
    text-align: center;      /* center inline text elements like <p>, <h3> */
    padding: 20px;           /* optional, for spacing */
}

.export-modal-content h3, .import-modal-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.2em;
    color: #0d008a;
    text-align: center;
}

.export-modal-content label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.export-modal-content input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 16px;
}

.export-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.export-modal-buttons button,  #browseFileBtn, #cancelImportBtn {
    padding: 6px 14px;
    font-size: 0.95em;
    border: 1px solid black;
    border-radius: 6px;
    cursor: pointer;
    background-color: darkgreen;
    color: white;
}
.centerThis {
    text-align: center;
    margin: 0 auto;
}

.export-modal-buttons button:hover {
    background-color: #0d008a;
}

.export-modal-buttons button:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.import-drop-area {
    border: 2px dashed #999;
    padding: 30px;
    margin: 10px 0;
    border-radius: 8px;
    cursor: pointer;
}
.import-drop-area.highlight {
    border-color: #0d008a;
}
.import-actions button {
    margin: 0 10px;
}

/* Applies to all focusable form elements */
input:focus,
select:focus,
textarea:focus {
    border: 2px solid #f0c000; /* #f0c000 Yellow border when focused   (logo blue = #0d008a)  */
    box-shadow: 0 0 4px 2px #f0c000;
    outline: none; /* Optional: remove the default outline */
    font-weight: bold;
    background-color: #fffbe6; /* optional: soft yellow tint */
}

/*================*/

.modal-content.dragover {
    border-color: #4caf50;
    background-color: #f0fff0;
}

.status-text {
    margin-top: 12px;
    font-size: 14px;
    color: #333;
}

.close-btn {
    margin-top: 16px;
    padding: 6px 16px;
    font-weight: bold;
    background: #444;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.background-darker-gray{ background-color: #858585; }

.has-tooltip:hover { box-shadow: 0 0 0 6px rgba(0, 128, 255, 0.2); }

.hide_S_J tr td:nth-child(4),
.hide_S_J tr td:nth-child(5){ display: none; }

.disabled-table-row {
    opacity: 0.5;
    pointer-events: none; /* disables clicks */
}

/*To resolve an issue where the text followed by an icon appears lower than it should (not vertically centered)*/
/* Keep the table cell’s default table-cell behavior */
.shiftRight { vertical-align: middle; }
/* This is the key: make the inline box itself center within the td */
.shiftRight .label-wrap {
    display: inline-flex;      /* inline so it can be vertically aligned inside td */
    vertical-align: middle;    /* centers the wrapper within the td */
    align-items: center;       /* centers text and icon within the wrapper */
    gap: 0.3rem;
    line-height: 1;            /* neutral line box so the icon can't drag it down */
}
/* Size icon to the text and avoid baseline drag */
.shiftRight .icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: middle;    /* belt-and-suspenders */
}

/*@media screen and (max-width: 1020px) {*/
/*    #snippet-container {*/

/*    }*/

/*    body { !* for right panel *!*/
/*        grid-template-columns: 0 1fr;  !* left gone, center full *!*/
/*        grid-template-areas:*/
/*          "top-bar top-bar"*/
/*          "snippet-container snippet-container";*/
/*    }*/

/*    #left-panel { display: none; }*/

/*    #rightPanel { display: none; }*/
/*    #top-bar-right { display: none; }  !* hide the extension on narrow screens *!*/

/*    #top-bar {*/
/*        display: grid;*/
/*        grid-template-columns: auto auto auto auto 1fr 106px 112px 102px 12px;*/
/*        align-items: center;*/
/*        gap: 6px;*/
/*    }*/

/*    #top-logo {*/
/*        visibility: visible;*/
/*        #top-bar #top-logo,*/
/*        #top-bar #top-year-select,*/
/*        #top-bar #nav-dropdown,*/
/*        #top-bar #menu-dropdown {*/
/*            display: block;*/
/*        }*/
/*    }*/
/*}*/
@media screen and (max-width: 1020px) {
    /* Collapse to two columns: center content full-width, no side panels */
    body, SDScenarios-container {
        grid-template-columns: 0 1fr;
        grid-template-areas:
          "top-bar top-bar"
          "snippet-container snippet-container";
    }

    #left-panel { display: none; }
    #rightPanel { display: none; }
    #top-bar-right { display: none; }
    .eligibility-table-wrap,
    #SDScenarios-container {
        width: 830px;
    }
    #top-bar {
        display: grid;
        grid-template-columns: auto auto auto auto 1fr 106px 112px 102px 12px;
        align-items: center;
        gap: 6px;
        width: 855px;
    }

    /* Show compact logo + controls in narrow view */
    #top-logo { visibility: visible; }

    /* These were nested incorrectly before */
    #top-bar #top-logo,
    #top-bar #top-year-select,
    #top-bar #nav-dropdown,
    #top-bar #menu-dropdown {
        display: block;
    }

    /* If your selects are hidden by default, flip them on here */
    #top-year-select select,
    #nav-dropdown select,
    #menu-dropdown select {
        visibility: visible;
    }
}