/**
 * too-request-form.css
 * ====================
 * Styles unique to the TOO request form page (toorequest.php).
 * Loaded alongside forms-tables-unified.css — only rules that cannot
 * live in the shared stylesheet belong here. See FORMS-TABLES-GUIDE.md.
 */

/* ========== MAIN CARD ========== */

/* Fluid padding specific to this page's panel-body */
.too-request-main-card {
    padding: 0.0rem;
    max-width: 800px;
}

/* Covers both the static page title and JS-injected h1s (summary/submit result/rejected) */
.too-request-main-card>h1:first-child {
    margin: 0 0 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: 10px;
    border: 1px solid rgba(47, 115, 189, 0.3);
    background: linear-gradient(132deg, #0e2d52 0%, #1c5199 68%, #2f73bd 100%);
    color: #ffffff;
    font-size: clamp(1.45rem, 2.35vw, 2rem);
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(15, 44, 82, 0.15);
    letter-spacing: -0.3px;
}

.too-request-main-card p,
.too-request-main-card li {
    color: #2a4a6f;
    line-height: 1.68;
    font-size: 0.95rem;
}

.too-request-main-card h2,
.too-request-main-card h3 {
    color: #0f2642;
    font-weight: 700;
}

/* Override legacy newswift.css `.container { width: 500px }` */
.too-request-main-card .container {
    border: 1px solid #dce4f0;
    border-radius: 10px;
    padding: clamp(1.1rem, 1.5vw, 1.5rem);
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
}

/* JS output tables have many columns — fixed layout prevents column blowout */
.too-request-main-card table {
    width: 100%;
    max-width: none;
    table-layout: fixed;
}

.too-request-main-card td,
.too-request-main-card th {
    vertical-align: top;
    word-break: break-word;
}

/* Reset label::after so the global .required::after asterisk doesn't fire —
   the JS form uses label[required] attribute, not a .required class */
.too-request-main-card label::after {
    content: '';
}

.too-request-main-card label[required]::after,
.too-request-main-card .required::before {
    content: ' *';
    color: #e74c3c;
    font-weight: 700;
}

/* JS injects <br> after labels; prevent legacy browsers adding clear:both */
.too-request-main-card br {
    clear: none;
}

/* Submit button is green on this page (confirm action, not a generic form button) */
.too-request-main-card input[type="submit"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 12px 28px rgba(40, 167, 69, 0.18);
}

.too-request-main-card input[type="submit"]:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    box-shadow: 0 16px 36px rgba(40, 167, 69, 0.25);
}

/* ========== JS-GENERATED FORM CLASSES ==========
 * swift_too.js builds form HTML with these class names.
 * They have no equivalents in forms-tables-unified.css.
 * ================================================ */

.too-request-main-card .too-form-shell {
    width: 100%;
}

/* radioinput: wraps a radio group; the field label is a <p>, not a <label> */
.too-request-main-card .radioinput {
    margin-bottom: 0.85rem;
}

.too-request-main-card .radioinput>p {
    margin: 0 0 0.35rem;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

.too-request-main-card .radiooption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.too-request-main-card .radiooption input[type='radio'] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    accent-color: #2f73bd;
}

.too-request-main-card .radiooption label {
    margin: 0;
    font-weight: 500;
    color: #2a4a6f;
    cursor: pointer;
}

/* boolinput: yes/no boolean radio; field label is a bare <div>, not a <label> */
.too-request-main-card .boolinput {
    margin-bottom: 0.85rem;
}

.too-request-main-card .boolinput>div:first-child {
    margin-bottom: 0.35rem;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

/* pulldown: unwrapped <select class="pulldown"> preceded by a <p> as its label */
.too-request-main-card select.pulldown {
    width: 100%;
    margin-bottom: 0.85rem;
}

.too-request-main-card p+select.pulldown {
    margin-top: 0.15rem;
}

.too-request-main-card p:has(+ select.pulldown),
.too-request-main-card p:has(+ input.pulldown) {
    margin: 0 0 0.35rem;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

/* textarea: unwrapped <textarea class="textarea"> with a preceding <label> */
.too-request-main-card textarea.textarea {
    width: 100%;
    margin-bottom: 0.85rem;
}

.too-request-main-card label+textarea.textarea {
    margin-top: 0.15rem;
}

/* Suppress <br> injected by JS form builder inside field wrappers */
.too-request-main-card .forminput br,
.too-request-main-card .unitinput br,
.too-request-main-card .radioinput br,
.too-request-main-card .boolinput br {
    display: none;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 980px) {
    .too-request-main-card {
        padding: 1rem;
    }

    .too-request-main-card>h1:first-child {
        font-size: 1.35rem;
        padding: 0.85rem 1rem;
        margin-bottom: 0.75rem;
    }

    .too-request-main-card .container {
        padding: 0.95rem;
    }

    .too-request-main-card input[type="submit"],
    .too-request-main-card .formbutton,
    .too-request-main-card button[type="button"] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.6rem;
    }
}

@media (max-width: 640px) {
    .too-request-main-card {
        padding: 0.9rem;
    }

    .too-request-main-card>h1:first-child {
        font-size: 1.2rem;
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.6rem;
    }
}


.too-request-shell {
    max-width: min(1920px, calc(100vw - 1rem));
    margin: 1.5rem auto 2rem;
    padding: 0 clamp(0.7rem, 1.7vw, 1.25rem);
}

.too-request-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.56fr) minmax(0, 1.44fr);
    gap: 2rem;
    align-items: start;
}


.too-request-aside {
    padding: 1.75rem;
    background:
        radial-gradient(circle at top right, rgba(54, 112, 191, 0.2), transparent 35%),
        linear-gradient(145deg, #0f2642 0%, #1e4f8f 100%);
    color: #f8fcff;
    position: sticky;
    top: 1.2rem;
}

.too-request-kicker {
    display: inline-block;
    margin-bottom: 0.85rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

.too-request-aside h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    line-height: 1.15;
    font-weight: 800;
}

.too-request-aside p {
    margin: 1rem 0 0;
    color: rgba(248, 252, 255, 0.88);
    line-height: 1.7;
    font-size: 0.945rem;
}

.too-request-points {
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.68rem;
}

.too-request-points li {
    padding: 0.8rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    line-height: 1.55;
    font-size: 0.935rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.too-request-points li:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.too-request-points a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.too-request-points a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.too-request-main-card .too-form-shell {
    width: 100%;
}

/* ---- radioinput ---- */
.too-request-main-card .radioinput {
    margin-bottom: 0.85rem;
}

.too-request-main-card .radioinput>p {
    margin: 0 0 0.35rem;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

.too-request-main-card .radiooption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.too-request-main-card .radiooption input[type='radio'] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    accent-color: #2f73bd;
}

.too-request-main-card .radiooption label {
    margin: 0;
    font-weight: 500;
    color: #2a4a6f;
    cursor: pointer;
}

/* ---- boolinput ---- */
.too-request-main-card .boolinput {
    margin-bottom: 0.85rem;
}

.too-request-main-card .boolinput>div:first-child {
    margin-bottom: 0.35rem;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

/* ---- pulldown (unwrapped select) ---- */
.too-request-main-card select.pulldown {
    width: 100%;
    margin-bottom: 0.85rem;
}

.too-request-main-card p+select.pulldown {
    margin-top: 0.15rem;
}

.too-request-main-card p:has(+ select.pulldown),
.too-request-main-card p:has(+ input.pulldown) {
    margin: 0 0 0.35rem;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

/* ---- unwrapped textarea ---- */
.too-request-main-card textarea.textarea {
    width: 100%;
    margin-bottom: 0.85rem;
}

.too-request-main-card label+textarea.textarea {
    margin-top: 0.15rem;
}

/* Suppress <br> injected by JS form builder */
.too-request-main-card .forminput br,
.too-request-main-card .unitinput br,
.too-request-main-card .radioinput br,
.too-request-main-card .boolinput br {
    display: none;
}



.too-request-form-pane {
    min-width: 0;
    width: 100%;
}

.too-request-main-card form {
    margin: 0;
    width: 100%;
    max-width: none;
}

.too-request-main-card table {
    width: 100%;
    max-width: none;
    table-layout: fixed;
}

.too-request-main-card td,
.too-request-main-card th {
    vertical-align: top;
    word-break: break-word;
}

.too-request-main-card fieldset {
    margin: 0 0 1.35rem;
    padding: 0.5rem 1.15rem 0.8rem;
    border: 1px solid #d8e2f0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    box-shadow: 0 8px 18px rgba(15, 44, 82, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.too-request-main-card fieldset:hover {
    box-shadow: 0 12px 24px rgba(15, 44, 82, 0.08);
    border-color: #cdd7e8;
}

.too-request-main-card legend {
    font-weight: 700;
    color: #0f2642;
    padding: 0.5rem 0 0.25rem;
    border: none;
    border-radius: 0;
    background: none;
    width: 100%;
    float: left;
    font-size: 1.5rem;
    margin: 0;
}

/* Clear float after legend so fieldset content starts below it */
.too-request-main-card legend+* {
    clear: left;
}

.too-request-main-card .forminput,
.too-request-main-card .unitinput,
.too-request-main-card .resolve {
    margin-bottom: 0.85rem;
}

.too-request-main-card .forminput label,
.too-request-main-card .unitinput label {
    float: none;
    width: 100%;
    text-align: left;
    margin: 0 0 0.32rem;
    display: block;
    font-weight: 650;
    color: #1a3554;
    font-size: 0.95rem;
}

.too-request-main-card label {
    float: none;
    width: 100%;
    text-align: left;
}

.too-request-main-card label::after {
    content: '';
}

.too-request-main-card label[required]::after,
.too-request-main-card .required::before {
    content: ' *';
    color: #e74c3c;
    font-weight: 700;
}

.too-request-main-card br {
    clear: none;
}

.too-request-main-card .forminput input,
.too-request-main-card .unitinput input,
.too-request-main-card .unitinput select,
.too-request-main-card textarea {
    width: 100% !important;
    min-height: 2.45rem;
    padding: 0.68rem 0.85rem;
    border: 1.5px solid #c8d5e6;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    color: #1a3554;
    font-size: 0.95rem;
}

.too-request-main-card .forminput input::placeholder,
.too-request-main-card .unitinput input::placeholder,
.too-request-main-card textarea::placeholder {
    color: #9ab0c9;
}

.too-request-main-card input:focus,
.too-request-main-card select:focus,
.too-request-main-card textarea:focus {
    outline: none;
    border-color: #2f73bd;
    box-shadow: 0 0 0 3.5px rgba(47, 115, 189, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.02);
    background: #ffffff;
}

.too-request-main-card textarea {
    min-height: 9.5rem;
    resize: vertical;
    padding: 0.75rem 0.85rem;
}

.too-request-main-card select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232f73bd' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.2rem;
}

.too-request-main-card input[type="checkbox"],
.too-request-main-card input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: #2f73bd;
}

.too-request-main-card input[type="radio"]+label,
.too-request-main-card input[type="checkbox"]+label {
    margin: 0;
    font-weight: 500;
    color: #2a4a6f;
}

.too-request-main-card input[type="radio"]:focus,
.too-request-main-card input[type="checkbox"]:focus {
    outline: 2px solid #2f73bd;
    outline-offset: 2px;
}

.too-request-main-card .unitinput {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.too-request-main-card .unitinput input,
.too-request-main-card .unitinput select {
    display: block;
    width: 100%;
    min-width: 0;
}

.too-request-main-card .formbutton,
.too-request-main-card input[type="submit"],
.too-request-main-card button[type="button"] {
    min-height: 2.5rem;
    padding: 0.56rem 1.3rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #1c4f8f 0%, #2f73bd 100%);
    color: #ffffff;
    font-weight: 750;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(27, 78, 140, 0.18);
    margin-right: 0.6rem;
    margin-bottom: 0.45rem;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.too-request-main-card .formbutton:hover,
.too-request-main-card input[type="submit"]:hover,
.too-request-main-card button[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(27, 78, 140, 0.25);
    background: linear-gradient(135deg, #1a4580 0%, #2d6aad 100%);
}

.too-request-main-card .formbutton:active,
.too-request-main-card input[type="submit"]:active,
.too-request-main-card button[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(27, 78, 140, 0.15);
}

.too-request-main-card .formbutton:disabled,
.too-request-main-card input[type="submit"]:disabled,
.too-request-main-card button[type="button"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.too-request-main-card input[type="submit"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 12px 28px rgba(40, 167, 69, 0.18);
}

.too-request-main-card input[type="submit"]:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    box-shadow: 0 16px 36px rgba(40, 167, 69, 0.25);
}

@media (max-width: 980px) {
    .too-request-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .too-request-aside {
        position: static;
        top: 0;
    }

    .too-request-shell {
        max-width: calc(100vw - 0.9rem);
        padding: 0 0.45rem;
        margin: 1rem auto 1.5rem;
    }

    .too-request-main-card {
        padding: 1rem;
    }

    .too-request-main-card>h1:first-child {
        font-size: 1.35rem;
        padding: 0.85rem 1rem;
        margin-bottom: 0.75rem;
    }

    .too-request-main-card .container {
        padding: 0.95rem;
    }

    .too-request-aside h2 {
        font-size: 1.35rem;
    }

    .too-request-main-card .formbutton,
    .too-request-main-card input[type="submit"],
    .too-request-main-card button[type="button"] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.6rem;
    }
}

@media (max-width: 640px) {
    .too-request-shell {
        margin: 0.75rem auto 1rem;
        padding: 0 0.5rem;
    }

    .too-request-main-card {
        padding: 0.9rem;
    }

    .too-request-main-card>h1:first-child {
        font-size: 1.2rem;
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.6rem;
    }

    .too-request-aside {
        padding: 1.3rem;
    }

    .too-request-aside h2 {
        font-size: 1.25rem;
    }

    .too-request-main-card fieldset {
        margin: 0 0 1rem;
        padding: 1rem 0.9rem 0.6rem;
    }

    .too-request-main-card .forminput,
    .too-request-main-card .unitinput,
    .too-request-main-card .resolve {
        margin-bottom: 0.7rem;
    }

    .too-request-main-card .unitinput {
        grid-template-columns: 1fr;
    }

    .too-request-main-card .forminput input,
    .too-request-main-card .unitinput input,
    .too-request-main-card .unitinput select,
    .too-request-main-card textarea {
        min-height: 2.25rem;
        padding: 0.55rem 0.7rem;
    }
}