/* ==========================================================================
   Repair POS — Icon Rail Navigation
   --------------------------------------------------------------------------
   A fixed, narrow icon-only sidebar modelled on the chat-app web rail
   (admin/src/components/user/WebNavRail.jsx). Brand-blue in light mode,
   dark navy in dark mode; white icons; a rounded "pill" highlight on hover
   and for the active route; hover tooltips for simple items and the existing
   flyout panels for items that have a submenu (Users, Settings).

   Loaded AFTER style.css and dark-mode.css so it has the final say on the
   sidebar. Everything is scoped under `.sidebar` so nothing else is affected.
   ========================================================================== */

:root { --rail-w: 72px; }

/* ── Rail container ──────────────────────────────────────────────────────── */
.sidebar,
.sidebar.close {
    width: var(--rail-w) !important;
    background: var(--app-primary) !important;
    border-right: none !important;
    padding: 14px 0 16px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    overflow: visible !important;
}
body.dark .sidebar,
body.dark .sidebar.close {
    background: #111318 !important;
}

/* Page content always sits flush against the fixed rail */
.sidebar ~ .home,
.sidebar.close ~ .home {
    left: var(--rail-w) !important;
    width: calc(100% - var(--rail-w)) !important;
}

/* ── Brand box ───────────────────────────────────────────────────────────── */
.sidebar header {
    width: 100%;
    padding: 0 !important;
    margin: 0 0 4px !important;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar header .toggle { display: none !important; }   /* no expand/collapse */
.sidebar .rail-brand {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; text-decoration: none;
    transition: background .15s ease;
}
.sidebar .rail-brand:hover { background: rgba(255, 255, 255, 0.28); }
body.dark .sidebar .rail-brand { background: rgba(255, 255, 255, 0.10); }
.sidebar .rail-brand img { width: 30px; height: 30px; object-fit: contain; }

/* ── Layout: menu fills, bottom group pinned to the floor ────────────────── */
.sidebar .menu-bar {
    width: 100%;
    height: auto !important;
    flex: 1;
    min-height: 0;                    /* allow the inner menu to shrink & scroll */
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    margin-top: 4px;
}

/* The middle menu scrolls when there are more items than fit the rail height,
   so nothing is ever hidden below the fold. The scrollbar is hidden; each
   item's hover popup (label tooltip / submenu flyout) is floated with
   position:fixed via JS (the rail-popup script in app.blade.php) so this
   scrolling — therefore clipping — container never cuts them off. */
.sidebar .menu {
    margin-top: 6px !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;                                    /* the menu scrolls; bottom-content stays pinned */
    scrollbar-width: thin;                                    /* Firefox: slim bar */
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.sidebar.close .menu { overflow: hidden auto !important; }   /* beats app.blade's visible */
/* A slim, subtle scrollbar so it's clear the menu scrolls (WebKit). */
.sidebar .menu::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar .menu::-webkit-scrollbar-track { background: transparent; }
.sidebar .menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 8px; }
.sidebar .menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
.sidebar .menu-links,
.sidebar .bottom-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Theme Color / Logout never scroll away with the menu above them — they're
   a separate flex sibling, always pinned to the floor. Without a boundary
   that reads as "the menu ends here, this is something else", whatever the
   scrollable menu happens to land on right above it — an open submenu's last
   item included — looks like it belongs to the same group. */
.sidebar .bottom-content {
    flex-shrink: 0;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    /* A slightly darker panel so the Theme Color / demo footer reads as its
       own group, distinct from the scrolling menu above it. */
    background: rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    padding-bottom: 6px;
}
body.rail-open .sidebar .bottom-content { padding-left: 6px; padding-right: 6px; }
body.dark .sidebar .bottom-content {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Dividers between groups ─────────────────────────────────────────────── */
.sidebar .rail-divider {
    width: 30px; height: 1px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.20);
    margin: 9px auto;
    list-style: none;
}
body.dark .sidebar .rail-divider { background: rgba(255, 255, 255, 0.12); }

/* ── Items ───────────────────────────────────────────────────────────────── */
.sidebar .menu-links > li.nav-link,
.sidebar .menu-links > li.has-submenu,
.sidebar .bottom-content > li.nav-link {
    height: auto !important;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* The clickable square that holds each icon.
   Direct-child selectors only, so flyout submenu links are untouched. */
.sidebar .menu-links > li > a,
.sidebar .menu-links > li.has-submenu > a.submenu-toggle,
.sidebar .bottom-content > li > a {
    width: 46px;
    height: 46px !important;
    min-width: 46px;
    border-radius: 10px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
    transition: background .15s ease;
}
.sidebar .menu-links > li > a:hover,
.sidebar .menu-links > li.has-submenu > a.submenu-toggle:hover,
.sidebar .bottom-content > li > a:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}
.sidebar .menu-links > li.active > a,
.sidebar .menu-links > li.has-submenu.parent-active > a.submenu-toggle {
    background: rgba(255, 255, 255, 0.26) !important;
    border-radius: 10px !important;
}

/* ── Dark mode: primary-coloured hover / active states ───────────────────── */
body.dark .sidebar .menu-links > li > a:hover,
body.dark .sidebar .menu-links > li.has-submenu > a.submenu-toggle:hover,
body.dark .sidebar .bottom-content > li > a:hover {
    background: rgba(var(--app-primary-rgb), 0.28) !important;
}
body.dark .sidebar .menu-links > li.active > a,
body.dark .sidebar .menu-links > li.has-submenu.parent-active > a.submenu-toggle {
    background: rgba(var(--app-primary-rgb), 0.40) !important;
    box-shadow: 0 0 0 1px rgba(var(--app-primary-rgb), 0.35);
}

/* ── Icons — always white, dim until hover/active ───────────────────────── */
.sidebar .icon { min-width: 46px !important; }

/* SVG image icons */
.sidebar img.icon {
    width: 21px !important;
    height: 21px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.72;
    transition: opacity .15s ease;
}
.sidebar li > a:hover img.icon,
.sidebar li.active img.icon,
.sidebar li.parent-active > a img.icon { opacity: 1; }

/* Tabler font icons — identical treatment to SVG icons */
.sidebar i.icon {
    color: #fff !important;
    opacity: 0.72;
    line-height: 46px;
    font-size: 22px;
    transition: opacity .15s ease;
}
.sidebar li > a:hover i.icon,
.sidebar li.active i.icon,
.sidebar li.parent-active > a i.icon { opacity: 1; }

/* Dark mode: both icon types are white at the same dim opacity */
body.dark .sidebar img.icon { opacity: 0.68; }
body.dark .sidebar i.icon   { color: #fff !important; opacity: 0.68; }

body.dark .sidebar li > a:hover img.icon,
body.dark .sidebar li.active img.icon,
body.dark .sidebar li.parent-active > a img.icon { opacity: 1; }

body.dark .sidebar li > a:hover i.icon,
body.dark .sidebar li.active i.icon,
body.dark .sidebar li.parent-active > a i.icon { color: #fff !important; opacity: 1; }

/* Submenu toggles have no tooltip (they use the flyout), so their label would
   otherwise sit in the flex box at opacity:0 and shove the icon off-centre.
   Drop it from layout so the icon centres like every other rail item. */
.sidebar .menu-links > li.has-submenu > a.submenu-toggle > .nav-text { display: none; }

/* Inline SVG icons (theme toggle) follow the same treatment */
.sidebar .rail-svg-icon {
    width: 21px; height: 21px;
    stroke: #fff;
    opacity: 0.72;
    transition: opacity .15s ease;
}
.sidebar li > a:hover .rail-svg-icon { opacity: 1; }

/* Theme icon swap — moon in light mode, sun in dark mode */
.sidebar .rail-theme .icon-sun  { display: none; }
body.dark .sidebar .rail-theme .icon-moon { display: none; }
body.dark .sidebar .rail-theme .icon-sun  { display: block; }

/* ── Hover tooltips (simple items only — submenu items use their flyout) ─── */
.sidebar .nav-link:not(.has-submenu) > a > .nav-text {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    background: #1A2330;
    color: #fff !important;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    z-index: 1002;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    pointer-events: none;
    transition: opacity .15s ease;
}
.sidebar .nav-link:not(.has-submenu) > a:hover > .nav-text {
    opacity: 1;
    visibility: visible;
    filter: none !important;
}

/* Count badge inside a nav tooltip (e.g. Bookings) — sit it neatly inline. */
.sidebar .nav-text .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-width: 17px;
    height: 16px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 9px;
    vertical-align: middle;
}

/* ── Submenu flyout positioning relative to the narrow rail ──────────────── */
.sidebar li.has-submenu { position: relative; }
.sidebar.close li.has-submenu:hover > .submenu {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);   /* vertically centre the panel on the icon */
}
/* Transparent bridge spanning the gap between the rail and the panel, so
   moving the cursor across it keeps the parent :hover alive (the panel is a
   DOM child of the item). Without this the 8px gap drops hover and the
   flyout collapses before it can be reached. */
.sidebar.close li.has-submenu:hover > .submenu::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 8px;
    height: 100%;
}

/* ── Dark mode: flyout panel — override app.blade inline style ───────────── */
body.dark .sidebar.close li.has-submenu:hover > .submenu {
    background: #181c25 !important;
    border: 1px solid #2b313d !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .65) !important;
}
body.dark .sidebar.close .submenu-header {
    color: #8a93a3 !important;
    border-bottom-color: #2b313d !important;
}
body.dark .sidebar.close .submenu > li:not(.submenu-header) > a {
    color: #dfe3e8 !important;
}
body.dark .sidebar.close .submenu > li:not(.submenu-header) > a:hover {
    background: rgba(var(--app-primary-rgb), .18) !important;
    color: #fff !important;
}
body.dark .sidebar.close .submenu > li.sub-active:not(.submenu-header) > a {
    background: rgba(var(--app-primary-rgb), .35) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Expanded rail
   ───────────────────────────────────────────────────────────────────────────
   The icon-only rail is fast once you know it, but unreadable on first
   contact — which is exactly the situation a demo visitor is in. `body.rail-open`
   widens it and turns every hover tooltip into a plain inline label. The width
   is driven by --rail-w, which .sidebar and .home already read.
   ═══════════════════════════════════════════════════════════════════════════ */

body.rail-open { --rail-w: 256px; }

/* Header: brand mark + wordmark + collapse control */
.sidebar header { position: relative; }
.rail-toggle {
    width: 34px; height: 34px; flex-shrink: 0;
    border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
    transition: background .15s ease;
}
.rail-toggle:hover { background: rgba(255, 255, 255, 0.28); }
.rail-toggle .ti { transition: transform .2s ease; }
body.rail-open .rail-toggle .ti { transform: rotate(180deg); }

/* Collapsed: the toggle sits under the brand mark */
.sidebar header { flex-direction: column; align-items: center; gap: 10px; }
.rail-wordmark { display: none; }

body.rail-open .sidebar { align-items: stretch; padding-left: 12px !important; padding-right: 12px !important; }
body.rail-open .sidebar header { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 10px !important; }
body.rail-open .rail-wordmark {
    display: block; flex: 1; min-width: 0;
    color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

body.rail-open .sidebar .menu-links,
body.rail-open .sidebar .bottom-content { align-items: stretch; }
body.rail-open .sidebar .rail-divider { width: auto; margin: 10px 6px; }

/* Items become full-width rows */
body.rail-open .sidebar .menu-links > li.nav-link,
body.rail-open .sidebar .menu-links > li.has-submenu,
body.rail-open .sidebar .bottom-content > li.nav-link { align-items: stretch; }

body.rail-open .sidebar .menu-links > li > a,
body.rail-open .sidebar .menu-links > li.has-submenu > a.submenu-toggle,
body.rail-open .sidebar .bottom-content > li > a {
    width: 100%; min-width: 0;
    justify-content: flex-start;
    padding: 0 12px !important;
    gap: 12px;
}
body.rail-open .sidebar .icon { min-width: 22px !important; }
/* !important because the icon-font rows carry an inline width:24px in
   sidebar.blade.php, which otherwise wins and starts their label 2px right of
   the rows whose icon is an <img>. One left margin or none. */
body.rail-open .sidebar i.icon { width: 22px !important; text-align: center; }

/* Tooltip → inline label */
body.rail-open .sidebar .nav-link:not(.has-submenu) > a > .nav-text,
body.rail-open .sidebar .menu-links > li.has-submenu > a.submenu-toggle > .nav-text {
    display: flex !important; align-items: center;
    position: static; transform: none;
    opacity: 1; visibility: visible;
    background: transparent; box-shadow: none;
    padding: 0; border-radius: 0;
    font-size: 14px; font-weight: 400; line-height: 1.2;
    color: #fff !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0; pointer-events: auto;
}
body.rail-open .sidebar .nav-text .badge { margin-left: auto; }

/* Submenu parents get a chevron and open in place rather than flying out */
body.rail-open .sidebar li.has-submenu > a.submenu-toggle::after {
    content: '\ea5f'; font-family: 'tabler-icons';
    font-size: 15px; opacity: .7; margin-left: auto;
    transition: transform .2s ease;
}
body.rail-open .sidebar li.has-submenu.open > a.submenu-toggle::after { transform: rotate(180deg); }
/* :not(.open) matters here, not just tidiness — without it this rule (5
   classes) outranks the .open display:block rule below (4 classes) too, so
   hovering an already-open dropdown — which your cursor is on the instant
   you click it open — would hide it, un-hovering would show it again, and
   the two fought in a loop for as long as the mouse sat anywhere near it. */
body.rail-open .sidebar.close li.has-submenu:not(.open):hover > .submenu { display: none; }
body.rail-open .sidebar li.has-submenu > .submenu {
    display: none; position: static !important;
    width: 100% !important; min-width: 0 !important;
    transform: none !important; box-shadow: none !important;
    background: rgba(0, 0, 0, .16) !important;
    border-radius: 9px; margin: 4px 0 6px; padding: 5px !important;
}
body.rail-open .sidebar li.has-submenu.open > .submenu { display: block; }
body.rail-open .sidebar li.has-submenu > .submenu::before { display: none !important; }
body.rail-open .sidebar .submenu > li:not(.submenu-header) > a {
    padding: 9px 12px !important; border-radius: 8px;
    font-size: 13.5px; color: rgba(255, 255, 255, .82) !important;
}
body.rail-open .sidebar .submenu > li:not(.submenu-header) > a:hover,
body.rail-open .sidebar .submenu > li.sub-active > a { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
body.rail-open .sidebar .submenu-header { display: none !important; }

/* Below tablet the expanded rail would eat the screen — keep it collapsed. */
@media (max-width: 767px) {
    body.rail-open { --rail-w: 72px; }
    .rail-toggle { display: none; }
    body.rail-open .rail-wordmark,
    body.rail-open .sidebar .nav-link:not(.has-submenu) > a > .nav-text { display: none !important; }

    /* Touch has no real hover — some mobile browsers apply :hover on tap and
       hold it until the next tap elsewhere, which flashed this flyout open
       and closed as the tap that opened it also navigated away. A tap always
       navigates on mobile (app.blade.php's toggleSubmenu), so the flyout
       itself has no job to do here. */
    .sidebar.close li.has-submenu:hover > .submenu { display: none !important; }
}


/* ==========================================================================
   RIGHT-TO-LEFT
   --------------------------------------------------------------------------
   This file was written before the Urdu and Arabic locales existed and pins
   everything with `left`, which the RTL bootstrap build does not touch: the
   rail moved to the right edge with dir="rtl", but the page content was still
   pushed 72px (or 256px) off the LEFT, so it ran under the rail and off the
   right of the window. Tooltips and submenu flyouts opened off-screen for the
   same reason.

   Everything below is the mirror of a rule above it — nothing new, and none of
   it loads for a left-to-right locale.
   ========================================================================== */

[dir="rtl"] .sidebar,
[dir="rtl"] .sidebar.close {
    right: 0;
    left: auto;
    border-right: none !important;
    border-left: none !important;
}

/* The offset that was pushing the page off-screen. */
[dir="rtl"] .sidebar ~ .home,
[dir="rtl"] .sidebar.close ~ .home {
    left: 0 !important;
    right: var(--rail-w) !important;
    width: calc(100% - var(--rail-w)) !important;
}

/* Tooltips open towards the page, which is now to the left of the rail. */
[dir="rtl"] .sidebar .nav-link:not(.has-submenu) > a > .nav-text {
    left: auto;
    right: calc(100% + 14px);
}

/* Submenu flyouts, and the hover bridge that keeps them open. */
[dir="rtl"] .sidebar.close li.has-submenu:hover > .submenu {
    left: auto;
    right: calc(100% + 8px);
}
[dir="rtl"] .sidebar.close li.has-submenu:hover > .submenu::before {
    left: auto;
    right: -8px;
}

/* Counts and chevrons sit at the far end of the row, which has swapped. */
[dir="rtl"] .sidebar .nav-text .badge { margin-left: 0; margin-right: 8px; }
[dir="rtl"] body.rail-open .sidebar .nav-text .badge { margin-right: auto; margin-left: 0; }
[dir="rtl"] body.rail-open .sidebar li.has-submenu > a.submenu-toggle::after {
    margin-left: 0;
    margin-right: auto;
}

/* The collapse chevron points the other way to start with, so the rotation
   that means "open" has to start from the other end too. */
[dir="rtl"] .rail-toggle .ti { transform: rotate(180deg); }
[dir="rtl"] body.rail-open .rail-toggle .ti { transform: rotate(0deg); }