/*
    app.css - Global styles for SDxMultiDocumentWork template.

    Kept intentionally minimal. This file provides only the foundational reset
    needed for the SDx iframe context. All project-specific styles belong in
    scoped component CSS files (ComponentName.razor.css).

    FUTURE PROJECT NOTE:
    Add shared utility classes or CSS custom properties here only if they are
    truly global and needed across all components. Prefer scoped CSS files.
*/

/* ── Universal box model reset ───────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Root viewport fill ──────────────────────────────────────────── */
/* Ensures the app fills the SDx iframe exactly with no scroll leakage */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #323130;
    background-color: #f3f2f1;
}

/* ── Scrollable regions ──────────────────────────────────────────── */
/* Apply .sdx-scroll to any inner container that needs scroll */
.sdx-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Focus ring ──────────────────────────────────────────────────── */
/* Respect SDx's existing focus styling; only show ring on keyboard nav */
:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}