/* ════════════════════════════════════════════════════════════════
   ADMIN PANEL THEME
   Reskins the Admin panel (navbar + sidebar) to the same black/orange
   theme as the public site, while keeping the main content area on a
   light background for standard admin readability - tables, forms,
   and DataTables stay on their normal light surface; only the chrome
   (navbar, sidebar, buttons, headings) picks up the saffron theme.

   Shares its color variables with assets/css/theme.css (the public
   site's theme) - loaded alongside it here so there is still one
   place to change the palette. Loaded after bootstrap.min.css.
   ════════════════════════════════════════════════════════════════ */

/*
 * theme.css sets body{background:var(--earth); color:rgba(255,255,255,.85)}
 * for the dark public site. Reset both back to normal light-admin
 * defaults here (loaded after theme.css) - otherwise admin text would
 * inherit near-white and become unreadable against the light content
 * area below, exactly like the form-control contrast bug on the
 * public site's forms.
 */
body {
    font-family: var(--ff-body);
    background: var(--cream);
    color: #212529;
    /* theme.css sets overflow-x:hidden to hide the dark public site's
       decorative off-canvas hero elements. On admin that becomes a bug:
       when a wide DataTable can't be fully contained (see .admin-content
       below), this hides the browser's own fallback horizontal
       scrollbar too, making the cut-off Action column unreachable. */
    overflow-x: visible;
}

/* Same reasoning as above, for .text-muted/.form-text/etc: theme.css
   lightens --bs-secondary-color for the dark public site, which would
   be near-invisible on admin's light background otherwise. */
:root {
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
}

/* Bootstrap bakes each component's colors into local custom
   properties rather than referencing --bs-primary directly, so
   .btn-primary needs its own override to pick up the theme. */
.btn-primary {
    --bs-btn-bg: var(--saffron);
    --bs-btn-border-color: var(--saffron-deep);
    --bs-btn-hover-bg: var(--saffron-deep);
    --bs-btn-hover-border-color: var(--saffron-deep);
    --bs-btn-active-bg: var(--saffron-deep);
    --bs-btn-active-border-color: var(--saffron-deep);
    --bs-btn-disabled-bg: var(--saffron);
    --bs-btn-disabled-border-color: var(--saffron);
}

.btn-outline-primary {
    --bs-btn-color: var(--saffron);
    --bs-btn-border-color: var(--saffron);
    --bs-btn-hover-bg: var(--saffron);
    --bs-btn-hover-border-color: var(--saffron);
    --bs-btn-active-bg: var(--saffron-deep);
    --bs-btn-active-border-color: var(--saffron-deep);
}

a {
    color: var(--saffron-deep);
}

a:hover {
    color: var(--saffron);
}

/* DataTables pagination (used on the Members/VVIP/VIP/Organizations
   listings): --bs-pagination-color/-hover-color already pick up the
   saffron theme via --bs-link-color, but .pagination itself locally
   redeclares --bs-pagination-active-bg/-border-color to Bootstrap's
   default blue, which shadows a :root-level override - same "each
   component bakes its own copy" pattern as .btn-primary, just one
   level deeper (the variable, not the color, is what's local here). */
.pagination {
    --bs-pagination-active-bg: var(--saffron);
    --bs-pagination-active-border-color: var(--saffron-deep);
}

/* jquery.dataTables.min.css's plain (non-Bootstrap) .paginate_button
   rule - padding, margin-left, border-radius - isn't overridden by
   dataTables.bootstrap5.min.css and bleeds through onto the same
   <a class="page-link paginate_button">, spacing the pagination
   buttons apart instead of the connected Bootstrap pill look.
   Neutralize it here (once, for every admin DataTable listing) so
   Bootstrap's own .page-item/.page-link styling is what renders. */
div.dataTables_wrapper div.dataTables_paginate .paginate_button,
div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover,
div.dataTables_wrapper div.dataTables_paginate .paginate_button:active,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ── Top navbar ── */
.admin-navbar {
    background: var(--earth);
    border-bottom: 1px solid rgba(255, 107, 0, 0.25);
    padding: 0.75rem 1.5rem;
}

.admin-navbar .navbar-brand {
    font-family: var(--ff-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-navbar .navbar-brand::before {
    content: '';
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--saffron-glow), var(--saffron-deep));
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3);
    flex-shrink: 0;
}

.admin-navbar .btn-outline-light {
    --bs-btn-color: var(--saffron-glow);
    --bs-btn-border-color: rgba(255, 107, 0, 0.5);
    --bs-btn-hover-bg: var(--saffron);
    --bs-btn-hover-border-color: var(--saffron);
    --bs-btn-hover-color: #fff;
}

/* Kebab (3-dot) account menu toggle in the navbar - the vertical
   ellipsis character renders quite small/cramped at the default line
   height, so give it a bit more size and horizontal padding to read
   clearly as a tappable menu button. */
.user-menu-dots {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 0.25rem;
}

/* ── Sidebar ──
 * Bootstrap's .offcanvas-lg: below lg it's a slide-in panel (triggered
 * by the navbar-toggler button in admin_header.php/org_header.php);
 * at lg and up Bootstrap itself strips position/visibility/transform
 * so it renders as a normal in-flow element again - only its own
 * background-color gets forced to transparent!important at that
 * breakpoint, and the offcanvas-header is auto-hidden. The width/bg/
 * min-height re-asserted below is what makes it look identical to the
 * old fixed 220px column on desktop. */
.admin-sidebar {
    --bs-offcanvas-width: 260px;
    --bs-offcanvas-bg: var(--earth);
    --bs-offcanvas-color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 107, 0, 0.15) !important;
}

.admin-sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 107, 0, 0.15);
}

.admin-sidebar .offcanvas-title {
    color: #fff;
    font-family: var(--ff-display);
    font-size: 1.1rem;
}

@media (min-width: 992px) {
    .admin-sidebar.offcanvas-lg {
        background: var(--earth) !important;
        width: 220px;
        flex-shrink: 0;
        min-height: calc(100vh - 65px);
    }
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.admin-sidebar .nav-link:hover {
    color: var(--saffron-glow);
    background: rgba(255, 107, 0, 0.08);
}

.admin-sidebar .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--saffron-deep) 0%, var(--saffron) 100%);
}

/* ── Main content area: light surface for standard admin readability ── */
.admin-content {
    background: var(--cream);
    min-height: calc(100vh - 65px);
    /* Flex items default to min-width:auto, meaning this pane refuses
       to shrink below its widest content (a wide DataTable) and just
       grows the whole page instead. That stops each listing's own
       .table-responsive wrapper from ever needing to scroll internally
       - the table simply never gets clipped enough to trigger it. This
       lets the pane shrink to its allotted flex space instead, so wide
       tables scroll within their own bordered box like they're meant
       to, and the sidebar/navbar stay put. */
    min-width: 0;
}

/* DataTables' "Show N entries" length menu renders as a real <select>,
   but Bootstrap's .form-select-sm sizes it to content by default -
   comfortably wide enough that 10/25/50/100 don't feel cramped. */
.dataTables_wrapper .dataTables_length select {
    min-width: 70px;
}

/* Every admin DataTable listing wraps its table in .table-responsive
   for a horizontal scrollbar on narrow screens - make that visually
   obvious rather than a bare, easy-to-miss scroll edge. */
.table-responsive {
    scrollbar-width: thin;
}