/* ==========================================================================
   Quick1099 Core Components (additive)
   Adapts existing button/card/form classes to the source site's visual
   language using design tokens. Markup/class names are NOT changed - only
   the visual treatment of the classes already used across the app.
   Some rules require !important because the existing legacy rules being
   overridden (.btnn, .btnCancel) already declare !important themselves;
   those are called out below. No new !important is added where avoidable.
   Load AFTER q-tokens.css and q-base.css.
   ========================================================================== */

/* ---- Primary action button (.btnn) ---- */
.btnn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 750;
    background-color: var(--q-blue-600);
    box-shadow: var(--q-shadow-blue);
    color: var(--q-white) !important;
    transition: background-color var(--q-dur) var(--q-ease), border-color var(--q-dur) var(--q-ease), box-shadow var(--q-dur) var(--q-ease), transform var(--q-dur) var(--q-ease);
    min-width: 140px; /* All buttons will be at least 140px wide */
    width: max-content; /* Expands dynamically only if text exceeds min-width */
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: center;
}

.btnn:hover {
  background-color: var(--q-blue-700);
}

/* --------------------------------------------------------------------------
   Export buttons container (Export PDF / Export CSV) is a flex item of
   .page-head. Without flex-shrink: 0, it gets squeezed by the title text
   whenever both don't fit on one row — instead of the row wrapping, the
   button container's width shrinks below what two buttons need, forcing
   them to stack internally. This happens at inconsistent widths depending
   on title length, so it's fixed structurally here rather than pinned to
   a breakpoint.
   -------------------------------------------------------------------------- */
.page-head {
    flex-wrap: wrap;
}

#exportButtonsContainer {
    flex-shrink: 0;
    margin-left: auto;
}

/* ---- Secondary / cancel button (.btnCancel, .btnInner) ----
   CANONICAL — must exactly match Login page Cancel button in
   every state, on every page. Specificity intentionally boosted
   (repeated class) so this beats legacy style.css / styleV2.css
   and page-specific theme-auth.css rules, without editing those files. */
.btnCancel.btnCancel.btnCancel,
.btnInner.btnInner.btnInner {
    background-color: #fff !important;
    color: var(--q-ink-900) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: var(--q-radius-sm);
    font-weight: 750 !important;
    box-shadow: none !important;
    min-width: 140px;
    width: max-content;
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: center;
}

    .btnCancel.btnCancel.btnCancel:hover,
    .btnInner.btnInner.btnInner:hover {
        background-color: #f7f9fd !important;
        border-color: #b9c9de !important;
        color: var(--q-ink-900) !important;
        font-weight: 750 !important;
        box-shadow: none !important;
    }



/* ---- Bulk / secondary action buttons ---- */
.quick1099-form .btnInnerBulk {
    background-color: var(--q-blue-600) !important; /* overrides legacy #1cbaa0 !important */
    min-width: 140px; /* All buttons will be at least 140px wide */
    width: max-content; /* Expands dynamically only if text exceeds min-width */
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: center;
}

/* ---- Table header bars (Recipient/Payer search grids, bulk preview) ----
   Overrides legacy `background-color: #1cbaa0 !important;` on these selectors. */
.quick1099-table .table thead th,
.bulkTableHead th,
.bulkTableRow {
    background-color: #f2f7fe !important;
    color: #071b3f !important;
}

/* ---- Misc admin/tool accent text (overrides legacy #1cbaa0 !important) ---- */
.admin-tool-text {
  color: var(--q-blue-600) !important;
}

.btnn.btnPay {
  background-color: var(--q-blue-600);
}

.btnn.btnPay:hover {
  background-color: var(--q-blue-700);
}

/* ---- Dashboard metric / summary cards ---- */
.metric-card,
.dashboard-card,
.activity-card,
.reminders-card {
  border-radius: var(--q-radius-lg);
/*  box-shadow: var(--q-shadow-md);*/
}

.metric-info h3 {
  color: var(--q-ink-900);
}

/* ---- Form controls (input-container / label-input / label-select) ---- */
.input-container input,
.input-container select,
input.label-input,
select.label-select,
.quick1099-form .input-field {
  border-radius: var(--q-radius-sm);
  border-color: var(--q-border);
}

.input-container input:focus,
input.label-input:focus,
select.label-select:focus,
.quick1099-form .input-field:focus {
  border-color: var(--q-blue-500);
  box-shadow: 0 0 0 3px var(--q-blue-100);
}

h5 i {
    color: #2563eb; /* Optional */
}
.forgot {
    color: #087610;
    text-decoration: none;
}



/* Design Tokens & Theme Variables */
:root {
    --blue: #0d63d8;
    --blue-dark: #0a54bd;
    --blue-50: #f2f7fe;
    --blue-100: #dceafa;
    --teal: #18b8a5;
    --navy: #071b3f;
    --ink: #172d52;
    --muted: #5d7090;
    --line: #d9e5f3;
    --surface: #fff;
    --soft: #f7f9fd;
    --danger: #d93c47;
    --r-sm: 10px;
    --r: 14px;
    --shadow-sm: 0 10px 30px rgba(16, 50, 99, .075);
}

/* Modal Styling */
#AddRowModal .modal-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 28px 80px rgba(7, 27, 63, .28);
    overflow: hidden;
}

#AddRowModal .modal-header {
    padding: 22px 24px 17px;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface);
}

#AddRowModal .modal-title {
/*    display: flex;*/
/*    align-items: flex-start;
    justify-content: space-between;*/
    padding: 22px 24px 17px !important;
    color: var(--navy);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.modal-title span {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--navy);
    font-size: 22px;
}

#AddRowModal .modal-body {
    padding: 24px;
    color: var(--ink);
    /* Flexbox gap spacing */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Adjust this value to increase or decrease the spacing */
}

#AddRowModal .modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 24px 22px;
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r) var(--r);
}

@media screen and (max-width: 767px) {
    #AddRowModal .modal-foot {       
        justify-content: center !important;               
    }
    #AddRowModal .button-secondary {
        width: stretch !important;
    }
    #AddRowModal .button-primary, #AddRowModal .btn-blue {
        width: stretch !important;
    }
}

/* Form Fields & Labels */
#AddRowModal .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

    #AddRowModal .field label {
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
        margin: 0;
    }

#AddRowModal .required {
    color: var(--danger);
}

#AddRowModal .form-control {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #bdcde2;
    border-radius: 8px;
    outline: 0;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}

    #AddRowModal .form-control:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(13, 99, 216, .11);
    }

/* Chosen Plugin Overflow Fix */
#AddRowModal .chosen-container,
#AddRowModal .chosen-container-single,
#AddRowModal .chosen-container-single .chosen-single {
    width: 100% !important;
    height: 46px !important;
    line-height: 44px !important;
    border-radius: 8px !important;
    border-color: #bdcde2 !important;
    background: #fff !important;
}

/* Security Notice Banner */
#AddRowModal .notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--muted);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 14px;
}

    #AddRowModal .notice svg {
        flex: 0 0 20px;
        color: var(--blue);
    }

/* Buttons */
#AddRowModal .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: 14px;
    transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
    min-width: 140px; /* All buttons will be at least 140px wide */
    width: max-content; /* Expands dynamically only if text exceeds min-width */
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: center;
}

#AddRowModal .button-primary,
#AddRowModal .btn-blue {
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    box-shadow: 0 5px 14px rgba(18, 105, 213, .18);
    min-width: 140px; /* All buttons will be at least 140px wide */
    width: max-content; /* Expands dynamically only if text exceeds min-width */
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: center;
}

    #AddRowModal .button-primary:hover,
    #AddRowModal .btn-blue:hover {
        background: var(--blue-dark);
        border-color: var(--blue-dark);
        color: #fff;
    }

#AddRowModal .button-secondary {
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    min-width: 140px; /* All buttons will be at least 140px wide */
    width: max-content; /* Expands dynamically only if text exceeds min-width */
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: center;
}

    #AddRowModal .button-secondary:hover {
        background: var(--soft);
        border-color: #b9c9de;
        color: var(--ink);
    }

#AddRowModal .close.icon-button {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    opacity: 0.8;
}

    #AddRowModal .close.icon-button:hover {
        color: var(--blue);
        background: var(--blue-50);
        opacity: 1;
    }

.terms-modal-header {
    padding: 20px 20px 0 15px;
    margin: 0;
}

    .terms-modal-header h5 {
        margin: 0;
        padding: 0;
        font-weight: 700 !important;
        font-size: 30px !important;
    }

    .terms-modal-header .close {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

/* =========================================================
   RECOVERY VERIFICATION
   ========================================================= */

.recovery-verification-section {
    width: 100%;
    margin-top: 10px;
}

.recovery-section-header {
    margin-bottom: 18px;
}

    .recovery-section-header h5 {
        margin: 0 0 5px;
        font-size: 18px;
        font-weight: 700;
        color: #071b3f;
    }

    .recovery-section-header p {
        margin: 0;
        font-size: 13px;
        color: #5d7090;
        line-height: 1.5;
    }


/* =========================================================
   TOP TWO COLUMNS
   ========================================================= */

.recovery-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.recovery-field-card,
.recovery-question-card {
    min-height: 112px;
    padding: 16px;
    border: 1px solid #d9e5f3;
    border-radius: 10px;
    background: #ffffff;
}


/* =========================================================
   LABEL
   ========================================================= */

.recovery-field-label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #172d52;
}


/* =========================================================
   RECOVERY CODE
   ========================================================= */

.recovery-field-card .input-field {
    width: 100%;
}


/* =========================================================
   SECURITY QUESTION
   ========================================================= */

.recovery-question-card {
    background: #f7f9fd;
}

    .recovery-question-card .recovery-field-label {
        margin-bottom: 10px;
    }

.recovery-question-text {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: #172d52;
}


/* =========================================================
   ANSWER
   ========================================================= */

.recovery-answer-section {
    margin-bottom: 18px;
}

    .recovery-answer-section .input-field {
        width: 100%;
    }


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.recovery-primary-action {
    margin-top: 4px;
}

    .recovery-primary-action .btnSubmit {
        min-width: 245px;
    }


/* =========================================================
   TRY ANOTHER QUESTION
   ========================================================= */

.recovery-alternative-action {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 13px;
    font-size: 13px;
    color: #5d7090;
}

.recovery-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #0d63d8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .recovery-link-button:hover {
        text-decoration: underline;
    }


/* =========================================================
   CANCEL
   ========================================================= */

.recovery-cancel-section {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

    .recovery-cancel-section .btnCancel {
        min-width: 130px;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .recovery-top-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .recovery-field-card,
    .recovery-question-card {
        min-height: auto;
    }

    .recovery-primary-action .btnSubmit {
        width: 100%;
    }

    .recovery-alternative-action {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .recovery-cancel-section .btnCancel {
        width: 100%;
    }
}

/* Tax Form Filings table (#myTable) — match Payer table: everything centered.
   Includes the disabled select/input elements used to display Payer/Recipient
   names, since form controls don't inherit td text-align reliably. */
#myTable th,
#myTable td {
    text-align: center;
}

#myTable .label-select,
#myTable .label-input {
    text-align: center;
    text-align-last: center; /* needed specifically for <select> elements */
}

/* ============================================
   OTP Modal — scoped spacing fix
   Fixes flattened header/content caused by the
   global ".modal-header { padding: 0 !important }"
   rule in the base stylesheet. Scoped via :has()
   so no other modal in the app is affected.
   ============================================ */
.modal-content:has(.otp-email-display) {
    padding: 24px 28px !important;
}

    .modal-content:has(.otp-email-display) .modal-header {
        padding: 0 0 16px 0 !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid #eee !important;
    }

.otp-email-display {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.radio-row {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

.otp-email-display {
    padding-left: 2px; /* nudge to match .otp-container's 30px vs modal-content's 28px */
}

.modal-content:has(.otp-email-display) .modal-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- Table header filter select (Recipient/Track Status grids) ----
   Overrides legacy 75px fixed-width .tblfilter in styleV2.css so filter
   dropdowns match the Track Status page styling across all tables. */
.tblfilter {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}