/*
 * Filename: TaskBar.scss
 * FullPath: modules/projects/fl.ui/src/ui/navigation/taskbar/scss/TaskBar.scss
 * Change date and time: 23.09.10_23.08.2026
 * Reason for changes: Mobile dock is pointer-transparent except Home FAB (apps go full-bleed).
 * FIND:mobile-dock
 */
/* Taskbar / env chrome (document + host). Former environment-shell/scss/chrome.scss. */
//@use "veela-lib" as m;

@layer components {
    /* Fixed chrome: taskbar (desktop + mobile dock) + FL-UI `ui-statusbar` (desktop meta). */
    /* WHY: `--env-z-shell-chrome` is set in environment-shell `scss/root.scss` ($z-shell-chrome). */

    ui-taskbar {
        padding: 0px 0px 0px 0px !important;
        gap: 0px 0px !important;

        &::part(taskbar) {
            padding: 0px 0px 0px 0px !important;
            gap: 0px 0px !important;

            display: grid !important;
            grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
        }

        ui-task {
            margin: 0px 0px 0px 0px !important;
        }
    }

    .env-shell-chrome {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--env-z-shell-chrome, 2147483000);
        isolation: isolate;
        display: flex;
        flex-direction: column;
        gap: 0px !important;
        padding: 0px 0px 0px 0px !important;
        font: 12px ui-sans-serif, system-ui, sans-serif;
        /* WHY: contrast-color(dark variant) painted white glyphs on the light dock. */
        color: var(--color-on-surface, var(--wf-md-on-surface-variant, #1c1c1e));
        pointer-events: none;
    }

    /* WHY: lure `env-shell-taskbar-under` was a 40px fixed bbox + inline z-index:0 slab. */
    .env-shell-chrome[data-desktop] {
        box-shadow: 0 -8px 28px rgb(0 0 0 / 0.28);
    }
    
    .env-shell-chrome > * {
        pointer-events: auto;
    }
    
    /*
    * Taskbar base (desktop Win10 acrylic + mobile transparent dock share the same host).
    * Soft elevation lives on `.env-shell-chrome` — not on this backdrop-filter host.
    */
    .env-shell-taskbar {
        /* WHY: #f4f4f5/#1c1c1e forked a slate dock from Settings `--sv-*` / `--base-color`. */
        --env-taskbar-surface: color-mix(
            in oklab,
            var(--color-surface-container-high, --u2-color-mod(var(--base-color, #5a9ec8), 980)) 88%,
            transparent
        );
        --env-taskbar-ink: var(
            --color-on-surface,
            light-dark(
                --u2-color-mod(var(--base-color, #5a9ec8), 900),
                --u2-color-mod(var(--base-color, #5a9ec8), 100)
            )
        );
        --env-taskbar-accent: var(--wf-md-primary, var(--color-primary, #5a9ec8));
        --icon-color: var(--env-taskbar-ink);
        color-scheme: inherit;

        order: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.15rem;
        block-size: 2.5rem;
        min-block-size: 2.5rem;
        padding: 0 0.25rem;
        padding-block-end: env(safe-area-inset-bottom, 0);
        background: var(--env-taskbar-surface);
        border-block-start: 1px solid light-dark(
            color-mix(in oklab, #000 10%, transparent),
            color-mix(in oklab, #fff 14%, transparent)
        );
        backdrop-filter: blur(22px) saturate(1.35);
        -webkit-backdrop-filter: blur(22px) saturate(1.35);
        color: var(--env-taskbar-ink);
        box-shadow: none;

        ui-icon {
            color: var(--env-taskbar-ink);
            --icon-color: var(--env-taskbar-ink);
        }
    }
    
    .env-shell-taskbar::part(taskbar) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.15rem;
        flex: 1;
        min-inline-size: 0;
        inline-size: 100%;
    }
    
    .env-shell-taskbar__pins,
    .env-shell-taskbar__windows {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0px 0px;
        min-inline-size: 0;
        margin: 0px 0px 0px 0px;
    }
    
    .env-shell-taskbar__workspaces {
        display: none;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        margin-inline-start: 0.35rem;
    }

    .env-shell-taskbar__workspace {
        min-inline-size: 1.35rem;
        min-block-size: 1.35rem;
        padding: 0 0.35rem;
        border: none;
        border-radius: 0.35rem;
        background: color-mix(in oklab, CanvasText 10%, transparent);
        color: inherit;
        font: inherit;
        font-size: 0.7rem;
        cursor: pointer;
    }

    .env-shell-taskbar__workspace[data-active] {
        background: color-mix(in oklab, CanvasText 22%, transparent);
        font-weight: 650;
    }

    .env-shell-chrome[data-desktop] .env-shell-taskbar__workspaces {
        display: flex;
    }

    .env-shell-taskbar__pins {
        flex: 0 0 auto;
        content-visibility: visible;
        inline-size: stretch;
        gap: 0px 0px;
        margin: 0px 0px 0px 0px;
        
        [data-env-home] {
            content-visibility: visible;
            color: inherit;
            --icon-color: currentColor;

            background: color-mix(in oklab, var(--env-taskbar-surface) 60%, transparent) !important;
            background-color: color-mix(in oklab, var(--env-taskbar-surface) 60%, transparent) !important;
        }

        ui-task {
            backdrop-filter: blur(22px) saturate(1.35);
            -webkit-backdrop-filter: blur(22px) saturate(1.35);
            box-shadow: inset 0 -2px 0 var(--env-taskbar-accent);
        }

        ui-task::part(icon), ui-task::part(glyph) {
            color: var(--env-taskbar-ink);
            --icon-color: var(--env-taskbar-ink);
        }
    }

    .env-shell-taskbar__windows {
        flex: 1 1 auto;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
        inline-size: stretch;
    }
    
    .env-shell-taskbar ui-task {
        cursor: pointer;
        color: inherit;
        align-self: stretch;
        inline-size: fit-content;
        min-inline-size: 2.75rem;
        min-block-size: 100%;
        padding-inline: 0.55rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        outline: none;
        opacity: 1;
        /* Active underline via inset shadow so we don't fight ui-task border tokens. */
        box-shadow: inset 0 -2px 0 transparent;
    }
    
    .env-shell-taskbar ui-task:hover {
        background: color-mix(in oklab, var(--env-taskbar-ink) 10%, transparent);
        color: var(--env-taskbar-ink);
        opacity: 1;
    }
    
    .env-shell-taskbar ui-task[data-env-active="true"],
    .env-shell-taskbar ui-task[data-active],
    .env-shell-taskbar ui-task[data-focus] {
        outline: none;
        color: var(--env-taskbar-ink);
        opacity: 1;
        background: color-mix(in oklab, var(--env-taskbar-surface) 12%, transparent);
        box-shadow: inset 0 -2px 0 var(--env-taskbar-accent);
    }
    
    .env-shell-taskbar ui-task[data-minimized] {
        opacity: 0.65;
    }
    
    .env-shell-taskbar__tray-host {
        margin-inline-start: auto;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 0.35rem;
        padding-inline: 0.35rem;
        border-inline-start: 1px solid light-dark(
            color-mix(in oklab, #000 10%, transparent),
            color-mix(in oklab, #fff 12%, transparent)
        );
    }
    
    .env-shell-taskbar__clock {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0.05rem;
        min-inline-size: 4rem;
        inline-size: fit-content;
        padding-inline: 0.35rem 0.15rem;
        line-height: 1.05;
        user-select: none;
        pointer-events: auto;
        cursor: pointer;
        border-radius: 0.35rem;
        font-variant-numeric: tabular-nums;

        .env-shell-taskbar__clock-date {
            font-variant-numeric: tabular-nums;
        }

        .env-shell-taskbar__clock-time {
            font-variant-numeric: tabular-nums;
        }
    }

    .env-shell-taskbar__clock:hover,
    .env-shell-taskbar__clock:focus-visible {
        background: color-mix(in oklab, var(--env-taskbar-ink) 10%, transparent);
        color: var(--env-taskbar-ink);
        outline: none;
    }

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

    .env-device-tray--taskbar:hover,
    .env-device-tray--taskbar:focus-visible {
        background: color-mix(in oklab, var(--env-taskbar-ink) 10%, transparent);
        color: var(--env-taskbar-ink);
        outline: none;
    }
    
    .env-shell-taskbar__clock-time {
        font-size: 0.78rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: inherit;
    }
    
    .env-shell-taskbar__clock-date {
        font-size: 0.62rem;
        font-weight: 500;
        color: color-mix(in oklab, currentColor 72%, transparent);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    
    /* Desktop: icon-only tasks (tooltip via title / aria-label). */
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(title) {
        display: none !important;
    }
    
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task {
        min-inline-size: 2.5rem;
        padding-inline: 0.45rem;
    }
    
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(icon) {
        inline-size: 1.35rem;
        block-size: 1.35rem;
    }
    
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(glyph) {
        inline-size: 1.35rem;
        block-size: 1.35rem;
    }

    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]::part(icon) {
        inline-size: 1.75rem;
        block-size: 1.75rem;
        min-inline-size: 1.75rem;
        min-block-size: 1.75rem;
    }

    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]::part(glyph) {
        inline-size: 100%;
        block-size: 100%;
        --icon-size: 100%;
        --icon-padding: 0.05rem;
    }
    
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(letter) {
        font-size: 0.8rem;
    }
    
    .env-shell-chrome[data-desktop] .env-shell-taskbar__pins {
        border: none 0px transparent;
        outline: none 0px transparent;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        background: transparent;
        background-color: transparent;
        box-shadow: none 0px 0px 0px transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        min-inline-size: 2.75rem;
        margin-inline-end: 0.2rem;
        border-radius: 0px;
    }

    /* Desktop Start — same action as a mobile Home tap (go home / show desktop). */
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home] {
        display: inline-flex !important;
        transform: none;
        outline: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        min-inline-size: 2.75rem;
        margin-inline-end: 0.2rem;
        border-radius: 0px;
        border: none 0px transparent;
        outline: none 0px transparent;
        box-shadow: none 0px 0px 0px transparent;

        /*
        background: color-mix(in oklab, var(--env-taskbar-accent) 18%, transparent);
        color: var(--env-taskbar-ink);
        --icon-color: currentColor;
        */
    }

    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]:hover,
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]:focus-visible {
        background: color-mix(in oklab, var(--env-taskbar-accent) 32%, transparent);
    }

    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home][data-env-active="true"],
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home][data-active],
    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home][data-focus] {
        background: color-mix(in oklab, var(--env-taskbar-accent) 28%, transparent)
    }
    
    /*
    * Mobile nav bar: fully transparent; house icon at the physical right
    * so workspace pager dots stay visible in the center.
    * WHY: `ui-taskbar::part(taskbar)` is a 3-col grid (pins | windows | tray);
    * `justify-content` on the host cannot move the slotted Home pin.
    * Long-press Home → `.env-shell-navbar__switcher` (open processes).
    */
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar {
        position: relative;
        display: block;
        place-self: stretch;
        inline-size: 100%;
        gap: 0;
        block-size: 3rem;
        min-block-size: 3rem;
        padding: 0.15rem 0.75rem;
        /* WHY: 3-button nav is already OS-reserved; extra safe-area made a second dock slab. */
        padding-block-end: 0.15rem;
        background: transparent;
        border-block-start: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        color: var(--env-status-fg, var(--env-taskbar-ink));
        --icon-color: currentColor;
        /* WHY: chrome z-index sits above apps; a full-width hit slab ate Save / explorer rows. */
        pointer-events: none;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar::part(taskbar) {
        display: block !important;
        grid-template-columns: none !important;
        position: relative;
        inline-size: 100%;
        block-size: 100%;
    }

    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__pins {
        display: contents;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__pins ui-task:not([data-env-home]) {
        display: none !important;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__windows {
        display: none !important;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__tray-host {
        display: none !important;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home] {
        position: absolute;
        top: auto;
        left: auto;
        right: calc(0.7rem + env(safe-area-inset-right, 0px));
        bottom: 0.22rem;
        min-inline-size: 2.5rem;
        min-block-size: 2.5rem;
        padding: 0;
        margin: 0;
        border-radius: 999px;
        z-index: 6;
        pointer-events: auto;
        background: color-mix(
            in oklab,
            var(--color-surface-container-high, --u2-color-mod(var(--base-color, #5a9ec8), 980)) 88%,
            transparent
        );
        box-shadow: 0 6px 20px -8px color-mix(in oklab, #000 45%, transparent);
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Icon-only Home (hide task title label). */
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(title) {
        display: none !important;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(icon) {
        inline-size: 1.7rem;
        block-size: 1.7rem;
        min-inline-size: 1.7rem;
        min-block-size: 1.7rem;
    }
    
    /* Prefer Phosphor glyph; letter fallback is last resort (was wrongly showing "U"). */
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(glyph) {
        inline-size: 100%;
        block-size: 100%;
        --icon-padding: 0.1rem;
        --icon-size: 100%;
        opacity: 1;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(letter) {
        opacity: 0;
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]:hover,
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]:active {
        background: color-mix(in oklch, #fff 10%, transparent);
        color: contrast-color(inherit(background-color));
    }
    
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home][data-env-active="true"],
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home][data-active],
    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home][data-focus] {
        background: color-mix(in oklch, #fff 8%, transparent);
        color: contrast-color(inherit(background-color));
        /*box-shadow: inset 0 -2px 0 #60cdff;*/
    }
    
    /*
     * Mobile footer statusbar is replaced by the fixed overlay band when
     * `[data-status-overlay]` is set (see statusbar.scss). Without overlay
     * (standalone), hide the footer copy entirely.
     */
    .env-shell-chrome:not([data-desktop]):not([data-status-overlay]) .env-ui-statusbar {
        display: none !important;
    }

}