/* ==========================================================================
   Balance One — Master Enterprise SaaS Design System
   Version: 2026.10.03-v2.2.0-EnterpriseImportPolish [Production Cache-Busted]
   Palette: White-First + Dark Teal Brand (#001D23) + Mint Accent (#00B388)
   Typography: IBM Plex Sans Arabic (AR) + Plus Jakarta Sans / Inter (EN)
   ========================================================================== */

/* ── 01. Google Fonts Import ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── 01. Design Tokens ───────────────────────────────────────────────────── */
:root {
    /* Brand Scale (Dark Teal) */
    --brand-950: #001D23;
    --brand-900: #06272B;
    --brand-800: #0B3436;
    --brand-700: #124541;
    --brand-600: #00B388;
    --brand-500: #1C5C53;
    --brand-400: #2C7468;
    --brand-300: #57988D;
    --brand-200: #C9D5D3;
    --brand-100: #DFECE9;
    --brand-50:  #F2F7F6;

    /* Primary Semantic Tokens */
    --bo-primary: #001D23;
    --bo-primary-hover: #06272B;
    --bo-primary-active: #0B3436;
    --bo-accent: #00B388;
    --bo-accent-hover: #009670;
    --bo-accent-subtle: #F2F7F6;

    /* Backward-compatible and cross-view semantic color aliases */
    --color-primary: #001D23;
    --color-primary-hover: #06272B;
    --color-primary-active: #0B3436;
    --color-accent: #00B388;
    --color-accent-hover: #009670;
    --color-text-primary: #102427;
    --color-text-secondary: #465B5D;
    --color-text-muted: #6C7D7E;
    --color-border: #E2E9E8;
    --color-border-subtle: #EDF1F0;
    --color-border-strong: #C9D5D3;
    --color-bg: #FFFFFF;
    --color-bg-subtle: #FAFBFB;
    --color-bg-muted: #F6F8F8;
    --color-surface: #FFFFFF;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Backgrounds (White-First SaaS) */
    --bg-page: #FFFFFF;
    --bg-canvas: #FAFBFB;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-subtle: #FAFBFB;
    --bg-muted: #F6F8F8;
    --bg-brand-soft: #F2F7F6;

    /* Text Colors */
    --bo-text-primary: #102427;
    --bo-text-secondary: #465B5D;
    --bo-text-muted: #6C7D7E;
    --bo-text-tertiary: #6C7D7E;
    --bo-text-disabled: #9CA9AA;
    --bo-text-inverted: #FFFFFF;

    /* Borders */
    --bo-border: #E2E9E8;
    --bo-border-subtle: #EDF1F0;
    --bo-border-strong: #C9D5D3;
    --bo-border-focus: #001D23;

    /* Status & Feedback */
    --bo-success: #039855;
    --bo-success-bg: #ECFDF3;
    --bo-success-border: #A6F4C5;

    --bo-warning: #DC6803;
    --bo-warning-bg: #FFFAEB;
    --bo-warning-border: #FEDF89;

    --bo-danger: #D92D20;
    --bo-danger-bg: #FEF3F2;
    --bo-danger-border: #FECDCA;

    --bo-info: #1570EF;
    --bo-info-bg: #EFF8FF;
    --bo-info-border: #B2DDFF;

    /* Mathematical 4px Base Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* Elevation Shadows */
    --shadow-subtle: 0 1px 2px 0 rgba(0, 29, 35, 0.04);
    --shadow-dropdown: 0 10px 25px -5px rgba(0, 29, 35, 0.08), 0 8px 10px -6px rgba(0, 29, 35, 0.04);
    --shadow-modal: 0 20px 25px -5px rgba(0, 29, 35, 0.1), 0 8px 10px -6px rgba(0, 29, 35, 0.05);
    --shadow-card-hover: 0 4px 16px -2px rgba(0, 29, 35, 0.06);

    /* Typography */
    --font-en: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-ar: 'IBM Plex Sans Arabic', 'Alexandria', system-ui, -apple-system, sans-serif;

    /* Layout Dimensions */
    --navbar-height: 72px;
    --topbar-height: 60px;
    --sidebar-width: 250px;
    --container-max: 1280px;
    --app-content-max: 1440px;
    --reading-max: 780px;

    /* Transitions */
    --ease-fast: 0.15s ease-in-out;
    --ease-standard: 0.2s ease-in-out;
}

/* ── 02. Reset & Base ────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-page);
    color: var(--bo-text-primary);
    font-family: var(--font-en);
    font-size: 0.9375rem;
    line-height: 1.6;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic RTL Typography */
[dir="rtl"] body,
[dir="rtl"] {
    font-family: var(--font-ar);
    line-height: 1.65;
}

a {
    color: var(--brand-950);
    text-decoration: none;
    transition: color var(--ease-fast);
}

a:hover {
    color: var(--brand-700);
}

img, svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* ── 03. Typography Hierarchy ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--brand-950);
    line-height: 1.3;
}

.display-xl {
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--brand-950);
}

.display-lg {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--brand-950);
}

.display-md {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand-950);
}

.lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--bo-text-secondary);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-950);
    background-color: var(--brand-50);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--brand-100);
    margin-bottom: 1rem;
}

.eyebrow i {
    color: var(--brand-600);
}

/* ── 04. Containers & Grids ──────────────────────────────────────────────── */
.bo-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.bo-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.bo-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.bo-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 12-Column Responsive Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -0.5rem;
    row-gap: 0.5rem;
}

.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-inline: 0.5rem;
}

.g-0 { margin-inline: 0; row-gap: 0; }
.g-0 > * { padding-inline: 0; }

.g-1 { margin-inline: -0.25rem; row-gap: 0.25rem; }
.g-1 > * { padding-inline: 0.25rem; }

.g-2 { margin-inline: -0.375rem; row-gap: 0.375rem; }
.g-2 > * { padding-inline: 0.375rem; }

.g-3 { margin-inline: -0.5rem; row-gap: 0.5rem; }
.g-3 > * { padding-inline: 0.5rem; }

.g-4 { margin-inline: -0.75rem; row-gap: 0.75rem; }
.g-4 > * { padding-inline: 0.75rem; }

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-sm-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-3  { flex: 0 0 auto; width: 25%; }
    .col-sm-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-sm-6  { flex: 0 0 auto; width: 50%; }
    .col-sm-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-md-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9  { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-lg-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-xl-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-3  { flex: 0 0 auto; width: 25%; }
    .col-xl-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-6  { flex: 0 0 auto; width: 50%; }
    .col-xl-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Flexbox & Layout Utilities */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
.d-grid { display: grid !important; }

.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-center { align-self: center !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.me-1 { margin-inline-end: 0.25rem !important; }
.me-2 { margin-inline-end: 0.5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.ms-1 { margin-inline-start: 0.25rem !important; }
.ms-2 { margin-inline-start: 0.5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.px-2 { padding-inline: 0.5rem !important; }
.px-3 { padding-inline: 1rem !important; }
.py-2 { padding-block: 0.5rem !important; }
.py-3 { padding-block: 1rem !important; }
.text-center { text-align: center !important; }
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }
.text-muted { color: var(--bo-text-muted) !important; }
.text-secondary { color: var(--bo-text-secondary) !important; }
.text-danger { color: var(--bo-danger) !important; }
.text-success { color: var(--bo-success) !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }

/* Responsive Display Helpers */
@media (max-width: 575.98px) {
    .d-none-mobile { display: none !important; }
}

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
}

/* ── 05. Universal Semantic Breadcrumbs ──────────────────────────────────── */
/* Universal CSS reset on all breadcrumb lists to permanently eliminate 1. 2. numbering */
.bo-breadcrumb,
nav.bo-breadcrumb,
nav[aria-label*="breadcrumb"],
nav[aria-label*="Breadcrumb"],
nav[aria-label*="مسار التنقل"] {
    display: block;
    margin-bottom: 0.75rem;
}

.bo-breadcrumb-list,
ol.bo-breadcrumb-list,
ol.breadcrumb,
nav.bo-breadcrumb ol,
nav[aria-label*="breadcrumb"] ol,
.breadcrumb {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.25rem;
}

.bo-breadcrumb-item,
li.bo-breadcrumb-item,
li.breadcrumb-item,
.breadcrumb-item {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.8125rem;
    color: var(--bo-text-muted);
    line-height: 1.4;
    padding: 0;
    margin: 0;
}

.bo-breadcrumb-item a,
li.breadcrumb-item a {
    color: var(--bo-text-secondary);
    text-decoration: none;
    transition: color var(--ease-fast);
}

.bo-breadcrumb-item a:hover,
li.breadcrumb-item a:hover {
    color: var(--brand-950);
    text-decoration: underline;
}

.bo-breadcrumb-item.active,
li.breadcrumb-item.active {
    color: var(--brand-950);
    font-weight: 600;
}

.bo-breadcrumb-item + .bo-breadcrumb-item::before,
li.bo-breadcrumb-item + li.bo-breadcrumb-item::before,
li.breadcrumb-item + li.breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: var(--bo-border-strong);
    padding-inline: 0.35rem;
    font-size: 0.75rem;
    user-select: none;
    display: inline-block;
}

.bo-breadcrumb-icon {
    font-size: 0.75rem;
    color: var(--brand-600);
    margin-inline-end: 0.25rem;
}

/* ── 06. Header, Navbar & Mobile Navigation Drawer ────────────────────────── */
.bo-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--navbar-height);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bo-border);
}

.bo-navbar-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.bo-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.bo-brand-img {
    height: 42px;
    width: auto;
}

.bo-nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bo-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bo-text-secondary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--ease-fast);
}

.bo-nav-link:hover, .bo-nav-link.active {
    color: var(--brand-950);
    background-color: var(--brand-50);
}

.bo-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bo-nav-desktop-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bo-nav-mobile-actions {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.bo-mobile-menu-toggle {
    padding: 0.4rem;
    min-height: 40px;
    min-width: 40px;
}

/* Mobile Drawer */
.bo-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: rgba(0, 29, 35, 0.4);
    backdrop-filter: blur(4px);
}

.bo-mobile-drawer-content {
    width: min(320px, 85vw);
    height: 100%;
    background: #FFFFFF;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
}

.bo-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--bo-border);
}

.bo-drawer-close-btn {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bo-mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.bo-mobile-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--bo-text-secondary);
    border-radius: var(--radius-sm);
    min-height: 44px;
    text-decoration: none;
    transition: all var(--ease-fast);
}

.bo-mobile-drawer-link:hover, .bo-mobile-drawer-link.active {
    color: var(--brand-950);
    background-color: var(--brand-50);
    font-weight: 600;
}

.bo-mobile-drawer-footer {
    border-top: 1px solid var(--bo-border);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

/* ── Unified Dropdown & Menu Component Design System ──────────────────────── */
.dropdown,
.bo-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu,
.bo-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    inset-inline-end: 0;
    min-width: 200px;
    background-color: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-dropdown, 0 10px 25px -5px rgba(0, 29, 35, 0.1), 0 8px 10px -6px rgba(0, 29, 35, 0.1));
    padding: 0.4rem;
    margin: 0;
    list-style: none;
    z-index: 1050;
    text-align: start;
}

/* RTL / LTR Alignment Support */
.dropdown-menu-end,
.bo-dropdown-menu-end {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.dropdown-menu-start,
.bo-dropdown-menu-start {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

/* Open / Show States */
.dropdown.open > .dropdown-menu,
.dropdown.open > .bo-dropdown-menu,
.dropdown.show > .dropdown-menu,
.bo-dropdown.open > .bo-dropdown-menu,
.bo-dropdown.open > .dropdown-menu,
.dropdown-menu.show,
.dropdown-menu.open,
.bo-dropdown-menu.show,
.bo-dropdown-menu.open {
    display: block !important;
}

/* Dropdown Item */
.dropdown-item,
.bo-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--brand-950, #001D23);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
    text-align: start;
    box-sizing: border-box;
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.bo-dropdown-item:hover,
.bo-dropdown-item:focus,
.bo-dropdown-item.active {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-600, #00B388);
    outline: none;
}

.dropdown-item:active,
.bo-dropdown-item:active {
    background-color: var(--brand-100, #E0ECE9);
}

.dropdown-item.disabled,
.dropdown-item:disabled,
.bo-dropdown-item.disabled,
.bo-dropdown-item:disabled {
    color: var(--bo-text-muted, #94A3B8);
    pointer-events: none;
    background-color: transparent;
}

.dropdown-item i,
.bo-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--bo-text-secondary, #465B5D);
    transition: color 0.12s ease;
    flex-shrink: 0;
}

.dropdown-item:hover i,
.dropdown-item.active i,
.bo-dropdown-item:hover i,
.bo-dropdown-item.active i {
    color: var(--brand-600, #00B388);
}

/* Dropdown Divider */
.dropdown-divider,
.bo-dropdown-divider {
    height: 1px;
    background-color: var(--bo-border, #E2E9E8);
    margin: 0.35rem 0.25rem;
    border: none;
    padding: 0;
}

.bo-user-dropdown-menu {
    min-width: 300px;
    max-width: 340px;
    width: max-content;
    padding: 0.375rem;
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(0, 29, 35, 0.1), 0 4px 12px -2px rgba(0, 29, 35, 0.05);
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
}

/* ── Modern User Menu Internal Hierarchy ── */
.bo-user-menu-header {
    padding: 0.75rem 0.75rem 0.65rem 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bo-user-menu-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #F0FDF9;
    color: #0F766E;
    border: 1px solid #CCFBF1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bo-user-menu-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bo-user-menu-name {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.3;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-user-menu-email {
    font-size: 0.75rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
    text-align: start;
}

.bo-user-menu-tenant {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-user-menu-tenant i {
    font-size: 0.75rem;
    color: #00B388;
    flex-shrink: 0;
}

.bo-user-menu-badge-wrap {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
}

.bo-user-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    line-height: 1.2;
}

.bo-user-role-badge.bo-role-owner {
    background-color: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.bo-user-role-badge.bo-role-admin {
    background-color: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.bo-user-role-badge.bo-role-user {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.bo-role-icon {
    font-size: 0.65rem;
    color: #D97706;
}

/* Dividers */
.bo-user-menu-divider {
    height: 1px;
    background-color: #F1F5F9;
    margin: 0.35rem 0.25rem;
}

/* Menu Items List */
.bo-user-menu-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bo-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    border-radius: 8px;
    background: transparent;
    border: none;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 36px;
    box-sizing: border-box;
}

.bo-user-menu-item:hover {
    background-color: #F8FAFC;
    color: #001D23;
    text-decoration: none;
}

.bo-user-menu-item .bo-menu-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #64748B;
    flex-shrink: 0;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bo-user-menu-item:hover .bo-menu-icon {
    color: #00B388;
}

.bo-user-menu-item .bo-menu-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logout Item */
.bo-user-menu-logout-form {
    margin: 0;
}

.bo-user-menu-item-danger {
    color: #DC2626 !important;
    font-weight: 600;
}

.bo-user-menu-item-danger .bo-menu-icon {
    color: #DC2626 !important;
}

.bo-user-menu-item-danger:hover {
    background-color: #FEF2F2 !important;
    color: #B91C1C !important;
}

.bo-user-menu-item-danger:hover .bo-menu-icon {
    color: #B91C1C !important;
}

[dir="rtl"] .bo-user-menu-item-danger .fa-right-from-bracket {
    transform: scaleX(-1);
}

/* Mobile Language Switcher Inside User Menu */
.bo-user-menu-mobile-lang {
    padding: 0.5rem 0.65rem;
    background: #FAFBFB;
    border-radius: 8px;
    margin: 0.25rem;
}

.bo-mobile-lang-title {
    font-size: 0.725rem;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-mobile-lang-form {
    display: flex;
    gap: 0.25rem;
}

.bo-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: var(--bo-text-secondary);
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    text-align: start;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ease-fast), color var(--ease-fast);
}

.bo-dropdown-item:hover, .bo-dropdown-item.active {
    background-color: var(--bg-muted);
    color: var(--brand-950);
}

/* ── 07. Buttons & Action Components ─────────────────────────────────────── */
.btn, .bo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--ease-fast);
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
    min-height: 40px;
    user-select: none;
    text-decoration: none;
}

.btn-primary, .bo-btn-primary {
    background-color: var(--brand-950);
    color: #FFFFFF !important;
    border-color: var(--brand-950);
}

.btn-primary:hover, .bo-btn-primary:hover {
    background-color: var(--brand-900);
    border-color: var(--brand-900);
}

.btn-secondary, .bo-btn-secondary {
    background-color: var(--bg-surface);
    color: var(--bo-text-primary) !important;
    border-color: var(--bo-border);
}

.btn-secondary:hover, .bo-btn-secondary:hover {
    background-color: var(--bg-muted);
    border-color: var(--bo-border-strong);
    color: var(--brand-950) !important;
}

.btn-ghost, .bo-btn-ghost {
    background-color: transparent;
    color: var(--bo-text-secondary) !important;
    border-color: transparent;
}

.btn-ghost:hover, .bo-btn-ghost:hover {
    background-color: var(--bg-muted);
    color: var(--brand-950) !important;
}

.btn-danger, .bo-btn-danger {
    background-color: var(--bo-danger);
    color: #FFFFFF !important;
    border-color: var(--bo-danger);
}

.btn-danger:hover, .bo-btn-danger:hover {
    background-color: #B42318;
}

.btn-sm, .bo-btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 32px;
}

.btn-lg, .bo-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    min-height: 46px;
}

/* ── 08. Form Controls & Input Groups ─────────────────────────────────────── */
.form-group, .bo-form-group {
    margin-bottom: 1rem;
}

.form-label, .bo-form-label {
    display: block;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--brand-950);
    margin-bottom: 0.35rem;
}

.form-control, .form-select, .bo-input, .bo-select {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    color: var(--bo-text-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
    outline: none;
    min-height: 42px;
}

.form-control:focus, .form-select:focus, .bo-input:focus, .bo-select:focus {
    border-color: var(--bo-border-focus);
    box-shadow: 0 0 0 3px rgba(0, 29, 35, 0.08);
}

.form-select {
    padding-inline-end: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23465B5D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

[dir="rtl"] .form-select {
    background-position: left 0.75rem center;
}

.form-control-sm, .form-select-sm {
    min-height: 36px;
    padding-block: 0.35rem;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
}

.form-select-sm {
    padding-inline-end: 2rem;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--bo-text-secondary);
}

.form-check-input {
    margin-top: 0.25rem;
    accent-color: var(--brand-950);
}

/* ── 08.1 Input Groups & Text ────────────────────────────────────────────── */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .bo-input,
.input-group > .bo-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-bg-muted);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-sm);
}

.input-group > :not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

[dir="rtl"] .input-group > :not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[dir="rtl"] .input-group > :not(:first-child) {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 0;
    margin-right: -1px;
}

/* ── 09. Cards & Surfaces ────────────────────────────────────────────────── */
.bo-card, .card {
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    height: auto !important;
    box-shadow: var(--shadow-subtle);
    transition: border-color var(--ease-fast);
}

.bo-card-compact {
    padding: 1rem;
}

.bo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bo-border-subtle);
}

.bo-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-950);
    margin: 0;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--bo-border-subtle);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card-body {
    padding: 1.25rem;
}

/* ── 09.1 Navigation Tabs, Pills & Filter Strips ───────────────────────── */
.nav {
    display: flex !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    list-style: none !important;
    gap: 0.5rem;
}

.nav-item {
    list-style: none !important;
}

.nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bo-text-secondary) !important;
    text-decoration: none !important;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    transition: all var(--ease-fast);
    cursor: pointer;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--brand-950) !important;
    background-color: var(--brand-50);
}

.nav-link:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Nav Pills */
.nav-pills .nav-link {
    border-radius: var(--radius-md);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffffff !important;
    background-color: var(--brand-950) !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.15);
}

.nav-pills .nav-link.active .badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.card-header-pills {
    margin-right: 0;
    margin-left: 0;
}

/* Nav Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--bo-border) !important;
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--bo-border-strong);
    background-color: var(--bg-muted);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--brand-950) !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--bo-border) var(--bo-border) transparent !important;
    border-bottom: 2px solid var(--brand-600) !important;
    font-weight: 600;
}

.card-header-tabs {
    margin-bottom: -0.75rem;
    border-bottom: none !important;
}

/* Nav Fill & Justified */
.nav-fill .nav-item,
.nav-fill > .nav-link {
    flex: 1 1 auto;
    text-align: center;
}

.nav-justified .nav-item,
.nav-justified > .nav-link {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
}

/* ── Modal Dialogs & Overlays ────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 29, 35, 0.55);
    backdrop-filter: blur(4px);
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 1.75rem auto;
    pointer-events: none;
}

.modal-dialog.modal-lg {
    max-width: 800px;
}

.modal-dialog.modal-sm {
    max-width: 400px;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--bg-surface);
    background-clip: padding-box;
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    outline: 0;
    overflow: hidden;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bo-border);
    background-color: var(--brand-950);
    color: #FFFFFF;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.4;
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 130px);
    background-color: var(--bg-surface);
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bo-border);
    background-color: var(--bg-muted);
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #FFFFFF;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--radius-xs);
    opacity: 0.8;
    cursor: pointer;
}

.btn-close:hover {
    opacity: 1;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── 10. Unified Enterprise Responsive Stat & KPI Grid System ─────────────── */
.bo-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.bo-stat-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.bo-stat-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.bo-stat-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.bo-stat-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.bo-stat-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

@media (max-width: 1399.98px) {
    .bo-stat-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bo-stat-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .bo-stat-grid,
    .bo-stat-grid-6,
    .bo-stat-grid-5,
    .bo-stat-grid-4,
    .bo-stat-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .bo-stat-grid,
    .bo-stat-grid-6,
    .bo-stat-grid-5,
    .bo-stat-grid-4,
    .bo-stat-grid-3,
    .bo-stat-grid-2 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ── Standardized Symmetrical Stats Grid Component ────────────────────────── */
.bo-stats-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

.bo-stats-grid,
.bo-kpi-grid,
.bo-stats-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

.bo-stats-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

.bo-stats-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

@media (max-width: 1100px) {
    .bo-stats-grid,
    .bo-kpi-grid,
    .bo-stats-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 576px) {
    .bo-stats-grid,
    .bo-kpi-grid,
    .bo-stats-grid-4,
    .bo-stats-grid-3,
    .bo-stats-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Standardized Stat Card */
.bo-stat-card, .bo-kpi-card, .stat-card {
    background-color: var(--bg-surface, #FFFFFF) !important;
    border: 1px solid var(--bo-border, #E2E8F0) !important;
    border-inline-start: 4px solid var(--brand-600, #00B388) !important;
    border-radius: var(--radius-md, 10px) !important;
    padding: 1.15rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 104px !important;
    box-sizing: border-box !important;
    box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.04)) !important;
    transition: transform var(--ease-fast), box-shadow var(--ease-fast) !important;
    overflow: hidden !important;
    position: relative !important;
}

.bo-stat-card:hover, .bo-kpi-card:hover, .stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 29, 35, 0.08)) !important;
}

/* Stat Card Color Accents */
.bo-stat-card.bo-stat-primary { border-inline-start-color: var(--brand-600, #00B388); }
.bo-stat-card.bo-stat-success { border-inline-start-color: #10B981; }
.bo-stat-card.bo-stat-warning { border-inline-start-color: #F59E0B; }
.bo-stat-card.bo-stat-danger  { border-inline-start-color: #EF4444; }
.bo-stat-card.bo-stat-info    { border-inline-start-color: #0284C7; }
.bo-stat-card.bo-stat-secondary { border-inline-start-color: #64748B; }
.bo-stat-card.bo-stat-dark    { border-inline-start-color: #001D23; }

.bo-stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.bo-stat-label, .bo-kpi-title, .bo-stat-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bo-text-secondary, #64748B);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    line-height: 1.3;
}

.bo-stat-card-icon, .bo-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.bo-stat-icon-primary { background: rgba(0, 179, 136, 0.1); color: var(--brand-600, #00B388); }
.bo-stat-icon-success { background: rgba(16, 185, 129, 0.1); color: #059669; }
.bo-stat-icon-warning { background: rgba(245, 158, 11, 0.1); color: #D97706; }
.bo-stat-icon-danger  { background: rgba(239, 68, 68, 0.1); color: #DC2626; }
.bo-stat-icon-info    { background: rgba(2, 132, 199, 0.1); color: #0284C7; }
.bo-stat-icon-secondary { background: rgba(100, 116, 139, 0.1); color: #64748B; }
.bo-stat-icon-dark    { background: rgba(0, 29, 35, 0.1); color: #001D23; }

.bo-stat-value, .bo-kpi-value, .bo-stat-card-value {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 800;
    color: var(--brand-950, #001D23);
    line-height: 1.15;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.bo-stat-unit, .bo-stat-card-unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--bo-text-muted, #94A3B8);
}

.bo-stat-meta, .bo-stat-card-meta {
    font-size: 0.75rem;
    color: var(--bo-text-secondary, #64748B);
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Standardized Filter Toolbar Component ────────────────────────────────── */
.bo-filter-toolbar {
    background-color: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: var(--radius-md, 10px);
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.03));
}

.bo-filter-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-filter-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

@media (max-width: 991.98px) {
    .bo-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .bo-filter-controls {
        width: 100%;
    }
    .bo-filter-controls .input-group,
    .bo-filter-controls .form-select,
    .bo-filter-controls .btn {
        flex: 1 1 auto;
    }
}

/* ── 11. Tables & Responsive Scrolling ─────────────────────────────────────── */
.bo-table-container,
.bo-table-responsive,
.table-responsive,
.bo-table-scroll,
.bo-scroll-x {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-300) var(--bg-muted);
}

/* Card embedded table containers reset outer border/radius to blend seamlessly */
.bo-card > .bo-table-container,
.bo-card > .bo-table-responsive,
.bo-card > .table-responsive,
.bo-card > .bo-table-scroll,
.card > .bo-table-container,
.card > .bo-table-responsive,
.card > .table-responsive,
.card > .bo-table-scroll {
    border: none;
    border-radius: 0;
}

/* ── Custom Bottom Horizontal Scrollbar (Enterprise Brand Theme) ───────── */
.bo-table-container::-webkit-scrollbar,
.bo-table-responsive::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.bo-table-scroll::-webkit-scrollbar,
.bo-scroll-x::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.bo-table-container::-webkit-scrollbar-track,
.bo-table-responsive::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.bo-table-scroll::-webkit-scrollbar-track,
.bo-scroll-x::-webkit-scrollbar-track {
    background: var(--bg-muted, #F6F8F8);
    border-radius: 4px;
}

.bo-table-container::-webkit-scrollbar-thumb,
.bo-table-responsive::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.bo-table-scroll::-webkit-scrollbar-thumb,
.bo-scroll-x::-webkit-scrollbar-thumb {
    background: var(--brand-300, #57988D);
    border-radius: 4px;
    border: 2px solid var(--bg-muted, #F6F8F8);
    transition: background-color var(--ease-fast);
}

.bo-table-container::-webkit-scrollbar-thumb:hover,
.bo-table-responsive::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.bo-table-scroll::-webkit-scrollbar-thumb:hover,
.bo-scroll-x::-webkit-scrollbar-thumb:hover {
    background: var(--brand-500, #1C5C53);
}

.bo-table, .table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
    text-align: start;
}

/* Table sizing presets to preserve structural integrity & activate bottom scrollbar */
.bo-table-compact, table.bo-table-compact {
    min-width: 580px;
}

.bo-table-standard, table.bo-table-standard {
    min-width: 760px;
}

.bo-table-wide, table.bo-table-wide {
    min-width: 980px;
}

.bo-table thead, .table thead {
    background-color: var(--bg-muted);
    border-bottom: 1px solid var(--bo-border);
}

.bo-table th, .table th {
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bo-text-secondary);
    white-space: nowrap;
}

.bo-table td, .table td {
    padding: 0.65rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--bo-border-subtle);
    color: var(--bo-text-primary);
}

.bo-table tbody tr:hover, .table tbody tr:hover {
    background-color: var(--bg-subtle);
}

.bo-table tbody tr:last-child td, .table tbody tr:last-child td {
    border-bottom: none;
}

/* Helper utility for cells that must never wrap vertically (IDs, codes, emails, timestamps) */
.bo-cell-nowrap,
.bo-table .bo-cell-nowrap,
.table .bo-cell-nowrap {
    white-space: nowrap !important;
}

.bo-cell-code {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--bo-text-secondary);
    white-space: nowrap;
}

/* ── UI-014: Responsive Table Horizontal Scroll & Sticky Columns ────────── */
.bo-table-sticky-start th:first-child,
.bo-table-sticky-start td:first-child,
th.bo-sticky-start,
td.bo-sticky-start {
    position: sticky;
    inset-inline-start: 0;
    background-color: var(--bg-surface, #ffffff);
    z-index: 2;
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.08);
}

[dir="rtl"] .bo-table-sticky-start th:first-child,
[dir="rtl"] .bo-table-sticky-start td:first-child,
[dir="rtl"] th.bo-sticky-start,
[dir="rtl"] td.bo-sticky-start {
    box-shadow: -2px 0 5px -2px rgba(0,0,0,0.08);
}

.bo-table-sticky-start thead th:first-child {
    background-color: var(--bg-muted, #f8fafc);
    z-index: 3;
}

.bo-table-sticky-start tbody tr:hover td:first-child {
    background-color: var(--bg-subtle, #f1f5f9);
}

.bo-table-container {
    contain: paint;
}

/* ── 12. Badges ──────────────────────────────────────────────────────────── */
.badge, .bo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    width: fit-content;
}

.badge-brand     { background-color: var(--brand-50); color: var(--brand-950); border: 1px solid var(--brand-200); }
.badge-success   { background-color: var(--bo-success-bg); color: var(--bo-success); border: 1px solid var(--bo-success-border); }
.badge-warning   { background-color: var(--bo-warning-bg); color: var(--bo-warning); border: 1px solid var(--bo-warning-border); }
.badge-danger    { background-color: var(--bo-danger-bg); color: var(--bo-danger); border: 1px solid var(--bo-danger-border); }
.badge-info      { background-color: var(--bo-info-bg); color: var(--bo-info); border: 1px solid var(--bo-info-border); }
.badge-secondary { background-color: var(--bg-muted); color: var(--bo-text-secondary); border: 1px solid var(--bo-border); }

/* ── Universal Tab Strips & Pill Navigation ──────────────────────────────── */
.bo-tab-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--bo-border);
    background: var(--bg-surface);
}

.bo-tab-strip::-webkit-scrollbar {
    display: none;
}

.bo-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bo-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    border: 1px solid transparent;
    transition: all var(--ease-fast);
    flex-shrink: 0;
    min-height: 36px;
}

.bo-tab-item:hover {
    color: var(--brand-950);
    background: var(--brand-50);
}

.bo-tab-item.active {
    color: #FFFFFF;
    background: var(--brand-950);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 29, 35, 0.15);
}

.bo-tab-item.active i {
    color: var(--brand-400);
}

/* ── 13. Hero & Public Marketing Sections ────────────────────────────────── */
.bo-hero {
    padding-block: 4.5rem 3.5rem;
    text-align: center;
}

.bo-hero-content {
    max-width: 860px;
    margin-inline: auto;
}

.bo-hero-proof-points {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    margin-inline: auto;
    margin-bottom: 2.25rem;
    max-width: 860px;
}

.bo-hero-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bo-text-secondary);
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.04);
    transition: all 0.2s ease;
}

.bo-hero-proof-item:hover {
    border-color: var(--brand-300);
    box-shadow: 0 2px 8px rgba(0, 29, 35, 0.07);
    color: var(--bo-text-primary);
}

.bo-hero-proof-item i {
    color: var(--brand-600);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.bo-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.bo-product-mockup {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px -10px rgba(0, 29, 35, 0.08);
    overflow: hidden;
    text-align: start;
    max-width: 860px;
    margin-inline: auto;
}

.bo-mockup-browser-bar {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--bo-border);
    padding: 0.65rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bo-mockup-dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bo-mockup-dot {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: #E2E9E8;
    display: inline-block;
}

.bo-mockup-url-pill {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-full);
    padding: 0.2rem 1rem;
    font-size: 0.75rem;
    color: var(--bo-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 340px;
    width: 100%;
    justify-content: center;
}

.bo-mockup-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bo-mockup-canvas {
    padding: 1.15rem 1.25rem;
    background: var(--bg-surface);
}

.bo-mockup-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0;
}

.bo-mockup-kpi-card {
    background: var(--bg-subtle);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.85rem;
    transition: all 0.2s ease;
}

.bo-mockup-kpi-card:hover {
    border-color: var(--brand-300);
}

.bo-mockup-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.bo-mockup-kpi-label {
    font-size: 0.78rem;
    color: var(--bo-text-muted);
    font-weight: 600;
}

.bo-mockup-kpi-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-950);
    line-height: 1.2;
}

.bo-mockup-kpi-subtext {
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 0.2rem;
}

.bo-mockup-secondary-details {
    margin-top: 1rem;
}

.bo-mockup-mobile-action {
    margin-top: 0.75rem;
}

.bo-mockup-toggle-btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    border: 1px solid var(--bo-border);
    color: var(--brand-950);
    box-shadow: 0 1px 2px rgba(0, 29, 35, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bo-mockup-toggle-btn:hover {
    background: var(--brand-50);
    border-color: var(--brand-300);
    color: var(--brand-950);
}

/* ── 14. Trust Proof & Benchmark Showcase ────────────────────────────────── */
.bo-benchmark-card {
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    background: var(--bg-surface);
    transition: all 0.25s ease;
}

.bo-benchmark-card:hover {
    border-color: var(--brand-300);
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.06);
    transform: translateY(-2px);
}

.bo-benchmark-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bo-border-subtle);
}

.bo-benchmark-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bo-benchmark-kpi-val {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.bo-benchmark-kpi-lbl {
    font-size: 0.72rem;
    color: var(--bo-text-muted);
    font-weight: 500;
}

.bo-trust-support-strip {
    box-shadow: 0 4px 16px -2px rgba(0, 29, 35, 0.04);
}

.bo-section {
    padding-block: 4.5rem;
}

.bo-section-header {
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: 3rem;
}

.bo-value-strip {
    background-color: var(--bg-subtle);
    border-block: 1px solid var(--bo-border);
    padding-block: 2.5rem;
}

.bo-value-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.bo-value-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: var(--brand-50);
    color: var(--brand-950);
    border: 1px solid var(--brand-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bo-capability-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    transition: all var(--ease-fast);
}

.bo-capability-card:hover {
    border-color: var(--brand-950);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.bo-capability-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--brand-50);
    color: var(--brand-950);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1.15rem;
}

/* Workflow Flow Strip */
.bo-security-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--bg-surface);
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--bo-border);
    box-shadow: var(--shadow-subtle);
    max-width: 1080px;
    margin-inline: auto;
}

.bo-flow-step {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.15rem;
    background: var(--bg-subtle);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-950);
    box-shadow: 0 1px 2px rgba(0, 29, 35, 0.03);
}

.bo-flow-arrow {
    color: var(--brand-600);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

[dir="rtl"] .bo-flow-arrow i.fa-arrow-right {
    transform: scaleX(-1);
}

.bo-country-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
}

.bo-country-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--brand-950);
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Problem & Comparison Cards (Problem Section) */
.bo-problem-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    transition: all var(--ease-fast);
    position: relative;
    overflow: hidden;
}

.bo-problem-card:hover {
    border-color: #EF4444;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.bo-problem-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FEE2E2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}

.bo-problem-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    background-color: #FEF2F2;
    color: #991B1B;
    margin-bottom: 0.75rem;
}

.bo-solution-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--brand-50);
    color: var(--brand-950);
    margin-bottom: 0.75rem;
}

/* 3-Step Lifecycle Cards (How It Works) */
.bo-step-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.75rem;
    position: relative;
    transition: all var(--ease-fast);
}

.bo-step-card:hover {
    border-color: var(--brand-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.bo-step-number-badge {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--brand-600);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

/* Impact Numbers / Proof Grid */
.bo-impact-card {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.5rem;
    text-align: center;
    transition: all var(--ease-fast);
}

.bo-impact-card:hover {
    border-color: var(--brand-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.bo-impact-number {
    font-size: 2.75rem;
    font-weight: 900;
    color: var(--brand-600);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.bo-impact-label {
    font-weight: 700;
    color: var(--brand-950);
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.bo-impact-desc {
    font-size: 0.825rem;
    color: var(--bo-text-secondary);
    line-height: 1.5;
}

/* Accordion Component */
.bo-reading-container {
    max-width: 840px;
    margin-inline: auto;
}

.bo-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bo-accordion-item {
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}

.bo-accordion-item:hover {
    border-color: var(--brand-200);
}

.bo-accordion-item.active {
    border-color: var(--brand-600);
    box-shadow: 0 2px 8px -2px rgba(0, 29, 35, 0.06);
}

.bo-accordion-btn {
    width: 100%;
    padding: 1.15rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-950);
    text-align: start;
    font-family: inherit;
    transition: background-color var(--ease-fast), color var(--ease-fast);
}

[dir="rtl"] .bo-accordion-btn {
    text-align: right;
}

.bo-accordion-btn:hover {
    background-color: var(--bg-muted);
}

.bo-accordion-btn i {
    color: var(--bo-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.bo-accordion-item.active .bo-accordion-btn {
    color: var(--brand-950);
    background-color: var(--brand-50);
}

.bo-accordion-item.active .bo-accordion-btn i {
    transform: rotate(180deg);
    color: var(--brand-600);
}

.bo-accordion-content {
    display: none;
    padding: 0 1.5rem 1.25rem 1.5rem;
    font-size: 0.9rem;
    color: var(--bo-text-secondary);
    line-height: 1.7;
    background-color: var(--brand-50);
    border-top: 1px solid var(--brand-100);
}

.bo-accordion-item.active .bo-accordion-content {
    display: block;
}

/* High-Contrast Marketing CTA Banner */
.bo-cta-banner {
    background: linear-gradient(135deg, #001D23 0%, #06272B 100%);
    border: 1px solid rgba(0, 179, 136, 0.2);
    border-radius: var(--radius-xl);
    padding: 4.5rem 3rem;
    color: #FFFFFF !important;
    text-align: center;
    box-shadow: 0 20px 40px -15px rgba(0, 29, 35, 0.3);
}

.bo-cta-banner h1,
.bo-cta-banner h2,
.bo-cta-banner h3,
.bo-cta-banner .display-xl,
.bo-cta-banner .display-lg,
.bo-cta-banner .display-md {
    color: #FFFFFF !important;
}

.bo-cta-banner p,
.bo-cta-banner .lead {
    color: #DFECE9 !important;
}

.bo-cta-banner .btn-primary {
    background-color: #00B388 !important;
    color: #001D23 !important;
    border-color: #00B388 !important;
    font-weight: 700;
}

.bo-cta-banner .btn-primary:hover {
    background-color: #00CC9B !important;
    border-color: #00CC9B !important;
    color: #001D23 !important;
}

.bo-cta-banner .btn-secondary {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px);
}

.bo-cta-banner .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

/* ── 13.b Modern SaaS Feature Showcases & Asset Showcase Rows ─────────────── */
.bo-feature-showcase-section {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.bo-feature-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.bo-feature-row:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .bo-feature-row {
        grid-template-columns: 1.1fr 1fr;
    }

    .bo-feature-row--reverse {
        grid-template-columns: 1fr 1.1fr;
    }

    .bo-feature-row--reverse .bo-feature-text {
        order: 2;
    }

    .bo-feature-row--reverse .bo-feature-visual {
        order: 1;
    }
}

.bo-feature-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bo-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    background-color: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-100);
    width: fit-content;
}

.bo-feature-title {
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    color: var(--brand-950);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.bo-feature-desc {
    color: var(--bo-text-secondary);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.7;
}

.bo-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.bo-feature-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--brand-950);
    line-height: 1.5;
}

.bo-feature-list-item i {
    color: var(--brand-600);
    font-size: 0.95rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.bo-feature-visual {
    position: relative;
}

.bo-feature-visual-frame {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-xl);
    padding: clamp(0.75rem, 2vw, 1.25rem);
    box-shadow: 0 20px 40px -15px rgba(0, 29, 35, 0.08), 0 1px 3px rgba(0, 29, 35, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform var(--ease-standard), box-shadow var(--ease-standard), border-color var(--ease-standard);
}

.bo-feature-visual-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -15px rgba(0, 29, 35, 0.12);
    border-color: var(--brand-300);
}

.bo-feature-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.04);
}

.bo-feature-floating-badge {
    position: absolute;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.1);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-950);
}

/* ── 14. Authentication & Registration Shell ──────────────────────────────── */
.bo-auth-shell {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-page);
    padding-inline: 1rem;
}

.bo-auth-card {
    width: 100%;
    max-width: 460px;
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 5vw, 2.25rem);
    box-shadow: 0 10px 30px -10px rgba(0, 29, 35, 0.05);
}

.bo-auth-card--wide {
    max-width: 100%;
}

.bo-auth-header-container {
    max-width: var(--auth-max-w, 460px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}

.bo-auth-brand-img {
    height: clamp(32px, 8vw, 42px);
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.bo-auth-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bo-auth-header-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-input-icon-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.bo-input-icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bo-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 2;
}

.bo-input-with-icon {
    padding-inline-start: 2.5rem !important;
}

.bo-input-with-password-toggle {
    padding-inline-end: 2.75rem !important;
}

/* Password Visibility Eye Toggle Button */
.bo-password-toggle-btn {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--bo-text-muted, #6C7D7E);
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.bo-password-toggle-btn:hover {
    color: var(--brand-700, #008262);
    background-color: rgba(0, 179, 136, 0.08);
}

.bo-password-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.35);
    color: var(--brand-950, #001D23);
}

.bo-password-toggle-btn:active {
    transform: translateY(-50%) scale(0.9);
}

.bo-password-toggle-btn.is-visible {
    color: var(--brand-600, #00B388);
}

.bo-password-toggle-btn i,
.bo-password-toggle-btn svg {
    pointer-events: none;
}

.bo-auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.bo-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--bo-text-secondary);
    user-select: none;
    margin: 0;
    white-space: nowrap;
}

.bo-auth-forgot {
    color: var(--brand-700);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--ease-fast);
}

.bo-auth-forgot:hover {
    color: var(--brand-950);
    text-decoration: underline;
}

.bo-auth-footer-container {
    max-width: var(--auth-max-w, 460px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}

.bo-auth-footer-links {
    display: flex;
    gap: 0.75rem 1rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .bo-auth-footer-container {
        justify-content: center;
        text-align: center;
    }
    .bo-auth-footer-links {
        justify-content: center;
    }
}

.bo-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.bo-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.bo-form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

/* ── 14.a Modern Split-Screen Authentication Architecture ──────────────────── */
.bo-split-auth-container {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
}

.bo-split-auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (min-width: 992px) {
    .bo-split-auth-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Brand / Illustration Side (Left in LTR, Right in RTL) */
.bo-split-auth-brand-side {
    background: #F8FAF9;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-lg, 12px);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.bo-split-brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    line-height: 1.4;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}

.bo-split-brand-desc {
    color: var(--bo-text-secondary, #4B5563);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.bo-split-illustration-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 0.5rem 1.25rem;
    position: relative;
    max-height: 220px;
}

.bo-split-illustration-img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.bo-split-value-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.bo-split-value-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.bo-split-value-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 179, 136, 0.12);
    color: var(--brand-600, #00B388);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.bo-split-value-title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--brand-950, #001D23);
}

/* Form Side */
.bo-split-auth-form-side {
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-lg, 12px);
    padding: clamp(1.75rem, 4vw, 2.25rem);
    box-shadow: 0 4px 20px -4px rgba(0, 29, 35, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bo-auth-header-block {
    margin-bottom: 1.5rem;
}

.bo-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}

.bo-auth-subtitle {
    color: var(--bo-text-secondary, #4B5563);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.bo-auth-btn-primary {
    width: 100%;
    height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--brand-950, #001D23);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.08);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.bo-auth-btn-primary:hover {
    background-color: #002D37;
    color: #FFFFFF;
}

.bo-auth-btn-primary:active {
    transform: scale(0.99);
}

.bo-auth-btn-primary.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

/* Resume Registration Card Center Mode */
.bo-resume-card {
    max-width: 460px;
    margin: 0 auto;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-lg, 12px);
    padding: clamp(1.75rem, 4vw, 2.25rem);
    box-shadow: 0 4px 20px -4px rgba(0, 29, 35, 0.04);
}

/* Responsive Mobile Table Cards Mode */
@media (max-width: 768px) {
    .bo-table-mobile-cards {
        display: block !important;
        width: 100%;
        border: none !important;
    }
    .bo-table-mobile-cards thead {
        display: none !important;
    }
    .bo-table-mobile-cards tbody,
    .bo-table-mobile-cards tr,
    .bo-table-mobile-cards td {
        display: block !important;
        width: 100% !important;
    }
    .bo-table-mobile-cards tr {
        background: var(--bg-surface, #FFFFFF) !important;
        border: 1px solid var(--bo-border, #E2E9E8) !important;
        border-radius: var(--radius-md, 10px) !important;
        margin-bottom: 0.85rem !important;
        padding: 0.85rem 1rem !important;
        box-shadow: 0 2px 6px rgba(0, 29, 35, 0.03) !important;
    }
    .bo-table-mobile-cards td {
        padding: 0.4rem 0 !important;
        border: none !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: end !important;
    }
    .bo-table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--bo-text-muted, #6C7D7E);
        text-align: start;
        margin-inline-end: 1rem;
    }
    .bo-table-mobile-cards td:first-child {
        border-bottom: 1px solid var(--bo-border-subtle, #EDF1F0) !important;
        padding-bottom: 0.6rem !important;
        margin-bottom: 0.4rem !important;
        display: block !important;
        text-align: start !important;
    }
    .bo-table-mobile-cards td:first-child::before {
        display: none !important;
    }
    .bo-table-mobile-cards td:last-child {
        border-top: 1px solid var(--bo-border-subtle, #EDF1F0) !important;
        padding-top: 0.6rem !important;
        margin-top: 0.4rem !important;
        justify-content: flex-end !important;
    }
}

#registerResponsiveGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (min-width: 992px) {
    #registerResponsiveGrid {
        grid-template-columns: 1.05fr 1.25fr;
        gap: 2.5rem;
    }
}

/* ── 14.b Multi-Stage Registration Stepper & Mobile Wizard ────────────────── */
.bo-reg-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.85rem 1rem;
    margin-bottom: 1.75rem;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
}

.bo-reg-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    z-index: 2;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.bo-reg-step:focus-visible {
    outline: 2px solid var(--brand-500);
    border-radius: var(--radius-sm);
}

.bo-reg-step-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.25s ease-in-out;
    border: 2px solid var(--bo-border, #cbd5e1);
    background: var(--bg-surface, #ffffff);
    color: var(--bo-text-muted, #64748b);
}

.bo-reg-step-info {
    display: flex;
    flex-direction: column;
    text-align: start;
}

.bo-reg-step-num {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bo-text-muted, #94a3b8);
    font-weight: 600;
}

.bo-reg-step-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bo-text-secondary, #475569);
    white-space: nowrap;
}

/* Stepper States */
.bo-reg-step.is-completed .bo-reg-step-badge {
    background: #10B981;
    border-color: #10B981;
    color: #ffffff;
}

.bo-reg-step.is-completed .bo-reg-step-title {
    color: var(--brand-950, #0f172a);
}

.bo-reg-step.is-active .bo-reg-step-badge {
    background: var(--brand-600, #00B388);
    border-color: var(--brand-600, #00B388);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.16);
}

.bo-reg-step.is-active .bo-reg-step-title {
    color: var(--brand-600, #00B388);
    font-weight: 700;
}

.bo-reg-step.is-upcoming {
    opacity: 0.72;
}

.bo-reg-step-connector {
    flex: 1;
    height: 2px;
    background: var(--bo-border, #e2e8f0);
    margin-inline: 0.5rem;
    position: relative;
    z-index: 1;
    min-width: 12px;
    transition: background 0.3s ease;
}

.bo-reg-step-connector.is-filled {
    background: #10B981;
}

/* Mobile Progress Header */
.bo-mobile-stepper-header {
    display: none;
    margin-bottom: 1.25rem;
}

.bo-mobile-stepper-progress {
    height: 6px;
    background: var(--bo-border, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.bo-mobile-stepper-fill {
    height: 100%;
    background: var(--brand-600, #00B388);
    border-radius: 9999px;
    transition: width 0.3s ease-in-out;
}

.bo-mobile-stepper-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--bo-text-secondary);
}

/* Mobile Wizard Actions */
.bo-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bo-border-subtle);
}

/* Next Step Preview Card */
.bo-step-preview-card {
    background: rgba(2, 132, 199, 0.05);
    border: 1px solid rgba(2, 132, 199, 0.2);
    border-radius: var(--radius-md, 8px);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Responsive Rules for Mobile (< 768px) */
@media (max-width: 767px) {
    .bo-reg-stepper {
        padding: 0.6rem 0.75rem;
        gap: 0.25rem;
    }
    .bo-reg-step-info {
        display: none;
    }
    .bo-reg-step-badge {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .bo-reg-step-connector {
        margin-inline: 0.25rem;
        min-width: 8px;
    }
    .bo-mobile-stepper-header {
        display: block;
    }
    .bo-step-section:not(.is-active) {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .bo-wizard-actions--mobile-only {
        display: none !important;
    }
    .bo-step-section {
        display: block !important;
    }
}

/* ── 15. Legal Center & Document Reader ───────────────────────────────────── */
.bo-legal-page {
    padding-block: 2rem 4rem;
}

.bo-legal-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bo-border);
}

.bo-legal-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.bo-legal-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--brand-950);
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.bo-legal-body-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.bo-legal-toc-wrapper {
    position: sticky;
    top: 96px;
}

.bo-legal-toc {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.bo-legal-toc-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-950);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bo-border-subtle);
}

.bo-legal-toc-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bo-legal-toc-link {
    font-size: 0.85rem;
    color: var(--bo-text-secondary);
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-xs);
    display: block;
    transition: all var(--ease-fast);
    line-height: 1.4;
}

.bo-legal-toc-link:hover {
    color: var(--brand-950);
    background: var(--bg-muted);
}

.bo-legal-content-column {
    max-width: var(--reading-max);
    width: 100%;
}

.bo-legal-section-block {
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--bo-border-subtle);
}

.bo-legal-section-block:last-child {
    border-bottom: none;
}

.bo-legal-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-950);
    margin-bottom: 1rem;
}

.bo-legal-body-prose {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--bo-text-primary);
}

.bo-legal-body-prose p {
    margin-bottom: 1.15rem;
}

/* ── 16. App Shell & Tenant Workspace ─────────────────────────────────────── */
.bo-app-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-canvas);
}

.bo-app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-inline-end: 1px solid var(--bo-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 90;
    transition: transform var(--ease-standard);
}

.bo-sidebar-header {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding-inline: 1.25rem;
    border-bottom: 1px solid var(--bo-border);
}

.bo-sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    overflow-y: auto;
}

.bo-nav-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bo-text-muted);
    padding: 0.5rem 0.75rem 0.25rem 0.75rem;
    margin-top: 0.75rem;
}

.bo-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.84375rem;
    font-weight: 500;
    color: var(--bo-text-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    transition: all var(--ease-fast);
    position: relative;
    text-decoration: none;
    min-height: 38px;
}

.bo-sidebar-link i {
    width: 18px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bo-text-muted);
    flex-shrink: 0;
}

.bo-sidebar-link:hover {
    color: var(--brand-950);
    background-color: var(--bg-muted);
}

.bo-sidebar-link:hover i {
    color: var(--brand-700);
}

.bo-sidebar-link.active {
    color: var(--brand-950);
    background-color: var(--brand-50);
    font-weight: 600;
}

.bo-sidebar-link.active i {
    color: var(--brand-600);
}

.bo-sidebar-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background-color: var(--brand-950);
    border-radius: var(--radius-full);
}

.bo-app-main {
    flex: 1;
    margin-inline-start: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bo-app-topbar {
    height: var(--topbar-height);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bo-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 80;
}

.bo-app-content {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: var(--app-content-max);
    width: 100%;
    margin-inline: auto;
}

/* ── Mobile Drawer Backdrop & App Bottom Nav ─────────────────────────────── */
.bo-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 29, 35, 0.45);
    backdrop-filter: blur(4px);
    z-index: 88;
}

.bo-sidebar-backdrop.show {
    display: block;
}

.bo-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--bo-border);
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0, 29, 35, 0.05);
    overflow: hidden;
}

.bo-bottom-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    color: var(--bo-text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: clamp(0.625rem, 2.2vw, 0.72rem);
    font-weight: 500;
    font-family: inherit;
    transition: color var(--ease-fast);
    overflow: hidden;
}

.bo-bottom-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    line-height: 1.15;
    display: block;
}

.bo-bottom-nav-item i {
    font-size: 1.1rem;
    color: var(--bo-text-muted);
    flex-shrink: 0;
    margin-bottom: 1px;
    transition: transform var(--ease-fast), color var(--ease-fast);
}

.bo-bottom-nav-item:hover,
.bo-bottom-nav-item.active {
    color: var(--brand-950);
    font-weight: 700;
}

.bo-bottom-nav-item.active i {
    color: var(--brand-600);
    transform: translateY(-2px);
}

.bo-page {
    width: 100%;
}

.bo-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.bo-page-header-main {
    flex: 1;
    min-width: 280px;
}

.bo-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-950);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.bo-page-desc {
    font-size: 0.84375rem;
    color: var(--bo-text-secondary);
    margin: 0;
    max-width: 720px;
    line-height: 1.5;
}

.bo-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── 17. Empty States & Alerts ───────────────────────────────────────────── */
.bo-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--bg-surface);
    border: 1px dashed var(--bo-border);
    border-radius: var(--radius-md);
}

.bo-empty-state-icon {
    font-size: 2.25rem;
    color: var(--bo-text-muted);
    margin-bottom: 0.75rem;
}

.bo-empty-state-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-950);
    margin-bottom: 0.25rem;
}

.bo-empty-state-desc {
    font-size: 0.84375rem;
    color: var(--bo-text-secondary);
    max-width: 440px;
    margin-inline: auto;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
}

.alert-success {
    background-color: var(--bo-success-bg);
    color: var(--bo-success);
    border-color: var(--bo-success-border);
}

.alert-danger {
    background-color: var(--bo-danger-bg);
    color: var(--bo-danger);
    border-color: var(--bo-danger-border);
}

.alert-warning {
    background-color: var(--bo-warning-bg);
    color: var(--bo-warning);
    border-color: var(--bo-warning-border);
}

.alert-info {
    background-color: var(--bo-info-bg);
    color: var(--bo-info);
    border-color: var(--bo-info-border);
}

/* ── Standardized Enterprise HTTP Error System ────────────────────────────── */
.bo-error-page {
    min-height: calc(100vh - 380px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.25rem;
    background: radial-gradient(circle at 50% 15%, rgba(0, 179, 136, 0.04) 0%, transparent 65%);
}

.bo-error-card {
    width: 100%;
    max-width: 580px;
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px -10px rgba(0, 29, 35, 0.08);
    padding: 2.75rem 2rem;
    text-align: center;
    margin-inline: auto;
}

.bo-error-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.35rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--ease-normal);
}

.bo-error-card:hover .bo-error-icon-wrapper {
    transform: scale(1.05);
}

.bo-error-icon-warning {
    background-color: rgba(245, 158, 11, 0.12);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.bo-error-icon-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.bo-error-icon-info {
    background-color: rgba(14, 165, 233, 0.12);
    color: #0284C7;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.bo-error-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.bo-error-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--brand-950);
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.bo-error-desc {
    font-size: 0.9375rem;
    color: var(--bo-text-secondary);
    line-height: 1.65;
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: 1.75rem;
}

.bo-error-correlation {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background-color: var(--bg-muted);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--bo-text-muted);
    margin-bottom: 1.75rem;
    max-width: 100%;
    word-break: break-all;
}

.bo-error-correlation code {
    font-family: Consolas, monospace;
    font-weight: 700;
    color: var(--brand-950);
}

.bo-error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .bo-error-page {
        padding: 2rem 1rem;
    }
    .bo-error-card {
        padding: 2rem 1.25rem;
    }
    .bo-error-title {
        font-size: 1.25rem;
    }
    .bo-error-actions {
        flex-direction: column;
        width: 100%;
    }
    .bo-error-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 18. Footer ──────────────────────────────────────────────────────────── */
.bo-footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--bo-border);
    padding-block: 4rem 2rem;
    margin-top: auto;
}

.bo-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.bo-footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-950);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.bo-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.875rem;
    color: var(--bo-text-secondary);
}

.bo-footer-links a:hover {
    color: var(--brand-950);
}

.bo-footer-bottom {
    border-top: 1px solid var(--bo-border-subtle);
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--bo-text-muted);
    flex-wrap: wrap;
    gap: 1rem;
}

/* ── 19. Accessibility & Focus States ────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    top: -100px;
    inset-inline-start: 1rem;
    background: var(--brand-950);
    color: #FFFFFF;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    z-index: 9999;
    text-decoration: none;
    transition: top var(--ease-fast);
}

.skip-to-content:focus {
    top: 1rem;
}

:focus-visible {
    outline: 2px solid var(--brand-950);
    outline-offset: 2px;
}

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

/* ── 20. RTL Utilities ───────────────────────────────────────────────────── */
[dir="rtl"] {
    text-align: right;
}

[dir="ltr"] {
    text-align: left;
}

/* ── 21. Responsive Breakpoint Matrix ────────────────────────────────────── */

/* Laptop / Desktop (<= 1279px) */
@media (max-width: 1279px) {
    :root {
        --app-content-max: 100%;
    }
    .bo-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bo-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* Tablet Landscape & Portrait (<= 1023px) */
@media (max-width: 1023px) {
    .bo-nav-menu {
        display: none !important;
    }
    .bo-nav-desktop-actions {
        display: none !important;
    }
    .bo-nav-mobile-actions {
        display: inline-flex !important;
    }
    .bo-brand-img {
        height: 38px;
    }
    .bo-app-sidebar {
        transform: translateX(-100%);
    }
    [dir="rtl"] .bo-app-sidebar {
        transform: translateX(100%);
    }
    .bo-app-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-modal);
    }
    .bo-app-main {
        margin-inline-start: 0;
    }
    .bo-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bo-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bo-app-content { padding: 1.25rem 1rem; }
    .bo-app-topbar { padding-inline: 1rem; }
    #registerResponsiveGrid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .bo-mockup-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile Devices (<= 767px) - Native App Experience */
@media (max-width: 767px) {
    :root {
        --navbar-height: 60px;
        --topbar-height: 56px;
    }
    .display-xl { font-size: clamp(1.75rem, 5.5vw, 2.15rem); }
    .display-lg { font-size: clamp(1.35rem, 4.5vw, 1.75rem); }
    .bo-hero { padding-block: 2.5rem 1.75rem; }
    .bo-grid-4, .bo-grid-3, .bo-grid-2 { grid-template-columns: 1fr !important; gap: 1rem; }
    
    .bo-live-clock, #liveClock {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        letter-spacing: 1px !important;
        word-break: keep-all !important;
        white-space: nowrap !important;
    }
    
    /* Native App Bottom Bar & Content Padding */
    .bo-bottom-nav {
        display: flex !important;
    }

    .bo-app-content {
        padding: 1rem 0.875rem 84px 0.875rem !important;
    }
    .bo-app-topbar {
        height: 56px;
        padding-inline: 0.875rem;
    }

    /* Mobile User Profile & Topbar Dropdowns Responsive Floating Sheet */
    .bo-topbar-actions .bo-dropdown-menu,
    .bo-user-dropdown-menu {
        position: fixed !important;
        top: calc(var(--topbar-height, 56px) + 8px) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: 360px !important;
        margin-inline: auto !important;
        max-height: calc(100vh - var(--topbar-height, 56px) - var(--bottom-nav-height, 60px) - 24px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 1050 !important;
        box-shadow: 0 12px 36px rgba(0, 29, 35, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border-radius: 16px !important;
    }
    .bo-page-header {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.15rem;
    }
    .bo-page-title {
        font-size: 1.2rem;
    }
    .bo-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .bo-card {
        padding: 1.15rem 1rem;
        border-radius: var(--radius-sm);
    }
    .bo-hero-proof-points {
        gap: 0.5rem;
        margin-bottom: 1.75rem;
        flex-direction: column;
        align-items: stretch;
        max-width: 380px;
    }
    .bo-hero-proof-item {
        font-size: 0.8125rem;
        padding: 0.45rem 0.85rem;
        justify-content: center;
        width: 100%;
    }
    .bo-hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }
    .bo-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .bo-mockup-browser-bar {
        padding: 0.5rem 0.75rem;
    }
    .bo-mockup-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
    }
    .bo-mockup-kpi-card {
        padding: 0.45rem 0.3rem;
        text-align: center;
    }
    .bo-mockup-kpi-header {
        justify-content: center;
        gap: 0.25rem;
    }
    .bo-mockup-kpi-label {
        font-size: 0.68rem;
    }
    .bo-mockup-kpi-value {
        font-size: 1.05rem;
    }
    .bo-mockup-kpi-subtext {
        display: none;
    }
    .bo-mockup-secondary-details {
        display: none;
    }
    .bo-mockup-secondary-details.is-open {
        display: block !important;
        margin-top: 0.75rem;
        animation: boFadeSlideDown 0.25s ease forwards;
    }
    .bo-mockup-canvas {
        padding: 0.75rem;
    }
    .bo-mockup-url-pill {
        max-width: 180px;
        padding: 0.15rem 0.6rem;
        font-size: 0.68rem;
    }
    .bo-trust-support-strip {
        padding: 1.25rem 1rem !important;
    }
    .bo-trust-support-strip .bo-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .bo-benchmark-kpis {
        gap: 0.5rem;
    }
    .bo-benchmark-kpi-val {
        font-size: 1rem;
    }
}

/* Small Mobile Devices (<= 479px) */
@media (max-width: 479px) {
    .bo-container {
        padding-inline: 0.875rem;
    }
    .bo-stat-value { font-size: 1.2rem; }
    .bo-page-title { font-size: 1.15rem; }
    .bo-app-topbar { padding-inline: 0.75rem; }
    .bo-card { padding: 1rem 0.85rem; }
}

/* Ultra-Narrow Viewports (<= 360px, e.g. 320px screens) - Zero Horizontal Scroll */
@media (max-width: 360px) {
    .bo-container {
        padding-inline: 0.5rem;
    }
    .bo-hero-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .bo-hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    .bo-hero-actions .btn {
        width: 100%;
        font-size: 0.875rem;
        padding: 0.65rem 1rem;
    }
    .bo-product-mockup {
        border-radius: var(--radius-sm);
        margin-inline: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .bo-mockup-browser-bar {
        padding: 0.4rem 0.5rem;
        gap: 0.35rem;
    }
    .bo-mockup-dots {
        display: none !important;
    }
    .bo-mockup-url-pill {
        max-width: 130px;
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .bo-mockup-badge-wrap .badge {
        font-size: 0.625rem;
        padding: 0.15rem 0.35rem;
    }
    .bo-mockup-canvas {
        padding: 0.5rem;
    }
    .bo-mockup-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
    }
    .bo-mockup-kpi-card {
        padding: 0.35rem 0.2rem;
    }
    .bo-mockup-kpi-value {
        font-size: 0.95rem;
    }
}

@keyframes boFadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── 22. Print ───────────────────────────────────────────────────────────── */
@media print {
    .bo-navbar,
    .bo-footer,
    .bo-app-sidebar,
    .bo-app-topbar,
    .bo-breadcrumb,
    .bo-page-actions,
    .btn,
    .skip-to-content,
    #mobileDrawer {
        display: none !important;
    }

    body, .bo-container, .bo-page {
        background: #FFFFFF !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .bo-app-main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .bo-app-content {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .bo-card {
        box-shadow: none !important;
        border: 1px solid #CCCCCC !important;
    }
}

/* ==========================================================================
   BALANCE ONE — ENTERPRISE SETUP ENGINE (MODERN UI & RESPONSIVE POLISH)
   ========================================================================== */

.bo-setup-shell {
    min-height: 100vh;
    background-color: var(--bo-bg-subtle, #F8FAFC);
    display: flex;
    flex-direction: column;
}

/* Header */
.bo-setup-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--bo-border, #E2E8F0);
    padding: 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bo-setup-brand-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bo-setup-logo-img {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.bo-setup-tenant-badge {
    background-color: #F8FAFC;
    color: var(--brand-950, #001D23);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E2E8F0;
}

.bo-setup-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bo-setup-progress-pill {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    padding: 5px 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.bo-setup-progress-bar-mini {
    width: 90px;
    height: 8px;
    background-color: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

.bo-setup-progress-bar-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-600, #00B388) 0%, #00936F 100%);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Layout */
.bo-setup-layout {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    padding: 28px 24px;
    display: flex;
    gap: 28px;
    flex: 1;
    align-items: flex-start;
}

.bo-setup-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 76px;
}

.bo-setup-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Stepper Card */
.bo-setup-stepper-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.bo-setup-stepper-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bo-setup-stage-item {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
}

.bo-setup-stage-item:last-child {
    padding-bottom: 0;
}

.bo-setup-stage-item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 32px;
    inset-inline-start: 15px;
    bottom: 0;
    width: 2px;
    background-color: #E2E8F0;
}

.bo-setup-stage-item.completed:not(:last-child)::before {
    background-color: #10B981;
}

.bo-setup-stage-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 1;
    background-color: #FFFFFF;
    border: 2px solid #CBD5E1;
    color: #64748B;
    transition: all 0.2s ease;
}

.bo-setup-stage-item.active .bo-setup-stage-dot {
    border-color: var(--brand-950, #001D23);
    background-color: var(--brand-950, #001D23);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(0, 29, 35, 0.1);
}

.bo-setup-stage-item.completed .bo-setup-stage-dot {
    border-color: #10B981;
    background-color: #10B981;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.bo-setup-stage-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.bo-setup-stage-header-link {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1E293B;
    text-decoration: none;
    display: flex;
    align-items: center;
    line-height: 1.35;
    padding-top: 5px;
    transition: color 0.15s ease;
}

.bo-setup-stage-header-link:hover {
    color: var(--brand-600, #00B388);
}

.bo-setup-stage-item.active .bo-setup-stage-header-link {
    color: var(--brand-950, #001D23);
}

.bo-setup-stage-item.completed .bo-setup-stage-header-link {
    color: #334155;
}

.bo-setup-substep-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    padding-inline-start: 8px;
    border-inline-start: 2px solid #E2E8F0;
}

.bo-setup-substep-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.bo-setup-substep-link:hover {
    background-color: #F1F5F9;
    color: var(--brand-950, #001D23);
}

.bo-setup-substep-link.active {
    background-color: rgba(0, 179, 136, 0.09);
    color: var(--brand-700, #008f6c);
    font-weight: 700;
}

.bo-setup-substep-link.completed {
    color: #334155;
}

.bo-setup-substep-link i {
    font-size: 0.75rem;
    width: 14px;
    text-align: center;
}

.bo-setup-help-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* Main Setup Cards */
.bo-setup-main-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.bo-setup-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 16px;
}

.bo-setup-stage-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-600, #00B388);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bo-setup-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bo-setup-subtitle {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0;
    line-height: 1.55;
}

/* Dual Setup Modes Selector */
.bo-setup-modes-wrapper {
    background: transparent;
}

.bo-setup-mode-card {
    background-color: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 20px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease-in-out;
}

.bo-setup-mode-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bo-setup-mode-card.is-recommended {
    border-color: rgba(0, 179, 136, 0.6);
    background: linear-gradient(180deg, rgba(0, 179, 136, 0.03) 0%, #FFFFFF 100%);
    box-shadow: 0 2px 8px rgba(0, 179, 136, 0.08);
}

.bo-setup-mode-card.is-recommended:hover {
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 4px 16px rgba(0, 179, 136, 0.14);
}

.bo-setup-mode-card.is-active {
    border-color: var(--brand-950, #001D23);
    background-color: #FAFCFC;
    box-shadow: 0 2px 8px rgba(0, 29, 35, 0.06);
}

.bo-setup-mode-tag {
    position: absolute;
    top: 0;
    inset-inline-end: 18px;
    transform: translateY(-50%);
    background: var(--brand-600, #00B388);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 179, 136, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.01em;
}

.bo-setup-mode-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bo-setup-mode-icon.is-excel {
    background: rgba(0, 179, 136, 0.12);
    color: #008f6c;
}

.bo-setup-mode-icon.is-manual {
    background: rgba(0, 29, 35, 0.06);
    color: var(--brand-950, #001D23);
}

.bo-setup-mode-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bo-text-primary, #0F172A);
    margin-bottom: 6px;
    line-height: 1.4;
}

.bo-setup-mode-desc {
    font-size: 0.8125rem;
    color: var(--bo-text-secondary, #64748B);
    line-height: 1.55;
    margin-bottom: 14px;
}

.bo-setup-mode-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 29, 35, 0.06);
    color: var(--brand-950, #001D23);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(0, 29, 35, 0.1);
}

/* Logo Uploader Widget */
.bo-setup-logo-uploader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1.5px dashed var(--bo-border, #CBD5E1);
    border-radius: var(--radius-md, 10px);
    background-color: #FFFFFF;
    transition: border-color 0.2s ease;
}

.bo-setup-logo-uploader:hover {
    border-color: var(--brand-600, #00B388);
}

.bo-setup-logo-preview {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 1px solid var(--bo-border, #E2E8F0);
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.bo-setup-logo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bo-setup-logo-placeholder {
    font-size: 1.35rem;
    color: #94A3B8;
}

/* Dark Action Banner */
.bo-setup-dark-banner {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 24px;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.bo-setup-dark-banner h4,
.bo-setup-dark-banner h2 {
    color: #FFFFFF !important;
}

.bo-setup-dark-banner p {
    color: #94A3B8 !important;
}

/* Stage Cards in 6-Pillars Grid */
.bo-setup-stage-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.bo-setup-stage-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.bo-setup-stage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bo-setup-stage-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78125rem;
    font-weight: 700;
}

.bo-setup-substep-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-color: #F8FAFC;
    border-radius: 8px;
    font-size: 0.8125rem;
    border: 1px solid #F1F5F9;
    color: inherit;
    text-decoration: none;
    transition: all 0.18s ease-in-out;
    cursor: pointer;
}

.bo-setup-substep-row:hover {
    background-color: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.hover-elevate {
    transition: all 0.18s ease-in-out;
}

.hover-elevate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* Action Footer */
.bo-setup-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #F1F5F9;
    margin-top: 8px;
}

.bo-setup-actions-left,
.bo-setup-actions-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.min-w-160 {
    min-width: 160px;
}

/* Mobile Setup Elements */
.bo-setup-mobile-header {
    display: none;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
}

.bo-setup-mobile-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bo-setup-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: flex-end;
}

.bo-setup-mobile-drawer.open {
    display: flex;
}

.bo-setup-mobile-drawer-content {
    background-color: #FFFFFF;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: slideDrawer 0.25s ease-out;
}

@keyframes slideDrawer {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

[dir="ltr"] .bo-setup-mobile-drawer-content {
    animation: slideDrawerLtr 0.25s ease-out;
}

@keyframes slideDrawerLtr {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@media (max-width: 991.98px) {
    .bo-setup-sidebar {
        display: none;
    }

    .bo-setup-mobile-header {
        display: flex;
    }

    .bo-setup-layout {
        padding: 16px;
        flex-direction: column;
    }

    .bo-setup-main-card {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   BALANCE ONE — PLATFORM SUPER ADMIN COMMAND CENTER STYLES
   ========================================================================== */

.bo-platform-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Header & Controls */
.bo-platform-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bo-border-subtle);
}

.bo-platform-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bo-period-pills {
    display: inline-flex;
    align-items: center;
    background: var(--bg-muted);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.bo-period-pill {
    padding: 0.35rem 0.75rem;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--bo-text-secondary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.bo-period-pill:hover {
    color: var(--brand-950);
    background: rgba(0, 0, 0, 0.04);
}

.bo-period-pill.active {
    background: var(--brand-950);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* KPI Cards */
.bo-platform-kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    box-shadow: var(--shadow-subtle);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bo-platform-kpi-card:hover {
    border-color: var(--brand-300);
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.05);
}

.bo-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.bo-kpi-title-ar {
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--brand-950);
    line-height: 1.3;
}

.bo-kpi-title-en {
    font-size: 0.71875rem;
    font-weight: 500;
    color: var(--bo-text-muted);
    margin-top: 2px;
}

.bo-kpi-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.bo-kpi-icon-brand {
    background: var(--brand-50);
    color: var(--brand-600);
    border: 1px solid var(--brand-200);
}

.bo-kpi-icon-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.bo-kpi-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.bo-kpi-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.bo-kpi-number {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--brand-950);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.bo-mrr-split {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.bo-mrr-cell {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.bo-mrr-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-950);
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.bo-mrr-curr {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bo-text-muted);
}

.bo-kpi-bottom {
    padding-top: 0.65rem;
    border-top: 1px solid var(--bo-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--bo-text-secondary);
}

.bo-kpi-bottom a {
    color: var(--brand-600);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.bo-kpi-bottom a:hover {
    color: var(--brand-950);
    text-decoration: underline;
}

/* Secondary Metrics Strip */
.bo-metrics-strip {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-subtle);
}

.bo-strip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.bo-strip-label {
    color: var(--bo-text-secondary);
    font-weight: 500;
}

.bo-strip-val {
    font-weight: 700;
    color: var(--brand-950);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.9375rem;
}

.bo-strip-divider {
    width: 1px;
    height: 20px;
    background: var(--bo-border);
}

/* Attention Cards */
.bo-attention-item {
    background: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-inline-start-width: 4px;
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.bo-attention-critical {
    border-inline-start-color: #DC2626;
    background: #FFFDFD;
}

.bo-attention-high {
    border-inline-start-color: #D97706;
    background: #FFFEFA;
}

.bo-attention-warning {
    border-inline-start-color: #F59E0B;
}

.bo-attention-info {
    border-inline-start-color: var(--brand-600);
}

/* Distribution Multi Progress */
.bo-progress-multi {
    height: 12px;
    border-radius: 999px;
    background: var(--bg-muted);
    display: flex;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--bo-border-subtle);
}

.bo-progress-seg-active { background: #10B981; }
.bo-progress-seg-trial { background: #0EA5E9; }
.bo-progress-seg-pastdue { background: #F59E0B; }
.bo-progress-seg-suspended { background: #EF4444; }
.bo-progress-seg-cancelled { background: #94A3B8; }

.hover-teal:hover {
    color: var(--brand-600) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GO-LIVE READINESS CENTER (STAGE 6)
   ══════════════════════════════════════════════════════════════════════════════ */

.bo-golive-hero-card {
    background: linear-gradient(135deg, #001D23 0%, #0F2A32 50%, #163B45 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px 32px;
    color: #FFFFFF !important;
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.35), 0 8px 10px -6px rgba(0, 29, 35, 0.25);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.bo-golive-hero-card h1,
.bo-golive-hero-card h2,
.bo-golive-hero-card h3,
.bo-golive-hero-card h4,
.bo-golive-hero-card .text-white {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bo-golive-hero-card .text-white-50 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bo-golive-hero-card::after {
    content: "";
    position: absolute;
    top: -50%;
    inset-inline-end: -20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(14, 165, 233, 0.12) 50%, transparent 70%);
    pointer-events: none;
}

.bo-golive-score-container {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bo-golive-score-gauge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.18);
    border: 3px solid #10B981;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
    flex-shrink: 0;
}

.bo-golive-score-gauge.warning {
    background: rgba(245, 158, 11, 0.18);
    border-color: #F59E0B;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}

.bo-golive-score-number {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: #10B981;
    font-family: var(--font-numeric, monospace);
}

.bo-golive-score-gauge.warning .bo-golive-score-number {
    color: #F59E0B;
}

.bo-golive-score-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 3px;
}

.bo-golive-assurance-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.bo-golive-assurance-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.8125rem;
    color: #F8FAFC;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.bo-golive-assurance-pill i {
    color: #34D399;
}

/* Pillar Audit Grid & Cards */
.bo-golive-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .bo-golive-pillar-grid {
        grid-template-columns: 1fr;
    }
}

.bo-golive-pillar-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    transition: all 0.2s ease;
    border-inline-start-width: 4px;
}

.bo-golive-pillar-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.bo-golive-pillar-card.ready {
    border-inline-start-color: #10B981;
}

.bo-golive-pillar-card.warning {
    border-inline-start-color: #F59E0B;
    background: #FFFDF9;
}

.bo-golive-pillar-card.blocked {
    border-inline-start-color: #EF4444;
    background: #FEF8F8;
}

.bo-golive-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.bo-golive-pillar-card.ready .bo-golive-icon-box {
    background: #ECFDF5;
    color: #059669;
}

.bo-golive-pillar-card.warning .bo-golive-icon-box {
    background: #FFFBEB;
    color: #D97706;
}

.bo-golive-pillar-card.blocked .bo-golive-icon-box {
    background: #FEF2F2;
    color: #DC2626;
}

/* Launch Terminal CTA Box */
.bo-golive-launch-terminal {
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.bo-golive-launch-terminal.ready-to-launch {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(180deg, #F6FDF9 0%, #FFFFFF 100%);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.08);
}

.bo-golive-launch-btn {
    background: linear-gradient(135deg, #001D23 0%, #064E3B 50%, #059669 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1.125rem;
    padding: 16px 48px;
    border-radius: 12px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 29, 35, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

.bo-golive-launch-btn:hover {
    background: linear-gradient(135deg, #002A33 0%, #047857 50%, #10B981 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 29, 35, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SETUP COMPLETE & CELEBRATION
   ══════════════════════════════════════════════════════════════════════════════ */

.bo-setup-trophy-hero {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px auto;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(2, 132, 199, 0.15) 100%);
    border: 2px solid rgba(16, 185, 129, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: #D97706;
    box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.25);
    animation: bo-trophy-pulse 2.5s infinite ease-in-out;
}

@keyframes bo-trophy-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.25);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 16px 40px -5px rgba(16, 185, 129, 0.4);
    }
}

.max-w-600 {
    max-width: 600px;
}

.max-w-700 {
    max-width: 700px;
}

.bo-setup-next-step-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bo-setup-next-step-card:hover {
    border-color: #0284C7;
    background: #F8FAFC;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -2px rgba(2, 132, 199, 0.14);
}

.bo-setup-next-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #ECFDF5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bo-setup-next-step-card i.fa-arrow-left,
.bo-setup-next-step-card i.fa-arrow-right {
    font-size: 1.125rem;
    color: #0284C7;
    transition: transform 0.2s ease;
}

.bo-setup-next-step-card:hover i.fa-arrow-left {
    transform: translateX(-4px);
}

.bo-setup-next-step-card:hover i.fa-arrow-right {
    transform: translateX(4px);
}

/* ── UI-008: RTL Numbers & Currency Alignment ──────────────────────────── */
.bo-amount-cell,
.text-numeric,
.bo-numeric-cell {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1;
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: end !important;
    white-space: nowrap;
}

[dir="rtl"] .bo-amount-cell,
[dir="rtl"] .text-numeric,
[dir="rtl"] .bo-numeric-cell,
[dir="rtl"] td.bo-amount-cell,
[dir="rtl"] th.bo-amount-cell {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: end !important;
}

.bo-currency-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    direction: ltr !important;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bo-currency-badge .bo-amount {
    font-weight: 600;
}

.bo-currency-badge .bo-symbol {
    font-size: 0.8em;
    color: var(--bo-text-muted);
}

/* ── UI-012: Dashboard Loading Skeletons ────────────────────────────────── */
@keyframes bo-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.bo-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: bo-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm, 0.375rem);
    display: inline-block;
}

.bo-skeleton-text {
    height: 0.875rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.bo-skeleton-title {
    height: 1.25rem;
    width: 60%;
    margin-bottom: 0.75rem;
}

.bo-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.bo-skeleton-card {
    background: #ffffff;
    border: 1px solid var(--bo-border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bo-skeleton-kpi {
    background: #ffffff;
    border: 1px solid var(--bo-border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    padding: 1.25rem;
}

.bo-skeleton-table-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

/* ── UI-023 Text Truncation & Card Layout Preservation ────────────────────── */
.bo-truncate, .text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100%;
}

.bo-line-clamp-1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word;
}

.bo-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word;
}

.bo-kpi-card, .bo-stat-card, .card {
    min-width: 0; /* Prevents flex items from overflowing parent bounds */
}

.bo-kpi-card h2, .bo-kpi-card h3, .bo-stat-card h2, .bo-stat-card h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── ISSUE 04: Mobile Tables & Touch Target Remediation ──────────────────── */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
    max-width: 100%;
}

@media (max-width: 768px) {
    .table-responsive {
        border-radius: var(--radius-sm);
        margin-inline: -0.25rem;
    }

    .table-responsive table {
        min-width: 620px;
    }

    .table-responsive table th,
    .table-responsive table td {
        white-space: nowrap;
        padding: 0.65rem 0.6rem !important;
        font-size: 0.85rem;
    }

    /* Primary and touch action buttons minimum 44px on mobile */
    .table-responsive .btn-sm,
    .table-responsive .btn-icon,
    .table-responsive form button {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .bo-page-actions .btn,
    .bo-auth-card .btn,
    .bo-hero-actions .btn,
    .form-group button[type="submit"] {
        min-height: 44px;
    }
}

/* ── 024. Professional Enterprise Print Stylesheet ───────────────────────── */
@media print {
    /* Hide non-printable navigation, sidebar, and interactive action bars */
    .bo-sidebar,
    .bo-header,
    .bo-navbar,
    .bo-page-actions,
    .navbar,
    .btn,
    .dropdown,
    .modal-backdrop,
    .alert-dismissible .btn-close,
    footer,
    nav {
        display: none !important;
    }

    /* Reset background and layout for clean white paper print */
    body, html, main, .bo-main-content, .container, .container-fluid {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    /* Printable Document Container (Invoices, Contracts, Letters) */
    .card, .bo-document-card, .bo-invoice-card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    /* High contrast text for print */
    h1, h2, h3, h4, h5, h6, p, td, th, span {
        color: #000000 !important;
    }

    /* Ensure tables print cleanly across pages */
    table {
        page-break-inside: auto !important;
        width: 100% !important;
    }

    tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }

    thead {
        display: table-header-group !important;
    }
}

/* ── 025. Standardized Empty State Component ─────────────────────────────── */
.bo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    background: #ffffff;
    border: 1px dashed var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    margin: 1.5rem 0;
}

.bo-empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-50, #f0fdf4);
    color: var(--brand-600, #00b388);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

.bo-empty-state-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bo-text-primary, #102427);
    margin-bottom: 0.5rem;
}

.bo-empty-state-desc {
    font-size: 0.9rem;
    color: var(--bo-text-muted, #6c7d7e);
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ── 026. Accessible Keyboard Focus Styles ───────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--brand-600, #00b388) !important;
    outline-offset: 2px !important;
}

/* ── 027. Pricing Cards & Information Architecture (Problem 10) ───────────── */
.bo-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: stretch;
}

.bo-pricing-card {
    background-color: var(--bg-surface, #ffffff);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-xl, 1rem);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    position: relative;
    box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bo-pricing-card:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    border-color: var(--brand-300, #93c5fd);
}

.bo-pricing-card.is-recommended {
    border: 2px solid var(--brand-950, #0f172a);
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.45) 0%, var(--bg-surface, #ffffff) 18%);
}

.bo-pricing-badge-wrapper {
    min-height: 28px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bo-pricing-header {
    margin-bottom: 0.85rem;
}

.bo-pricing-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-950, #0f172a);
    margin-bottom: 0.35rem;
}

.bo-pricing-desc {
    color: var(--bo-text-secondary, #64748b);
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 44px;
    margin-bottom: 0.75rem;
}

.bo-pricing-diff-callout {
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bo-border-subtle, #e2e8f0);
    color: var(--brand-900, #1e293b);
    margin-bottom: 1.25rem;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bo-pricing-card.is-recommended .bo-pricing-diff-callout {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}

.bo-pricing-price-box {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bo-border, #e2e8f0);
}

.bo-pricing-amount-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.bo-pricing-amount {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand-950, #0f172a);
    line-height: 1;
}

.bo-pricing-cycle-label {
    font-size: 0.875rem;
    color: var(--bo-text-secondary, #64748b);
}

.bo-pricing-model-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-full, 9999px);
    line-height: 1.25;
}

.bo-pricing-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
}

.bo-pricing-spec-item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.65rem;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bo-border-subtle, #e2e8f0);
    border-radius: var(--radius-sm, 0.375rem);
}

.bo-pricing-spec-label {
    font-size: 0.6875rem;
    color: var(--bo-text-muted, #64748b);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.bo-pricing-spec-val {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-950, #0f172a);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-pricing-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    padding: 0.75rem 1.25rem;
}

.bo-pricing-features-section {
    margin-top: auto;
    border-top: 1px solid var(--bo-border, #e2e8f0);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bo-pricing-features-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-950, #0f172a);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bo-pricing-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.bo-pricing-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--bo-text-primary, #334155);
    line-height: 1.4;
}

.bo-pricing-feature-item i {
    color: var(--brand-600, #0284c7);
    font-size: 0.85rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.bo-pricing-more-details {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--bo-border-subtle, #e2e8f0);
    padding-top: 0.75rem;
}

.bo-pricing-more-summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-950, #0f172a);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    outline: none;
    list-style: none;
    user-select: none;
}

.bo-pricing-more-summary::-webkit-details-marker {
    display: none;
}

.bo-pricing-more-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding-inline-start: 0.5rem;
}

.bo-pricing-compare-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-950, #0f172a);
    text-decoration: underline;
    transition: color 0.15s ease;
}

.bo-pricing-compare-link:hover {
    color: var(--brand-600, #0284c7);
}

@media (max-width: 1024px) {
    .bo-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 767px) {
    .bo-pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .bo-pricing-card {
        padding: 1.5rem 1.25rem;
    }
    .bo-pricing-desc {
        min-height: auto;
    }
    .bo-pricing-diff-callout {
        min-height: auto;
    }
    .bo-pricing-specs-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 028. Comparison Matrix Accessibility & Legend (Problem 11) ─────────── */
.bo-matrix-legend-box {
    background-color: var(--bg-surface, #ffffff);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1.15rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.bo-matrix-legend-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-950, #0f172a);
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bo-border-subtle, #f1f5f9);
}

.bo-matrix-legend-header i {
    color: var(--brand-600, #00b388);
}

.bo-matrix-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: center;
}

.bo-matrix-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8125rem;
}

.bo-matrix-legend-desc {
    font-size: 0.8125rem;
    color: var(--bo-text-secondary, #64748b);
}

.bo-matrix-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.bo-matrix-status i {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.bo-matrix-status-text {
    display: inline-block;
}

/* Included / Available (متاح) */
.bo-matrix-status-included {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.bo-matrix-status-included i {
    color: #059669;
}

/* Not Included (غير متاح) */
.bo-matrix-status-not-included {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.bo-matrix-status-not-included i {
    color: #dc2626;
}

/* Tier Quota / Conditional (حسب الخطة / حصة محددة) */
.bo-matrix-status-custom {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.bo-matrix-status-custom i {
    color: #2563eb;
}

@media (max-width: 767px) {
    .bo-matrix-legend-items {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .bo-matrix-legend-item {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ── 029. Comparison Matrix Mobile Responsiveness & Sticky Layout ─────────── */
.bo-matrix-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bo-matrix-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bo-matrix-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--bo-border-color, #cbd5e1);
    background: #ffffff;
    color: var(--bo-text-primary, #0f172a);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.bo-matrix-diff-toggle:hover {
    background: var(--bo-bg-subtle, #f8fafc);
    border-color: var(--brand-600, #00b388);
}

.bo-matrix-diff-toggle.active {
    background: #001d23;
    color: #ffffff;
    border-color: #001d23;
}

.bo-matrix-diff-toggle .diff-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 179, 136, 0.15);
    color: var(--brand-600, #00b388);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    line-height: 1.2;
}

.bo-matrix-diff-toggle.active .diff-count-badge {
    background: var(--brand-500, #00b388);
    color: #001d23;
}

.bo-matrix-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(0, 29, 35, 0.05);
    border: 1px solid rgba(0, 29, 35, 0.1);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    color: var(--bo-text-secondary, #64748b);
    animation: bo-hint-pulse 2.5s infinite;
}

@keyframes bo-hint-pulse {
    0%, 100% { opacity: 0.85; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

[dir="rtl"] @keyframes bo-hint-pulse {
    0%, 100% { opacity: 0.85; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-3px); }
}

/* Scroll Container */
.bo-matrix-scroll-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--bo-border-color, #e2e8f0);
    background: #ffffff;
}

/* Sticky Table Structure */
.bo-matrix-sticky-table {
    margin: 0;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.bo-matrix-sticky-table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--bo-bg-subtle, #f8fafc);
    border-bottom: 2px solid var(--bo-border-color, #e2e8f0);
}

.bo-matrix-sticky-table thead th.bo-sticky-col {
    position: sticky;
    top: 0;
    inset-inline-start: 0;
    z-index: 12;
    background: var(--bo-bg-subtle, #f8fafc);
    border-inline-end: 2px solid var(--bo-border-color, #e2e8f0);
}

.bo-matrix-sticky-table tbody th.bo-sticky-col,
.bo-matrix-sticky-table tbody td.bo-sticky-col {
    position: sticky;
    inset-inline-start: 0;
    z-index: 5;
    background: #ffffff;
    border-inline-end: 2px solid var(--bo-border-color, #e2e8f0);
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.05);
}

[dir="rtl"] .bo-matrix-sticky-table tbody th.bo-sticky-col,
[dir="rtl"] .bo-matrix-sticky-table tbody td.bo-sticky-col {
    box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.05);
}

.bo-matrix-sticky-table tr:hover td.bo-sticky-col,
.bo-matrix-sticky-table tr:hover th.bo-sticky-col {
    background: #f8fafc;
}

.bo-matrix-sticky-table .bo-matrix-cat-row td {
    position: sticky;
    inset-inline-start: 0;
    background: #f1f5f9;
    z-index: 4;
}

/* Show Differences Only Behavior */
.bo-matrix-table.show-diff-only tr.row-identical {
    display: none !important;
}

.bo-matrix-table.show-diff-only tr.category-all-hidden {
    display: none !important;
}

/* Responsive Breakpoint Matrix for Mobile & Tablet */
@media (max-width: 991px) {
    .bo-matrix-header-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .bo-matrix-scroll-hint {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .bo-matrix-sticky-table thead th {
        padding: 0.85rem 0.5rem;
        min-width: 140px;
    }
    .bo-matrix-sticky-table thead th.bo-sticky-col,
    .bo-matrix-sticky-table tbody th.bo-sticky-col,
    .bo-matrix-sticky-table tbody td.bo-sticky-col {
        min-width: 150px;
        max-width: 190px;
        padding: 0.75rem 0.65rem;
        font-size: 0.8125rem;
        white-space: normal;
        word-break: break-word;
    }
    .bo-matrix-sticky-table tbody td {
        padding: 0.65rem 0.5rem;
    }
    .bo-matrix-status {
        padding: 0.2rem 0.45rem;
        font-size: 0.75rem;
    }
    .bo-matrix-status i {
        font-size: 0.75rem;
    }
}

@media (max-width: 390px) {
    .bo-matrix-sticky-table thead th {
        padding: 0.65rem 0.35rem;
        min-width: 120px;
    }
    .bo-matrix-sticky-table thead th.bo-sticky-col,
    .bo-matrix-sticky-table tbody th.bo-sticky-col,
    .bo-matrix-sticky-table tbody td.bo-sticky-col {
        min-width: 125px;
        max-width: 145px;
        padding: 0.55rem 0.45rem;
        font-size: 0.75rem;
    }
    .bo-matrix-status-text {
        font-size: 0.7rem;
    }
}

@media (max-width: 360px) {
    .bo-matrix-sticky-table thead th.bo-sticky-col,
    .bo-matrix-sticky-table tbody th.bo-sticky-col,
    .bo-matrix-sticky-table tbody td.bo-sticky-col {
        min-width: 110px;
        max-width: 130px;
        font-size: 0.7rem;
        padding: 0.45rem 0.35rem;
    }
    .bo-matrix-diff-toggle {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }
    .bo-matrix-scroll-hint {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}

/* ── 030. Pricing Transparency & Billing Switcher Impact ──────────────────── */
.bo-pricing-controls-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bo-border, #e2e8f0);
    padding: 1.25rem 2rem;
    border-radius: var(--radius-lg, 12px);
    max-width: 840px;
    width: 100%;
    margin-inline: auto;
    box-shadow: 0 4px 12px -2px rgba(0, 29, 35, 0.04);
}

.bo-pricing-controls-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.bo-pricing-toggle-group {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--bo-border, #cbd5e1);
    border-radius: var(--radius-full, 9999px);
    padding: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bo-pricing-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    color: var(--bo-text-secondary, #64748b);
}

.bo-pricing-toggle-btn:hover {
    color: var(--brand-950, #001d23);
    background: rgba(0, 29, 35, 0.04);
}

.bo-pricing-toggle-btn.active {
    background: var(--brand-950, #001d23);
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 29, 35, 0.2);
}

.bo-pricing-savings-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.bo-pricing-toggle-btn.active .bo-pricing-savings-pill {
    background: #10b981;
    color: #ffffff;
    border-color: #059669;
}

.bo-pricing-impact-callout {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
    color: #166534;
    line-height: 1.45;
    text-align: start;
}

.bo-pricing-impact-callout.is-monthly {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: var(--bo-text-secondary, #475569);
}

.bo-pricing-impact-callout i {
    font-size: 1rem;
    flex-shrink: 0;
}

.bo-pricing-statutory-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.775rem;
    color: var(--bo-text-secondary, #64748b);
    text-align: center;
    justify-content: center;
}

.bo-pricing-clarification-subline {
    font-size: 0.775rem;
    color: var(--bo-text-secondary, #475569);
    margin-top: 0.45rem;
    line-height: 1.35;
}

.bo-pricing-equiv-monthly {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.775rem;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm, 6px);
    margin-top: 0.35rem;
}

.bo-matrix-plan-price-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.35rem;
}

/* ==========================================================================
   031. Executive Security UX, Flow Architecture, Glossary & Status Badges
   ========================================================================== */

/* Executive Summary Box */
.bo-sec-exec-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-xl, 16px);
    padding: 2.25rem;
    box-shadow: 0 10px 30px -10px rgba(0, 29, 35, 0.06);
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

.bo-sec-exec-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-600, #006c52), #0284c7);
}

.bo-sec-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-block: 1.75rem 1.25rem;
}

.bo-sec-kpi-item {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bo-sec-kpi-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 29, 35, 0.05);
}

.bo-sec-kpi-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-600, #006c52);
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.bo-sec-kpi-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-950, #0f172a);
    margin-bottom: 0.25rem;
}

.bo-sec-kpi-sub {
    font-size: 0.75rem;
    color: var(--bo-text-secondary, #64748b);
    line-height: 1.4;
}

.bo-sec-exec-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--bo-border, #e2e8f0);
}

/* Status Badges */
.bo-sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.725rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full, 9999px);
    line-height: 1.3;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bo-sec-badge-implemented {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.bo-sec-badge-plan {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.bo-sec-badge-roadmap {
    background: #faf5ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
}

/* Visual Security Architecture Flow */
.bo-security-arch-container {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-xl, 16px);
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 20px -4px rgba(0, 29, 35, 0.04);
}

.bo-security-arch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    position: relative;
    align-items: stretch;
}

.bo-arch-step-card {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bo-arch-step-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-600, #006c52);
    box-shadow: 0 8px 20px rgba(0, 108, 82, 0.08);
}

.bo-arch-step-num {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full, 9999px);
    background: var(--brand-600, #006c52);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.bo-arch-step-icon {
    font-size: 1.35rem;
    color: var(--brand-600, #006c52);
    margin-bottom: 0.65rem;
}

.bo-arch-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-950, #0f172a);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.bo-arch-step-biz {
    font-size: 0.785rem;
    color: var(--bo-text-secondary, #475569);
    line-height: 1.5;
    margin-bottom: 0.65rem;
    flex-grow: 1;
}

.bo-arch-step-tech {
    font-size: 0.7rem;
    color: var(--bo-text-muted, #64748b);
    background: var(--bg-surface, #ffffff);
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--bo-border, #e2e8f0);
    font-family: var(--font-mono, monospace);
    line-height: 1.3;
}

.bo-arch-connector {
    position: absolute;
    inset-inline-end: -0.55rem;
    inset-block-start: 40%;
    z-index: 2;
    color: var(--brand-600, #006c52);
    font-size: 0.85rem;
    background: var(--bg-surface, #ffffff);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

[dir="rtl"] .bo-arch-connector i.fa-arrow-right {
    transform: scaleX(-1);
}

/* Security Pillars Enhanced Cards */
.bo-sec-pillar-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bo-sec-pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(0, 29, 35, 0.08);
}

.bo-sec-pillar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.bo-sec-pillar-biz-note {
    background: var(--bg-subtle, #f8fafc);
    border-inline-start: 3px solid var(--brand-600, #006c52);
    padding: 0.65rem 0.85rem;
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
    font-size: 0.8rem;
    color: var(--brand-950, #0f172a);
    line-height: 1.5;
}

[dir="rtl"] .bo-sec-pillar-biz-note {
    border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
}

/* Security Glossary */
.bo-glossary-section {
    background: var(--bg-subtle, #f8fafc);
    border-block: 1px solid var(--bo-border, #e2e8f0);
    padding-block: 3.5rem;
}

.bo-glossary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.bo-glossary-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: box-shadow 0.2s ease;
}

.bo-glossary-card:hover {
    box-shadow: 0 6px 18px rgba(0, 29, 35, 0.06);
}

.bo-glossary-term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bo-glossary-term h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-950, #0f172a);
}

.bo-glossary-biz-meaning {
    font-size: 0.845rem;
    color: var(--bo-text-secondary, #334155);
    line-height: 1.6;
}

.bo-glossary-meta {
    font-size: 0.775rem;
    color: var(--brand-600, #006c52);
    font-weight: 600;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Printable Executive Security Brief Sheet */
.bo-security-brief-doc {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-lg, 12px);
    padding: 2.5rem;
    max-width: 900px;
    margin-inline: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.bo-security-brief-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--brand-600, #006c52);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

@media print {
    body * {
        visibility: hidden !important;
    }
    .bo-security-brief-doc,
    .bo-security-brief-doc * {
        visibility: visible !important;
    }
    .bo-security-brief-doc {
        position: absolute !important;
        inset-inline-start: 0 !important;
        inset-block-start: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.5cm !important;
        border: none !important;
        box-shadow: none !important;
    }
    .bo-no-print {
        display: none !important;
    }
}

/* Responsive queries */
@media (max-width: 992px) {
    .bo-sec-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bo-security-arch-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1.5rem;
    }
    .bo-arch-connector {
        display: none;
    }
    .bo-glossary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bo-sec-kpi-grid {
        grid-template-columns: 1fr;
    }
    .bo-security-arch-grid {
        grid-template-columns: 1fr;
    }
    .bo-glossary-grid {
        grid-template-columns: 1fr;
    }
    .bo-sec-exec-card {
        padding: 1.5rem 1.15rem;
    }
}

/* ── Universal Tabs, Nav Pills & Tab Panes Engine ────────────────────────── */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    list-style: none;
    gap: 0.5rem;
}

.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.nav-pills .nav-item {
    list-style: none;
    display: inline-block;
}

.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bo-text-secondary, #475569);
    background-color: #f1f5f9;
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.nav-pills .nav-link.rounded-pill {
    border-radius: 9999px;
}

.nav-pills .nav-link:hover {
    background-color: #e2e8f0;
    color: var(--brand-950, #001D23);
    transform: translateY(-1px);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-950, #001D23) !important;
    color: #ffffff !important;
    border-color: var(--brand-950, #001D23) !important;
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.15);
}

.nav-pills .nav-link.active .badge,
.nav-pills .nav-link.active span.badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.nav-pills.nav-fill .nav-item,
.nav-pills.nav-justified .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

.nav-pills.nav-fill .nav-link,
.nav-pills.nav-justified .nav-link {
    width: 100%;
    justify-content: center;
}

/* Tabs */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--bo-border, #e2e8f0);
    margin-bottom: 1.5rem;
    list-style: none;
    padding: 0;
}

.nav-tabs .nav-item {
    list-style: none;
    margin-bottom: -2px;
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--bo-text-secondary, #64748b);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--brand-600, #00B388);
    border-bottom-color: rgba(0, 179, 136, 0.4);
}

.nav-tabs .nav-link.active {
    color: var(--brand-950, #001D23) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--brand-500, #00B388) !important;
}

/* Card Header Tabs */
.card-header-tabs {
    margin-right: -0.5rem;
    margin-bottom: -0.75rem;
    margin-left: -0.5rem;
    border-bottom: 0;
}

/* Tab Panes Visibility & Transitions */
.tab-content {
    width: 100%;
}

.tab-content > .tab-pane {
    display: none !important;
}

.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active {
    display: block !important;
}

.tab-content > .tab-pane.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}

.tab-content > .tab-pane.fade.show {
    opacity: 1;
}

/* ── Universal Cards & Component Spacing ─────────────────────────────────── */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid var(--bo-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card.border-0 {
    border: 1px solid var(--bo-border, #eef2f6) !important;
}

.card.shadow-sm {
    box-shadow: 0 2px 6px rgba(0, 29, 35, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card.rounded-3 {
    border-radius: 12px !important;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.5rem;
}

.card-header {
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    background-color: #ffffff;
    border-bottom: 1px solid var(--bo-border, #e2e8f0);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card-footer {
    padding: 1rem 1.5rem;
    background-color: var(--bg-surface, #f8fafc);
    border-top: 1px solid var(--bo-border, #e2e8f0);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.hover-shadow:hover {
    box-shadow: 0 8px 24px rgba(0, 29, 35, 0.1) !important;
    border-color: var(--brand-300, #57988D) !important;
    transform: translateY(-2px);
}

/* Consecutive element separation */
.card + .card,
.row + .card,
.card + .row,
.table-responsive + .card,
.card + .table-responsive {
    margin-top: 1.5rem;
}

/* Empty State Cards Enhancement */
.card.text-center.py-5 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
    margin-bottom: 1.5rem;
}

/* ── Enterprise Alert & Notification Styling System ──────────────────────── */
.alert {
    position: relative;
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 180ms ease;
}

.alert i:first-child {
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.alert-success {
    color: #065F46;
    background-color: #ECFDF5;
    border-color: #A7F3D0;
}
.alert-success i:first-child {
    color: #00B388;
}

.alert-danger {
    color: #991B1B;
    background-color: #FEF2F2;
    border-color: #FECACA;
}
.alert-danger i:first-child {
    color: #EF4444;
}

.alert-warning {
    color: #92400E;
    background-color: #FFFBEB;
    border-color: #FDE68A;
}
.alert-warning i:first-child {
    color: #F59E0B;
}

.alert-info {
    color: #075985;
    background-color: #F0F9FF;
    border-color: #BAE6FD;
}
.alert-info i:first-child {
    color: #0284C7;
}

/* ── Unified Enterprise Modals & Dialogs System ──────────────────────────── */
.bo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 29, 35, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 180ms ease;
}

.bo-modal-overlay.bo-modal-show {
    opacity: 1;
}

.bo-modal-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 25px 50px -12px rgba(0, 29, 35, 0.25), 0 10px 15px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--bo-border, #E2E9E8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(8px);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.bo-modal-overlay.bo-modal-show .bo-modal-card {
    transform: scale(1) translateY(0);
}

.bo-modal-header {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--bo-border, #E2E9E8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
}

.bo-modal-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bo-modal-icon-badge.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.bo-modal-icon-badge.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
}

.bo-modal-icon-badge.info {
    background: rgba(2, 132, 199, 0.12);
    color: #0284C7;
}

.bo-modal-icon-badge.success {
    background: rgba(0, 179, 136, 0.12);
    color: #00B388;
}

.bo-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    line-height: 1.3;
}

.bo-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.15rem;
    color: var(--bo-text-muted, #6C7D7E);
    cursor: pointer;
    padding: 0.35rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 150ms ease;
}

.bo-modal-close-btn:hover {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
}

.bo-modal-body {
    padding: 1.25rem 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text-primary, #102427);
    line-height: 1.6;
}

.bo-modal-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #465B5D);
    margin-bottom: 1rem;
    line-height: 1.55;
}

.bo-modal-impact-box {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #9A3412;
}

.bo-modal-typed-box {
    margin-bottom: 1rem;
    background: var(--color-bg-subtle, #FAFBFB);
    border: 1px solid var(--color-border, #E2E9E8);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.bo-modal-footer {
    padding: 0.85rem 1.5rem;
    background: var(--color-bg-subtle, #FAFBFB);
    border-top: 1px solid var(--bo-border, #E2E9E8);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ── Unified Enterprise Floating Toast System ────────────────────────────── */
.bo-toast-container {
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    max-width: 400px;
    width: calc(100% - 3rem);
    pointer-events: none;
}

.bo-toast {
    pointer-events: auto;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.12), 0 8px 10px -6px rgba(0, 29, 35, 0.05);
    border: 1px solid rgba(0, 29, 35, 0.08);
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bo-toast.bo-toast-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bo-toast.bo-toast-hiding {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
}

.bo-toast-success {
    border-inline-start: 4px solid #00B388 !important;
}

.bo-toast-error {
    border-inline-start: 4px solid #EF4444 !important;
}

.bo-toast-warning {
    border-inline-start: 4px solid #F59E0B !important;
}

.bo-toast-info {
    border-inline-start: 4px solid #0284C7 !important;
}

.bo-toast-body {
    padding: 0.85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bo-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.bo-toast-content {
    flex-grow: 1;
    min-width: 0;
}

.bo-toast-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brand-950, #001D23);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.bo-toast-message {
    font-size: 0.8125rem;
    color: var(--bo-text-secondary, #465B5D);
    line-height: 1.45;
    word-break: break-word;
}

.bo-toast-close {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    color: var(--bo-text-muted, #6C7D7E);
    cursor: pointer;
    padding: 0.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.bo-toast-close:hover {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
}

.bo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 29, 35, 0.06);
}

.bo-toast-bar {
    height: 100%;
    width: 100%;
}

@media (max-width: 767px) {
    .bo-toast-container {
        bottom: calc(var(--bottom-nav-height, 60px) + 0.75rem) !important;
        inset-inline-start: 0.75rem !important;
        inset-inline-end: 0.75rem !important;
        width: auto !important;
        max-width: 440px !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 480px) {
    .bo-modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    .bo-modal-footer button {
        width: 100% !important;
    }
}

/* ==========================================================================
   Balance One — Setup Control Center & Topbar Modernization
   ========================================================================== */

/* ── Topbar Refinements & Enterprise 3-Zone Architecture ────────────────── */
.bo-app-topbar {
    height: 58px;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bo-border, #E2E9E8);
    box-shadow: 0 1px 2px 0 rgba(0, 29, 35, 0.02);
    padding-inline: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 80;
    transition: all 180ms ease;
}

/* ── Zone A: Context & Navigation ── */
.bo-topbar-start {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 0 1 auto;
}

.bo-topbar-mobile-btn,
.bo-topbar-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--brand-950, #001D23);
    cursor: pointer;
    font-size: 1rem;
    transition: all 150ms ease;
    padding: 0;
    flex-shrink: 0;
}

.bo-topbar-mobile-btn:hover,
.bo-topbar-mobile-toggle:hover {
    background-color: var(--brand-50, #F2F7F6);
    border-color: var(--brand-100, #DFECE9);
}

.bo-topbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.bo-topbar-brand-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.bo-topbar-context-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.bo-topbar-tenant-badge,
.bo-topbar-tenant-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background-color: var(--brand-50, #F2F7F6);
    border: 1px solid var(--brand-100, #DFECE9);
    color: var(--brand-950, #001D23);
    font-size: 0.78125rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.bo-topbar-tenant-badge.is-platform {
    background-color: rgba(0, 29, 35, 0.05);
    border-color: var(--bo-border, #E2E9E8);
}

.bo-tenant-icon,
.bo-topbar-tenant-tag i {
    color: var(--brand-600, #00B388);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.bo-tenant-name,
.bo-topbar-tenant-tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-topbar-isolation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 9999px;
    background-color: rgba(3, 152, 85, 0.08);
    color: #037847;
    border: 1px solid rgba(3, 152, 85, 0.2);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.bo-topbar-isolation-badge.platform-scope {
    background-color: var(--bg-muted, #F6F8F8);
    color: var(--bo-text-secondary, #465B5D);
    border-color: var(--bo-border, #E2E9E8);
}

.bo-topbar-isolation-badge i {
    font-size: 0.72rem;
}

.bo-topbar-branch-dropdown {
    position: relative;
    display: inline-block;
}

.bo-topbar-branch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid var(--bo-border, #E2E9E8);
    background-color: #FFFFFF;
    color: var(--brand-950, #001D23);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    max-width: 220px;
}

.bo-topbar-branch-btn:hover {
    background-color: var(--brand-50, #F2F7F6);
    border-color: var(--brand-300, #57988D);
}

.bo-branch-icon,
.bo-topbar-branch-btn i.fa-location-dot {
    color: var(--brand-600, #00B388);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.bo-chevron-icon,
.bo-topbar-branch-btn .fa-chevron-down {
    font-size: 0.6875rem;
    color: var(--bo-text-muted, #7C9092);
    transition: transform 150ms ease;
    flex-shrink: 0;
}

.bo-dropdown.open .bo-topbar-branch-btn .bo-chevron-icon,
.bo-dropdown.open .bo-topbar-branch-btn .fa-chevron-down {
    transform: rotate(180deg);
}

.bo-branch-name,
.bo-topbar-branch-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-branch-dropdown-menu {
    min-width: 260px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
}

.bo-dropdown-header {
    padding: 0.5rem 0.75rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bo-text-muted, #7C9092);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--bo-border, #E2E9E8);
    margin-bottom: 0.25rem;
}

.bo-count-badge {
    font-size: 0.6875rem;
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-600, #00B388);
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* ── Zone B: Centered Command / Search Bar ── */
.bo-topbar-center {
    flex: 1 1 auto;
    max-width: 520px;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.bo-topbar-search-bar {
    width: 100%;
    max-width: 460px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline: 0.75rem;
    background-color: #F8FAFA;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 8px;
    color: var(--bo-text-muted, #7C9092);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: inherit;
    transition: all 150ms ease;
    text-align: start;
}

.bo-topbar-search-bar:hover {
    background-color: #FFFFFF;
    border-color: var(--brand-300, #57988D);
    box-shadow: 0 1px 4px rgba(0, 29, 35, 0.04);
}

.bo-topbar-search-bar:active {
    transform: scale(0.99);
}

.bo-topbar-search-icon {
    font-size: 0.8125rem;
    color: var(--bo-text-muted, #7C9092);
    flex-shrink: 0;
}

.bo-topbar-search-placeholder {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bo-text-secondary, #465B5D);
    font-weight: 500;
}

.bo-topbar-search-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--bo-text-secondary, #465B5D);
    background-color: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1.2;
    flex-shrink: 0;
    box-shadow: 0 1px 1px rgba(0, 29, 35, 0.03);
}

/* ── Zone C: Utilities & User Profile ── */
.bo-topbar-end {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.bo-topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--bo-text-secondary, #465B5D);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    position: relative;
    padding: 0;
}

.bo-topbar-icon-btn:hover {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
    border-color: var(--brand-100, #DFECE9);
}

.bo-topbar-icon-btn:active,
.bo-dropdown.open .bo-topbar-icon-btn {
    background-color: var(--brand-100, #DFECE9);
    color: var(--brand-950, #001D23);
}

.bo-topbar-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 36px;
    padding-inline: 0.65rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--bo-text-secondary, #465B5D);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.bo-topbar-ghost-btn:hover {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
    border-color: var(--brand-100, #DFECE9);
}

.bo-topbar-ghost-btn:active,
.bo-dropdown.open .bo-topbar-ghost-btn {
    background-color: var(--brand-100, #DFECE9);
    color: var(--brand-950, #001D23);
}

.bo-topbar-divider {
    width: 1px;
    height: 20px;
    background-color: var(--bo-border, #E2E9E8);
    margin-inline: 0.25rem;
    flex-shrink: 0;
}

.bo-topbar-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.55rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--brand-950, #001D23);
    cursor: pointer;
    transition: all 150ms ease;
}

.bo-topbar-user-btn:hover {
    background-color: var(--brand-50, #F2F7F6);
    border-color: var(--brand-100, #DFECE9);
}

.bo-dropdown.open .bo-topbar-user-btn {
    background-color: var(--brand-50, #F2F7F6);
    border-color: var(--brand-200, #C9D5D3);
}

.bo-topbar-avatar,
.bo-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-950, #001D23) 0%, var(--brand-700, #124541) 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bo-topbar-user-name,
.bo-user-name {
    display: inline-block;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-950, #001D23);
}

.bo-topbar-chevron,
.bo-user-chevron {
    font-size: 0.6875rem;
    color: var(--bo-text-muted, #7C9092);
    transition: transform 150ms ease;
}

.bo-dropdown.open .bo-topbar-chevron,
.bo-dropdown.open .bo-user-chevron {
    transform: rotate(180deg);
}

/* ── More Dropdown Menu ── */
.bo-topbar-more-menu,
.bo-more-dropdown-menu {
    min-width: 220px;
    padding: 0.4rem;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.1), 0 8px 10px -6px rgba(0, 29, 35, 0.04);
}

.bo-topbar-more-menu .bo-dropdown-item,
.bo-more-dropdown-menu .bo-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-950, #001D23);
    text-decoration: none;
    transition: all 120ms ease;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    text-align: start;
}

.bo-topbar-more-menu .bo-dropdown-item:hover {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-600, #00B388);
}

.bo-topbar-more-menu .bo-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bo-text-secondary, #465B5D);
    transition: color 120ms ease;
}

.bo-topbar-more-menu .bo-dropdown-item:hover i {
    color: var(--brand-600, #00B388);
}

.bo-topbar-more-menu .bo-dropdown-divider {
    height: 1px;
    background-color: var(--bo-border, #E2E9E8);
    margin: 0.35rem 0.25rem;
}

/* ── Legacy Aliases for Backwards Compatibility ── */
.bo-topbar-tenant-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
    border: 1px solid var(--brand-100, #DFECE9);
    font-size: 0.75rem;
    font-weight: 700;
}
.bo-topbar-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--brand-950, #001D23);
    cursor: pointer;
}
.bo-topbar-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    min-height: 36px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bo-text-secondary, #465B5D);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

/* ── Topbar Multi-Device Responsive Breakpoints ── */
@media (max-width: 1199px) {
    .bo-topbar-center {
        max-width: 360px;
    }
    .bo-topbar-tenant-tag {
        max-width: 140px;
    }
    .bo-topbar-user-name {
        max-width: 80px;
    }
}

@media (max-width: 991px) {
    .bo-app-topbar {
        padding-inline: 1rem;
        gap: 0.5rem;
    }
    .bo-topbar-mobile-btn {
        display: inline-flex;
    }
    .bo-topbar-center {
        max-width: 240px;
    }
    .bo-topbar-search-kbd {
        display: none !important;
    }
    .bo-topbar-tenant-tag {
        display: none !important;
    }
    .bo-topbar-user-name {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .bo-app-topbar {
        height: 54px;
        padding-inline: 0.75rem;
        gap: 0.35rem;
    }
    .bo-topbar-center {
        display: none !important;
    }
    .bo-topbar-branch-btn {
        max-width: 130px;
        padding: 0.25rem 0.45rem;
        font-size: 0.75rem;
    }
    .bo-topbar-branch-text {
        max-width: 80px;
    }
    .bo-topbar-divider {
        margin-inline: 0.1rem;
    }
    .bo-topbar-user-btn {
        padding: 0;
    }
    .bo-topbar-chevron {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .bo-topbar-branch-btn {
        max-width: 110px;
    }
}

/* ── Setup Hub Page Base ────────────────────────────────────────────────── */
.bo-setup-hub-page {
    width: 100%;
    min-height: 100%;
    background: radial-gradient(circle at 95% 0%, rgba(0, 179, 136, 0.04) 0%, transparent 45%),
                radial-gradient(circle at 5% 40%, rgba(0, 29, 35, 0.02) 0%, transparent 40%),
                #FAFBFB;
    border-radius: 12px;
    padding: 1.5rem 1.75rem 2.5rem;
}

/* ── Setup Hub Header & Toolbar ─────────────────────────────────────────── */
.bo-setup-hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.bo-setup-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.bo-setup-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-50, #F2F7F6);
    color: var(--brand-600, #00B388);
    border: 1px solid var(--brand-200, #C9D5D3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.04);
}

.bo-setup-title-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-950, #001D23);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.bo-setup-subtitle-text {
    font-size: 0.85rem;
    color: var(--bo-text-secondary, #465B5D);
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

.bo-setup-nav-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bo-setup-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    min-height: 38px;
    border-radius: 9px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    border: 1px solid transparent;
}

.bo-setup-nav-btn:hover {
    transform: translateY(-1px);
}

.bo-setup-nav-btn-excel {
    background-color: #037847;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(3, 120, 71, 0.2);
}

.bo-setup-nav-btn-excel:hover {
    background-color: #026138;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(3, 120, 71, 0.28);
}

.bo-setup-nav-btn-wizard {
    background-color: #FFFFFF;
    color: var(--brand-950, #001D23);
    border-color: var(--bo-border, #E2E9E8);
    box-shadow: 0 1px 2px rgba(0, 29, 35, 0.03);
}

.bo-setup-nav-btn-wizard:hover {
    background-color: var(--brand-50, #F2F7F6);
    border-color: var(--brand-300, #57988D);
    color: var(--brand-950, #001D23);
}

.bo-setup-nav-btn-health {
    background-color: #FFFFFF;
    color: #B42318;
    border-color: #FECDCA;
    box-shadow: 0 1px 2px rgba(180, 35, 24, 0.03);
}

.bo-setup-nav-btn-health:hover {
    background-color: #FEF3F2;
    border-color: #F04438;
    color: #912018;
}

.bo-setup-nav-btn-checklist {
    background-color: var(--brand-950, #001D23);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 29, 35, 0.2);
}

.bo-setup-nav-btn-checklist:hover {
    background-color: var(--brand-800, #0B3436);
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 29, 35, 0.28);
}

.bo-setup-nav-btn-deps {
    background-color: #FFFFFF;
    color: var(--bo-text-secondary, #465B5D);
    border-color: var(--bo-border, #E2E9E8);
    box-shadow: 0 1px 2px rgba(0, 29, 35, 0.03);
}

.bo-setup-nav-btn-deps:hover {
    background-color: var(--bg-muted, #F6F8F8);
    border-color: var(--bo-border-strong, #C9D5D3);
    color: var(--brand-950, #001D23);
}

/* ── Hero Master Setup Banner ───────────────────────────────────────────── */
.bo-setup-hero-card {
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.85) 0%, rgba(247, 254, 251, 0.95) 50%, #FFFFFF 100%);
    border: 1px solid rgba(0, 179, 136, 0.25);
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px rgba(0, 179, 136, 0.08), 0 2px 6px -1px rgba(0, 29, 35, 0.03);
    margin-bottom: 1.75rem;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 1.75rem;
}

.bo-setup-hero-card::before {
    content: "";
    position: absolute;
    inset-inline-end: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 179, 136, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.bo-setup-hero-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #DCFCE7 0%, #D1FAE5 100%);
    color: #047857;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 1px solid #86EFAC;
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.12);
}

.bo-setup-hero-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #064E3B;
    margin: 0;
    line-height: 1.3;
}

.bo-setup-hero-badge {
    background: linear-gradient(135deg, #00B388 0%, #009670 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0, 179, 136, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-setup-hero-desc {
    color: #334155;
    font-size: 0.9rem;
    max-width: 820px;
    line-height: 1.6;
    margin: 0.35rem 0 0;
}

.bo-setup-hero-btn-primary {
    background: linear-gradient(135deg, #00B388 0%, #009670 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 0.6rem 1.35rem;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 179, 136, 0.28);
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.bo-setup-hero-btn-primary:hover {
    background: linear-gradient(135deg, #009670 0%, #007A5B 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 179, 136, 0.36);
}

.bo-setup-hero-btn-secondary {
    background-color: #FFFFFF;
    color: #008764;
    border: 1.5px solid #00B388;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 0.6rem 1.2rem;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.bo-setup-hero-btn-secondary:hover {
    background-color: rgba(0, 179, 136, 0.08);
    color: #006D50;
    border-color: #009670;
    transform: translateY(-1px);
}

/* ── KPI Summary Cards ──────────────────────────────────────────────────── */
.bo-setup-kpi-card {
    background-color: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 3px 0 rgba(0, 29, 35, 0.03);
    transition: all 180ms ease;
    height: 100%;
}

.bo-setup-kpi-card:hover {
    border-color: var(--brand-200, #C9D5D3);
    box-shadow: 0 4px 14px 0 rgba(0, 29, 35, 0.05);
    transform: translateY(-2px);
}

.bo-setup-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.bo-setup-kpi-icon.primary {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-700, #124541);
    border: 1px solid var(--brand-200, #C9D5D3);
}

.bo-setup-kpi-icon.success {
    background-color: #ECFDF5;
    color: #039855;
    border: 1px solid #A6F4C5;
}

.bo-setup-kpi-icon.warning {
    background-color: #FFFAEB;
    color: #DC6803;
    border: 1px solid #FEDF89;
}

.bo-setup-kpi-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bo-text-muted, #6C7D7E);
    margin-bottom: 0.15rem;
}

.bo-setup-kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* ── Filter & Search Bar ────────────────────────────────────────────────── */
.bo-setup-filter-bar {
    background-color: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 14px;
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 29, 35, 0.03);
}

.bo-setup-filter-bar .form-control,
.bo-setup-filter-bar .form-select,
.bo-setup-filter-bar .input-group-text {
    height: 40px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.bo-setup-filter-bar .form-control:focus,
.bo-setup-filter-bar .form-select:focus {
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.15);
}

.bo-setup-filter-btn {
    height: 40px;
    padding: 0 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    background-color: var(--brand-950, #001D23);
    color: #FFFFFF;
    border: none;
    transition: all 180ms ease;
    white-space: nowrap;
}

.bo-setup-filter-btn:hover {
    background-color: var(--brand-800, #0B3436);
    color: #FFFFFF;
}

.bo-setup-reset-btn {
    height: 40px;
    padding: 0 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bo-text-secondary, #465B5D);
    border: 1px solid var(--bo-border, #E2E9E8);
    background-color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 180ms ease;
    white-space: nowrap;
}

.bo-setup-reset-btn:hover {
    background-color: var(--bg-muted, #F6F8F8);
    color: var(--brand-950, #001D23);
}

/* ── 13 Domain Cards Grid ───────────────────────────────────────────────── */
.bo-setup-domain-card {
    background-color: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px 0 rgba(0, 29, 35, 0.03);
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bo-setup-domain-card:hover {
    border-color: var(--brand-300, #57988D);
    box-shadow: 0 8px 24px -4px rgba(0, 29, 35, 0.08);
    transform: translateY(-2px);
}

.bo-setup-card-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-700, #124541);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    border: 1px solid var(--brand-100, #DFECE9);
}

.bo-setup-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    margin: 0;
    line-height: 1.3;
}

.bo-setup-card-cat {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    background-color: var(--bg-muted, #F6F8F8);
    color: var(--bo-text-muted, #6C7D7E);
    font-family: monospace;
    display: inline-block;
    margin-top: 0.15rem;
}

.bo-setup-card-desc {
    font-size: 0.825rem;
    color: var(--bo-text-secondary, #465B5D);
    line-height: 1.55;
    margin: 0.75rem 0 1rem;
    flex-grow: 1;
}

.bo-setup-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bo-border-subtle, #EDF1F0);
    margin-top: auto;
}

.bo-setup-scope-tag {
    font-size: 0.72rem;
    color: var(--bo-text-muted, #6C7D7E);
    font-family: monospace;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-setup-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    min-height: 32px;
    border-radius: 7px;
    font-size: 0.785rem;
    font-weight: 600;
    color: var(--brand-700, #124541);
    background-color: var(--brand-50, #F2F7F6);
    border: 1px solid var(--brand-200, #C9D5D3);
    text-decoration: none;
    transition: all 160ms ease;
}

.bo-setup-card-btn:hover {
    background-color: var(--brand-950, #001D23);
    color: #FFFFFF;
    border-color: var(--brand-950, #001D23);
}

/* ── Status Badges ──────────────────────────────────────────────────────── */
.bo-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bo-status-pill.configured {
    background-color: #ECFDF5;
    color: #039855;
    border: 1px solid #A6F4C5;
}

.bo-status-pill.needs-attention {
    background-color: #FFFAEB;
    color: #B54708;
    border: 1px solid #FEDF89;
}

.bo-status-pill.error {
    background-color: #FEF3F2;
    color: #D92D20;
    border: 1px solid #FECDCA;
}

/* ── Responsive Refinements ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .bo-setup-hub-page {
        padding: 1rem 1rem 2rem;
    }
    .bo-setup-hub-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .bo-setup-nav-group {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .bo-setup-hero-card {
        padding: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .bo-setup-hero-actions {
        width: 100%;
        flex-direction: column;
    }
    .bo-setup-hero-btn-primary,
    .bo-setup-hero-btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   Enterprise Master Excel Import System (/setup/enterprise-import)
   ========================================================================== */

.bo-import-page {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding-bottom: 3.5rem;
}

/* ── Breadcrumb Navigation ────────────────────────────────────────────────── */
.bo-import-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.bo-import-breadcrumb-link {
    color: var(--bo-text-muted, #6C7D7E);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-import-breadcrumb-link:hover {
    color: var(--brand-600, #00B388);
    text-decoration: none;
}

.bo-import-breadcrumb-sep {
    font-size: 0.7rem;
    color: var(--bo-text-disabled, #9CA9AA);
}

.bo-import-breadcrumb-current {
    color: var(--brand-950, #001D23);
    font-weight: 700;
}

/* ── Page Header / Hero ──────────────────────────────────────────────────── */
.bo-import-hero {
    margin-bottom: 1.75rem;
}

.bo-import-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.bo-import-title {
    font-size: clamp(1.15rem, 3.5vw, 1.55rem);
    font-weight: 800;
    color: var(--brand-950, #001D23);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    letter-spacing: -0.02em;
    line-height: 1.35;
    flex-wrap: wrap;
}

.bo-import-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 124, 65, 0.1);
    color: #107c41;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bo-import-badge-rec {
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    font-size: clamp(0.72rem, 2.2vw, 0.8125rem);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(0, 179, 136, 0.35);
}

.bo-import-badge-rec i {
    color: var(--brand-600, #00B388);
}

.bo-import-subtitle {
    color: var(--bo-text-secondary, #465B5D);
    margin: 0;
    font-size: clamp(0.8125rem, 2.2vw, 0.9rem);
    max-width: 1000px;
    line-height: 1.65;
}

/* ── Feature Highlight Cards (Smart Capabilities) ────────────────────────── */
.bo-import-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
    margin-bottom: 1.75rem;
}

.bo-import-feature-card {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 14px;
    padding: clamp(0.875rem, 2.2vw, 1.15rem);
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.02);
    min-width: 0;
}

.bo-import-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 29, 35, 0.05);
    border-color: var(--brand-300, #57988D);
}

.bo-import-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bo-import-feature-icon.is-green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.bo-import-feature-icon.is-purple {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.bo-import-feature-icon.is-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.bo-import-feature-title {
    font-size: clamp(0.85rem, 2.2vw, 0.9375rem);
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--brand-950, #001D23);
    line-height: 1.35;
}

.bo-import-feature-desc {
    font-size: clamp(0.75rem, 2vw, 0.8125rem);
    color: var(--bo-text-muted, #6C7D7E);
    margin: 0;
    line-height: 1.5;
}

/* ── 4-Step Process Stepper ──────────────────────────────────────────────── */
.bo-import-stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.bo-import-step-card {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 12px;
    padding: clamp(0.85rem, 2vw, 1.1rem);
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.02);
    min-width: 0;
}

.bo-import-step-card:hover {
    border-color: var(--brand-300, #57988D);
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.04);
}

.bo-import-step-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.bo-import-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    border: 1.5px solid var(--brand-600, #00B388);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.bo-import-step-title {
    font-size: clamp(0.85rem, 2.2vw, 0.9375rem);
    font-weight: 700;
    margin: 0;
    color: var(--brand-950, #001D23);
    line-height: 1.35;
}

.bo-import-step-desc {
    font-size: clamp(0.75rem, 2vw, 0.8125rem);
    color: var(--bo-text-muted, #6C7D7E);
    margin: 0;
    line-height: 1.5;
}

/* ── Main Action Workspace (2 Columns) ───────────────────────────────────── */
.bo-import-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

.bo-import-action-card {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 16px;
    padding: clamp(1.15rem, 2.5vw, 1.75rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 29, 35, 0.03);
    position: relative;
    min-width: 0;
}

.bo-import-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.bo-import-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.bo-import-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bo-import-card-icon.is-download {
    background: rgba(16, 124, 65, 0.1);
    color: #107c41;
}

.bo-import-card-icon.is-upload {
    background: rgba(0, 179, 136, 0.1);
    color: var(--brand-600, #00B388);
}

.bo-import-card-title {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    font-weight: 800;
    margin: 0;
    color: var(--brand-950, #001D23);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.35;
}

.bo-import-card-badge {
    background: rgba(0, 179, 136, 0.08);
    color: #065F46;
    border: 1px solid rgba(0, 179, 136, 0.25);
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.bo-import-card-subtitle {
    font-size: clamp(0.75rem, 2vw, 0.8125rem);
    color: var(--bo-text-muted, #6C7D7E);
    display: block;
    margin-top: 0.2rem;
    line-height: 1.45;
}

/* ── Country Selector ────────────────────────────────────────────────────── */
.bo-country-selector-wrap {
    margin-bottom: 1.25rem;
}

.bo-country-selector-label {
    display: block;
    font-weight: 700;
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    color: var(--brand-950, #001D23);
    margin-bottom: 0.55rem;
}

.bo-country-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.bo-country-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(0.7rem, 2vw, 0.875rem);
    border-radius: 12px;
    border: 1.5px solid var(--bo-border, #E2E8F0);
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    min-width: 0;
}

.bo-country-card:hover {
    border-color: var(--brand-300, #57988D);
    background: var(--bg-subtle, #FAFBFB);
    transform: translateY(-1px);
}

.bo-country-card.is-selected {
    border-color: var(--brand-600, #00B388);
    background: rgba(0, 179, 136, 0.03);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.1);
}

.bo-country-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.25);
}

.bo-country-radio {
    accent-color: var(--brand-600, #00B388);
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.bo-country-info {
    flex: 1;
    min-width: 0;
}

.bo-country-name {
    font-weight: 700;
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    color: var(--brand-950, #001D23);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.bo-country-rules {
    font-size: clamp(0.6875rem, 1.8vw, 0.75rem);
    color: var(--bo-text-muted, #6C7D7E);
    line-height: 1.35;
    word-break: break-word;
}

/* ── 12 Master Sheets Matrix ─────────────────────────────────────────────── */
.bo-sheet-overview-box {
    background: var(--bg-subtle, #FAFBFB);
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 12px;
    padding: clamp(0.85rem, 2vw, 1.15rem);
    margin-bottom: 1.25rem;
}

.bo-sheet-overview-header {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bo-sheet-overview-title {
    font-weight: 700;
    font-size: clamp(0.75rem, 2vw, 0.8125rem);
    color: var(--brand-950, #001D23);
}

.bo-sheet-count-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    color: var(--bo-text-secondary, #465B5D);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

.bo-sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.bo-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    line-height: 1.35;
    min-width: 0;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 29, 35, 0.02);
}

.bo-sheet-item:hover {
    border-color: var(--brand-300, #57988D);
    background: #FAFBFB;
    transform: translateY(-1px);
}

.bo-sheet-item-indicator {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.bo-sheet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-600, #00B388);
    flex-shrink: 0;
}

.bo-sheet-index {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bo-text-muted, #6C7D7E);
    font-family: inherit;
}

.bo-sheet-item-body {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    text-align: start;
}

.bo-sheet-code {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-950, #001D23);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    unicode-bidi: embed;
}

.bo-sheet-desc {
    font-size: 0.6875rem;
    color: var(--bo-text-secondary, #465B5D);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Download Actions Group ──────────────────────────────────────────────── */
.bo-download-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: auto;
}

.bo-btn-download-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--brand-950, #001D23);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 29, 35, 0.12);
    cursor: pointer;
}

.bo-btn-download-primary:hover {
    background: var(--brand-900, #06272B);
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 29, 35, 0.2);
}

.bo-btn-download-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.35);
}

.bo-btn-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 179, 136, 0.15);
    color: var(--brand-600, #00B388);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bo-btn-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    text-align: start;
    min-width: 0;
}

.bo-btn-main-title {
    font-size: clamp(0.85rem, 2.2vw, 0.9375rem);
    font-weight: 700;
    line-height: 1.3;
}

.bo-btn-sub-title {
    font-size: 0.71875rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
}

.bo-btn-tag {
    font-size: 0.6875rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.bo-btn-download-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: #FFFFFF;
    border: 1.5px solid var(--bo-border, #E2E8F0);
    color: var(--brand-950, #001D23);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.bo-btn-download-secondary:hover {
    border-color: var(--brand-300, #57988D);
    background: #FAFBFB;
    color: var(--brand-950, #001D23);
    text-decoration: none;
}

.bo-btn-download-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.25);
}

.bo-btn-secondary-subtext {
    font-size: 0.78125rem;
    color: var(--bo-text-muted, #6C7D7E);
    font-weight: 500;
}

/* ── Interactive Dropzone ────────────────────────────────────────────────── */
.bo-dropzone {
    border: 1.5px dashed var(--bo-border-strong, #CBD5E1);
    background: #FAFBFB;
    border-radius: 14px;
    padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(0.85rem, 2.5vw, 1.5rem);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 1.25rem;
    position: relative;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    min-height: 180px;
}

.bo-dropzone:hover {
    border-color: var(--brand-600, #00B388);
    background: rgba(0, 179, 136, 0.02);
}

.bo-dropzone.is-dragover {
    border-color: var(--brand-600, #00B388);
    background: rgba(0, 179, 136, 0.08);
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(0, 179, 136, 0.12);
    transform: scale(1.005);
}

.bo-dropzone:focus-visible {
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.35);
}

.bo-dropzone-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(16, 124, 65, 0.08);
    color: #107c41;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.65rem;
    transition: transform 0.2s ease;
}

.bo-dropzone:hover .bo-dropzone-icon-circle {
    transform: translateY(-2px);
    background: rgba(16, 124, 65, 0.12);
}

.bo-dropzone-prompt {
    font-weight: 700;
    font-size: clamp(0.85rem, 2.2vw, 0.9375rem);
    color: var(--brand-950, #001D23);
    margin-bottom: 0.3rem;
    line-height: 1.45;
}

.bo-dropzone-subtext {
    font-size: clamp(0.72rem, 1.8vw, 0.78125rem);
    color: var(--bo-text-muted, #6C7D7E);
    line-height: 1.4;
}

/* File Selected Preview Inside Dropzone */
.bo-file-selected-box {
    background: #FFFFFF;
    border: 1.5px solid var(--brand-600, #00B388);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 179, 136, 0.1);
    overflow: hidden;
}

.bo-file-selected-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.bo-file-selected-icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(16, 124, 65, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bo-file-excel-icon {
    font-size: 1.15rem;
    color: #107c41;
}

.bo-file-selected-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: start;
}

.bo-file-selected-name {
    font-weight: 700;
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    color: var(--brand-950, #001D23);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    unicode-bidi: plaintext;
    line-height: 1.35;
}

.bo-file-selected-size {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bo-text-muted, #6C7D7E);
    line-height: 1.2;
    display: inline-block;
}

.bo-file-selected-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bo-file-selected-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-radius: 20px;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.bo-file-change-btn {
    background: rgba(0, 29, 35, 0.05);
    border: 1px solid var(--bo-border, #E2E8F0);
    color: var(--brand-950, #001D23);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.bo-file-change-btn:hover {
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    border-color: var(--brand-950, #001D23);
}

/* ── Upload Card Bottom Row ──────────────────────────────────────────────── */
.bo-import-upload-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.bo-import-security-note {
    font-size: clamp(0.72rem, 1.8vw, 0.78125rem);
    color: #065F46;
    background: rgba(0, 179, 136, 0.06);
    border: 1px solid rgba(0, 179, 136, 0.18);
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.35;
    font-weight: 500;
}

.bo-import-security-note i {
    color: var(--brand-600, #00B388);
    font-size: 0.875rem;
}

.bo-btn-upload-submit {
    padding: 0.75rem 1.65rem;
    font-weight: 700;
    font-size: clamp(0.85rem, 2.2vw, 0.9375rem);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    border: 1px solid var(--brand-950, #001D23);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 29, 35, 0.12);
}

.bo-btn-upload-submit:hover:not(:disabled) {
    background: var(--brand-800, #0B3436);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.2);
}

.bo-btn-upload-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.35);
}

.bo-btn-upload-submit:disabled {
    background: #F1F5F9;
    color: #94A3B8;
    border-color: #E2E8F0;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ── Footer Navigation ───────────────────────────────────────────────────── */
.bo-import-footer-nav {
    text-align: center;
    margin-top: 1.5rem;
}

.bo-import-footer-link {
    color: var(--bo-text-muted, #6C7D7E);
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    text-align: center;
    line-height: 1.4;
}

.bo-import-footer-link:hover {
    color: var(--brand-950, #001D23);
    background: rgba(0, 29, 35, 0.04);
    text-decoration: none;
}

/* ── Responsive Queries for Import ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .bo-import-features-grid {
        grid-template-columns: 1fr;
    }
    .bo-import-stepper {
        grid-template-columns: repeat(2, 1fr);
    }
    .bo-import-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bo-import-page {
        padding-bottom: calc(var(--bottom-nav-height, 64px) + 2.5rem) !important;
    }
    .bo-import-stepper {
        grid-template-columns: 1fr;
    }
    .bo-country-grid {
        grid-template-columns: 1fr;
    }
    .bo-sheet-grid {
        grid-template-columns: 1fr;
    }
    .bo-import-upload-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .bo-btn-upload-submit {
        width: 100%;
        justify-content: center;
    }
    .bo-btn-download-primary {
        width: 100%;
    }
    .bo-btn-download-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bo-import-title-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .bo-import-title {
        gap: 0.5rem;
    }
    .bo-import-title-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .bo-import-feature-card {
        padding: 0.85rem;
    }
    .bo-import-action-card {
        padding: 0.85rem;
    }
    .bo-dropzone {
        padding: 1.25rem 0.75rem;
        min-height: 150px;
    }
    .bo-file-selected-box {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }
    .bo-file-selected-actions {
        justify-content: space-between;
        width: 100%;
        padding-top: 0.4rem;
        border-top: 1px dashed rgba(0, 0, 0, 0.08);
    }
}

/* ==========================================================================
   Balance One — Enterprise Universal Smart Search & Command Palette System
   ========================================================================== */

/* ── Topbar Search Trigger Pill ─────────────────────────────────────────── */
.bo-topbar-search-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    background: var(--color-bg-subtle, #FAFBFB);
    border: 1px solid var(--color-border, #E2E9E8);
    border-radius: var(--radius-full, 9999px);
    padding: 0.35rem 0.75rem;
    color: var(--color-text-secondary, #465B5D);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ease-standard, 0.2s ease-in-out);
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 260px;
    height: 38px;
    text-align: start;
    user-select: none;
}

.bo-topbar-search-pill:hover {
    background: var(--color-surface, #FFFFFF);
    border-color: var(--brand-300, #57988D);
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(0, 29, 35, 0.04));
    color: var(--brand-950, #001D23);
}

.bo-topbar-search-leading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bo-topbar-search-leading i {
    color: var(--brand-600, #00B388);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.bo-topbar-search-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted, #6C7D7E);
    background: var(--color-bg-muted, #F6F8F8);
    border: 1px solid var(--color-border-strong, #C9D5D3);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

/* ── Smart Search Command Palette Modal ─────────────────────────────────── */
.bo-smart-search-modal {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(0, 29, 35, 0.65);
    z-index: 1055;
}

.bo-search-dialog {
    max-width: 720px;
    width: 95vw;
    margin: 1.75rem auto;
}

.bo-search-modal-content {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E9E8);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-modal, 0 20px 25px -5px rgba(0, 29, 35, 0.1), 0 8px 10px -6px rgba(0, 29, 35, 0.05));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bo-search-modal-header {
    background: var(--color-surface, #FFFFFF);
    border-bottom: 1px solid var(--color-border-subtle, #EDF1F0);
    padding: 0;
}

.bo-search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    gap: var(--space-3, 12px);
    position: relative;
}

.bo-search-leading-icon {
    font-size: 1.15rem;
    color: var(--brand-600, #00B388);
    flex-shrink: 0;
}

.bo-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text-primary, #102427);
    background: transparent;
    padding: 0;
    width: 100%;
}

.bo-search-input::placeholder {
    color: var(--color-text-muted, #6C7D7E);
    font-size: 0.9375rem;
}

.bo-search-trailing-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.bo-search-spinner {
    font-size: 0.95rem;
    color: var(--brand-600, #00B388);
}

.bo-search-clear-btn {
    background: none;
    border: none;
    color: var(--color-text-muted, #6C7D7E);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.bo-search-clear-btn:hover {
    color: var(--bo-danger, #D92D20);
}

.bo-search-kbd-badge {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted, #6C7D7E);
    background: var(--color-bg-muted, #F6F8F8);
    border: 1px solid var(--color-border, #E2E9E8);
    border-radius: 4px;
}

/* Category Filter Tabs inside Modal */
.bo-search-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem 0.65rem;
    border-top: 1px solid var(--color-border-subtle, #EDF1F0);
    overflow-x: auto;
    background: var(--color-bg-subtle, #FAFBFB);
    scrollbar-width: none;
}

.bo-search-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.bo-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary, #465B5D);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E9E8);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.bo-search-tab:hover {
    background: var(--brand-50, #F2F7F6);
    border-color: var(--brand-200, #C9D5D3);
    color: var(--brand-950, #001D23);
}

.bo-search-tab.active {
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    border-color: var(--brand-950, #001D23);
}

.bo-search-tab.active i {
    color: var(--brand-600, #00B388);
}

.bo-tab-count {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
    background: rgba(0, 179, 136, 0.18);
    color: var(--brand-700, #124541);
}

.bo-search-tab.active .bo-tab-count {
    background: var(--brand-600, #00B388);
    color: var(--brand-950, #001D23);
}

/* Modal Body Canvas */
.bo-search-modal-body {
    max-height: 480px;
    min-height: 240px;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--color-surface, #FFFFFF);
}

.bo-search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted, #6C7D7E);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.65rem;
}

.bo-clear-all-link {
    background: none;
    border: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand-600, #00B388);
    cursor: pointer;
    padding: 0;
}

.bo-clear-all-link:hover {
    text-decoration: underline;
}

/* Recent Searches Chips */
.bo-recent-searches-wrap {
    margin-bottom: 1.25rem;
}

.bo-recent-searches-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bo-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    background: var(--color-bg-muted, #F6F8F8);
    border: 1px solid var(--color-border, #E2E9E8);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.78rem;
    color: var(--color-text-primary, #102427);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-recent-chip:hover {
    background: var(--brand-50, #F2F7F6);
    border-color: var(--brand-300, #57988D);
}

.bo-recent-icon {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6C7D7E);
}

.bo-recent-remove {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: var(--color-text-muted, #6C7D7E);
    cursor: pointer;
    padding: 0 0.15rem;
    display: inline-flex;
    align-items: center;
}

.bo-recent-remove:hover {
    color: var(--bo-danger, #D92D20);
}

/* Quick Action Cards Grid */
.bo-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

.bo-quick-action-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: var(--color-bg-subtle, #FAFBFB);
    border: 1px solid var(--color-border-subtle, #EDF1F0);
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    color: var(--color-text-primary, #102427);
    transition: all var(--ease-standard, 0.2s ease-in-out);
}

.bo-quick-action-card:hover {
    background: var(--brand-50, #F2F7F6);
    border-color: var(--brand-200, #C9D5D3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(0, 29, 35, 0.04));
}

.bo-quick-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.bo-quick-action-title {
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.bo-quick-action-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted, #6C7D7E);
    margin-top: 0.15rem;
}

/* Dynamic Live Results List */
.bo-search-group-header {
    padding: 0.65rem 0.5rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted, #6C7D7E);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bo-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bo-search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface, #FFFFFF);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    color: var(--color-text-primary, #102427);
    transition: all 0.15s ease;
    cursor: pointer;
}

.bo-search-result-item:hover,
.bo-search-result-item.active {
    background: var(--brand-50, #F2F7F6);
    border-color: var(--brand-200, #C9D5D3);
    border-inline-start: 3px solid var(--brand-600, #00B388);
}

.bo-result-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.bo-result-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--color-bg-muted, #F6F8F8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.bo-result-text-meta {
    min-width: 0;
    flex: 1;
}

.bo-result-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.bo-result-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary, #102427);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-item-badge {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
}

.bo-result-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #465B5D);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}

.bo-result-end {
    display: flex;
    align-items: center;
    padding-inline-start: 0.5rem;
}

.bo-chevron-icon {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6C7D7E);
    transition: transform 0.15s ease;
}

.bo-search-result-item:hover .bo-chevron-icon {
    transform: translateX(-3px);
    color: var(--brand-600, #00B388);
}

[dir="ltr"] .bo-search-result-item:hover .bo-chevron-icon {
    transform: translateX(3px);
}

/* Match Highlight */
.bo-search-highlight {
    background: rgba(0, 179, 136, 0.2);
    color: var(--brand-950, #001D23);
    font-weight: 700;
    padding: 0 0.15rem;
    border-radius: 2px;
}

/* Zero Results State */
.bo-search-zero-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted, #6C7D7E);
}

.bo-zero-icon {
    font-size: 2.5rem;
    opacity: 0.35;
    margin-bottom: 0.75rem;
    color: var(--brand-600, #00B388);
}

.bo-zero-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-primary, #102427);
    margin-bottom: 0.35rem;
}

.bo-zero-sub {
    font-size: 0.8125rem;
    max-width: 380px;
    margin: 0 auto;
}

/* Modal Footer */
.bo-search-modal-footer {
    padding: 0.65rem 1.25rem;
    background: var(--color-bg-subtle, #FAFBFB);
    border-top: 1px solid var(--color-border-subtle, #EDF1F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.bo-search-shortcuts-hints {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-text-muted, #6C7D7E);
}

.bo-hint-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.bo-hint-item kbd {
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border-strong, #C9D5D3);
    border-radius: 3px;
    color: var(--color-text-secondary, #465B5D);
}

.bo-view-all-results-link {
    color: var(--brand-600, #00B388);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.bo-view-all-results-link:hover {
    text-decoration: underline;
}

/* Responsive Overrides for Search (320px - 768px) */
@media (max-width: 768px) {
    .bo-search-dialog {
        margin: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
    }
    .bo-search-modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    .bo-search-modal-body {
        max-height: none;
        flex: 1;
    }
    .bo-quick-actions-grid {
        grid-template-columns: 1fr;
    }
    .bo-search-shortcuts-hints {
        display: none;
    }
    .bo-topbar-search-pill {
        min-width: auto;
        padding: 0.35rem 0.5rem;
    }
    .bo-topbar-search-kbd {
        display: none;
    }
}

/* ==========================================================================
   Balance One — Standard Enterprise KPI Cards Grid & Metrics Bar
   ========================================================================== */
.bo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.bo-kpi-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bo-kpi-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
    .bo-kpi-grid.cols-3,
    .bo-kpi-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .bo-kpi-grid,
    .bo-kpi-grid.cols-3,
    .bo-kpi-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.bo-kpi-card {
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(0, 29, 35, 0.04));
    transition: all var(--ease-standard, 0.2s ease-in-out);
}

.bo-kpi-card:hover {
    box-shadow: var(--shadow-card-hover, 0 4px 16px -2px rgba(0, 29, 35, 0.06));
    border-color: var(--brand-200, #C9D5D3);
    transform: translateY(-1px);
}

.bo-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bo-kpi-icon.brand {
    background: rgba(0, 29, 35, 0.06);
    color: var(--brand-950, #001D23);
}

.bo-kpi-icon.accent {
    background: rgba(0, 179, 136, 0.12);
    color: var(--brand-600, #00B388);
}

.bo-kpi-icon.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.bo-kpi-icon.info {
    background: rgba(21, 112, 239, 0.12);
    color: #1570ef;
}

.bo-kpi-content {
    min-width: 0;
    flex: 1;
}

.bo-kpi-value {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--brand-950, #001D23);
    letter-spacing: -0.02em;
}

.bo-kpi-value.accent {
    color: var(--brand-600, #00B388);
}

.bo-kpi-value.warning {
    color: #d97706;
}

.bo-kpi-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bo-text-secondary, #465B5D);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Balance One — Universal Pagination Normalization (Zero Bullets)
   ========================================================================== */
.pagination,
.bo-pagination-container ul,
.bo-pagination-container .pagination {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.pagination li,
.pagination .page-item {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 0.5rem !important;
    border-radius: var(--radius-sm, 6px) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--bo-text-primary, #102427) !important;
    border: 1px solid var(--bo-border, #E2E9E8) !important;
    background: var(--bg-surface, #FFFFFF) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.pagination .page-link:hover {
    background-color: var(--brand-50, #F2F7F6) !important;
    border-color: var(--brand-300, #57988D) !important;
    color: var(--brand-950, #001D23) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-950, #001D23) !important;
    border-color: var(--brand-950, #001D23) !important;
    color: #FFFFFF !important;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-muted, #F6F8F8) !important;
    border-color: var(--bo-border-subtle, #EDF1F0) !important;
    color: var(--bo-text-disabled, #9CA9AA) !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

/* ==========================================================================
   Balance One — Search Page Architecture
   ========================================================================== */
.bo-search-hero-box {
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-lg, 14px);
    padding: 1.25rem;
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(0, 29, 35, 0.04));
    margin-bottom: 1.5rem;
}

.bo-search-control-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.bo-search-input-field {
    flex: 1 1 320px;
    position: relative;
}

.bo-search-input-field i {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-600, #00B388);
    font-size: 1rem;
    pointer-events: none;
}

.bo-search-input-field input {
    width: 100%;
    height: 46px;
    padding-inline-start: 2.75rem;
    padding-inline-end: 1rem;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    font-size: 0.9375rem;
    color: var(--bo-text-primary, #102427);
    background: var(--color-bg-subtle, #FAFBFB);
    transition: all 0.2s ease;
}

.bo-search-input-field input:focus {
    background: #FFFFFF;
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.12);
    outline: none;
}

.bo-search-select-field {
    width: 200px;
    height: 46px;
}

.bo-search-select-field select {
    width: 100%;
    height: 100%;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bo-text-primary, #102427);
    background: var(--color-bg-subtle, #FAFBFB);
    padding-inline: 0.75rem;
    transition: all 0.2s ease;
}

.bo-search-select-field select:focus {
    background: #FFFFFF;
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.12);
    outline: none;
}

.bo-search-submit-btn {
    height: 46px;
    padding-inline: 1.5rem;
    background: var(--brand-950, #001D23);
    border: 1px solid var(--brand-950, #001D23);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: var(--radius-md, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bo-search-submit-btn:hover {
    background: var(--brand-800, #0B3436);
    border-color: var(--brand-800, #0B3436);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.15);
}

.bo-result-card {
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(0, 29, 35, 0.04));
    transition: all var(--ease-standard, 0.2s ease-in-out);
}

.bo-result-card:hover {
    border-color: var(--brand-300, #57988D);
    box-shadow: var(--shadow-card-hover, 0 4px 16px -2px rgba(0, 29, 35, 0.06));
    transform: translateY(-1px);
}

/* ==========================================================================
   ── Enterprise Reporting & Analytics Workspace Component System ──────────
   ========================================================================== */

/* ── 01. Enterprise Data Grid Container & Header ─────────────────────────── */
.bo-grid-wrapper {
    position: relative;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    transition: all 0.2s ease;
}

.bo-grid-wrapper:fullscreen {
    padding: 1.5rem;
    overflow-y: auto;
    background: #FAFBFB;
}

.bo-grid-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.bo-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #F8FAFC;
    color: var(--brand-950, #001D23);
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--bo-border, #E2E9E8);
    white-space: nowrap;
    user-select: none;
    transition: background-color 0.15s ease;
}

.bo-grid-table thead th:hover {
    background-color: #EEF2F6;
}

.bo-grid-table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--bo-text-primary, #102427);
    border-bottom: 1px solid var(--bo-border-subtle, #EDF1F0);
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.bo-grid-table tbody tr {
    cursor: pointer;
}

.bo-grid-table tbody tr:hover td {
    background-color: #F8FAFB !important;
}

.bo-grid-table tbody tr.bo-row-selected td {
    background-color: rgba(0, 179, 136, 0.08) !important;
}

/* ── 02. Grid Density Modes ──────────────────────────────────────────────── */
.bo-grid-comfortable thead th { padding: 0.85rem 1.15rem; font-size: 0.85rem; }
.bo-grid-comfortable tbody td { padding: 0.9rem 1.15rem; font-size: 0.9rem; }

.bo-grid-compact thead th { padding: 0.55rem 0.75rem; font-size: 0.8rem; }
.bo-grid-compact tbody td { padding: 0.55rem 0.75rem; font-size: 0.8125rem; }

.bo-grid-extra-compact thead th { padding: 0.35rem 0.5rem; font-size: 0.75rem; }
.bo-grid-extra-compact tbody td { padding: 0.35rem 0.5rem; font-size: 0.75rem; }

/* ── 03. Grid Zebra Striping ─────────────────────────────────────────────── */
.bo-grid-zebra tbody tr:nth-child(even):not(.bo-row-selected) td {
    background-color: #FAFBFB;
}

/* ── 04. Pinned Columns (RTL & LTR Aware) ─────────────────────────────────── */
.bo-col-pinned-start {
    position: sticky;
    inset-inline-start: 0;
    z-index: 12 !important;
    background: inherit;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
}

.bo-col-pinned-end {
    position: sticky;
    inset-inline-end: 0;
    z-index: 12 !important;
    background: inherit;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.04);
}

/* ── 05. Column Resizing & Sorting Indicator ─────────────────────────────── */
.bo-th-content {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.bo-col-resize-handle {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 6px;
    bottom: 0;
    cursor: col-resize;
    user-select: none;
    z-index: 15;
}

.bo-col-resize-handle:hover,
.bo-col-resizing {
    background-color: var(--brand-600, #00B388);
}

/* ── 06. Floating Bulk Actions Bar ───────────────────────────────────────── */
.bo-floating-bulk-bar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 1040;
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.35), 0 8px 10px -6px rgba(0, 29, 35, 0.2);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bo-floating-bulk-bar.show {
    transform: translateX(-50%) translateY(0);
}

/* ── 07. Row Details Slide-Out Drawer ────────────────────────────────────── */
.bo-details-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 440px;
    max-width: 90vw;
    background: #FFFFFF;
    box-shadow: -4px 0 24px rgba(0, 29, 35, 0.15);
    z-index: 1055;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[dir="rtl"] .bo-details-drawer {
    transform: translateX(-100%);
}

.bo-details-drawer.open {
    transform: translateX(0) !important;
}

.bo-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 29, 35, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.bo-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.bo-drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bo-border, #E2E9E8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8FAFC;
}

.bo-drawer-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.bo-drawer-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bo-border, #E2E9E8);
    background: #F8FAFC;
}

.bo-drawer-prop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--bo-border-subtle, #EDF1F0);
    font-size: 0.875rem;
}

.bo-drawer-prop-row:last-child {
    border-bottom: none;
}

/* ── 08. Enterprise SaaS Reports Filter Bar & Date Popover ───────────── */
.bo-reports-filter-bar {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 1px 3px 0 rgba(0, 29, 35, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bo-reports-filter-bar:hover {
    box-shadow: 0 4px 12px -2px rgba(0, 29, 35, 0.06);
}

.bo-filter-row-primary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bo-search-box-unified {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 260px;
}

.bo-search-input {
    width: 100%;
    height: 38px;
    padding-inline-start: 36px;
    padding-inline-end: 42px;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--brand-950, #001D23);
    background-color: #FAFBFB;
    transition: all 0.2s ease;
}

.bo-search-input:focus {
    background-color: #FFFFFF;
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.12);
    outline: none;
}

.bo-search-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--bo-text-muted, #6C7D7E);
    font-size: 0.875rem;
    pointer-events: none;
}

.bo-search-shortcut-badge {
    position: absolute;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.725rem;
    font-weight: 600;
    color: var(--bo-text-muted, #6C7D7E);
    background: #EEF2F6;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 4px;
    padding: 1px 6px;
    pointer-events: none;
}

.bo-search-clear-btn {
    position: absolute;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #E2E8F0;
    color: var(--bo-text-muted, #6C7D7E);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-search-clear-btn:hover {
    background: #CBD5E1;
    color: var(--brand-950, #001D23);
}

.bo-date-picker-anchor {
    position: relative;
}

.bo-date-trigger-btn {
    height: 38px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 8px;
    background: #FAFBFB;
    color: var(--brand-950, #001D23);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.bo-date-trigger-btn:hover {
    border-color: var(--brand-300, #57988D);
    background: #FFFFFF;
}

.bo-date-chevron {
    font-size: 0.75rem;
    color: var(--bo-text-muted, #6C7D7E);
    transition: transform 0.2s ease;
}

.bo-date-trigger-btn[aria-expanded="true"] .bo-date-chevron {
    transform: rotate(180deg);
}

.bo-date-popover {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 1050;
    width: 340px;
    max-width: 95vw;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 29, 35, 0.12), 0 8px 10px -6px rgba(0, 29, 35, 0.06);
    animation: boFadeInDown 0.18s ease-out;
}

@keyframes boFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bo-date-popover-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bo-border-subtle, #EDF1F0);
    background: #FAFBFB;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.bo-date-popover-body {
    padding: 12px 14px;
}

.bo-date-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bo-text-muted, #6C7D7E);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.bo-date-presets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.bo-preset-btn {
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--bo-text-secondary, #465B5D);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-preset-btn:hover {
    background: #F2F7F6;
    border-color: var(--brand-300, #57988D);
    color: var(--brand-950, #001D23);
}

.bo-preset-btn.active {
    background: #E6F7F3;
    border-color: var(--brand-600, #00B388);
    color: var(--brand-950, #001D23);
    font-weight: 700;
}

.bo-date-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 12px 0 10px 0;
    color: var(--bo-text-muted, #6C7D7E);
    font-size: 0.725rem;
}

.bo-date-divider::before,
.bo-date-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px dashed var(--bo-border, #E2E9E8);
}

.bo-date-divider span {
    padding: 0 8px;
}

.bo-date-input-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bo-text-secondary, #465B5D);
    margin-bottom: 3px;
    display: block;
}

.bo-custom-date-input {
    font-size: 0.8125rem;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 6px;
    background: #FAFBFB;
}

.bo-custom-date-input:focus {
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.12);
}

.bo-date-popover-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--bo-border-subtle, #EDF1F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FAFBFB;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

/* Secondary Filters Row */
.bo-filter-row-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bo-filter-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 150px;
}

.bo-filter-select-icon {
    position: absolute;
    inset-inline-start: 11px;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 2;
}

.bo-filter-select {
    width: 100%;
    height: 36px;
    padding-inline-start: 32px;
    padding-inline-end: 28px;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--brand-950, #001D23);
    background-color: #FAFBFB;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236C7D7E' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
}

[dir="rtl"] .bo-filter-select {
    background-position: left 10px center;
}

[dir="ltr"] .bo-filter-select {
    background-position: right 10px center;
}

.bo-filter-select:hover {
    border-color: var(--brand-300, #57988D);
    background-color: #FFFFFF;
}

.bo-filter-select:focus {
    outline: none;
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.12);
}

.bo-filter-select.is-filtered {
    background-color: #F0FDF4;
    border-color: #10B981;
    color: #064E3B;
    font-weight: 600;
}

.bo-filter-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bo-btn-advanced-filters {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--brand-950, #001D23);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.bo-btn-advanced-filters:hover {
    border-color: var(--brand-400, #2C7468);
    background: #F2F7F6;
    color: var(--brand-600, #00B388);
}

.bo-filter-counter-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
}

.bo-btn-reset-filters {
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--bo-danger-border, #FECDCA);
    border-radius: 8px;
    background: var(--bo-danger-bg, #FEF3F2);
    color: var(--bo-danger, #D92D20);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.bo-btn-reset-filters:hover {
    background: #FDE8E7;
    border-color: #FCA5A5;
}

/* Active Filter Chips Ribbon */
.bo-active-chips-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 4px;
    border-top: 1px dashed var(--bo-border-subtle, #EDF1F0);
}

.bo-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    background: #F0FDF4;
    border: 1px solid #A7F3D0;
    border-radius: 9999px;
    font-size: 0.775rem;
    color: #065F46;
    font-weight: 600;
    transition: all 0.15s ease;
}

.bo-filter-chip .chip-label {
    color: #047857;
    font-weight: 500;
}

.bo-filter-chip:hover {
    border-color: #34D399;
    background: #DCFCE7;
}

.bo-filter-chip-remove {
    cursor: pointer;
    color: #059669;
    font-size: 0.75rem;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.bo-filter-chip-remove:hover {
    color: #FFFFFF;
    background: var(--bo-danger, #D92D20);
}

/* ── Dynamic Rule Builder (Advanced Filters) ─────────────────────────────── */
.bo-rule-builder-container {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
}

.bo-rule-row {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.bo-rule-row:hover {
    border-color: #CBD5E1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.bo-rule-field-wrap {
    flex: 1.2;
    min-width: 130px;
}

.bo-rule-op-wrap {
    flex: 1;
    min-width: 120px;
}

.bo-rule-val-wrap {
    flex: 1.3;
    min-width: 140px;
}

.bo-rule-field-select,
.bo-rule-op-select,
.bo-rule-val-input,
.bo-rule-val-select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font-size: 0.8125rem;
    color: var(--brand-950, #001D23);
    background-color: #FAFBFB;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 6px;
    outline: none;
    transition: all 0.15s ease;
}

.bo-rule-field-select:focus,
.bo-rule-op-select:focus,
.bo-rule-val-input:focus,
.bo-rule-val-select:focus {
    background-color: #FFFFFF;
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.12);
}

.bo-rule-between-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.bo-rule-between-input {
    flex: 1;
    height: 34px;
    padding: 0 6px;
    font-size: 0.8rem;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: 6px;
    background: #FAFBFB;
    outline: none;
    transition: all 0.15s ease;
}

.bo-rule-between-input:focus {
    border-color: var(--brand-600, #00B388);
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.12);
}

.bo-rule-between-sep {
    font-size: 0.75rem;
    color: #64748B;
    white-space: nowrap;
    font-weight: 500;
}

.bo-rule-remove-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.bo-rule-remove-btn:hover {
    background: #FEF2F2;
    color: #EF4444;
    border-color: #FECACA;
}

.bo-rule-unary-hint {
    height: 34px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.775rem;
    color: #64748B;
    background: #F1F5F9;
    border-radius: 6px;
    border: 1px dashed #CBD5E1;
}

@media (max-width: 576px) {
    .bo-rule-row {
        flex-direction: column;
        align-items: stretch;
    }
    .bo-rule-field-wrap, .bo-rule-op-wrap, .bo-rule-val-wrap {
        width: 100%;
        min-width: 100%;
    }
    .bo-rule-remove-btn {
        width: 100%;
        height: 28px;
    }
}

/* ── 09. Pivot Heatmap & Matrix Grid ─────────────────────────────────────── */
.bo-pivot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.bo-pivot-table th, 
.bo-pivot-table td {
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--bo-border, #E2E9E8);
    text-align: center;
}

.bo-pivot-table thead th {
    background: var(--brand-950, #001D23);
    color: #FFFFFF;
    font-weight: 700;
}

.bo-pivot-table tbody th {
    background: #F8FAFC;
    color: var(--brand-950, #001D23);
    font-weight: 600;
    text-align: start;
}

.bo-pivot-total-cell {
    background: #EEF8F6 !important;
    font-weight: 700 !important;
    color: var(--brand-950, #001D23) !important;
}

.bo-pivot-heat-1 { background-color: rgba(0, 179, 136, 0.06); }
.bo-pivot-heat-2 { background-color: rgba(0, 179, 136, 0.15); }
.bo-pivot-heat-3 { background-color: rgba(0, 179, 136, 0.28); font-weight: 600; }
.bo-pivot-heat-4 { background-color: rgba(0, 179, 136, 0.45); font-weight: 700; color: #001D23; }
.bo-pivot-heat-5 { background-color: rgba(0, 179, 136, 0.68); font-weight: 700; color: #001D23; }

/* ── 10. Hierarchical Breakdown Tree Grid ────────────────────────────────── */
.bo-tree-node {
    border-bottom: 1px solid var(--bo-border-subtle, #EDF1F0);
    transition: background-color 0.15s ease;
}

.bo-tree-node:hover {
    background-color: #F8FAFB;
}

.bo-tree-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.bo-tree-depth-1 .bo-tree-node-header { padding-inline-start: 1rem; font-weight: 700; background: #FAFBFB; }
.bo-tree-depth-2 .bo-tree-node-header { padding-inline-start: 2.25rem; font-weight: 600; }
.bo-tree-depth-3 .bo-tree-node-header { padding-inline-start: 3.5rem; font-weight: 500; font-size: 0.8125rem; }

/* ── 11. Command Palette (Ctrl+K) ────────────────────────────────────────── */
.bo-cmd-palette-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 29, 35, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1060;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.bo-cmd-palette-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.bo-cmd-palette-modal {
    width: 600px;
    max-width: 92vw;
    background: #FFFFFF;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 40px -10px rgba(0, 29, 35, 0.25);
    border: 1px solid var(--bo-border, #E2E9E8);
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bo-cmd-palette-backdrop.open .bo-cmd-palette-modal {
    transform: scale(1);
}

.bo-cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--bo-border-subtle, #EDF1F0);
    transition: all 0.15s ease;
}

.bo-cmd-item:hover,
.bo-cmd-item.active {
    background-color: #F2F7F6;
    color: var(--brand-950, #001D23);
}

.bo-cmd-item:last-child {
    border-bottom: none;
}

/* ── 13. Enterprise Reporting Workspace & Funnel Trigger ───────────────── */
.bo-reports-header-card {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.04);
}

.bo-filter-workspace {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-md, 10px);
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.04);
}

.bo-funnel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.85rem;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--bo-border, #E2E9E8);
    background: #FFFFFF;
    color: var(--bo-text-primary, #102427);
    font-size: 0.835rem;
    font-weight: 600;
    transition: all 180ms ease-in-out;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.bo-funnel-btn:hover {
    background: var(--brand-50, #F2F7F6);
    border-color: var(--brand-300, #57988D);
    color: var(--brand-950, #001D23);
}

.bo-funnel-btn.active,
.bo-funnel-btn[data-active="true"] {
    border-color: var(--brand-600, #00B388);
    background: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
}

.bo-funnel-btn.open {
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.15);
}

.bo-funnel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--brand-600, #00B388);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    margin-inline-start: 0.2rem;
}

/* ── 14. Filter Slide-Out Drawer ────────────────────────────────────────── */
.bo-filter-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 420px;
    max-width: 92vw;
    background: #FFFFFF;
    box-shadow: -4px 0 24px rgba(0, 29, 35, 0.12);
    z-index: 1055;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[dir="rtl"] .bo-filter-drawer {
    transform: translateX(-100%);
}

.bo-filter-drawer.open {
    transform: translateX(0) !important;
}

.bo-filter-drawer-header {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--bo-border, #E2E9E8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FAFBFB;
}

.bo-filter-drawer-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.bo-filter-drawer-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--bo-border, #E2E9E8);
    background: #FAFBFB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ── 15. Saved Views Dropdown Popover ───────────────────────────────────── */
.bo-saved-views-menu {
    min-width: 300px;
    max-width: 360px;
    padding: 0.5rem;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--bo-border, #E2E9E8);
    box-shadow: var(--shadow-dropdown, 0 10px 25px -5px rgba(0, 29, 35, 0.08));
}

.bo-saved-view-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-xs, 4px);
    color: var(--bo-text-primary, #102427);
    text-decoration: none;
    font-size: 0.835rem;
    transition: background-color 0.15s ease;
}

.bo-saved-view-item:hover,
.bo-saved-view-item.active {
    background-color: var(--brand-50, #F2F7F6);
    color: var(--brand-950, #001D23);
}

.bo-saved-view-item .item-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.bo-saved-view-item:hover .item-actions {
    opacity: 1;
}

/* ── 16. Refined Filter Chips ────────────────────────────────────────────── */
.bo-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: #F2F7F6;
    border: 1px solid var(--brand-200, #C9D5D3);
    border-radius: 9999px;
    font-size: 0.76rem;
    color: var(--brand-950, #001D23);
    font-weight: 500;
    transition: all 0.15s ease;
}

.bo-filter-chip:hover {
    border-color: var(--brand-400, #2C7468);
    background: #E2ECE9;
}

.bo-filter-chip .chip-label {
    color: var(--bo-text-muted, #6C7D7E);
    font-weight: 400;
}

.bo-filter-chip .chip-value {
    font-weight: 600;
    color: var(--brand-950, #001D23);
}

/* ── 17. Interactive Org Chart & Hierarchy Styles ────────────────────────── */
.bo-org-chart-viewport {
    background: #F8FAFC;
    overflow: auto;
    min-height: 520px;
    max-height: 750px;
    position: relative;
    border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
    cursor: grab;
}

.bo-org-chart-viewport:active {
    cursor: grabbing;
}

.bo-org-chart-canvas {
    padding: 2.5rem 1.5rem;
    min-width: 100%;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bo-org-tree-wrapper {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.bo-org-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.bo-org-card {
    width: 250px;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-top: 4px solid var(--brand-600, #00B388);
    border-radius: 10px;
    padding: 0.9rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    z-index: 2;
    cursor: pointer;
}

.bo-org-root-node > .bo-org-card {
    border-top: 4px solid var(--brand-950, #001D23);
    box-shadow: 0 4px 12px rgba(0, 29, 35, 0.1) !important;
}

.bo-org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 29, 35, 0.12) !important;
    border-color: var(--brand-400, #2C7468);
}

.bo-org-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bo-org-level-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.bo-org-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bo-org-status-dot.active {
    background-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.bo-org-status-dot.inactive {
    background-color: #EF4444;
}

.bo-org-card-body {
    text-align: center;
}

.bo-org-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-950, #001D23), var(--brand-700, #007055));
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem auto;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.bo-org-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    margin-bottom: 0.15rem;
}

.bo-org-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-600, #00B388);
    margin-bottom: 0.35rem;
}

.bo-org-dept {
    font-size: 0.73rem;
    margin-bottom: 0.5rem;
}

.bo-org-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
}

.bo-org-toggle-btn {
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--brand-600, #00B388);
    color: var(--brand-600, #00B388);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.15s ease;
    z-index: 3;
}

.bo-org-toggle-btn:hover {
    background: var(--brand-600, #00B388);
    color: #FFFFFF;
    transform: translateX(-50%) scale(1.1);
}

.bo-org-children-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 2rem;
    position: relative;
    width: 100%;
}

.bo-org-children-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 1rem;
    background-color: var(--brand-300, #95B0AA);
    transform: translateX(-50%);
}

.bo-org-children-container > .bo-org-node::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 50%;
    width: 2px;
    height: 1rem;
    background-color: var(--brand-300, #95B0AA);
    transform: translateX(-50%);
}

.bo-org-children-container > .bo-org-node::after {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-300, #95B0AA);
}

.bo-org-children-container > .bo-org-node:first-child::after {
    left: 50%;
}

.bo-org-children-container > .bo-org-node:last-child::after {
    right: 50%;
}

.bo-org-children-container > .bo-org-node:only-child::after {
    display: none;
}

/* ── RTL Connectors Adjustment ───────────────────────────────────────────── */
[dir="rtl"] .bo-org-children-container > .bo-org-node:first-child::after {
    left: 0;
    right: 50%;
}

[dir="rtl"] .bo-org-children-container > .bo-org-node:last-child::after {
    right: 0;
    left: 50%;
}

/* ── Active Path & Search Match Highlights ───────────────────────────────── */
.bo-org-node.bo-org-node-match > .bo-org-card {
    border-color: var(--brand-600, #00B388) !important;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.25) !important;
}

.bo-org-node.bo-org-node-highlighted > .bo-org-card {
    border-color: var(--brand-600, #00B388) !important;
    box-shadow: 0 0 0 4px rgba(0, 179, 136, 0.45), 0 8px 24px rgba(0, 29, 35, 0.18) !important;
    animation: bo-org-pulse 1.5s infinite alternate;
}

@keyframes bo-org-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); }
}

.bo-org-node.bo-org-path-active > .bo-org-card {
    background-color: var(--brand-50, #F2F7F6) !important;
    border-color: var(--brand-600, #00B388) !important;
}

.bo-org-node.bo-org-path-active::before,
.bo-org-node.bo-org-path-active::after,
.bo-org-node.bo-org-path-active > .bo-org-children-container::before {
    background-color: var(--brand-600, #00B388) !important;
    box-shadow: 0 0 4px rgba(0, 179, 136, 0.5);
}

/* ── Compact Density Mode ────────────────────────────────────────────────── */
.bo-org-density-compact .bo-org-card {
    width: 190px;
    padding: 0.6rem;
}

.bo-org-density-compact .bo-org-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.bo-org-density-compact .bo-org-name {
    font-size: 0.84rem;
}

.bo-org-density-compact .bo-org-title {
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
}

.bo-org-density-compact .bo-org-dept,
.bo-org-density-compact .bo-org-meta {
    display: none !important;
}

.bo-org-density-compact .bo-org-children-container {
    gap: 0.85rem;
    padding-top: 1.5rem;
}

/* ── Tree View Styles ────────────────────────────────────────────────────── */
.bo-org-tree-level {
    position: relative;
}

.bo-org-tree-item {
    transition: all 0.15s ease;
}

.bo-org-tree-item:hover {
    border-color: var(--brand-300, #95B0AA) !important;
    background-color: var(--brand-50, #F2F7F6) !important;
}

/* ── Print Stylesheet ────────────────────────────────────────────────────── */
@media print {
    .bo-reports-header-card,
    .bo-filter-workspace,
    .bo-active-chips-bar,
    .card-header,
    .bo-org-toggle-btn,
    .btn,
    nav {
        display: none !important;
    }

    .bo-org-chart-viewport {
        overflow: visible !important;
        max-height: none !important;
        background: transparent !important;
    }

    .bo-org-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #333 !important;
    }

    #smartReportOrgChartContainer,
    #smartReportOrgChartContainer .card {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── ENTERPRISE SMART REPORTS & PAYROLL WORKSPACE REDESIGN (RTL PREMIUM) ──────
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 01. Enterprise Workspace Layout & Density ───────────────────────────── */
.bo-reports-workspace {
    font-family: var(--bo-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    color: var(--brand-950, #001D23);
}

.bo-table-wrapper-loading {
    position: relative;
    pointer-events: none;
}

.bo-table-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: var(--radius-md, 8px);
}

/* ── 02. Table Densities (Comfortable, Compact, Extra-Compact) ───────────── */
.bo-grid-table.bo-density-comfortable th,
.bo-grid-table.bo-density-comfortable td {
    padding: 0.85rem 1rem !important;
    font-size: 0.875rem;
}

.bo-grid-table.bo-density-compact th,
.bo-grid-table.bo-density-compact td {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.825rem;
}

.bo-grid-table.bo-density-extra-compact th,
.bo-grid-table.bo-density-extra-compact td {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.78rem;
    line-height: 1.25;
}

/* ── 03. RTL Sticky Headers & Sticky Columns ─────────────────────────────── */
.bo-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #FAFCFB !important;
    border-bottom: 2px solid var(--bo-border, #E2E8F0) !important;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    white-space: nowrap;
    user-select: none;
}

.bo-col-pinned-start {
    position: sticky !important;
    right: 0 !important;
    z-index: 15 !important;
    background-color: #FFFFFF !important;
    box-shadow: -2px 0 6px -2px rgba(0, 29, 35, 0.08);
}

thead .bo-col-pinned-start {
    background-color: #FAFCFB !important;
    z-index: 20 !important;
}

.bo-col-pinned {
    position: sticky !important;
    z-index: 12 !important;
    background-color: #FFFFFF !important;
    box-shadow: -2px 0 6px -2px rgba(0, 29, 35, 0.06);
}

thead .bo-col-pinned {
    background-color: #FAFCFB !important;
    z-index: 18 !important;
}

.bo-col-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 25;
    background: transparent;
    transition: background 0.15s ease;
}

.bo-col-resize-handle:hover,
.bo-col-resize-handle:active {
    background: var(--brand-600, #00B388);
}

/* ── 04. Column Header Context Menu ──────────────────────────────────────── */
.bo-th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    border-radius: 4px;
    padding: 0.15rem 0.25rem;
    transition: background-color 0.15s ease;
}

.bo-th-content:hover {
    background-color: rgba(0, 179, 136, 0.06);
}

.bo-th-btn-menu {
    opacity: 0;
    transition: opacity 0.15s ease;
    padding: 0 4px;
    color: var(--bo-text-muted, #64748B);
    border: none;
    background: transparent;
}

.bo-grid-table thead th:hover .bo-th-btn-menu,
.bo-th-btn-menu:focus {
    opacity: 1;
}

/* ── 05. Shimmer Skeleton Loading Rows ───────────────────────────────────── */
.bo-skeleton-row td {
    background: #FFFFFF !important;
}

.bo-skeleton-bone {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: bo-skeleton-shimmer 1.5s infinite;
    display: inline-block;
}

@keyframes bo-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 06. Right-Side Drawers (Column Manager, Saved Views, Details) ────────── */
.bo-column-manager-drawer,
.bo-saved-view-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -580px;
    width: 540px;
    max-width: 95vw;
    background: #FFFFFF;
    box-shadow: -8px 0 28px rgba(0, 29, 35, 0.16);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bo-column-manager-drawer.open,
.bo-saved-view-drawer.open {
    right: 0 !important;
}

.bo-drawer-domain-pill {
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--bo-border, #E2E8F0);
    background: #F8FAFC;
    color: var(--brand-950, #001D23);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.bo-drawer-domain-pill:hover {
    border-color: var(--brand-600, #00B388);
    background: #F2F7F6;
}

.bo-drawer-domain-pill.active {
    background: var(--brand-600, #00B388) !important;
    color: #FFFFFF !important;
    border-color: var(--brand-600, #00B388) !important;
}

.bo-col-manager-item {
    border: 1px solid var(--bo-border, #E2E8F0);
    background: #FAFCFB;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bo-col-manager-item:hover {
    border-color: var(--brand-400, #40C7A6);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 29, 35, 0.04);
}

.bo-col-manager-item.is-pinned {
    border-color: var(--brand-600, #00B388);
    background: #F2F7F6;
}

.bo-col-drag-handle {
    cursor: grab;
    color: #94A3B8;
    padding: 2px 4px;
}

.bo-col-drag-handle:active {
    cursor: grabbing;
}

/* ── 07. Executive KPI Summary Cards ─────────────────────────────────────── */
.bo-kpi-card-enhanced {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: var(--radius-lg, 12px);
    padding: 1.15rem;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.bo-kpi-card-enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--brand-600, #00B388);
    opacity: 0.85;
}

.bo-kpi-card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 29, 35, 0.08);
}

.bo-kpi-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
}

.bo-kpi-sparkline-bar {
    width: 4px;
    background: var(--brand-200, #BEE1D9);
    border-radius: 2px;
    transition: height 0.3s ease, background 0.15s ease;
}

.bo-kpi-sparkline-bar:hover {
    background: var(--brand-600, #00B388);
}

/* ── 08. Summary Totals Footer Row ───────────────────────────────────────── */
.bo-table-totals-row td {
    background: #F8FAFC !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--bo-border, #CBD5E1) !important;
    border-bottom: 2px solid var(--bo-border, #CBD5E1) !important;
    color: var(--brand-950, #001D23) !important;
}

/* ── 09. Floating Toast Notification System ──────────────────────────────── */
.bo-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 50%;
    transform: translateX(50%);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.bo-toast-item {
    pointer-events: auto;
    background: #001D23;
    color: #FFFFFF;
    padding: 0.75rem 1.25rem;
    border-radius: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.875rem;
    font-weight: 600;
    animation: bo-toast-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bo-toast-item.success {
    background: #001D23;
    border: 1px solid var(--brand-600, #00B388);
}

.bo-toast-item.success i {
    color: var(--brand-400, #40C7A6);
}

@keyframes bo-toast-slide-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 10. Unsaved View Banner & Badge ─────────────────────────────────────── */
.bo-unsaved-view-badge {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    animation: bo-pulse-soft 2s infinite ease-in-out;
}

@keyframes bo-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── 11. Empty States and Error Card ─────────────────────────────────────── */
.bo-empty-state-box {
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.bo-empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── NEXT-GEN SAAS WORKSPACE UPPER AREA REDESIGN (ENTERPRISE POLISH) ─────────
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 01. Breadcrumb Hierarchy ─────────────────────────────────────────────── */
.bo-reports-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.785rem;
    color: var(--bo-text-muted, #64748B);
    margin-bottom: 0.65rem;
}

.bo-reports-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bo-reports-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-reports-breadcrumb li + li::before {
    content: "/";
    color: #CBD5E1;
    font-size: 0.7rem;
    margin-inline: 0.15rem;
}

.bo-reports-breadcrumb a {
    color: var(--bo-text-muted, #64748B);
    text-decoration: none;
    transition: color 0.15s ease;
}

.bo-reports-breadcrumb a:hover {
    color: var(--brand-600, #00B388);
}

.bo-reports-breadcrumb li.active {
    color: var(--brand-950, #001D23);
    font-weight: 600;
}

/* ── 02. Workspace Master Header Card ─────────────────────────────────────── */
.bo-reports-header-card {
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E9E8);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 29, 35, 0.03);
    margin-bottom: 0.85rem;
    position: relative;
}

.bo-reports-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.bo-reports-title-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.bo-reports-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1px solid var(--bo-border-subtle, #EDF1F0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bo-reports-brand-icon img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.bo-reports-hero-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-950, #001D23);
    margin: 0;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bo-badge-verified {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: #ECFDF3;
    color: #027A48;
    border: 1px solid #A6F4C5;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── 03. Header Actions Toolbar ───────────────────────────────────────────── */
.bo-reports-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Command Trigger (Ctrl+K) */
.bo-reports-cmd-trigger {
    height: 34px;
    background: #F8FAFC;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 8px;
    padding: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.815rem;
    font-weight: 500;
    color: var(--bo-text-secondary, #465B5D);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-reports-cmd-trigger:hover {
    background: #FFFFFF;
    border-color: var(--brand-400, #2C7468);
    color: var(--brand-950, #001D23);
    box-shadow: 0 1px 4px rgba(0, 29, 35, 0.06);
}

.bo-reports-cmd-trigger kbd {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.685rem;
    font-family: var(--font-family-mono, monospace);
    font-weight: 600;
    color: #64748B;
    box-shadow: 0 1px 0 #CBD5E1;
}

/* View Selector Trigger */
.bo-reports-view-selector-btn {
    height: 34px;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 8px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--brand-950, #001D23);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-reports-view-selector-btn:hover,
.bo-reports-view-selector-btn[aria-expanded="true"] {
    background: #F8FAFC;
    border-color: var(--brand-600, #00B388);
    color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.12);
}

.bo-reports-view-selector-btn .view-chevron {
    font-size: 0.7rem;
    color: #94A3B8;
    transition: transform 0.2s ease;
}

.bo-reports-view-selector-btn[aria-expanded="true"] .view-chevron {
    transform: rotate(180deg);
}

/* Primary Export Action */
.bo-reports-btn-export {
    height: 34px;
    background: var(--brand-600, #00B388);
    color: #FFFFFF !important;
    border: 1px solid var(--brand-600, #00B388);
    border-radius: 8px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 179, 136, 0.25);
    transition: all 0.15s ease;
    text-decoration: none;
}

.bo-reports-btn-export:hover {
    background: var(--bo-accent-hover, #009670);
    border-color: var(--bo-accent-hover, #009670);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 179, 136, 0.35);
}

.bo-reports-btn-export:active {
    transform: translateY(0);
}

/* Overflow Menu (More Actions) */
.bo-reports-btn-more {
    height: 34px;
    width: 34px;
    background: #FFFFFF;
    border: 1px solid var(--bo-border, #E2E8F0);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bo-text-secondary, #465B5D);
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-reports-btn-more:hover,
.bo-reports-btn-more[aria-expanded="true"] {
    background: #F8FAFC;
    color: var(--brand-950, #001D23);
    border-color: var(--brand-400, #2C7468);
}

/* ── 04. Metadata Bar ─────────────────────────────────────────────────────── */
.bo-reports-meta-bar {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bo-border-subtle, #EDF1F0);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    font-size: 0.785rem;
    color: var(--bo-text-muted, #64748B);
}

.bo-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-meta-item strong {
    color: var(--brand-950, #001D23);
    font-weight: 600;
}

.bo-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    display: inline-block;
    position: relative;
}

.bo-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.4);
    animation: bo-pulse-ring 1.8s infinite ease-out;
}

@keyframes bo-pulse-ring {
    0% { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ── 05. Modern Navigation & View Modes Strip ─────────────────────────────── */
.bo-reports-nav-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.bo-reports-domain-scroll-wrap {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.bo-reports-domain-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.bo-reports-domain-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    padding: 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;
}

.bo-domain-tab-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--bo-text-secondary, #465B5D);
    font-size: 0.825rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.bo-domain-tab-btn:hover {
    color: var(--brand-950, #001D23);
    background: #F1F5F9;
}

.bo-domain-tab-btn.active {
    color: var(--brand-700, #124541) !important;
    background: var(--brand-50, #F2F7F6) !important;
    border-color: var(--brand-200, #C9D5D3) !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 29, 35, 0.04);
}

.bo-domain-tab-btn.active i {
    color: var(--brand-600, #00B388);
}

/* View Modes Segmented Control */
.bo-reports-view-modes {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bo-view-mode-pill {
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 0.785rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.bo-view-mode-pill:hover {
    color: var(--brand-950, #001D23);
}

.bo-view-mode-pill.active {
    background: #FFFFFF;
    color: var(--brand-950, #001D23);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bo-view-mode-pill.active i {
    color: var(--brand-600, #00B388);
}

/* ── 06. View Switcher Popover Panel ──────────────────────────────────────── */
.bo-view-switcher-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 330px;
    max-width: 380px;
    border-radius: 12px;
    border: 1px solid var(--bo-border, #E2E9E8);
    box-shadow: var(--shadow-dropdown, 0 12px 32px -4px rgba(0, 29, 35, 0.12));
    padding: 0;
    background: #FFFFFF;
    overflow: hidden;
    z-index: 1060;
}

.bo-dropdown.open > .bo-view-switcher-popover,
.dropdown.open > .bo-view-switcher-popover,
.bo-view-switcher-popover.show,
.bo-view-switcher-popover.open {
    display: block !important;
}

.bo-vsp-header {
    background: #F8FAFC;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bo-border, #E2E9E8);
}

.bo-vsp-search {
    position: relative;
}

.bo-vsp-search input {
    width: 100%;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 0 1.85rem 0 0.65rem;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bo-vsp-search input:focus {
    border-color: var(--brand-600, #00B388);
    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.15);
}

.bo-vsp-search-icon {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 0.75rem;
    pointer-events: none;
}

.bo-vsp-body {
    max-height: 290px;
    overflow-y: auto;
    padding: 0.4rem 0.35rem;
}

.bo-vsp-section-title {
    font-size: 0.685rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.45rem 0.65rem 0.2rem;
}

.bo-vsp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
    color: var(--brand-950, #001D23);
    text-decoration: none;
    margin-bottom: 2px;
}

.bo-vsp-item:hover {
    background: #F1F5F9;
}

.bo-vsp-item.active {
    background: var(--brand-50, #F2F7F6);
    color: var(--brand-700, #124541);
    font-weight: 600;
}

.bo-vsp-item .item-title {
    font-size: 0.825rem;
    display: block;
}

.bo-vsp-item .item-desc {
    font-size: 0.72rem;
    color: #64748B;
}

.bo-vsp-footer {
    background: #F8FAFC;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid var(--bo-border, #E2E9E8);
}

.bo-vsp-footer button {
    width: 100%;
    height: 32px;
    background: #FFFFFF;
    border: 1px dashed var(--brand-400, #2C7468);
    border-radius: 6px;
    color: var(--brand-700, #124541);
    font-size: 0.785rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bo-vsp-footer button:hover {
    background: var(--brand-50, #F2F7F6);
    border-color: var(--brand-600, #00B388);
    color: var(--brand-600, #00B388);
}

/* ── 07. Responsive Rules for Upper Workspace ─────────────────────────────── */
@media (max-width: 1200px) {
    .bo-reports-header-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .bo-reports-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .bo-reports-nav-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .bo-reports-domain-scroll-wrap {
        width: 100%;
    }

    .bo-reports-view-modes {
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .bo-reports-header-card {
        padding: 0.85rem;
    }

    .bo-reports-hero-title {
        font-size: 0.985rem;
    }

    .bo-reports-meta-bar {
        font-size: 0.735rem;
        gap: 0.5rem 0.85rem;
    }

    .bo-reports-toolbar {
        gap: 0.35rem;
    }

    .bo-reports-cmd-trigger span {
        display: none;
    }
}