/* ==========================================================================
   Balance One — Master Enterprise SaaS Design System
   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;

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

/* Dropdown */
.bo-dropdown {
    position: relative;
    display: inline-block;
}

.bo-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    min-width: 200px;
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 0.4rem;
    z-index: 150;
}

.bo-dropdown.open .bo-dropdown-menu {
    display: block;
}

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

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

/* ── 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. Compact Enterprise KPI / Stat Cards ─────────────────────────────── */
.bo-stat-card, .bo-kpi-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto !important;
    min-height: 84px;
    box-shadow: var(--shadow-subtle);
}

.bo-stat-label, .bo-kpi-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bo-text-muted);
    margin-bottom: 0.25rem;
}

.bo-stat-value, .bo-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-950);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.bo-stat-unit {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bo-text-muted);
}

.bo-stat-meta {
    font-size: 0.75rem;
    color: var(--bo-text-secondary);
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── 11. Tables ──────────────────────────────────────────────────────────── */
.bo-table-container, .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
}

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

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

/* ── 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-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    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 20px 45px -12px rgba(0, 29, 35, 0.09);
    overflow: hidden;
    text-align: start;
    max-width: 1080px;
    margin-inline: auto;
}

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

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

.bo-mockup-dot {
    width: 10px;
    height: 10px;
    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.25rem 1.25rem;
    font-size: 0.75rem;
    color: var(--bo-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 380px;
    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.5rem;
    background: var(--bg-surface);
}

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

.bo-mockup-kpi-card {
    background: var(--bg-subtle);
    border: 1px solid var(--bo-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

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

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

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

/* ── 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: 2.25rem;
    box-shadow: 0 10px 30px -10px rgba(0, 29, 35, 0.05);
}

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

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

#registerResponsiveGrid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}

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

.bo-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 0;
    color: var(--bo-text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: inherit;
    transition: color var(--ease-fast);
}

.bo-bottom-nav-item i {
    font-size: 1.15rem;
    color: var(--bo-text-muted);
    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: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    margin-bottom: 1.25rem;
}

.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: var(--brand-50);
    color: var(--brand-600);
    border: 1px solid var(--brand-200);
}

.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(2, 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-section { padding-block: 2.5rem 1.75rem; }
    .bo-grid-4, .bo-grid-3, .bo-grid-2 { grid-template-columns: 1fr !important; gap: 1rem; }
    
    /* 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;
    }
    .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-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    .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.65rem 0.85rem;
    }
    .bo-mockup-kpi-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .bo-mockup-canvas {
        padding: 1rem;
    }
    .bo-mockup-url-pill {
        max-width: 200px;
        padding: 0.2rem 0.75rem;
        font-size: 0.7rem;
    }
}

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

/* ── 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: 36px;
    width: auto;
    object-fit: contain;
}

.bo-setup-tenant-badge {
    background-color: #F1F5F9;
    color: #0F172A;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #CBD5E1;
}

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

.bo-setup-progress-pill {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    padding: 6px 16px;
    display: 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, #10B981 0%, #059669 100%);
    border-radius: 4px;
    transition: width 0.4s ease;
}

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

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

.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: 22px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bo-setup-stepper-title {
    font-size: 0.84375rem;
    font-weight: 700;
    color: #475569;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.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;
    right: 15px; /* RTL default */
    bottom: 0;
    width: 2px;
    background-color: #E2E8F0;
}

[dir="ltr"] .bo-setup-stage-item:not(:last-child)::before {
    right: auto;
    left: 15px;
}

.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: #0F172A;
    background-color: #0F172A;
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.12);
}

.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.90625rem;
    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: #0284C7;
}

.bo-setup-stage-item.active .bo-setup-stage-header-link {
    color: #0F172A;
}

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

.bo-setup-substep-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-inline-start: 6px;
    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: 5px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.bo-setup-substep-link:hover {
    background-color: #F1F5F9;
    color: #0F172A;
}

.bo-setup-substep-link.active {
    background-color: rgba(2, 132, 199, 0.1);
    color: #0284C7;
    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: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* 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 2px 8px rgba(0, 0, 0, 0.03);
}

.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: #0284C7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bo-setup-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

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

/* 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, #0F172A 0%, #1E293B 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 28px 32px;
    color: #FFFFFF;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25), 0 8px 10px -6px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.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.15) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 70%);
    pointer-events: none;
}

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

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

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

.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.7);
    margin-top: 2px;
}

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

.bo-golive-assurance-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78125rem;
    color: #E2E8F0;
}

.bo-golive-assurance-pill i {
    color: #10B981;
}

/* 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: 32px 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, #FAFCFB 0%, #FFFFFF 100%);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.08);
}

.bo-golive-launch-btn {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1.125rem;
    padding: 14px 42px;
    border-radius: 12px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    transition: all 0.2s ease;
    cursor: pointer;
}

.bo-golive-launch-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}