/* applyapplication — minimal, accessible form stylesheet
   Purpose: center and constrain the application form, provide compact, readable inputs,
   and keep visuals subtle and theme-friendly. This file intentionally focuses on form
   layout and basic elements; more complex table/DT styling can be added separately. */

:root {
    --ap-primary: #1f6feb; /* primary action */
    --ap-dark: #165fcb;
    --ap-muted: #374151; /* stronger muted / helper text */
    --ap-bg: #ffffff;
    --ap-border: #bfcfe0; /* stronger border for better contrast */
    --ap-surface: #f6f9fc; /* subtle surface */
    --ap-danger: #dc2626;
    --ap-radius: 8px;
    --ap-gap: 0.75rem;
    --ap-transition: 0.16s ease-in-out;
    --ap-fg: #071428; /* primary foreground */
    --ap-label: #071428; /* label color */
    --ap-placeholder: #94a3b8; /* placeholder text */
}

/* Container that centers the form on the page */
.applyapplication-container {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem;
}

/* Core form wrapper */
.applyapplication-form {
    width: 100%;
    max-width: 720px;
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(56, 72, 104, 0.12);
    box-sizing: border-box;
    position: relative;
}

.applyapplication-form::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ap-radius);
    padding: 2px;
    background: linear-gradient(135deg, rgba(31,111,235,0.18), rgba(79,70,229,0.08));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.applyapplication-form-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.applyapplication-form-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f1724;
}

.applyapplication-form-intro {
    color: var(--ap-muted);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

/* Sections inside the form */
.applyapplication-form-section {
    margin: 0.75rem 0;
    padding: 0.9rem;
    border-radius: calc(var(--ap-radius) - 2px);
    border: 1px solid rgba(147, 174, 212, 0.45);
    background: linear-gradient(135deg, rgba(244, 247, 255, 0.95), rgba(236, 244, 255, 0.8));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(12, 22, 48, 0.06);
}

.applyapplication-form-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: #0b1220;
}

/* Form groups and labels */
.applyapplication-form .fitem {
    margin-bottom: 0.75rem;
}

.applyapplication-form label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--ap-label);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Inputs, selects, textarea */
.applyapplication-form input[type="text"],
.applyapplication-form input[type="email"],
.applyapplication-form input[type="tel"],
.applyapplication-form select,
.applyapplication-form textarea {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(99, 122, 166, 0.35);
    border-radius: 8px;
    background: #fbfdff;
    font-size: 0.95rem;
    color: var(--ap-fg);
    transition: box-shadow var(--ap-transition), border-color var(--ap-transition);
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.applyapplication-form textarea { min-height: 120px; resize: vertical; }

.applyapplication-form input:focus,
.applyapplication-form select:focus,
.applyapplication-form textarea:focus {
    outline: none;
    border-color: rgba(31, 111, 235, 0.7);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.15), inset 0 0 0 1px rgba(31, 111, 235, 0.06);
    background: #fff;
}

.applyapplication-form .form-help {
    color: var(--ap-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Improved placeholder contrast */
.applyapplication-form input::placeholder,
.applyapplication-form textarea::placeholder {
    color: var(--ap-placeholder);
}

/* Compact action row */
.applyapplication-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.applyapplication-btn {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--ap-border);
    background: #fff;
    color: #0b1220;
    cursor: pointer;
}

.applyapplication-btn-primary {
    background: var(--ap-primary);
    color: #fff;
    border-color: var(--ap-primary);
}

.applyapplication-btn-primary:hover { background: var(--ap-dark); border-color: var(--ap-dark); }

.applyapplication-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Additional button variants used throughout templates */
.applyapplication-btn-secondary {
    background: transparent;
    color: var(--ap-muted);
    border-color: #e6edf8;
}
.applyapplication-btn-success {
    background: #059669;
    color: #fff;
    border-color: #059669;
}
.applyapplication-btn-success:hover { background: #047857; border-color: #047857; }
.applyapplication-btn-warning {
    background: #d97706;
    color: #fff;
    border-color: #d97706;
}
.applyapplication-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.applyapplication-btn-outline {
    background: transparent;
    color: var(--ap-muted);
    border-color: #e6edf8;
}
.applyapplication-btn-sm { padding: 0.375rem 0.6rem; font-size: 0.85rem; }

/* Status banners */
.applyapplication-status-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.applyapplication-alert {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: calc(var(--ap-radius) + 2px);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.08);
    color: var(--ap-muted);
}

.applyapplication-alert-icon {
    flex: 0 0 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(15, 23, 84, 0.08);
    color: var(--ap-primary);
}

.applyapplication-alert-heading {
    font-weight: 600;
    color: var(--ap-fg);
    margin-bottom: 0.4rem;
}

.applyapplication-alert-actions {
    margin-top: 0.75rem;
}

.applyapplication-alert-info {
    background: linear-gradient(135deg, #edf4ff 0%, #f8fbff 100%);
    border-color: #c7d7ff;
}

.applyapplication-alert-warning {
    background: linear-gradient(135deg, #fff7eb 0%, #fffaf0 100%);
    border-color: #f7cba0;
    color: #92400e;
}
.applyapplication-alert-warning .applyapplication-alert-icon {
    background: rgba(180, 83, 9, 0.15);
    color: #b45309;
}

.applyapplication-alert-danger {
    background: linear-gradient(135deg, #fff1f1 0%, #fff5f5 100%);
    border-color: #f3c2c2;
    color: #b91c1c;
}
.applyapplication-alert-danger .applyapplication-alert-icon {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.applyapplication-alert-success {
    background: linear-gradient(135deg, #ecfdf3 0%, #f5fff8 100%);
    border-color: #bbf7d0;
    color: #047857;
}
.applyapplication-alert-success .applyapplication-alert-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.applyapplication-alert-info .applyapplication-alert-icon {
    background: rgba(31, 111, 235, 0.14);
    color: var(--ap-primary);
}

/* Card components used in status/summary templates */
.applyapplication-card {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: calc(var(--ap-radius) - 2px);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(18, 38, 63, 0.03);
}
.applyapplication-card-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--ap-border);
    background: var(--ap-surface);
}
.applyapplication-card-body { padding: 0.75rem; }
.applyapplication-card-footer { padding: 0.5rem; border-top: 1px solid var(--ap-border); background: var(--ap-surface); }
.applyapplication-card-title { margin: 0; font-size: 1rem; font-weight: 600; color: #071428; }

.applyapplication-summary {
    color: var(--ap-fg);
    line-height: 1.55;
}
.applyapplication-summary dl {
    margin: 0;
}
.applyapplication-summary dt {
    font-weight: 600;
    color: var(--ap-fg);
    margin-top: 0.75rem;
}
.applyapplication-summary dd {
    margin: 0.2rem 0 0 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(15, 23, 65, 0.08);
}
.applyapplication-summary dd:last-child {
    border-bottom: none;
}

/* Table wrapper used around DataTables */
.applyapplication-table-wrapper {
    background: var(--ap-bg);
    border-radius: calc(var(--ap-radius) - 2px);
    padding: 0.4rem;
    border: 1px solid var(--ap-border);
    margin-bottom: 1rem;
}

/* Status badges */
.applyapplication-status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; }
.applyapplication-status-new { background: #e6f6fb; color: #067f98; }
.applyapplication-status-approved { background: #e6f8ef; color: #087f4a; }
.applyapplication-status-rejected { background: #fff0f0; color: #b31b1b; }
.applyapplication-status-paid, .applyapplication-status-enrolled { background: #e6f8ef; color: #087f4a; }
.applyapplication-status-payment-pending { background: #fff7e6; color: #a05a00; }

/* Support class-based controls rendered by the form class */
.applyapplication-form-control { padding: 0.5rem 0.75rem; border: 1px solid var(--ap-border); border-radius: 6px; background: #fff; font-size: 0.95rem; color: var(--ap-fg); box-sizing: border-box; }

/* Custom arrow for select elements inside plugin form (scoped) */
.applyapplication-form select.applyapplication-form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23343440' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2rem;
    color: var(--ap-fg);
    background-color: #fff;
}

/* Hide native dropdown marker in IE */
.applyapplication-form select::-ms-expand { display: none; }

/* Section header used in the form class (HTML fragments) */
.applyapplication-form-section-header { font-size: 1.05rem; font-weight: 700; color: #071428; margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--ap-border); }

/* Constrain long question rows and center them */
.applyapplication-form-section,
.applyapplication-form .fitem.row,
.applyapplication-form .fitem.form-group {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Small-screen adjustments */
@media (max-width: 640px) {
    .applyapplication-form { padding: 1rem; }
    .applyapplication-container { padding: 1rem; }
    .applyapplication-actions { justify-content: stretch; }
}

/* Small utilities */
.ap-hidden { display: none !important; }
.ap-muted { color: var(--ap-muted); }

/* Keep tables minimal but usable (basic styling preserved) */
.applyapplication-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.applyapplication-table th, .applyapplication-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid #eef3fb; text-align: left; }

/* File previews */
.applyapplication-attachments-grid {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.applyapplication-attachment-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.applyapplication-attachment-preview {
    position: relative;
    width: 100%;
    background: #f8fafc;
    border-radius: calc(var(--ap-radius) - 2px);
    overflow: hidden;
    min-height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.applyapplication-attachment-preview img,
.applyapplication-attachment-preview embed,
.applyapplication-attachment-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.applyapplication-attachment-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--ap-muted);
}
.applyapplication-attachment-info a {
    color: var(--ap-primary);
    text-decoration: none;
    word-break: break-word;
}
.applyapplication-attachment-info a:hover { text-decoration: underline; }

/* Accessibility: visibly indicate invalid fields */
.applyapplication-form .error { border-color: var(--ap-danger) !important; }

/* Management table: render application text plainly (no blue panels or heavy separators) */
.applyapplication-application-text,
.applyapplication-application-summary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}
.applyapplication-application-summary { display: block; }
.applyapplication-application-summary dt { font-weight: 600; color: inherit; margin: 0; padding: 0; float: left; width: 30%; }
.applyapplication-application-summary dd { margin: 0 0 0 32%; padding: 0 0 0.5rem 0; color: #111827; }
.applyapplication-application-text a { color: inherit; text-decoration: underline; }

/* =========================================================================
   Application review page (view_application.php) — two-column layout
   ========================================================================= */
.applyapp-review .card { margin-bottom: 1rem; }
.applyapp-review .card-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.applyapp-review dl.row { margin-bottom: 0; }
.applyapp-review dl.row dt { font-weight: 600; color: var(--ap-label); padding-top: 0.25rem; padding-bottom: 0.25rem; }
.applyapp-review dl.row dd { padding-top: 0.25rem; padding-bottom: 0.25rem; word-break: break-word; }

/* Sidebar sticks while the user scrolls through the (potentially long) application body */
@media (min-width: 992px) {
    .applyapp-sidebar {
        position: sticky;
        top: 1rem;
    }
}

/* Stack action buttons in the sidebar (narrow column) */
.applyapp-actions .btn { width: 100%; display: block; }
.applyapp-actions .btn + .btn { margin-top: 0.5rem; }

/* Constrain PDF/image previews inside the (narrower) main column */
.applyapp-review embed[type="application/pdf"] { max-height: 70vh; }
.applyapp-review img.img-fluid { max-height: 60vh; object-fit: contain; }
.applyapp-review ul { padding-left: 1.25rem; }

/* =========================================================================
   manage.php — compact table cells
   ========================================================================= */
.applyapplication-table td,
.applyapplication-table th { vertical-align: top; }

/* Applicant cell: name on top, email muted below */
.applyapplication-applicant { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; }
.applyapplication-applicant-name { font-weight: 600; color: var(--ap-fg); }
.applyapplication-applicant-email { font-size: 0.8rem; color: var(--ap-muted); word-break: break-all; }
.applyapplication-applicant-unverified {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.5rem;
    background: #fff7e6;
    color: #a05a00;
    border: 1px solid #f3c97c;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    width: max-content;
}

/* Application summary cell: compact State + Certification # rows */
.applyapplication-table td.applicationtext { max-width: 22rem; min-width: 12rem; }
.applyapplication-summary-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.1rem 0;
}
.applyapplication-summary-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--ap-label, #475569);
    min-width: 6.5rem;
}
.applyapplication-summary-value { color: var(--ap-fg); word-break: break-word; }

/* File chips inside the manage table */
.applyapplication-table td.applicationattachment { max-width: 16rem; }
.applyapplication-file-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.applyapplication-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem 0.15rem 0.25rem;
    background: var(--ap-bg, #f1f5f9);
    border: 1px solid var(--ap-border, #e2e8f0);
    border-radius: 9999px;
    font-size: 0.78rem;
    color: var(--ap-fg);
    text-decoration: none;
    max-width: 100%;
}
.applyapplication-file-chip:hover { background: #e2e8f0; text-decoration: none; }
.applyapplication-file-chip-type {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    background: #475569;
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}
.applyapplication-file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 10rem;
}

/* Tighten action button group */
.applyapplication-table td.action { white-space: nowrap; }
.applyapplication-table td.action a { margin-left: 0.25rem; }

/* =========================================================================
   view_application.php — header strip + form-data grid + sidebar sections
   ========================================================================= */
.applyapp-header-strip {
    padding: 0.6rem 0.9rem;
    background: var(--ap-bg, #f8fafc);
    border: 1px solid var(--ap-border, #e2e8f0);
    border-radius: var(--ap-radius, 8px);
    gap: 0.75rem;
}
.applyapp-header-identity { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.applyapp-header-name { font-size: 1.05rem; font-weight: 600; color: var(--ap-fg); }
.applyapp-header-actions { gap: 0.5rem; }

/* Form-answer list: each field is a row with a bold label followed inline by the value. */
.applyapp-fields { margin: 0; }
.applyapp-field {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ap-border, #e2e8f0);
    line-height: 1.5;
}
.applyapp-field:last-child { border-bottom: none; }
.applyapp-field-label {
    font-weight: 700;
    color: var(--ap-fg);
    margin-right: 0.4rem;
}
.applyapp-field-value {
    color: var(--ap-fg);
    word-break: break-word;
}
/* Long-form answers: wrap the value to a new line under the bold label */
.applyapp-field--wide .applyapp-field-label { display: block; margin-bottom: 0.25rem; }
.applyapp-field--wide .applyapp-field-value { display: block; }

/* Sidebar section divider inside the merged card */
.applyapp-sidebar-section + .applyapp-sidebar-section {
    border-top: 1px solid var(--ap-border, #e2e8f0);
    margin-top: 1rem;
    padding-top: 1rem;
}

/* Fallback file-type label inside attachment preview tiles */
.applyapplication-attachment-ext {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ap-muted, #64748b);
    letter-spacing: 0.05em;
}

/* Small-screen tweaks */
@media (max-width: 768px) {
    .applyapp-header-strip { flex-direction: column; align-items: flex-start; }
    .applyapp-field { padding: 0.4rem 0.5rem; }
}

/* Collapsible "hidden applications" section */
.applyapplication-hidden-section {
    margin-top: 1.5rem;
}
.applyapplication-hidden-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: #f1f5fb;
    border: 1px solid #d6e0f0;
    border-radius: 6px;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.applyapplication-hidden-toggle:hover {
    background: #e7eefb;
}
.applyapplication-hidden-caret {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.15s ease;
}
.applyapplication-hidden-toggle.is-open .applyapplication-hidden-caret {
    transform: rotate(180deg);
}
.applyapplication-hidden-panel {
    margin-top: 0.75rem;
}
.applyapplication-hidden-panel[hidden] {
    display: none;
}

/* ----------------------------------------------------------------------------
   Logged-out apply gate (apply.php) — "log in or create a free account" screen
   ---------------------------------------------------------------------------- */
.applyapp-login-gate {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 3rem;
}
.applyapp-login-gate-card {
    width: 100%;
    max-width: 460px;
    background: var(--ap-bg, #ffffff);
    border: 1px solid var(--ap-border, #bfcfe0);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(16, 42, 75, 0.08);
    padding: 2.25rem 2rem 1.75rem;
    text-align: center;
}
.applyapp-login-gate-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(31, 111, 235, 0.12);
    color: var(--ap-primary, #1f6feb);
    font-size: 1.6rem;
}
.applyapp-login-gate-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #1b2733;
}
.applyapp-login-gate-intro {
    color: var(--ap-muted, #374151);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 auto 1.6rem;
    max-width: 36ch;
}
.applyapp-login-gate-options {
    text-align: left;
}
.applyapp-login-gate-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #2d3640;
}
.applyapp-login-gate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    font-weight: 600;
}
.applyapp-login-gate-btn .fa {
    font-size: 0.95em;
}
.applyapp-login-gate-hint {
    display: block;
    text-align: center;
    color: #7a828c;
    font-size: 0.82rem;
    margin-top: 0.45rem;
}
.applyapp-login-gate-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #99a1aa;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.15rem 0;
}
.applyapp-login-gate-divider::before,
.applyapp-login-gate-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--ap-border, #bfcfe0);
}
.applyapp-login-gate-divider span {
    padding: 0 0.75rem;
}
@media (max-width: 480px) {
    .applyapp-login-gate-card {
        padding: 1.6rem 1.25rem;
    }
    .applyapp-login-gate-title {
        font-size: 1.35rem;
    }
}

/* ============================================================================
   Public application form (public_apply.php) — wide, professional, responsive.
   Scoped to this page id so the real /login screen is never affected.
   ============================================================================ */

/* 1. Widen lambda's login box while keeping it centered.
      .login-wrapper is a full-width flex container (justify-content:center) and #region-main
      is col-12 — constraining EITHER without auto margins anchors the box left. So we only
      widen the inner .login-container and center it (auto margins work in both flex + block). */
#page-enrol-applyapplication-public_apply .login-container {
    max-width: 1040px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Heading + "log in instead" prompt centered above the card. */
#page-enrol-applyapplication-public_apply .login-wrapper > h2,
#page-enrol-applyapplication-public_apply .applyapp-public-login-prompt {
    text-align: center;
}
#page-enrol-applyapplication-public_apply .applyapp-public-login-prompt {
    margin: 0 0 1.25rem;
    color: var(--ap-muted, #374151);
}

/* 3. The form itself becomes a clean, padded card. */
#page-enrol-applyapplication-public_apply .mform {
    background: var(--ap-bg, #fff);
    border: 1px solid var(--ap-border, #bfcfe0);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(16, 42, 75, 0.07);
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    text-align: left;
}

/* 4. Responsive field grid: 2+ columns on wide screens, 1 on mobile.
      auto-fit + minmax keeps it fluid (dynamic) with no breakpoints to maintain. */
#page-enrol-applyapplication-public_apply .mform .fcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.2rem 2rem;
    align-items: start;
}

/* 5. Each field stacks (label above input) and fills its cell. */
#page-enrol-applyapplication-public_apply .mform .fitem.row {
    display: block;
    margin: 0 0 1.1rem;
}
#page-enrol-applyapplication-public_apply .mform .fitem .col-form-label,
#page-enrol-applyapplication-public_apply .mform .fitem .felement {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
#page-enrol-applyapplication-public_apply .mform .fitem .col-form-label {
    text-align: left;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
#page-enrol-applyapplication-public_apply .mform .felement input[type="text"],
#page-enrol-applyapplication-public_apply .mform .felement input[type="email"],
#page-enrol-applyapplication-public_apply .mform .felement input[type="tel"],
#page-enrol-applyapplication-public_apply .mform .felement input[type="number"],
#page-enrol-applyapplication-public_apply .mform .felement select,
#page-enrol-applyapplication-public_apply .mform .felement textarea {
    width: 100%;
}

/* 6. Elements that must span the full grid width. */
#page-enrol-applyapplication-public_apply .mform .applyapplication-form-intro,
#page-enrol-applyapplication-public_apply .mform .applyapplication-form-section-header,
#page-enrol-applyapplication-public_apply .mform .applyapp-public-file-input,
#page-enrol-applyapplication-public_apply .mform #fitem_id_recaptcha_element,
#page-enrol-applyapplication-public_apply .mform #fitem_id_submitbutton {
    grid-column: 1 / -1;
}

/* Intro text spans the full width and is centered above the field columns. */
#page-enrol-applyapplication-public_apply .mform .applyapplication-form-intro {
    text-align: center;
    margin: 0 auto 1.5rem;
    max-width: 62ch;
    color: var(--ap-muted, #374151);
}

/* Supporting-documents file upload — clean vertical layout (label / input / hint),
   instead of everything running together on one line. */
#page-enrol-applyapplication-public_apply .applyapp-public-file-input {
    margin: 0 0 1.1rem;
}
#page-enrol-applyapplication-public_apply .applyapp-public-file-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #2d3640;
}
#page-enrol-applyapplication-public_apply .applyapp-public-file-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--ap-border, #bfcfe0);
    border-radius: 8px;
    background: var(--ap-surface, #f6f9fc);
    font-size: 0.95rem;
    box-sizing: border-box;
}
#page-enrol-applyapplication-public_apply .applyapp-public-file-hint {
    display: block;
    margin-top: 0.4rem;
}

/* Full-width section dividers with breathing room. */
#page-enrol-applyapplication-public_apply .mform .applyapplication-form-section-header {
    margin: 1.4rem 0 0.6rem;
    font-size: 1.1rem;
}

/* 7. Submit button — prominent; full-width on small screens. */
#page-enrol-applyapplication-public_apply .mform #id_submitbutton {
    padding: 0.6rem 2.25rem;
    font-weight: 600;
}
@media (max-width: 575px) {
    #page-enrol-applyapplication-public_apply .mform #id_submitbutton {
        width: 100%;
    }
}

/* Remove the non-functional collapse arrow on the form header (its toggle JS does not run on
   the login pagelayout). The section is force-expanded in PHP, so hiding the toggle is safe. */
#page-enrol-applyapplication-public_apply #id_public_intro_header .icons-collapse-expand,
#page-enrol-applyapplication-public_apply #id_public_intro_header .ftoggler {
    display: none !important;
}