/* ============================================================
   form.css — UW LEND Registration Form
   Minimal styling; no framework dependency.
   Brand colors: IHDD Purple #32006E, Spirit Purple #4B2E83,
   Gold #FFC700, Accent Teal #008995
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 1rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background: #f5f5f5;
    color: #222;
}

.form-wrapper {
    max-width: 760px;
    margin: 2rem auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────── */
.form-header {
    background: #32006E;
    color: #fff;
    padding: 1.5rem 2rem;
}

.form-header h1 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.intake-note {
    margin: 0;
    font-size: .9rem;
    opacity: .9;
}

/* ── Sections ─────────────────────────────────────────────── */
.form-section {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e0e0e0;
}

.form-section h2 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: #32006E;
    border-bottom: 2px solid #FFC700;
    padding-bottom: .35rem;
}

.form-section h3 {
    margin: 1rem 0 .5rem;
    font-size: 1rem;
    color: #4B2E83;
}

/* ── Form groups ──────────────────────────────────────────── */
.form-group {
    margin-bottom: 1.1rem;
}

.form-group label,
.form-group legend {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
    font-size: .95rem;
}

.form-group fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #222;
    transition: border-color .15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #32006E;
    box-shadow: 0 0 0 2px rgba(50,0,110,.2);
}

/* Inline radio / checkbox labels */
.radio-inline,
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: 1.2rem;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-block {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .4rem;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-block input[type="checkbox"] {
    margin-top: .2rem;
    flex-shrink: 0;
}

/* ── Conditional blocks ───────────────────────────────────── */
.conditional-block {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid #FFC700;
}

/* ── Validation ───────────────────────────────────────────── */
.field-error {
    display: block;
    color: #c0392b;
    font-size: .875rem;
    margin-top: .2rem;
}

.required {
    color: #c0392b;
    font-weight: bold;
}

.note {
    font-weight: normal;
    font-size: .85rem;
    color: #555;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    padding: 1rem 1.5rem;
    margin: 1rem 2rem;
    border-radius: 3px;
    font-size: .95rem;
}

.alert-error {
    background: #fdf0ef;
    border-left: 4px solid #c0392b;
    color: #7b1a12;
}

.alert-success {
    background: #edfaf3;
    border-left: 4px solid #008995;
    color: #00535a;
}

.alert-warning {
    background: #fffbea;
    border-left: 4px solid #FFC700;
    color: #7a5800;
    display: block;
    padding: .5rem;
    margin-top: .5rem;
    border-radius: 2px;
}

/* ── Token link display box ───────────────────────────────── */
.token-link-box {
    margin-top: .75rem;
}

.token-link-box label {
    font-weight: 600;
    display: block;
    margin-bottom: .3rem;
}

.token-link-box input[type="text"] {
    width: 100%;
    font-family: monospace;
    font-size: .9rem;
    padding: .4rem .6rem;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #f9f9f9;
}

/* ── Bulk results table ───────────────────────────────────── */
.bulk-results {
    padding: 1rem 2rem;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.results-table th,
.results-table td {
    padding: .5rem .75rem;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.results-table th {
    background: #32006E;
    color: #fff;
    font-weight: 600;
}

.row-ok  td { background: #edfaf3; }
.row-error td { background: #fdf0ef; }

/* ── Submit button ────────────────────────────────────────── */
.form-actions {
    padding: 1.5rem 2rem;
    text-align: right;
}

.btn-submit {
    background: #32006E;
    color: #fff;
    border: none;
    padding: .65rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .15s;
}

.btn-submit:hover,
.btn-submit:focus {
    background: #4B2E83;
    outline: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .form-wrapper { margin: 0; border-radius: 0; }
    .form-section, .form-actions { padding: 1rem; }
    .form-header { padding: 1rem; }
    .alert { margin: .75rem 1rem; }
}

/* ── Test mode banner ─────────────────────────────────────── */
.test-mode-banner {
    background: #c0392b;
    color: #fff;
    text-align: center;
    padding: .75rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
}

/* ── Mobile friendliness additions ───────────────────────────────── */

/* Stack radio buttons vertically on small screens */
@media (max-width: 600px) {

    /* Radio buttons — stack vertically instead of inline */
    .radio-inline {
        display: block;
        margin-bottom: .5rem;
        margin-right: 0;
    }

    /* Checkbox blocks — increase tap target size */
    .checkbox-block,
    .checkbox-inline {
        padding: .4rem 0;
        min-height: 44px;       /* Apple HIG minimum tap target */
        align-items: center;
    }

    /* Inputs and selects — full width, larger tap target */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group input[type="date"],
    .form-group select {
        font-size: 1rem;        /* prevents iOS auto-zoom on focus */
        min-height: 44px;       /* minimum tap target */
        padding: .6rem .75rem;
    }

    /* Submit button — full width on mobile */
    .btn-submit {
        width: 100%;
        padding: .85rem 1rem;
        font-size: 1.05rem;
        text-align: center;
    }

    /* Form actions — remove right alignment on mobile */
    .form-actions {
        text-align: left;
    }

    /* Conditional blocks — reduce left indent on small screens */
    .conditional-block {
        margin-left: .5rem;
        padding-left: .75rem;
    }

    /* Section headings — smaller on mobile */
    .form-section h2 {
        font-size: 1.05rem;
    }

    /* Question numbers — keep visible */
    .q-num {
        display: inline;
    }

    /* Test mode banner — smaller text on mobile */
    .test-mode-banner {
        font-size: .9rem;
        padding: .6rem .75rem;
    }

    /* Alert boxes — full width */
    .alert {
        margin: .5rem 0;
        border-radius: 0;
    }

    /* Field help text — slightly smaller */
    .field-help {
        font-size: .82rem;
    }

    /* Permanent address h3 */
    .form-section h3 {
        font-size: .95rem;
    }
}

/* ── iOS-specific fix ─────────────────────────────────────────────── */
/* Prevents iOS Safari from zooming in on select/input focus          */
/* Font size must be >= 16px on iOS to prevent auto-zoom              */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group input[type="date"],
    .form-group select {
        font-size: 16px;
    }
}

/* ── Touch device improvements ────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

    /* Larger radio and checkbox tap targets on touch screens */
    .radio-inline input[type="radio"],
    .checkbox-inline input[type="checkbox"],
    .checkbox-block input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        cursor: pointer;
    }

    /* More spacing between radio options on touch */
    .radio-inline {
        margin-bottom: .6rem;
    }
}

/* ── Bulk create instructions block ──────────────────────── */
.bulk-instructions {
    background: #f8f5ff;
    border-left: 3px solid #32006E;
    padding: .75rem 1rem;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: .5rem;
    border-radius: 0 3px 3px 0;
}

.bulk-example {
    background: #fff;
    border: 1px solid #ddd;
    padding: .5rem .75rem;
    margin-top: .5rem;
    border-radius: 3px;
    font-size: .85rem;
    line-height: 1.8;
}

.bulk-instructions code {
    background: #eee;
    padding: .1rem .3rem;
    border-radius: 2px;
    font-size: .85rem;
}

/* ── Token link stub summary box ─────────────────────── */
.stub-summary {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid #FFC700;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.stub-summary h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    color: #FFC700;
    font-weight: 700;
}

.stub-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-bottom: .75rem;
    table-layout: fixed;        /* forces consistent column widths */
}

.stub-summary-table th {
    text-align: left;
    font-weight: 600;
    padding: .35rem 1rem .35rem 0;
    color: rgba(255, 255, 255, 0.75);
    width: 170px;               /* fixed width — longest label is
                                   "Supervising Faculty" at ~150px */
    vertical-align: top;
    white-space: nowrap;        /* prevents label wrapping */
}

.stub-summary-table td {
    padding: .35rem 0;
    color: #ffffff;
    vertical-align: top;
    word-break: break-word;     /* long emails wrap cleanly */
}

.stub-summary-note {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}

.stub-summary-note a {
    color: #FFC700;
}

@media (max-width: 600px) {
    .stub-summary-table,
    .stub-summary-table tbody,
    .stub-summary-table tr,
    .stub-summary-table th,
    .stub-summary-table td {
        display: block;
        width: 100%;
    }
    .stub-summary-table th {
        padding-top: .6rem;
        padding-bottom: .1rem;
        color: #FFC700;
        white-space: normal;
    }
    .stub-summary-table td {
        padding-top: 0;
        padding-bottom: .4rem;
    }
}

/* Ensure review button text is always white — visible on dark row backgrounds */
.rq-table .btn-primary {
    color: #ffffff !important;
    background: #32006E;
}

.rq-table .btn-primary:hover {
    background: #4B2E83;
    color: #ffffff !important;
}