/* ==========================================================================
   Sidebar behaviour and mobile layout.

   Loaded after ba-ui.css and ba-pages.css, so it wins over the vendor theme
   without needing !important on every rule.

   Two things live here:

     1. The sidebar collapse — an icon rail on desktop, a drawer on mobile.
     2. The mobile fixes the theme never had. It was built desktop-first, and
        below about 768px tables ran off the side of the screen, the fixed
        navbar overlapped the content, and tap targets were smaller than a
        fingertip.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar packing

   The theme pads the menu wrapper generously, which left the menu button and
   the profile floating well away from the logo. Trimming the left padding
   brings both hard against the brand area, where they read as one group.
   -------------------------------------------------------------------------- */

.navbar .navbar-menu-wrapper {
    padding-left: 0 !important;
}

.navbar .navbar-menu-wrapper .navbar-nav.me-lg-2 {
    margin-right: .2rem !important;
}

/* Tighten the gap between the menu button and the profile. */
.navbar .ba-burger { margin-right: .15rem !important; }

/* --------------------------------------------------------------------------
   The logo, centred over the sidebar

   .navbar-brand-inner-wrapper is space-between, which was fine while a
   collapse button sat beside the logo. That button moved into the main bar, so
   space-between pinned the logo hard against the left edge — 76px off the
   centre of the sidebar it is supposed to sit above.
   -------------------------------------------------------------------------- */

.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper {
    justify-content: center !important;
    padding: 0 .5rem;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo {
    margin: 0 auto;
}

/* The small mark is hidden until the sidebar is collapsed.

   The theme's own rule for this is scoped to .navbar-brand-inner-wrapper, a
   div the staff navbar has and the member navbar does not — so the member bar
   showed the full logo and the small mark side by side. Hiding it here covers
   both bars; the .ba-sidebar-collapsed rules further down bring it back with
   enough specificity to win. */
.navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
    display: none;
}

/* Below 992px the theme swaps the full logo for the small mark — but that rule
   is scoped to .navbar-brand-inner-wrapper as well, so on the member navbar the
   full logo went and nothing replaced it: an empty corner on every phone. Both
   halves of the swap are restated here so the two bars behave alike. */
@media (max-width: 991px) {
    .navbar .navbar-brand-wrapper .navbar-brand.brand-logo {
        display: none;
    }

    .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
        display: inline-block;
    }

    .navbar .navbar-brand-wrapper .ba-brand-img-mini {
        height: 34px;
        width: auto;
        object-fit: contain;
    }
}

/* --------------------------------------------------------------------------
   One row on a tablet

   The theme gives the brand area a fixed 55px below 992px and sizes the menu
   beside it as calc(100% - 55px). The brand is not 55px: the small logo, the
   padding around it and the menu button come to about 116px. Brand plus menu
   therefore added up to more than the screen — 881px of content in an 820px
   bar — and the menu wrapped onto a second row. The logo was left sitting
   alone at the top with the search, the bell, the language picker and the
   profile all on a line beneath it, and the bar stood twice as tall as it
   should.

   Nothing here needs a fixed width. The brand takes what it needs, the menu
   takes what is left, and the arithmetic that was wrong is gone.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .navbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .navbar .navbar-brand-wrapper {
        width: auto !important;
        flex: 0 0 auto;
    }

    .navbar .navbar-menu-wrapper {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;          /* or a long profile name stops it shrinking */
    }

    /* Both halves are the same height, so everything on the bar shares one
       centre line instead of the logo riding above it. */
    .navbar .navbar-brand-wrapper,
    .navbar .navbar-menu-wrapper {
        height: 4.625rem;
    }
}

/* Collapsed to the icon rail, the brand area shrinks to match — the small
   logo needs centring in that narrower space too. */
.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper {
    justify-content: center !important;
    padding: 0;
}

.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
    margin: 0 auto;
}

/* The theme hides the profile block outright at some widths (it is bundled
   into a .d-none rule). It is the only thing showing who is signed in, so it
   stays visible from tablet up. */
@media (min-width: 768px) {
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile {
        display: flex !important;
    }
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link {
    padding-left: .35rem;
    padding-right: .35rem;
}

/* An empty <li> the theme leaves behind, which otherwise eats horizontal
   space between the profile and the controls. */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-user-status:empty,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-user-status {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Search results in the top bar
   -------------------------------------------------------------------------- */

.ba-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 1.5rem);
    max-height: 420px;
    overflow-y: auto;
    background: var(--pg-card, #fff);
    border: 1px solid var(--pg-border, #eceef2);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .16);
    z-index: 1050;
}

.ba-search-group {
    padding: .55rem .9rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pg-dim, #667085);
}

.ba-search-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .9rem;
    text-decoration: none;
    color: var(--pg-text, #101828);
    transition: background-color .12s;
}

.ba-search-item:hover {
    background: var(--pg-soft, #f7f8fa);
    color: var(--pg-text, #101828);
}

.ba-search-photo {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
    border: 1px solid var(--pg-border, #eceef2);
}

.ba-search-icon {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--ba-primary-rgb, 124, 58, 237), .1);
    color: var(--ba-primary, #7c3aed);
}

.ba-search-text  { min-width: 0; display: flex; flex-direction: column; }
.ba-search-label { font-size: .87rem; font-weight: 600; line-height: 1.3; }
.ba-search-sub   { font-size: .74rem; color: var(--pg-dim, #667085); }

.ba-search-empty {
    padding: 1.4rem 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--pg-dim, #667085);
}

/* --------------------------------------------------------------------------
   The hamburger
   -------------------------------------------------------------------------- */

.ba-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s;
}

.ba-burger:hover,
.ba-burger:focus-visible {
    background: rgba(var(--ba-primary-rgb, 124, 58, 237), .1);
    outline: none;
}

.ba-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--ba-navbar-text, #101828);
    transition: transform .22s ease, opacity .18s ease, width .22s ease;
    transform-origin: center;
}

/* The middle bar shortens when collapsed, so the button shows its own state. */
.ba-sidebar-collapsed .ba-burger span:nth-child(2) { width: 62%; }

/* On mobile the three bars fold into a cross while the drawer is open. */
@media (max-width: 991.98px) {
    .ba-sidebar-open .ba-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .ba-sidebar-open .ba-burger span:nth-child(2) { opacity: 0; }
    .ba-sidebar-open .ba-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   Desktop: collapse to an icon rail

   The rail itself — widths, the main-panel offset, the shrunken brand, the
   hover-open submenus — is the theme's own `sidebar-icon-only`, which
   ba-sidebar.js toggles. Re-implementing it here only produced a second,
   less complete copy that lost to the theme on specificity.

   What is left is the part the theme does not do: showing the label as a
   tooltip once the text is hidden.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .sidebar, .main-panel, .navbar .navbar-brand-wrapper {
        transition: width .24s ease, margin .24s ease, padding .24s ease;
    }

    /*
      Nothing may spill out of the rail.

      The role badge at the foot of the menu is 88px wide and the rail is 70,
      so it hung 43px over the content beside it. The theme hides the labels
      but not everything else that was sized for a 236px sidebar.
    */
    .ba-sidebar-collapsed .sidebar {
        overflow-x: hidden;
    }

    .ba-sidebar-collapsed .sidebar .badge,
    .ba-sidebar-collapsed .sidebar .nav-category,
    .ba-sidebar-collapsed .sidebar .sidebar-role,
    .ba-sidebar-collapsed .sidebar .nav-profile-text,
    .ba-sidebar-collapsed .sidebar .menu-title,
    .ba-sidebar-collapsed .sidebar .menu-arrow {
        display: none !important;
    }

    /* A catch-all for anything else the theme sized for the wide menu. */
    .ba-sidebar-collapsed .sidebar .nav .nav-item > * {
        max-width: 100%;
    }

    /*
      The logo when the menu is collapsed.

      The wide logo is hidden at this width and the small one was never shown,
      so the corner sat empty. This restores the mark, centred in the rail.
    */
    .ba-sidebar-collapsed .navbar .navbar-brand-wrapper .navbar-brand.brand-logo {
        display: none !important;
    }

    .ba-sidebar-collapsed .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
    }

    .ba-sidebar-collapsed .navbar .navbar-brand-wrapper .ba-brand-img-mini {
        height: 36px;
        width: auto;
        object-fit: contain;
    }

    .ba-sidebar-collapsed .sidebar .nav .nav-item { position: relative; }

    .ba-sidebar-collapsed .sidebar .nav .nav-item > .nav-link::after {
        content: attr(data-title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(8px);
        padding: .4rem .7rem;
        border-radius: 8px;
        background: #101828;
        color: #fff;
        font-size: .78rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s;
        z-index: 1040;
    }

    .ba-sidebar-collapsed .sidebar .nav .nav-item > .nav-link:hover::after { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Mobile: a real drawer
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .sidebar,
    .sidebar.sidebar-offcanvas {
        position: fixed !important;
        top: 0;
        bottom: 0;
        /* The theme slid this in from the RIGHT, which reads as wrong next to
           a left-aligned hamburger. */
        left: 0 !important;
        right: auto !important;
        width: 268px !important;
        max-width: 84vw;
        max-height: 100vh !important;
        padding-top: 4.2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        z-index: 1045;
    }

    .ba-sidebar-open .sidebar,
    .ba-sidebar-open .sidebar.sidebar-offcanvas {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(16, 24, 40, .22);
    }

    /* The theme's own open class, in case a page still sets it. */
    .sidebar-offcanvas.active { transform: translateX(0); }

    .ba-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, .48);
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s, visibility .24s;
        z-index: 1040;
    }

    .ba-sidebar-backdrop.is-visible { opacity: 1; visibility: visible; }

    /* The panel must not be pushed aside for a drawer that floats over it. */
    .main-panel {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* The navbar is fixed, so the content needs to clear it. */
    .content-wrapper { padding-top: 1rem; }

    .navbar .navbar-brand-wrapper { width: auto !important; min-width: 0 !important; }
}

/* --------------------------------------------------------------------------
   Mobile fixes the theme never had
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    /* ---- Nothing may push the page sideways ---- */
    html, body { overflow-x: hidden; max-width: 100%; }

    .container, .container-fluid, .content-wrapper, .main-panel {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ---- Tables scroll inside their own card, never the page ---- */
    .table-responsive,
    .pg-table-scroll,
    .dataTables_wrapper {
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* A table forced to 100% cannot scroll — it just squashes every column
       into an unreadable column of single letters. */
    .table-responsive > table,
    .pg-table-scroll > table,
    table.dataTable {
        min-width: 560px;
        width: auto !important;
    }

    /* Something has to say the table scrolls, or it looks truncated. */
    .pg-card .pg-table-scroll { position: relative; }

    .pg-table-scroll::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
        background: linear-gradient(to right, transparent, rgba(16, 24, 40, .07));
        pointer-events: none;
    }

    .ba-page table.dataTable thead th,
    .ba-page table.dataTable tbody td {
        padding: .6rem .65rem;
        font-size: .82rem;
    }

    /* ---- DataTables chrome stacks instead of colliding ---- */
    .ba-page .dataTables_wrapper { padding: .85rem; }

    .ba-page .dt-buttons {
        width: 100%;
        overflow-x: auto;
        padding-bottom: .25rem;
        flex-wrap: nowrap;
    }
    .ba-page .dt-button { flex: 0 0 auto; }

    .ba-page .dataTables_filter input { max-width: 100%; }

    .ba-page .dataTables_info,
    .ba-page .dataTables_paginate { text-align: center; width: 100%; }
    .ba-page .dataTables_paginate { margin-top: .5rem; }

    /* ---- Headers, cards, tiles ---- */
    .pg-head { flex-direction: column; align-items: stretch; gap: .75rem; }
    .pg-actions { width: 100%; }
    .pg-actions .btn { flex: 1 1 auto; }

    .pg-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
    .pg-stat  { padding: .8rem .9rem; }
    .pg-stat-n { font-size: 1.15rem; }

    .card, .pg-card, .dash-panel, .stat-card { border-radius: 12px; }
    .card-body, .pg-card-body, .dash-panel-body { padding: 1rem; }

    /* ---- Tap targets ---- */
    .btn, .nav-link, .dropdown-item, .page-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .btn-sm { min-height: 34px; }

    .sidebar .nav .nav-item .nav-link { min-height: 46px; }

    /* ---- Forms ---- */
    /* Any font under 16px makes iOS Safari zoom the whole page on focus, and
       it never zooms back out. */
    .form-control, .form-select, input, select, textarea { font-size: 16px !important; }

    .row > [class*="col-"] { margin-bottom: .35rem; }

    /* ---- Modals ---- */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-body { padding: 1rem; max-height: 72vh; overflow-y: auto; }
    .modal-footer { padding: .75rem 1rem; }
    .modal-footer .btn { flex: 1 1 auto; }

    /* ---- Charts need a floor, or they collapse to nothing ---- */
    .chart-wrap, .chart-wrap canvas { min-height: 200px; }

    /* ---- Long words must wrap rather than widen the page ---- */
    .dash-row-title, .pg-person-name, .card-title, td, th {
        overflow-wrap: anywhere;
    }

    /* ---- Navbar ---- */
    .navbar .navbar-menu-wrapper { padding: 0 .5rem; }
    .navbar .nav-profile-name { display: none; }
    .ba-ui-item .nav-link { min-width: 38px; height: 38px; }

    /* ---- The dashboard banner ---- */
    .dash-hero { padding: 1.25rem 1.1rem; }
    .dash-hero h3 { font-size: 1.15rem; }
    .dash-hero-stats { gap: 1rem; }
    .dash-hero-stat .n { font-size: 1.25rem; }

    /* ---- Print / download button rows ---- */
    .d-flex.gap-1 .btn, .d-flex.gap-2 .btn { padding: .35rem .6rem; font-size: .78rem; }
}

/* Very small phones. */
@media (max-width: 400px) {
    .pg-stats { grid-template-columns: 1fr 1fr; }
    .quick-grid { grid-template-columns: repeat(2, 1fr); }
    .pg-title { font-size: 1rem; }
    .dash-hero-stats { gap: .75rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   Printing — nobody wants the sidebar on paper
   -------------------------------------------------------------------------- */

@media print {
    .sidebar, .navbar, .ba-sidebar-backdrop,
    .pg-actions, .dt-buttons, .dataTables_filter,
    .dataTables_paginate, .dataTables_info { display: none !important; }

    .main-panel { width: 100% !important; margin: 0 !important; }
    .pg-card, .card { border: 1px solid #ddd !important; box-shadow: none !important; }

    .pg-table-scroll, .table-responsive { overflow: visible !important; }
    table.dataTable { min-width: 0 !important; width: 100% !important; }
}