/* ============================================================================
   Beachbeds Super Admin skin for Backpack / theme-tabler.

   Loaded last in config/backpack/theme-tabler.php -> 'styles', so it wins the
   cascade over Tabler Core and the theme's colors.css.

   Structure
     1  Fonts
     2  Tokens          brand primitives, then Tabler's variables driven from them
     3  Base            body, type, focus, motion, scrollbars
     4  Layout          sidebar rail, top banner, content column
     5  Controls        buttons, forms, dropdowns
     6  Surfaces        cards, panels, the settings-card page kit
     7  Data            tables, DataTables, pagination, row actions
     8  Page kit        headings, stats, filters, pills, bars, plan cards, calendar
     9  Auth            login screen

   Tabler ships a purple-tinted neutral ramp. Section 2 replaces it wholesale so
   that components this file never names -- modals, offcanvas, alerts, select2,
   noty toasts, tooltips -- land on the brand without being restyled one by one.
   ========================================================================= */


/* ===========================================================================
   1  Fonts
   ======================================================================== */

@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-300.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}


/* ===========================================================================
   2  Tokens
   ======================================================================== */

/* Light primitives. Declared first; the dark block below overrides the same
   names, and the Tabler mapping further down reads them through var() so it
   resolves correctly in both modes without being written twice. */
:root,
[data-bs-theme="light"] {
    --bb-canvas:        #F2F5F5;
    --bb-surface:       #FFFFFF;
    --bb-surface-2:     #F7FAFA;
    --bb-surface-3:     #EDF2F2;
    /* Inputs sit on their own tone so a field reads as recessed rather than
       flush with the card behind it. */
    --bb-field:         #FFFFFF;

    --bb-ink:           #0E2226;
    --bb-ink-2:         #4E6266;
    /* The muted tone carries real text -- form hints, table headers, stat
       labels, empty states -- so it has to clear 4.5:1, not just look quiet.
       The previous #7E9296 measured 3.26:1 on white. This clears the bar on
       every light surface it actually lands on: 4.88:1 on --bb-surface,
       4.65:1 on --bb-surface-2. Dark mode's ink-3 already passed at 4.95:1
       and is unchanged. */
    --bb-ink-3:         #5F7579;
    --bb-ink-on-brand:  #FFFFFF;

    --bb-line:          #E1E8E8;
    --bb-line-strong:   #CBD8D8;

    --bb-brand-900:     #00313A;
    --bb-brand-800:     #00414A;
    --bb-brand-700:     #005662;
    --bb-brand-600:     #0A6B78;
    --bb-brand-200:     #B1CBCF;
    --bb-brand-100:     #D6E4E5;
    --bb-brand-50:      #EDF4F4;
    --bb-brand-wash:    rgba(0, 65, 74, 0.06);
    --bb-brand-wash-2:  rgba(0, 65, 74, 0.10);

    /* The one warm note. Reserved for things waiting on a human: pending
       approvals, unpaid payouts. Nothing decorative is ever orange. */
    --bb-accent:        #F96300;
    --bb-accent-ink:    #A84400;
    --bb-accent-wash:   #FFF1E8;

    --bb-success:       #147D4B;
    --bb-success-wash:  #E6F4EC;
    --bb-danger:        #C0392B;
    --bb-danger-wash:   #FBEDEB;

    --bb-focus:         0 0 0 3px rgba(0, 86, 98, 0.28);
    --bb-shadow-1:      0 1px 2px rgba(6, 32, 36, 0.05);
    --bb-shadow-2:      0 1px 2px rgba(6, 32, 36, 0.04), 0 6px 16px -6px rgba(6, 32, 36, 0.12);
    --bb-shadow-3:      0 12px 32px -8px rgba(6, 32, 36, 0.22);

    /* Legacy aliases. Several CRUD field partials still reference these by
       name, so they stay pointed at the new ramp rather than being replaced. */
    --bb-dark-green:    var(--bb-brand-800);
    --bb-green:         var(--bb-brand-700);
    --bb-light-green:   var(--bb-brand-200);
    --bb-orange:        var(--bb-accent);
    --bb-gray:          var(--bb-ink-3);
    --bb-accent-legacy: var(--bb-brand-200);
}

/* Dark primitives: deep water rather than neutral black, so the sidebar rail
   and the canvas read as the same material. */
[data-bs-theme="dark"] {
    --bb-canvas:        #0A1416;
    --bb-surface:       #101D20;
    --bb-surface-2:     #16262A;
    --bb-surface-3:     #1C2F33;
    --bb-field:         #081113;

    --bb-ink:           #D8E3E2;
    --bb-ink-2:         #9DB2B2;
    --bb-ink-3:         #7A8F8F;

    --bb-line:          rgba(177, 203, 207, 0.12);
    --bb-line-strong:   rgba(177, 203, 207, 0.22);

    --bb-brand-wash:    rgba(177, 203, 207, 0.08);
    --bb-brand-wash-2:  rgba(177, 203, 207, 0.14);

    --bb-accent:        #FF7A29;
    --bb-accent-ink:    #FFA366;
    --bb-accent-wash:   rgba(249, 99, 0, 0.16);

    --bb-success:       #4ABE85;
    --bb-success-wash:  rgba(74, 190, 133, 0.14);
    --bb-danger:        #E8695B;
    --bb-danger-wash:   rgba(232, 105, 91, 0.14);

    --bb-focus:         0 0 0 3px rgba(177, 203, 207, 0.32);
    --bb-shadow-1:      0 1px 2px rgba(0, 0, 0, 0.30);
    --bb-shadow-2:      0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 16px -6px rgba(0, 0, 0, 0.50);
    --bb-shadow-3:      0 12px 32px -8px rgba(0, 0, 0, 0.60);
}

/* Scales and the Tabler mapping. Declared after the dark block on purpose:
   `:root` and `[data-bs-theme=dark]` have equal specificity, so this wins on
   source order, and every var() below resolves against whichever mode is on. */
:root {
    /* Radius. Four steps; the pill is reserved for status badges and filter
       chips so a button never reads as a status. */
    --bb-r-1:    0.375rem;
    --bb-r-2:    0.5rem;
    --bb-r-3:    0.75rem;
    --bb-r-4:    1rem;
    --bb-r-pill: 999px;

    /* Type */
    --bb-fs-micro: 0.6875rem;
    --bb-fs-sm:    0.8125rem;
    --bb-fs-body:  0.875rem;
    --bb-fs-title: 1.0625rem;
    --bb-fs-page:  1.75rem;
    --bb-fs-stat:  1.625rem;
    --bb-track-caps: 0.06em;

    /* Motion */
    --bb-dur:  140ms;
    --bb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* --- Tabler ------------------------------------------------------- */
    --tblr-body-bg:                  var(--bb-canvas);
    --tblr-body-color:               var(--bb-ink);
    --tblr-body-font-size:           var(--bb-fs-body);
    --tblr-body-line-height:         1.55;
    --tblr-emphasis-color:           var(--bb-ink);

    --tblr-secondary-color:          var(--bb-ink-2);
    --tblr-tertiary-color:           var(--bb-ink-3);
    --tblr-muted:                    var(--bb-ink-3);
    --tblr-secondary-bg:             var(--bb-surface-2);
    --tblr-tertiary-bg:              var(--bb-surface-2);

    --tblr-border-color:             var(--bb-line);
    --tblr-border-color-translucent: var(--bb-line);
    --tblr-light-border-subtle:      var(--bb-line);
    --tblr-dark-mode-border-color:   var(--bb-line);
    --tblr-navbar-border-color:      transparent;

    --tblr-bg-surface:               var(--bb-surface);
    --tblr-bg-surface-secondary:     var(--bb-surface-2);
    --tblr-bg-forms:                 var(--bb-field);
    --tblr-bg-main-color:            var(--bb-canvas);

    /* The neutral ramp. Tabler's is purple (#4c496c / #211d3b / #c9c1d6),
       which is what made the brand green read as paint on someone else's UI.

       These are deliberately static rather than mode-aware. Tabler treats
       gray-100..900 as a fixed light-to-dark scale and reaches for the light
       end from inside its own dark-mode rules (`[dark] a:hover { color:
       var(--tblr-gray-200) }` wants a light value). Flipping them per mode
       makes link hovers and action chips vanish in dark. */
    --tblr-gray-100: #F2F5F5;
    --tblr-gray-200: #E3EAEA;
    --tblr-gray-300: #CBD8D8;
    --tblr-gray-400: #A8BABB;
    --tblr-gray-500: #7E9296;
    --tblr-gray-600: #5C7175;
    --tblr-gray-700: #3E5256;
    --tblr-gray-800: #24383C;
    --tblr-gray-900: #0E2226;
    --tblr-gray:     #5C7175;
    --tblr-gray-dark: #24383C;

    --tblr-primary:      var(--bb-brand-800);
    --tblr-primary-rgb:  0, 65, 74;
    --tblr-primary-fg:   #ffffff;
    --tblr-secondary:    var(--bb-brand-700);
    --tblr-secondary-rgb: 0, 86, 98;
    --tblr-orange:       var(--bb-accent);
    --tblr-success:      var(--bb-success);
    --tblr-danger:       var(--bb-danger);
    --tblr-danger-text:  var(--bb-danger);

    --tblr-link-color:       var(--bb-brand-700);
    --tblr-link-color-rgb:   0, 86, 98;
    --tblr-link-hover-color: var(--bb-brand-800);

    --tblr-focus-ring-color: rgba(0, 86, 98, 0.24);
    --tblr-focus-ring-width: 3px;

    --tblr-border-radius:    var(--bb-r-2);
    --tblr-border-radius-sm: var(--bb-r-1);
    --tblr-border-radius-lg: var(--bb-r-3);

    --tblr-font-sans-serif: "Archivo", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark needs a lighter primary so buttons, links and chart fills stay legible
   against the deep canvas. */
[data-bs-theme="dark"] {
    --tblr-primary:          var(--bb-brand-200);
    --tblr-primary-rgb:      177, 203, 207;
    --tblr-primary-fg:       #06181B;
    --tblr-link-color:       var(--bb-brand-200);
    --tblr-link-color-rgb:   177, 203, 207;
    --tblr-link-hover-color: #CFE0E2;
    --tblr-focus-ring-color: rgba(177, 203, 207, 0.30);
}


/* ===========================================================================
   3  Base
   ======================================================================== */

body {
    font-family: var(--tblr-font-sans-serif);
    background: var(--bb-canvas);
    color: var(--bb-ink);
    letter-spacing: 0.1px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--bb-ink);
}
h4, h5, h6, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.004em;
}

/* Numbers are the point of this panel, so they align in columns everywhere. */
.bb-num,
.bb-stat-value,
.bb-table td.bb-num,
.table td.bb-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.bb-strong {
    font-weight: 600;
    color: var(--bb-ink);
}

::selection {
    background: var(--bb-brand-200);
    color: var(--bb-brand-900);
}

/* One visible focus ring for every interactive element. Tabler's default ring
   was still purple and most of these had no ring at all. */
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.bb-action:focus-visible,
.bb-month-pill:focus-visible,
.bb-expand:focus-visible,
a:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--bb-focus);
    border-radius: var(--bb-r-2);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--bb-brand-800);
}
[data-bs-theme="dark"] input[type="checkbox"],
[data-bs-theme="dark"] input[type="radio"] {
    accent-color: var(--bb-brand-200);
}

/* The layout ships animate.css `fadeIn` on every page render and Tabler adds
   hover transitions throughout; both must yield to the OS preference. */
@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;
    }
}


/* ===========================================================================
   4  Layout
   ======================================================================== */

/* --- Sidebar rail -------------------------------------------------------
   The rail is where this design spends its boldness: it carries 26 items in
   6 groups and is the surface an operator looks at all day. Everything else
   in the panel stays deliberately quiet. */

.navbar-vertical.navbar {
    --tblr-navbar-bg: var(--bb-brand-800);
    background: linear-gradient(180deg, var(--bb-brand-800) 0%, var(--bb-brand-900) 100%) !important;
    border-right: 0;
}

/* The rail's scrollbar is hidden, not disabled.

   27 items across 7 groups is roughly 1500px of nav; a laptop viewport gives it
   about 950px. It does not fit and cannot be made to fit without shrinking the
   items past a comfortable hit target, so the rail still scrolls -- by wheel,
   trackpad, touch and keyboard, all unaffected. What is gone is the visible
   bar, which sat right on the seam between rail and content and read as a
   second page scrollbar.

   The vertical rhythm below is also tightened so there is less to scroll: the
   group captions were spending 2.4rem of dead space each, which across 7 of
   them was most of a screenful. */
.navbar-vertical,
.navbar-vertical .navbar-collapse {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
}
.navbar-vertical::-webkit-scrollbar,
.navbar-vertical ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Brand block: full width so the hairline under it spans the rail rather than
   shrinking to the width of the wordmark. The `!important` and the companion
   nav rule below cancel theme-tabler's `mb-3` / `pt-lg-3`, which together left
   ~2rem of dead space between the logo and the first item. */
.navbar-vertical .navbar-brand {
    display: block;
    width: 100%;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 0 !important;
}
.navbar-vertical .navbar-brand > a {
    display: block;
    width: 100%;
}
.navbar-vertical .navbar-collapse .navbar-nav {
    padding-top: 0.35rem !important;
}

/* The wordmark SVG (config/backpack/ui.php -> project_logo) ships white, so it
   sits on the rail as-is. It is ~9:1, so height controls how wide it lands. */
.navbar-brand .bb-brand-logo {
    display: block;
    height: 17px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

/* Tabler centres sidebar nav content, which at this item count left the labels
   ragged and each glyph sitting at a different x depending on its label's
   width. Left-aligning and giving the icon a fixed column turns 26 items into
   two clean columns: glyphs on one axis, labels on another. That alignment is
   what makes a rail this long scannable. */
.navbar-vertical .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 500;
    border-radius: var(--bb-r-2);
    margin: 1px 0.55rem;
    /* 0.4rem keeps the item at ~36px including its margin -- still a comfortable
       hit target, and across 27 items it buys back most of a caption's worth of
       height. */
    padding-block: 0.4rem;
    /* Standing room for the active indicator, so a label does not shift
       sideways when its item becomes active. */
    padding-left: 0.75rem;
    position: relative;
    transition: background-color var(--bb-dur) var(--bb-ease),
                color var(--bb-dur) var(--bb-ease);
}

/* Both glyph conventions this theme produces: `nav-icon` on the hand-written
   items in menu_items.blade.php, `nav-link-icon` on the ones
   <x-backpack::menu-item> renders. They have to size identically or the two
   kinds of item will not share the column. */
.navbar-vertical .nav-item .nav-link .nav-icon,
.navbar-vertical .nav-item .nav-link .nav-link-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    margin-right: 0.65rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    opacity: 0.72;
    transition: opacity var(--bb-dur) var(--bb-ease),
                color var(--bb-dur) var(--bb-ease);
}

.navbar-vertical .nav-item .nav-link:hover,
.navbar-vertical .nav-item .nav-link:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}
.navbar-vertical .nav-item .nav-link:hover .nav-icon,
.navbar-vertical .nav-item .nav-link:hover .nav-link-icon { opacity: 1; }

/* Active state. The indicator is a pseudo-element rather than the old inset
   shadow so it can be inset from the item's rounded corners instead of running
   the full height and colliding with them. */
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-item .nav-link.active {
    color: #ffffff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.13);
}
.navbar-vertical .nav-item.active > .nav-link::before,
.navbar-vertical .nav-item .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.05rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bb-brand-200);
}
.navbar-vertical .nav-item.active > .nav-link .nav-icon,
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon,
.navbar-vertical .nav-item .nav-link.active .nav-icon,
.navbar-vertical .nav-item .nav-link.active .nav-link-icon {
    color: var(--bb-brand-200);
    opacity: 1;
}

/* Group captions. The rule above each one turns it into a section divider
   rather than floating uppercase text that reads as an orphaned nav item.

   `display: block` is deliberate: Tabler sets `justify-content: center` on
   sidebar nav items, and a flex heading both centred its label and refused to
   generate a ::after box for the rule. A border on the item itself is immune
   to both and survives Tabler upgrades. */
.navbar-vertical .nav-item.bb-nav-heading {
    display: block;
    text-align: left;
    margin: 0.9rem 0.9rem 0.35rem;
    padding: 0.7rem 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    text-transform: uppercase;
    /* 0.42 landed at 3.27:1 against the rail -- too faint for 11px uppercase,
       the hardest case for legibility. 0.58 is 4.88:1 at the lightest point of
       the rail's gradient and better further down. */
    color: rgba(255, 255, 255, 0.58);
    pointer-events: none;
}

/* Count badge on Approvals: the only orange in the panel.

   theme-tabler only un-pins badges on `.nav-item.dropdown`; Approvals is a
   plain item, so it kept Tabler Core's absolute corner positioning and floated
   off the top-right edge of the rail. Put it back in flow and let auto margin
   push it to the trailing edge of the link. */
.navbar-vertical .navbar-nav .nav-link .badge {
    position: static;
    transform: none;
    margin-left: auto;
    border-radius: var(--bb-r-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 0.1rem 0.45rem;
    background: var(--bb-accent) !important;
    color: #ffffff !important;
}

/* My account sits below the last group rather than inside one -- it is about
   the operator, not about the product.

   `margin-top: auto` pins it to the foot of the rail when the nav has spare
   height; when it does not (a short window, where the rail scrolls) the border
   still reads as separation, so the item never looks like it belongs to
   "System" either way.

   The border is drawn on the item so it spans the rail like the group captions
   do. That means the item carries the inset instead of the link, so the link's
   own inline margin is zeroed -- otherwise the two stack and this one label
   sits ~1.5rem in while every other label sits at 0.55rem. */
.navbar-vertical .navbar-nav .nav-item.bb-nav-tail {
    margin-top: auto;
    margin-inline: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.navbar-vertical .navbar-nav .nav-item.bb-nav-tail > .nav-link {
    margin-inline: 0;
}

/* The account menu and colour-mode switcher were moved into .bb-topbar by the
   custom layout, so the copies theme-tabler still renders in the rail are
   suppressed. Matched on the attribute Tabler puts on the switcher buttons --
   their class names differ between light and dark variants and between Tabler
   versions, so a class match leaves one copy showing under the logo. */
.navbar-vertical .nav-item.dropdown,
.navbar-vertical [data-bs-theme-value],
.navbar-vertical .nav-item:has([data-bs-theme-value]) {
    display: none !important;
}

/* --- Top banner --------------------------------------------------------- */

.bb-topbar {
    background: var(--bb-surface);
    border-bottom: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow-1);
    min-height: 3.5rem;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.bb-topbar > .container-fluid {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
}
.bb-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.bb-topbar .nav-link { color: var(--bb-ink-2); }

/* Pending-approvals chip. The bar existed to hold two icons; this gives it a
   job. Orange because approvals are the panel's one "waiting on a human" state
   -- the same reservation of the accent the sidebar badge makes. */
.bb-topbar-approvals {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--bb-r-pill);
    text-decoration: none;
    font-size: var(--bb-fs-sm);
    font-weight: 600;
    color: var(--bb-accent-ink);
    background: var(--bb-accent-wash);
    border: 1px solid transparent;
    transition: border-color var(--bb-dur) var(--bb-ease),
                background-color var(--bb-dur) var(--bb-ease);
}
.bb-topbar-approvals:hover {
    color: var(--bb-accent-ink);
    border-color: var(--bb-accent);
    text-decoration: none;
}
.bb-topbar-approvals i { font-size: 1rem; }
.bb-topbar-approvals__count { font-variant-numeric: tabular-nums; }

.bb-topbar button[class*="show-theme-"] {
    color: var(--bb-ink-2) !important;
    padding: 0.4rem 0.5rem;
    border-radius: var(--bb-r-2);
    transition: background-color var(--bb-dur) var(--bb-ease),
                color var(--bb-dur) var(--bb-ease);
}
.bb-topbar button[class*="show-theme-"]:hover {
    color: var(--bb-brand-700) !important;
    background: var(--bb-brand-wash);
}
.bb-topbar .nav-item .nav-link svg,
.bb-topbar .nav-item .nav-link i { font-size: 1.05rem; }

/* Account trigger is the avatar alone; the name and role live in the menu. */
.bb-topbar .nav-item.dropdown > .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    gap: 0;
    border-radius: var(--bb-r-2);
    transition: box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-topbar .nav-item.dropdown > .nav-link::after { display: none; }
.bb-topbar .nav-item.dropdown > .nav-link > .d-none,
.bb-topbar .nav-item.dropdown > .nav-link > div:not(.avatar),
.bb-topbar .nav-item.dropdown > .nav-link > span:not(.avatar) { display: none !important; }
.bb-topbar .avatar { border-radius: var(--bb-r-2); }
.bb-topbar .nav-item.dropdown > .nav-link:hover .avatar {
    box-shadow: 0 0 0 2px var(--bb-brand-200);
}

/* --- Content column ------------------------------------------------------
   The layout nests `.container-fluid` inside `.container-xxl`, so page content
   picked up a second set of gutters and sat indented from its own breadcrumbs.
   Zeroing the inner gutters lines the two up.

   Desktop only: Bootstrap rows pull themselves out by half a gutter, and below
   lg the outer container's padding is too small to absorb that once the inner
   padding is gone -- which pushed `.row` past the viewport at 768px. */
@media (min-width: 992px) {
    .page-body > .container-xxl > .container-fluid,
    .page-body > .container-fluid > .container-fluid {
        padding-inline: 0;
    }
}

.page-header .page-pretitle,
.bb-eyebrow {
    color: var(--bb-ink-3);
    text-transform: uppercase;
    letter-spacing: var(--bb-track-caps);
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.page-header .page-title {
    color: var(--bb-ink);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.breadcrumb { font-size: var(--bb-fs-sm); }
.breadcrumb .breadcrumb-item a {
    color: var(--bb-ink-2);
    text-decoration: none;
}
.breadcrumb .breadcrumb-item a:hover { color: var(--bb-brand-700); }
.breadcrumb .breadcrumb-item.active { color: var(--bb-ink-3); }

.footer {
    background: transparent;
    border-top: 1px solid var(--bb-line);
    color: var(--bb-ink-3);
    font-size: var(--bb-fs-sm);
}


/* ===========================================================================
   5  Controls
   ======================================================================== */

.btn {
    border-radius: var(--bb-r-2);
    font-weight: 600;
    padding-inline: 1rem;
    transition: background-color var(--bb-dur) var(--bb-ease),
                border-color var(--bb-dur) var(--bb-ease),
                color var(--bb-dur) var(--bb-ease),
                box-shadow var(--bb-dur) var(--bb-ease);
}
.btn-sm { border-radius: var(--bb-r-1); }
.btn-lg { border-radius: var(--bb-r-3); }

.btn-primary {
    --tblr-btn-bg: var(--bb-brand-800);
    --tblr-btn-border-color: var(--bb-brand-800);
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-bg: var(--bb-brand-700);
    --tblr-btn-hover-border-color: var(--bb-brand-700);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-active-bg: var(--bb-brand-900);
    --tblr-btn-active-border-color: var(--bb-brand-900);
}
.btn-secondary {
    --tblr-btn-bg: var(--bb-brand-700);
    --tblr-btn-border-color: var(--bb-brand-700);
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-bg: var(--bb-brand-800);
    --tblr-btn-hover-border-color: var(--bb-brand-800);
    --tblr-btn-hover-color: #ffffff;
}
.btn-outline-primary {
    --tblr-btn-color: var(--bb-brand-800);
    --tblr-btn-border-color: var(--bb-line-strong);
    --tblr-btn-hover-bg: var(--bb-brand-wash);
    --tblr-btn-hover-border-color: var(--bb-brand-200);
    --tblr-btn-hover-color: var(--bb-brand-800);
}
.btn-default,
.card-footer .btn-default,
.form-buttons .btn-default {
    color: var(--bb-ink-2);
}

[data-bs-theme="dark"] .btn-primary {
    --tblr-btn-bg: var(--bb-brand-700);
    --tblr-btn-border-color: var(--bb-brand-700);
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-bg: var(--bb-brand-600);
    --tblr-btn-hover-border-color: var(--bb-brand-600);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-active-bg: var(--bb-brand-800);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --tblr-btn-color: var(--bb-brand-200);
    --tblr-btn-hover-color: var(--bb-brand-200);
}

/* --- Forms --------------------------------------------------------------- */

.form-control,
.form-select,
.bb-cal-input {
    border-radius: var(--bb-r-2);
    background: var(--bb-field);
    border-color: var(--bb-line-strong);
    color: var(--bb-ink);
    transition: border-color var(--bb-dur) var(--bb-ease),
                box-shadow var(--bb-dur) var(--bb-ease);
}
.form-control::placeholder { color: var(--bb-ink-3); }
.form-control:focus,
.form-select:focus,
.bb-cal-input:focus {
    outline: 0;
    border-color: var(--bb-brand-200);
    box-shadow: var(--bb-focus);
}
.form-control:disabled,
.form-select:disabled,
.bb-cal-input:disabled {
    background: var(--bb-surface-2);
    color: var(--bb-ink-3);
}

.input-group-text {
    background: var(--bb-surface-2);
    border-color: var(--bb-line-strong);
    color: var(--bb-ink-2);
    border-radius: var(--bb-r-2);
}

.form-group .form-label,
.form-group > label,
label.form-label,
.bb-label {
    font-weight: 500;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink);
    margin-bottom: 0.3rem;
}

.form-group .form-text,
.form-group small.text-muted,
.bb-hint {
    color: var(--bb-ink-3);
    font-size: var(--bb-fs-sm);
}

.form-group .text-danger,
.required label::after { color: var(--bb-danger); }

.nav-tabs .nav-link {
    color: var(--bb-ink-3);
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover { color: var(--bb-ink-2); }
.nav-tabs .nav-link.active {
    color: var(--bb-brand-800);
    border-bottom-color: var(--bb-brand-800);
    font-weight: 600;
    background: transparent;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--bb-brand-200);
    border-bottom-color: var(--bb-brand-200);
}

/* --- Dropdowns ----------------------------------------------------------- */

.dropdown-menu {
    background: var(--bb-surface);
    border-radius: var(--bb-r-3);
    border: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow-3);
    padding: 0.35rem;
}
.dropdown-menu .dropdown-item {
    border-radius: var(--bb-r-2);
    padding: 0.5rem 0.7rem;
    font-weight: 500;
    color: var(--bb-ink-2);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--bb-brand-wash);
    color: var(--bb-brand-800);
}
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
    color: var(--bb-brand-200);
}
.dropdown-menu a[href*="logout"]:hover,
.dropdown-menu .dropdown-item.text-danger:hover {
    background: var(--bb-danger-wash);
    color: var(--bb-danger);
}


/* ===========================================================================
   6  Surfaces
   ======================================================================== */

/* One recipe shared by Tabler cards and the hand-built panels, so a stat tile
   and a CRUD card are visibly the same material. */
.card,
.bb-panel,
.bb-stat,
.bb-cal-controls {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-3);
    box-shadow: var(--bb-shadow-1);
}
.bb-panel { overflow: hidden; }

.card .card-header {
    background: transparent;
    border-bottom-color: var(--bb-line);
    border-top-left-radius: var(--bb-r-3);
    border-top-right-radius: var(--bb-r-3);
    font-weight: 600;
    color: var(--bb-ink);
}
.card .card-footer {
    background: transparent;
    border-top-color: var(--bb-line);
}

/* --- Settings-card page kit ---------------------------------------------
   Scoped to `.bb-surface`, the wrapper the dashboard and My Account already
   carry. Before this, these classes lived only inside dashboard.blade.php's
   inline <style>, so My Account rendered with unstyled card internals. */

.bb-surface { display: block; }

.bb-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.bb-dash-title {
    font-size: var(--bb-fs-page);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--bb-ink);
    margin: 0;
}
.bb-dash-subtitle {
    color: var(--bb-ink-2);
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    max-width: 68ch;
}
.bb-dash-subtitle strong { color: var(--bb-ink); font-weight: 600; }

/* The body is a column and the description absorbs the slack, so the rule
   above each form lands at the same height across a row of cards without a
   hand-tuned min-height. */
.bb-surface .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
}
.bb-surface .card {
    transition: border-color var(--bb-dur) var(--bb-ease),
                box-shadow var(--bb-dur) var(--bb-ease);
}
.bb-surface .card:hover {
    border-color: var(--bb-brand-200);
    box-shadow: var(--bb-shadow-2);
}

.bb-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--bb-r-2);
    background: var(--bb-brand-50);
    box-shadow: inset 0 0 0 1px var(--bb-brand-wash-2);
    color: var(--bb-brand-800);
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    flex: 0 0 auto;
}
[data-bs-theme="dark"] .bb-card-icon {
    background: var(--bb-surface-3);
    box-shadow: inset 0 0 0 1px var(--bb-line);
    color: var(--bb-brand-200);
}

.bb-card-title {
    font-size: var(--bb-fs-title);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--bb-ink);
    margin-bottom: 0.4rem;
}
.bb-card-desc {
    color: var(--bb-ink-2);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1 1 auto;
}
.bb-card-desc strong { color: var(--bb-ink); font-weight: 600; }

.bb-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 0 0 auto;
    border-top: 1px solid var(--bb-line);
    padding-top: 1.4rem;
}
.bb-submit { margin-top: 0.2rem; }

/* Inline save feedback on the settings cards. Token-driven so it stays legible
   in dark mode -- the dashboard used to set #2e7d32 / #d32f2f from JS, which
   are light-mode greens and reds painted onto whatever surface was underneath. */
.bb-formmsg {
    margin: 0;
    font-size: var(--bb-fs-sm);
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--bb-r-2);
}
.bb-formmsg[hidden] { display: none; }
/* Colour is a reinforcement, not the signal: the message text always states the
   outcome in words, so this reads the same to a colour-blind operator. */
.bb-formmsg.is-ok    { color: var(--bb-success); background: var(--bb-success-wash); }
.bb-formmsg.is-error { color: var(--bb-danger);  background: var(--bb-danger-wash); }

/* A disabled submit has to look disabled -- the button is the only thing that
   changes while a save is in flight. */
.bb-submit:disabled { opacity: 0.6; cursor: progress; }

.bb-badge {
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    padding: 0.25rem 0.65rem;
    border-radius: var(--bb-r-pill);
    text-transform: uppercase;
    white-space: nowrap;
}
.bb-badge-locked { background: var(--bb-brand-wash-2); color: var(--bb-brand-800); }
.bb-badge-open   { background: var(--bb-surface-3); color: var(--bb-ink-2); }
[data-bs-theme="dark"] .bb-badge-locked { color: var(--bb-brand-200); }


/* ===========================================================================
   7  Data
   ======================================================================== */

.table {
    --tblr-table-bg: transparent;
    color: var(--bb-ink);
}

/* Cell rhythm. Backpack's lists run 10-25 rows of mostly short values, and
   Tabler's default padding spent about 68px per row on a line of text -- barely
   ten rows on a laptop. Set through the variables Tabler reads, with the direct
   selector as the fallback for the cells it composes itself. */
.table {
    --tblr-table-cell-padding-y: 0.65rem;
    --tblr-table-cell-padding-x: 0.85rem;
}
.table > :not(caption) > * > * {
    padding: 0.65rem 0.85rem;
}

/* The header row needs to read as a header. Uppercase micro-text alone was not
   enough separation once the rows tightened -- it blended into the first row. */
.table thead th {
    text-transform: uppercase;
    font-size: var(--bb-fs-micro);
    letter-spacing: var(--bb-track-caps);
    font-weight: 600;
    color: var(--bb-ink-3);
    background: var(--bb-surface-2);
    border-bottom: 1px solid var(--bb-line-strong);
    /* A wrapped two-line heading above a one-line row misaligns the whole
       header band; these labels are short enough to keep on one line. */
    white-space: nowrap;
}

/* Which column is sorted was previously indistinguishable from the rest -- the
   only cue was DataTables' own arrow glyph, in the same grey as every other
   heading. */
.table thead th.sorting_asc,
.table thead th.sorting_desc {
    color: var(--bb-brand-700);
}
[data-bs-theme="dark"] .table thead th.sorting_asc,
[data-bs-theme="dark"] .table thead th.sorting_desc {
    color: var(--bb-brand-200);
}

/* One hairline per row, and none under the last -- so the table ends on the
   card's edge rather than on a rule floating above it. */
.table tbody tr > * {
    border-bottom: 1px solid var(--bb-line);
}
.table tbody tr:last-child > * {
    border-bottom: 0;
}

.table td,
.table th { vertical-align: middle; }
.table.card-table { margin-bottom: 0; }
.table-hover tbody tr:hover > * { background: var(--bb-brand-wash); }

/* A wide list scrolls inside its own box instead of pushing the page sideways.
   Bootstrap already sets overflow-x here; this adds momentum scrolling on touch
   and keeps the rounded card corner from clipping the scrolled content. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
}

.table .btn-sm,
.table .btn.btn-link {
    border-radius: var(--bb-r-1);
    font-weight: 600;
}

/* --- Hand-built tables inside .bb-panel ---------------------------------- */

.bb-panel .bb-table,
.bb-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    color: var(--bb-ink);
}
.bb-table thead th {
    text-align: left;
    text-transform: uppercase;
    font-size: var(--bb-fs-micro);
    letter-spacing: var(--bb-track-caps);
    color: var(--bb-ink-3);
    font-weight: 600;
    padding: 0.8rem 1rem;
    background: var(--bb-surface-2);
    border-bottom: 1px solid var(--bb-line);
}
.bb-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bb-line);
    vertical-align: middle;
}
.bb-table tbody tr:last-child td { border-bottom: 0; }
.bb-table tbody tr:hover td { background: var(--bb-brand-wash); }
.bb-table .bb-strong { font-weight: 600; color: var(--bb-ink); }

.bb-table tfoot td {
    padding: 0.8rem 1rem;
    border-top: 2px solid var(--bb-line-strong);
    font-weight: 600;
    color: var(--bb-ink);
    background: var(--bb-surface-2);
}
/* An `!important` override used to live here, purely to beat a hardcoded
   `border-top:2px solid #e8ebec` inline on the payments totals rows -- a light
   hairline that drew a near-white rule on the dark canvas. Those inline styles
   are gone, so the `.bb-table tfoot td` rule above now applies unopposed and
   the override is no longer needed. */

/* The checkbox column: wide enough for the control, narrow enough that it does
   not steal width from the data. */
.bb-table th.bb-col-check { width: 2.5rem; }


/* --- Fees & payout rates -------------------------------------------------
   Moved here from an inline <style> in paymentSettings.blade.php. A view's own
   style block loads after this file, so nothing here could override it and
   nobody reading the stylesheet could see it existed. */

/* Column headings carry a plain-language gloss under the field name; it must
   opt out of the uppercase treatment the heading itself uses. */
.bb-ratetable th .bb-sub {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Rate inputs are capped so a five-column table of numbers does not stretch
   into a table of text fields. */
.bb-ratetable td input { max-width: 8rem; }
.bb-fill input { max-width: 6rem; }

/* An inactive beach still shows live, editable rates -- only its name is dimmed,
   so the row reads as "not currently trading" rather than "not editable". */
.bb-ratetable tr.is-off td:first-child { opacity: 0.6; }

.bb-fillrow th {
    padding-top: 0.35rem;
    padding-bottom: 0.6rem;
}
.bb-fill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Save bar. Sticky because the table is long enough that the button would
   otherwise sit below the fold on every visit. */
.bb-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-3);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-2);
}
.bb-savebar__note {
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink-3);
}
/* Unsaved edits are easy to walk away from on a table this wide, so the bar
   takes the attention accent -- the same "waiting on a human" reservation the
   Approvals badge makes. */
.bb-savebar.is-dirty { border-color: var(--bb-accent); }
.bb-savebar.is-dirty .bb-savebar__note { color: var(--bb-accent-ink); }

.bb-table .bb-empty,
.bb-table td[colspan] {
    color: var(--bb-ink-3);
}
/* Scoped to .bb-empty on purpose: `td[colspan]` above also matches the expanded
   detail row, which must not be centred or given 2.5rem of padding. */
.bb-table .bb-empty {
    text-align: center;
    padding: 2.5rem 1rem;
}

/* --- Table utilities -----------------------------------------------------
   These replace per-cell inline styles. Analytics alone carried 26 of them,
   and inline rules outrank everything in this file -- which is why the tfoot
   rule below needs `!important` to reach the payments tables at all. Numbers
   right-align in every table here, so it should be a class, not a decision
   repeated on each cell. */

.bb-table th.is-right,
.bb-table td.is-right { text-align: right; }

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.bb-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The magnitude-bar column. A percentage, so the bar keeps its proportion of
   the table as columns are added or removed. */
.bb-table th.bb-col-bar { width: 22%; }

/* --- Row actions --------------------------------------------------------- */

.bb-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--bb-fs-sm);
    font-weight: 600;
    text-decoration: none;
    padding: 0.28rem 0.55rem;
    border-radius: var(--bb-r-1);
    color: var(--bb-brand-700);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--bb-dur) var(--bb-ease),
                color var(--bb-dur) var(--bb-ease);
}
.bb-action:hover { background: var(--bb-brand-wash); color: var(--bb-brand-800); }
.bb-action.is-positive { color: var(--bb-success); }
.bb-action.is-positive:hover { background: var(--bb-success-wash); color: var(--bb-success); }
.bb-action.is-danger { color: var(--bb-danger); }
.bb-action.is-danger:hover { background: var(--bb-danger-wash); color: var(--bb-danger); }
/* Waiting on someone else: shown where an action would be, but inert. */
.bb-action.is-muted { color: var(--bb-ink-3); cursor: default; }
.bb-action.is-muted:hover { background: transparent; color: var(--bb-ink-3); }

/* Approve and Request-deletion post as forms, so the same look has to survive
   on a <button> as on the <a> variants: strip the browser's button chrome. */
button.bb-action {
    background: none;
    border: 0;
    padding: 0.28rem 0.55rem;
    font-family: inherit;
}
[data-bs-theme="dark"] .bb-action { color: var(--bb-brand-200); }
[data-bs-theme="dark"] .bb-action:hover { background: var(--bb-brand-wash-2); color: #CFE0E2; }

/* --- DataTables + pagination --------------------------------------------- */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--bb-r-2);
    border: 1px solid var(--bb-line-strong);
    background: var(--bb-field);
    color: var(--bb-ink);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 0;
    border-color: var(--bb-brand-200);
    box-shadow: var(--bb-focus);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--bb-ink-2); }

.page-link {
    color: var(--bb-brand-700);
    border-radius: var(--bb-r-1);
    margin: 0 2px;
    border-color: transparent;
    background: transparent;
}
.page-link:hover {
    color: var(--bb-brand-800);
    background: var(--bb-brand-wash);
}
.page-item.active .page-link {
    background: var(--bb-brand-800);
    border-color: var(--bb-brand-800);
    color: #ffffff;
}
[data-bs-theme="dark"] .page-link { color: var(--bb-brand-200); }
[data-bs-theme="dark"] .page-item.active .page-link {
    background: var(--bb-brand-700);
    border-color: var(--bb-brand-700);
    color: #ffffff;
}


/* ===========================================================================
   8  Page kit
   ======================================================================== */

.bb-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0;
}
.bb-page-title {
    color: var(--bb-ink);
    font-weight: 700;
    font-size: var(--bb-fs-page);
    letter-spacing: -0.015em;
    margin: 0;
}
.bb-page-sub {
    color: var(--bb-ink-2);
    font-size: 0.92rem;
    margin: 0.35rem 0 0;
    max-width: 78ch;
}
.bb-page-sub b { color: var(--bb-ink); font-weight: 600; }

/* Context line: what the figures below actually cover. Sits under the filter
   controls that set it, so the answer to "what am I looking at" is next to the
   thing that changes it rather than occupying a stat tile. */
.bb-context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink-2);
}
.bb-context b {
    color: var(--bb-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.bb-context__dot { color: var(--bb-ink-3); }

/* --- Stat tiles ---------------------------------------------------------- */

.bb-stat {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
}
.bb-stat-label {
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    text-transform: uppercase;
    color: var(--bb-ink-3);
}
.bb-stat-value {
    font-size: var(--bb-fs-stat);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--bb-ink);
}
.bb-stat-sub,
.bb-stat-note { font-size: var(--bb-fs-sm); color: var(--bb-ink-3); }
.bb-stat-inline {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bb-ink-3);
    margin-left: 0.35rem;
}

/* The one filled tile per view: what BeachBeds actually earned. */
.bb-stat.is-accent {
    background: linear-gradient(150deg, var(--bb-brand-800) 0%, var(--bb-brand-900) 100%);
    border-color: var(--bb-brand-900);
}
.bb-stat.is-accent .bb-stat-label { color: rgba(255, 255, 255, 0.65); }
.bb-stat.is-accent .bb-stat-value { color: #ffffff; }
.bb-stat.is-accent .bb-stat-note,
.bb-stat.is-accent .bb-stat-sub { color: rgba(255, 255, 255, 0.72); }
/* On the dark canvas the filled tile sits too close to the plain ones, so it
   gets a brand edge to keep its job as the single anchor in the row. */
[data-bs-theme="dark"] .bb-stat.is-accent {
    background: linear-gradient(150deg, #0C3038 0%, #072026 100%);
    border-color: var(--bb-brand-700);
}

.bb-splits { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.15rem; }
.bb-split { font-size: var(--bb-fs-sm); color: var(--bb-ink-3); }
.bb-split b { color: var(--bb-ink); font-weight: 600; }

/* --- Filters and quick ranges -------------------------------------------- */

.bb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.bb-filter {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 11rem;
}
.bb-filter label {
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    text-transform: uppercase;
    color: var(--bb-ink-3);
}

.bb-months { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; }
.bb-month-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--bb-r-pill);
    font-size: var(--bb-fs-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--bb-ink-2);
    background: var(--bb-surface);
    border: 1px solid var(--bb-line-strong);
    transition: background-color var(--bb-dur) var(--bb-ease),
                border-color var(--bb-dur) var(--bb-ease),
                color var(--bb-dur) var(--bb-ease);
}
.bb-month-pill:hover {
    border-color: var(--bb-brand-200);
    background: var(--bb-brand-wash);
    color: var(--bb-brand-800);
    text-decoration: none;
}
.bb-month-pill.is-on {
    background: var(--bb-brand-800);
    border-color: var(--bb-brand-800);
    color: #ffffff;
}
[data-bs-theme="dark"] .bb-month-pill:hover { color: var(--bb-brand-200); }
[data-bs-theme="dark"] .bb-month-pill.is-on {
    background: var(--bb-brand-700);
    border-color: var(--bb-brand-700);
}

/* --- Status pills -------------------------------------------------------- */

.bb-pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: var(--bb-r-pill);
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.bb-pill.is-paid    { background: var(--bb-success-wash); color: var(--bb-success); }
.bb-pill.is-partial { background: var(--bb-brand-wash-2); color: var(--bb-brand-800); }
/* Unpaid is money still owed to a beach, so it carries the attention accent. */
.bb-pill.is-unpaid  { background: var(--bb-accent-wash); color: var(--bb-accent-ink); }
[data-bs-theme="dark"] .bb-pill.is-partial { color: var(--bb-brand-200); }

.bb-chip {
    padding: 0.15rem 0.55rem;
    border-radius: var(--bb-r-pill);
    background: var(--bb-brand-wash);
    color: var(--bb-brand-800);
    font-size: 0.7rem;
    font-weight: 600;
}
.bb-chip.is-type { background: var(--bb-brand-800); color: #ffffff; }
/* ink-2 rather than ink-3: this is the one muted label that sits on surface-3,
   the darkest light surface, where ink-3 lands at 4.32:1. */
.bb-chip.is-off  { background: var(--bb-surface-3); color: var(--bb-ink-2); }
[data-bs-theme="dark"] .bb-chip { color: var(--bb-brand-200); }
[data-bs-theme="dark"] .bb-chip.is-type { background: var(--bb-brand-700); color: #ffffff; }

.bb-tag {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: var(--bb-r-1);
    background: var(--bb-brand-wash-2);
    color: var(--bb-brand-800);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}
[data-bs-theme="dark"] .bb-tag { color: var(--bb-brand-200); }

.bb-sub {
    display: block;
    font-size: var(--bb-fs-sm);
    font-weight: 400;
    color: var(--bb-ink-3);
}

/* --- Magnitude bars ------------------------------------------------------
   One measure, one hue: magnitude only, so no legend and no second colour. */

.bb-bar-row { display: flex; align-items: center; gap: 0.6rem; }
.bb-bar-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: var(--bb-r-1);
    background: var(--bb-brand-wash);
    overflow: hidden;
}
.bb-bar {
    display: block;
    height: 100%;
    border-radius: var(--bb-r-1);
    background: var(--bb-brand-700);
    min-width: 0;
}
.bb-bar-value {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
    font-weight: 600;
    color: var(--bb-ink);
    font-size: var(--bb-fs-sm);
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .bb-bar { background: var(--bb-brand-200); }

/* --- Panel headings ------------------------------------------------------
   A .bb-panel that holds more than one thing needs to say which thing it is. */

.bb-panel-head {
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid var(--bb-line);
}
.bb-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bb-ink);
}
.bb-panel-sub {
    margin: 0.15rem 0 0;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink-3);
}
.bb-panel-empty {
    margin: 0;
    padding: 1.75rem 1rem;
    text-align: center;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink-3);
}

/* --- Expandable analytics rows -------------------------------------------
   The period row is the summary; the detail row under it is the breakdown. */

.bb-rowtoggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.bb-rowtoggle.is-flat { cursor: default; padding-left: 1.05rem; }
.bb-rowtoggle:focus-visible {
    outline: 2px solid var(--bb-brand-700);
    outline-offset: 2px;
    border-radius: var(--bb-r-1);
}
.bb-rowtoggle__chevron {
    display: inline-block;
    width: 0.65rem;
    color: var(--bb-ink-3);
    transition: transform var(--bb-dur) var(--bb-ease);
}
.bb-rowtoggle.is-open .bb-rowtoggle__chevron { transform: rotate(90deg); }

.bb-table tbody tr.is-today td { background: var(--bb-brand-wash); }

.bb-table tbody tr.bb-detail td {
    padding: 0.9rem 1rem 1.1rem 2.05rem;
    background: var(--bb-surface-2);
}
.bb-table tbody tr.bb-detail:hover td { background: var(--bb-surface-2); }
.bb-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}
.bb-detail-title {
    margin: 0 0 0.45rem;
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    text-transform: uppercase;
    color: var(--bb-ink-3);
}
.bb-detail-empty {
    margin: 0;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink-3);
}
.bb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bb-chips .bb-chip { font-size: var(--bb-fs-sm); padding: 0.25rem 0.6rem; }
.bb-chips .bb-chip b { font-weight: 700; }
.bb-chips .bb-chip i {
    font-style: normal;
    opacity: 0.65;
    margin-left: 0.2rem;
}

/* One-day picker: narrower than the ranged inputs beside it, since it holds
   half as much. */
.bb-filter--tight { min-width: 8.5rem; }

/* --- Bulk bar and expandable payout rows --------------------------------- */

.bb-bulkbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--bb-r-3);
    background: var(--bb-brand-wash);
    border: 1px solid var(--bb-brand-200);
}
/* brand-200 is a bright hairline against the dark canvas; soften it there. */
[data-bs-theme="dark"] .bb-bulkbar { border-color: var(--bb-brand-wash-2); }

.bb-expand {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.bb-expand:hover { color: var(--bb-brand-700); }
.bb-expand-icon {
    font-size: 0.8rem;
    transition: transform var(--bb-dur) var(--bb-ease);
    color: var(--bb-ink-3);
}
.bb-expand[aria-expanded="true"] .bb-expand-icon {
    transform: rotate(90deg);
    color: var(--bb-brand-700);
}

.bb-lines > td { background: var(--bb-surface-2); padding: 0 !important; }
.bb-lines-wrap { padding: 0.9rem 1.1rem 1rem; }
.bb-linetable { width: 100%; border-collapse: collapse; }
.bb-linetable th {
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    text-transform: uppercase;
    color: var(--bb-ink-3);
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--bb-line);
    white-space: nowrap;
    text-align: left;
}
.bb-linetable td {
    font-size: var(--bb-fs-sm);
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--bb-line);
    color: var(--bb-ink);
}
.bb-linetable tr:last-child td { border-bottom: 0; }
.bb-lines-note { margin: 0.6rem 0 0; font-size: var(--bb-fs-sm); color: var(--bb-ink-3); }

/* --- Subscription plan grid ---------------------------------------------- */

.bb-plangrid {
    display: grid;
    /* The card itself is the app's 343px one. The track is capped there so a wide
       screen adds columns instead of stretching a phone card across the page, and
       min() clamps the floor to the container: a bare minmax(343px, …) keeps the
       track at 343px however narrow the viewport gets, which pushed the grid past
       the edge on phones under ~360px. */
    grid-template-columns: repeat(auto-fill, minmax(min(343px, 100%), 343px));
    justify-content: start;
    gap: 1.5rem;
}
.bb-planitem { display: flex; flex-direction: column; gap: 0.6rem; }
/* A caption under the app card, not a panel of its own: the plan is the card, and
   this is the paperwork behind it. */
.bb-planmeta {
    padding: 0 0.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink-2);
}
.bb-planmeta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.bb-planmeta__beaches { display: flex; gap: 0.4rem; line-height: 1.4; }
.bb-planmeta__label {
    font-size: var(--bb-fs-micro);
    font-weight: 600;
    letter-spacing: var(--bb-track-caps);
    text-transform: uppercase;
    color: var(--bb-ink-3);
    flex: 0 0 auto;
}
.bb-planactions {
    /* The card is content-height now (it is a replica of the app card, which has
       no fixed height), so pin the action row to the bottom to keep every column's
       Edit link on one baseline. */
    margin-top: auto;
    padding-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.bb-planactions__code {
    font-size: 0.7rem;
    color: var(--bb-ink-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Disable-seats calendar ---------------------------------------------- */

.bb-cal-controls {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.bb-control { display: flex; flex-direction: column; gap: 0.4rem; }
.bb-control label {
    font-weight: 500;
    font-size: var(--bb-fs-sm);
    color: var(--bb-ink);
}
.bb-control-inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.bb-control-inline label { margin: 0; }
.bb-control-inline input[type="checkbox"] { width: 18px; height: 18px; }
.bb-cal-input { padding: 0.5rem 0.75rem; font-size: 0.95rem; width: 140px; }
.bb-cal-panel { padding: 1.25rem; }

/* FullCalendar chrome (loaded from CDN by calendar.blade.php). */
.fc { --fc-border-color: var(--bb-line); }
.fc .fc-button-primary {
    background: var(--bb-brand-800);
    border-color: var(--bb-brand-800);
    border-radius: var(--bb-r-2);
    font-weight: 600;
    text-transform: capitalize;
}
.fc .fc-button-primary:hover {
    background: var(--bb-brand-700);
    border-color: var(--bb-brand-700);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--bb-brand-900);
    border-color: var(--bb-brand-900);
}
.fc .fc-button-primary:focus-visible { box-shadow: var(--bb-focus); }
.fc .fc-daygrid-day.fc-day-today { background: var(--bb-brand-wash); }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number { color: var(--bb-ink); text-decoration: none; }
.fc .fc-toolbar-title { color: var(--bb-ink); font-weight: 700; }
[data-bs-theme="dark"] .fc .fc-button-primary {
    background: var(--bb-brand-700);
    border-color: var(--bb-brand-700);
}


/* ===========================================================================
   9  Auth
   ======================================================================== */

.page.page-center {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(0, 86, 98, 0.55), transparent 60%),
        linear-gradient(160deg, var(--bb-brand-800) 0%, #002229 100%);
}

.page-center .navbar-brand {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}
.page-center .navbar-brand .bb-brand-logo {
    height: 30px;
    margin: 0 auto;
}
.page-center .navbar-brand::after {
    content: "Super Admin";
    display: block;
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.page-center .card {
    border: 0;
    border-radius: var(--bb-r-4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
}
.page-center .card .card-body { padding: 2.25rem; }
.page-center .card-title,
.page-center .h2 { color: var(--bb-ink); }
.page-center .btn-primary { width: 100%; }