/* ============================================================================
   bsOffcanvas — Enhancement Layer
   ----------------------------------------------------------------------------
   Optional polish on top of the styles injected at runtime by bsoffcanvas.js.
   The plugin already ships its own complete CSS (light + .dark-style) and does
   NOT depend on this file. This file only ADDS refinement; it never replaces
   the plugin's base rules.

   Design rules followed here:
   - Every selector is scoped to .bsoffcanvas / .bsoffcanvas-backdrop so nothing
     leaks into the rest of the app and nothing external is required.
   - The plugin injects its <style> into <head> at runtime, AFTER this static
     <link>. To make sure these enhancements win where they overlap the base
     (e.g. shadows), the overlapping rules use a slightly higher specificity
     (.bsoffcanvas.bsoffcanvas) — a harmless self-duplication that doubles the
     class specificity without changing the markup.
   - The core slide transform/timing in the plugin is intentionally left alone;
     we only refine complementary properties (shadow, radius, backdrop, content).
   ============================================================================ */

/* ── Theme tokens ─────────────────────────────────────────────────────────────
   Accent drives the title bar, focus ring and loading spinner. Override it from
   anywhere (e.g. set --bsoc-accent on :root or on a wrapper) to rebrand, or wire
   it to your app's primary colour. Defaults to indigo.                          */
:root {
    --bsoc-accent: #6366f1;
    --bsoc-accent-strong: #4f46e5;
    --bsoc-accent-ring: rgba(99, 102, 241, 0.25);
}

/* ── Panel: softer, layered shadow + rounded inner edge ───────────────────── */
.bsoffcanvas.bsoffcanvas {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        -2px 0 8px rgba(0, 0, 0, 0.06),
        -12px 0 40px rgba(16, 24, 40, 0.16);
}

/* Square corners (no rounding) — just refined directional shadows. */
.bsoffcanvas.offcanvas-end.offcanvas-end {
    border-radius: 0;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        -12px 0 40px rgba(16, 24, 40, 0.16);
}

.bsoffcanvas.offcanvas-start.offcanvas-start {
    border-radius: 0;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        12px 0 40px rgba(16, 24, 40, 0.16);
}

.bsoffcanvas.offcanvas-top.offcanvas-top {
    border-radius: 0;
    box-shadow: 0 14px 40px rgba(16, 24, 40, 0.16);
}

.bsoffcanvas.offcanvas-bottom.offcanvas-bottom {
    border-radius: 0;
    box-shadow: 0 -14px 40px rgba(16, 24, 40, 0.16);
}

/* ── Reveal motion: grow from the anchored edge ───────────────────────────────
   The plugin slides the whole panel in from off-screen (transform: translateX).
   Here we replace that with a clip-path "wipe" that grows from the anchored edge
   up to full size — the panel appears pinned at its edge and unfolds, then
   collapses back into that edge on close. Content stays crisp (no squish).

   How this overrides the plugin without touching its JS styles:
   - The plugin's runtime <style> sets `transform: translateX(100%)` (base) and
     `transform: none !important` (.show). We force `transform: none !important`
     in BOTH states so the panel sits in its final position and clip-path alone
     drives the reveal. visibility:hidden + pointer-events:none (from the plugin)
     still keep it inert while collapsed.
   - The plugin's `_awaitTransition` watches transform/visibility/opacity; the
     visibility transition still fires, and its safety timeout covers the rest,
     so open/close callbacks resolve normally.
   - Selectors use .bsoffcanvas.bsoffcanvas (doubled) to outrank the plugin's
     later-injected rules; transform uses !important to beat `.show`.
   ============================================================================ */

/* Collapsed (hidden) — clipped to a thin sliver at the anchored edge.
   Close duration (0.42s) matches the open so it doesn't feel abrupt; the
   cubic-bezier(0.5, 0, 0.4, 1) eases out gently at the end of the collapse. */
.bsoffcanvas.bsoffcanvas {
    transform: none !important;
    transition:
        clip-path 0.42s cubic-bezier(0.5, 0, 0.4, 1),
        -webkit-clip-path 0.42s cubic-bezier(0.5, 0, 0.4, 1),
        visibility 0s linear 0.42s;
}

.bsoffcanvas.bsoffcanvas.show {
    transform: none !important;
    transition:
        clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

/* end (right): collapse toward the right edge, grow leftward. */
.bsoffcanvas.bsoffcanvas.offcanvas-end {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
}
/* start (left): collapse toward the left edge, grow rightward. */
.bsoffcanvas.bsoffcanvas.offcanvas-start {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
/* top: collapse toward the top edge, grow downward. */
.bsoffcanvas.bsoffcanvas.offcanvas-top {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
}
/* bottom: collapse toward the bottom edge, grow upward. */
.bsoffcanvas.bsoffcanvas.offcanvas-bottom {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
}

/* Shown — fully revealed (all placements). */
.bsoffcanvas.bsoffcanvas.show {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

/* Fullscreen should never be clipped. */
.bsoffcanvas.bsoffcanvas.offcanvas-fullscreen,
.bsoffcanvas.bsoffcanvas.offcanvas-fullscreen.show {
    -webkit-clip-path: none !important;
    clip-path: none !important;
}

/* ── Header: compact + beautiful ──────────────────────────────────────────────
   Slim (44px) header with a soft top-down tint, a hairline divider, an accent
   bar beside the title, and refined pill action buttons with a clean focus ring
   (replacing the plugin's bare icons + harsh browser outline).                  */
.bsoffcanvas.bsoffcanvas .bsoffcanvas-header {
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    min-height: 46px;
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: none;
    gap: 0.5rem;
}

/* Title with a small rounded accent bar to its left. */
.bsoffcanvas.bsoffcanvas .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #101828;
}
.bsoffcanvas .offcanvas-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bsoc-accent) 0%, var(--bsoc-accent-strong) 100%);
}

/* Header action buttons — soft pill default, nicer hover, springy press.
   Doubled .bsoffcanvas outranks the plugin's later-injected same-specificity
   button rules (transparent bg, outline focus, etc.). */
.bsoffcanvas.bsoffcanvas .bsoffcanvas-close,
.bsoffcanvas.bsoffcanvas .offcanvas-fullscreen-toggle {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: rgba(16, 24, 40, 0.04);
    border-color: transparent;
    color: #475467;
    opacity: 1;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bsoffcanvas.bsoffcanvas .bsoffcanvas-close:hover,
.bsoffcanvas.bsoffcanvas .offcanvas-fullscreen-toggle:hover {
    background-color: rgba(16, 24, 40, 0.08);
    color: #101828;
    transform: scale(1.06);
}

/* Recolor the close × SVG (plugin bakes it black) to match the muted icon tone,
   then to red on hover. Doubled .bsoffcanvas outranks the plugin's later-injected
   same-specificity rule so this recolor actually applies. */
.bsoffcanvas.bsoffcanvas .bsoffcanvas-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475467'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
}

/* Close button leans red on hover for a clear affordance. */
.bsoffcanvas.bsoffcanvas .bsoffcanvas-close:hover {
    background-color: rgba(239, 68, 68, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
}

.bsoffcanvas.bsoffcanvas .bsoffcanvas-close:active,
.bsoffcanvas.bsoffcanvas .offcanvas-fullscreen-toggle:active {
    transform: scale(0.92);
    background-color: rgba(16, 24, 40, 0.12);
}

/* Clean soft focus ring instead of the browser/plugin square outline. */
.bsoffcanvas.bsoffcanvas .bsoffcanvas-close:focus,
.bsoffcanvas.bsoffcanvas .bsoffcanvas-close:focus-visible,
.bsoffcanvas.bsoffcanvas .offcanvas-fullscreen-toggle:focus,
.bsoffcanvas.bsoffcanvas .offcanvas-fullscreen-toggle:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--bsoc-accent-ring);
}

/* ── Backdrop: soft blur + smoother fade ──────────────────────────────────── */
.bsoffcanvas-backdrop {
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-backdrop-filter 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.bsoffcanvas-backdrop.show {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* ── Backdrop variant: light / subtle dim ─────────────────────────────────────
   Opt-in. Keeps the page behind bright and readable — just a faint wash plus a
   soft blur, like a side-panel "Add user" drawer rather than a modal dim.

   Enable per-offcanvas via the plugin option (no JS-style edits needed):
       $(el).bsOffcanvas({ backdropClass: 'bsoc-backdrop-light', ... });

   The .bsoffcanvas-backdrop.bsoffcanvas-backdrop self-duplication raises
   specificity above the plugin's runtime-injected base so this wins.            */
.bsoffcanvas-backdrop.bsoffcanvas-backdrop.bsoc-backdrop-light {
    background-color: rgba(17, 24, 39, 0.04);
}

.bsoffcanvas-backdrop.bsoc-backdrop-light.show {
    -webkit-backdrop-filter: blur(2px) saturate(105%);
    backdrop-filter: blur(2px) saturate(105%);
}

/* ── Content stagger on open ──────────────────────────────────────────────────
   The plugin fades the body in via .bsoc-content-in. We layer a gentle rise so
   the content settles a beat after the panel lands — a premium, non-janky feel.
   Only the immediate children animate, so deep/AJAX markup isn't disturbed.       */
.bsoffcanvas .bsoffcanvas-body.bsoc-content-in {
    animation: bsoc-content-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bsoffcanvas .bsoffcanvas-body.bsoc-content-in > * {
    animation: bsoc-enh-rise 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger the first few top-level blocks; later ones share the last delay. */
.bsoffcanvas .bsoffcanvas-body.bsoc-content-in > *:nth-child(1) { animation-delay: 0.06s; }
.bsoffcanvas .bsoffcanvas-body.bsoc-content-in > *:nth-child(2) { animation-delay: 0.10s; }
.bsoffcanvas .bsoffcanvas-body.bsoc-content-in > *:nth-child(3) { animation-delay: 0.14s; }
.bsoffcanvas .bsoffcanvas-body.bsoc-content-in > *:nth-child(4) { animation-delay: 0.18s; }
.bsoffcanvas .bsoffcanvas-body.bsoc-content-in > *:nth-child(n+5) { animation-delay: 0.22s; }

@keyframes bsoc-enh-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Body scrollbar: slimmer, rounded, fades when idle ────────────────────────
   The plugin draws a 5px rgba(0,0,0,.2) thumb. We slim it to 6px with inset
   rounding, hide it at rest, and reveal it on hover/scroll for a calmer look.
   Doubled .bsoffcanvas outranks the plugin's later-injected scrollbar rules.    */
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.25s ease;
}
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body:hover,
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body:focus-within {
    scrollbar-color: rgba(16, 24, 40, 0.22) transparent;
}

.bsoffcanvas.bsoffcanvas .bsoffcanvas-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body::-webkit-scrollbar-track {
    background: transparent;
}
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.25s ease;
}
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body:hover::-webkit-scrollbar-thumb,
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(16, 24, 40, 0.22);
}
.bsoffcanvas.bsoffcanvas .bsoffcanvas-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(16, 24, 40, 0.35);
}

/* ── Loading spinner: thinner, accent-coloured, with a soft track ─────────────
   Plugin spinner is a 3px #0d6efd ring. Re-tint to the accent and add a faint
   full-ring track so it reads as a clean progress indicator.                    */
.bsoffcanvas.bsoffcanvas .bsoc-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 2.5px solid rgba(16, 24, 40, 0.10);
    border-top-color: var(--bsoc-accent);
    border-right-color: var(--bsoc-accent);
}
.bsoffcanvas.bsoffcanvas .bsoc-spinner-wrap {
    padding: 2.5rem 2rem;
}

/* ── Dark theme touch-ups ─────────────────────────────────────────────────── */
.dark-style .bsoffcanvas.bsoffcanvas,
.dark-style.bsoffcanvas.bsoffcanvas {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        -12px 0 44px rgba(0, 0, 0, 0.55);
}

.dark-style .bsoffcanvas .bsoffcanvas-header {
    box-shadow: none;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-style .bsoffcanvas-backdrop.show {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Light backdrop variant in dark theme: a touch more wash so the panel still
   reads as foreground. (Reduced-motion already strips the blur globally below.) */
.dark-style .bsoffcanvas-backdrop.bsoffcanvas-backdrop.bsoc-backdrop-light {
    background-color: rgba(0, 0, 0, 0.18);
}

/* Scrollbar + spinner in dark theme. */
.dark-style .bsoffcanvas.bsoffcanvas .bsoffcanvas-body:hover,
.dark-style .bsoffcanvas.bsoffcanvas .bsoffcanvas-body:focus-within {
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.dark-style .bsoffcanvas.bsoffcanvas .bsoffcanvas-body:hover::-webkit-scrollbar-thumb,
.dark-style .bsoffcanvas.bsoffcanvas .bsoffcanvas-body:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
}
.dark-style .bsoffcanvas.bsoffcanvas .bsoffcanvas-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.35);
}
.dark-style .bsoffcanvas.bsoffcanvas .bsoc-spinner {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: var(--bsoc-accent);
    border-right-color: var(--bsoc-accent);
}

/* ── Respect reduced-motion: drop the extra motion, keep the looks ────────── */
@media (prefers-reduced-motion: reduce) {
    /* No clip-path wipe — snap the panel open/closed instantly. */
    .bsoffcanvas.bsoffcanvas {
        transition: visibility 0s linear 0s !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }

    .bsoffcanvas .bsoffcanvas-body.bsoc-content-in,
    .bsoffcanvas .bsoffcanvas-body.bsoc-content-in > * {
        animation: none !important;
    }

    .bsoffcanvas .bsoffcanvas-close,
    .bsoffcanvas .offcanvas-fullscreen-toggle {
        transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }

    .bsoffcanvas .bsoffcanvas-close:hover,
    .bsoffcanvas .offcanvas-fullscreen-toggle:hover,
    .bsoffcanvas .bsoffcanvas-close:active,
    .bsoffcanvas .offcanvas-fullscreen-toggle:active {
        transform: none;
    }

    .bsoffcanvas-backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transition: opacity 0.2s linear;
    }
}
