/* =====================================================================================================================
   App shell: header, navigation drawer, page frame and boot screen (Shared/MainLayout.razor, Shared/NavMenu.razor).
   Ported from the component library demo shell (DWSBlazorComponentLibrary-Demo.Wasm/wwwroot/css/demo-shell.css).
   Mobile first; colours come from the theme's CSS variables only, so the shell follows the Dark and Light themes.
   ===================================================================================================================== */

:root {
    /* Fluid spacing: grows with the viewport between a phone and a wide desktop. */
    --app-space-1: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);
    --app-space-2: clamp(0.75rem, 0.55rem + 1vw, 1.5rem);
    --app-space-3: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);
    --app-gutter: clamp(0.75rem, 0.45rem + 1.5vw, 2rem);
    --app-radius: 14px;
    --app-hairline: color-mix(in srgb, var(--text) 12%, transparent);
    /* Muted text that still reads 4.5:1 on the background and the surface in both themes. */
    --app-muted: color-mix(in srgb, var(--text) 78%, var(--surface));
    --app-accent-text: color-mix(in srgb, var(--primary) 55%, var(--text));
    --app-header-height: 56px;
}

/* The WASM root fills the screen and never makes the page wider than the viewport (no layout shift on first paint).
   The library makes <body> a centring flex container: without flex-grow #app shrank to its content, and the whole app
   sat in a ~780px column in the middle of a desktop screen. */
#app {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    min-width: 0;
    background-color: var(--background);
    color: var(--text);
}

/* ---------------------------------------------------------------------------------------------------------------------
   Header: compact, always on top (the page scrolls inside the drawer container below it).
   --------------------------------------------------------------------------------------------------------------------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 6;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-sizing: content-box;
    height: var(--app-header-height);
    /* Clear of the notch / status bar and the rounded corners in landscape (viewport-fit=cover). */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(0.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.25rem, env(safe-area-inset-right, 0px));
    background-color: var(--navbar);
    color: var(--text);
    border-bottom: 1px solid var(--app-hairline);
    box-shadow: 0 2px 12px -6px color-mix(in srgb, var(--black, #000) 45%, transparent);
}

.app-header__toggle,
.app-header__actions {
    flex: 0 0 auto;
}

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* 44 x 44 touch targets for every header button (the notification bell included). */
.app-header .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.25rem;
}

/* The logo is a DwsImage: its wrapper is the flex item, and the circle outranks the image's Shape class. */
.app-brand > .dws-image-wrapper {
    display: flex;
    flex: 0 0 auto;
}

.app-brand .dws-image.app-brand__logo {
    border-radius: 50%;
}

.app-brand__logo {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--primary);
    cursor: pointer;
}

.app-brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    line-height: 1.2;
}

.app-brand__eyebrow,
.app-brand__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-brand__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-accent-text);
}

.app-brand__title {
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

@media (max-width: 379.98px) {
    .app-brand {
        gap: 0.5rem;
        padding-left: 0;
    }

    .app-brand__logo {
        width: 32px;
        height: 32px;
    }

    /* The eyebrow is decoration: on the smallest phones the product name gets the room. */
    .app-brand__eyebrow {
        display: none;
    }
}

@media (min-width: 992px) {
    :root {
        --app-header-height: 60px;
    }

    .app-header {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Navigation drawer
   --------------------------------------------------------------------------------------------------------------------- */

/* As an overlay (below lg) the drawer leaves at least 15% of the screen for the backdrop, which closes it on a tap. */
.app-shell .dws-drawer--overlay {
    max-width: min(300px, 85vw);
}

.app-shell .dws-drawer__content {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}

/* Comfortable rows on touch screens and in the overlay drawer: 44px items, search field and clear button. */
@media (max-width: 991.98px), (pointer: coarse) {
    .app-shell .dws-drawer .dws-list-item {
        min-height: 44px;
    }

    .app-shell .dws-drawer .input-group .form-control,
    .app-shell .dws-drawer .dws-adornment {
        min-height: 44px;
    }

    .app-shell .dws-drawer .dws-adornment {
        min-width: 44px;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Page frame
   --------------------------------------------------------------------------------------------------------------------- */

.app-shell .dws-main-content {
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    min-width: 0;
}

/* Sign-in pages (no header, no drawer): the page itself scrolls and keeps clear of the notch and the home indicator. */
.app-main--public {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.app-shell .basepage {
    padding-inline: var(--app-gutter);
}

/* Phones: the page-tool handles in the bottom corners are 44px tall, a little see-through until used, and the page
   ends with room below its last line so nothing stays hidden under them (or under the home indicator). */
@media (max-width: 575.98px) {
    .app-shell .dws-basepage-frame {
        --dws-basepage-anchor-button-size: 2.75rem;
        --dws-basepage-anchor-margin: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .app-shell .dws-basepage-anchor__handle {
        opacity: 0.8;
    }

    .app-shell .dws-basepage-anchor__handle:hover,
    .app-shell .dws-basepage-anchor__handle:focus-visible,
    .app-shell .dws-basepage-anchor__handle[aria-expanded="true"] {
        opacity: 1;
    }

    .app-shell .basepage {
        padding-bottom: calc(2.75rem + 24px);
    }
}

/* Touch screens: buttons, tabs and form controls of at least 44px (WCAG 2.5.5 / Apple HIG); icon buttons included. */
@media (pointer: coarse) {
    .app-shell main .btn:not(.btn-sm):not(.btn-link),
    .app-shell main .dws-tab-header,
    .app-shell main .form-select,
    .app-shell main .form-control {
        min-height: 44px;
    }

    .app-shell main .btn.dws-btn-icon,
    .app-shell main .btn[class*="icon"] {
        min-width: 44px;
    }
}

/* iOS Safari zooms into any focused field with a font size below 16px; keep the fields at 16px on touch screens. */
@media (pointer: coarse) {
    input, select, textarea, .form-control, .form-select {
        font-size: max(16px, 1em);
    }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Boot screen (wwwroot/index.html), until the WebAssembly runtime replaces #app's content.
   Blazor sets --blazor-load-percentage on <html> while it downloads.
   --------------------------------------------------------------------------------------------------------------------- */

.app-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 100vh;
    min-height: 100dvh;
    padding: env(safe-area-inset-top, 0px) 1rem env(safe-area-inset-bottom, 0px);
    background-color: var(--background, #151528);
    color: var(--text, #e8e8f0);
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.app-boot__logo {
    width: 72px;
    height: 72px;
    padding: 8px;
    border-radius: 50%;
    background-color: var(--primary, #6aa3a0);
}

.app-boot__title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.app-boot__bar {
    width: min(240px, 60vw);
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--text, #e8e8f0) 15%, transparent);
}

.app-boot__bar > span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 8%);
    background-color: var(--primary, #6aa3a0);
    transition: width 0.2s ease-out;
}

.app-boot__text {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--text, #e8e8f0) 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .app-boot__bar > span {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Page header (Shared/AppPageHeader.razor): one h1 per page, a muted lead line, actions that wrap below on phones.
   --------------------------------------------------------------------------------------------------------------------- */

.app-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--app-space-1) var(--app-space-2);
    margin: var(--app-space-2) 0 var(--app-space-2);
}

.app-page-header__main {
    flex: 1 1 22rem;
    min-width: 0;
}

.app-page-header__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.app-page-header__icon {
    flex: 0 0 auto;
}

.app-page-header .app-page-header__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.app-page-header .app-page-header__lead {
    margin: 0.4rem 0 0;
    max-width: 75ch;
    font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
    color: var(--app-muted);
}

.app-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .app-page-header__actions {
        width: 100%;
    }
}

/* Touch screens: the library's page bar has a clickable permission shield (DwsIcon, 16 x 17) and the page-tools
   handles at the edges are 24px wide. Give both a finger-sized hit area without changing how they look. */
@media (pointer: coarse) {
    .app-shell main i.bi-shield-lock-fill,
    .app-shell main i.bi-shield-fill-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .app-shell .dws-basepage-frame {
        --dws-basepage-anchor-handle-width: 32px;
    }
}

/* Touch screens: every button, tab and filter chip in the page gets a 44px row height (the compact btn-sm buttons,
   chip filters and section tabs were 30px), and the sort headers of the grids and the id links in the log viewer a
   44px hit area. Checkboxes keep their 24px box: their label is part of the target (WCAG 2.5.8). */
@media (pointer: coarse) {
    .app-shell main :is(.btn, [role="tab"], .dws-chip__main, .dws-tab-header) {
        min-height: 44px;
    }

    .app-shell main :is(th a, th button, th [role="button"], .datagrid-container th .sortable, .dws-log-viewer__cell--trace :is(a, button)) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Touch screens: the area tab strips (Email, Security) are link lists in a <nav>; 44px rows like the drawer's. */
@media (pointer: coarse) {
    .app-shell main nav :is(a, .dws-link) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Touch screens: text links ("All incidents", "Details on the posture page") get a taller tap area. Vertical padding on
   an inline link grows its hit box (to about 44px) without changing the line layout around it. */
@media (pointer: coarse) {
    .app-shell main a.dws-link:not(.btn) {
        padding-block: 6px;
    }
}

/* ---- Stat tiles (Shared/AppStatCard.razor) ---- */
.app-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--app-space-1);
    margin-bottom: var(--app-space-2);
}
.app-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--app-space-2);
    border: var(--app-hairline);
    border-radius: var(--app-radius);
    min-width: 0;
}
.app-stat-card--clickable { cursor: pointer; }
.app-stat-card--clickable:hover { border-color: var(--dws-color-primary, currentColor); }
.app-stat-card__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-stat-card__label { font-size: .875rem; color: var(--app-muted); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.app-stat-card__value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-stat-card__hint { font-size: .8125rem; color: var(--app-muted); }

/* ---- Empty state ---- */
.app-empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--app-space-1); padding: var(--app-space-3) var(--app-space-2);
    border: var(--app-hairline); border-radius: var(--app-radius);
}
.app-empty-state__text { color: var(--app-muted); max-width: 45ch; margin: 0; }

/* ---- Filter bars: one row on desktop, fields stacked full width on phones ----
   Markup: .app-filter-bar > (.app-filter-bar__fields > fields...) + .app-filter-bar__actions > buttons.
   Fields may also sit directly in .app-filter-bar. */
.app-filter-bar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--app-space-1);
    margin-bottom: var(--app-space-2);
}
.app-filter-bar__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--app-space-1);
    flex: 1 1 auto;
    min-width: 0;
}
.app-filter-bar > :not(.app-filter-bar__fields):not(.app-filter-bar__actions),
.app-filter-bar__fields > * { flex: 1 1 180px; min-width: 0; max-width: 360px; }
.app-filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-1);
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
@media (max-width: 575.98px) {
    .app-filter-bar,
    .app-filter-bar__fields { flex-direction: column; align-items: stretch; }
    .app-filter-bar > :not(.app-filter-bar__fields):not(.app-filter-bar__actions),
    .app-filter-bar__fields > * { flex: 0 0 auto; width: 100%; max-width: none; }
    .app-filter-bar__actions { margin-left: 0; width: 100%; }
}

/* ---- Sub-navigation: one horizontally scrollable row on phones ---- */
@media (max-width: 767.98px) {
    .app-subnav-scroll {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
        min-width: 0; max-width: 100%; flex: 1 1 100%; padding-right: 24px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
    .app-subnav-scroll::-webkit-scrollbar { display: none; }
    .app-subnav-scroll > * { flex: 0 0 auto; white-space: nowrap; }
    .app-subnav-scroll .app-subnav-divider { display: none; }
}

/* ---- Long prose: readable line length ---- */
.app-prose p, .app-prose li, .app-page-header__lead { max-width: 70ch; }
.app-stat-card--error { border-top: 3px solid var(--error, #d32f2f); }
.app-stat-card--warning { border-top: 3px solid var(--warning, #ed6c02); }
.app-stat-card--success { border-top: 3px solid var(--success, #2e7d32); }
.app-stat-card__hint { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Phones: the library's page bar (breadcrumb + permission shield + "reload, last updated <time>") took two rows and
   ~250px. One row: the breadcrumb gets the room, the reload button shows only its icon (its aria-label still carries
   the time, WCAG 2.5.3), the shield and reload sit at the end. */
@media (max-width: 575.98px) {
    .app-shell .dws-basepage-navbar {
        flex-wrap: nowrap;
        gap: 0.25rem;
        min-height: 48px;
    }

    .app-shell .dws-basepage-navbar > .float-end {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .app-shell .dws-basepage-navbar .dws-breadcrumb,
    .app-shell .dws-basepage-navbar > :first-child {
        min-width: 0;
        overflow: hidden;
    }

    .app-shell .dws-basepage-refresh {
        font-size: 0;
        min-width: 44px;
        justify-content: center;
    }

    .app-shell .dws-basepage-refresh .dws-icon {
        font-size: 1.15rem;
        margin-right: 0 !important;
    }
}