/* ═══════════════════════════════════════════════════════════════════
   NUMERO6 THEME  –  Theme.css  v3
   Fixes in v3:
     1. Hamburger icon now visible (explicit color + SVG display fix)
     2. Mobile drawer properly opens (JS class-toggle debugged)
     3. Oqtane offcanvas/ControlPanel full-height, not truncated
     4. Admin dashboard: text legible (white on dark, not grey on grey)
     5. New n6-module--no-border container style
   ═══════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
     0.  Google Fonts
     1.  CSS custom properties (design tokens)
     2.  Reset / base
     3.  Navbar & brand
     4.  Desktop nav (Menu component)
     5.  Hamburger button  ← v3 fix
     6.  Mobile drawer & backdrop  ← v3 fix
     7.  Page wrapper & pane sections
     8.  Module containers  ← n6-module--no-border added
     9.  Footer
    10.  Utility classes & reveal animation
    11.  Bootstrap overrides
    12.  Oqtane admin/offcanvas overrides  ← v3 fix (height + legibility)
    13.  Scrollbar
    14.  Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   0. GOOGLE FONTS
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Brand colours */
    --n6-accent:        #DC143C;
    --n6-accent-hover:  #c01237;
    --n6-accent-dim:    rgba(220,20,60,0.10);
    --n6-accent-glow:   rgba(220,20,60,0.22);

    /* Surfaces */
    --n6-bg:        #0e0e13;
    --n6-surface:   #14141a;
    --n6-surface-2: #1a1a22;
    --n6-surface-3: #22222d;
    --n6-divider:   rgba(255,255,255,0.07);
    --n6-border:    rgba(255,255,255,0.10);

    /* Text */
    --n6-text:       #e8e8f0;
    --n6-text-muted: #9090a8;
    --n6-text-faint: #55556a;

    /* Fonts */
    --n6-font-display: 'Syne',  'Helvetica Neue', sans-serif;
    --n6-font-body:    'Inter', 'Helvetica Neue', sans-serif;

    /* Type scale */
    --n6-text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
    --n6-text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
    --n6-text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
    --n6-text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
    --n6-text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
    --n6-text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

    /* Spacing (4px grid) */
    --n6-sp-1:  0.25rem;
    --n6-sp-2:  0.5rem;
    --n6-sp-3:  0.75rem;
    --n6-sp-4:  1rem;
    --n6-sp-5:  1.25rem;
    --n6-sp-6:  1.5rem;
    --n6-sp-8:  2rem;
    --n6-sp-10: 2.5rem;
    --n6-sp-12: 3rem;
    --n6-sp-16: 4rem;

    /* Radius */
    --n6-r-sm:   0.375rem;
    --n6-r-md:   0.5rem;
    --n6-r-lg:   0.75rem;
    --n6-r-xl:   1rem;
    --n6-r-full: 9999px;

    /* Motion */
    --n6-ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --n6-t:      150ms ease;
    --n6-t-m:    240ms ease;

    /* Layout */
    --n6-navbar-h: 110px;
    --n6-content-w: 1200px;
}

/* ═══════════════════════════════════════════════════════════
   2. RESET / BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--n6-navbar-h);
    transition: scroll-padding-top 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    hanging-punctuation: first last;
}

body {
    font-family: var(--n6-font-body);
    font-size: var(--n6-text-base);
    color: var(--n6-text);
    background-color: var(--n6-bg);
    /* pad below fixed navbar – using padding-top so offcanvas is not affected */
    padding-top: 110px !important;
    transition: padding-top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* NEVER set overflow:hidden on body – breaks offcanvas */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; }

h1,h2,h3,h4,h5,h6 { font-family: var(--n6-font-display); color: var(--n6-text); line-height: 1.15; text-wrap: balance; }
p, li { text-wrap: pretty; }

a { color: var(--n6-accent); text-decoration: none; transition: color var(--n6-t); }
a:hover { color: var(--n6-accent-hover); }

::selection { background: var(--n6-accent-dim); color: var(--n6-text); }
:focus-visible { outline: 2px solid var(--n6-accent); outline-offset: 3px; border-radius: var(--n6-r-sm); }

.n6-skip-link {
    position: absolute;
    top: -100%;
    left: var(--n6-sp-4);
    z-index: 9999;
    background: var(--n6-accent);
    color: #fff;
    padding: var(--n6-sp-2) var(--n6-sp-4);
    border-radius: var(--n6-r-sm);
    font-size: var(--n6-text-sm);
    font-weight: 600;
    transition: top 0.15s;
}
.n6-skip-link:focus { top: var(--n6-sp-4); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   3. NAVBAR & BRAND
   ═══════════════════════════════════════════════════════════ */
.n6-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    /* ── concrete px so CSS transition engine can interpolate ── */
    height: 110px;
    background: rgba(14,14,19,0.92);
    border-bottom: 1px solid var(--n6-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: visible;
    /* ALL animated properties in a SINGLE transition declaration */
    transition:
        height      0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background  0.3s ease,
        border-color 0.3s ease,
        box-shadow  0.3s ease;
}
.n6-navbar.is-scrolled {
    height: 62px;
    background: rgba(14,14,19,0.98);
    border-bottom-color: rgba(220,20,60,0.25);
    box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

.n6-navbar__inner {
    max-width: var(--n6-content-w);
    margin: 0 auto;
    padding: 0 var(--n6-sp-6);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--n6-sp-6);
    overflow: visible;
    /* Smoothly re-centres content as navbar height changes */
    transition: padding 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Brand: single logo image ──────────────────────────────────
   The logo (PNG/JPG with sci-fi "6" + "Numero6" wordmark) is
   displayed as ONE image tag. No splitting.

   Navbar states (toggled by JS adding .is-scrolled to nav):
     Load state:    navbar height 80px, logo height 70px
     Scrolled:      navbar height 58px, logo height 48px

   mix-blend-mode: screen  removes the white JPEG background
   on the dark navbar surface without altering the artwork.
   ─────────────────────────────────────────────────────────── */

/* Navbar height tokens */
:root {
    --n6-navbar-h:          110px;  /* tall on page load (fits 100px logo) */
    --n6-navbar-h-scrolled: 62px;   /* compact after scroll         */
    --n6-logo-h:            100px;  /* logo height – load state     */
    --n6-logo-h-scrolled:   48px;   /* logo height – scrolled state */
    --n6-brand-transition:  0.38s cubic-bezier(0.16,1,0.3,1);
}

/* navbar height/transition defined in section 3 above */

/* Brand anchor */
.n6-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    overflow: visible;
    line-height: 0;   /* remove inline gap */
}

/* Single logo image – height animates with navbar */
.n6-brand__logo {
    display: block;
    height: 100px;
    width:  auto;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: saturate(1.08) contrast(1.02);
    /* Smooth spring transition on height */
    transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.n6-navbar.is-scrolled .n6-brand__logo {
    height: 48px;
}

/* Mobile: slightly smaller but still tall enough to read */
@media (max-width: 480px) {
    :root {
        /* --n6-logo-h: 80px; */
        /* --n6-logo-h-scrolled: 38px; */
        /* --n6-navbar-h: 80px; */
        /* --n6-navbar-h-scrolled: 52px; */
    }
}

/* ═══════════════════════════════════════════════════════════
   4. DESKTOP NAV (Oqtane <Menu> component)
   ═══════════════════════════════════════════════════════════ */
.n6-nav-desktop {
    flex: 1;
    overflow: visible;
}
.n6-nav-desktop .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--n6-sp-1);
    list-style: none;
    margin: 0; padding: 0;
    flex-wrap: nowrap;
}
.n6-nav-desktop .navbar-nav .nav-item { position: relative; }
.n6-nav-desktop .navbar-nav .nav-item > .nav-link,
.n6-nav-desktop .navbar-nav .nav-item > a {
    display: block;
    padding: var(--n6-sp-2) var(--n6-sp-3);
    font-size: var(--n6-text-sm);
    font-weight: 500;
    color: var(--n6-text-muted);
    border-radius: var(--n6-r-sm);
    white-space: nowrap;
    transition: color var(--n6-t), background var(--n6-t);
    text-decoration: none;
}
.n6-nav-desktop .navbar-nav .nav-item > .nav-link:hover,
.n6-nav-desktop .navbar-nav .nav-item > a:hover {
    color: var(--n6-text);
    background: var(--n6-surface-2);
}
.n6-nav-desktop .navbar-nav .nav-item > .nav-link.active,
.n6-nav-desktop .navbar-nav .nav-item > a.active {
    color: var(--n6-accent);
}
/* Dropdown */
.n6-nav-desktop .dropdown-menu {
    background: var(--n6-surface-2);
    border: 1px solid var(--n6-border);
    border-radius: var(--n6-r-md);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    padding: var(--n6-sp-2);
    min-width: 180px;
}
.n6-nav-desktop .dropdown-item {
    color: var(--n6-text-muted);
    border-radius: var(--n6-r-sm);
    padding: var(--n6-sp-2) var(--n6-sp-3);
    font-size: var(--n6-text-sm);
}
.n6-nav-desktop .dropdown-item:hover {
    background: var(--n6-surface-3);
    color: var(--n6-text);
}

/* Right-hand controls */
.n6-navbar__controls {
    display: flex;
    align-items: center;
    gap: var(--n6-sp-2);
    flex-shrink: 0;
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════
   5. HAMBURGER BUTTON
   FIX v3: explicit color, display:flex guaranteed, SVG fix
   ═══════════════════════════════════════════════════════════ */
.n6-hamburger {
    /* Hidden on desktop; shown via media query at bottom */
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: var(--n6-surface-2);
    border: 1px solid var(--n6-border);
    border-radius: var(--n6-r-sm);
    cursor: pointer;
    /* Force visible colour – do NOT inherit from a parent that may be transparent */
    color: #e8e8f0;
    padding: 0;
    line-height: 1;
    /* No extra transition needed for the button box */
    transition: border-color var(--n6-t), background var(--n6-t);
    /* Touch – ensure nothing clips the icon */
    overflow: visible;
    position: relative;
    z-index: 1;
}
.n6-hamburger:hover,
.n6-hamburger:focus-visible {
    border-color: var(--n6-accent);
    background: var(--n6-accent-dim);
    color: #fff;
}

/* SVG icons inside hamburger */
.n6-hamburger__icon {
    /* display:block so the SVG is always sized */
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    pointer-events: none;
    /* Force the stroke to pick up currentColor from the button */
    color: inherit;
}
/* Default: show open, hide close */
.n6-hamburger__icon--close { display: none; }

/* When open: swap icons */
.n6-hamburger[aria-expanded="true"] .n6-hamburger__icon--open  { display: none; }
.n6-hamburger[aria-expanded="true"] .n6-hamburger__icon--close { display: block; }

/* ═══════════════════════════════════════════════════════════
   6. MOBILE DRAWER & BACKDROP
   FIX v3:
   - Drawer sits OUTSIDE navbar in DOM (no clipping)
   - Uses visibility/opacity toggle (JS adds .is-open)
   - Explicit top = navbar height, not inside the nav
   ═══════════════════════════════════════════════════════════ */
.n6-mobile-drawer {
    position: fixed;
    top: 110px;
    transition-property: top, visibility, opacity, transform;
    transition-duration: 0.42s, 0s, 0.24s, 0.24s;
    transition-timing-function: cubic-bezier(0.16,1,0.3,1), linear, ease, ease;
    left: 0;
    right: 0;
    /* Never extend past the viewport */
    max-height: calc(100dvh - var(--n6-navbar-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1029; /* below navbar (1030) but above page */

    background: rgba(14, 14, 19, 0.98);
    border-bottom: 1px solid var(--n6-border);
    padding: var(--n6-sp-5) var(--n6-sp-6);

    /* Hidden state */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        visibility 0s linear var(--n6-t-m),
        opacity    var(--n6-t-m) var(--n6-ease),
        transform  var(--n6-t-m) var(--n6-ease);
}
.n6-mobile-drawer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        visibility 0s linear 0s,
        opacity    var(--n6-t-m) var(--n6-ease),
        transform  var(--n6-t-m) var(--n6-ease);
}

.n6-mobile-drawer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--n6-sp-4);
}

/* Nav links inside drawer */
.n6-mobile-drawer .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0; padding: 0;
}
.n6-mobile-drawer .navbar-nav .nav-item { width: 100%; }
/* html prefix beats Bootstrap specificity on .nav-link */
html .n6-mobile-drawer .navbar-nav .nav-item > .nav-link,
html .n6-mobile-drawer .navbar-nav .nav-item > a,
html .n6-mobile-drawer a {
    display: block;
    width: 100%;
    padding: var(--n6-sp-3) var(--n6-sp-4) !important;
    font-size: var(--n6-text-base) !important;
    font-weight: 500 !important;
    color: var(--n6-text) !important;
    border-radius: var(--n6-r-sm);
    text-decoration: none !important;
    transition: color var(--n6-t), background var(--n6-t);
    background: transparent;
}
html .n6-mobile-drawer .navbar-nav .nav-item > .nav-link:hover,
html .n6-mobile-drawer .navbar-nav .nav-item > a:hover {
    color: #fff !important;
    background: var(--n6-surface-2) !important;
}
html .n6-mobile-drawer .navbar-nav .nav-item > .nav-link.active,
html .n6-mobile-drawer .navbar-nav .nav-item > a.active {
    color: var(--n6-accent) !important;
}

/* Sub-menus: static in drawer */
.n6-mobile-drawer .dropdown-menu {
    position: static !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0 var(--n6-sp-6) !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.n6-mobile-drawer .dropdown-item {
    color: var(--n6-text-faint) !important;
    font-size: var(--n6-text-sm);
    padding: var(--n6-sp-2) var(--n6-sp-3) !important;
}
.n6-mobile-drawer .dropdown-item:hover {
    color: var(--n6-text-muted) !important;
    background: transparent !important;
}

/* Login/user controls inside drawer */
.n6-mobile-drawer__controls {
    display: flex;
    align-items: center;
    gap: var(--n6-sp-3);
    padding-top: var(--n6-sp-4);
    border-top: 1px solid var(--n6-divider);
}

/* Backdrop */
.n6-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1028;
    background: rgba(0,0,0,0.65);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s linear var(--n6-t-m), opacity var(--n6-t-m);
}
.n6-mobile-backdrop.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: visibility 0s linear 0s, opacity var(--n6-t-m);
}

/* ═══════════════════════════════════════════════════════════
   7. PAGE WRAPPER & PANE SECTIONS
   ═══════════════════════════════════════════════════════════ */
.n6-page {
    flex: 1 1 auto;      /* grows to fill remaining viewport height */
    min-height: 0;       /* allow flex to shrink below content size */
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
}
.n6-admin-pane { padding: 0; }

.n6-pane-section--full { width: 100%; }

/* .n6-content: no padding by default — padding is added only when
   at least one .n6-row contains a non-empty pane module.
   This prevents phantom whitespace when only Top/Bottom Full Width
   panes are used and the inner container rows are all empty.       */
.n6-content {
    padding-top:    0;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}

/* Row spacing: hidden when the row's columns are all empty panes */


/* Apply padding to the container only if it has content.
   :has() is supported in all modern browsers (Chrome 105+, FF 121+, Safari 15.4+).
   An Oqtane empty Pane renders as a <div> with no child elements → :empty.
   A populated Pane has child elements → :not(:empty).
   We check for any .n6-row that contains at least one non-empty column child. */
.n6-content:has(.n6-row > [class*="col"]:not(:empty)) {
    padding-top:    clamp(var(--n6-sp-8), 4vw, var(--n6-sp-16));
    padding-bottom: clamp(var(--n6-sp-8), 4vw, var(--n6-sp-16));
}

/* Individual row: margin-bottom only when the row has at least one
   non-empty column child. Prevents stacked empty rows from adding gaps. */
.n6-row {
    margin-bottom: 0;
}
.n6-row:has(> [class*="col"]:not(:empty)) {
    margin-bottom: var(--n6-sp-6);
}
/* Remove bottom margin from the last visible row */
.n6-row:has(> [class*="col"]:not(:empty)):last-of-type {
    margin-bottom: 0;
}


.n6-row:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   8. MODULE CONTAINERS
   8a. Sci-fi bordered container (Container1 / default)
   8b. No-border clean container (Container2 / NoBorder)
   ═══════════════════════════════════════════════════════════ */

/* ── 8a. Sci-Fi container ── */
.n6-module {
    position: relative;
    background: var(--n6-surface);
    border: 1px solid var(--n6-border);
    border-radius: var(--n6-r-lg);
    padding: var(--n6-sp-6);
    margin-bottom: var(--n6-sp-6);
    overflow: hidden;
    transition: border-color var(--n6-t-m), box-shadow var(--n6-t-m);
}
.n6-module:hover {
    border-color: rgba(220,20,60,0.35);
    box-shadow: 0 0 24px rgba(220,20,60,0.06);
}

/* Corner brackets */
.n6-module__corner {
    position: absolute;
    width: 14px;
    height: 14px;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--n6-t-m);
}
.n6-module:hover .n6-module__corner { opacity: 1; }
.n6-module__corner--tl { top: 6px; left: 6px; border-top: 2px solid var(--n6-accent); border-left: 2px solid var(--n6-accent); }
.n6-module__corner--tr { top: 6px; right: 6px; border-top: 2px solid var(--n6-accent); border-right: 2px solid var(--n6-accent); }
.n6-module__corner--bl { bottom: 6px; left: 6px; border-bottom: 2px solid var(--n6-accent); border-left: 2px solid var(--n6-accent); }
.n6-module__corner--br { bottom: 6px; right: 6px; border-bottom: 2px solid var(--n6-accent); border-right: 2px solid var(--n6-accent); }

/* Header */
.n6-module__header { margin-bottom: var(--n6-sp-4); }
.n6-module__title-row {
    display: flex;
    align-items: center;
    gap: var(--n6-sp-3);
    margin-bottom: var(--n6-sp-3);
}
.n6-module__title {
    font-size: var(--n6-text-lg);
    font-weight: 700;
    color: var(--n6-text);
    display: flex;
    align-items: center;
    gap: var(--n6-sp-2);
    margin: 0;
}
.n6-module__title-accent {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: var(--n6-accent);
    opacity: 0.7;
    user-select: none;
}

/* Rule under title */
.n6-module__rule-wrap {
    display: flex;
    align-items: center;
    gap: var(--n6-sp-2);
    height: 1px;
}
.n6-module__rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--n6-accent) 0%, transparent 100%);
    opacity: 0.4;
}
.n6-module__rule-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--n6-accent);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Body */
.n6-module__body { color: var(--n6-text); }
.n6-module--no-title .n6-module__body { padding-top: 0; }

/* Scan-line overlay */
.n6-module__scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 3px,
        rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px
    );
    pointer-events: none;
    border-radius: inherit;
}

/* ── 8b. No-border container ── */
.n6-module--no-border {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--n6-sp-4) 0;
    box-shadow: none;
    overflow: visible;
}
.n6-module--no-border:hover {
    border-color: transparent;
    box-shadow: none;
}
.n6-module--no-border .n6-module__corner,
.n6-module--no-border .n6-module__scanline { display: none; }
.n6-module--no-border .n6-module__title-accent { display: none; }
.n6-module--no-border .n6-module__rule-wrap { display: none; }
.n6-module--no-border .n6-module__title {
    font-size: var(--n6-text-lg);
    font-weight: 600;
    color: var(--n6-text-muted);
    padding-bottom: var(--n6-sp-3);
    border-bottom: 1px solid var(--n6-divider);
    margin-bottom: var(--n6-sp-4);
}
.n6-module--no-border .n6-module__header { margin-bottom: var(--n6-sp-2); }
/* ── 8c. NoBorder Accent container (Container3) ── */
/* Inherits all .n6-module--no-border rules above;
   only the title border-bottom colour changes to crimson. */
.n6-module--accent-title .n6-module__title {
    border-bottom: 1px solid var(--n6-accent);   /* crimson instead of divider */
    color: var(--n6-text) !important;
}
/* Subtle crimson glow under the title for extra polish */
.n6-module--accent-title .n6-module__title::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 3px;
    background: linear-gradient(90deg, rgba(220,20,60,0.35) 0%, transparent 75%);
}


/* ── 8d. Featured / Highlighted container (Container4) ── */
/* Inherits all .n6-module base styles.
   Distinguishes itself through:
   - Accent-tinted surface (very subtle crimson wash)
   - Stronger border with a soft glow
   - Sticky top accent bar (2px crimson line at top edge)
   - "Featured" micro-badge (top-right)
   Business-appropriate: elegant emphasis, not loud colour.
*/
.n6-module--featured {
    background: linear-gradient(
        160deg,
        rgba(220, 20, 60, 0.055) 0%,
        var(--n6-surface) 55%
    );
    border-color: rgba(220, 20, 60, 0.28);
    box-shadow:
        0 0 0 1px rgba(220, 20, 60, 0.10) inset,
        0 2px 24px rgba(220, 20, 60, 0.07);
    /* Top accent bar */
    border-top: 2px solid var(--n6-accent);
    padding-top: calc(var(--n6-sp-6) + 2px);   /* compensate for border */
}
.n6-module--featured:hover {
    border-color: rgba(220, 20, 60, 0.45);
    box-shadow:
        0 0 0 1px rgba(220, 20, 60, 0.15) inset,
        0 4px 32px rgba(220, 20, 60, 0.12);
}

/* Featured micro-badge */
.n6-module__featured-badge {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--n6-font-body);
    font-size: 0.625rem;        /* 10px – very small, unobtrusive */
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--n6-accent);
    background: rgba(220, 20, 60, 0.08);
    border: 1px solid rgba(220, 20, 60, 0.25);
    border-radius: var(--n6-r-full);
    padding: 2px 8px;
    pointer-events: none;
    user-select: none;
    /* Slight right-side offset so it doesn't overlap corner bracket */
    z-index: 1;
}

/* Corner brackets on featured use full accent colour */
.n6-module--featured .n6-module__corner { opacity: 0.70; }
.n6-module--featured:hover .n6-module__corner { opacity: 1; }


/* ── 8e. Priority / Pinned container (Container5) ── */
/* Visual language distinct from Container4 (Featured):
   - Vertical 3px accent pillar on the LEFT edge
   - Elevated surface (one step brighter than default)
   - Crimson priority dot top-left
   - No top bar, no warm wash — more neutral, structured
   Conveys importance through structure, not colour saturation.
*/
.n6-module--priority {
    background: var(--n6-surface-2);    /* one step elevated */
    border-color: var(--n6-border);
    border-left: 3px solid var(--n6-accent);  /* left pillar */
    border-radius: 0 var(--n6-r-lg) var(--n6-r-lg) 0; /* flat left edge */
    padding-left: calc(var(--n6-sp-6) + 1px);   /* compensate for thicker border */
    box-shadow:
        -1px 0 0 0 rgba(220, 20, 60, 0.18),     /* soft glow left */
        0 2px 16px rgba(0, 0, 0, 0.25);
}
.n6-module--priority:hover {
    border-left-color: var(--n6-accent-hover);
    box-shadow:
        -1px 0 0 0 rgba(220, 20, 60, 0.30),
        0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Priority indicator dot */
.n6-module__priority-dot {
    position: absolute;
    top:  12px;
    left: -2px;     /* sits on the left pillar */
    width:  8px;
    height: 8px;
    border-radius: 50%;
    background: var(--n6-accent);
    box-shadow: 0 0 6px rgba(220, 20, 60, 0.7);
    pointer-events: none;
    z-index: 1;
}

/* Title on priority container: no "//" prefix – use clean weight instead */
.n6-module--priority .n6-module__title {
    font-weight: 700;
    color: var(--n6-text);
}
.n6-module--priority .n6-module__title-accent { display: none; }

/* Rule: slightly brighter than default */
.n6-module--priority .n6-module__rule-line {
    background: linear-gradient(90deg, rgba(220,20,60,0.5) 0%, transparent 100%);
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   9. FOOTER
   ═══════════════════════════════════════════════════════════ */
.n6-footer {
    background: var(--n6-surface);
    border-top: 1px solid var(--n6-border);
    padding: var(--n6-sp-12) 0 var(--n6-sp-8);
    margin-top: var(--n6-sp-16);
    flex-shrink: 0;
}
.n6-footer__inner { max-width: var(--n6-content-w); margin: 0 auto; }

/* Footer brand link */
.n6-footer__brand {
    display: inline-block;
    text-decoration: none;
    line-height: 0;   /* remove inline-block gap */
}

/* Footer logo image:
   Standard practice for footer logos is 32-48px tall.
   We use 40px – compact, recognisable, proportionate.
   The full logo image (icon + wordmark stacked) fits naturally
   at this height showing both elements. */
.n6-footer__logo {
    display: block;
    height: auto;      /* let width drive the proportion */
    width:  200px;     /* 200px wide as requested        */
    max-width: 200px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: saturate(1.08) contrast(1.02);
    transition: opacity 0.2s ease;
}
.n6-footer__brand:hover .n6-footer__logo { opacity: 0.80; }

.n6-footer__tagline {
    font-size: var(--n6-text-sm);
    color: var(--n6-text-faint);
    margin-top: var(--n6-sp-3);
}
/* Footer nav – always visible, proper gap, readable colour */
html .n6-footer__nav .navbar-nav,
html .n6-footer__nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: var(--n6-sp-3);
    list-style: none;
    margin: 0; padding: 0;
}
html .n6-footer__nav .nav-link,
html .n6-footer__nav a {
    font-size: var(--n6-text-sm);
    color: var(--n6-text-muted) !important;
    padding: var(--n6-sp-1) var(--n6-sp-2);
    transition: color var(--n6-t);
    text-decoration: none !important;
    white-space: nowrap;
}
html .n6-footer__nav .nav-link:hover,
html .n6-footer__nav a:hover { color: var(--n6-text) !important; }
.n6-footer__copy {
    font-size: var(--n6-text-xs);
    color: var(--n6-text-faint);
}

/* ═══════════════════════════════════════════════════════════
   10. UTILITY CLASSES & SCROLL REVEAL
   ═══════════════════════════════════════════════════════════ */

/* Buttons */
.n6-btn-primary {
    display: inline-flex; align-items: center; gap: var(--n6-sp-2);
    padding: var(--n6-sp-2) var(--n6-sp-5);
    background: var(--n6-accent);
    color: #fff !important;
    border: 1px solid var(--n6-accent);
    border-radius: var(--n6-r-md);
    font-family: var(--n6-font-body);
    font-size: var(--n6-text-sm); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background var(--n6-t), box-shadow var(--n6-t);
    text-decoration: none;
}
.n6-btn-primary:hover {
    background: var(--n6-accent-hover);
    box-shadow: 0 0 16px var(--n6-accent-glow);
    color: #fff !important;
}
.n6-btn-ghost {
    display: inline-flex; align-items: center; gap: var(--n6-sp-2);
    padding: var(--n6-sp-2) var(--n6-sp-4);
    background: transparent;
    color: var(--n6-text-muted) !important;
    border: 1px solid var(--n6-border);
    border-radius: var(--n6-r-md);
    font-family: var(--n6-font-body);
    font-size: var(--n6-text-sm); font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: border-color var(--n6-t), color var(--n6-t), background var(--n6-t);
    text-decoration: none;
}
.n6-btn-ghost:hover {
    border-color: var(--n6-accent);
    color: var(--n6-accent) !important;
    background: var(--n6-accent-dim);
}
.n6-btn-ghost--sm { padding: var(--n6-sp-1) var(--n6-sp-3); font-size: var(--n6-text-xs); }

/* Card */
.n6-card {
    background: var(--n6-surface);
    border: 1px solid var(--n6-border);
    border-radius: var(--n6-r-lg);
    padding: var(--n6-sp-6);
    transition: border-color var(--n6-t-m), box-shadow var(--n6-t-m);
}
.n6-card:hover {
    border-color: rgba(220,20,60,0.3);
    box-shadow: 0 4px 32px rgba(0,0,0,0.35);
}

/* Stat */
.n6-stat { text-align: center; }
.n6-stat__value {
    font-family: var(--n6-font-display);
    font-size: var(--n6-text-2xl);
    font-weight: 800;
    color: var(--n6-accent);
    line-height: 1;
}
.n6-stat__label {
    font-size: var(--n6-text-sm);
    color: var(--n6-text-muted);
    margin-top: var(--n6-sp-2);
}

/* Section label */
.n6-section-label {
    font-size: var(--n6-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--n6-accent);
    margin-bottom: var(--n6-sp-3);
}

/* Divider */
.n6-divider {
    border: none;
    border-top: 1px solid var(--n6-divider);
    margin: var(--n6-sp-6) 0;
}

/* Text helpers */
.n6-text-accent  { color: var(--n6-accent); }
.n6-text-muted   { color: var(--n6-text-muted); }
.n6-text-faint   { color: var(--n6-text-faint); }
.n6-text-display { font-family: var(--n6-font-display); }

/* Glow accent line */
.n6-accent-bar {
    height: 2px;
    background: linear-gradient(90deg, var(--n6-accent) 0%, transparent 80%);
    border-radius: var(--n6-r-full);
    margin-bottom: var(--n6-sp-6);
}

/* Scroll reveal */
.n6-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--n6-ease), transform 0.5s var(--n6-ease);
}
.n6-reveal.is-visible { opacity: 1; transform: none; }
.n6-reveal:nth-child(2) { transition-delay: 0.08s; }
.n6-reveal:nth-child(3) { transition-delay: 0.16s; }
.n6-reveal:nth-child(4) { transition-delay: 0.24s; }
.n6-reveal:nth-child(5) { transition-delay: 0.32s; }

/* ═══════════════════════════════════════════════════════════
   11. BOOTSTRAP OVERRIDES
   Make Bootstrap components match the dark theme
   ═══════════════════════════════════════════════════════════ */

/* Strip Bootstrap default bg from navbars */
.navbar { background: transparent !important; border-bottom: none !important; }
.navbar.bg-primary, .navbar.bg-dark, .navbar-dark { background: transparent !important; }

/* Buttons */
.btn-primary {
    background-color: var(--n6-accent) !important;
    border-color: var(--n6-accent) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--n6-accent-hover) !important;
    border-color: var(--n6-accent-hover) !important;
    box-shadow: 0 0 12px var(--n6-accent-glow) !important;
}
.btn-secondary, .btn-outline-secondary {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text-muted) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    border-color: var(--n6-accent) !important;
    color: var(--n6-accent) !important;
}
.btn-outline-primary {
    border-color: var(--n6-accent) !important;
    color: var(--n6-accent) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--n6-accent) !important;
    color: #fff !important;
}

/* Forms */
.form-control, .form-select {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text) !important;
    border-radius: var(--n6-r-md) !important;
}
.form-control::placeholder { color: var(--n6-text-faint) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--n6-accent) !important;
    box-shadow: 0 0 0 3px var(--n6-accent-dim) !important;
    background-color: var(--n6-surface-2) !important;
    color: var(--n6-text) !important;
}
.form-label { color: var(--n6-text-muted) !important; font-size: var(--n6-text-sm) !important; }
.form-text  { color: var(--n6-text-faint) !important; }

/* Cards */
.card {
    background-color: var(--n6-surface) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text) !important;
    border-radius: var(--n6-r-lg) !important;
}
.card-header, .card-footer {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text) !important;
}
.card-title, .card-subtitle { color: var(--n6-text) !important; }

/* List groups */
.list-group-item {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text) !important;
}
.list-group-item:hover, .list-group-item:focus {
    background-color: var(--n6-surface-3) !important;
    color: var(--n6-text) !important;
}
.list-group-item.active {
    background-color: var(--n6-accent) !important;
    border-color: var(--n6-accent) !important;
    color: #fff !important;
}

/* Tables */
.table { color: var(--n6-text) !important; }
.table thead th { border-color: var(--n6-border) !important; color: var(--n6-text-muted) !important; background: var(--n6-surface-2) !important; }
.table td, .table th { border-color: var(--n6-divider) !important; color: var(--n6-text) !important; }
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: var(--n6-surface-2) !important;
    color: var(--n6-text) !important;
}
.table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(255,255,255,0.02) !important; }

/* Badges */
.badge.bg-primary { background-color: var(--n6-accent) !important; }
.badge.bg-secondary { background-color: var(--n6-surface-3) !important; color: var(--n6-text-muted) !important; }

/* Alerts */
.alert { border-radius: var(--n6-r-md) !important; }
.alert-primary { background: var(--n6-accent-dim) !important; border-color: rgba(220,20,60,0.3) !important; color: var(--n6-text) !important; }
.alert-info    { background: rgba(66,153,225,0.10) !important; border-color: rgba(66,153,225,0.3) !important; color: var(--n6-text) !important; }
.alert-success { background: rgba(72,187,120,0.10) !important; border-color: rgba(72,187,120,0.3) !important; color: var(--n6-text) !important; }
.alert-warning { background: rgba(236,153,75,0.10) !important; border-color: rgba(236,153,75,0.3) !important; color: var(--n6-text) !important; }
.alert-danger  { background: rgba(245,101,101,0.10) !important; border-color: rgba(245,101,101,0.3) !important; color: var(--n6-text) !important; }

/* Dropdowns */
.dropdown-menu {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    border-radius: var(--n6-r-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
.dropdown-item { color: var(--n6-text-muted) !important; }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--n6-surface-3) !important;
    color: var(--n6-text) !important;
}
.dropdown-divider { border-color: var(--n6-divider) !important; }

/* Modals */
.modal-content {
    background-color: var(--n6-surface) !important;
    border-color: var(--n6-border) !important;
    border-radius: var(--n6-r-xl) !important;
    color: var(--n6-text) !important;
}
.modal-header { border-color: var(--n6-divider) !important; }
.modal-footer { border-color: var(--n6-divider) !important; }
.modal-title  { color: var(--n6-text) !important; }

/* Breadcrumbs */
.breadcrumb-item { color: var(--n6-text-muted) !important; font-size: var(--n6-text-sm) !important; }
.breadcrumb-item.active { color: var(--n6-text-faint) !important; }
.breadcrumb-item a { color: var(--n6-text-muted) !important; }
.breadcrumb-item a:hover { color: var(--n6-accent) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--n6-text-faint) !important; }

/* Pagination */
.page-link {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text-muted) !important;
}
.page-link:hover { background-color: var(--n6-surface-3) !important; color: var(--n6-text) !important; border-color: var(--n6-border) !important; }
.page-item.active .page-link { background-color: var(--n6-accent) !important; border-color: var(--n6-accent) !important; color: #fff !important; }
.page-item.disabled .page-link { background-color: var(--n6-surface) !important; color: var(--n6-text-faint) !important; }

/* Tabs */
.nav-tabs { border-color: var(--n6-divider) !important; }
.nav-tabs .nav-link { color: var(--n6-text-muted) !important; border-color: transparent !important; border-radius: var(--n6-r-sm) var(--n6-r-sm) 0 0 !important; }
.nav-tabs .nav-link:hover { color: var(--n6-text) !important; background: var(--n6-surface-2) !important; }
.nav-tabs .nav-link.active { color: var(--n6-text) !important; background: var(--n6-surface) !important; border-color: var(--n6-divider) var(--n6-divider) var(--n6-surface) !important; }
.nav-pills .nav-link { color: var(--n6-text-muted) !important; border-radius: var(--n6-r-md) !important; }
.nav-pills .nav-link:hover { background: var(--n6-surface-2) !important; color: var(--n6-text) !important; }
.nav-pills .nav-link.active { background: var(--n6-accent) !important; color: #fff !important; }

/* Progress bars */
.progress { background-color: var(--n6-surface-2) !important; border-radius: var(--n6-r-full) !important; }
.progress-bar { background-color: var(--n6-accent) !important; }

/* Accordion */
.accordion-item { background-color: var(--n6-surface) !important; border-color: var(--n6-border) !important; }
.accordion-button {
    background-color: var(--n6-surface-2) !important;
    color: var(--n6-text) !important;
    border-radius: var(--n6-r-md) !important;
}
.accordion-button:not(.collapsed) { background-color: var(--n6-accent-dim) !important; color: var(--n6-accent) !important; box-shadow: none !important; }
.accordion-button::after { filter: invert(1) !important; }
.accordion-body { background-color: var(--n6-surface) !important; color: var(--n6-text) !important; }

/* Spinners */
.spinner-border { color: var(--n6-accent) !important; }

/* Close buttons */
.btn-close { filter: invert(1) !important; opacity: 0.7 !important; }
.btn-close:hover { opacity: 1 !important; }

/* App logo */
.app-logo .img-fluid { max-height: 36px; padding: 0; }

/* ═══════════════════════════════════════════════════════════
   12. OQTANE ADMIN / OFFCANVAS OVERRIDES
   FIX v3:
   A. ControlPanel offcanvas must reach full viewport height
   B. Admin dashboard text legibility (was grey-on-grey)
   C. Nothing clips the panel (no overflow:hidden ancestors)
   ═══════════════════════════════════════════════════════════ */

/* A. Allow the offcanvas to render at full height.
      Oqtane renders ControlPanelInteractive as an offcanvas-end
      panel. The critical rules are:
        - position: fixed + full height
        - no overflow:hidden from any ancestor (already ensured by
          removing it from .n6-navbar, body, etc.)
        - z-index above the navbar
*/
.offcanvas,
.offcanvas-end,
.offcanvas-start {
    /* Full viewport height regardless of where it appears */
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    /* Theme colours */
    background-color: var(--n6-surface) !important;
    color: var(--n6-text) !important;
    border-left-color: var(--n6-border) !important;
    /* Above everything */
    z-index: 1055 !important;
    overflow-y: auto !important;
}
.offcanvas-backdrop {
    z-index: 1050 !important;
}

/* Header of the offcanvas */
.offcanvas-header {
    background-color: var(--n6-surface-2) !important;
    border-bottom: 1px solid var(--n6-divider) !important;
    padding: var(--n6-sp-4) var(--n6-sp-5) !important;
    position: sticky;
    top: 0;
    z-index: 1;
}
.offcanvas-title {
    color: var(--n6-text) !important;
    font-family: var(--n6-font-display) !important;
    font-weight: 600 !important;
}

/* Body of the offcanvas */
.offcanvas-body {
    background-color: var(--n6-surface) !important;
    color: var(--n6-text) !important;
    overflow-y: auto !important;
    padding: var(--n6-sp-5) !important;
}

/* B. Admin dashboard text legibility
      The admin module uses Bootstrap's default colours (grey on white).
      We must override ALL text to be visible on our dark surfaces.
*/
/* Generic text in the admin area */
.offcanvas-body *,
.offcanvas *,
.app-admin-container *,
.app-control-panel *,
.app-controlpanel * {
    color: var(--n6-text) !important;
}
/* Muted / secondary text slightly dimmer but still readable */
.offcanvas-body .text-muted,
.offcanvas-body small,
.offcanvas-body .form-text {
    color: var(--n6-text-muted) !important;
}
/* Headings and labels */
.offcanvas-body h1,
.offcanvas-body h2,
.offcanvas-body h3,
.offcanvas-body h4,
.offcanvas-body h5,
.offcanvas-body h6 {
    color: var(--n6-text) !important;
}
/* Form elements */
.offcanvas-body .form-control,
.offcanvas-body .form-select,
.offcanvas-body .form-check-input {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text) !important;
}
.offcanvas-body .form-label,
.offcanvas-body label { color: var(--n6-text-muted) !important; }
/* List groups */
.offcanvas-body .list-group-item {
    background-color: var(--n6-surface-2) !important;
    border-color: var(--n6-border) !important;
    color: var(--n6-text) !important;
}
.offcanvas-body .list-group-item:hover {
    background-color: var(--n6-surface-3) !important;
    color: var(--n6-text) !important;
}
.offcanvas-body .list-group-item.active {
    background-color: var(--n6-accent) !important;
    border-color: var(--n6-accent) !important;
    color: #fff !important;
}
/* Nav links in admin panel */
.offcanvas-body .nav-link,
.offcanvas-body .nav-item a {
    color: var(--n6-text-muted) !important;
}
.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-item a:hover {
    color: var(--n6-text) !important;
    background-color: var(--n6-surface-2) !important;
}
.offcanvas-body .nav-link.active,
.offcanvas-body .nav-item a.active {
    color: var(--n6-accent) !important;
    background-color: var(--n6-accent-dim) !important;
}
/* Tables in admin panel */
.offcanvas-body .table,
.offcanvas-body .table td,
.offcanvas-body .table th { color: var(--n6-text) !important; border-color: var(--n6-divider) !important; }
.offcanvas-body .table thead th { background-color: var(--n6-surface-2) !important; color: var(--n6-text-muted) !important; }

/* C. Admin inline edit controls (add/edit module overlays) */
.app-add-content,
.app-edit-content {
    background: var(--n6-surface-2) !important;
    border: 1px dashed var(--n6-border) !important;
    border-radius: var(--n6-r-md) !important;
    color: var(--n6-text-muted) !important;
    transition: border-color var(--n6-t), color var(--n6-t) !important;
    overflow: visible !important;
}
.app-add-content:hover,
.app-edit-content:hover {
    border-color: var(--n6-accent) !important;
    color: var(--n6-accent) !important;
}

/* Admin container overflow: must never be hidden */
.app-admin-container,
.app-control-panel,
.app-controlpanel {
    overflow: visible !important;
}


/* ═══════════════════════════════════════════════════════════
   BOOTSTRAP COLLAPSE OVERRIDE
   Bootstrap sets  .collapse:not(.show) { display: none }
   This kills Oqtane's <Menu> output inside the mobile drawer
   and the footer because the component wraps links in a
   .collapse div without adding .show on mobile.
   We forcibly restore display for both containers.
   ═══════════════════════════════════════════════════════════ */

/* Mobile drawer: always show the collapse wrapper */
html body .n6-mobile-drawer .collapse,
html body .n6-mobile-drawer .collapse:not(.show),
html body .n6-mobile-drawer .navbar-collapse {
    display: block !important;
}

/* Footer nav: always show the collapse wrapper */
html body .n6-footer .collapse,
html body .n6-footer .collapse:not(.show),
html body .n6-footer .navbar-collapse {
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   13. SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--n6-bg); }
::-webkit-scrollbar-thumb { background: var(--n6-surface-3); border-radius: var(--n6-r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--n6-accent); }

/* ═══════════════════════════════════════════════════════════
   14. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Below 992px: mobile layout ── */
@media (max-width: 991.98px) {
    /* Show hamburger; hide desktop nav and right controls */
    .n6-hamburger        { display: flex !important; }
    .n6-nav-desktop      { display: none  !important; }
    .n6-navbar__controls { display: none  !important; }

    /* Content breathing room */
    .n6-content { padding-top: var(--n6-sp-8); padding-bottom: var(--n6-sp-8); }
    .n6-navbar__inner { padding: 0 var(--n6-sp-4); gap: var(--n6-sp-3); }

    /* Admin offcanvas: full-width on small screens */
    .offcanvas-end, .offcanvas-start { width: 100% !important; max-width: 360px !important; }

    /* Footer nav: stack on mobile */
    html .n6-footer__nav .navbar-nav,
    html .n6-footer__nav ul {
        flex-direction: column !important;
        gap: var(--n6-sp-2) !important;
        align-items: flex-start !important;
    }
    .n6-footer .col-md-4 { text-align: left !important; }
}

/* ── Above 992px: always show desktop nav ── */
@media (min-width: 992px) {
    .n6-hamburger       { display: none  !important; }
    .n6-mobile-drawer   { display: none  !important; }
    .n6-mobile-backdrop { display: none  !important; }
}