/* ==========================================================================
   SMA Theme — Design Tokens
   ==========================================================================
   Loaded AFTER the legacy style.css / style-rtl.css (see _styles.blade.php)
   so it wins on source order without needing to touch the legacy files.

   This file is being built incrementally, page by page, per the redesign
   plan. Sections are added in this order:
     1. Fonts (@font-face)
     2. Design tokens (:root custom properties)
     3. Global body-level overrides
     4. Shared shell (header / sidebar / breadcrumb)
     5. Shared components (stat-card, status-pill, data-table-card, ...)
     6. Page-specific overrides
     7. RTL overrides ([dir="rtl"])
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   --------------------------------------------------------------------------
   Poppins is the ONLY font family for the admin panel — self-hosted (no
   Google Fonts CDN dependency) at public/fonts/poppins/. Used for both
   English and Arabic contexts: Poppins has no Arabic glyphs, so Arabic
   text automatically falls through to the fallback stack in --sma-font-main
   below — that's expected, not an error.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   --------------------------------------------------------------------------
   Raw palette values below are sampled from the provided mockups/brand
   deck and are PLACEHOLDERS pending exact hex sign-off from the designer.
   Component/page CSS should always consume the semantic aliases
   (--sma-color-*), never the raw palette tokens directly, so a future
   rebrand only requires editing this block.
   -------------------------------------------------------------------------- */
:root {
    /* Raw brand palette — TODO: confirm exact hex from brand deck */
    --sma-white: #FFFFFF;
    --sma-lime: #D7F205;
    --sma-purple: #8438F2;
    --sma-purple-dark: #6C2BD9;
    --sma-black: #000000;
    --sma-cream: #F5F5F0;
    --sma-cream-dark: #EDEDE4;

    /* Status palette — TODO: confirm exact hex from brand deck */
    --sma-status-success: #2E7D32;
    --sma-status-success-bg: #E4F6E1;
    --sma-status-danger: #C62828;
    --sma-status-danger-bg: #FBE4E4;
    --sma-status-pending: #6C2BD9;
    --sma-status-pending-bg: #EFE3FC;
    --sma-status-info: #1565C0;
    --sma-status-info-bg: #E3EEFB;

    /* Neutrals */
    --sma-gray-900: #1A1A1A;
    --sma-gray-700: #4A4A4A;
    --sma-gray-500: #8A8A8A;
    --sma-gray-300: #D8D8D2;
    --sma-gray-100: #F0F0EB;

    /* Semantic aliases — use these, not raw tokens, in component/page CSS */
    --sma-color-bg-body: var(--sma-cream);
    --sma-color-surface: var(--sma-white);
    --sma-color-primary: var(--sma-purple);
    --sma-color-primary-dark: var(--sma-purple-dark);
    --sma-color-accent: var(--sma-lime);
    --sma-color-text: var(--sma-gray-900);
    --sma-color-text-muted: var(--sma-gray-500);
    --sma-color-border: var(--sma-gray-300);

    /* Typography — Poppins only, everywhere (English and Arabic). Kept as
       one token so every page/component reads the same source of truth. */
    --sma-font-main: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Brand Guidelines typography — default to --sma-font-main so a tenant
       that never touches these renders byte-for-byte as before. Overridden
       per-tenant in layouts/partials/_tenant-theme.blade.php. */
    --sma-font-heading: var(--sma-font-main);
    --sma-font-body: var(--sma-font-main);
    --sma-font-weight-light: 300;
    --sma-font-weight-regular: 400;
    --sma-font-weight-medium: 500;
    --sma-font-weight-semibold: 600;
    --sma-font-weight-bold: 700;

    /* Spacing scale (4px base) */
    --sma-space-1: 4px;
    --sma-space-2: 8px;
    --sma-space-3: 12px;
    --sma-space-4: 16px;
    --sma-space-5: 20px;
    --sma-space-6: 24px;
    --sma-space-8: 32px;

    /* Radii */
    --sma-radius-sm: 8px;
    --sma-radius-md: 12px;
    --sma-radius-lg: 20px;
    --sma-radius-pill: 999px;

    /* Shadows */
    --sma-shadow-card: 0 2px 10px rgba(20, 20, 20, 0.06);
    --sma-shadow-dropdown: 0 8px 24px rgba(20, 20, 20, 0.12);
}

/* --------------------------------------------------------------------------
   3. Global body-level overrides
   --------------------------------------------------------------------------
   Legacy style.css sets `body { font-family: 'Nunito', sans-serif; }` and a
   light gray page background. These rules load after it in the cascade and
   win on source order alone (verify in-browser; add !important only where
   a specific legacy rule is confirmed to fight back).
   -------------------------------------------------------------------------- */
body {
    font-family: var(--sma-font-body);
    background-color: var(--sma-color-bg-body);
    color: var(--sma-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sma-font-heading);
    font-weight: var(--sma-font-weight-bold);
    color: var(--sma-color-text);
}

/* Scope global link colour to content areas only — exclude sidebar/nav so
   sidebar-specific rules below are not overridden by this global selector. */
body>*:not(.sidebar) a,
.main-content>*:not(aside) a {
    color: var(--sma-color-primary);
}

body>*:not(.sidebar) a:hover,
body>*:not(.sidebar) a:focus,
.main-content>*:not(aside) a:hover,
.main-content>*:not(aside) a:focus {
    color: var(--sma-color-primary-dark);
}

/* --------------------------------------------------------------------------
   4. Shared shell — topbar, sidebar, breadcrumb
   --------------------------------------------------------------------------
   The body keeps its existing `layout-dark` class (see _aside/_header
   partials) — we only override the COLORS that class sets, we don't strip
   it, since other `.layout-dark`-scoped rules may carry non-color behavior
   we haven't audited. Selectors below intentionally mirror the legacy
   selectors' specificity so they win purely on source order.
   -------------------------------------------------------------------------- */

/* Topbar: purple, matches mockups. The existing .light/.svg.dark logo
   toggle already shows the white logo in .layout-dark mode, so no markup
   change is needed here for the logo to read correctly against purple. */
.layout-dark .header-top,
.layout-dark .mobile-author-actions.show {
    background-color: var(--sma-color-primary);
}

.header-top .navbar-left form span,
.layout-dark .search-form svg {
    color: rgba(255, 255, 255, 0.75);
}

.layout-dark .sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.layout-dark .nav-author {
    background: var(--sma-cream) !important;
    border-radius: var(--sma-radius-lg) !important;
    padding: var(--sma-space-3) var(--sma-space-4) !important;
}

.layout-dark .nav-author p {
    color: var(--sma-color-text) !important;
}

.layout-dark .nav-author small {
    color: var(--sma-color-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--sma-font-weight-semibold);
}

/* Room between the notification bell and the profile block.

   The unread badge is positioned OUTSIDE the bell icon's own box (it hangs off
   the top-right corner), so with the two items flush against each other the
   badge overlapped the profile card beside it. The gap is measured from the
   badge, not the bell, which is why a padding on the icon alone would not have
   been enough. */
.navbar-right__menu {
    /* style.css already lays this out as a flex row with `margin: 0 -12px`
       and `padding: 20px 12px` on each item — only the gap is added here, so
       that existing rhythm is left intact. */
    gap: var(--sma-space-4);
}

/* The badge overhang: the 12px item padding is measured from the bell, and the
   badge sits outside it, so the bell needs a little more room after it than the
   other items.

   `padding-inline-end`, not `padding-right`: style-rtl.css has no layout rule
   for this menu, so a physical side would stay on the left in Arabic and put
   the gap on the wrong side of the bell. */
.navbar-right__menu .nav-notification {
    padding-inline-end: var(--sma-space-4);
}

/* Override the legacy `.navbar-right__menu .nav-author__info` rule in
   style.css (display:flex; align-items:center), which was written for an
   avatar+text row and makes the role name / access label sit side-by-side
   instead of stacking. */
.nav-author .nav-author__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sma-space-1);
}

.nav-author__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sma-space-2);
    border-radius: var(--sma-radius-md);
    background: var(--sma-color-primary);
    color: var(--sma-white);
    font-weight: var(--sma-font-weight-bold);
    font-size: 13px;
}

/* ── Super-admin nav card: Figma design ──────────────────────────────────
   Cream card with role title, "Global Access" tag, and a purple initials
   badge — replaces the translucent white/avatar look above, scoped to
   .nav-author--brand only so other roles keep the avatar + name card. */
.layout-dark .nav-author.nav-author--brand {
    background: var(--sma-cream) !important;
    padding: 10px 14px !important;
    border-radius: var(--sma-radius-lg) !important;
    box-shadow: var(--sma-shadow-card);
}

.layout-dark .nav-author--brand p,
.layout-dark .nav-author--brand .nav-user-title {
    color: var(--sma-color-text) !important;
}

.layout-dark .nav-author--brand small,
.layout-dark .nav-author--brand .nav-user-subtitle {
    color: var(--sma-color-text-muted) !important;
}

.nav-author--brand .nav-user-title {
    font-size: 15px;
    font-weight: var(--sma-font-weight-bold);
}

.nav-author--brand .nav-user-subtitle {
    display: block;
    font-size: 11px;
    font-weight: var(--sma-font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-author--brand .nav-user-badge {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sma-radius-md);
    background: var(--sma-color-primary);
    color: var(--sma-white) !important;
    font-weight: var(--sma-font-weight-bold);
    font-size: 14px;
}

@media only screen and (max-width: 767px) {
    .layout-dark .nav-author.nav-author--brand {
        padding: 6px 10px !important;
    }

    .nav-author--brand .nav-user-badge {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .nav-author--brand .nav-user-title {
        font-size: 12px;
    }

    .nav-author--brand .nav-user-subtitle {
        font-size: 9px;
    }
}

/* ── Sidebar: Figma design ─────────────────────────────────────────────────
   Light-gray background, dark text & icons, lime active pill (rounded-rect).
   ─────────────────────────────────────────────────────────────────────── */
.layout-dark .sidebar {
    background: #EFEFEF !important;
    border-right: none !important;
}

.layout-dark .sidebar .sidebar__menu-group ul li.menu-title span {
    color: var(--sma-gray-500);
}

/* Default nav link — dark text, dark icon, slight rounded corners */
.layout-dark .sidebar .sidebar__menu-group ul li a {
    color: var(--sma-gray-700) !important;
    border-radius: 10px !important;
    font-weight: 500;
}

.layout-dark .sidebar .sidebar__menu-group ul li a .toggle-icon,
.layout-dark .sidebar .sidebar__menu-group ul li a .nav-icon {
    color: var(--sma-gray-700) !important;
}

/* Active / hover — lime background, dark text & icon, 10px rounded corners,
   purple left-border accent line */
.layout-dark .sidebar .sidebar__menu-group ul li a:hover,
.layout-dark .sidebar .sidebar__menu-group ul li a.active {
    background-color: var(--sma-lime) !important;
    color: var(--sma-gray-900) !important;
    border-radius: 10px !important;
    border-left: 4px solid var(--sma-purple) !important;
    font-weight: 600;
}

.layout-dark .sidebar .sidebar__menu-group ul li a:hover .toggle-icon,
.layout-dark .sidebar .sidebar__menu-group ul li a:hover .nav-icon,
.layout-dark .sidebar .sidebar__menu-group ul li a.active .toggle-icon,
.layout-dark .sidebar .sidebar__menu-group ul li a.active .nav-icon {
    color: var(--sma-gray-900) !important;
}

/* Sub-menu child links — keep light gray bg, slightly indented */
.layout-dark .sidebar .sidebar__menu-group ul li ul li>a {
    color: var(--sma-gray-700) !important;
    background: transparent !important;
    padding-left: var(--sma-space-6) !important;
    font-weight: 400;
}

.layout-dark .sidebar .sidebar__menu-group ul li ul li>a:hover,
.layout-dark .sidebar .sidebar__menu-group ul li ul li>a.active {
    background-color: var(--sma-lime) !important;
    color: var(--sma-gray-900) !important;
    border-left: none !important;
}

/* Collapsed-sidebar flyout submenu (e.g. "All Members" popping out from the
   Members icon) — legacy style.css gives this its own dark navy background
   independent of the sidebar rules above, so it needs its own override. */
.layout-dark .sidebar.collapsed .sidebar__menu-group .has-child ul {
    background: var(--sma-color-surface) !important;
    box-shadow: var(--sma-shadow-dropdown) !important;
}

/* Nav link sizing & spacing — margin gives breathing room for active bg */
.sidebar__menu-group ul.sidebar_nav li>a {
    margin: 2px var(--sma-space-3);
    padding-left: var(--sma-space-4);
    padding-right: var(--sma-space-4);
    width: calc(100% - (var(--sma-space-3) * 2));
    border-radius: 10px;
}

/* ── Mobile drawer fixes ───────────────────────────────────────────────────
   Two pre-existing gaps in style.css's mobile sidebar, both visible once the
   drawer is opened on a phone-width screen:

   1. style.css moves the sidebar's own `top` from 74px to 56px at this
      breakpoint but never adjusts its `height: calc(100% - 74px)` to match,
      so the drawer fell 18px short of the viewport's bottom edge, exposing
      whatever page content sat behind it.
   2. .overlay-dark-sidebar (the dark backdrop main.js toggles behind the
      open drawer) has no background color and never gets opacity: 1 on
      .show — toggling the class changed its z-index but never actually
      made it visible, so the page content beside the drawer showed through
      completely undimmed instead of being covered by a scrim. */
@media only screen and (max-width: 767px) {
    .sidebar {
        height: calc(100% - 56px);
    }
}

.overlay-dark-sidebar {
    background: rgba(20, 19, 42, 0.5);
}

@media only screen and (max-width: 991px) {
    .overlay-dark-sidebar.show {
        opacity: 1;
    }
}

/* ── Sidebar brand strip ──────────────────────────────────────────────────
   The header carries the fixed SMA mark everywhere (see _header.blade.php);
   the active organization/branch's own logo lives here instead, pinned
   above the sidebar nav.

   Deliberately NOT a child of <aside class="sidebar"> (see
   _sidebar-brand.blade.php) — mCustomScrollbar (main.js) wraps every child
   of .sidebar into its own scroll container, and a separate "scroll the
   active nav link to the top" script (main.js) then shifts that container
   by the active link's offsetTop on every load. With the brand block living
   inside .sidebar, that shift routinely scrolled it out of view above the
   fold. Living outside .sidebar as its own fixed strip keeps it immune to
   that scroll, at the cost of needing to track .sidebar's own position
   (top/width/collapsed state) by hand below. */
.sidebar-brand {
    position: fixed;
    top: 74px;
    left: 0;
    width: 280px;
    z-index: 1000;
    /* Matches .layout-dark .sidebar's background so the strip reads as
       part of the sidebar rather than a floating overlay. */
    background: #EFEFEF;
    display: flex;
    align-items: center;
    gap: var(--sma-space-3);
    /* Left/right padding matches the nav links' combined margin + padding
       (space-3 + space-4) below, so the logo and nav icons share one
       vertical line instead of the logo sitting further in/out. */
    padding: var(--sma-space-4) calc(var(--sma-space-3) + var(--sma-space-4)) var(--sma-space-3);
    border-bottom: 1px solid var(--sma-gray-300);
    transition: all 0.3s ease;
}

@media only screen and (max-width: 767px) {
    .sidebar-brand {
        top: 56px;
    }
}

.sidebar-brand__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sma-radius-md);
    background: var(--sma-color-primary);
    color: var(--sma-white);
    font-weight: var(--sma-font-weight-bold);
    font-size: 16px;
    overflow: hidden;
}

.sidebar-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Wraps org name + active branch as two stacked lines — present whether or
   not this org can switch branches (the else-branch in
   _sidebar-brand.blade.php uses it too), so it has to work unstyled by the
   dropdown-specific rules below as well. */
.sidebar-brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-brand__name {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand__branch {
    color: var(--sma-color-text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .sidebar-brand sits after <aside class="sidebar"> in the DOM (see
   app.blade.php) purely so this sibling selector can mirror the sidebar's
   own collapsed width/transition — it's still pinned to the top via
   position: fixed regardless of DOM order. */
.sidebar.collapsed ~ .sidebar-brand {
    width: 76px;
    padding: var(--sma-space-4) 0 var(--sma-space-3);
    justify-content: center;
}

/* Collapsed sidebar is icon-only everywhere else (see .sidebar.collapsed
   .menu-text) — no room for two lines of text or a branch menu, so the
   strip collapses to just the logo, same as the rest of the nav. */
.sidebar.collapsed ~ .sidebar-brand .sidebar-brand__text,
.sidebar.collapsed ~ .sidebar-brand .sidebar-brand__form {
    display: none;
}

/* Below 1150px, style.css slides the collapsed sidebar fully off-canvas
   (.sidebar.collapsed { left: -76px }) rather than leaving its 76px icon
   rail on screen, and .contents.expanded reclaims that width, assuming
   nothing is left behind. .sidebar-brand is a separate fixed element (see
   the comment above) so it doesn't inherit that offset automatically —
   without this, it stayed pinned at left: 0 on phones/tablets and sat on
   top of the page content underneath it. */
@media (max-width: 1150px) {
    .sidebar.collapsed ~ .sidebar-brand {
        left: -76px;
    }
}

/* Reserve the strip's height at the top of the sidebar so its own (now
   scroll-wrapped) content starts below the fixed brand instead of under it.
   Overrides style.css's .sidebar/.sidebar.collapsed { padding: 0px }.

   Gated on .has-sidebar-brand, which the layout sets from the SAME condition
   the brand partial renders under (tenant('id')). The strip exists only on a
   tenant domain; the super-admin panel has no organization logo or branch
   switcher to show, so reserving its height there left an empty 70px band
   above the nav. Keyed off a body class rather than a media/route check so the
   markup and the space it occupies can never disagree. */
body.has-sidebar-brand .sidebar,
body.has-sidebar-brand .sidebar.collapsed {
    padding-top: 70px;
}

/* Breadcrumb / page header — used on nearly every page */
.breadcrumb-title h4 {
    font-weight: var(--sma-font-weight-bold);
    color: var(--sma-color-text);
}

.breadcrumb-main .btn-squared.btn-white {
    background: var(--sma-color-surface);
    box-shadow: var(--sma-shadow-card);
}

.breadcrumb-action .action-btn .btn-primary,
.button-group .btn-primary {
    background-color: var(--sma-color-accent) !important;
    border-color: var(--sma-color-accent) !important;
    color: var(--sma-gray-900) !important;
    font-weight: var(--sma-font-weight-semibold);
    border-radius: var(--sma-radius-pill);
}

/* No hover color change — button stays lime */
.breadcrumb-action .action-btn .btn-primary:hover,
.button-group .btn-primary:hover,
.breadcrumb-action .action-btn .btn-primary:focus,
.button-group .btn-primary:focus {
    background-color: var(--sma-color-accent) !important;
    border-color: var(--sma-color-accent) !important;
    color: var(--sma-gray-900) !important;
    box-shadow: none;
    outline: none;
}

/* "Add New" buttons: lime bg, dark navy text, Figma design. Scoped to
   .btn-add (not just .btn-primary) so it doesn't repaint unrelated purple
   actions like "Sent Expiration Mail" that share .btn-primary but aren't
   an "Add New" action. Overrides the purple rule above via higher
   specificity (adds the .btn-add class to the selector). */
.breadcrumb-action .action-btn .btn-primary.btn-add {
    background-color: var(--sma-lime) !important;
    border-color: var(--sma-lime) !important;
    color: var(--sma-gray-900) !important;
    font-weight: var(--sma-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 14px 24px !important;
    font-size: 14px;
    border-radius: var(--sma-radius-md) !important;
    box-shadow: var(--sma-shadow-card);
}

.breadcrumb-action .action-btn .btn-primary.btn-add i {
    /* Legacy style.css sets .btn-add i { color: #fff } directly on the
       icon (not inherited from the button), so it must be overridden here
       explicitly rather than relying on the parent's color. */
    color: var(--sma-gray-900) !important;
    margin-right: 8px;
}

.breadcrumb-action .action-btn .btn-primary.btn-add:hover,
.breadcrumb-action .action-btn .btn-primary.btn-add:focus {
    background-color: var(--sma-lime) !important;
    border-color: var(--sma-lime) !important;
    color: var(--sma-gray-900) !important;
    box-shadow: none;
    outline: none;
}

/* Secondary header actions ("Register Guardian", "Import Members"): same
   legacy style.css .btn-add i { color: #fff } problem as the primary "Add
   New" button above, but here the button background is white/transparent
   (.btn-outline-primary), so a forced-white icon is invisible against it —
   reads as a blank/broken glyph. currentColor (not a hardcoded purple) so
   it always tracks whatever text color the outline button actually has. */
.breadcrumb-action .action-btn .btn-outline-primary.btn-add i {
    color: currentColor !important;
    margin-right: 6px;
}

/* Status pills — reuses the EXISTING class hooks emitted server-side
   (UserStatus::getLabelHtml(), DataTable editColumn closures, etc.), only
   the color values are remapped here. No PHP/Blade changes required. */
.color-success {
    color: var(--sma-status-success);
}

.bg-opacity-success {
    background: var(--sma-status-success-bg);
}

.color-danger {
    color: var(--sma-status-danger);
}

.bg-opacity-danger {
    background: var(--sma-status-danger-bg);
}

.color-warning {
    color: var(--sma-status-pending);
}

.bg-opacity-warning {
    background: var(--sma-status-pending-bg);
}

.color-info {
    color: var(--sma-status-info);
}

.bg-opacity-info {
    background: var(--sma-status-info-bg);
}

/* ── Status badge inside tables ─────────────────────────────────────────── */
.userDatatable-content-status {
    display: inline-block;
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
    font-size: 12px;
    padding: 4px 14px;
    letter-spacing: 0.02em;
    /* A pill that wraps stops looking like a pill — the rounded ends split
       across two lines and the row grows. Labels are kept short server-side;
       this is the guarantee that a long one degrades by widening its column
       rather than by breaking in half. */
    white-space: nowrap;
}

/* ── Organizations → Setup column ───────────────────────────────────────
   Holds a status pill and (when setup failed) a Retry button. Flex rather
   than inline text so the two sit on one baseline with a real gap, and the
   cell asks for enough width that neither is squeezed into wrapping.
   ──────────────────────────────────────────────────────────────────────── */
.sma-setup-cell {
    display: flex;
    align-items: center;
    gap: var(--sma-space-2);
    white-space: nowrap;
}

/* Class comes from the DataTable column definition (addClass), so it lands on
   the header and every cell without depending on column position. */
.sma-setup-col {
    min-width: 170px;
}

/* ── Active organization / branch switcher (sidebar brand strip) ─────────
   FR-SMA-006: which organization and branch a session is operating in has
   to be visible at all times, not only on the dashboard — impersonated
   support sessions are exactly where operating under the wrong one is most
   likely and most expensive. Previously duplicated as a header pill; that's
   been removed, so .sidebar-brand (above) is the only place this lives now.

   Branch switcher menu — used by the sidebar brand strip (see
   .sidebar-brand__dropdown below), not this header indicator, which is a
   static label only. Not a native <select>: that popup can't be restyled to
   match the app (no shared radius/shadow/hover states with the rest of the
   UI), so branch options render as their own menu instead. Hover/focus-within
   reveal (not click) matches how the header's other menus — notifications,
   avatar — already open, via .dropdown-custom:hover in style.css. */
.sma-scope-dropdown {
    position: relative;
    display: inline-flex;
}

.sma-scope-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--sma-color-primary);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--sma-font-weight-medium);
    cursor: pointer;
}

.sma-scope-trigger:focus-visible {
    outline: 2px solid var(--sma-color-primary);
    outline-offset: 2px;
    border-radius: var(--sma-radius-sm);
}

.sma-scope-chevron {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.2s ease;
}

.sma-scope-dropdown:hover .sma-scope-chevron,
.sma-scope-dropdown:focus-within .sma-scope-chevron {
    transform: rotate(225deg);
    margin-top: 3px;
}

.sma-scope-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin-top: var(--sma-space-2);
    padding: var(--sma-space-2);
    background: var(--sma-color-surface);
    border-radius: var(--sma-radius-md);
    box-shadow: var(--sma-shadow-dropdown);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Bridges the gap between trigger and menu so the hover chain survives the
   mouse crossing it (mirrors .dropdown-custom .dropdown-wrapper:before). */
.sma-scope-menu:before {
    content: '';
    position: absolute;
    top: calc(var(--sma-space-2) * -1);
    left: 0;
    width: 100%;
    height: var(--sma-space-2);
}

.sma-scope-dropdown:hover .sma-scope-menu,
.sma-scope-dropdown:focus-within .sma-scope-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sma-scope-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sma-space-3);
    width: 100%;
    border: 0;
    background: none;
    padding: 8px var(--sma-space-3);
    border-radius: var(--sma-radius-sm);
    text-align: left;
    white-space: nowrap;
    font-size: 13px;
    color: var(--sma-color-text);
    cursor: pointer;
}

.sma-scope-option:hover,
.sma-scope-option:focus-visible {
    background: var(--sma-color-accent);
    color: var(--sma-gray-900);
    outline: none;
}

.sma-scope-option.is-active {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-primary);
}

.sma-scope-option.is-active:hover,
.sma-scope-option.is-active:focus-visible {
    color: var(--sma-gray-900);
}

.sma-scope-check {
    color: inherit;
    font-weight: var(--sma-font-weight-bold);
}

/* ── Sidebar brand strip's branch switcher ────────────────────────────────
   Reuses .sma-scope-dropdown/.sma-scope-trigger/.sma-scope-menu (the header
   branch indicator, above) for the open/close and menu-card mechanics, but
   those size themselves to a compact inline pill for the header — these
   overrides (declared after the base rules so they win at equal
   specificity) adapt the same trigger/menu to fill the sidebar row instead. */
.sidebar-brand__form {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.sidebar-brand__dropdown {
    display: flex;
    width: 100%;
}

.sidebar-brand__trigger {
    width: 100%;
    justify-content: space-between;
    color: inherit;
    font-weight: inherit;
}

.sidebar-brand__trigger .sma-scope-chevron {
    flex-shrink: 0;
    margin-left: var(--sma-space-2);
}

/* The switcher menu inside the 280px sidebar strip.
   Pinned to the trigger's left edge and allowed to grow to the right rather
   than being stretched to the trigger's exact width (left:0 + right:0). Branch
   names are user-supplied and routinely longer than the strip, so a
   trigger-width menu forced each option to wrap or spill past its own rounded
   corner — which is what made this read as a broken overlay.

   max-width keeps a very long name from running off-screen; the option labels
   ellipsize inside it instead. */
.sidebar-brand__dropdown .sma-scope-menu {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(340px, calc(100vw - 2 * var(--sma-space-4)));
}

/* Long branch names truncate rather than wrapping. The option is a flex row
   (label + checkmark), so ellipsis has to go on the flex ITEM — text-overflow
   on the flex container itself does nothing. min-width:0 is what lets the
   label shrink below its content size at all.

   The check stays pinned right at its natural size, so it never gets truncated
   along with the name it is marking. */
.sidebar-brand__dropdown .sma-scope-option {
    overflow: hidden;
}

.sma-scope-label {
    /* min-width:0 is what allows a flex item to shrink below its content
       width; without it the label refuses to truncate and pushes the check
       out of the menu instead. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand__dropdown .sma-scope-option > .sma-scope-check {
    flex: 0 0 auto;
}

/* ── Accordion child cards (guardian registration) ───────────────────────
   Each child is an x-form-section card whose header collapses its body. A
   collapsed card still shows position, name and running total, so a long
   family stays scannable.
   ──────────────────────────────────────────────────────────────────────── */
.sma-accordion-head {
    display: inline-flex;
    align-items: center;
    gap: var(--sma-space-2);
    cursor: pointer;
    user-select: none;
}

.sma-accordion-head:focus-visible {
    outline: 2px solid var(--sma-color-primary);
    outline-offset: 3px;
    border-radius: var(--sma-radius-sm);
}

.sma-accordion-head__chevron {
    transition: transform 0.18s ease;
    color: var(--sma-color-primary);
}

.sma-accordion--collapsed .sma-accordion-head__chevron {
    transform: rotate(-90deg);
}

/* The identity of a collapsed card — muted so it reads as metadata, not as a
   second heading competing with the title. */
.sma-accordion-head__meta {
    font-size: 13px;
    font-weight: var(--sma-font-weight-medium);
    color: var(--sma-color-text-muted);
    letter-spacing: 0.01em;
}

/* ── Overall payment summary (2+ children) ───────────────────────────────── */
.sma-overall-summary td {
    padding: var(--sma-space-2) 0;
    border: 0;
    font-size: 14px;
}

/* Separates the per-child lines from the totals that follow. */
.sma-overall-summary tbody + tbody {
    border-top: 1px solid var(--sma-color-border);
}

.sma-overall-summary__total td {
    border-top: 1px solid var(--sma-color-border);
    font-weight: var(--sma-font-weight-bold);
    font-size: 15px;
    color: var(--sma-color-text);
}

/* ── Training sessions cell (Memberships list) ───────────────────────────
   A membership can carry several sessions. They used to render as a
   bootstrap .list-group, which reads as static text and gave no hint that a
   session can be opened. Pills instead: neutral when the viewer only has read
   access, purple and interactive when they can open it.
   ──────────────────────────────────────────────────────────────────────── */
.sma-session-cell {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sma-space-2);
    align-items: center;
}

.sma-session-badge {
    display: inline-block;
    border-radius: var(--sma-radius-pill);
    font-size: 12px;
    font-weight: var(--sma-font-weight-semibold);
    letter-spacing: 0.02em;
    padding: 4px 12px;
    /* Same reasoning as the status pills: a wrapped pill stops looking like a
       pill and the row grows. */
    white-space: nowrap;
    background: var(--sma-gray-100);
    color: var(--sma-color-text-muted);
    border: 1px solid transparent;
}

/* The affordance: only sessions the viewer can actually open look openable. */
a.sma-session-badge--link {
    background: var(--sma-status-pending-bg);
    color: var(--sma-color-primary) !important;
    border-color: var(--sma-color-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

a.sma-session-badge--link:hover,
a.sma-session-badge--link:focus {
    background: var(--sma-color-primary);
    color: var(--sma-white) !important;
    text-decoration: none;
}

/* ── In-row action buttons — outlined purple pill ────────────────────────
   Impersonate renders as class="btn btn-xs btn-outline-success [disabled]",
   the Organizations Retry button as "btn btn-xs btn-outline-primary". Both are
   overridden to the design system instead of Bootstrap's green and blue, so
   two buttons sitting in the same row don't arrive in two different palettes.
   Scoped to table cells to avoid leaking to other pages.
   ──────────────────────────────────────────────────────────────────────── */
table.dataTable td .btn-outline-success,
table.dataTable td a.btn-outline-success,
table.dataTable td .btn-outline-primary,
table.dataTable td button.btn-outline-primary {
    display: inline-block;
    border-radius: var(--sma-radius-pill) !important;
    border: 1.5px solid var(--sma-purple) !important;
    background-color: transparent !important;
    color: var(--sma-purple) !important;
    font-size: 11.5px !important;
    font-weight: var(--sma-font-weight-semibold) !important;
    padding: 4px 14px !important;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    letter-spacing: 0.02em;
    box-shadow: none !important;
}

table.dataTable td .btn-outline-success:hover,
table.dataTable td a.btn-outline-success:hover,
table.dataTable td .btn-outline-primary:hover,
table.dataTable td button.btn-outline-primary:hover {
    background-color: var(--sma-purple) !important;
    color: var(--sma-white) !important;
    border-color: var(--sma-purple) !important;
    text-decoration: none;
}

/* Disabled state — muted, no pointer */
table.dataTable td .btn-outline-success.disabled,
table.dataTable td a.btn-outline-success.disabled,
table.dataTable td .btn-outline-primary.disabled,
table.dataTable td button.btn-outline-primary.disabled {
    border-color: var(--sma-gray-300) !important;
    color: var(--sma-gray-500) !important;
    background-color: transparent !important;
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── DataTable wrapper: no heavy card, blends into cream page bg ─────────── */
.dataTables_wrapper {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ── Top controls row layout ─────────────────────────────────────────────
   DataTables renders: .dataTables_length (left) and .dataTables_filter (right)
   inside .dataTables_wrapper > div.row (or direct divs depending on Bootstrap)
   ──────────────────────────────────────────────────────────────────────── */
.dataTables_wrapper .row:first-child,
.dataTables_wrapper>.dataTables_length,
.dataTables_wrapper>.dataTables_filter {
    margin-bottom: 14px;
}

/* ── "Show N entries" length control ──────────────────────────────────── */
.dataTables_wrapper .dataTables_length label {
    font-size: 13px;
    color: var(--sma-gray-700);
    font-weight: var(--sma-font-weight-regular);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

/* Compact rounded select — only the box, no label conflict */
.dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
    border: 1.5px solid var(--sma-gray-300);
    background-color: var(--sma-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding: 5px 28px 5px 10px;
    font-size: 13px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-gray-900);
    outline: none;
    min-width: 70px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--sma-purple);
    outline: none;
}

/* ── Search / filter control ─────────────────────────────────────────────
   DataTables wraps the input in: <label>Search: <input /></label>
   We zero-out the label font so "Search:" text disappears, then restore
   the input font-size so the input itself renders normally.
   ──────────────────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter label {
    font-size: 0;
    /* hides "Search:" text node */
    color: transparent;
    display: flex;
    align-items: center;
    margin: 0;
    justify-content: flex-end;
}

/* Search input — pill shape, icon embedded, white bg */
.dataTables_wrapper .dataTables_filter input[type="search"] {
    font-size: 13px;
    /* restore input font */
    color: var(--sma-gray-700);
    border-radius: 999px;
    border: 1.5px solid var(--sma-gray-300);
    background-color: var(--sma-white);
    padding: 7px 16px 7px 38px;
    width: 220px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
    color: var(--sma-gray-500);
    font-size: 13px;
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: var(--sma-purple);
    box-shadow: 0 0 0 3px rgba(132, 56, 242, 0.08);
    outline: none;
}

/* ── Table itself ───────────────────────────────────────────────────────── */
table.dataTable {
    background: var(--sma-white);
    border-radius: var(--sma-radius-md);
    /* NOT overflow:hidden. It was here to clip the table's own corners to the
       border-radius, but it also clipped row action dropdowns at the table
       edge — the menu's lower half was cut off and unclickable. The corners are
       rounded on the first/last cells instead, which does not create a
       clipping box. */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* The rounding overflow:hidden used to provide, without the clipping. */
table.dataTable thead tr:first-child th:first-child {
    border-top-left-radius: var(--sma-radius-md);
}

table.dataTable thead tr:first-child th:last-child {
    border-top-right-radius: var(--sma-radius-md);
}

table.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--sma-radius-md);
}

table.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--sma-radius-md);
}

/* Header: cream/light bg, dark gray text, uppercase small */
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--sma-cream-dark) !important;
    color: var(--sma-gray-700) !important;
    font-weight: var(--sma-font-weight-semibold) !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--sma-gray-300) !important;
    border-top: none !important;
    white-space: nowrap;
}

/* Sorting arrow color */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--sma-gray-500) !important;
}

/* Body rows */
table.dataTable tbody tr {
    background: var(--sma-white);
    transition: background 0.12s;
}

table.dataTable tbody tr:hover>* {
    background-color: var(--sma-cream) !important;
}

table.dataTable tbody td {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
    color: var(--sma-gray-700);
    border-bottom: 1px solid var(--sma-gray-100) !important;
    border-top: none !important;
    vertical-align: middle !important;
}

/* First column: name/primary field gets slightly bolder */
table.dataTable tbody td:first-child {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-gray-900);
}

table.dataTable.table-borderless td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--sma-gray-100) !important;
}

/* ── Bottom row: "Showing X of Y entries" + pagination ─────────────────── */
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: var(--sma-gray-500);
    padding-top: 16px;
    padding-bottom: 4px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
    padding-bottom: 4px;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 3px;
    margin: 0;
    align-items: center;
}

/* All page buttons: borderless, small, pill */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    border-radius: var(--sma-radius-pill) !important;
    border: none !important;
    background: transparent !important;
    color: var(--sma-gray-700) !important;
    font-size: 13px;
    font-weight: var(--sma-font-weight-medium);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
    background: var(--sma-gray-100) !important;
    color: var(--sma-gray-900) !important;
}

/* Active page: purple filled pill */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background-color: var(--sma-purple) !important;
    color: var(--sma-white) !important;
    border-radius: var(--sma-radius-pill) !important;
    font-weight: var(--sma-font-weight-semibold) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
    opacity: 0.35;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Shared components
   -------------------------------------------------------------------------- */

/* --- <x-stat-card> / <x-stat-card-wide> ------------------------------- */
.sma-stat-card {
    display: block;
    position: relative;
    background: var(--sma-color-surface);
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-card);
    padding: var(--sma-space-5);
    text-decoration: none;
    color: var(--sma-color-text);
}

a.sma-stat-card:hover {
    color: var(--sma-color-text);
    box-shadow: var(--sma-shadow-dropdown);
}

.sma-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--sma-radius-md);
    color: var(--sma-color-primary);
    background: var(--sma-status-pending-bg);
    margin-bottom: var(--sma-space-3);
}

.sma-stat-card__icon--success {
    background: var(--sma-status-success-bg);
    color: var(--sma-status-success);
}

.sma-stat-card__icon--danger {
    background: var(--sma-status-danger-bg);
    color: var(--sma-status-danger);
}

.sma-stat-card__icon--info {
    background: var(--sma-status-info-bg);
    color: var(--sma-status-info);
}

.sma-stat-card__icon--accent {
    background: var(--sma-color-accent);
    color: var(--sma-gray-900);
}

.sma-stat-card__icon--warning {
    background: var(--sma-status-pending-bg);
    color: var(--sma-status-pending);
}

.sma-stat-card__icon--secondary {
    background: var(--sma-status-info-bg);
    color: var(--sma-status-info);
}

.sma-stat-card__icon--dark {
    background: var(--sma-gray-900);
    color: var(--sma-white);
}

.sma-stat-card__delta {
    position: absolute;
    top: var(--sma-space-5);
    right: var(--sma-space-5);
    font-size: 12px;
    font-weight: var(--sma-font-weight-semibold);
    padding: 2px 10px;
    border-radius: var(--sma-radius-pill);
    background: var(--sma-status-pending-bg);
    color: var(--sma-status-pending);
}

.sma-stat-card__delta--success {
    background: var(--sma-status-success-bg);
    color: var(--sma-status-success);
}

.sma-stat-card__delta--danger {
    background: var(--sma-status-danger-bg);
    color: var(--sma-status-danger);
}

.sma-stat-card__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sma-color-text-muted);
    margin-bottom: var(--sma-space-1);
}

.sma-stat-card__value {
    font-size: 28px;
    font-weight: var(--sma-font-weight-bold);
    line-height: 1.2;
}

.sma-stat-card-wide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sma-color-primary);
    background-image: linear-gradient(135deg, var(--sma-purple) 0%, var(--sma-purple-dark) 100%);
    border-radius: var(--sma-radius-lg);
    padding: var(--sma-space-6);
    color: var(--sma-white);
}

.sma-stat-card-wide__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.sma-stat-card-wide__value {
    font-size: 30px;
    font-weight: var(--sma-font-weight-bold);
    margin: var(--sma-space-1) 0 var(--sma-space-4);
}

.sma-stat-card-wide__cta {
    background: var(--sma-color-accent);
    color: var(--sma-gray-900);
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
    padding: 8px 20px;
    border: none;
}

.sma-stat-card-wide__cta:hover {
    background: var(--sma-white);
    color: var(--sma-gray-900);
}

.sma-stat-card-wide__icon {
    font-size: 40px;
    opacity: 0.25;
}

/* --- <x-data-table-card> ------------------------------------------------ */
.sma-data-table-card {
    border-radius: var(--sma-radius-lg);
    border: none;
    box-shadow: var(--sma-shadow-card);
}

.sma-data-table-card__header {
    background: transparent;
    border-bottom: 1px solid var(--sma-gray-100);
    padding: var(--sma-space-5);
}

.sma-data-table-card__title {
    font-weight: var(--sma-font-weight-bold);
}

/*
   Row action menus must not be clipped by the scroll container.

   .table-responsive is overflow-x:auto so wide tables scroll — but that also
   clips anything overflowing it, and the last item of a row's action dropdown
   was cut off and unclickable.

   `overflow: visible` rather than data-boundary="window" on the toggle: that
   let Bootstrap reposition the menu against the viewport, so rows near the
   bottom flipped it upward and away from the row it belonged to.

   Horizontal scrolling still has to work — a wide table (Members grew a Branch
   column) otherwise spills out of its card.

   `overflow-x: auto` with `overflow-y: visible` is NOT a usable pair: the
   visible axis computes back to auto, so the menu would be clipped vertically
   again. Instead the box is given room to clip INTO — generous bottom padding
   pulled back by an equal negative margin. The scroll container is then taller
   than its rows by the height of a dropdown, so the menu falls inside the
   clipping box rather than through it, while the layout is unchanged and
   horizontal scrolling keeps working.
*/
.sma-data-table-card .table-responsive,
.dataTables_wrapper .table-responsive {
    overflow-x: auto;
}

/*
   NOTE: no vertical scroll container here on purpose.

   Confining the rows to their own scrollable box (max-height + overflow-y)
   would re-clip the row action menus — the exact problem the bottom padding
   above exists to solve, since overflow cannot be freed on one axis alone.
   Row count is bounded by the table's own "Show N entries" control instead,
   and the page scrolls vertically as usual.
*/

/* The padded strip above extends over the length/pagination row that follows
   it, which would otherwise sit underneath and be unclickable. */
.dataTables_wrapper .row:last-child,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    position: relative;
    z-index: 1;
}

/*
   ...and stacked above the rows below it.

   Freeing the overflow let the menu render, but table cells create their own
   stacking contexts in row order, so a menu opened on one row was painted
   underneath the rows following it — visible, but with its lower half
   unclickable.

   The open row is lifted as a whole: raising only .dropdown-menu is not enough
   when the ancestor <td> is what is being stacked beneath the next <tr>.
*/
.sma-data-table-card table tr:has(.dropdown-menu.show),
.sma-data-table-card table tr.sma-row-menu-open,
.dataTables_wrapper table tr:has(.dropdown-menu.show),
.dataTables_wrapper table tr.sma-row-menu-open {
    position: relative;
    z-index: 1030;
}

.sma-data-table-card .dropdown-menu.show,
.dataTables_wrapper .dropdown-menu.show {
    z-index: 1031;
}


/* --- <x-form-section> ---------------------------------------------------- */
.sma-form-section {
    border-radius: var(--sma-radius-lg);
    border: none;
    box-shadow: var(--sma-shadow-card);
}

.sma-form-section__header {
    background: transparent;
    border-bottom: 1px solid var(--sma-gray-100);
}

.sma-form-section__title {
    color: var(--sma-color-primary);
    font-weight: var(--sma-font-weight-bold);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.03em;
}

.sma-form-section .form-control,
.sma-form-section select.form-control {
    background-color: var(--sma-cream);
    border: 1px solid var(--sma-color-border);
    border-radius: var(--sma-radius-md);
}

/* --- <x-tab-bar> / <x-tab-bar-item> -------------------------------------- */
.sma-tab-bar--horizontal .sma-tab-bar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sma-gray-100);
    gap: var(--sma-space-2);
}

.sma-tab-bar--horizontal .sma-tab-bar__nav .nav-link {
    border: none;
    border-radius: var(--sma-radius-pill) var(--sma-radius-pill) 0 0;
    color: var(--sma-color-text-muted);
    font-weight: var(--sma-font-weight-semibold);
    padding: var(--sma-space-3) var(--sma-space-5);
}

.sma-tab-bar--horizontal .sma-tab-bar__nav .nav-link.active {
    color: var(--sma-color-primary);
    background: var(--sma-status-pending-bg);
    border-bottom: 2px solid var(--sma-color-primary);
}

.sma-tab-bar__icon {
    margin-right: var(--sma-space-2);
}

/* Member Details page still uses its original hand-written tab markup
   (kept as-is deliberately — see plan risk notes on this file) rather than
   <x-tab-bar>; Bootstrap's .nav-tabs is already a horizontal flex row by
   default (the "vertical-tabs" class only ever affected scrollbar styling,
   confirmed via grep), so this is a pure color/shape retheme of the
   existing classes, zero markup change, zero risk to data-toggle="tab". */
.atbd-tab.tab-horizontal .nav-tabs.vertical-tabs {
    border-bottom: 1px solid var(--sma-gray-100);
    flex-wrap: wrap;
    gap: var(--sma-space-2);
}

.atbd-tab.tab-horizontal .nav-tabs.vertical-tabs .nav-link {
    border: none;
    border-radius: var(--sma-radius-pill) var(--sma-radius-pill) 0 0;
    color: var(--sma-color-text-muted);
    font-weight: var(--sma-font-weight-semibold);
    padding: var(--sma-space-3) var(--sma-space-5);
}

.atbd-tab.tab-horizontal .nav-tabs.vertical-tabs .nav-link.active {
    color: var(--sma-color-primary);
    background: var(--sma-status-pending-bg);
    border-bottom: 2px solid var(--sma-color-primary);
}

.atbd-tab.tab-horizontal .nav-tabs.vertical-tabs .nav-link:after {
    display: none;
}

/* Member Details > Documents tab — card-like treatment for the existing
   file inputs, scoped to #tab-v-2 so it doesn't leak into other file
   inputs app-wide. Purely visual; doc-upload class / onchange contract
   used by changeDocument() is untouched. */
#tab-v-2 input.doc-upload {
    border: 1px dashed var(--sma-color-border);
    border-radius: var(--sma-radius-lg);
    background: var(--sma-cream);
    padding: var(--sma-space-4);
}

#tab-v-2 .atbd-upload__file a.file-name {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-primary);
}

/* --- <x-document-card> --------------------------------------------------- */
.sma-document-card {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sma-space-3) var(--sma-space-4);
    background: var(--sma-color-surface);
    border: 1px solid var(--sma-color-border);
    border-radius: var(--sma-radius-lg);
    padding: var(--sma-space-4) var(--sma-space-5);
    box-shadow: var(--sma-shadow-card);
}

.sma-document-card--verified,
.sma-document-card--reviewing {
    border-color: var(--sma-status-success-bg);
}

.sma-document-card.has-error {
    border-color: var(--sma-status-danger);
}

.sma-document-card.is-dragover {
    border-style: dashed;
    border-color: var(--sma-color-primary);
    background: var(--sma-color-bg-body);
}

.sma-document-card__icon-wrap {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sma-radius-md);
    background: var(--sma-status-pending-bg);
    color: var(--sma-color-primary);
    font-size: 18px;
}

.sma-document-card--tone-info .sma-document-card__icon-wrap {
    background: var(--sma-status-info-bg);
    color: var(--sma-status-info);
}

.sma-document-card--tone-neutral .sma-document-card__icon-wrap {
    background: var(--sma-gray-100);
    color: var(--sma-gray-700);
}

.sma-document-card__check {
    display: none;
    position: absolute;
    bottom: -2px;
    right: -2px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sma-status-success);
    color: var(--sma-white);
    font-size: 10px;
    border: 2px solid var(--sma-color-surface);
}

.sma-document-card.is-filled .sma-document-card__check {
    display: inline-flex;
}

.sma-document-card__status {
    position: absolute;
    top: var(--sma-space-4);
    right: var(--sma-space-5);
}

.sma-document-card__info {
    flex: 1 1 160px;
    min-width: 0;
}

.sma-document-card__title {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text);
}

.sma-document-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: 12.5px;
    color: var(--sma-color-text-muted);
    margin-top: 2px;
}

.sma-document-card__description {
    color: var(--sma-color-text-muted);
}

.sma-document-card__filename {
    color: var(--sma-color-text);
    font-weight: var(--sma-font-weight-medium);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.sma-document-card__filename[href]:hover {
    color: var(--sma-color-primary);
    text-decoration: underline;
}

.sma-document-card__filesize {
    white-space: nowrap;
}

.sma-document-card__link {
    display: inline-block;
    margin-top: var(--sma-space-2);
    font-weight: var(--sma-font-weight-semibold);
}

.sma-document-card__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sma-document-card__trigger {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--sma-space-4);
    border-radius: var(--sma-radius-pill);
    background: var(--sma-color-primary);
    color: var(--sma-white) !important;
    font-size: 13px;
    font-weight: var(--sma-font-weight-semibold);
    cursor: pointer;
    border: none;
    margin: 0;
    transition: background 0.15s;
}

.sma-document-card__trigger:hover {
    background: var(--sma-color-primary-dark);
}

.sma-document-card.is-filled .sma-document-card__trigger {
    background: transparent;
    color: var(--sma-color-primary) !important;
    border: 1px solid var(--sma-color-border);
}

.sma-document-card.is-filled .sma-document-card__trigger:hover {
    background: var(--sma-status-pending-bg);
}

.sma-document-card__remove {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--sma-color-text-muted);
    cursor: pointer;
}

.sma-document-card__remove:hover {
    background: var(--sma-status-danger-bg);
    color: var(--sma-status-danger);
}

.sma-document-card.is-filled .sma-document-card__remove {
    display: inline-flex;
}

.sma-document-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sma-document-card .invalid-feedback {
    flex-basis: 100%;
    margin-top: 0;
}

@media (max-width: 420px) {
    .sma-document-card {
        padding: var(--sma-space-4);
    }

    .sma-document-card__trigger span {
        display: none;
    }
}

/* --- <x-activity-list-item> ---------------------------------------------- */
.sma-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sma-space-3);
    padding: var(--sma-space-3) var(--sma-space-4);
    border-left: 3px solid var(--sma-color-accent);
    border-radius: var(--sma-radius-sm);
    background: var(--sma-cream);
    margin-bottom: var(--sma-space-2);
    text-decoration: none;
    color: var(--sma-color-text);
}

.sma-activity-item--danger {
    border-left-color: var(--sma-status-danger);
}

.sma-activity-item--success {
    border-left-color: var(--sma-status-success);
}

.sma-activity-item--info {
    border-left-color: var(--sma-status-info);
}

.sma-activity-item--warning {
    border-left-color: var(--sma-status-pending);
}

.sma-activity-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sma-color-surface);
    color: var(--sma-color-primary);
    flex: none;
}

.sma-activity-item__body {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.sma-activity-item__title {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text);
}

.sma-activity-item__subtitle {
    color: var(--sma-color-text-muted);
}

.sma-activity-item__timestamp {
    font-size: 11px;
    color: var(--sma-color-text-muted);
    margin-top: 2px;
}

/* Auth pages (login, forgot-password) — scoped so pill-input styling
   doesn't leak into every other .card/.form-control in the app. */
.sma-auth .card {
    border-radius: var(--sma-radius-lg);
    border: none;
    background: var(--sma-cream);
    overflow: hidden;
}

.sma-auth .card-header {
    background: transparent;
    border-bottom: 1px solid var(--sma-gray-300);
}

.sma-auth .card-header h6 {
    color: var(--sma-color-primary);
    font-weight: var(--sma-font-weight-bold);
    font-size: 18px;
}

.sma-auth .form-control {
    border-radius: var(--sma-radius-pill);
    border: 1px solid var(--sma-color-border);
    background: var(--sma-white);
    padding-left: var(--sma-space-4);
}

/* Pill-radius buttons — Register Guardian & Children's action buttons
   (Add Another Child, the submit button, and the per-child Select Offer
   trigger), matching the rounded language used elsewhere in the theme. */
.sma-pill-btn {
    border-radius: var(--sma-radius-pill);
}

.sma-auth .btn-primary {
    background-color: var(--sma-color-accent);
    border-color: var(--sma-color-accent);
    color: var(--sma-gray-900);
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
    width: 100%;
    padding: var(--sma-space-3);
}

.sma-auth .btn-primary:hover {
    background-color: var(--sma-color-primary);
    border-color: var(--sma-color-primary);
    color: var(--sma-white);
}

/* ── List filter panels ─────────────────────────────────────────────────
   Every filtered listing in BOTH panels — 18 of them, tenant and SuperAdmin —
   wraps its filter row in `#csvcollapse-link-collapsed` and lays the controls
   out with the same `.col-lg-12.d-flex.flex-row.flex-wrap` inner div. Only two
   of those (members, guardians) ever got the `.sma-filter-panel` class, so the
   other sixteen rendered as a bare unstyled row butted against the table card
   below it with no separation.

   Keyed off the wrapper id rather than the class so all eighteen are covered
   without touching eighteen Blade files, and so a new listing gets the
   treatment for free. `.sma-filter-panel` is kept as an alias for the two that
   already carry it.
   ---------------------------------------------------------------------- */
#csvcollapse-link-collapsed {
    /* The gap. The panel and the table card were flush against each other,
       reading as one broken box rather than two elements. */
    margin-bottom: var(--sma-space-5);
}

#csvcollapse-link-collapsed > .d-flex,
.sma-filter-panel {
    background: var(--sma-color-surface);
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-card);
    padding: var(--sma-space-4) !important;
}

/* Direct child only, NOT a descendant.
   `#csvcollapse-link-collapsed .form-control` reached past the filter row into
   the DataTable card below — restyling the search box, the length select and
   anything else carrying .form-control, which is what pulled those columns out
   of alignment. */
#csvcollapse-link-collapsed > .d-flex .form-control,
.sma-filter-panel .form-control {
    border-radius: var(--sma-radius-md);
    border: 1px solid var(--sma-color-border);
    background-color: var(--sma-cream);
}

#csvcollapse-link-collapsed > .d-flex #filterbtn,
.sma-filter-panel #filterbtn {
    background-color: var(--sma-color-accent);
    border-color: var(--sma-color-accent);
    color: var(--sma-gray-900);
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
}

#csvcollapse-link-collapsed > .d-flex #clearfilterbtn,
.sma-filter-panel #clearfilterbtn {
    border-radius: var(--sma-radius-pill);
}

/* No double-card reset needed: `.sma-filter-panel` sits ON the same element
   `#csvcollapse-link-collapsed > .d-flex` matches, so the two selectors style
   one element with identical declarations rather than nesting. */

/* ── SweetAlert2 dialogs ────────────────────────────────────────────────
   Every confirm/success/error dialog in the admin panel is a Swal (see the
   `Swal.fire` calls across resources/views/admin), loaded from the CDN in
   layouts/partials/_scripts.blade.php. Out of the box it ships its own font,
   its own blue-violet buttons and its own radii, so the dialogs read as a
   different product than the page behind them.

   Restyled here rather than per call site: there are a dozen call sites and
   nothing about the wording differs between them, only the look. Nothing in
   the markup changes — these are Swal's own stable class names.

   !important throughout because Swal injects its stylesheet at runtime, which
   lands after this file in the cascade at equal specificity.
   ──────────────────────────────────────────────────────────────────────── */
.swal2-popup {
    font-family: var(--sma-font-main) !important;
    border-radius: var(--sma-radius-lg) !important;
    background: var(--sma-color-surface) !important;
    box-shadow: var(--sma-shadow-dropdown) !important;
    padding: var(--sma-space-8) var(--sma-space-6) var(--sma-space-6) !important;
}

.swal2-title {
    color: var(--sma-color-text) !important;
    font-weight: var(--sma-font-weight-semibold) !important;
    font-size: 20px !important;
}

.swal2-html-container {
    color: var(--sma-color-text-muted) !important;
    font-size: 14px !important;
    font-weight: var(--sma-font-weight-regular) !important;
    line-height: 1.6 !important;
}

.swal2-actions {
    gap: var(--sma-space-2) !important;
    margin-top: var(--sma-space-6) !important;
}

.swal2-styled {
    border-radius: var(--sma-radius-pill) !important;
    font-weight: var(--sma-font-weight-semibold) !important;
    font-size: 14px !important;
    padding: 10px var(--sma-space-6) !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--sma-status-pending-bg) !important;
}

.swal2-styled.swal2-confirm {
    background: var(--sma-color-primary) !important;
    color: var(--sma-white) !important;
}

.swal2-styled.swal2-confirm:hover {
    background: var(--sma-color-primary-dark) !important;
}

/* Destructive confirms opt in with customClass — a delete button should not
   look identical to a "yes, carry on" button. */
.swal2-styled.swal2-confirm.sma-swal-danger {
    background: var(--sma-status-danger) !important;
}

.swal2-styled.swal2-confirm.sma-swal-danger:hover {
    filter: brightness(0.92);
}

.swal2-styled.swal2-cancel {
    background: transparent !important;
    color: var(--sma-color-text) !important;
    border: 1px solid var(--sma-color-border) !important;
}

.swal2-styled.swal2-cancel:hover {
    background: var(--sma-gray-100) !important;
}

/* Swal's stock icons are its own green/red/blue — remap to the status palette
   the rest of the panel uses. */
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--sma-status-success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--sma-status-success) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--sma-status-success) !important;
    color: var(--sma-status-success) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--sma-status-danger) !important;
    color: var(--sma-status-danger) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--sma-status-danger) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--sma-status-danger) !important;
    color: var(--sma-status-danger) !important;
}

.swal2-icon.swal2-question,
.swal2-icon.swal2-info {
    border-color: var(--sma-color-primary) !important;
    color: var(--sma-color-primary) !important;
}

/* --------------------------------------------------------------------------
   6. Page-specific overrides
   -------------------------------------------------------------------------- */

/* ── Role Permissions (create/edit) — resources/views/admin/roles/create-update.blade.php
   Scoped to .sma-permissions (wraps the page's .container-fluid) so none of
   this leaks into the other pages that reuse the legacy .custom-checkbox /
   .check-all / .checkbox-group-wrapper classes (register, login,
   assigned-academies, plan-form) — those keep the legacy look untouched.
   ──────────────────────────────────────────────────────────────────────── */

/* --- Reusable toggle-switch control (master "Select All" + per-group
   "Select all"). The <input> stays in normal flow (not display:none) so it
   remains keyboard-focusable and announced by screen readers; only the
   track/thumb are aria-hidden decoration. --- */
.sma-toggle-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sma-space-2);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text);
    white-space: nowrap;
}

.sma-toggle-check__input {
    position: absolute;
    opacity: 0;
    width: 34px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.sma-toggle-check__track {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: var(--sma-radius-pill);
    background: var(--sma-gray-300);
    transition: background-color 0.15s ease;
}

.sma-toggle-check__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sma-white);
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.25);
    transition: transform 0.15s ease;
}

/* Per-group "Select all" toggles default to neutral gray — with up to 18
   groups on the page, letting every one of them light up brand-purple is
   what made the page read as "all purple". Purple is reserved for the one
   master toggle (.sma-select-all below) so it stays the single focal accent. */
.sma-toggle-check__input:checked+.sma-toggle-check__track {
    background: var(--sma-gray-700);
}

.sma-toggle-check__input:checked+.sma-toggle-check__track .sma-toggle-check__thumb {
    transform: translateX(14px);
}

.sma-toggle-check__input:indeterminate+.sma-toggle-check__track {
    background: var(--sma-gray-700);
    opacity: 0.5;
}

.sma-toggle-check__input:indeterminate+.sma-toggle-check__track .sma-toggle-check__thumb {
    transform: translateX(7px);
}

.sma-toggle-check__input:focus-visible+.sma-toggle-check__track {
    box-shadow: 0 0 0 3px rgba(132, 56, 242, 0.25);
}

.sma-select-all .sma-toggle-check__input:checked+.sma-toggle-check__track,
.sma-select-all .sma-toggle-check__input:indeterminate+.sma-toggle-check__track {
    background: var(--sma-color-primary);
    opacity: 1;
}

/* --- Permissions card shell --- */
.sma-permissions-card {
    overflow: visible;
}

/* Specificity note: legacy style.css has ".card .card-header { padding-top:0;
   padding-bottom:0; align-items:center; min-height:60px }" at (0,2,0). This
   element carries both .card-header and .sma-permissions-toolbar, so a bare
   ".sma-permissions-toolbar" rule at (0,1,0) was silently losing that fight
   — padding-top:0 ate the space above "Permissions", and align-items:center
   (with no flex-direction from the legacy rule to contradict, but also no
   width/stretch) let the two rows shrink-wrap and center independently
   instead of stretching full-width, so they no longer lined up with each
   other. Scoping under .sma-permissions-card brings this to (0,3,0) so it
   wins outright. */
.sma-permissions .sma-permissions-card .sma-permissions-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sma-space-4);
    padding: var(--sma-space-4) var(--sma-space-5) var(--sma-space-3);
    min-height: 0;
}

.sma-permissions-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sma-space-3);
    width: 100%;
}

/* Search grows to fill the row, "Select All" pins to the far right — the
   previous flex-start override left it stranded next to a short search box
   with a large dead gap to the right of it. */
.sma-select-all {
    margin-left: auto;
}

.sma-permissions-count {
    font-size: 12px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-gray-700);
    background: var(--sma-gray-100);
    padding: 4px 12px;
    border-radius: var(--sma-radius-pill);
}

/* --- Search input --- */
.sma-permissions-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 420px;
}

.sma-permissions-search__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--sma-gray-500);
    display: flex;
}

.sma-permissions-search__input {
    width: 100%;
    font-size: 13px;
    color: var(--sma-color-text);
    background: var(--sma-cream);
    border: 1px solid var(--sma-color-border);
    border-radius: var(--sma-radius-pill);
    padding: 8px 14px 8px 36px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sma-permissions-search__input::placeholder {
    color: var(--sma-gray-500);
}

.sma-permissions-search__input:focus-visible {
    border-color: var(--sma-color-primary);
    box-shadow: 0 0 0 3px rgba(132, 56, 242, 0.12);
}

/* --- Jump-to-section row: a labelled, visually separate strip so it doesn't
   read as more form controls piled onto the search/select-all row above --- */
.sma-permissions-jump-row {
    display: flex;
    align-items: center;
    gap: var(--sma-space-3);
    border-top: 1px solid var(--sma-gray-100);
    padding-top: var(--sma-space-3);
}

.sma-permissions-jump-row__label {
    flex: none;
    font-size: 11px;
    font-weight: var(--sma-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sma-color-text-muted);
}

/* Single scrollable row, not a wrapped wall of pills, so the toolbar keeps a
   fixed, predictable height. The mask fades the trailing edge to hint that
   more chips are scrollable, since the thin scrollbar alone is easy to miss. */
.sma-permissions-jump {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: var(--sma-space-2);
    padding: var(--sma-space-1) 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}

/* Specificity note: section 3's global "body > *:not(.sidebar) a" link-color
   rule is (0,1,2) — a single .sma-permissions-jump__chip class (0,1,0) loses
   to it regardless of source order, which is why these were rendering in
   the global link purple instead of neutral gray. Scoping under
   .sma-permissions (an ancestor class, not the sidebar :not() exception)
   brings it to (0,2,0) so it wins. */
.sma-permissions .sma-permissions-jump__chip {
    flex: none;
    font-size: 12px;
    font-weight: var(--sma-font-weight-medium);
    color: var(--sma-gray-700);
    background: var(--sma-cream);
    border-radius: var(--sma-radius-pill);
    padding: 4px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sma-permissions .sma-permissions-jump__chip:hover,
.sma-permissions .sma-permissions-jump__chip:focus-visible {
    background: var(--sma-status-pending-bg);
    color: var(--sma-color-primary);
}

/* --- Permission list. Flows with the page (no inner scroll box — a nested
   scrollbar under the sticky bottom action bar read as cluttered) --- */
.sma-permissions-body {
    padding: var(--sma-space-2) var(--sma-space-5) var(--sma-space-5);
}

.sma-permissions-empty {
    text-align: center;
    color: var(--sma-color-text-muted);
    font-size: 13px;
    padding: var(--sma-space-6) 0;
    margin: 0;
}

/* --- Permission group (fieldset). Legend is reset to behave as a full-width
   flex header instead of the default browser block. --- */
.sma-permission-group {
    border: none;
    margin: 0 0 var(--sma-space-5);
    padding: 0;
    margin: 40px !important;
    scroll-margin-top: 90px;
    /* clears the fixed 74px topbar when a jump chip scrolls a group into view */
}

.sma-permission-group[hidden],
.sma-permission-item[hidden] {
    display: none !important;
}

.sma-permission-group__legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sma-space-2);
    width: 100%;
    padding: 0 0 var(--sma-space-2);
    border-bottom: 1px solid var(--sma-gray-100);
    margin-bottom: var(--sma-space-3);
}

.sma-permission-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--sma-radius-sm);
    background: var(--sma-gray-100);
    color: var(--sma-gray-700);
    flex: none;
}

.sma-permission-group__icon svg {
    width: 15px;
    height: 15px;
}

.sma-permission-group__title {
    font-weight: var(--sma-font-weight-bold);
    font-size: 14px;
    color: var(--sma-color-text);
}

.sma-permission-group__count {
    font-size: 11.5px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text-muted);
    background: var(--sma-gray-100);
    border-radius: var(--sma-radius-pill);
    padding: 2px 10px;
}

.sma-permission-group__select-all {
    margin-left: auto;
}

.sma-permission-group__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sma-space-2);
}

/* --- Individual permission checkbox item --- */
.sma-permission-item {
    position: relative;
    display: flex;
    /* flex-start, not center: a label that wraps to two lines ("Approve Member
       Documents") pushed the checkbox down to the midpoint of BOTH lines, so
       it no longer lined up with its neighbours in the same row. Aligning to
       the top keeps every box on one line across the grid however the labels
       wrap. */
    align-items: flex-start;
    gap: var(--sma-space-2);
    /* No min-height. It stretched a single-line row to 44px while the box was
       pinned near the top, so the tick sat ABOVE its own label — the reported
       "circle is not centred". The row is now exactly as tall as its content
       and the box is positioned against the LABEL rather than the row. */
    padding: var(--sma-space-2) var(--sma-space-3);
    border-radius: var(--sma-radius-md);
    background: transparent;
    transition: background-color 0.12s ease;
}

.sma-permission-item:hover {
    background: var(--sma-cream);
}

/* Subtle inset accent instead of a filled background — the checkbox itself
   already carries the "checked" signal; painting the whole row solid purple
   as well reads as a wall of purple once most items in a group are checked. */
.sma-permission-item.is-checked {
    background: transparent;
    box-shadow: inset 3px 0 0 0 var(--sma-color-primary);
}

.sma-permission-item.is-checked:hover {
    background: var(--sma-cream);
}

.sma-permission-item__input {
    position: absolute;
    /* Matches the visible box below — the clickable area has to sit exactly
       where the box is drawn, or the two drift apart on a wrapped label. */
    top: 0;
    left: var(--sma-space-3);
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.sma-permission-item__label {
    /* The box is absolutely positioned against THIS, not the row: the row can
       be taller than the label (grid rows stretch to the tallest cell), and
       positioning against it put the box out of line with its own text. */
    position: relative;
    display: flex;
    align-items: flex-start;
    line-height: 20px;
    gap: var(--sma-space-2);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    /* Reserves the box's own width plus a gap; the box sits at left:0 here. */
    padding-left: 26px;
    cursor: pointer;
    font-weight: var(--sma-font-weight-regular);
    font-size: 13.5px;
    color: var(--sma-color-text);
}

.sma-permission-item__box {
    position: absolute;
    /* Centred on the first line: (20px line - 18px box) / 2 = 1px. Measured
       from the LABEL, which starts where its text starts. */
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--sma-color-border);
    background: var(--sma-white);
    flex: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sma-permission-item__box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--sma-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.sma-permission-item__input:checked+.sma-permission-item__label .sma-permission-item__box {
    background: var(--sma-color-primary);
    border-color: var(--sma-color-primary);
}

.sma-permission-item__input:checked+.sma-permission-item__label .sma-permission-item__box::after {
    opacity: 1;
}

.sma-permission-item__input:focus-visible+.sma-permission-item__label .sma-permission-item__box {
    box-shadow: 0 0 0 3px rgba(132, 56, 242, 0.25);
}

.sma-permission-item__text {
    overflow-wrap: anywhere;
}

.sma-permission-item__info {
    flex: none;
    /* The row is top-aligned so a wrapped label keeps its checkbox on the
       first line; nudge the info button down by the same amount so it sits
       beside that line rather than riding above it. */
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--sma-gray-500);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sma-permission-item__info:hover,
.sma-permission-item__info:focus-visible {
    background: var(--sma-status-pending-bg);
    color: var(--sma-color-primary);
}

/* --- Sticky bottom action bar --- */
/* Generic name: the same sticky, right-aligned action bar the Roles screen
   uses, now shared by the settings forms so Save/Cancel sit in one place
   across the panel instead of floating at different heights per page. */
.sma-form-actionbar,
.sma-permissions-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: var(--sma-space-3);
    background: var(--sma-color-surface);
    border-top: 1px solid var(--sma-gray-100);
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-dropdown);
    padding: var(--sma-space-4) var(--sma-space-5);
    margin-top: var(--sma-space-5);
}

/* The same global link-color rule that hit the jump chips also overrides
   Bootstrap's .btn-outline-secondary color on this <a>-as-button Cancel
   link, painting it purple instead of neutral. */
.sma-form-actionbar a.btn-outline-secondary,
.sma-permissions-actionbar a.btn-outline-secondary {
    color: var(--sma-gray-700);
    border-color: var(--sma-gray-300);
}

.sma-form-actionbar a.btn-outline-secondary:hover,
.sma-form-actionbar a.btn-outline-secondary:focus,
.sma-permissions-actionbar a.btn-outline-secondary:hover,
.sma-permissions-actionbar a.btn-outline-secondary:focus {
    color: var(--sma-gray-900);
    border-color: var(--sma-gray-500);
    background: var(--sma-gray-100);
}

@media only screen and (max-width: 767px) {
    .sma-permission-group__grid {
        grid-template-columns: 1fr;
    }

    .sma-permission-group__select-all {
        margin-left: 0;
    }

    .sma-permissions-actionbar {
        flex-direction: column-reverse;
    }

    .sma-permissions-actionbar .btn {
        width: 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   7. RTL overrides
   --------------------------------------------------------------------------
   No font swap needed — Poppins (--sma-font-main) is already applied to
   body/headings above and is used for both LTR and RTL. The rest of the
   redesign uses non-directional properties (padding/margin shorthand, flex
   gap, border-radius) so only these physical-property mirrors are needed
   on top of what style-rtl.css already handles.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .sma-tab-bar__icon {
    margin-right: 0;
    margin-left: var(--sma-space-2);
}

html[dir="rtl"] .atbd-tab.tab-horizontal .nav-tabs.vertical-tabs .nav-link span[data-feather] {
    margin-right: 0;
    margin-left: var(--sma-space-1);
}

html[dir="rtl"] .sma-permissions-search__icon {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .sma-permissions-search__input {
    padding: 8px 36px 8px 14px;
}

html[dir="rtl"] .sma-permission-group__select-all {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .sma-permission-item__input {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .sma-permission-item__label {
    padding-left: 0;
    padding-right: 28px;
}

html[dir="rtl"] .sma-permission-item__box {
    left: auto;
    right: 0;
}

html[dir="rtl"] .sma-select-all {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .sma-permissions-jump {
    -webkit-mask-image: linear-gradient(to left, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, black calc(100% - 28px), transparent 100%);
}

/* ── Audit log entries ───────────────────────────────────────────────────
   The Log column carries a sentence AND, for updates, a list of changed
   fields. Rendered as one undifferentiated bulleted blob it was unreadable at
   a glance: the event word sat inline in link-blue (reading as a hyperlink
   that goes nowhere), and every row looked identical in weight.

   The structure here gives each entry a scannable head — a coloured event
   pill plus the sentence — with the field changes indented beneath it. Colour
   carries the event type, reusing the status tokens so created/updated/deleted
   match success/info/danger everywhere else in the panel rather than
   introducing a fourth palette.
   ──────────────────────────────────────────────────────────────────────── */
.audit-entry {
    display: flex;
    flex-direction: column;
    gap: var(--sma-space-2);
    padding: var(--sma-space-1) 0;
}

.audit-entry__head {
    display: flex;
    align-items: baseline;
    gap: var(--sma-space-2);
    /* The pill keeps its width; the sentence takes the rest and wraps. */
    flex-wrap: nowrap;
}

.audit-entry__text {
    color: var(--sma-color-text);
    line-height: 1.5;
    /* Sentences are long and the column is wide — allow wrapping here even
       though DataTables' nowrap class is on the table. */
    white-space: normal;
}

.audit-badge {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: var(--sma-radius-pill);
    font-size: 11px;
    font-weight: var(--sma-font-weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    white-space: nowrap;
    background: var(--sma-gray-100);
    color: var(--sma-color-text-muted);
}

.audit-badge--created {
    background: var(--sma-status-success-bg);
    color: var(--sma-status-success);
}

.audit-badge--updated {
    background: var(--sma-status-info-bg);
    color: var(--sma-status-info);
}

.audit-badge--deleted,
.audit-badge--restored {
    background: var(--sma-status-danger-bg);
    color: var(--sma-status-danger);
}

/* The changed-field list. Indented to sit under the sentence, not the pill,
   so the eye follows one left edge down the entry. */
.audit-changes {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--sma-space-3);
    border-left: 2px solid var(--sma-gray-300);
    display: flex;
    flex-direction: column;
    gap: var(--sma-space-1);
}

.audit-changes li {
    font-size: 13px;
    color: var(--sma-gray-700);
    line-height: 1.5;
    white-space: normal;
}

/* Old → new values arrive wrapped in <strong> from the language files. */
.audit-changes li strong {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text);
}

/* IP address and timestamp are metadata, not content — quieten them so the log
   sentence is what the eye lands on first.
   Targeted from the END of the row (last-child / nth-last-child) rather than
   the start: Branch is conditionally present, so counting forwards would dim a
   different pair of columns depending on whether it is rendered. */
#audits-table td:last-child,
#audits-table td:nth-last-child(2) {
    color: var(--sma-color-text-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* Branch is the context the row is read in — keep it legible and let it hold
   its own width rather than being squeezed by the long log sentence. */
#audits-table td:first-child,
#audits-table th:first-child {
    white-space: nowrap;
    font-weight: var(--sma-font-weight-medium);
}

html[dir="rtl"] .audit-changes {
    padding: 0 var(--sma-space-3) 0 0;
    border-left: 0;
    border-right: 2px solid var(--sma-gray-300);
}

/* The language files wrap the event word in .text-info / .text-primary /
   .text-danger, which rendered as bright link-blue inside the sentence — and
   now that the pill states the event, saying it twice in two colours is noise.
   Neutralised inside the entry only, so those helpers keep working elsewhere. */
.audit-entry__text .text-info,
.audit-entry__text .text-primary,
.audit-entry__text .text-danger,
.audit-entry__text .text-success,
.audit-entry__text .text-warning {
    color: var(--sma-color-text) !important;
    font-weight: var(--sma-font-weight-medium);
}

/* ── Scheduled branch transfer (FR-SMA-011) ──────────────────────────────
   A transfer is deferred to membership expiry, so between the request and the
   move there is a state the member page has to show: on their way out, on a
   known date, cancellable until then. Without a visible marker the transfer is
   invisible until the day it fires, and an admin has no way to call it off.

   Styled as a notice rather than an error — nothing is wrong, something is
   pending — so it uses the pending/purple tokens rather than danger red.
   ──────────────────────────────────────────────────────────────────────── */
.sma-pending-transfer {
    display: flex;
    align-items: flex-start;
    gap: var(--sma-space-2);
    margin-top: var(--sma-space-3);
    padding: var(--sma-space-3);
    border-radius: var(--sma-radius-sm);
    background: var(--sma-status-pending-bg);
    border: 1px solid var(--sma-color-primary);
    text-align: left;
}

.sma-pending-transfer__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--sma-color-primary);
}

.sma-pending-transfer__title {
    font-size: 13px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-text);
    line-height: 1.4;
}

.sma-pending-transfer__meta {
    font-size: 12px;
    color: var(--sma-gray-700);
    line-height: 1.5;
    margin-top: 2px;
}

/* A link, not a button: cancelling is a secondary escape hatch, and a second
   filled button here would compete with the page's real actions. */
.sma-pending-transfer__cancel {
    margin-top: var(--sma-space-2);
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-status-danger);
    cursor: pointer;
    text-decoration: underline;
}

.sma-pending-transfer__cancel:hover,
.sma-pending-transfer__cancel:focus-visible {
    text-decoration: none;
    outline: none;
}

/* Explains the deferral inside the transfer modal. An admin clicking
   "Transfer" would otherwise expect the member to move immediately. */
.sma-transfer-note {
    margin-bottom: var(--sma-space-4);
    padding: var(--sma-space-3);
    border-radius: var(--sma-radius-sm);
    background: var(--sma-gray-100);
    font-size: 13px;
    line-height: 1.6;
    color: var(--sma-gray-700);
}

html[dir="rtl"] .sma-pending-transfer {
    text-align: right;
}


/* --------------------------------------------------------------------------
   Form action buttons (Save / Cancel / Test Connection)
   --------------------------------------------------------------------------
   The button rules above only fire inside .breadcrumb-action / .button-group,
   which are the page-header wrappers. Buttons at the foot of a form sit in a
   bare <form> with no such wrapper, so they fell through to stock Bootstrap:
   a flat #17a2b8 btn-info and a low-contrast btn-primary whose label was
   barely readable against it.

   Scoped to `form` deliberately — DataTable row actions and dropdown items
   render outside a form, so they keep their existing treatment.
   -------------------------------------------------------------------------- */

/* Spacing between buttons in an action row. `gap` is direction-agnostic, so
   it stays correct under [dir="rtl"] — unlike the mr-2/ml-2 utilities, which
   style-rtl.css does not flip. */
.sma-form-actions {
    gap: 0.625rem;
}

/* Primary action (Save / Submit / Update) — purple, white label */
form .btn.btn-primary:not(.btn-add),
.sma-form-actions .btn.btn-primary:not(.btn-add) {
    background-color: var(--sma-color-primary) !important;
    border-color: var(--sma-color-primary) !important;
    color: var(--sma-white) !important;
    font-weight: var(--sma-font-weight-semibold);
    border-radius: var(--sma-radius-pill);
    padding: 0.5rem 1.75rem;
    box-shadow: none;
}

form .btn.btn-primary:not(.btn-add):hover,
form .btn.btn-primary:not(.btn-add):focus,
.sma-form-actions .btn.btn-primary:not(.btn-add):hover,
.sma-form-actions .btn.btn-primary:not(.btn-add):focus {
    background-color: var(--sma-color-primary-dark) !important;
    border-color: var(--sma-color-primary-dark) !important;
    color: var(--sma-white) !important;
    box-shadow: none;
    outline: none;
}

/* Secondary action (Test Connection / Cancel / Discard) — outlined, not a
   second solid block competing with Save for attention.

   btn-light is the codebase's most common Cancel class (modal footers next to
   a submit); btn-outline-light / btn-outline-secondary are one-off variants on
   Brand Guidelines and Roles. All are included so a Cancel never renders as a
   square grey box beside a pill-shaped Save. */
form .btn.btn-info,
form .btn.btn-secondary,
form .btn.btn-light:not(.btn-default),
form .btn.btn-outline-light,
form .btn.btn-outline-secondary,
.sma-form-actions .btn.btn-info,
.sma-form-actions .btn.btn-secondary,
.sma-form-actions .btn.btn-light:not(.btn-default),
.sma-form-actions .btn.btn-outline-light,
.sma-form-actions .btn.btn-outline-secondary {
    background-color: transparent !important;
    border: 1px solid var(--sma-color-border) !important;
    color: var(--sma-color-text) !important;
    font-weight: var(--sma-font-weight-semibold);
    border-radius: var(--sma-radius-pill);
    padding: 0.5rem 1.75rem;
    box-shadow: none;
}

form .btn.btn-info:hover,
form .btn.btn-info:focus,
form .btn.btn-secondary:hover,
form .btn.btn-secondary:focus,
form .btn.btn-light:not(.btn-default):hover,
form .btn.btn-light:not(.btn-default):focus,
form .btn.btn-outline-light:hover,
form .btn.btn-outline-light:focus,
form .btn.btn-outline-secondary:hover,
form .btn.btn-outline-secondary:focus,
.sma-form-actions .btn.btn-info:hover,
.sma-form-actions .btn.btn-info:focus,
.sma-form-actions .btn.btn-secondary:hover,
.sma-form-actions .btn.btn-secondary:focus,
.sma-form-actions .btn.btn-light:not(.btn-default):hover,
.sma-form-actions .btn.btn-light:not(.btn-default):focus,
.sma-form-actions .btn.btn-outline-light:hover,
.sma-form-actions .btn.btn-outline-light:focus,
.sma-form-actions .btn.btn-outline-secondary:hover,
.sma-form-actions .btn.btn-outline-secondary:focus {
    background-color: var(--sma-gray-100) !important;
    border-color: var(--sma-color-primary) !important;
    color: var(--sma-color-primary) !important;
    box-shadow: none;
    outline: none;
}

/* Semantic actions (Approve / Process / Reject) — keep the colour, adopt the
   shape.

   The refund modals pair these with a Cancel button, which the secondary rule
   above turns into a pill. Left untouched they stayed square Bootstrap blocks
   next to a pill, so the pair looked mismatched. Colour is deliberately NOT
   repainted: green "Approve" and amber "Process" carry meaning that purple
   would destroy. Only radius, weight and padding are normalised. */
form .btn.btn-success,
form .btn.btn-warning,
.sma-form-actions .btn.btn-success,
.sma-form-actions .btn.btn-warning {
    font-weight: var(--sma-font-weight-semibold);
    border-radius: var(--sma-radius-pill);
    padding: 0.5rem 1.75rem;
    box-shadow: none;
}

form .btn.btn-success,
.sma-form-actions .btn.btn-success {
    background-color: var(--sma-status-success) !important;
    border-color: var(--sma-status-success) !important;
    color: var(--sma-white) !important;
}

form .btn.btn-warning,
.sma-form-actions .btn.btn-warning {
    color: var(--sma-gray-900) !important;
}

/* Danger action (Delete) — keep it readable rather than stock Bootstrap red */
form .btn.btn-danger,
.sma-form-actions .btn.btn-danger {
    background-color: var(--sma-status-danger) !important;
    border-color: var(--sma-status-danger) !important;
    color: var(--sma-white) !important;
    font-weight: var(--sma-font-weight-semibold);
    border-radius: var(--sma-radius-pill);
    padding: 0.5rem 1.75rem;
    box-shadow: none;
}

/* ==========================================================================
   Offer picker (Assign Plan → Select Offer)
   ==========================================================================
   The offer's terms and its Select button used to sit side by side inside a
   300px modal-sm, which squeezed the button to a bare coloured block with its
   label clipped off. Each offer is now a card with the button on its own line,
   so neither competes for width. */

.sma-offer-list {
    display: flex;
    flex-direction: column;
    gap: var(--sma-space-3);
}

.sma-offer {
    border: 1px solid var(--sma-color-border);
    border-radius: var(--sma-radius-md);
    padding: var(--sma-space-4);
    background: var(--sma-white);
}

.sma-offer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sma-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--sma-space-2);
}

.sma-offer__code {
    font-weight: var(--sma-font-weight-bold);
    font-size: 15px;
    color: var(--sma-color-text);
    /* A long code must wrap rather than push the badge out of the card. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.sma-offer__badge {
    flex: none;
    font-size: 12px;
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-color-primary);
    background: var(--sma-cream);
    border-radius: var(--sma-radius-pill);
    padding: 3px 10px;
}

.sma-offer__details {
    margin: 0 0 var(--sma-space-3);
    font-size: 13px;
    color: var(--sma-color-text-muted);
    overflow-wrap: anywhere;
}

.sma-offer__terms {
    margin: 0 0 var(--sma-space-3);
    display: grid;
    gap: var(--sma-space-1);
}

.sma-offer__terms > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sma-space-3);
}

.sma-offer__terms dt {
    margin: 0;
    font-weight: var(--sma-font-weight-regular);
    font-size: 13px;
    color: var(--sma-color-text-muted);
}

.sma-offer__terms dd {
    margin: 0;
    font-weight: var(--sma-font-weight-semibold);
    font-size: 13px;
    color: var(--sma-color-text);
    text-align: end;
}

/* Full width and its own line: the label was the casualty of sharing a row. */
.sma-offer__select {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
    /* Bootstrap's .btn-primary already paints white on purple; stated here so
       a later theme override of .btn-primary cannot leave an unlabelled
       block again. */
    color: var(--sma-white);
    white-space: normal;
}

.sma-offer__select:hover,
.sma-offer__select:focus {
    color: var(--sma-white);
}

/* ==========================================================================
   Coach Check In / Check Out (header bar)
   ==========================================================================
   These ship as .btn-outline-success / .btn-outline-danger: coloured text on a
   TRANSPARENT background. On the white page body that reads fine; in the
   header the background is the organization's primary colour, so teal-on-
   purple and red-on-purple were effectively invisible — the button showed as
   an empty outlined box.

   Filled and opaque here, so the label is legible whatever primary colour the
   organization has chosen. */

.navbar-right__menu .nav-checkin .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sma-space-2);
    white-space: nowrap;
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
    line-height: 1.2;
    padding: 6px 16px;
}

.navbar-right__menu .nav-checkin .btn-outline-success,
.navbar-right__menu .nav-checkin .btn-outline-success:hover,
.navbar-right__menu .nav-checkin .btn-outline-success:focus {
    background-color: var(--sma-white);
    border-color: var(--sma-white);
    /* A dark green on white, not the light teal: that value is tuned for a
       dark background and is low contrast on a light one. */
    color: #157347;
    box-shadow: none;
}

.navbar-right__menu .nav-checkin .btn-outline-danger,
.navbar-right__menu .nav-checkin .btn-outline-danger:hover,
.navbar-right__menu .nav-checkin .btn-outline-danger:focus {
    background-color: var(--sma-white);
    border-color: var(--sma-white);
    color: #b02a37;
    box-shadow: none;
}

/* The check-out button carries a second line ("In Time — 09:15 AM"), which the
   inline-flex above would otherwise lay out beside the label instead of under
   it. */
.navbar-right__menu .nav-checkin #checkOutBtn .btn,
.navbar-right__menu .nav-checkin.is-checkout .btn {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.navbar-right__menu .nav-checkin .checkout-time {
    flex-basis: 100%;
    font-size: 11px;
    font-weight: var(--sma-font-weight-regular);
    opacity: 0.85;
}

/* Feather renders these as SVGs; without an explicit size they inherit the
   icon defaults and sit noticeably larger than the label beside them. */
.navbar-right__menu .nav-checkin .btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ==========================================================================
   Member Details → Documents tab
   ==========================================================================
   This tab still uses raw <input type="file"> where the rest of the app uses
   the document-card component, so the three columns rendered as unstyled
   controls with no card, uneven heights and text running under the browser's
   own file button.

   Restyled to sit with the rest of the panel without replacing the markup —
   the inputs are wired to changeDocument() by name and id, and swapping the
   component in would break that binding. */

#tab-v-2 > .row {
    align-items: stretch;
}

#tab-v-2 .form-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sma-space-4);
    border: 1px solid var(--sma-color-border);
    border-radius: var(--sma-radius-md);
    background: var(--sma-white);
}

#tab-v-2 .form-group > label {
    margin-bottom: var(--sma-space-3);
    gap: var(--sma-space-2);
}

#tab-v-2 input[type="file"] {
    /* The native control is wider than its column at some zoom levels, which
       is what pushed the "Accepted format" note out of alignment. */
    max-width: 100%;
    font-size: 13px;
}

#tab-v-2 .text-light.fs-13 {
    display: block;
    margin-top: var(--sma-space-2);
    color: var(--sma-color-text-muted) !important;
    line-height: 1.4;
}

/* Pushes the "View …" link to the bottom of the card so all three line up
   however long the label above them wraps. */
#tab-v-2 .atbd-upload__file {
    margin-top: auto;
    padding-top: var(--sma-space-3);
}

#tab-v-2 .atbd-upload__file ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tab-v-2 .atbd-upload__file .file-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sma-color-primary);
}

#tab-v-2 textarea[name="medical_condition"] {
    margin-top: var(--sma-space-2);
    font-size: 13px;
}

/* ==========================================================================
   Standalone primary buttons (outside a form)
   ==========================================================================
   The theme's .btn-primary rule is scoped to `form .btn.btn-primary` and
   `.sma-form-actions`, so a primary action that is NOT inside a form — "Back
   to List" on the refund page, and any link-styled action like it — falls back
   to whatever the vendor sheets leave it as. On those pages it rendered as a
   filled purple block with no readable label.

   Stated explicitly here: purple fill, white label, and the label kept legible
   whatever paints the background. Not marked !important on the colour so the
   in-form rule above still wins where both apply. */

a.btn.btn-primary,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus {
    color: var(--sma-white);
    border-radius: var(--sma-radius-pill);
    font-weight: var(--sma-font-weight-semibold);
}

/* The icon inside such a button: without a size it inherits the icon-font
   defaults and can crowd the label out of a narrow button. */
a.btn.btn-primary > i,
a.btn.btn-primary > svg {
    font-size: 1em;
    width: auto;
    height: auto;
    vertical-align: middle;
}