/* Shell: ported from Microtec.HR Microtec.Hr.Blazor/wwwroot/css/app.css — upstream candidate for Microtec.Erp.Components (ErpAppShell). */

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--ds-familyDefault), 'Segoe UI', sans-serif;
    /* Comfortable base for Arabic: room to breathe + crisp glyph rendering. */
    font-size: var(--ds-sizeBody2);
    line-height: normal;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- App shell — BusinessOwner.Web uses ErpSideMenu as its navigation -------------------------- */
/* Height-bounded shell: the app fills the viewport and never scrolls as a whole — only the
   content column scrolls. This keeps the nav rail + topbar fixed on screen (BUG-03). */
.erp-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--ds-pageDefaultFill);
    color: var(--ds-textMainBodyDefault);
}

.erp-app__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* allow the content column to shrink so its own overflow scrolls, not the page */
}

/* Topmost header = the breadcrumb strip (Figma: light tint, breadcrumb on the right). Sits above the
   page content but BELOW the nav rail, so the rail's hover-overlay flies out OVER the header (otherwise
   the expanded menu is visually clipped by the header). The collapsed 64px rail doesn't overlap the
   header horizontally, so it can't steal the breadcrumb's clicks. */
.erp-app__topbar {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--ds-navSecondaryWidgetsGap);
    height: 44px;
    padding: 0 var(--ds-pagePaddingX);
    background: var(--ds-infoNeutralFill);
    border-bottom: var(--ds-borderWidthSm) solid var(--ds-navSecondaryOutline);
}

/* Reclaim horizontal room on narrower viewports — the rail + icon cluster already eat into it. */
@media (max-width: 960px) {
    .erp-app__topbar { padding: 0 var(--ds-contentPaddingXLg); }
}
@media (max-width: 600px) {
    .erp-app__topbar { padding: 0 var(--ds-contentPaddingXMd); gap: var(--ds-contentGapSm); }
}

.erp-app__content {
    flex: 1;
    min-height: 0; /* paired with .erp-app__main min-height:0 so this column is the sole scroll region */
    overflow: auto;
}

/* The shell rail is full-height and square (the component default has rounded corners). */
.erp-app .erp-sidemenu {
    border-radius: 0;
}

/* One brand logo (Layout/BrandLogo.cs), the same image whether the menu is expanded or collapsed to the rail;
   sized to fit the 64px rail so it never needs swapping. */
.erp-sidemenu__brand .bo-brand-logo {
    flex: 0 0 auto;
    display: block;
    height: 28px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
}

/* Centred in the brand row when expanded too (the package starts it at the edge there). */
.erp-app .erp-sidemenu__brand,
.erp-app .erp-sidemenu--rail:hover .erp-sidemenu__brand {
    justify-content: center;
}

/* Mini icon-rail: a fixed 64px footprint; the nav overlays content when it expands on hover,
   so the page never reflows. RTL → rail on the right; LTR → on the left (inset-inline-start). */
.erp-app__nav {
    flex: 0 0 64px;
    width: 64px;
    position: relative;
    z-index: 60; /* above the header (z-50) so the hover flyout overlays it instead of being clipped */
    transition: flex-basis 0.22s var(--hr-gap-easeDrawer), width 0.22s var(--hr-gap-easeDrawer);
}
.erp-app__nav .erp-sidemenu {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.22s var(--hr-gap-easeDrawer);
}
.erp-app__nav .erp-sidemenu--rail:hover {
    width: 248px;
    box-shadow: var(--hr-gap-shadowPopover);
}

.erp-app__content:has(.erp-searchpanel-root.is-open),
.erp-app__content:has(.erp-vieweditor-root.is-open) {
    position: relative;
    z-index: 65; /* just above .erp-app__nav (z-60) */
}

/* Pinned: the nav reserves its full 264px and PUSHES the content (no overlay). */
.erp-app__nav--pinned {
    flex-basis: 264px;
    width: 264px;
}

/* Outside the off-canvas breakpoint the scrim button must never paint — otherwise it would flash
   as an unstyled full-viewport <button> the instant _navOpen renders it. Declared before the media
   query below (same pattern as .erp-topbar__navtoggle just below it): both rules share one class's
   worth of specificity, so whichever comes later in source order wins regardless of the media query,
   and the override inside the query must be the one that comes last. */
.erp-app__scrim {
    display: none;
}

/* ---- Mobile / tablet: off-canvas nav ------------------------------------------------
   Below this width the pinned side rail would leave too little room for page content, so the
   nav is taken out of the flex row entirely (content gets 100%) and presented instead as a
   drawer opened from the topbar, overlaying the page. */
@media (max-width: 900px) {
    .erp-app__nav,
    .erp-app__nav--pinned {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        flex: 0 0 0;
        width: 0;
        z-index: 1500;
        overflow: visible;
    }
    .erp-app__nav .erp-sidemenu {
        width: 264px;
        transform: translateX(100%);      /* RTL: parked off the inline-start (right) edge */
        transition: transform 0.25s var(--hr-gap-easeDrawer);
        box-shadow: none;
    }
    [dir="ltr"] .erp-app__nav .erp-sidemenu { transform: translateX(-100%); }
    .erp-app__nav--open .erp-sidemenu {
        transform: translateX(0);
        box-shadow: var(--hr-gap-shadowPopover);
    }
    /* The rail's hover-to-expand makes no sense on touch and would fly out at a stray tap. */
    .erp-app__nav .erp-sidemenu--rail:hover { width: 264px; }

    .erp-app__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1490;
        background: var(--hr-gap-scrim);
        border: 0;
        padding: 0;
    }
}

/* The drawer toggle only exists on the viewports where the nav is off-canvas. */
.erp-topbar__navtoggle { display: none; }
@media (max-width: 900px) {
    .erp-topbar__navtoggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        padding: 0;
        border: var(--ds-borderWidthSm) solid var(--ds-actionPrimaryOutlineDefaultSoft);
        border-radius: var(--ds-actionRadius);
        background: var(--ds-contentDefaultFill);
        color: var(--ds-iconPrimaryDefault);
        cursor: pointer;
    }
    .erp-topbar__navtoggle:focus-visible { outline: var(--ds-borderWidthMd) solid var(--hr-gap-focusRing); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .erp-app__nav .erp-sidemenu { transition: none; }
}
.erp-app__nav--pinned .erp-sidemenu {
    width: 264px;
    box-shadow: none;
}

#blazor-error-ui {
    background: var(--ds-infoDangerFill);
    border-top: var(--ds-borderWidthSm) solid var(--ds-infoDangerOutline);
    color: var(--ds-textMainDangerDefault);
    font-size: var(--ds-sizeBody3);
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: var(--hr-gap-shadowCard);
    display: none;
    padding: var(--ds-contentPaddingYLg) var(--ds-contentPaddingXXlg);
    position: fixed;
    z-index: 100000;
}

#blazor-error-ui .reload {
    color: var(--ds-textMainDangerDefault);
    font-weight: var(--ds-weightMedium);
    text-decoration: underline;
    margin-inline-start: var(--ds-contentGapSm);
}

#blazor-error-ui .dismiss {
    color: var(--ds-iconDangerDefault);
    cursor: pointer;
    margin-inline-start: var(--ds-contentGapLg);
}

/* ---- Keycloak initializer (Microtec.Components.Blazor KeycloakInitializer) ---------------------------------
   The package still paints its sign-in overlay, progress bar and Retry button in the old teal (scoped CSS plus an
   inline style on the button), so the first screen of a sign-in would be the only teal thing left. Bring them to the
   primary identity here — #app outranks the package's scoped selectors, !important beats the inline style — until
   the package takes the tokens itself; then delete this block. */
/* The primary purple gradient of the HR host's splash; the tokens switch for dark mode themselves. */
#app .kc-overlay {
    background: linear-gradient(135deg, var(--ds-actionPrimaryFillDefaultSolid) 0%, var(--ds-actionPrimaryFillHoverSolid) 100%);
}
/* The package hard-codes src="assets/brand/logo.svg", a path the CDN keeps cached for days after a logo change;
   swap in the versioned file name the splash and the login pages use (logo-361-v1.svg). */
#app .kc-logo {
    content: url("../assets/brand/logo-361-v1.b61969b0cb.svg");
    filter: drop-shadow(var(--hr-gap-shadowCard));
}
#app .kc-title { font-weight: var(--ds-weightMedium) !important; }
#app .kc-spinner-ring {
    border-color: var(--ds-listingItemFillActive);
    border-top-color: var(--ds-actionPrimaryFillDefaultSolid);
}
#app .kc-progress-track { background: var(--ds-listingItemFillActive); }
#app .kc-progress-bar { background: var(--ds-actionPrimaryFillDefaultSolid); }
#app .kc-overlay .mud-button-filled {
    background: var(--ds-actionPrimaryFillDefaultSolid) !important;
    color: var(--ds-textMainPrimaryInverse) !important;
    border-radius: var(--ds-actionRadius) !important;
    font-weight: var(--ds-weightMedium) !important;
}
#app .kc-overlay .mud-button-filled:hover { background: var(--ds-actionPrimaryFillHoverSolid) !important; }
#app .kc-overlay .mud-button-filled:active { background: var(--ds-actionPrimaryFillPressedSolid) !important; }

/* Dark mode: <html data-theme="dark"> (ThemeModeService + the pre-boot script in index.html) switches the
   design-system tokens themselves (erp-tokens.css → :root[data-theme=dark]), so this file has nothing
   theme-specific — only the native controls need telling. */
html[data-theme="dark"] {
    color-scheme: dark;
}