/*
 * Filename: statusbar.scss
 * FullPath: modules/projects/fl.ui/src/ui/navigation/statusbar/statusbar.scss
 * Change date and time: 14.00.00_31.07.2026
 * Reason for changes: Mobile/fullscreen transparent overlay statusbar + desktop footer.
 */
//@use "veela-lib" as m;

/* Shadow layout for <ui-statusbar> slots. */
:host(ui-statusbar) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    box-sizing: border-box;
    inline-size: 100%;
        color: var(--env-status-fg, var(--wallpaper-contrast-color, CanvasText));
    background: transparent;
}

:host(ui-statusbar) .left,
:host(ui-statusbar) .center,
:host(ui-statusbar) .right {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    background: transparent;
    padding-block-start: 0.5rem;
}

:host(ui-statusbar) .left {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding-inline-start: max(1rem, env(safe-area-inset-left, 0));
}

:host(ui-statusbar) .center {
    flex: 1 1 auto;
    justify-content: center;
}

:host(ui-statusbar) .right {
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-inline-start: auto;
    padding-inline-end: max(1rem, env(safe-area-inset-right, 0));
}

@media screen and (pointer: fine) and ((min-width: 768px) or (hover: hover)) {
    :host(ui-statusbar), ui-statusbar {
        display: none !important;
    }
}

@layer components {
    /* Desktop footer statusbar (inside bottom chrome stack). */
    .env-ui-statusbar {
        order: 1;
        padding: 0.35rem 0.65rem calc(0.35rem + env(safe-area-inset-bottom, 0));
        background: color-mix(
            in oklab,
            var(--color-surface-container-low, --u2-color-mod(var(--base-color, #5a9ec8), 960)) 88%,
            transparent
        );
        border-block-start: 1px solid var(--wf-md-outline-variant, var(--color-outline-variant));
        backdrop-filter: blur(10px);
        color: var(--color-on-surface, --u2-color-mod(var(--base-color, #5a9ec8), 100));
    }

    .env-ui-statusbar__intro p {
        margin: 0.1rem 0;
        opacity: 0.92;
    }

    .env-ui-statusbar__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .env-ui-statusbar__clock {
        font: 600 0.8125rem/1 ui-sans-serif, system-ui, sans-serif;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
        color: inherit;
        user-select: none;
        pointer-events: auto;
        cursor: pointer;
        border-radius: 0.35rem;
        padding: 0.15rem 0.25rem;
    }

    .env-ui-statusbar__clock:hover,
    .env-ui-statusbar__clock:focus-visible {
        background: color-mix(in oklch, currentColor 12%, transparent);
        color: contrast-color(inherit(background-color));
        outline: none;
    }

    .env-device-tray--footer {
        pointer-events: auto;
        cursor: pointer;
        border-radius: 0.35rem;
    }

    .env-device-tray--footer:hover,
    .env-device-tray--footer:focus-visible {
        background: color-mix(in oklch, currentColor 12%, transparent);
        color: contrast-color(inherit(background-color));
        outline: none;
    }

    .env-status-bar__tray {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
    }

    .env-status-bar__chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.12rem 0.35rem;
        border-radius: 999px;
        background: color-mix(in oklch, var(--env-status-fg, var(--wf-md-on-surface, white)) 10%, transparent);
        border: 1px solid color-mix(in oklch, var(--env-status-fg, var(--wf-md-on-surface, white)) 18%, transparent);
        line-height: 1;
        color: inherit;
        color: contrast-color(inherit(background-color));
        font-variant-numeric: tabular-nums;

        span {
            font-variant-numeric: tabular-nums;
        }
    }

    .env-status-bar__chip ui-icon {
        /* WHY: Phosphor default padding shrinks status glyphs; size the slot explicitly. */
        --icon-size: 1.15rem;
        --icon-padding: 0;
        --icon-color: var(--env-status-fg, var(--wallpaper-contrast-color, currentColor));
        display: block;
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        min-inline-size: var(--icon-size);
        min-block-size: var(--icon-size);
        font-size: var(--icon-size);
        color: var(--icon-color);
    }

    .env-status-bar__pct {
        font-variant-numeric: tabular-nums;
        opacity: 0.95;
    }

    .env-status-bar__meta {
        margin: 0;
        opacity: 0.88;
        font-size: 11px;
    }

    /*
     * Overlay statusbar: fixed top band over wallpaper / window title spacer.
     * Shown when `.env-shell-chrome[data-status-overlay]` (mobile browser or fullscreen; not standalone).
     */
    .env-shell-chrome[data-status-overlay] .env-ui-statusbar,
    .env-shell-root[data-status-overlay] > .env-shell-chrome .env-ui-statusbar {
        position: fixed;
        inset-inline: 0;
        inset-block-start: 0;
        inset-block-end: auto;
        z-index: calc(var(--env-z-shell-chrome, 2147483000) + 2);
        order: unset;
        display: flex;
        align-items: center;
        /* INVARIANT: same token as ui-window title spacer (`--env-status-inset-top`). */
        block-size: var(--env-status-inset-top, max(2rem, env(safe-area-inset-top, 0px)));
        min-block-size: var(--env-status-inset-top, max(2rem, env(safe-area-inset-top, 0px)));
        padding: 0 0.75rem;
        box-sizing: border-box;
        background: transparent !important;
        border: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        --icon-color: var(--env-status-fg, var(--wallpaper-contrast-color));
        color: var(--env-status-fg, var(--wallpaper-contrast-color));
        pointer-events: none;
    }

    .env-shell-chrome[data-status-overlay] .env-ui-statusbar__intro,
    .env-shell-chrome[data-status-overlay] .env-status-bar__meta {
        display: none !important;
    }

    .env-shell-chrome[data-status-overlay] .env-ui-statusbar__clock {
        display: block;
        font-size: 0.875rem;
        color: var(--env-status-fg, var(--wallpaper-contrast-color));
    }

    .env-shell-chrome[data-status-overlay] .env-device-tray--footer,
    .env-shell-chrome[data-status-overlay] .env-status-bar__chip {
        color: var(--env-status-fg, var(--wallpaper-contrast-color));
    }

    .env-shell-chrome[data-status-overlay] .env-status-bar__chip ui-icon {
        --icon-size: 1.25rem;
        --icon-padding: 0;
        --icon-color: var(--env-status-fg, var(--wallpaper-contrast-color));
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        min-inline-size: var(--icon-size);
        min-block-size: var(--icon-size);
        font-size: var(--icon-size);
        color: var(--icon-color);
    }

    .env-shell-chrome[data-status-overlay] .env-status-bar__pct {
        font-size: 0.8125rem;
    }

    .env-shell-chrome[data-status-overlay] .env-device-tray--footer {
        display: flex !important;
    }

    .env-shell-chrome[data-status-overlay] .env-status-bar__chip {
        background: transparent;
        border-color: transparent;
        padding-inline: 0.15rem;
    }

    /* Standalone PWA: no shell statusbar (OS / home chrome owns that). */
    .env-shell-chrome[data-standalone] .env-ui-statusbar,
    .env-shell-root[data-standalone] .env-shell-chrome:not([data-desktop]) .env-ui-statusbar {
        display: none !important;
    }

    /* Desktop footer: hide clock (taskbar has its own). */
    .env-shell-chrome[data-desktop]:not([data-status-overlay]) .env-ui-statusbar__clock {
        display: none !important;
    }

    /*
     * WHY: Desktop native-mode (WCO) hides env chrome. On mobile the Home dock must stay —
     * it is the only leave-view control (no title Close). Overlay statusbar also hides with chrome.
     */
    .env-shell-root[data-env-native-task] .env-shell-chrome[data-desktop],
    env-shell-container[data-env-native-task] .env-shell-chrome[data-desktop] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}