@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@media screen, print {
    :root {
        --main-letter-type: "Roboto", Arial, Helvetica, sans-serif;
    }

    html,
    body,
    button,
    input,
    select,
    textarea,
    table,
    label,
    small,
    .eyebrow,
    .theme-field,
    .status-pill,
    .button-small,
    .data-table th,
    .index-pill,
    .audit-result,
    .count-badge,
    .muted,
    .brand strong,
    .brand small,
    .user-summary strong,
    .user-summary small {
        font-family: var(--main-letter-type);
        font-size: var(--main-letter-size);
    }

    h1 {
        font-size: calc(
            var(--main-letter-size) + var(--main-letter-size) + 4px
        );
    }

    h2 {
        font-size: calc(var(--main-letter-size) + 7px);
    }

    h3 {
        font-size: calc(var(--main-letter-size) + 3px);
    }

    .ui-icon,
    .nav-link > span[aria-hidden="true"],
    .folder-glyph,
    .empty-state > span[aria-hidden="true"] {
        display: inline-block;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        background-color: currentColor;
        font-size: 0;
        line-height: 0;
        -webkit-mask: var(--ui-icon) center / contain no-repeat;
        mask: var(--ui-icon) center / contain no-repeat;
    }

    .nav-link[href$="/"] > span[aria-hidden="true"],
    .ui-icon-home {
        --ui-icon: url("../icons/home.svg");
    }

    .nav-link[href$="/documents.php"] > span[aria-hidden="true"],
    .dashboard-card[href$="/documents.php"] .card-icon,
    .empty-state > span[aria-hidden="true"],
    .ui-icon-documents {
        --ui-icon: url("../icons/documents.svg");
    }

    .nav-link[href$="/admin/"] > span[aria-hidden="true"],
    .dashboard-card[href$="/admin/"] .card-icon,
    .ui-icon-admin {
        --ui-icon: url("../icons/admin.svg");
    }

    .nav-link[href$="/zip_import.php"] > span[aria-hidden="true"],
    .ui-icon-upload-zip {
        --ui-icon: url("../icons/upload-zip.svg");
    }

    .nav-link[href$="/trash.php"] > span[aria-hidden="true"],
    .ui-icon-trash {
        --ui-icon: url("../icons/trash.svg");
    }

    .nav-link[href$="/account.php"] > span[aria-hidden="true"],
    .ui-icon-account {
        --ui-icon: url("../icons/account.svg");
    }

    .nav-link[href$="/admin/users.php"] > span[aria-hidden="true"],
    .ui-icon-users {
        --ui-icon: url("../icons/users.svg");
    }

    .nav-link[href$="/admin/folders.php"] > span[aria-hidden="true"],
    .folder-glyph,
    .ui-icon-folders {
        --ui-icon: url("../icons/folders.svg");
    }

    .nav-link[href$="/admin/audit.php"] > span[aria-hidden="true"],
    .ui-icon-audit {
        --ui-icon: url("../icons/audit.svg");
    }

    .nav-link[href$="/admin/diagnostics.php"] > span[aria-hidden="true"],
    .ui-icon-diagnostics {
        --ui-icon: url("../icons/diagnostics.svg");
    }

    .dashboard-card .card-icon {
        color: var(--brand-600);
        background: currentColor;
        font-size: 0;
        -webkit-mask: var(--ui-icon) center / 24px 24px no-repeat;
        mask: var(--ui-icon) center / 24px 24px no-repeat;
    }

    .empty-state > span[aria-hidden="true"] {
        width: 32px;
        height: 32px;
    }
    .file-selection[role="alert"] {
        color: var(--danger);
        font-weight: 700;
    }

    button[aria-busy="true"] {
        cursor: wait;
        opacity: 0.75;
    }

    .diagnostic-limits {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .diagnostic-limit {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--surface-1);
        padding: 12px;
    }

    .diagnostic-limit strong,
    .diagnostic-limit span {
        display: block;
    }

    .diagnostic-log {
        max-height: 360px;
        overflow: auto;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--surface-1);
        padding: 14px;
        color: var(--text-color);
        font: var(--main-letter-size)/1.5 "Roboto Mono", Consolas, monospace;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}