/*
 * SB Admin 2 (ish) — hand-rolled theme layer on top of Bootstrap 5
 * Approximates https://startbootstrap.com/theme/sb-admin-2 (originally Bootstrap 4 / Font Awesome)
 */

:root {
    --sb-primary: #4e73df;
    --sb-primary-dark: #224abe;
    --sb-secondary: #858796;
    --sb-success: #1cc88a;
    --sb-info: #36b9cc;
    --sb-warning: #f6c23e;
    --sb-danger: #e74a3b;
    --sb-light: #f8f9fc;
    --sb-dark: #5a5c69;
    --sb-sidebar-width: 224px;
    --sb-sidebar-collapsed-width: 90px;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--sb-light);
    color: #3a3b45;
    overflow-x: hidden;
}

.text-gray-300 { color: #dddfeb !important; }
.text-gray-400 { color: #d1d3e2 !important; }
.text-gray-500 { color: #b7b9cc !important; }
.text-gray-600 { color: #858796 !important; }
.text-gray-800 { color: #5a5c69 !important; }
.text-gray-900 { color: #3a3b45 !important; }

.text-xs { font-size: 0.7rem; }
.font-weight-bold { font-weight: 700 !important; }

/* ---------- Wrapper ---------- */
#wrapper {
    display: flex;
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background-color: var(--sb-light);
}

#content {
    flex: 1 0 auto;
}

/* ---------- Sidebar ----------
   Below lg: a real Bootstrap offcanvas (.offcanvas.offcanvas-lg) - hidden
   by default, opened via the topbar toggle button, closed via its own
   close button/backdrop/Esc, and never remembers open state across a page
   load (nothing persists it - each load starts closed, satisfying "close
   on reload" for free).

   At lg and up: .offcanvas-lg neutralises Bootstrap's offcanvas behaviour
   entirely (no fixed position, no hidden/backdrop machinery), so it
   renders as a normal static column and our own desktop-only rules below
   take over (sticky positioning, full height, icon-only collapse). */
.sb-sidebar {
    /* Bootstrap offcanvas CSS variables - only take effect below lg. */
    --bs-offcanvas-width: var(--sb-sidebar-width);
    --bs-offcanvas-bg: transparent;
    --bs-offcanvas-color: #fff;
    --bs-offcanvas-border-width: 0;
    background: linear-gradient(180deg, var(--sb-primary) 10%, var(--sb-primary-dark) 100%);
}

@media (min-width: 992px) {
    .sb-sidebar {
        /* Bootstrap's .offcanvas-lg is supposed to neutralise the hidden/
           fixed offcanvas behaviour at this breakpoint on its own, but its
           base .offcanvas rule (visibility: hidden; position: fixed; ...)
           doesn't reliably get overridden across the full lg-and-up range
           in practice, so force it back to a normal static column here
           rather than depend on that. */
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column;
        bottom: auto !important;

        width: var(--sb-sidebar-width);
        min-width: var(--sb-sidebar-width);
        transition: width 0.15s ease, min-width 0.15s ease;
        /* Stay in view while the page scrolls, but if the nav links themselves
           are taller than the viewport, scroll them internally instead of
           cutting them off. !important because Bootstrap's own
           .offcanvas-lg / .offcanvas-start selectors may be more specific
           than this single class, so a plain declaration here can lose to
           their `position: fixed` / `left: 0` even though ours loads later. */
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        height: 100vh;
        overflow-y: auto;
        /* Sticky positioning makes this a stacking context, so its z-index:auto
           descendants (including the flyout submenu) only ever compete against
           other sidebar content — never against #content-wrapper, which paints
           after it in DOM order. An explicit z-index promotes the whole sidebar
           (and its flyout) above the main content. */
        z-index: 1040;
    }

    .sb-sidebar.toggled {
        width: var(--sb-sidebar-collapsed-width);
        min-width: var(--sb-sidebar-collapsed-width);
    }

    .sb-sidebar.toggled .sb-nav-link span,
    .sb-sidebar.toggled .sidebar-heading,
    .sb-sidebar.toggled .sb-brand-text {
        display: none;
    }

    .sb-sidebar.toggled .sb-nav-link {
        text-align: center;
        padding: 0.75rem 0.5rem;
    }

    /* Flyout submenu: when the sidebar is collapsed to icon-only, sub-links
       can't render inline (no room for labels), so show them as a popup to
       the right of the parent icon instead, on hover of the parent icon or
       the flyout itself.

       The flyout is positioned with `position: fixed` (top/left set by JS
       from the parent's bounding rect) rather than `absolute`, because
       .sb-sidebar scrolls vertically (overflow-y: auto) — per spec that
       forces overflow-x to clip too, which would cut off an
       absolutely-positioned flyout extending past the sidebar's right
       edge. Fixed positioning escapes that clipping since it's relative to
       the viewport, not the scrolling ancestor. */
    .sb-sidebar.toggled .sb-nav-item {
        position: relative;
    }

    .sb-sidebar.toggled .sb-nav-item > .collapse,
    .sb-sidebar.toggled .sb-nav-item > .collapsing {
        display: none;
    }

    .sb-sidebar.toggled .sb-nav-item > .collapse.flyout-open {
        display: block !important;
        position: fixed;
        min-width: 12rem;
        background-color: var(--sb-primary-dark);
        border-radius: 0 0.35rem 0.35rem 0.35rem;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.3);
        padding: 0.5rem 0;
        z-index: 1050;
    }

    .sb-sidebar.toggled .sb-nav-item > .collapse.flyout-open .sb-nav-link {
        padding: 0.5rem 1rem;
        text-align: left;
    }

    .sb-sidebar.toggled .sb-nav-item > .collapse.flyout-open .sb-nav-link span {
        display: inline !important;
    }
}

.sb-sidebar .btn-close {
    /* Sits next to the brand, on the dark sidebar gradient - give it a
       little breathing room; btn-close-white handles the colour. */
    flex-shrink: 0;
}

.sb-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.375rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    color: #fff;
    text-decoration: none;
    padding: 1.5rem 1rem;
    text-align: center;
}

.sb-sidebar .sidebar-brand img {
    height: 3.6rem;
    width: auto;
    margin-right: 0.5rem;
}

.sb-sidebar hr.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0 1rem 1rem;
}

.sb-sidebar .sidebar-heading {
    text-align: center;
    padding: 0 1rem;
    font-weight: 800;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.13rem;
    margin-bottom: 0.5rem;
}

.sb-nav-item {
    position: relative;
}

.sb-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.sb-nav-link i {
    font-size: 0.9rem;
    width: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.sb-nav-link:hover,
.sb-nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.sb-nav-link:hover i,
.sb-nav-link.active i {
    color: #fff;
}

.sb-nav-link[aria-expanded="true"] .sb-chevron {
    transform: rotate(90deg);
}

.sb-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.sb-sidebar .collapse .sb-nav-link,
.sb-sidebar .collapsing .sb-nav-link {
    padding-left: 2.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---------- DataTables ---------- */
/* Move the sort arrow to sit right next to the column title, instead of
   DataTables' default of pinning it to the far right edge of the header. */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
    padding-right: 1rem !important;
}

table.dataTable thead > tr > th .dt-column-title {
    display: inline-block;
    vertical-align: middle;
}

table.dataTable thead > tr > th span.dt-column-order {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: inline-block !important;
    width: 10px;
    height: 1em;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ---------- Topbar ---------- */
.sb-topbar {
    height: 4.375rem;
    background-color: #fff;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sb-topbar .btn-toggle-sidebar {
    color: var(--sb-secondary);
    border: none;
    background: transparent;
    font-size: 1.1rem;
}

.sb-topbar .topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: calc(4.375rem - 2rem);
    margin: auto 1rem;
}

.sb-topbar .nav-link .badge {
    position: absolute;
    top: 0.4rem;
    right: 0.1rem;
    font-size: 0.6rem;
}

/* ---------- Cards ---------- */
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.border-left-primary { border-left: 0.25rem solid var(--sb-primary) !important; }
.border-left-success { border-left: 0.25rem solid var(--sb-success) !important; }
.border-left-info { border-left: 0.25rem solid var(--sb-info) !important; }
.border-left-warning { border-left: 0.25rem solid var(--sb-warning) !important; }
.border-left-danger { border-left: 0.25rem solid var(--sb-danger) !important; }

.card-header {
    background-color: var(--sb-light);
    font-weight: 700;
    color: var(--sb-primary-dark);
}

/* ---------- Footer ---------- */
.sb-footer {
    background-color: #fff;
    border-top: 1px solid #e3e6f0;
    padding: 1.5rem 0;
    flex-shrink: 0;
}

/* ---------- Scroll to top ---------- */
.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    color: #fff;
    background: rgba(90, 92, 105, 0.5);
    line-height: 46px;
    border-radius: 0.35rem;
}

.scroll-to-top:hover {
    background: var(--sb-dark);
    color: #fff;
}

.scroll-to-top.show {
    display: inline-block;
}

/* ---------- Icon-only buttons in input groups on small/medium screens ----------
   Buttons with a Bootstrap Icon inside an .input-group collapse their
   text label on narrow viewports, leaving just the icon - these are
   mostly grouped action toolbars (Edit/Delete/etc.) where the labels
   were the main cause of overflow. Icon-less buttons (e.g. "Cancel")
   and icon buttons outside an input group are untouched. */
@media (max-width: 991.98px) {
    .input-group .btn:has(i.bi) {
        font-size: 0;
    }

    .input-group .btn:has(i.bi) i.bi {
        font-size: 1rem;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ---------- Input groups never line-break ----------
   Bootstrap's .input-group defaults to flex-wrap: wrap (so validation
   feedback can sit below it), which also lets its own children - button
   toolbars as much as text inputs - wrap onto a second line and lose
   their joined-up look whenever a row gets tight. Force them onto one
   line always, with horizontal scroll as the fallback instead of a
   line break on the rare group too wide for its container. */
.input-group {
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* ---------- Responsive, scrollable page-content cards ----------
   Tables get Bootstrap's own .table-responsive wrapper where they need
   it; this is the general fallback for any other page-content card body
   whose content (a wide row of inline elements, a long unbroken value,
   etc.) doesn't fit a narrow viewport - scroll horizontally within the
   card rather than breaking the page's own layout. Only takes effect
   when content actually overflows, so it's a no-op everywhere else. */
.card-body {
    overflow-x: auto;
}