/*
 * The floating "glass" frame, the same look as the AxisPOS desktop's main window
 * (AxisSoft.Desktop/Warehouse.Component/Styling/AppStyle.cs, `glassTop`, `pillTop`).
 *
 * The sidebar and the page are two rounded cards floating 8 px from the window's edges over a
 * background tinted with the accent; the header bar has no background of its own and sits on that
 * background above the page. The desktop paints its glass because GTK has no backdrop-filter;
 * here it is real wherever the browser supports it, so the section flyout and the phone bar blur
 * the screen under them. Without support the same gradient is painted opaque.
 *
 * It restyles what `sidebar.css` lays out and is loaded after it and after the scoped
 * `_Layout.cshtml.css`; the few `!important` here answer `!important` ones in those sheets and in
 * site.css. Colours are tokens (`--app-bg`, `--glass-*`, `--pill-*`) set for both themes in
 * tokens.css.
 */

body:not(.full-bleed-page) {
    background: var(--app-bg);
}

#app-container.menu-sidebar {
    background-color: var(--app-bg);
}

/* ---- The panels: the sidebar and its flyout ------------------------------------------------- */

.axis-sidebar,
.axis-sb-fly {
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-lg);
    background-color: var(--glass-bottom);
    background-image: var(--glass-sheen), linear-gradient(to bottom, var(--glass-top), var(--glass-bottom));
    box-shadow: var(--glass-shadow), var(--glass-shine);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .axis-sidebar,
    .axis-sb-fly {
        background-color: transparent;
        background-image: var(--glass-sheen), linear-gradient(to bottom, var(--glass-top-clear), var(--glass-bottom-clear));
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
    }
}

.axis-sb-brand,
.axis-sb-foot {
    border-color: var(--glass-edge);
}

.axis-sb-body {
    border-left-color: var(--glass-edge);
}

/* Hover: a faint wash over the glass, not the accent. */
.axis-sb-item:hover,
.axis-sb-head:hover,
.axis-sb-head.is-flying {
    background: var(--glass-hover);
}

/* The screen being shown: a pill in the brand colour, lighter at the top, white text and icon.
   Folded to icons, the section that holds it carries the pill. */
.axis-sb-item.is-current,
.axis-sidebar.is-collapsed .axis-sb-section.has-current > .axis-sb-head {
    background-color: var(--pill-bottom);
    background-image: linear-gradient(to bottom, var(--pill-top), var(--pill-bottom));
    box-shadow: var(--pill-shadow);
    color: #FFFFFF;
}

.axis-sb-item.is-current .axis-sb-ico {
    opacity: 1;
}

@media (min-width: 769px) {
    #app-container.menu-sidebar {
        padding: 8px;
        column-gap: 8px;
    }

    .app-container.menu-sidebar > .axis-sidebar {
        height: auto;
    }

    /* The header bar: no background, on the window's own. */
    .app-container.menu-sidebar > .axis-topbar {
        height: 48px;
        padding: 0 4px 0 0;
        background: transparent;
        border-bottom: 0;
    }

    /* The page: another floating card, matching the sidebar. */
    .app-container.menu-sidebar > .main-content:not(.is-full-bleed) {
        border: 1px solid var(--glass-edge);
        border-radius: var(--radius-lg);
        background-color: var(--surface);
        box-shadow: var(--glass-shadow);
    }
}

.axis-topbar .axis-topbar-btn:hover {
    background: var(--glass-hover);
    color: var(--fg);
}

/* The menu search, as a field: a white card (the surface, in dark) with the bright top edge. */
.axis-topbar-search {
    border-color: var(--glass-edge);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--glass-shine);
}

.axis-topbar-search kbd {
    background: var(--surface-2);
}

/* ---- Phone: the page is a card too, and the bottom bar is glass ----------------------------- */

@media (max-width: 768px) {
    body:not(.full-bleed-page):not(.kiosk-page) #app-container {
        padding-top: 6px;
        padding-left: 6px;
        padding-right: 6px;
        background-color: var(--app-bg);
    }

    body:not(.kiosk-page) #app-container > .main-content:not(.is-full-bleed) {
        padding: 8px !important;
        border: 1px solid var(--glass-edge);
        border-radius: 12px;
        background-color: var(--surface);
        box-shadow: var(--glass-shadow);
    }

    .mobile-bar {
        border-top: 1px solid var(--glass-edge);
        background-color: var(--glass-bottom);
        background-image: var(--glass-sheen), linear-gradient(to bottom, var(--glass-top), var(--glass-bottom));
        box-shadow: 0 -4px 16px rgba(15, 33, 64, .08), var(--glass-shine);
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .mobile-bar {
            background-color: transparent;
            background-image: var(--glass-sheen), linear-gradient(to bottom, var(--glass-top-clear), var(--glass-bottom-clear));
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
        }
    }
}