/* ─── School Manager ERP — Global Styles ─────────────────────────────────────
   Limitless Admin Template custom overrides.
   ─────────────────────────────────────────────────────────────────────────── */


/* ── 1. GLOBAL DATATABLE — ENTERPRISE SCROLLING STANDARD ────────────────────
   Architecture:

     Page (.content-inner)  ← ONLY vertical scrollbar
       →  Card
            →  Toolbar (.datatable-header)
            →  Table host
                 · Prefer DataTables scrollX (syncs header + body on H-scroll)
                 · Optional FixedColumns right:1 for Actions freeze
                 · No nested Y scrollport (scrollY: false)
            →  Footer (.datatable-footer)

   RULES:
   • Vertical scroll = page only.
   • Horizontal scroll = DataTables scrollBody (header clone syncs via DT).
   • Actions freeze = FixedColumns (not CSS sticky thead — that desyncs H-scroll).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --rc-scrollbar-size: 8px;
    --rc-scrollbar-radius: 8px;
    --rc-scrollbar-track: #f1f1f1;
    --rc-scrollbar-thumb: #c4c4c4;
    --rc-scrollbar-thumb-hover: #BF1914;
    --rc-datatable-scroll-pad: calc(var(--rc-scrollbar-size) + 0.75rem);
    --rc-action-bg: #ffffff;
    --rc-action-border: #E5E7EB;
    --rc-action-shadow: -6px 0 10px -6px rgba(17, 17, 17, 0.14);
}

/* Prevent card/page from ever scrolling horizontally */
.btn-outline-secondary:hover {
  color: var(--btn-hover-color);
  background-color: var(--navbar-dark-bg);
  border-color: var(--navbar-dark-bg);
}
.btn-outline-secondary {
  --btn-color: var(--navbar-dark-bg);
  --btn-border-color: var(--navbar-dark-bg);
  font-weight: 500;
}

.sidebar-section-body{
    padding: 20px !important ;
}

.card,
.card-body {
    overflow: visible;
    max-width: 100%;
}

/* Page must never grow a horizontal scrollbar because of wide tables */
.content-wrapper,
.page-content,
.content-inner {
    overflow-x: hidden;
    max-width: 100%;
}

/*
 * .datatable-scroll — optional outer host from DataTables `dom`.
 * When scrollX is on, DataTables builds .dataTables_scroll inside — that owns H-scroll
 * and keeps header/body columns synced. When scrollX is off, this wrapper owns H-scroll.
 */
div.datatable-scroll {
    max-height: none !important;
    height: auto !important;
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
}
div.datatable-scroll:not(:has(.dataTables_scroll)) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rc-scrollbar-thumb) var(--rc-scrollbar-track);
}
div.datatable-scroll:has(.dataTables_scroll) {
    overflow: visible !important;
}
div.datatable-scroll > table,
div.datatable-scroll > table.dataTable {
    margin-bottom: var(--rc-datatable-scroll-pad) !important;
}

/* DataTables scrollX: header clone + body share H-scroll via DT JS */
.dataTables_wrapper .dataTables_scroll {
    width: 100% !important;
    max-height: none !important;
}
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollFoot {
    overflow: hidden !important;
    max-height: none !important;
    height: auto !important;
    background: #f8f9fa;
}
.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    height: auto !important;
    padding-bottom: var(--rc-datatable-scroll-pad);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rc-scrollbar-thumb) var(--rc-scrollbar-track);
}
.dataTables_wrapper .dataTables_scrollBody > table {
    margin-bottom: 0 !important;
}

/* FixedColumns right (Actions) */
th.dtfc-fixed-right,
td.dtfc-fixed-right,
.dtfc-fixed-right {
    --dtfc-bg: var(--rc-action-bg) !important;
    background-color: var(--rc-action-bg) !important;
    background-image: none !important;
    border-left: 1px solid var(--rc-action-border) !important;
    box-shadow: var(--rc-action-shadow) !important;
}
.table-hover > tbody > tr:hover > td.dtfc-fixed-right {
    background-color: var(--rc-action-bg) !important;
    box-shadow:
        inset 0 0 0 9999px var(--table-accent-bg),
        var(--rc-action-shadow) !important;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    max-height: none !important;
    position: relative;
    padding-bottom: var(--rc-datatable-scroll-pad);
    scrollbar-width: thin;
    scrollbar-color: var(--rc-scrollbar-thumb) var(--rc-scrollbar-track);
}
.table-responsive:has(.dataTables_wrapper) {
    overflow: visible;
    max-width: 100%;
    max-height: none !important;
    padding-bottom: 0;
}
.content-inner .card:has(.dataTables_wrapper),
.content-inner .card:has(.datatable-scroll),
.content-inner .card-body:has(.dataTables_wrapper),
.content-inner .dataTables_wrapper {
    max-height: none !important;
}
.modal-body div.datatable-scroll,
.modal-body .table-responsive,
.modal-body .dataTables_scrollBody {
    max-height: none !important;
    height: auto !important;
}

div.datatable-scroll::-webkit-scrollbar,
div.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: var(--rc-scrollbar-size);
    height: var(--rc-scrollbar-size);
}
div.datatable-scroll::-webkit-scrollbar-track,
div.dataTables_scrollBody::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: var(--rc-scrollbar-track);
    border-radius: var(--rc-scrollbar-radius);
}
div.datatable-scroll::-webkit-scrollbar-thumb,
div.dataTables_scrollBody::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--rc-scrollbar-thumb);
    border-radius: var(--rc-scrollbar-radius);
    border: 2px solid var(--rc-scrollbar-track);
    background-clip: padding-box;
}
div.datatable-scroll::-webkit-scrollbar-thumb:hover,
div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: var(--rc-scrollbar-thumb-hover);
}

[data-bs-theme="dark"],
body.dark-mode {
    --rc-scrollbar-track: #2a2d35;
    --rc-scrollbar-thumb: #5a5e68;
    --rc-scrollbar-thumb-hover: #BF1914;
    --rc-action-bg: #1a2030;
    --rc-action-border: #2a2d35;
    --rc-action-shadow: -6px 0 10px -6px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_scrollHead,
body.dark-mode .dataTables_wrapper .dataTables_scrollHead {
    background: #1a2030;
}

/*
 * .dt-action-col — Actions column styling (freeze via FixedColumns, not CSS sticky).
 * Add to Actions <th> and <td>. columnDefs: [{ targets: -1, className: 'dt-action-col text-center' }]
 */
.dt-action-col {
    --table-bg: var(--rc-action-bg);
    background-color: var(--rc-action-bg) !important;
    background-image: none !important;
    border-left: 1px solid var(--rc-action-border);
    white-space: nowrap;
    vertical-align: middle !important;
}
.table-hover > tbody > tr:hover > td.dt-action-col {
    --table-bg: var(--rc-action-bg);
    background-color: var(--rc-action-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--table-accent-bg) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td.dt-action-col {
    --table-bg: var(--rc-action-bg);
    background-color: var(--rc-action-bg) !important;
}

/* Compact action buttons */
.dt-action-col .btn {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.78rem;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dt-action-col .btn + .btn,
.dt-action-col .btn + .dropdown,
.dt-action-col .dropdown + .btn,
.dt-action-col a.btn + a.btn,
.dt-action-col a.btn + .btn,
.dt-action-col .btn + a.btn {
    margin-left: 0.35rem;
}
.dt-action-col .btn i,
.dt-action-col .btn .ph {
    font-size: 0.95rem;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
}

/* Thead: no DIY sticky-top. FixedColumns uses .dtfc-fixed-* for Actions freeze. */
div.datatable-scroll table thead th:not(.dtfc-fixed-right):not(.dtfc-fixed-left),
.dataTables_wrapper .dataTables_scrollHead thead th:not(.dtfc-fixed-right):not(.dtfc-fixed-left) {
    top: auto !important;
    background-color: #f8f9fa;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_scrollHead thead th,
body.dark-mode .dataTables_wrapper .dataTables_scrollHead thead th {
    background-color: #1a2030;
}

/* ── 3. DATATABLE HEADER / FOOTER TOOLBAR ────────────────────────────────── */

div.datatable-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    flex-wrap: wrap;
    gap: 0.5rem;
}

div.datatable-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color, #e9ecef);
}

div.datatable-header .dataTables_filter label,
div.datatable-header .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
}

div.datatable-header .dataTables_filter input {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    min-width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

div.datatable-header .dataTables_filter input:focus {
    outline: none;
    border-color: var(--rudocode-primary, #c8102e);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.12);
}

div.datatable-header .dataTables_length select {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.325rem 1.75rem 0.325rem 0.625rem;
    font-size: 0.8125rem;
    background-color: var(--bs-body-bg, #fff);
}

div.datatable-header .dt-buttons {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}


/* ── 4. PAGINATION ───────────────────────────────────────────────────────── */

div.datatable-footer .dataTables_paginate .paginate_button {
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem;
    margin: 0 1px;
    font-size: 0.8125rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s;
}

div.datatable-footer .dataTables_paginate .paginate_button.current,
div.datatable-footer .dataTables_paginate .paginate_button.current:hover {
    background: var(--rudocode-primary, #c8102e);
    color: #fff !important;
    border-color: var(--rudocode-primary, #c8102e);
}

div.datatable-footer .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: rgba(200,16,46,0.08);
    border-color: rgba(200,16,46,0.2);
}

div.datatable-footer .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: default;
}

div.datatable-footer .dataTables_info {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}


/* ── 5. TABLE COLUMN DEFAULTS ────────────────────────────────────────────── */

.table th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.table td {
    font-size: 0.875rem;
    vertical-align: middle;
    white-space: nowrap;   /* keep cells on one line so wide tables overflow → scroll */
}

/* Opt-out: allow wrapping on a specific cell with class="dt-wrap" */
.table td.dt-wrap {
    white-space: normal;
}


/* ── 6. PROCESSING OVERLAY ───────────────────────────────────────────────── */

div.dataTables_processing {
    background: rgba(255,255,255,0.92);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-size: 0.875rem;
    border: none;
}



/* ── Compact sidebar (reduce overall length) ─────────────────────────────────── */
.sidebar-main .nav-sidebar > .nav-item > .nav-link {
    font-size: 0.83rem;
}
.sidebar-main .nav-sidebar .nav-group-sub .nav-link {
    font-size: 0.8rem;
}
.sidebar-main .nav-item-header {
    /*padding-top: 0.5rem;
    padding-bottom: 0.15rem;*/
}
.sidebar-main .nav-sidebar > .nav-item > .nav-link > i {
    font-size: 1.05rem;
}

/* Professional dropdown polish */
.dropdown-menu .dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.08);
}

/* ── Narrower sidebar ─────────────────────────────────────────────────────────── */
.sidebar-main {
    --sidebar-width: 15rem;            /* was 18.75rem (300px) → 240px */
    --sidebar-section-padding-x: 0.85rem;
}
.sidebar-main .nav-sidebar .nav-link { white-space: normal; }

/* ── Dot bullet before every submenu item ─────────────────────────────────────── */
.sidebar-main .nav-group-sub .nav-link {
    display: flex;
    align-items: center;
}
.sidebar-main .nav-group-sub .nav-link::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    margin-right: 0.65rem;
    flex-shrink: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.sidebar-main .nav-group-sub .nav-link:hover::before,
.sidebar-main .nav-group-sub .nav-link.active::before {
    opacity: 1;
    transform: scale(1.25);
}

/* ── Navbar professional polish ───────────────────────────────────────────────── */
.navbar .navbar-nav-link.dropdown-toggle::after,
.navbar .dropdown > .navbar-nav-link::after { display: none; }
.navbar .nav-item-dropdown-lg > .navbar-nav-link[aria-expanded="true"],
.navbar .nav-item-dropdown-lg > .navbar-nav-link:hover {
    background-color: rgba(255,255,255,.08);
}
.navbar .navbar-nav-link { transition: background-color .15s ease; }

/* ── Navbar height fix + topbar quick-menu ────────────────────────────────────── */
.navbar.navbar-static {
    min-height: 60px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.navbar.navbar-static > .container-fluid { align-items: center; }

/* Center quick-access menu links */
.topbar-menu .navbar-nav-link {
    padding: 0.45rem 0.85rem;
    font-size: 0.83rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    line-height: 1;
}
.topbar-menu .navbar-nav-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,.08);
}
.topbar-menu .navbar-nav-link.active {
    color: #fff;
    background-color: var(--rudocode-primary, #c8102e);
}
.topbar-menu .navbar-nav-link.active i { color: #fff; }

/* ── Module Workspace Navigation ─────────────────────────────────────────────── */
.module-switcher {
    max-width: calc(100vw - 420px);
    scrollbar-width: none;
}
.module-switcher::-webkit-scrollbar { display: none; }

.module-switcher-mobile .dropdown-toggle {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    padding: 0.4rem 0.75rem;
}
.module-switcher-mobile .dropdown-menu { max-height: 70vh; overflow-y: auto; }
.module-switcher-mobile .dropdown-item.active {
    background-color: rgba(200,16,46,.12);
    color: var(--rudocode-primary, #c8102e);
    font-weight: 600;
}

/* Module sidebar context label */
.sidebar[data-module] .sidebar-section-body .fw-semibold {
    letter-spacing: 0.02em;
}

/* ── Sidebar headings — quiet brand accent ──────────────────────────────────── */
.sidebar-module-heading {
    margin: 0;
    padding-top: 0.85rem !important;
    padding-bottom: 0.65rem !important;
    border-bottom: 1px solid var(--rudocode-gray-border, #e4e4e7);
}
.sidebar-module-heading__icon {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--rudocode-primary, #BF1914);
}
.sidebar-module-heading__label {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--rudocode-black, #1a1a1a);
    line-height: 1.2;
    margin-left: 10px;
}
.sidebar-module-heading__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    color: var(--rudocode-primary, #BF1914);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-module-heading__home:hover,
.sidebar-module-heading__home.is-active {
    background: rgba(191, 25, 20, 0.08);
    color: var(--rudocode-primary, #BF1914);
}
.sidebar-module-heading__home i {
    font-size: 1rem;
    line-height: 1;
}

.sidebar-main .nav-item-header .sidebar-nav-heading {
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--rudocode-primary, #BF1914);
    opacity: 0.9;
}

/* Breadcrumb module context */
.breadcrumb-line .breadcrumb-item i { font-size: 0.85em; opacity: 0.7; }
.breadcrumb-line .breadcrumb-item.active { color: var(--bs-body-color, #333); }

/* ── Dashboard stat cards + chart cards ───────────────────────────────────────── */
.stat-card { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
/*.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(15,23,42,.1) !important; }*/
.stat-card .stat-icon {
    width: 35px;
  height: 35px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.apexcharts-tooltip { box-shadow: 0 .5rem 1rem rgba(15,23,42,.12) !important; border: 0 !important; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* Equal-height sibling cards in a row. List cards cap height and scroll. */
.row > [class*="col-"]:has(> .stat-card),
.row > [class*="col-"]:has(> a > .stat-card),
.row > [class*="col-"]:has(> .card:only-child) {
    display: flex;
    flex-direction: column;
}
.row > [class*="col-"] > .stat-card,
.row > [class*="col-"] > a:has(> .stat-card),
.row > [class*="col-"] > .card:only-child {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    margin-bottom: 1rem !important;
}
.row > [class*="col-"] > a:has(> .stat-card) > .stat-card {
    height: 100%;
}

.row > [class*="col-"] > .card.card-list-panel,
.card-list-panel {
    display: flex;
    flex-direction: column;
    height: 22rem;
    max-height: 22rem;
    flex: 0 0 22rem;
}
.card-list-panel .card-header {
    flex-shrink: 0;
}
.card-scroll,
.card-list-panel > .table-responsive,
.card-list-panel > .card-body,
.card-list-panel > .list-group {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.card-list-panel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--line, #E5E7EB);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Navigation V2 — Rudocode Enterprise Branding
   Colors: Primary Red, Dark Red, Black, White, Light Gray
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --rudocode-primary: #BF1914;
    --rudocode-dark: #8b0000;
    --rudocode-black: #1a1a1a;
    --rudocode-gray: #f4f4f5;
    --rudocode-gray-border: #e4e4e7;
    --navbar-dark-bg: #1a1a1a;
}

/* Brand utilities */
.text-rudocode { color: var(--rudocode-primary) !important; }
.bg-rudocode { background-color: var(--rudocode-primary) !important; }
.bg-rudocode-soft {
    background-color: rgba(191, 25, 20, 0.1) !important;
    color: var(--rudocode-primary) !important;
}
.btn-rudocode {
    background-color: var(--rudocode-primary);
    border-color: var(--rudocode-primary);
    color: #fff;
}
.btn-rudocode:hover, .btn-rudocode:focus {
    background-color: var(--rudocode-dark);
    border-color: var(--rudocode-dark);
    color: #fff;
}

/* Primary topbar */
.nav-primary-topbar {
    min-height: 56px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    background-color: var(--rudocode-black) !important;
}
.nav-primary-topbar > .container-fluid {
    align-items: center;
    flex-wrap: wrap;
}

.brand-mark {
    width: 32px; height: 32px;
    background: var(--rudocode-primary);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
.brand-mark i { font-size: 16px; }
.brand-title { font-size: 0.95rem; letter-spacing: -0.02em; }
.brand-subtitle { letter-spacing: 0.04em; }

.user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--rudocode-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: #fff;
}
.user-avatar-lg { width: 44px; height: 44px; font-size: 16px; background: rgba(255,255,255,.2); }
.user-dropdown-menu { min-width: 260px; }
.user-dropdown-header { background: var(--rudocode-dark); }
.user-name-truncate { max-width: 140px; }
.caret-sm { font-size: 12px; }
.notification-dot {
    top: 9px; right: 6px; width: 9px; height: 9px;
    border-color: var(--navbar-dark-bg) !important;
}

.nav-search-slot { max-width: 520px; min-width: 0; }

/* Smart search */
.smart-search-form { width: 100%; }
.smart-search-scope-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
}
.smart-search-scope-btn:hover, .smart-search-scope-btn:focus {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.smart-search-input-wrap { position: relative; }
.smart-search-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.45); font-size: 1rem; pointer-events: none; z-index: 2;
}
.smart-search-input {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    padding-left: 2.25rem;
    font-size: 0.85rem;
    border-radius: 6px;
}
.smart-search-input::placeholder { color: rgba(255,255,255,.45); }
.smart-search-input:focus {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(200,16,46,.25);
}
.smart-search-results {
    top: calc(100% + 4px); left: 0; max-height: 320px; overflow-y: auto;
    display: none; padding: 0.25rem;
}
.smart-search-results.show { display: block; }
.smart-search-result-item {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; padding: 0.5rem 0.75rem;
}
.smart-search-result-module {
    font-size: 0.72rem; color: var(--bs-secondary-color);
    background: var(--rudocode-gray); padding: 0.1rem 0.4rem; border-radius: 4px;
    white-space: nowrap;
}

.nav-quick-actions .btn-rudocode {
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
}

/* Secondary module navigation */
.nav-secondary-bar {
    background: #fff;
    border-width: 2px !important;
    position: relative;
    z-index: 1022;
}
.nav-secondary-modules {
    gap: 0;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    overflow: visible;
}
.nav-secondary-items {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: stretch;
}
.nav-secondary-item.is-overflow {
    display: none !important;
}
.nav-secondary-more {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    position: relative;
}
.nav-secondary-more[hidden] {
    display: none !important;
}
.nav-secondary-more-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    appearance: none;
    border-radius: 0;
    height: 100%;
}
.nav-secondary-more-toggle:focus-visible {
    outline: 2px solid var(--rudocode-primary);
    outline-offset: -2px;
}
.nav-secondary-more-toggle[aria-expanded="true"] {
    color: var(--rudocode-black);
    background: var(--rudocode-gray);
}
.nav-secondary-more.is-active .nav-secondary-more-toggle {
    background: rgba(var(--brand-rgb, 191, 25, 20), .06);
    font-weight: 600;
}
.nav-secondary-more.is-active .nav-secondary-more-toggle i {
    opacity: 1;
    color: var(--rudocode-primary);
}
.nav-secondary-more-toggle .nav-secondary-more-caret {
    font-size: 0.7rem;
    opacity: 0.55;
    margin-left: -0.15rem;
}
.nav-secondary-more-menu {
    min-width: 12.5rem;
    padding: 0.4rem 0;
    z-index: 1023;
}
.nav-secondary-more-menu .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #52525b;
}
.nav-secondary-more-menu .dropdown-item i {
    font-size: 1.05rem;
    opacity: 0.75;
}
.nav-secondary-more-menu .dropdown-item:hover,
.nav-secondary-more-menu .dropdown-item:focus {
    color: var(--rudocode-black);
    background: var(--rudocode-gray);
}
.nav-secondary-more-menu .dropdown-item.active {
    background-color: rgba(200,16,46,.08);
    color: var(--rudocode-primary);
    font-weight: 600;
}
.nav-secondary-more-menu .dropdown-item.active i {
    opacity: 1;
}

.nav-secondary-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9375rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #52525b;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s ease, background .15s ease;
    border-bottom: 2px solid transparent;
}
.nav-secondary-item i { font-size: 1.05rem; opacity: 0.75; }
.nav-secondary-item:hover {
    color: var(--rudocode-black);
    background: var(--rudocode-gray);
}
.nav-secondary-item.is-active {
    background: rgba(var(--brand-rgb, 191, 25, 20), .06);
    font-weight: 600;
}
.nav-secondary-item.is-active i { opacity: 1; color: var(--rudocode-primary); }

.nav-secondary-mobile-toggle {
    background: var(--rudocode-gray);
    border: 1px solid var(--rudocode-gray-border);
    color: var(--rudocode-black);
    margin: 0.5rem 0;
}
.module-switcher-mobile .dropdown-item.active {
    background-color: rgba(200,16,46,.08);
    color: var(--rudocode-primary);
    font-weight: 600;
}

/* Module workspace header */
.module-workspace-header {
    margin-bottom: 0;
}
.module-workspace-header-main {
    padding: .8rem 1.5rem;
}
.module-header-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--rudocode-gray);
    border: 1px solid var(--rudocode-gray-border);
    border-radius: 8px;
    font-size: 1.5rem;
    color: var(--rudocode-primary);
}
.module-header-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rudocode-black);
    letter-spacing: -0.02em;
}
.module-header-description {
    font-size: 0.875rem;
    color: #71717a;
    max-width: 640px;
}
.module-workspace-header-summary {
    border-top: 1px solid var(--rudocode-gray-border);
    background: var(--rudocode-gray);
}
.module-summary-stat {
    padding: 0.85rem 1.5rem;
    border-right: 1px solid var(--rudocode-gray-border);
}
.module-summary-stat:last-child { border-right: 0; }
.module-summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.module-summary-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rudocode-black);
}

/* Override legacy indigo accents in navigation */
.topbar-menu .navbar-nav-link.active {
    color: #fff;
    background-color: var(--rudocode-primary);
}
.module-switcher-mobile .dropdown-item.active {
    background-color: rgba(200,16,46,.08);
    color: var(--rudocode-primary);
}

div.datatable-header .dataTables_filter input:focus {
    border-color: var(--rudocode-primary);
    box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
div.datatable-footer .dataTables_paginate .paginate_button.current,
div.datatable-footer .dataTables_paginate .paginate_button.current:hover {
    background: var(--rudocode-primary);
    border-color: var(--rudocode-primary);
}

/* Responsive */
@media (max-width: 767.98px) {
    .nav-search-slot { order: 3; width: 100%; margin: 0.5rem 0 0 !important; max-width: none; }
    .module-workspace-header-main { padding: 1rem; }
    .module-summary-stat { padding: 0.65rem 1rem; }
    .module-header-actions { width: 100%; }
}
@media (max-width: 991.98px) {
    .module-header-title { font-size: 1.15rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RUDOCODE — BRAND THEME (minimal recolor over native Limitless)
   Keeps the native Limitless dark sidebar/topbar and all native components.
   Only recolours the accent to the brand palette + neutral surfaces.

   Palette:  Red #BF1914 · Black #111111 · White #FFFFFF · Gray #F1F1F1
             Background #F8F9FB · Borders #E5E7EB
   Buttons: red / black / white / gray only. No green, blue, orange, purple.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --brand:        #BF1914;
    --brand-hover:  #A6150F;
    --brand-active: #8E120D;
    --brand-rgb:    191, 25, 20;
    --brand-ink:    #111111;
    --brand-ink-rgb: 17, 17, 17;
    --brand-muted:  #6B7280;
    --brand-muted-rgb: 107, 114, 128;
    --brand-gray:   #F1F1F1;
    --app-bg:       #f0f3f4;
    --line:         #E5E7EB;

    /* Google Material-inspired input borders (border only — no label changes) */
    --mat-input-border:           #DADCE0;
    --mat-input-focus:            var(--brand);
    --mat-input-error:            #D93025;
    --mat-input-disabled-border:  #E8EAED;
    --mat-input-readonly-border:  #E8EAED;
    --mat-input-border-transition: border-color 175ms ease-in-out, box-shadow 175ms ease-in-out;
}

/* Override Limitless's OWN master theme variables (the native way).
   This recolours .bg-primary, .text-primary, badges, borders, link colours,
   opacity tints and the dark-sidebar active state in one place. */
:root,
[data-color-theme=light],
[data-color-theme=dark] {
    --primary:      #BF1914;
    --primary-rgb:  191, 25, 20;
    --danger:       #BF1914;
    --danger-rgb:   191, 25, 20;
    --secondary:    #6B7280;
    --secondary-rgb: 107, 114, 128;
    --success:      #6B7280;
    --success-rgb:  107, 114, 128;
    --info:         #6B7280;
    --info-rgb:     107, 114, 128;
    --warning:      #6B7280;
    --warning-rgb:  107, 114, 128;
    --teal:         #6B7280;
    --teal-rgb:     107, 114, 128;
    --indigo:       #6B7280;
    --indigo-rgb:   107, 114, 128;
    --purple:       #6B7280;
    --purple-rgb:   107, 114, 128;
    --pink:         #6B7280;
    --pink-rgb:     107, 114, 128;
    --yellow:       #6B7280;
    --yellow-rgb:   107, 114, 128;

    /* Bootstrap fallbacks (some components read --bs-*) */
    --bs-primary:        #BF1914;
    --bs-primary-rgb:    191, 25, 20;
    --bs-danger:         #BF1914;
    --bs-danger-rgb:     191, 25, 20;
    --bs-secondary:      #6B7280;
    --bs-secondary-rgb:  107, 114, 128;
    --bs-success:        #6B7280;
    --bs-success-rgb:    107, 114, 128;
    --bs-info:           #6B7280;
    --bs-info-rgb:       107, 114, 128;
    --bs-warning:        #6B7280;
    --bs-warning-rgb:    107, 114, 128;
    --bs-link-color:     #BF1914;
    --bs-link-color-rgb: 191, 25, 20;
    --bs-link-hover-color: #A6150F;
}

/* App background */
body,
.page-content,
.content-wrapper { background-color: var(--app-bg); }

/* Links */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
.text-primary { color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }
.link-primary:hover { color: var(--brand-hover) !important; }

/* Primary surfaces */
.bg-primary { background-color: var(--brand) !important; }
.badge.bg-primary, .text-bg-primary { background-color: var(--brand) !important; color: #fff !important; }
.border-primary { border-color: var(--brand) !important; }

/* Buttons — red / black / white / gray only.
   Limitless hard-codes --btn-* on each variant, so override explicitly.
   Semantic class names (success/warning/info) stay in markup; colours remap. */
.btn-primary,
.btn-rudocode,
.btn-success,
.btn-danger {
    --btn-color: #fff;
    --btn-bg: var(--brand);
    --btn-border-color: var(--brand);
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--brand-hover);
    --btn-hover-border-color: var(--brand-hover);
    --btn-active-color: #fff;
    --btn-active-bg: var(--brand-active);
    --btn-active-border-color: var(--brand-active);
    --btn-disabled-bg: var(--brand);
    --btn-disabled-border-color: var(--brand);
    --btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.show, .btn-primary:first-child:active, .btn-primary:active,
.btn-rudocode:hover, .btn-rudocode:focus, .btn-rudocode.show, .btn-rudocode:first-child:active, .btn-rudocode:active,
.btn-success:hover, .btn-success:focus, .btn-success.show, .btn-success:first-child:active, .btn-success:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger.show, .btn-danger:first-child:active, .btn-danger:active {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: #fff !important;
}
.btn-primary:focus, .btn-primary:focus-visible,
.btn-rudocode:focus, .btn-rudocode:focus-visible,
.btn-success:focus, .btn-success:focus-visible,
.btn-danger:focus, .btn-danger:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .25) !important;
}

.btn-dark, .btn-black {
    --btn-color: #fff;
    --btn-bg: var(--brand-ink);
    --btn-border-color: var(--brand-ink);
    --btn-hover-color: #fff;
    --btn-hover-bg: #000;
    --btn-hover-border-color: #000;
    --btn-active-color: #fff;
    --btn-active-bg: #000;
    --btn-active-border-color: #000;
    --btn-disabled-bg: var(--brand-ink);
    --btn-disabled-border-color: var(--brand-ink);
    --btn-focus-shadow-rgb: var(--brand-ink-rgb);
    background-color: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #fff !important;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark.show, .btn-dark:first-child:active, .btn-dark:active,
.btn-black:hover, .btn-black:focus, .btn-black.show, .btn-black:first-child:active, .btn-black:active {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.btn-secondary,
.btn-warning,
.btn-info,
.btn-light,
.btn-teal,
.btn-indigo,
.btn-purple,
.btn-pink,
.btn-yellow {
    --btn-color: var(--brand-ink);
    --btn-bg: var(--brand-gray);
    --btn-border-color: var(--line);
    --btn-hover-color: var(--brand-ink);
    --btn-hover-bg: #E5E7EB;
    --btn-hover-border-color: #D1D5DB;
    --btn-active-color: var(--brand-ink);
    --btn-active-bg: #D1D5DB;
    --btn-active-border-color: #9CA3AF;
    --btn-disabled-color: var(--brand-muted);
    --btn-disabled-bg: var(--brand-gray);
    --btn-disabled-border-color: var(--line);
    --btn-focus-shadow-rgb: var(--brand-ink-rgb);
    background-color: var(--brand-gray) !important;
    border-color: var(--line) !important;
    color: var(--brand-ink) !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.show, .btn-secondary:first-child:active, .btn-secondary:active,
.btn-warning:hover, .btn-warning:focus, .btn-warning.show, .btn-warning:first-child:active, .btn-warning:active,
.btn-info:hover, .btn-info:focus, .btn-info.show, .btn-info:first-child:active, .btn-info:active,
.btn-light:hover, .btn-light:focus, .btn-light.show, .btn-light:first-child:active, .btn-light:active,
.btn-teal:hover, .btn-teal:focus, .btn-teal.show, .btn-teal:first-child:active, .btn-teal:active,
.btn-indigo:hover, .btn-indigo:focus, .btn-indigo.show, .btn-indigo:first-child:active, .btn-indigo:active,
.btn-purple:hover, .btn-purple:focus, .btn-purple.show, .btn-purple:first-child:active, .btn-purple:active,
.btn-pink:hover, .btn-pink:focus, .btn-pink.show, .btn-pink:first-child:active, .btn-pink:active,
.btn-yellow:hover, .btn-yellow:focus, .btn-yellow.show, .btn-yellow:first-child:active, .btn-yellow:active {
    background-color: #E5E7EB !important;
    border-color: #D1D5DB !important;
    color: var(--brand-ink) !important;
}

.btn-outline-primary,
.btn-outline-danger {
    --btn-color: var(--brand);
    --btn-border-color: var(--brand);
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--brand);
    --btn-hover-border-color: var(--brand);
    --btn-active-color: #fff;
    --btn-active-bg: var(--brand);
    --btn-active-border-color: var(--brand);
    --btn-disabled-color: var(--brand);
    --btn-focus-shadow-rgb: var(--brand-rgb);
    color: var(--brand) !important;
    border-color: var(--brand) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active,
.btn-check:checked + .btn-outline-danger {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.btn-outline-success,
.btn-outline-dark {
    --btn-color: var(--brand-ink);
    --btn-border-color: var(--brand-ink);
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--brand-ink);
    --btn-hover-border-color: var(--brand-ink);
    --btn-active-color: #fff;
    --btn-active-bg: var(--brand-ink);
    --btn-active-border-color: var(--brand-ink);
    --btn-disabled-color: var(--brand-ink);
    --btn-focus-shadow-rgb: var(--brand-ink-rgb);
    color: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    background-color: transparent !important;
}
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active,
.btn-check:checked + .btn-outline-success,
.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark.active,
.btn-check:checked + .btn-outline-dark {
    background-color: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #fff !important;
}

.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-teal,
.btn-outline-indigo,
.btn-outline-purple,
.btn-outline-pink,
.btn-outline-yellow {
    --btn-color: var(--brand-ink);
    --btn-border-color: var(--line);
    --btn-hover-color: var(--brand-ink);
    --btn-hover-bg: var(--brand-gray);
    --btn-hover-border-color: #D1D5DB;
    --btn-active-color: var(--brand-ink);
    --btn-active-bg: #E5E7EB;
    --btn-active-border-color: #D1D5DB;
    --btn-disabled-color: var(--brand-muted);
    --btn-focus-shadow-rgb: var(--brand-ink-rgb);
    color: var(--brand-ink) !important;
    border-color: var(--line) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning.active,
.btn-check:checked + .btn-outline-warning,
.btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info.active,
.btn-check:checked + .btn-outline-info,
.btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light.active,
.btn-outline-teal:hover, .btn-outline-teal:active, .btn-outline-teal.active,
.btn-outline-indigo:hover, .btn-outline-indigo:active, .btn-outline-indigo.active,
.btn-outline-purple:hover, .btn-outline-purple:active, .btn-outline-purple.active,
.btn-outline-pink:hover, .btn-outline-pink:active, .btn-outline-pink.active,
.btn-outline-yellow:hover, .btn-outline-yellow:active, .btn-outline-yellow.active {
    background-color: var(--brand-gray) !important;
    border-color: #D1D5DB !important;
    color: var(--brand-ink) !important;
}

.btn-flat-primary, .btn-light-primary, .btn-flat-danger, .btn-light-danger {
    --btn-color: var(--brand);
    --btn-bg: rgba(var(--brand-rgb), .08);
    --btn-border-color: transparent;
    --btn-hover-bg: rgba(var(--brand-rgb), .14);
    --btn-active-bg: rgba(var(--brand-rgb), .18);
    background-color: rgba(var(--brand-rgb), .08) !important;
    color: var(--brand) !important;
}
.btn-flat-primary:hover, .btn-light-primary:hover,
.btn-flat-danger:hover, .btn-light-danger:hover {
    background-color: rgba(var(--brand-rgb), .12) !important;
    color: var(--brand) !important;
}

.btn-flat-secondary, .btn-flat-success, .btn-flat-info, .btn-flat-warning,
.btn-flat-light, .btn-flat-dark, .btn-flat-teal, .btn-flat-indigo,
.btn-flat-purple, .btn-flat-pink, .btn-flat-yellow,
.btn-light-secondary, .btn-light-success, .btn-light-info, .btn-light-warning {
    --btn-color: var(--brand-ink);
    --btn-bg: rgba(var(--brand-ink-rgb), .06);
    --btn-border-color: transparent;
    --btn-hover-color: var(--brand-ink);
    --btn-hover-bg: rgba(var(--brand-ink-rgb), .10);
    --btn-active-color: var(--brand-ink);
    --btn-active-bg: rgba(var(--brand-ink-rgb), .14);
    background-color: rgba(var(--brand-ink-rgb), .06) !important;
    color: var(--brand-ink) !important;
}
.btn-flat-secondary:hover, .btn-flat-success:hover, .btn-flat-info:hover, .btn-flat-warning:hover,
.btn-flat-light:hover, .btn-flat-dark:hover, .btn-flat-teal:hover, .btn-flat-indigo:hover,
.btn-flat-purple:hover, .btn-flat-pink:hover, .btn-flat-yellow:hover,
.btn-light-secondary:hover, .btn-light-success:hover, .btn-light-info:hover, .btn-light-warning:hover {
    background-color: rgba(var(--brand-ink-rgb), .10) !important;
    color: var(--brand-ink) !important;
}

/* Labeled buttons — icon strip stays brand red or ink, never green/blue/orange */
.btn-outline-primary > .btn-labeled-icon.bg-primary,
.btn-flat-primary > .btn-labeled-icon.bg-primary,
.btn-light-primary > .btn-labeled-icon.bg-primary,
.btn-link > .btn-labeled-icon.bg-primary,
.btn-labeled .btn-labeled-icon.bg-danger {
    background-color: var(--brand) !important;
    color: #fff !important;
}
.btn-rudocode.btn-labeled > .btn-labeled-icon,
.btn-primary.btn-labeled > .btn-labeled-icon,
.btn-success.btn-labeled > .btn-labeled-icon,
.btn-danger.btn-labeled > .btn-labeled-icon {
    background-color: rgba(0, 0, 0, .2) !important;
    color: #fff !important;
}
.btn-labeled .btn-labeled-icon.bg-success,
.btn-labeled .btn-labeled-icon.bg-warning,
.btn-labeled .btn-labeled-icon.bg-info,
.btn-labeled .btn-labeled-icon.bg-secondary,
.btn-labeled .btn-labeled-icon.bg-teal,
.btn-labeled .btn-labeled-icon.bg-indigo,
.btn-labeled .btn-labeled-icon.bg-purple,
.btn-labeled .btn-labeled-icon.bg-pink {
    background-color: var(--brand-ink) !important;
    color: #fff !important;
}

/* Form checks — Limitless checkmark + brand colour */
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: transparent;
}
.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M5 10l4 4l6-8'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Nav / tabs / pagination active → brand */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--brand); }
.nav-tabs .nav-link.active { color: var(--brand); }
.nav-tabs .nav-link { padding: 1rem }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }

/* Dark sidebar active state → brand (native Limitless structure kept) */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark .nav-sidebar .nav-item > .nav-link.active,
.nav-sidebar .nav-item > .nav-link.active {
    background-color: var(--brand) !important;
    color: #fff !important;
}
.nav-sidebar .nav-item > .nav-link.active i { color: #fff !important; }

/* Progress + spinners + switches */
.progress-bar { background-color: var(--brand); }
.spinner-border, .spinner-grow { color: var(--brand); }

/* ── Topbar: native Limitless dark navbar, brand black #111111 ──────────── */
.navbar-rudocode {
    background-color: #111111;
    min-height: 56px;
}
.navbar-rudocode .navbar-nav-link {
    color: rgba(255, 255, 255, .85);
    transition: background-color .15s ease, color .15s ease;
}
.navbar-rudocode .navbar-nav-link:hover,
.navbar-rudocode .navbar-nav-link.show {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}
.navbar-rudocode .navbar-toggler { color: rgba(255, 255, 255, .85); border: 0; }
.navbar-rudocode .navbar-search {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}
.navbar-rudocode .navbar-search::placeholder { color: rgba(255, 255, 255, .5); }
.navbar-rudocode .navbar-search:focus {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: none;
    color: #fff;
}

/* Navbar brand column = sidebar width (admin portal) */
.portal-shell-admin .navbar-rudocode .navbar-brand-sidebar {
    flex: 0 0 var(--sidebar-width, 15.75rem) !important;
    width: var(--sidebar-width, 15.75rem);
    max-width: var(--sidebar-width, 15.75rem);
    min-width: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.portal-shell-admin .navbar-rudocode .navbar-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}
.portal-shell-admin .navbar-rudocode .navbar-brand-logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 34px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}
.portal-shell-admin .navbar-rudocode .navbar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #BF1914;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.portal-shell-admin .navbar-rudocode .navbar-brand-text {
    min-width: 0;
    line-height: 1.15;
}

/* Company master switch — sidebar (above Command Center) */
.sidebar-company-switch {
    margin: 0.75rem 0.75rem 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .88);
}
.sidebar-company-switch .form-check-input {
    cursor: pointer;
    width: 2em;
    height: 1.1em;
    margin-top: 0;
}
.sidebar-company-switch .form-check-input:checked {
    background-color: var(--brand, #BF1914);
    border-color: var(--brand, #BF1914);
}

/* News ticker — content area only (sidebar stays full-height under topbar) */
.news-ticker-bar marquee { flex: 1; min-width: 0; }

/* Kill any gradient utilities */
.bg-gradient { background-image: none !important; }

/* Text selection */
::selection { background: rgba(var(--brand-rgb), .16); }

/* ── Status badges → monochrome + red (no green/blue/orange) ────────────────
   done/positive → ink · in-progress/neutral → grey · problem/negative → red */
.badge.bg-success { background-color: #111111 !important; color: #fff !important; }
.badge.bg-warning,
.badge.bg-info,
.badge.bg-secondary { background-color: #F1F1F1 !important; color: #111111 !important; }
.badge.bg-danger { background-color: rgba(var(--brand-rgb), .10) !important; color: var(--brand) !important; }

/* ── Wizard stepper (reusable, monochrome) ─────────────────────────────────
   <ul/div class="wizard-steps"> › .step (.active/.done) › .step-num + .step-label */
.wizard-steps { display: flex; gap: 0; overflow-x: auto; }
.wizard-steps .step { flex: 1; min-width: 88px; text-align: center; position: relative; }
.wizard-steps .step::before {
    content: ''; position: absolute; top: 17px; left: -50%;
    width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.wizard-steps .step:first-child::before { display: none; }
.wizard-steps .step-num {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .85rem;
    background: #fff; border: 2px solid var(--line); color: #6B7280;
}
.wizard-steps .step-label { display: block; font-size: .72rem; color: #6B7280; margin-top: 6px; line-height: 1.2; }
.wizard-steps .step.active .step-num { background: var(--brand); border-color: var(--brand); color: #fff; }
.wizard-steps .step.active .step-label { color: #111111; font-weight: 600; }
.wizard-steps .step.done .step-num { background: #111111; border-color: #111111; color: #fff; }
.wizard-steps .step.done::before { background: #111111; }

/* ── Document upload tile (reusable) ───────────────────────────────────────── */
.doc-tile {
    border: 1px dashed #D1D5DB; border-radius: 12px;
    padding: 1rem; text-align: center; min-height: 140px; background: #fff;
}
.doc-tile.uploaded { border-style: solid; border-color: #111111; background: var(--app-bg); }

/* ── Alerts → monochrome + red (no green/blue/orange) ──────────────────────── */
.alert-success, .alert-info, .alert-secondary, .alert-warning {
    background-color: #F1F1F1 !important;
    border-color: var(--line) !important;
    color: #111111 !important;
}
.alert-danger {
    background-color: rgba(var(--brand-rgb), .08) !important;
    border-color: rgba(var(--brand-rgb), .25) !important;
    color: var(--brand) !important;
}

/* ── Modal headers: colour variants → white (consistent w/ native modals) ──── */
.modal-header.bg-primary,
.modal-header.bg-danger {
    background-color: #fff !important;
    border-bottom: 1px solid var(--line) !important;
}
.modal-header.bg-primary,
.modal-header.bg-primary .modal-title,
.modal-header.bg-primary.text-white,
.modal-header.bg-danger,
.modal-header.bg-danger .modal-title,
.modal-header.bg-danger.text-white { color: #111111 !important; }
.modal-header.bg-primary .btn-close,
.modal-header.bg-danger .btn-close { filter: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   UX POLISH PRIMITIVES — empty states, skeleton loaders, page headers, tables
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Empty states (reusable; used by <x-empty-state> + DataTables emptyTable) ─ */
.empty-state { text-align: center; padding: 3rem 1.5rem; max-width: 440px; margin: 0 auto; }
.empty-state .empty-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F1F1F1; color: #111111; margin-bottom: 1rem;
}
.empty-state .empty-icon i { font-size: 1.75rem; }
.empty-state .empty-title { font-size: 1rem; font-weight: 650; color: #111111; margin-bottom: .35rem; }
.empty-state .empty-desc { font-size: .85rem; color: #6B7280; line-height: 1.5; margin-bottom: 1.25rem; }
.empty-state .empty-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.empty-state.empty-sm { padding: 2rem 1rem; }
.empty-state.empty-sm .empty-icon { width: 52px; height: 52px; border-radius: 13px; }
.empty-state.empty-sm .empty-icon i { font-size: 1.4rem; }

/* ── Skeleton loaders (neutral grey shimmer — functional, monochrome) ──────── */
@keyframes brandSkeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
    background: linear-gradient(90deg, #ECECEC 25%, #F5F5F5 37%, #ECECEC 63%);
    background-size: 200% 100%;
    animation: brandSkeleton 1.4s ease-in-out infinite;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skeleton-line { height: 12px; margin-bottom: 9px; }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-title { height: 18px; width: 45%; margin-bottom: 14px; }
.skeleton-circle { border-radius: 50%; flex-shrink: 0; }
.skeleton-btn { height: 34px; width: 96px; border-radius: 8px; }
.skeleton-chart { width: 100%; border-radius: 10px; }
.skeleton-kpi { height: 92px; border-radius: 12px; }

/* Chart component shows a skeleton until the endpoint resolves */
.brand-chart.is-loading { position: relative; }
.brand-chart.is-loading::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, #ECECEC 25%, #F5F5F5 37%, #ECECEC 63%);
    background-size: 200% 100%; animation: brandSkeleton 1.4s ease-in-out infinite;
    border-radius: 10px;
}

/* ── Standardized in-content page header (<x-page-header>) ──────────────────── */
.page-head { margin-bottom: 1.25rem; }
.page-head .page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.page-head .page-head-title { font-size: 1.05rem; font-weight: 650; color: #111111; margin: 0 0 .15rem; }
.page-head .page-head-desc { font-size: .82rem; color: #6B7280; margin: 0; }
.page-head .page-head-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.page-head .breadcrumb { margin: 0 0 .4rem; padding: 0; font-size: .75rem; }
@media (max-width: 575.98px) {
    .page-head .page-head-actions { margin-left: 0; width: 100%; }
    .page-head .page-head-actions .btn { flex: 1; }
}

/* ── Tables: horizontal scroll only (page scrolls vertically) ─ */
.table-sticky {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rc-scrollbar-thumb, #c4c4c4) var(--rc-scrollbar-track, #f1f1f1);
}

.table-sticky > table {
    margin-bottom: var(--rc-datatable-scroll-pad, 0.75rem) !important;
}

@supports not (overflow-y: hidden) {
    .table-sticky {
        overflow-y: clip;
    }
}

.table-sticky::-webkit-scrollbar {
    width: var(--rc-scrollbar-size, 8px);
    height: var(--rc-scrollbar-size, 8px);
}
.table-sticky::-webkit-scrollbar-track {
    background: var(--rc-scrollbar-track, #f1f1f1);
    border-radius: var(--rc-scrollbar-radius, 8px);
}
.table-sticky::-webkit-scrollbar-thumb {
    background-color: var(--rc-scrollbar-thumb, #c4c4c4);
    border-radius: var(--rc-scrollbar-radius, 8px);
    border: 2px solid var(--rc-scrollbar-track, #f1f1f1);
    background-clip: padding-box;
}
.table-sticky::-webkit-scrollbar-thumb:hover {
    background-color: var(--rc-scrollbar-thumb-hover, #BF1914);
}
.table-sticky::-webkit-scrollbar-corner {
    background: var(--rc-scrollbar-track, #f1f1f1);
}

/* Host cards/panes must not clip fixed-position row action menus */
.card.enterprise-dt-host,
.enterprise-dt-host.card-body,
.tab-pane.enterprise-dt-host {
    overflow: visible;
}

.table-sticky .dataTables_wrapper,
.enterprise-dt.dataTables_wrapper {
    overflow: visible;
    min-width: 0;
}

.table-sticky table.dataTable,
.enterprise-dt table.dataTable {
    width: 100% !important;
    min-width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0;
    table-layout: auto !important;
}

.table-sticky thead th:not(.dt-action-col),
.enterprise-dt .dataTables_scrollHead thead th:not(.dt-action-col) {
    position: static !important;
    top: auto !important;
    background: #ffffff;
    box-shadow: none !important;
}

/* DataTables built-in scroll panes (only when a page enables scrollX/Y) */
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollFoot {
    max-height: none !important;
    height: auto !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0;
}
.dataTables_wrapper .dataTables_scrollBody > table {
    margin-bottom: var(--rc-datatable-scroll-pad, 0.75rem) !important;
}

.dataTables_wrapper .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none !important;
    padding-bottom: 0;
}
.dataTables_wrapper .table-responsive > table {
    margin-bottom: var(--rc-datatable-scroll-pad, 0.75rem) !important;
}

@supports not (overflow-y: clip) {
    .dataTables_wrapper .table-responsive {
        overflow-y: visible;
    }
}

.enterprise-dt .dt-foot,
.enterprise-dt > .dataTables_info,
.enterprise-dt > .dataTables_paginate,
.enterprise-dt > .dataTables_length {
    flex-shrink: 0;
}

.enterprise-dt .dt-foot .dataTables_info,
.enterprise-dt .dt-foot .dataTables_length,
.enterprise-dt .dt-foot .dataTables_paginate {
    margin: 0;
}

.dataTables_processing {
    border: 1px solid var(--line) !important; border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(17,17,17,.08) !important; color: #111 !important; font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   ENTERPRISE FEEDBACK SYSTEM — success / receipt / verification / error screens
   Rendered by feedback.js into the shared #feedbackModal. Monochrome only.
   ══════════════════════════════════════════════════════════════════════════ */
.fb-screen { text-align: center; padding: .75rem .5rem; }
.fb-icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.fb-icon i { font-size: 2rem; }
.fb-icon.is-success { background: #111111; color: #fff; }          /* monochrome positive = ink */
.fb-icon.is-error   { background: rgba(191,25,20,.10); color: #BF1914; }
.fb-title { font-size: 1.15rem; font-weight: 700; color: #111111; margin-bottom: .35rem; }
.fb-msg { font-size: .875rem; color: #6B7280; line-height: 1.5; margin-bottom: 1.25rem; }
.fb-amount { font-size: 1.7rem; font-weight: 800; color: #111111; letter-spacing: -.02em; margin-bottom: 1rem; }
.fb-details {
    text-align: left; border: 1px solid #E5E7EB; border-radius: 12px;
    overflow: hidden; margin-bottom: 1.25rem;
}
.fb-row { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; font-size: .84rem; }
.fb-row:not(:last-child) { border-bottom: 1px solid #E5E7EB; }
.fb-row .k { color: #6B7280; flex-shrink: 0; }
.fb-row .v { color: #111111; font-weight: 600; text-align: right; word-break: break-word; }
.fb-reason {
    background: var(--app-bg); border: 1px solid #E5E7EB; border-radius: 10px;
    padding: .7rem .9rem; text-align: left; font-size: .82rem; color: #374151; margin-bottom: .85rem;
}
.fb-ref { font-size: .78rem; color: #6B7280; margin-bottom: 1rem; }
.fb-support { font-size: .78rem; color: #6B7280; }
.fb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.fb-actions .btn { flex: 1 1 auto; min-width: 96px; }

/* ── Unified transaction system: processing / pending / confirm / receipt ──── */
.fb-icon.is-pending { background: #F1F1F1; color: #111111; }
.fb-icon.is-confirm { background: #F1F1F1; color: #111111; }

.fb-proc { position: relative; width: 64px; height: 64px; margin: 0 auto 1rem; }
.fb-spinner {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid #ECECEC; border-top-color: #BF1914;
    animation: fbSpin .8s linear infinite;
}
.fb-proc-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #111111; }
@keyframes fbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fb-spinner { animation: none; } }

/* Receipt header (company) + footer (reference / support / QR placeholder) */
.fb-rcpt-head {
    display: flex; align-items: center; gap: .6rem;
    border-bottom: 1px solid var(--line); padding-bottom: .85rem; margin-bottom: 1rem; text-align: left;
}
.fb-logo { max-height: 36px; border-radius: 8px; }
.fb-logo-mark {
    width: 38px; height: 38px; border-radius: 9px; background: #BF1914; color: #fff;
    font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fb-rcpt-co { min-width: 0; }
.fb-rcpt-name { font-weight: 700; color: #111111; font-size: .95rem; line-height: 1.2; }
.fb-rcpt-sub { font-size: .72rem; color: #6B7280; }
.fb-rcpt-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border-top: 1px dashed var(--line); padding-top: .85rem; margin-bottom: 1.1rem; text-align: left;
}
.fb-rcpt-foot-l { font-size: .72rem; color: #6B7280; line-height: 1.6; }
.fb-rcpt-foot-l strong { color: #111111; }
.fb-rcpt-note { color: #9CA3AF; }
.fb-qr {
    width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #C7C7C7; font-size: 1.6rem;
}

/* Processing secure indicator + receipt footer QR/signature placeholders */
.fb-secure { font-size: .74rem; color: #6B7280; margin-bottom: 1rem; }
.fb-rcpt-foot-r { display: flex; gap: .5rem; flex-shrink: 0; }
.fb-sign {
    width: 52px; height: 52px; border: 1px dashed var(--line); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; color: #C7C7C7; font-size: 1.4rem;
}

/* AEPS mini-statement table inside a receipt row (full-width) */
.fb-details .fb-row:has(.fb-ministmt) { display: block; }
.fb-ministmt { margin-top: .5rem; }
.fb-ministmt table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.fb-ministmt th, .fb-ministmt td { padding: .3rem; border-bottom: 1px solid var(--line); text-align: left; }
.fb-ministmt th { color: #6B7280; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD ENTERPRISE PAGE HEADER (layouts.pageheader + x-page-header/x-page-layout)
   ══════════════════════════════════════════════════════════════════════════ */
.page-header-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F1F1F1; color: #111111;
}
.page-header-icon i { font-size: 1.35rem; }
.page-header-title { font-size: 1.15rem; font-weight: 650; color: #111111; letter-spacing: -.01em; line-height: 1.2; }
.page-header-desc { font-size: .82rem; color: #6B7280; margin-top: .15rem; }
.page-header-actions .btn { white-space: nowrap; }
.filter-bar .card-header { background: #fff; }
.filter-bar .card-title { font-size: .85rem; font-weight: 600; }
.filter-bar .card-body { padding-bottom: 1rem; }

@media (max-width: 575.98px) {
    .page-head-std { align-items: flex-start !important; }
    .page-header-actions { width: 100%; margin-top: .25rem; }
    .page-header-actions > .btn { flex: 1 1 auto; }
    .page-header-icon { width: 34px; height: 34px; }
    .page-header-icon i { font-size: 1.1rem; }
    .page-header-title { font-size: 1rem; }
    .page-header-desc { display: none; }   /* keep mobile header compact */
}

/* ── Data-table enhancements (reusable across all list modules) ─────────────
   .table-sticky  → horizontal scrollport; page owns vertical scroll
   .table-sticky-actions → freeze last Actions column on tbody only (not thead). */
.table-sticky-actions > tbody td:last-child,
.enterprise-dt .dataTables_scrollBody .table-sticky-actions td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    --table-bg: var(--rc-action-bg, #ffffff);
    background-color: var(--rc-action-bg, #ffffff) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left: 1px solid var(--rc-action-border, #E5E7EB);
    box-shadow:
        inset 0 0 0 9999px var(--table-accent-bg),
        var(--rc-action-shadow, -6px 0 10px -6px rgba(17, 17, 17, 0.14)) !important;
    vertical-align: middle;
    overflow: visible;
    min-width: 3.75rem;
    width: auto;
    white-space: nowrap;
}
.table-sticky-actions > thead th:last-child,
.enterprise-dt .dataTables_scrollHead .table-sticky-actions th:last-child {
    position: static !important;
    right: auto !important;
    top: auto !important;
    z-index: 1;
    --table-bg: var(--rc-action-bg, #ffffff);
    background-color: var(--rc-action-bg, #ffffff) !important;
    border-left: 1px solid var(--rc-action-border, #E5E7EB);
}
.table-sticky-actions > tbody tr,
.enterprise-dt .table-sticky-actions tbody tr {
    position: relative;
}
.table-sticky-actions > tbody tr.dt-row-menu-open,
.enterprise-dt .table-sticky-actions tbody tr.dt-row-menu-open {
    z-index: 5;
}
.table-sticky-actions > tbody tr.dt-row-menu-open > td:last-child,
.enterprise-dt .table-sticky-actions tbody tr.dt-row-menu-open > td:last-child {
    z-index: 6;
}

/* Hover: keep opaque white base; Bootstrap --table-accent-bg tints via inset */
.table-hover.table-sticky-actions > tbody tr:hover > td:last-child,
.enterprise-dt .dataTables_scrollBody .table-hover.table-sticky-actions > tbody tr:hover > td:last-child {
    --table-bg: var(--rc-action-bg, #ffffff);
    background-color: var(--rc-action-bg, #ffffff) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow:
        inset 0 0 0 9999px var(--table-accent-bg),
        var(--rc-action-shadow, -6px 0 10px -6px rgba(17, 17, 17, 0.14)) !important;
}

/* Action buttons in sticky last-column pattern */
.table-sticky-actions > tbody td:last-child .btn,
.enterprise-dt .table-sticky-actions td:last-child .btn {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.78rem;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.table-sticky-actions > tbody td:last-child .btn + .btn,
.table-sticky-actions > tbody td:last-child .btn + .dropdown,
.table-sticky-actions > tbody td:last-child a.btn + a.btn,
.enterprise-dt .table-sticky-actions td:last-child .btn + .btn,
.enterprise-dt .table-sticky-actions td:last-child .btn + .dropdown,
.enterprise-dt .table-sticky-actions td:last-child a.btn + a.btn {
    margin-left: 0.35rem;
}

/* Dropdowns in sticky action column — escape overflow clipping (Bootstrap pattern) */
.table-sticky-actions > tbody td:last-child .dropdown,
.enterprise-dt .table-sticky-actions td:last-child .dropdown {
    position: static;
}
.table-sticky-actions .dropdown-menu,
.enterprise-dt .table-sticky-actions .dropdown-menu {
    min-width: 12.5rem;
    z-index: 1090;
}
.table-sticky-actions .dropdown-menu .dropdown-item,
.enterprise-dt .table-sticky-actions .dropdown-menu .dropdown-item {
    white-space: nowrap;
}

/* ── Shared list-row avatar (EnterpriseTable.avatar) ────────────────────────── */
.ent-avatar {
    width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    background:#F1F1F1; color:#111111; font-weight:700; font-size:1rem;
}
.ent-avatar .ent-dot {
    position:absolute; bottom:-1px; right:-1px; width:11px; height:11px;
    border-radius:50%; border:2px solid #fff;
}
.ent-avatar .ent-dot.is-on  { background:#111111; }
.ent-avatar .ent-dot.is-off { background:#C7C7C7; }

/* ══ KYC Desk — operations workspace ═══════════════════════════════════════ */
/* Key/value definition rows (used across every review tab) */
.kv-row { border-bottom:1px solid var(--bs-border-color); }
.kv-row:last-child { border-bottom:0; }
.kv-row .kv-label { min-width:38%; }

/* Risk indicators — subtle only, never alarming */
.risk-badge { background:#fff; border:1px solid var(--bs-border-color); color:#374151; font-weight:500; }
.risk-badge.risk-high { border-color:#f0c9c6; color:#8a1c15; background:#fdf3f2; }
.risk-badge.risk-warn { border-color:#e5e7eb; color:#4b5563; background:#f9fafb; }

/* Collapsible raw JSON viewer */
.json-pre {
    background:#0f172a; color:#e2e8f0; border-radius:8px; padding:14px 16px;
    font-size:.78rem; line-height:1.5; max-height:340px; overflow:auto;
    white-space:pre-wrap; word-break:break-word;
}

/* Review workspace tabs — quiet, underlined, dense */
.kyc-tabs { border-bottom:1px solid var(--bs-border-color); gap:2px; flex-wrap:wrap; }
.kyc-tabs .nav-link {
    border:0; border-bottom:2px solid transparent; border-radius:0;
    color:#6b7280; font-weight:500; font-size:.86rem; padding:.6rem .9rem;
}
.kyc-tabs .nav-link:hover { color:#111827; }
.kyc-tabs .nav-link.active { color:var(--primary,#BF1914); border-bottom-color:var(--primary,#BF1914); background:transparent; }
.kyc-tabs .nav-link .badge { font-size:.65rem; }

/* Document tiles in the Documents tab */
.doc-preview { border:1px solid var(--bs-border-color); border-radius:10px; overflow:hidden; background:#fff; }
.doc-preview .doc-thumb {
    height:180px; background:#f3f4f6; display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative;
}
.doc-preview .doc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.doc-preview .doc-missing { color:#9ca3af; text-align:center; font-size:.8rem; }

/* Audit timeline */
.kyc-timeline { position:relative; margin:0; padding:0; list-style:none; }
.kyc-timeline::before {
    content:''; position:absolute; left:15px; top:4px; bottom:4px; width:2px; background:var(--bs-border-color);
}
.kyc-timeline > li { position:relative; padding:0 0 18px 44px; }
.kyc-timeline > li:last-child { padding-bottom:0; }
.kyc-timeline .tl-dot {
    position:absolute; left:6px; top:0; width:22px; height:22px; border-radius:50%;
    background:#fff; border:2px solid var(--bs-border-color); display:flex; align-items:center; justify-content:center;
    font-size:.72rem; color:#6b7280;
}
.kyc-timeline .tl-dot.is-approved { border-color:#111; color:#111; }
.kyc-timeline .tl-dot.is-rejected { border-color:var(--primary,#BF1914); color:var(--primary,#BF1914); }

/* Reviewer notes */
.kyc-note { border:1px solid var(--bs-border-color); border-radius:10px; background:#fff; }
.kyc-note + .kyc-note { margin-top:10px; }

/* Support Center — wizard + chat */
.support-wizard-progress { border-radius:999px; background:#eee; }
.cat-pick { cursor:pointer; }
.cat-pick span {
    display:inline-block; padding:.5rem .9rem;
    border:1px solid var(--bs-border-color); border-radius:999px;
    font-size:.875rem; background:#fff; color:#374151;
    transition:background .12s,border-color .12s,color .12s;
    user-select:none;
}
.cat-pick:hover span { border-color:#9ca3af; }
.cat-pick input:checked + span,
.cat-pick.is-selected span {
    background:var(--primary,#BF1914); border-color:var(--primary,#BF1914); color:#fff;
}
.txn-pick.is-selected { border-color:var(--primary,#BF1914); background:rgba(191,25,20,.06); font-weight:600; }
.support-chat { min-height:0; }
.support-chat-messages { max-height:420px; }
.chat-row { display:flex; align-items:flex-start; gap:6px; margin-bottom:.65rem; }
.chat-row.chat-out { flex-direction:row-reverse; }
.chat-avatar { width:28px; height:28px; font-size:.7rem; flex-shrink:0; }
.chat-bubble {
    max-width:82%; padding:8px 11px; font-size:.8125rem; line-height:1.45;
    border:1px solid var(--bs-border-color); border-radius:10px; background:#fff;
}
.chat-row.chat-out .chat-bubble {
    background:#f9fafb; color:#374151;
    border-color:#e5e7eb; border-right:3px solid var(--primary,#BF1914);
    border-radius:10px 10px 4px 10px;
}
.chat-row.chat-in .chat-bubble {
    background:#fff; border-color:#e5e7eb;
    border-left:3px solid #6b7280; border-radius:10px 10px 10px 4px;
}
.chat-row.chat-system .chat-bubble { background:#fffbeb; border-color:#fde68a; font-style:italic; }
.chat-meta { font-size:.75rem; margin-bottom:4px !important; }
.chat-body { word-break:break-word; }
.chat-time { font-size:.7rem; color:#9ca3af !important; margin-top:4px !important; }
.chat-attachments .btn { padding:.2rem .45rem; font-size:.75rem; }
.support-read-receipts { font-size:.75rem; padding-top:.5rem !important; margin-bottom:.5rem !important; }
.support-read-receipts strong { font-weight:600; }
.support-chat-compose { padding-top:.65rem !important; }
.support-chat-compose textarea { font-size:.875rem; }

/* ── Enterprise form controls layout (Select2 + Datepicker) ─────────── */
input.mydate[readonly],
input.datepicker-input[readonly] {
    cursor: pointer;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(var(--s2-padding-y, 0.5rem) * 2 + var(--s2-line-height, 1.5) * 1em);
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: var(--form-select-padding-x, 0.75rem);
    padding-right: 1.75rem;
    line-height: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 20px;
    right: 0.5rem;
}
/* Match form-select-sm when Select2 wraps a small select */
select.form-select-sm + .select2-container--default .select2-selection--single {
    min-height: calc(0.375rem * 2 + var(--body-line-height-sm, 1.8334) * 1em);
    font-size: var(--form-select-font-size, var(--body-font-size-sm, 0.75rem));
}
select.form-select-sm + .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0.75rem;
    padding-right: 1.75rem;
}
.modal .select2-container { z-index: 1060; }
.select2-container--open { z-index: 1060; }
.select2-container { max-width: 100%; }
.datepicker-dropdown { z-index: 1065; }

/* ══════════════════════════════════════════════════════════════════════════
   Google Material-inspired INPUT BORDERS (border styling only)
   Labels, sizing, padding, radius, and layout are unchanged.
   Focus/error use a 1px outer ring (0 blur) to reach 2px without layout shift.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Base text-like controls ─────────────────────────────────────────── */
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.form-select,
textarea.form-control,
input.mydate,
input.datepicker-input,
.navbar-search.form-control {
    border: 1px solid var(--mat-input-border);
    box-shadow: none;
    outline: none;
    transition: var(--mat-input-border-transition);
}

/* ── Focus: 2px brand colour, no glow / no bootstrap ring ─────────────── */
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
.form-select:focus,
textarea.form-control:focus,
input.mydate:focus,
input.datepicker-input:focus,
.navbar-search.form-control:focus {
    border-color: var(--mat-input-focus);
    box-shadow: 0 0 0 1px var(--mat-input-focus);
    outline: none;
}

/* ── Error: 2px #D93025 ──────────────────────────────────────────────── */
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]).is-invalid,
.form-select.is-invalid,
textarea.form-control.is-invalid,
.was-validated .form-control:not([type="checkbox"]):not([type="radio"]):invalid,
.was-validated .form-select:invalid,
.was-validated textarea.form-control:invalid {
    border-color: var(--mat-input-error);
    box-shadow: 0 0 0 1px var(--mat-input-error);
}

.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]).is-invalid:focus,
.form-select.is-invalid:focus,
textarea.form-control.is-invalid:focus {
    border-color: var(--mat-input-error);
    box-shadow: 0 0 0 1px var(--mat-input-error);
}

/* ── Disabled ────────────────────────────────────────────────────────── */
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):disabled,
.form-select:disabled,
textarea.form-control:disabled {
    border-color: var(--mat-input-disabled-border);
    box-shadow: none;
}

/* ── Readonly ────────────────────────────────────────────────────────── */
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])[readonly],
input.mydate[readonly],
input.datepicker-input[readonly] {
    border-color: var(--mat-input-readonly-border);
    background-color: #fff;
    box-shadow: none;
}

/* ── Select2 ─────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--mat-input-border) !important;
    box-shadow: none !important;
    transition: var(--mat-input-border-transition);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--mat-input-focus) !important;
    box-shadow: 0 0 0 1px var(--mat-input-focus) !important;
    outline: none !important;
}

.is-invalid + .select2-container--default .select2-selection--single,
.is-invalid + .select2-container--default .select2-selection--multiple,
select.is-invalid + .select2-container--default .select2-selection--single,
select.is-invalid + .select2-container--default .select2-selection--multiple {
    border-color: var(--mat-input-error) !important;
    box-shadow: 0 0 0 1px var(--mat-input-error) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: var(--mat-input-disabled-border) !important;
    box-shadow: none !important;
}

/* ── Input groups: preserve joined borders, apply Material on focus ──── */
.input-group > .form-control:not([type="checkbox"]):not([type="radio"]):focus,
.input-group > .form-select:focus {
    border-color: var(--mat-input-focus);
    box-shadow: 0 0 0 1px var(--mat-input-focus);
    z-index: 3;
}


/* ── Fixed form action bar (full-page forms) ────────────────────────────────
   Invoice-style: Cancel/Save pinned to the bottom of .content-wrapper
   (content body), while .content-inner scrolls above it.
   JS (form-footer.js) moves .erp-form-footer / matching card-footers into
   #erp-form-actions-host.
   ─────────────────────────────────────────────────────────────────────────── */
.content-wrapper {
    position: relative;
}

.erp-form-actions-host {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    min-height: 3.75rem;
    padding: .85rem 1.25rem;
    background: #fff;
    border-top: 1px solid var(--border-color, #E5E7EB);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
}

.erp-form-actions-host.is-active {
    display: flex;
}

.erp-form-actions-host .erp-form-footer,
.erp-form-actions-host .card-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    position: static;
}

.erp-form-actions-host .erp-form-footer.justify-content-between,
.erp-form-actions-host .erp-form-footer[class*="justify-content-between"] {
    justify-content: space-between;
}

.erp-form-actions-host .btn {
    min-width: 7.5rem;
}

/* Leave room so last fields are not hidden under the pinned bar */
.content-wrapper.has-form-actions .content-inner {
    padding-bottom: 4.75rem;
}

/* Avoid stacked footers: hide page copyright when form actions are pinned */
.content-wrapper.has-form-actions .navbar-footer {
    display: none !important;
}

.content .erp-form-footer-spacer {
    display: none;
}

/* ── Inline editable / bulk form tables (tight cells, no empty gaps) ───────── */
.table-form-compact {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-form-compact > :not(caption) > * > * {
    padding: 0.35rem 0.4rem;
    vertical-align: middle;
    min-width: 0;
    overflow: hidden;
}

.table-form-compact thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--body-color, #6c757d);
    line-height: 1.2;
}

.table-form-compact .form-control,
.table-form-compact .form-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.table-form-compact .form-control-sm,
.table-form-compact .form-select-sm {
    min-height: calc(1.4em + 0.4rem + 2px);
    font-size: 0.8125rem;
}

/* Native date/time/number controls often force min-width → horizontal scroll */
.table-form-compact input[type="date"],
.table-form-compact input[type="time"],
.table-form-compact input[type="number"],
.table-form-compact input[type="text"] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.table-form-compact td .btn {
    white-space: nowrap;
}

.table-form-compact .col-actions {
    width: 2.5rem;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Flush table to card edges when body padding is removed */
.card-body.p-0 > form > .table-form-compact,
.card-body.p-0 > .table-form-compact {
    border-radius: 0;
}

.card-body.p-0 > form > .table-form-compact.border-0 {
    border-left: 0 !important;
    border-right: 0 !important;
}

.card-body.p-0 > form > .table-form-compact > :not(caption) > * > *:first-child {
    padding-left: 0.75rem;
}

.card-body.p-0 > form > .table-form-compact > :not(caption) > * > *:last-child {
    padding-right: 0.75rem;
}

/* Form inputs inside Limitless tables fill the cell without forcing bordered layout */
.table .form-control,
.table .form-select {
    max-width: 100%;
}

.table.table-sm .form-control-sm,
.table.table-sm .form-select-sm {
    min-width: 0;
}

.card {
  border: 0;
  margin-bottom: var(--spacer);
}
.card {
  border-radius: 4px !important;
  box-shadow: rgba(21, 45, 75, 0.2) 0px 1px 2px, rgba(21, 45, 75, 0.2) 0px 0px 1px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Billing checkout / pay invoice
   ═══════════════════════════════════════════════════════════════════════════════ */
.pay-checkout .pay-kicker {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 0.2rem;
}
.pay-checkout .pay-amount {
    font-size: 2.35rem;
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: #111111;
}
.pay-checkout .pay-amount-note {
    font-size: 0.875rem;
    margin-top: 0.15rem;
}
.pay-checkout .pay-meta-label {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 0.15rem;
}
.pay-checkout .pay-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line, #E5E7EB);
}
.pay-checkout .pay-lines thead th {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
    background: #F1F1F1;
}
.pay-checkout .pay-total-row th {
    font-size: 0.95rem;
    color: #111111;
    border-top: 1px solid #111111;
}
.pay-checkout .pay-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 4px;
    background: #F1F1F1;
    font-size: 0.875rem;
    color: #374151;
}
.pay-checkout .pay-notice i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.pay-checkout .pay-notice-overdue {
    background: #fff;
    border-color: #BF1914;
    color: #111111;
}
.pay-checkout .pay-notice-overdue i {
    color: #BF1914;
}
.pay-checkout .pay-coupon-applied {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 4px;
    background: #F1F1F1;
    font-size: 0.875rem;
}
.pay-checkout .pay-cta.btn-labeled {
    display: flex;
    width: 100%;
    justify-content: center;
}
.pay-checkout .pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pay-checkout .pay-method-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 4px;
    background: #fff;
    font-size: 0.78rem;
    color: #6B7280;
}
.pay-checkout .pay-secure {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #6B7280;
    line-height: 1.4;
}
.pay-checkout .pay-secure i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #111111;
}
@media (min-width: 992px) {
    .pay-checkout .pay-aside {
        position: sticky;
        top: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Billing payment result (success / failed)
   ═══════════════════════════════════════════════════════════════════════════════ */
.pay-result-hero .pay-result-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    font-size: 1.75rem;
}
.pay-result-hero.is-success .pay-result-icon {
    background: #111111;
    color: #fff;
}
.pay-result-hero.is-failed .pay-result-icon {
    background: #BF1914;
    color: #fff;
}
.pay-result-hero .pay-result-title {
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #111111;
}
.pay-result-hero.is-failed .pay-result-title {
    color: #BF1914;
}
.pay-result-hero .pay-result-message {
    max-width: 36rem;
    color: #374151;
    margin-bottom: 0;
}
.pay-result-hero .pay-result-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line, #E5E7EB);
}
@media (min-width: 768px) {
    .pay-result-hero .pay-result-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Page actions live in the first card header (see page-actions.js) */
#erp-page-actions {
    display: none;
}
#erp-page-actions.is-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.card-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card-header-actions > .d-flex {
    gap: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SaaS subscription invoice (web + print)
   ═══════════════════════════════════════════════════════════════════════════════ */
.saas-invoice-page {
    margin: 0 auto;
}
.saas-invoice-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7280;
}
.saas-invoice-back {
    font-size: 0.82rem;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
}
.saas-invoice-back:hover {
    color: #BF1914;
}
.saas-invoice-toolbar .card-header {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.saas-invoice-toolbar-number {
    font-size: 1.05rem;
    font-weight: 650;
    color: #050505;
}
.saas-invoice-toolbar-amount {
    font-size: 1.85rem;
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: #050505;
    margin-top: 0.35rem;
}
.saas-invoice-toolbar-school {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: #6B7280;
}
.saas-invoice-sheet {
    background: #fff;
    border-radius: 4px;
    box-shadow: rgba(21, 45, 75, 0.2) 0px 1px 2px, rgba(21, 45, 75, 0.2) 0px 0px 1px;
    padding: 2.15rem 1.85rem 1.75rem;
}
.saas-invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 1.35rem;
}
.saas-invoice-brand-name {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #DC1E23;
    line-height: 1.2;
}
.saas-invoice-brand-tagline {
    font-size: 0.78rem;
    color: #6B7280;
    margin-top: 0.15rem;
}
.saas-invoice-meta {
    text-align: right;
}
.saas-invoice-number {
    font-size: 0.88rem;
    color: #6B7280;
    margin: 0.15rem 0 0.45rem;
}
.saas-invoice-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #F1F1F1;
    color: #111111;
}
.saas-invoice-status-pill.is-paid {
    background: #111111;
    color: #fff;
}
.saas-invoice-status-pill.is-overdue,
.saas-invoice-status-pill.is-failed,
.saas-invoice-status-pill.is-cancelled {
    background: #BF1914;
    color: #fff;
}
.saas-invoice-hero {
    padding: 0.35rem 0 1.5rem;
}
.saas-invoice-hero-amount {
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.05;
    color: #050505;
}
.saas-invoice-hero-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 0.35rem 0 0.55rem;
}
.saas-invoice-status-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid #E5E7EB;
    background: #fff;
}
.saas-invoice-status-card.is-paid {
    border-color: #111111;
}
.saas-invoice-status-card.is-overdue,
.saas-invoice-status-card.is-failed {
    border-color: #BF1914;
}
.saas-invoice-status-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F1F1;
    color: #111111;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.saas-invoice-status-card.is-paid .saas-invoice-status-icon {
    background: #111111;
    color: #fff;
}
.saas-invoice-status-card.is-overdue .saas-invoice-status-icon,
.saas-invoice-status-card.is-failed .saas-invoice-status-icon {
    background: #BF1914;
    color: #fff;
}
.saas-invoice-status-headline {
    font-size: 1.05rem;
    font-weight: 700;
    color: #050505;
    margin-bottom: 0.55rem;
}
.saas-invoice-status-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}
.saas-invoice-section {
    padding: 1.35rem 0 0.15rem;
    margin-top: 1.15rem;
    border-top: 1px solid #E5E7EB;
}
.saas-invoice-school-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #050505;
    margin: 0.15rem 0 0.2rem;
}
.saas-invoice-muted {
    color: #6B7280;
    font-size: 0.9rem;
}
.saas-invoice-plan-card {
    display: flex;
    gap: 0.9rem;
    margin-top: 0.65rem;
    padding: 1.05rem 1.1rem;
    background: #F8F8F8;
    border-left: 3px solid #DC1E23;
}
.saas-invoice-plan-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #BF1914;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.saas-invoice-plan-name {
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #050505;
}
.saas-invoice-plan-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    margin-top: 0.55rem;
    font-size: 0.88rem;
    color: #374151;
}
.saas-invoice-plan-period {
    margin-top: 0.55rem;
    font-weight: 650;
    color: #050505;
}
.saas-invoice-calc {
    margin-top: 0.65rem;
}
.saas-invoice-calc-qty {
    font-size: 1.2rem;
    font-weight: 700;
    color: #050505;
}
.saas-invoice-calc-op {
    color: #6B7280;
    margin: 0.15rem 0 0.55rem;
}
.saas-invoice-calc-eq {
    font-size: 1.65rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #050505;
}
.saas-invoice-totals,
.saas-invoice-facts {
    margin: 0.55rem 0 0;
}
.saas-invoice-totals > div,
.saas-invoice-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.38rem 0;
}
.saas-invoice-totals dt,
.saas-invoice-facts dt {
    color: #6B7280;
    font-weight: 500;
}
.saas-invoice-totals dd,
.saas-invoice-facts dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: #050505;
}
.saas-invoice-totals .is-total {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid #050505;
}
.saas-invoice-totals .is-total dt,
.saas-invoice-totals .is-total dd,
.saas-invoice-totals .is-paid dt,
.saas-invoice-totals .is-paid dd {
    font-weight: 750;
    color: #050505;
}
.saas-invoice-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
}
.saas-invoice-note {
    color: #6B7280;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
.saas-invoice-footer {
    margin-top: 1.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid #E5E7EB;
}
.saas-invoice-footer-company {
    font-weight: 750;
    color: #050505;
}
.saas-invoice-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    margin: 0.35rem 0;
    font-size: 0.85rem;
    color: #6B7280;
}
@media (max-width: 767.98px) {
    .saas-invoice-sheet {
        padding: 1.35rem 1rem 1.15rem;
    }
    .saas-invoice-header,
    .saas-invoice-status-card,
    .saas-invoice-plan-card,
    .saas-invoice-totals > div,
    .saas-invoice-facts > div {
        flex-direction: column;
    }
    .saas-invoice-meta {
        text-align: left;
    }
    .saas-invoice-hero-amount,
    .saas-invoice-toolbar-amount {
        font-size: 2rem;
    }
    .saas-invoice-totals dd,
    .saas-invoice-facts dd {
        text-align: left;
    }
}
@media print {
    .nav-primary-topbar,
    .navbar,
    .sidebar,
    .sidebar-main,
    .navbar-footer,
    .alert,
    .saas-invoice-toolbar,
    #erp-page-actions,
    .offcanvas,
    .erp-form-actions-host {
        display: none !important;
    }
    .page-content,
    .content-wrapper,
    .content-inner,
    .content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    .saas-invoice-page {
        max-width: none;
    }
    .saas-invoice-sheet {
        box-shadow: none !important;
        padding: 0;
    }
}