/* Structural styles for the cabinet shell: header, sidebar brand block,
   user area, and the responsive drawer behavior for narrow viewports. */

/* ---------- Header ---------- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-inline: var(--uzex-space-2) var(--uzex-space-4);
}

.app-header-start {
    display: flex;
    align-items: center;
    gap: var(--uzex-space-2);
    min-width: 0;
}

.app-page-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--uzex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Header end controls (language, appearance, profile) ---------- */
.app-header-end {
    display: flex;
    align-items: center;
    gap: var(--uzex-space-2);
    flex: none;
}

.app-lang-select-wrap {
    display: flex;
    align-items: center;
    gap: var(--uzex-space-1);
}

.app-lang-select {
    width: auto;
    min-width: 3.75rem;
}

.app-lang-full {
    display: inline;
}

.app-lang-compact {
    display: none;
    font-weight: 600;
}

@media (max-width: 768px) {
    .app-lang-full {
        display: none;
    }

    .app-lang-compact {
        display: inline;
    }

    .app-lang-select {
        min-width: 2.75rem;
    }
}

.app-appearance-toggle-wrap {
    display: flex;
    align-items: center;
    flex: none;
}

/* ---------- Header user area ---------- */
.app-user {
    display: flex;
    align-items: center;
    gap: var(--uzex-space-3);
}

.app-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--uzex-radius-full);
    background: var(--uzex-blue-600);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.app-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: start;
}

.app-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--uzex-text);
}

.app-user-role {
    font-size: 0.75rem;
    color: var(--uzex-text-muted);
}

/* ---------- Sidebar brand block ---------- */
/* Two logo assets are always rendered; CSS decides which one is visible so
   swapping never needs a re-render. The compact mark shows at the 80px
   rail width, the full lockup shows once the rail is pinned or hover-
   expanded (see the icon-rail rules further down). */
.app-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uzex-space-3);
    height: var(--uzex-header-height);
    padding-inline: var(--uzex-space-4);
    flex: none;
    overflow: hidden;
}

.app-brand-logo-full,
.app-brand-mark-compact {
    display: block;
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex: none;
    background: transparent;
}

/* Default (mobile drawer, and any width below the icon-rail breakpoint):
   the sidebar is always shown at full width there, so the full lockup is
   the right default. The desktop media query below flips this default
   for the collapsed 80px rail specifically. */
.app-brand-mark-compact {
    display: none;
}

.app-sidebar-scroll {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--uzex-navy-900);
}

/* ---------- Sidebar navigation sections ---------- */
/* Groups the nav into labeled sections (Main/Content/System/Settings), each
   its own RadzenPanelMenu so a top-level item never accidentally shares an
   accordion group with a different section. The section label itself is a
   plain, non-interactive heading - not a RadzenPanelMenuItem - since it must
   never be clickable or navigate. */
.app-nav {
    display: flex;
    flex-direction: column;
    gap: var(--uzex-space-2);
    padding-block-end: var(--uzex-space-3);
}

.app-nav-section-label {
    padding: var(--uzex-space-3) var(--uzex-space-4) var(--uzex-space-1);
    color: var(--uzex-text-inverse-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron on the left, before the icon and label. Radzen's own markup order
   (confirmed live: <i class="rz-navigation-item-icon"> then
   <span class="rz-navigation-item-text"> then, last,
   <i class="rz-navigation-item-icon-children"> for the expand/collapse
   arrow) puts the chevron last and pushes it to the far right via
   margin-inline-start:auto on a flex row (.rz-navigation-item-link is
   display:flex - also confirmed live). order:-1 moves it visually to the
   front without touching the DOM/tab order; the auto margin is replaced
   with a fixed trailing gap since "auto" only makes sense for a trailing
   item. */
.rz-panel-menu .rz-navigation-item-icon-children {
    order: -1;
    margin-inline: 0 var(--uzex-space-2);
}

/* Level 2 (page) items never get this arrow - confirmed via Radzen's own
   shipped CSS rule hiding it on any .rz-navigation-item with no nested
   .rz-expander - so no extra rule is needed to suppress it here. */

/* Subtle nested guide line, shared by every indentation depth (2nd level
   today, 3rd level once it exists) since the selector matches any
   .rz-navigation-menu regardless of nesting depth. Purely decorative and
   absolutely positioned, so it never affects the offset/padding tokens
   that place the actual indentation. */
.rz-panel-menu .rz-navigation-menu {
    position: relative;
}

.rz-panel-menu .rz-navigation-menu::before {
    content: "";
    position: absolute;
    inset-block: var(--uzex-space-1);
    inset-inline-start: 2rem;
    width: 1px;
    background: var(--uzex-navy-600);
    pointer-events: none;
}

/* Level 3 (reserved for future sub-pages): one more visible indentation
   step and smaller/more muted than level 2. Radzen ships 3rd-level color/
   background tokens (used via --rz-panel-menu-item-3rd-level-* above) but
   no 3rd-level font-size or offset token, so those two are plain overrides
   here against the confirmed-real, non-guessed selector depth that Radzen's
   own CSS uses for the 3rd-level wrapper
   (.rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper). */
.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link {
    padding-inline-start: 6rem;
    font-size: 0.75rem;
}

/* Parent "contains the active child" state: weaker than the active leaf's
   own accent (var(--uzex-blue-700) background + left indicator, set via
   the --rz-panel-menu-item-active-* tokens above) so an expanded-but-not-
   active group never looks the same as the active one. :has() targets the
   confirmed-real .rz-navigation-item-wrapper-active class Radzen applies
   to the active leaf's own wrapper; :not(:hover) keeps the hover state
   (same tokens as every other row) visually on top while the pointer is
   actually over the row. */
.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-item-wrapper-active) > .rz-navigation-item-wrapper:not(:hover) {
    background-color: var(--uzex-navy-800) !important;
}

/* ---------- Content area ---------- */
.app-content {
    box-sizing: border-box;
    min-height: 100%;
    padding: var(--uzex-space-6);
}

@media (max-width: 768px) {
    .app-content {
        padding: var(--uzex-space-4);
    }
}

/* ---------- Desktop icon-rail sidebar ---------- */
/* Above the tablet breakpoint the sidebar is a permanent in-flow column
   that is either "collapsed" (Radzen's own class, reinterpreted here as
   an 80px icon rail instead of its default width:0) or "expanded" (the
   270px pinned state, toggled by RadzenSidebarToggle via @bind-Expanded).
   Focusing into (keyboard) or hovering (pointer devices only) a collapsed
   rail previews the expanded width without touching the grid track, so
   the body never reflows: only the absolutely-positioned
   .app-sidebar-scroll grows and overlays the content, exactly like the
   mobile drawer already overlays below 768px. */
@media (min-width: 769px) {
    /* !important because Radzen's own ".rz-layout .rz-sidebar" rule
       (2-class specificity) would otherwise beat this plain ".rz-sidebar"
       selector regardless of media-query scoping or source order -
       specificity is compared before either of those. */
    .rz-sidebar {
        position: relative !important;
        overflow: visible !important;
    }

    /* Radzen's own collapsed state is width:0 (fully hidden); redefine it
       as the icon-only rail width instead. Matches !important for
       !important since Radzen's own rule uses it. */
    .rz-sidebar.rz-sidebar-collapsed {
        width: var(--uzex-sidebar-width-compact) !important;
        opacity: 1 !important;
    }

    .app-sidebar-scroll {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--uzex-sidebar-width-compact);
        transition: width 0.2s ease, box-shadow 0.2s ease;
        z-index: 1;
    }

    .rz-sidebar.rz-sidebar-expanded .app-sidebar-scroll,
    .rz-sidebar.rz-sidebar-collapsed:focus-within .app-sidebar-scroll {
        width: var(--uzex-sidebar-width);
        box-shadow: var(--uzex-shadow-md);
    }

    /* Brand mark: compact icon by default, full lockup once the rail is
       showing its expanded width (pinned or keyboard-focused). */
    .app-brand-mark-compact {
        display: block;
    }

    .app-brand-logo-full {
        display: none;
    }

    .rz-sidebar.rz-sidebar-expanded .app-brand-logo-full,
    .rz-sidebar.rz-sidebar-collapsed:focus-within .app-brand-logo-full {
        display: block;
    }

    .rz-sidebar.rz-sidebar-expanded .app-brand-mark-compact,
    .rz-sidebar.rz-sidebar-collapsed:focus-within .app-brand-mark-compact {
        display: none;
    }

    /* Compact rail: RadzenPanelMenu always renders label/chevron/nested-
       group markup in the DOM (DisplayStyle stays IconAndText so the
       accessibility tree and tab order never change) - collapsed to the
       80px rail, that markup must be visually reduced to a centered icon
       only, not left to wrap/overflow past the rail. Hidden here via
       display:none and restored to Radzen's own computed display value
       (not "revert", which would fall through to the user-agent default
       instead of Radzen's rule) the moment the rail previews or pins open. */
    .rz-sidebar.rz-sidebar-collapsed .rz-navigation-item-link {
        justify-content: center;
    }

    .rz-sidebar.rz-sidebar-collapsed .rz-navigation-item-text,
    .rz-sidebar.rz-sidebar-collapsed .rz-navigation-item-icon-children,
    .rz-sidebar.rz-sidebar-collapsed .rz-expander,
    .rz-sidebar.rz-sidebar-collapsed .app-nav-section-label {
        display: none;
    }

    .rz-sidebar.rz-sidebar-collapsed:focus-within .rz-navigation-item-link {
        justify-content: normal;
    }

    .rz-sidebar.rz-sidebar-collapsed:focus-within .rz-navigation-item-text {
        display: block;
    }

    .rz-sidebar.rz-sidebar-collapsed:focus-within .rz-navigation-item-icon-children {
        display: flex;
    }

    .rz-sidebar.rz-sidebar-collapsed:focus-within .rz-expander {
        display: grid;
    }

    .rz-sidebar.rz-sidebar-collapsed:focus-within .app-nav-section-label {
        display: block;
    }
}

/* Hover preview only on devices with a real pointer, so touch screens
   never get stuck in a "sticky hover" expanded state. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .rz-sidebar.rz-sidebar-collapsed:hover .app-sidebar-scroll {
        width: var(--uzex-sidebar-width);
        box-shadow: var(--uzex-shadow-md);
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .app-brand-logo-full {
        display: block;
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .app-brand-mark-compact {
        display: none;
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .rz-navigation-item-link {
        justify-content: normal;
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .rz-navigation-item-text {
        display: block;
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .rz-navigation-item-icon-children {
        display: flex;
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .rz-expander {
        display: grid;
    }

    .rz-sidebar.rz-sidebar-collapsed:hover .app-nav-section-label {
        display: block;
    }
}

/* ---------- Mobile drawer ---------- */
/* Below the tablet breakpoint the sidebar becomes a fixed overlay drawer
   instead of an in-flow grid column, so it slides over the content instead
   of squeezing it. */
@media (max-width: 768px) {
    /* Matches the specificity of Radzen's own ".rz-layout .rz-sidebar"
       rule (which sets position: static for in-flow grid placement) so
       this override wins via source order instead of losing the cascade. */
    .rz-layout .rz-sidebar {
        position: fixed;
        inset-block: 0;
        height: 100dvh;
        box-shadow: var(--uzex-shadow-md);
    }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 26, 48, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: var(--uzex-z-backdrop);
    transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
    .sidebar-backdrop-visible {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Home Page section pages (Features/HomePage/HomePage*.razor) - each Home
   section is now its own routed page/component, so these shared classes live
   here (a plain global stylesheet) rather than duplicated across five
   separate Blazor CSS-isolation scopes. Class names are prefixed .home- and
   used only by Home Page components. */
.home-page { min-width: 0; overflow-x: clip; }
.home-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--uzex-space-4); flex-wrap: wrap; }
.home-page-header h1 { margin: 0; color: var(--uzex-text); }
.home-page-description { margin: var(--uzex-space-2) 0 0; color: var(--uzex-text-muted); }
.home-page-alert { margin-top: var(--uzex-space-4); }

.home-section-status-row { display: flex; align-items: center; gap: var(--uzex-space-3); flex-wrap: wrap; margin-top: var(--uzex-space-4); }
.home-section-status-meta { font-size: 0.875rem; color: var(--uzex-text-muted); }

.home-dependency-notice, .home-faq-disabled-notice { margin-top: var(--uzex-space-4); }

.home-table-toolbar { display: flex; justify-content: flex-end; margin-top: var(--uzex-space-5); }
.home-table-empty { display: block; margin-top: var(--uzex-space-3); color: var(--uzex-text-muted); }
.home-table-scroll { width: 100%; min-width: 0; margin-top: var(--uzex-space-3); overflow-x: auto; }
.home-table-scroll .rz-data-grid { min-width: 48rem; }
.home-table-title-cell { display: block; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--uzex-text); }
.home-table-answer-cell { display: block; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--uzex-text-muted); }
.home-table-actions { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }

@media (max-width: 640px) {
    .home-page-header { flex-direction: column; align-items: stretch; }
}