/* ══════════════════════════════════════════════════════════════════════════
   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
             Background #F8F9FB · Borders #E5E7EB
   No gradients. No purple/blue/green/orange accents.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --brand:        #BF1914;
    --brand-hover:  #A6150F;
    --brand-active: #8E120D;
    --brand-dark:   #8A0E0A;
    --brand-rgb:    191, 25, 20;
    --ink:          #111111;
    --app-bg:       #F8F9FB;
    --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;

    /* Bootstrap fallbacks (some components read --bs-*) */
    --bs-primary:        #BF1914;
    --bs-primary-rgb:    191, 25, 20;
    --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; }

/* Primary buttons — Limitless sets colours directly, so override explicitly.
   (Also set the --bs-* vars so hover/active states behave.) */
.btn-primary {
    /* Limitless uses its own --btn-* namespace (not Bootstrap --bs-btn-*) */
    --btn-bg: var(--brand);
    --btn-border-color: var(--brand);
    --btn-hover-bg: var(--brand-hover);
    --btn-hover-border-color: var(--brand-hover);
    --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 {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: #fff !important;
}
.btn-primary:focus, .btn-primary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .25) !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    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 {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.btn-flat-primary, .btn-light-primary {
    --bs-btn-color: var(--brand);
    color: var(--brand) !important;
}
.btn-flat-primary:hover, .btn-light-primary:hover {
    background-color: rgba(var(--brand-rgb), .12) !important;
    color: var(--brand) !important;
}

/* Form checks — brand colour only (not Material border inputs) */
.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: var(--brand); }

/* 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); }
.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: sticky header + horizontal scroll only (page scrolls vertically) ─ */
.table-sticky {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    -webkit-overflow-scrolling: touch;
}

/* 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: max-content !important;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.table-sticky thead th,
.enterprise-dt .dataTables_scrollHead thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-bg);
    box-shadow: 0 1px 0 var(--line);
}

/* No vertical scroll panes inside DataTables — window handles Y scroll */
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollFoot {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
}

.dataTables_wrapper .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
}

.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  → sticky header + horizontal overflow; page scrolls vertically
   .table-sticky-actions → freeze the last (Actions) column while scrolling */
.table-sticky-actions > thead th:last-child,
.table-sticky-actions > tbody td:last-child,
.enterprise-dt .dataTables_scrollHead .table-sticky-actions th:last-child,
.enterprise-dt .dataTables_scrollBody .table-sticky-actions td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 1;
}
.table-sticky-actions > thead th:last-child,
.enterprise-dt .dataTables_scrollHead .table-sticky-actions th:last-child {
    z-index: 4;
    background: var(--app-bg);
    box-shadow: -8px 0 8px -8px rgba(17,17,17,.12), 0 1px 0 var(--line);
}
.table-sticky-actions > tbody td:last-child,
.enterprise-dt .dataTables_scrollBody .table-sticky-actions td:last-child {
    min-width: 3.75rem;
    width: 3.75rem;
    overflow: visible;
}
.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;
}
.table-sticky-actions > tbody td:last-child::before,
.enterprise-dt .dataTables_scrollBody .table-sticky-actions td:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    box-shadow: -8px 0 8px -8px rgba(17,17,17,.18);
    pointer-events: none;
}
.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 { background: var(--app-bg); }

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

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD LOGIN PAGE (Rudocode CMS / School CRM style)
   Light grid canvas · left product story · right auth card.
   ══════════════════════════════════════════════════════════════════════════ */
html.login-page,
html.login-page body {
    height: 100%;
    margin: 0;
    background: #fff;
}

.login-page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    background-image:
        linear-gradient(rgba(17, 17, 17, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, .045) 1px, transparent 1px);
    background-size: 28px 28px;
}

.login-split {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2.5rem 2rem 1.5rem;
    gap: 2.5rem;
    align-items: center;
}

/* ── Left product story ────────────────────────────────────────────────── */
.login-brand-panel {
    flex: 1 1 52%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--ink);
    overflow: visible;
}

.login-brand-panel::before { display: none; }

.login-brand-kicker {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand);
    line-height: 1.15;
}

.login-brand-eyebrow {
    margin: 0 0 1.5rem;
    font-size: .8125rem;
    color: #6B7280;
    line-height: 1.4;
}

.login-brand-headline {
    margin: 0 0 .85rem;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.2;
    max-width: 18ch;
}

.login-brand-tagline {
    margin: 0 0 1.5rem;
    font-size: .925rem;
    line-height: 1.6;
    color: #6B7280;
    max-width: 34rem;
}

.login-brand-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem 1.5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
}

.login-brand-features .login-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .7rem;
    line-height: 1;
}

.login-brand-visual {
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(17, 17, 17, .08);
    background: #F3F4F6;
    line-height: 0;
}

.login-brand-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
}

.login-brand-secure {
    margin: 1rem 0 0;
    font-size: .78rem;
    color: #9CA3AF;
}

/* ── Right auth card ───────────────────────────────────────────────────── */
.login-form-panel {
    flex: 0 0 auto;
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    background: transparent;
    margin-left: auto;
}

.login-form-wrap { width: 100%; }

.login-mobile-brand {
    display: none;
    margin-bottom: 1.25rem;
}

.login-mobile-brand .login-brand-kicker {
    font-size: 1.25rem;
    margin-bottom: .15rem;
}

.login-mobile-brand .login-brand-eyebrow {
    margin: 0;
    font-size: .75rem;
}

.login-card {
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(17, 17, 17, .08), 0 2px 8px rgba(17, 17, 17, .04);
    padding: 2rem 1.75rem 1.5rem;
}

.login-card-title {
    margin: 0 0 .35rem;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.login-card-subtitle {
    margin: 0 0 1.35rem;
    font-size: .875rem;
    color: #6B7280;
    line-height: 1.45;
}

.login-portal-switch {
    margin: -.85rem 0 1.15rem;
    font-size: .78rem;
    color: #6B7280;
}

.login-portal-switch a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.login-portal-switch a:hover { color: var(--brand-hover); }

.login-card .form-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .4rem;
}

.login-card .form-label .req {
    color: var(--brand);
    margin-left: 1px;
}

.login-card .form-control {
    height: 42px;
    min-height: 42px;
}

.login-card .form-control-feedback-icon { color: #9CA3AF; }

.login-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9CA3AF;
    z-index: 5;
    line-height: 1;
    padding: 4px;
    border: 0;
    background: transparent;
}

.login-pw-toggle:hover { color: #6B7280; }

.login-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.login-meta-row .form-check-label {
    font-size: .84rem;
    color: #6B7280;
}

.login-forgot {
    font-size: .84rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}

.login-forgot:hover { color: var(--brand-hover); }

.login-submit {
    width: 100%;
    height: 44px;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: 8px;
}

.login-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem .85rem;
    margin: 1.15rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #F1F1F1;
}

.login-trust-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: #6B7280;
    line-height: 1.2;
}

.login-trust-item i {
    color: #9CA3AF;
    font-size: .9rem;
    flex-shrink: 0;
}

.login-help {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: .8125rem;
    color: #6B7280;
}

.login-help a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.login-help a:hover { color: var(--brand-hover); }

.login-page-footer {
    padding: .75rem 2rem 1.25rem;
    text-align: right;
    font-size: .72rem;
    color: #9CA3AF;
    line-height: 1.4;
}

.login-page-footer strong {
    color: #6B7280;
    font-weight: 600;
}

/* SweetAlert on login — brand polish only */
.login-page .swal2-popup { border-radius: 12px !important; font-family: inherit !important; }
.login-page .swal2-styled.swal2-confirm {
    background: var(--brand) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.login-page .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25) !important;
}

@media (max-width: 991.98px) {
    .login-split {
        padding: 2rem 1.25rem 1rem;
        gap: 1.75rem;
    }
    .login-brand-headline { max-width: none; }
    .login-brand-visual { max-width: 100%; }
}

@media (max-width: 767.98px) {
    .login-split {
        flex-direction: column;
        padding: 1.5rem 1rem 1rem;
        align-items: stretch;
    }
    .login-brand-panel { display: none; }
    .login-form-panel {
        width: 100%;
        margin: 0;
        min-height: calc(100vh - 5rem);
        justify-content: center;
    }
    .login-mobile-brand { display: block; text-align: center; }
    .login-page-footer { text-align: center; padding: .5rem 1rem 1.25rem; }
}

[data-color-theme=dark] .login-page-shell,
html[data-color-theme=dark] .login-page-shell {
    background-color: #1a1b1e;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
}
[data-color-theme=dark] .login-card,
html[data-color-theme=dark] .login-card {
    background: #2c2d33;
    border-color: #4d4d51;
}
[data-color-theme=dark] .login-card-title,
html[data-color-theme=dark] .login-card-title,
[data-color-theme=dark] .login-brand-headline,
html[data-color-theme=dark] .login-brand-headline,
[data-color-theme=dark] .login-brand-features li,
html[data-color-theme=dark] .login-brand-features li {
    color: #fff;
}
[data-color-theme=dark] .login-card .form-label,
html[data-color-theme=dark] .login-card .form-label {
    color: #e5e7eb;
}