/* ==========================================================================
   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;
    --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-main);
    background-color: var(--sma-color-bg-body);
    color: var(--sma-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sma-font-main);
    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);
}

/* 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;
}

/* 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;
}

/* ── 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);
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* 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);
}

/* --- <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;
    background: var(--sma-color-surface);
    border: 1px dashed var(--sma-color-border);
    border-radius: var(--sma-radius-lg);
    padding: var(--sma-space-5);
    text-align: center;
}

.sma-document-card--verified,
.sma-document-card--reviewing {
    border-style: solid;
    text-align: left;
}

.sma-document-card__icon-wrap {
    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);
    margin-bottom: var(--sma-space-3);
}

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

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

.sma-document-card__meta {
    font-size: 12px;
    color: var(--sma-color-text-muted);
    margin-top: 2px;
}

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

.sma-document-card__upload {
    margin-top: var(--sma-space-3);
    text-align: left;
}

/* --- <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);
}

.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);
}

/* Members list filter panel */
.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;
}

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

.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);
}

.sma-filter-panel #clearfilterbtn {
    border-radius: var(--sma-radius-pill);
}

/* ── 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;
    align-items: center;
    gap: var(--sma-space-2);
    min-height: 44px;
    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;
    top: 50%;
    left: 12px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    transform: translateY(-50%);
}

.sma-permission-item__label {
    display: flex;
    align-items: center;
    gap: var(--sma-space-2);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-left: 28px;
    cursor: pointer;
    font-weight: var(--sma-font-weight-regular);
    font-size: 13.5px;
    color: var(--sma-color-text);
}

.sma-permission-item__box {
    position: absolute;
    top: 50%;
    left: var(--sma-space-3);
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--sma-color-border);
    background: var(--sma-white);
    flex: none;
    transform: translateY(-50%);
    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;
    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 --- */
.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-permissions-actionbar a.btn-outline-secondary {
    color: var(--sma-gray-700);
    border-color: var(--sma-gray-300);
}

.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: var(--sma-space-3);
}

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%);
}