/* MSHP Accessible Form Styles — Extends shared-styles.css */
/* WCAG 2.1 Level AA compliant */

/* Form Layout */
.form-section {
    background: var(--mshp-white);
    border: 1px solid #ccd;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mshp-white);
    background: var(--mshp-navy);
    padding: 0.5rem 1rem;
    margin: -1.5rem -1.5rem 1.25rem;
    border-radius: 7px 7px 0 0;
}

/* Field Rows */
.field-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.field-row.cols-2-1 { grid-template-columns: 2fr 1fr; }
.field-row.cols-1-2 { grid-template-columns: 1fr 2fr; }
.field-row.cols-3-1 { grid-template-columns: 3fr 1fr; }
.field-row.cols-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.field-row.cols-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 600px) {
    .field-row.cols-2,
    .field-row.cols-3,
    .field-row.cols-4,
    .field-row.cols-2-1,
    .field-row.cols-1-2,
    .field-row.cols-3-1,
    .field-row.cols-2-1-1,
    .field-row.cols-1-1-1-1 {
        grid-template-columns: 1fr;
    }
}

/* Field Groups */
.field-group {
    display: flex;
    flex-direction: column;
}

/* Labels */
.field-group label,
.field-group > .label-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mshp-navy);
    margin-bottom: 0.3rem;
    display: block;
}
.field-group label .required {
    color: #c0392b;
    margin-left: 0.2rem;
}

/* Inputs & Textareas */
.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="tel"],
.field-group input[type="date"],
.field-group input[type="time"],
.field-group input[type="number"],
.field-group textarea,
.field-group select {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    border: 2px solid #aab;
    border-radius: 4px;
    background: var(--mshp-white);
    color: var(--mshp-text);
    width: 100%;
    transition: border-color 0.15s;
}
.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
    border-color: var(--mshp-blue);
    outline: var(--focus-ring);
    outline-offset: 1px;
}
.field-group textarea {
    resize: vertical;
    min-height: 6rem;
}

/* Checkbox & Radio Groups */
fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}
fieldset legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mshp-navy);
    margin-bottom: 0.5rem;
    padding: 0;
}
.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.checkbox-group label,
.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--mshp-text);
    cursor: pointer;
}
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    accent-color: var(--mshp-blue);
    cursor: pointer;
}

/* Yes/No Inline */
.yes-no-group {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
}

/* Signature Area */
.signature-area {
    border-top: 2px solid var(--mshp-navy);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}
.signature-area label {
    font-size: 0.8rem;
    color: var(--mshp-gray);
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #ccd;
}
.btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.15s, border-color 0.15s;
}
.btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
.btn-primary {
    background: var(--mshp-blue);
    color: var(--mshp-white);
}
.btn-primary:hover {
    background: var(--mshp-navy);
}
.btn-secondary {
    background: var(--mshp-white);
    color: var(--mshp-navy);
    border-color: var(--mshp-navy);
}
.btn-secondary:hover {
    background: var(--mshp-light);
}

/* Help Text */
.help-text {
    font-size: 0.8rem;
    color: var(--mshp-gray);
    margin-top: 0.2rem;
}

/* Form Notice */
.form-notice {
    background: #e8f4fd;
    border: 1px solid var(--mshp-blue);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--mshp-text);
}
.form-notice strong {
    color: var(--mshp-navy);
}

/* Error States */
.field-group.has-error input,
.field-group.has-error textarea,
.field-group.has-error select {
    border-color: #c0392b;
}
.field-error {
    color: #c0392b;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
.error-summary {
    background: #fdf0f0;
    border: 2px solid #c0392b;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.error-summary h2 {
    color: #c0392b;
    border-left: none;
    padding-left: 0;
    font-size: 1.1rem;
}
.error-summary ul {
    color: #c0392b;
}

/* MVI Use Only / Internal sections */
.internal-only {
    background: #f0f0f0;
    border: 2px dashed #999;
    border-radius: 6px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.internal-only .form-section-title {
    background: #4a4a4a;
    color: #ffffff;
}

/* Print Styles */
@media print {
    @page {
        margin: 0.6in 0.75in;
    }

    /* Hide web-only elements */
    .skip-link,
    .form-notice,
    .form-actions {
        display: none !important;
    }

    /* Base */
    body {
        font-size: 10pt;
        color: #000;
        background: #fff !important;
    }

    /* Header — compact centered banner */
    header[role="banner"] {
        text-align: center;
        border-bottom: 2px solid #000;
        padding-bottom: 0.4rem;
        margin-bottom: 0.75rem;
    }
    header .org-name {
        font-size: 11pt;
    }
    header .division-name {
        font-size: 9pt;
    }
    header h1 {
        font-size: 13pt;
        margin: 0.25rem 0 0;
    }

    /* Form sections */
    .form-section {
        border: 1px solid #333;
        break-inside: avoid;
        margin-bottom: 0.6rem;
        padding: 0.6rem;
    }
    .form-section-title {
        background: #1a3a5c !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
        padding: 0.25rem 0.6rem;
        font-size: 9pt;
        margin: -0.6rem -0.6rem 0.6rem;
        border-radius: 0;
    }

    /* Fields — underlined values for clean print look */
    .field-group input[type="text"],
    .field-group input[type="email"],
    .field-group input[type="tel"],
    .field-group input[type="date"],
    .field-group input[type="time"],
    .field-group input[type="number"],
    .field-group textarea,
    .field-group select {
        border: none !important;
        border-bottom: 1px solid #555 !important;
        border-radius: 0 !important;
        padding: 0.15rem 0.2rem;
        background: transparent !important;
        font-size: 10pt;
        min-height: auto;
    }
    .field-group textarea {
        border: 1px solid #555 !important;
        min-height: 3rem;
    }

    /* Labels — compact */
    .field-group label,
    .field-group > .label-text {
        font-size: 7.5pt;
        color: #333;
        margin-bottom: 0.1rem;
    }
    fieldset legend {
        font-size: 7.5pt;
        color: #333;
    }

    /* Radio/checkbox — preserve check state */
    .checkbox-group input[type="checkbox"],
    .radio-group input[type="radio"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    .checkbox-group label,
    .radio-group label {
        font-size: 9pt;
    }

    /* Grid gaps — tighter for print */
    .field-row {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* Internal/office-use sections */
    .internal-only {
        border: 1px dashed #666;
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    /* Help text */
    .help-text {
        font-size: 6.5pt;
        color: #666;
    }

    /* Required asterisk — keep visible */
    .field-group label .required {
        color: #000;
    }

    /* Footer — compact */
    footer[role="contentinfo"] {
        font-size: 7.5pt;
        border-top: 1px solid #333;
        margin-top: 0.75rem;
        padding-top: 0.3rem;
    }

    /* Links — don't append URLs in form context */
    a[href]::after {
        content: none !important;
    }
}