/* Main layout, drawer and navigation menu. Global (not component-scoped) so every stylesheet is a wwwroot file. */

/* The spacing of the whole frame, on a 4px step: --bar-height is the top bar and the drawer's brand row, --page-gutter the
   one side spacing of top bar and page area, --page-gap the space between the blocks of a page (header, toolbars, cards,
   grids). Phones get a narrower gutter (media query below). --fill-min-height is the floor of a grid that fills the height
   left: 20rem on phones, where the page area scrolls instead; 10rem on desktop (desktop frame below), so only a window
   shorter than about 450px lets the page body scroll for it. */
.page {
    --bar-height: 3rem;
    --fill-min-height: 20rem;
    --page-gutter: 1.25rem;
    --page-gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

/* The brand row is exactly --bar-height tall (the top bar beside it), so the drawer's own header padding is off; the
   footer (build version) starts where the menu texts start. */
.page .navigation-drawer {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0.5rem;
    --dxbl-drawer-panel-footer-bg: none;
    --dxbl-drawer-panel-footer-justify-content: flex-start;
    --dxbl-drawer-panel-footer-min-height: 0;
    --dxbl-drawer-panel-footer-padding-bottom: 0.75rem;
    --dxbl-drawer-panel-footer-padding-top: 0.5rem;
    --dxbl-drawer-panel-footer-padding-x: 1.125rem;
    --dxbl-drawer-panel-header-bg: none;
    --dxbl-drawer-panel-header-min-height: 0;
    --dxbl-drawer-panel-header-padding-bottom: 0;
    --dxbl-drawer-panel-header-padding-top: 0;
    --dxbl-drawer-panel-header-padding-x: 0;
    --dxbl-drawer-separator-border-width: 0;
}

.page .navigation-drawer > .dxbl-drawer-panel {
    background-image: linear-gradient(180deg, var(--dxds-color-surface-primary-default-rest) 0%, var(--dxds-primary-170) 150%);
}

.navigation-drawer-header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: var(--bar-height);
    justify-content: space-between;
    padding: 0 0.375rem;
    width: 100%;
}

.navigation-drawer-header .brand {
    align-items: center;
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    padding-left: 0.75rem;
    text-decoration: none;
}

.navigation-drawer-header .brand-mark {
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

.navigation-drawer-header .brand-name {
    font-size: var(--dxds-font-size-base-md);
    font-weight: var(--dxds-font-weight-base-strong);
    line-height: var(--dxds-line-height-base-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The window never scrolls: the top bar stays on screen and only the page area scrolls. */
.drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Same height as the drawer's brand row, with a hairline where the page scrolls under it. */
.nav-buttons-container {
    align-items: center;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    box-sizing: border-box;
    display: flex;
    flex: none;
    gap: 0.5rem;
    height: var(--bar-height);
    padding: 0 var(--page-gutter);
}

.nav-buttons-container > a {
    color: inherit;
}

.nav-buttons-container .back-button {
    padding-left: 0;
    padding-right: 0.25rem;
}

/* Project picker (ProjectSwitcher), between the back button and the user panel. */
.nav-buttons-container .project-switcher {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.nav-buttons-container .project-switcher-label {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-sm);
}

.nav-buttons-container .project-switcher-box {
    width: 12rem;
}

/* Signed-in user and logout, pushed to the right end of the top bar. */
.nav-buttons-container .user-panel {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
    min-width: 0;
}

.nav-buttons-container .user-info {
    display: flex;
    flex-direction: column;
    line-height: var(--dxds-line-height-base-sm);
    min-width: 0;
    text-align: right;
}

.nav-buttons-container .user-email {
    font-size: var(--dxds-font-size-base-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-buttons-container .user-role {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-sm);
}

/* The page area: --page-gap above the header. On phones it is the scroll area (--page-gap under the last card or grid when
   scrolled to the end); on desktop it does not scroll and the page body scrolls instead (desktop frame below). The side
   gutter is padding here, not on .drawer-content, so DxFormLayout's negative row gutters stay inside the scroll area
   (no sideways scroll) and the scrollbar sits at the window edge. Its subdued surface is the ground the white cards and
   grids stand on (pages.css, "Surfaces"); the top bar stays white with its hairline. */
.page-content-container {
    background-color: var(--dxds-color-surface-neutral-subdued-rest);
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: var(--page-gap) var(--page-gutter);
}

/* Every page is one .app-page: a column of blocks --page-gap apart that fills the height left. Below 769px the page area
   scrolls as a whole and a page grows past it through its content's minimum size (full-height grids keep min-height
   20rem), so the bottom padding lands after it. Paragraphs carry no margin of their own; the gap spaces them like every
   other block. */
.app-page {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--page-gap);
}

.page-content-container p {
    margin: 0;
}

/* Desktop frame (wider than the 768px phone breakpoint): the app behaves as one screen. Neither the window nor the page
   area scrolls as a whole: the page header stays and the page body under it (.page-body, always together with
   .loading-column: a LoadingRegion's CssClass, or a plain div) takes the height left. A body whose blocks are taller than
   that scrolls by itself (Dasbor, Glosarium, Catatan Rilis). A block that can use the height (a grid, the scheduler)
   takes it with flex: 1 1 0 and scrolls inside, so nothing scrolls while the content fits. The body spans the page area
   (negative margin = padding) so its scrollbar sits at the window edge and card shadows are not clipped. A child of the
   body never shrinks below its content unless its own rule says so (:where keeps that default weaker than any class). */
@media (min-width: 769px) {
    .page {
        --fill-min-height: 10rem;
    }

    .page-content-container {
        overflow: hidden;
        padding-bottom: 0;
    }

    .app-page {
        flex: 1 1 0;
        min-height: 0;
    }

    .app-page > .page-body {
        flex: 1 1 0;
        margin-inline: calc(-1 * var(--page-gutter));
        min-height: 0;
        overflow: auto;
        padding: 0 var(--page-gutter) var(--page-gap);
    }

    :where(.page-body) > * {
        flex-shrink: 0;
    }

    /* DxTabs has no height parameter and is display: block. With CssClass="tabs-fill" it is a column that fills the page
       body, and the active tab's content is a column too, so the content can take the height left (Laporan) or scroll
       under a tab list that stays (Catatan Rilis). */
    dxbl-tabs.tabs-fill {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
    }

    dxbl-tabs.tabs-fill > .dxbl-tabs-content-panel {
        flex: 1 1 0;
        min-height: 0;
    }

    dxbl-tabs.tabs-fill .dxbl-tabs-content.dxbl-active {
        display: flex;
        flex-direction: column;
    }
}

/* Page header (Components/Shared/PageHeader.razor): one title size on every page (24px, the step between the 16px card
   captions and the hero figure), the lead line tight under it. */
.page-header {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.125rem;
}

.page-header h1 {
    font-size: var(--dxds-font-size-title-lg);
    font-weight: var(--dxds-font-weight-title-default);
    letter-spacing: -0.01em;
    line-height: var(--dxds-line-height-title-lg);
    margin: 0;
}

.page-lead {
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* Sub-heading inside a page (Error page): one step under the title. */
.page-content-container :is(h2, h3) {
    font-size: var(--dxds-font-size-title-sm);
    font-weight: var(--dxds-font-weight-title-default);
    line-height: var(--dxds-line-height-title-sm);
    margin: 0;
}

/* Build version at the foot of the drawer, so anyone can tell which build serves the client. It links to Catatan Rilis and
   keeps the subdued look; only hover and keyboard focus mark it as a link. */
.navigation-drawer-footer {
    color: rgb(from var(--dxds-color-content-neutral-default-static-dark-rest) r g b / 0.85);
    font-size: var(--dxds-font-size-base-sm);
}

.navigation-drawer-footer a {
    color: inherit;
    text-decoration: none;
}

.navigation-drawer-footer a:is(:hover, :focus-visible, .active) {
    text-decoration: underline;
}

/* Drawer */
.drawer-container {
    height: 100%;
}

.navigation-drawer-shading {
    height: 100%;
    position: absolute;
    transition: ease 300ms;
    transition-property: opacity, visibility;
    visibility: visible;
    width: 100%;
    z-index: 99;
    background-color: var(--dxds-color-surface-backdrop-default-rest);
}

.navigation-drawer.mobile.panel-closed .navigation-drawer-shading {
    opacity: 0;
    visibility: hidden;
}

.drawer-container .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}

.drawer-container .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

.navigation-drawer-shading {
    display: none;
}

.drawer-container .panel-open:not(.mobile) .nav-buttons-container .menu-button {
    display: none;
}

@media (max-width: 768px) {
    .page {
        --page-gutter: 0.75rem;
    }

    .drawer-container .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }

    .drawer-container .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
    }

    .navigation-drawer-shading {
        display: block;
    }

    .drawer-container .panel-open:not(.mobile) .nav-buttons-container .menu-button {
        display: flex;
    }

    /* Phones: the top bar has no room for the "Proyek" caption or the e-mail and role; the caption stays for screen
       readers (it labels the combo box), "Kembali ke Beranda" keeps only its arrow, and the box takes the space left so
       the project name stays readable. */
    .nav-buttons-container .project-switcher-label {
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .nav-buttons-container .back-button .dxbl-btn-caption,
    .nav-buttons-container .user-info {
        display: none;
    }

    .nav-buttons-container .project-switcher {
        flex: 1 1 0;
    }

    .nav-buttons-container .project-switcher-box {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
}

/* Navigation menu */
.navigation-drawer .menu {
    --dxbl-menu-bottom-left-border-radius: 0;
    --dxbl-menu-bottom-right-border-radius: 0;
    --dxbl-menu-top-left-border-radius: 0;
    --dxbl-menu-top-right-border-radius: 0;
    --dxbl-menu-item-padding-x: 1.125rem;
    --dxbl-menu-item-padding-y: 0.5rem;
    --dxbl-menu-item-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --dxbl-menu-item-image-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --dxbl-menu-item-hover-bg: rgb(from var(--dxds-color-surface-neutral-default-static-light-rest) r g b / 0.15);
    --dxbl-menu-item-hover-color: var(--dxds-color-content-neutral-default-static-dark-hovered);
    --dxbl-menu-item-hover-image-color: var(--dxds-color-content-neutral-default-static-dark-hovered);

    background: none;
}

.navigation-drawer .menu.display-mobile {
    margin-bottom: 2rem;
}

/* The page being read: a white tint that is clearly brighter than the hover, plus the strong weight, so the menu says
   where the reader is without a second colour. */
.navigation-drawer .menu-item-active {
    background-color: rgb(from var(--dxds-color-surface-neutral-default-static-light-rest) r g b / 0.2);
    font-weight: var(--dxds-font-weight-base-strong);
}

.navigation-drawer .menu .dxbl-menu-item {
    transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}