/* Every rule below that gives a state-toggled element `display: X` is
   paired with an explicit `[hidden] { display: none; }` override for
   that same selector. This exact bug class (author CSS setting
   `display` without a [hidden] guard silently beats the browser's own
   [hidden] rule) was found and fixed 7 separate times across this
   project's history — the original instance was in this exact file
   (admission-lookup-state, 11 July). Not repeating it here. */

.admission-stepper { margin-bottom: var(--space-8); overflow-x: auto; }
.admission-stepper ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
    min-width: max-content;
}
.admission-stepper-item { display: flex; align-items: center; gap: var(--space-2); opacity: 0.5; }
.admission-stepper-item.is-active, .admission-stepper-item.is-complete { opacity: 1; }
.admission-stepper-dot {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-container-high);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}
.admission-stepper-item.is-active .admission-stepper-dot { background: var(--primary); color: #FFFFFF; }
.admission-stepper-item.is-complete .admission-stepper-dot { background: var(--md-success-container); color: var(--md-success); }
.admission-stepper-label { font-size: var(--text-xs); color: var(--text-light); white-space: nowrap; }

.admission-card { margin-bottom: var(--space-5); }
.admission-step-hint { color: var(--text-light); font-size: var(--text-sm); margin-bottom: var(--space-5); }

.admission-field-legend { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-light); }
.admission-radio-group { display: flex; gap: var(--space-5); margin-bottom: var(--space-2); }
.admission-radio { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }

.admission-lookup-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

.admission-lookup-state { padding: var(--space-4); border-radius: var(--radius-md); margin-top: var(--space-4); }
.admission-lookup-state[hidden] { display: none; }
.admission-lookup-state--found { background: var(--md-success-container); color: var(--md-success); }
.admission-lookup-state--empty { background: var(--surface-container); color: var(--text-light); }
.admission-lookup-state--error { background: var(--md-error-container); color: var(--md-error); }
.admission-lookup-state--error button { margin-top: var(--space-3); }

#admission-previous-school-fields[hidden] { display: none; }

.admission-document-list { display: flex; flex-direction: column; gap: var(--space-4); }
.admission-document-item[hidden] { display: none; }
.admission-document-item {
    padding: var(--space-4);
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-md);
}
.admission-document-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.admission-document-label { font-weight: var(--font-weight-medium); }
.admission-document-badge { font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-full); }
.admission-document-badge--required { background: var(--md-error-container); color: var(--md-error); }
.admission-document-badge--optional { background: var(--surface-container-high); color: var(--text-light); }

.admission-document-upload { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.admission-document-choose-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    cursor: pointer;
}
.admission-document-filename { font-size: var(--text-sm); color: var(--text-light); }

.admission-document-remove-btn {
    background: none;
    border: none;
    color: var(--danger);
    font-size: var(--text-lg);
    cursor: pointer;
    line-height: 1;
}
.admission-document-remove-btn[hidden] { display: none; }

.admission-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.admission-summary-header h3 { margin: 0; }
.admission-summary-edit-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

#admission-summary-previous-school-card[hidden] { display: none; }

.admission-duplicate-warning {
    background: var(--gold-light);
    border: 1.5px solid var(--gold);
    color: var(--on-gold-container, #2B1700);
}
.admission-duplicate-warning[hidden] { display: none; }

.admission-nav-actions { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }

/* Success screen */
.admission-success[hidden] { display: none; }
.admission-success { text-align: center; padding-block: var(--space-12); }
.admission-success-icon {
    width: 72px; height: 72px;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    background: var(--md-success-container);
    color: var(--md-success);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-3xl);
}
.admission-success-number { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--primary); margin: var(--space-4) 0 var(--space-8); }
.admission-success-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

/* Confirm dialog */
.admission-confirm-overlay[hidden] { display: none; }
.admission-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 28, 25, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: var(--space-5);
}
.admission-confirm-box { max-width: 420px; text-align: center; }
.admission-confirm-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.admission-confirm-actions .btn { flex: 1; }

@media (max-width: 640px) {
    .admission-nav-actions { flex-direction: column-reverse; }
    .admission-success-actions { flex-direction: column; }
}