body {
    background-color: var(--color-bg-page);
    font-family: var(--font-family-base);
    color: var(--color-text-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-heading);
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
}

.empty-state-text {
    font-size: var(--font-size-base);
    color: var(--color-text-subtle);
}

/* Shared modal text/layout primitives — used by the global forgot-password
   modal (rendered on every page) as well as many page-specific modals. */
.modal-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

.modal-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
}

.modal-divider {
    border-color: var(--color-border, #e0e0e0);
}

.modal-detail-list {
    font-size: var(--font-size-sm);
}

.feedback-hidden {
    display: none !important;
}

/* Read-only form fields: grey them out and show a not-allowed cursor
   so it's visually obvious the value can't be edited. */
.form-control[readonly],
.form-select[readonly] {
    background-color: var(--color-bg-table-alt);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

/* Recommended-size hint shown under photo/file upload inputs */
.form-photo-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

.form-photo-error {
    font-size: var(--font-size-xs);
}

/* Submit button disabled while the selected photo exceeds the size limit */
.btn.photo-blocked,
.btn.photo-blocked:disabled {
    pointer-events: auto;
    cursor: not-allowed;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    opacity: .65;
}