/* Final semantic typography layer. Loaded after page modules by the base templates. */
body.app-shell,
body.login-page-v2 {
    font-family: var(--font-family-ui);
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

body.app-shell :where(button, input, select, textarea),
body.login-page-v2 :where(button, input, select, textarea) {
    font-family: inherit;
}

body.app-shell .app-main :where(.btn, button, input, select, textarea, label),
body.login-page-v2 :where(.btn, button, input, select, textarea, label) {
    font-size: var(--font-size-data);
    line-height: var(--line-height-compact);
}

body.app-shell .app-main :where(table, .table) {
    font-size: var(--font-size-data);
    line-height: var(--line-height-compact);
}

body.app-shell .app-main :where(table, .table) :where(th, td) {
    font-size: inherit;
}

body.app-shell .app-main :where(.app-page-titlebar__title, .ui-page-header h1) {
    font-size: var(--font-size-page-title);
    line-height: var(--line-height-tight);
}

body.app-shell .app-main :where(.modal-title, .ui-section-title, .ui-page-header h2) {
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-tight);
}

body.app-shell .app-main :where(small, .ui-caption, [data-ui-caption]),
body.login-page-v2 :where(small, .ui-caption, [data-ui-caption]) {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-compact);
}

body.app-shell .app-sidebar {
    font-size: var(--font-size-data);
    line-height: var(--line-height-compact);
}

@media (max-width: 767.98px) {
    /* Final layer: page modules may size controls for desktop, but phones use
       one shared readable and touch-safe contract. */
    body.app-shell .app-main :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    body.app-shell .app-main :where(button, a.btn, .btn) {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }
}