/* Common visual components and desktop presentation.
 * Phone/tablet composition belongs exclusively to ui-mobile.css.
 * Loaded after page CSS so each role uses the same visual contract.
 */
@import url("design-tokens.css");

body.mds-ui {
    font-family: var(--mds-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--mds-ink);
    background: var(--mds-bg-soft);
}

body.mds-ui::before,
body.mds-ui::after {
    display: none;
}

.mds-ui :is(button, input, select, textarea) {
    font-family: inherit;
}

.mds-ui :is(h1, h2, h3, p) {
    overflow-wrap: anywhere;
}

.mds-ui :is(h1, h2, h3) {
    color: var(--mds-ink);
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.mds-ui :is(.view-title, .dashboard-heading h1) {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
}

.mds-ui :is(.subtle, .hint, .auth__subtitle, .actions > div > p) {
    color: var(--mds-muted);
    line-height: 1.6;
}

.mds-ui :is(.actions, .dashboard-heading, .section-head, .widget-header) {
    gap: var(--mds-space-4);
}

.mds-ui :is(.actions, .dashboard-heading) {
    margin-bottom: var(--mds-space-6);
}

.mds-ui
    :is(
        .layout > main,
        .campaign-submissions-page,
        .campaign-submissions-results,
        .course-form__grid,
        .course-form__main,
        .course-form__side
    ) {
    min-width: 0;
}

.mds-ui
    :is(
        .card,
        .widget,
        .course-card,
        .module-card,
        .lesson-card,
        .course-module-card,
        .student-card,
        .commission-card,
        .admin-summary-card,
        .upload-card,
        .asset-card,
        .auth__card,
        .legal-card,
        .campaign-detail-card,
        .campaign-overview-card,
        .campaign-content-box,
        .bible-saved__panel,
        .task-correction-card,
        .pastoral-ai__support
    ) {
    border: 1px solid var(--mds-border-soft);
    border-radius: var(--mds-radius-card);
    background: var(--mds-surface);
    color: var(--mds-ink);
    box-shadow: var(--mds-shadow);
    min-width: 0;
}

.mds-ui
    :is(
        .card:hover,
        .widget:hover,
        .course-card:hover,
        .admin-summary-card:hover
    ) {
    transform: none;
    box-shadow: var(--mds-shadow);
}

.mds-ui :is(.card, .widget) {
    padding: var(--mds-space-6);
}

.mds-ui :is(.card p, .course-card p, .widget > p) {
    color: var(--mds-muted);
}

.mds-ui
    :is(.btn, .campaign-detail-button, .auth__submit, .campaign-dialog-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mds-space-2);
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--mds-radius-control);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    background: var(--mds-action);
    color: var(--mds-on-action);
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease;
}

html
    body.mds-ui
    :is(.btn:hover, .campaign-detail-button:hover, .auth__submit:hover) {
    background: var(--mds-action-hover);
    color: var(--mds-on-action);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

html
    body.mds-ui
    :is(
        .btn-secondary,
        .btn--ghost,
        .view-back-button,
        .campaign-dialog-close
    ) {
    background: var(--mds-surface);
    color: var(--mds-link);
    border-color: var(--mds-border);
    box-shadow: none;
}

html
    body.mds-ui
    :is(
        .btn-secondary:hover,
        .btn--ghost:hover,
        .view-back-button:hover,
        .campaign-dialog-close:hover
    ) {
    background: var(--mds-surface-soft);
    color: var(--mds-link);
    border-color: var(--mds-accent);
}

html body.mds-ui :is(.btn-danger, .btn-danger:hover) {
    background: var(--mds-danger-soft);
    color: var(--mds-danger);
    border-color: var(--mds-danger);
}

html body.mds-ui :is(.btn-success, .btn-success:hover) {
    background: var(--mds-success-soft);
    color: var(--mds-success);
    border-color: var(--mds-success);
}

.mds-ui :is(.btn:disabled, .btn.is-disabled, button:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.mds-ui :is(.icon-btn, .btn-icon-only) {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.mds-ui
    :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--mds-focus);
    outline-offset: 3px;
}

html
    body.mds-ui
    :is(
        input:not([type="checkbox"]):not([type="radio"]):not(
                [type="range"]
            ):not([type="color"]):not([type="hidden"]):not([type="submit"]):not(
                [type="button"]
            ),
        select,
        textarea
    ) {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-control);
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.5;
    text-align: start;
    background: var(--mds-surface);
    color: var(--mds-ink);
    box-shadow: none;
}

.mds-ui :is(input, textarea)::placeholder {
    color: var(--mds-muted);
    opacity: 1;
}

.mds-ui :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--mds-action);
    flex-shrink: 0;
}

.mds-ui :is(.form-grid, .profile-form, .auth__form) {
    gap: var(--mds-space-4);
}

.mds-ui :is(.form-grid label, .auth__field label) {
    color: var(--mds-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: start;
}

.mds-ui
    :is(.form-actions, .student-actions, .section-actions, .filter-actions) {
    gap: var(--mds-space-2);
    flex-wrap: wrap;
}

.mds-ui :is(.filters__group, .filters__actions) {
    min-width: 0;
}

.mds-ui .filters__actions {
    flex-wrap: wrap;
}

.mds-ui .filters__actions .btn {
    min-width: 0;
    flex: 1 1 100px;
}

.mds-ui .publication-switch {
    position: relative;
    min-height: 44px;
}

.mds-ui .publication-switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
}

.mds-ui [data-avatar-fallback].user-avatar-fallback {
    background: var(--mds-action);
    color: var(--mds-on-action);
}

html body.mds-ui dialog {
    border: 1px solid var(--mds-border-soft);
    border-radius: var(--mds-radius-dialog);
    background: var(--mds-surface);
    color: var(--mds-ink);
    box-shadow: var(--mds-dialog-shadow);
    max-width: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

.mds-ui dialog::backdrop {
    background: rgba(11, 15, 25, 0.5);
}

html body.mds-ui :is(.modal-header, .modal-footer) {
    gap: var(--mds-space-3);
    padding: var(--mds-space-4) var(--mds-space-6);
    background: var(--mds-surface-soft);
    border-color: var(--mds-border-soft);
    flex-wrap: wrap;
}

.mds-ui .modal-body {
    padding: var(--mds-space-6);
    max-height: none;
    overflow: visible;
}

.mds-ui .modal-header > :is(strong, h2, h3) {
    flex: 1 1 160px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mds-ui
    :is(.table-scroll, .mds-table-scroll, .campaign-submissions-table-wrapper) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: var(--mds-radius-card);
}

html body.mds-ui table {
    background: var(--mds-surface);
    border-color: var(--mds-border-soft);
}

html body.mds-ui :is(th, td) {
    border-color: var(--mds-border-soft);
    line-height: 1.5;
}

html body.mds-ui th {
    color: var(--mds-muted);
    background: var(--mds-surface-soft);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: normal;
}

.mds-ui :is(td, .list-item, .notification-item) {
    overflow-wrap: anywhere;
}

.mds-ui .app > header {
    background: #12365c;
    box-shadow: none;
}

.mds-ui .layout > aside {
    background: var(--mds-surface);
    border-color: var(--mds-border-soft);
    box-shadow: none;
}

.mds-ui :is(.dropdown, .mobile-menu-toggle) {
    background: var(--mds-surface);
    color: var(--mds-ink);
    border-color: var(--mds-border-soft);
    border-radius: var(--mds-radius-control);
    box-shadow: var(--mds-shadow);
}

.mds-ui .dropdown a {
    color: var(--mds-ink);
    min-height: 44px;
}

.mds-ui :is(.admin-summary-card, .metric) {
    background: var(--mds-surface);
    color: var(--mds-ink);
    border-radius: var(--mds-radius-card);
    border-color: var(--mds-border-soft);
    box-shadow: none;
}

.mds-ui :is(.admin-summary-card strong, .metric-value) {
    color: var(--mds-ink);
    letter-spacing: -0.03em;
}

.mds-ui :is(.admin-shortcut, .admin-featured-card) {
    background: var(--mds-surface-soft);
    color: var(--mds-link);
    border: 1px solid var(--mds-border-soft);
    border-radius: var(--mds-radius-card);
    box-shadow: none;
}

.mds-ui :is(.auth, .hero, .features, .team, .cta, .legal-page) {
    background-color: var(--mds-bg-soft);
}

.mds-ui .auth {
    background-image: none;
}

.mds-ui :is(.auth__card, .campaign-public-card) {
    width: min(100%, 520px);
}

.mds-ui .auth__actions .btn {
    min-height: 44px;
    font-size: 1rem;
    box-shadow: none;
}

.mds-ui .auth__password-field input {
    padding-right: 52px;
}

.mds-ui .auth__password-toggle {
    width: 44px;
    height: 44px;
    right: 4px;
}

.mds-ui :is(.auth__header h1, .legal-page__title) {
    color: var(--mds-ink);
}

@media (prefers-reduced-motion: reduce) {
    .mds-ui *,
    .mds-ui *::before,
    .mds-ui *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}