// Modern minimal "liquid glass" left sidebar layout.
// Reworks Odoo's top navbar into a left icon-rail + slim glass topbar,
// without touching NavBar's underlying JS/state logic.

$xeno-sidebar-width: 238px; // 10% narrower than the previous 264px
$xeno-sidebar-collapsed-width: 64px; // folded, icon-only rail
$xeno-topbar-height: 48px;

@media (min-width: 768px) {
    .xeno_sidebar_header {
        display: contents;
    }

    .xeno_sidebar_rail {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: $xeno-sidebar-width !important;
        height: 100vh !important;
        z-index: 1010;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        padding: 14px 10px;
        box-sizing: border-box;
        background: #fafafa;
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.15);
        transition: width 0.2s ease, padding 0.2s ease;
    }

    // Fold/unfold toggle (Microsoft-style panel button) pinned at the top
    // of the rail, above the app list.
    .xeno_sidebar_toggle_row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 2px 6px;
        flex: 0 0 auto;
    }

    .xeno_sidebar_toggle {
        background: transparent !important;
        border: none;
        color: rgba(255, 255, 255, 0.75) !important;
        cursor: pointer;

        &:hover {
            background: rgba(255, 255, 255, 0.12) !important;
            color: #000 !important;
        }
    }

    .xeno_sidebar_top,
    .xeno_sidebar_bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

    // The app list grows to fill all vertical space and scrolls inside
    // itself; the identity/systray block is pinned to the very bottom
    // (margin-top:auto), taking only the room its two rows need.
    .xeno_sidebar_bottom {
        flex: 0 0 auto;
        margin-top: auto;
    }

    // Bottom systray: two explicit rows (split in the template by item
    // key) -- icon items on top, identity (user avatar + company name)
    // below. Stacking two real flex rows is deterministic; the previous
    // single-row + `order`/flex-break approach depended on the systray
    // components' own DOM roots, which vary and don't reliably accept the
    // ordering.
    .xeno_sidebar_rail .o_menu_systray {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .xeno_sidebar_rail .xeno_systray_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    // Identity row: user avatar first, then the company name, left-aligned
    // together -- not the centered 44px icon buttons the other systray
    // items use.
    .xeno_sidebar_rail .o_user_menu,
    .xeno_sidebar_rail .o_switch_company_menu {
        flex: 0 0 auto;
    }

    .xeno_sidebar_rail .o_user_menu button,
    .xeno_sidebar_rail .o_switch_company_menu button {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        justify-content: flex-start !important;
        gap: 8px;
        padding: 6px 8px;
    }

    // Reveal the company name (core hides it below the lg breakpoint) and
    // drop the fallback building glyph -- the avatar beside it stands in
    // for the icon, matching the design.
    .xeno_sidebar_rail .o_switch_company_menu .oe_topbar_name {
        display: inline-block !important;
        color: #6b7280;
        font-size: 0.85rem;
        max-width: 150px;
    }

    .xeno_sidebar_rail .o_switch_company_menu .fa-building {
        display: none !important;
    }

    .xeno_static_apps {
        // Grow to consume all space above the pinned bottom block and
        // scroll internally, instead of a fixed max-height that left an
        // awkward gap above the systray. min-height:0 lets a flex child
        // actually shrink/scroll rather than overflow its parent.
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .xeno_sidebar_app_icon {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        padding: 4px 6px;
        border-radius: 10px;
        flex-shrink: 0;
        text-decoration: none;
        transition: background 0.15s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.12);
        }

        &.active {
            background: #cce4ff;
        }
    }

    .xeno_sidebar_app_label {
        color: #6b7280;
        font-size: 0.9rem;
        font-weight: 500;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.2;
        flex: 1 1 auto;
        min-width: 0;
        transition: color 0.15s ease;
    }

    .xeno_sidebar_app_group {
        display: flex;
        flex-direction: column;
    }

    .xeno_sidebar_caret {
        color: #6b7280;
        font-size: 0.72rem;
        flex-shrink: 0;
        padding: 6px 6px;
        margin: -6px -4px;
        transition: color 0.15s ease;

        &:hover {
            color: #000;
        }
    }

    .xeno_sidebar_submenu {
        display: flex;
        flex-direction: column;
        padding: 2px 0 6px 30px;
        gap: 1px;
    }

    .xeno_sidebar_submenu_item {
        display: block;
        color: #6b7280;
        font-size: 0.83rem;
        text-decoration: none;
        padding: 6px 10px;
        border-radius: 8px;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.25;

        &:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #000;
        }
    }

    .xeno_sidebar_submenu_group_label {
        color: #6b7280;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 8px 10px 2px;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.2;
    }

    .xeno_sidebar_submenu_depth_1 {
        padding-left: 20px;
    }

    .xeno_sidebar_submenu_depth_2 {
        padding-left: 30px;
    }

    // Only rendered when an admin sets xeno_icon on a menu item (Sidebar
    // Menu Settings) -- absent otherwise, so existing items are unaffected.
    .xeno_sidebar_submenu_icon {
        width: 14px;
        margin-right: 6px;
        text-align: center;
        opacity: 0.8;
    }

    .xeno_sidebar_rail button,
    .xeno_sidebar_rail .dropdown-toggle {
        color: #6b7280 !important;
        border-radius: 10px;
        min-width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: rgba(255, 255, 255, 0.12) !important;
        }
    }

    .xeno_topbar {
        position: fixed;
        top: 0;
        left: $xeno-sidebar-width;
        right: 0;
        height: $xeno-topbar-height;
        z-index: 1005;
        display: flex !important;
        align-items: center;
        padding: 0 24px;
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        border-bottom: 1px solid rgba(20, 41, 51, 0.08);
        transition: left 0.2s ease;
    }

    :root[data-theme="dark"] .xeno_topbar,
    .o_dark_mode .xeno_topbar {
        background: rgba(20, 20, 22, 0.55);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    // The brand label (app name, e.g. "HR") reuses core's DropdownItem
    // component, which carries Bootstrap's .dropdown-item class --
    // .dropdown-item{width:100%} is meant for filling a real dropdown
    // menu, but here it makes the label stretch to fill the ENTIRE
    // .xeno_topbar flex row (its flex-basis is auto, so the width
    // property applies literally). That leaves zero space for
    // .o_menu_sections below to grow into, so it computes to a hard 0px
    // and every section ends up hidden -- this went unnoticed before
    // since .o_menu_sections was itself always display:none. Constrain
    // the brand back to its own content width so the rest of the row is
    // actually available.
    .xeno_topbar .o_menu_brand {
        width: auto !important;
        flex: 0 0 auto;
    }

    // Core's own o_menu_sections (an app's section tabs) stays hidden
    // everywhere by default, same as before -- it duplicates the left
    // sidebar's own submenu tree, and on stock apps (Calendar, Settings,
    // Employees, ...) it just adds a second, differently-styled nav
    // nobody asked for. It's re-enabled below ONLY for the HR app, whose
    // own client-action pages (Dashboard, etc.) leave the top bar mostly
    // empty since those don't populate the neighboring
    // o_navbar_breadcrumbs portal.
    .xeno_topbar .o_menu_sections {
        display: none !important;
    }

    // Scoped by the brand link's own data-menu-xmlid (the current app's
    // xmlid, set by core's own template) rather than a body/route class --
    // no theme JS needed, and it can't drift out of sync with which app is
    // actually open. Sibling selector works because o_menu_brand always
    // renders immediately before o_menu_sections in the topbar markup.
    //
    // These tabs have to be styled from scratch rather than just nudged,
    // because this theme moves core's o_main_navbar class onto the SIDEBAR
    // <nav> and .xeno_topbar is a *sibling* of that node -- so every core
    // rule that would normally paint them is scoped
    // `.o_main_navbar .o_menu_sections ...` and never reaches here. Left
    // alone they render with no background, no colour and no padding, which
    // is invisible against this bar's near-white glass. Everything below is
    // the replacement for that missing core chrome.
    .xeno_topbar .o_menu_brand[data-menu-xmlid="xeno_leave.menu_xeno_hr_root"] ~ .o_menu_sections {
        display: flex !important;
        align-items: center;
        gap: 2px;
        min-width: 0;

        .o_nav_entry,
        .dropdown-toggle,
        .dropdown > button,
        > button {
            display: flex;
            align-items: center;
            height: auto;
            padding: 5px 10px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: rgba(20, 41, 51, 0.78);
            font-size: 0.82rem;
            font-weight: 600;
            white-space: nowrap;
            text-decoration: none;

            &:hover,
            &:focus {
                background: rgba(20, 41, 51, 0.07);
                color: #142933;
            }
        }

        .dropdown.show > button,
        .o_nav_entry.active {
            background: rgba(20, 41, 51, 0.1);
            color: #142933;
        }
    }

    :root[data-theme="dark"] .xeno_topbar .o_menu_brand[data-menu-xmlid="xeno_leave.menu_xeno_hr_root"] ~ .o_menu_sections,
    .o_dark_mode .xeno_topbar .o_menu_brand[data-menu-xmlid="xeno_leave.menu_xeno_hr_root"] ~ .o_menu_sections {
        .o_nav_entry,
        .dropdown-toggle,
        .dropdown > button,
        > button {
            color: rgba(255, 255, 255, 0.82);

            &:hover,
            &:focus {
                background: rgba(255, 255, 255, 0.12);
                color: #fff;
            }
        }

        .dropdown.show > button,
        .o_nav_entry.active {
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
        }
    }

    .o_action_manager {
        margin-left: $xeno-sidebar-width;
        margin-top: $xeno-topbar-height;
        height: calc(100% - #{$xeno-topbar-height}) !important;
        transition: margin-left 0.2s ease;
    }

    .o_web_client {
        display: block !important;
    }

    // ------------------------------------------------------------------
    // Folded (collapsed) rail: an icon-only strip, toggled by the panel
    // button. The class lives on <body> (set from navbar_patch.js) so it
    // can also shift the topbar + action-manager, which sit outside the
    // navbar's own DOM. Everything transitions via the base rules above.
    // ------------------------------------------------------------------
    body.xeno_sidebar_collapsed {
        .xeno_sidebar_rail {
            width: $xeno-sidebar-collapsed-width !important;
            padding-left: 8px;
            padding-right: 8px;
        }

        // Hide labels/carets/open submenus; keep only the icon badges.
        .xeno_sidebar_app_label,
        .xeno_sidebar_caret,
        .xeno_sidebar_submenu {
            display: none !important;
        }

        .xeno_sidebar_app_icon {
            justify-content: center;
            gap: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .xeno_sidebar_toggle_row {
            justify-content: center;
        }

        // Identity block: drop the company-name text and left-align padding,
        // centering the avatar/button so it reads as an icon like the rest.
        .xeno_sidebar_rail .o_switch_company_menu .oe_topbar_name {
            display: none !important;
        }

        // One icon per row: each row's own items (messaging + activity in
        // the icons row, avatar + company switcher in the identity row)
        // stack vertically instead of squeezing side by side into the
        // narrow 64px rail, where two 44px buttons don't fit next to each
        // other.
        .xeno_sidebar_rail .xeno_systray_row {
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .xeno_sidebar_rail .o_user_menu button,
        .xeno_sidebar_rail .o_switch_company_menu button {
            justify-content: center !important;
            padding: 6px !important;
        }

        .xeno_topbar {
            left: $xeno-sidebar-collapsed-width;
        }

        .o_action_manager {
            margin-left: $xeno-sidebar-collapsed-width;
        }
    }
}

// Professional monochrome icon badges, replacing Odoo's colorful
// illustrated app icons across the sidebar and the app dashboard.
.xeno_app_badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #6b7280;
    font-size: 15px;
    transition: color 0.15s ease;
}

// Active sidebar app: badge icon, label and caret all pick up the same
// accent colour together, matching .xeno_sidebar_app_icon.active's own
// #cce4ff background -- each needs its own .active class (added in the
// template alongside the parent link's) since CSS can't select a child
// based on a class on its ancestor.
.xeno_app_badge.active,
.xeno_sidebar_app_label.active,
.xeno_sidebar_caret.active {
    color: #1d4ed8;
}

.xeno_app_badge_lg {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 24px;
    margin-bottom: 10px;
}

// Mandatory first-login policy acknowledgment overlay -- deliberately a
// plain fixed div above everything (z-index beyond the sidebar rail's
// 1010 and the topbar's 1005), not core's Dialog component, so there is no
// built-in Escape/backdrop-click dismissal to fight. Only unmounts when
// xenoConfirmPolicyAck()'s RPC succeeds (see navbar_patch.js).
.xeno_policy_ack_overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 41, 51, 0.75);
    padding: 20px;
}

.xeno_policy_ack_modal {
    background: #fff;
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 28px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);

    h2 {
        font-family: "Oswald", sans-serif;
        color: #142933;
        margin-bottom: 4px;
    }
}

.xeno_policy_ack_policies {
    overflow-y: auto;
    flex: 1 1 auto;
    margin: 12px 0;
    padding-right: 4px;
}

.xeno_policy_ack_policy {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 0;

    &:last-child {
        border-bottom: none;
    }
}

.xeno_policy_ack_policy_title {
    font-weight: 700;
    color: #142933;
    margin-bottom: 4px;
}

.xeno_policy_ack_checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
    cursor: pointer;

    input {
        margin-top: 3px;
    }
}

.xeno_policy_ack_confirm {
    align-self: flex-end;

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

// Liquid-glass tiles for our App Dashboard
.xeno_app_tile {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

// ---------------------------------------------------------------- phones
// The custom sidebar/topbar chrome is desktop-only (its whole layout lives
// in the min-width:768px block above). On a phone it has no layout, so it
// renders in normal flow and overlays the page. Phones are routed to the
// touch-first Odoo Mobile pages, which carry their own navigation -- so
// when one of those pages is showing, hide the desktop chrome outright and
// give the action area a real (dynamic) viewport height, so the page fills
// the screen and scrolls instead of being clipped. Scoped with :has() to
// the mobile pages only, leaving any other page's chrome intact.
@media (max-width: 767.98px) {
    body:has(.o_xeno_mobile) {
        .xeno_sidebar_header {
            display: none !important;
        }

        .o_action_manager {
            margin: 0 !important;
            height: 100vh !important;
            height: 100dvh !important;
        }
    }
}