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

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

/* ── Impersonate button — outlined purple pill ───────────────────────────
   The DataTable renders: class="btn btn-xs btn-outline-success [disabled]"
   We override btn-outline-success to match the design system instead of
   Bootstrap's green. Scoped to table cells to avoid leaking to other pages.
   ──────────────────────────────────────────────────────────────────────── */
table.dataTable td .btn-outline-success,
table.dataTable td a.btn-outline-success {
    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 {
    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 {
    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);
}

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