/* ============================================
   CAMPA TECHNOLOGIES - shared layer on top of Bootstrap 5.3. Every theme loads this.
   Structure, brand, public-page components and the Falcon class names and variables the pages use.
   A theme only sets colors and looks: campa-skin.css (default), campa-pixel.css (16-bit game).
   New component? Put its structure here and read colors from --bs-* tokens, so every theme gets it.
   ============================================ */

/* Brand colors */
:root,
[data-bs-theme="light"] {
    /* Primary Brand Colors */
    --bs-primary: #0050EF;
    --bs-primary-rgb: 0, 80, 239;

    /* Brand Logo Size Presets */
    --brand-navbar-campa: 24px;
    --brand-navbar-tech: 12px;
    --brand-footer-campa: 14px;
    --brand-footer-tech: 7px;
    --brand-hero-campa: 48px;
    --brand-hero-tech: 24px;
    --brand-preview-campa: 38px;
    --brand-preview-tech: 19px;
    --brand-document-campa: 67px;
    --brand-document-tech: 34px;
    --brand-print-campa: 32px;
    --brand-print-tech: 15px;

    /* Secondary/Accent Colors */
    --bs-secondary: #00ABA9;
    --bs-secondary-rgb: 0, 171, 169;

    /* Extended Brand Palette */
    --brand-primary: #0050EF;
    --brand-primary-dark: #00356d;
    --brand-primary-light: #e8f4ff;
    --brand-accent: #00ABA9;
    --brand-warning: #ffb132;
    --brand-success: #4CAF50;
    --brand-danger: #F44336;
    --brand-info: #0050EF;

    /* Category Colors for Sidebar Icons - Vibrant Palette */
    --icon-home: #00356d;           /* Dark Blue - Home */
    --icon-dashboard: #2196F3;      /* Blue - Dashboard */
    --icon-crm: #8E44AD;            /* Purple - Customers */
    --icon-quote-requests: #E67E22; /* Orange - Quote Requests */
    --icon-quotes: #E91E63;         /* Pink - Quotes */
    --icon-purchase-orders: #FF9800;/* Amber - Purchase Orders */
    --icon-invoices: #4CAF50;       /* Green - Invoices */
    --icon-operations: #9C27B0;     /* Deep Purple - Projects */
    --icon-users: #3F51B5;          /* Indigo - Users */
    --icon-business-units: #009688; /* Teal - Business Units */
    --icon-settings: #607D8B;       /* Blue Gray - Settings */
    --icon-templates: #795548;      /* Brown - Templates */
}

/* Dark Mode Brand Colors */
[data-bs-theme="dark"] {
    --bs-primary: #3d7eff;
    --bs-primary-rgb: 61, 126, 255;
    --bs-secondary: #00d4d2;
    --bs-secondary-rgb: 0, 212, 210;

    --brand-primary-light: rgba(0, 80, 239, 0.2);
}

/* ============================================
   Brand Identity
   ============================================ */

/* Company Logo - CAMPA TECHNOLOGIES Montserrat Font */
.brand-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Brand Name Styling - Blue Montserrat Regular (legacy) */
.brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #00356d;
    letter-spacing: 1px;
}

/* Dark mode - white brand name */
[data-bs-theme="dark"] .brand-name {
    color: #ffffff;
}

/* CAMPA TECHNOLOGIES Brand - Two-part styling */
.brand-campa {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #00356d;
    letter-spacing: 1px;
}

.brand-technologies {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #ffb132;
    letter-spacing: 1px;
    font-size: 0.65em;
}

/* Inline brand layout (navbar) */
.brand-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    white-space: nowrap;
}

.brand-inline .brand-technologies {
    font-size: 0.7em;
}

/* Navbar-specific logo sizing - keep document size (56px) isolated to documents */
.navbar-brand .brand-campa,
.navbar-top .brand-inline .brand-campa,
.navbar-standard .brand-inline .brand-campa {
    font-size: 28px;
    letter-spacing: 2px;
}

.navbar-brand .brand-technologies,
.navbar-top .brand-inline .brand-technologies,
.navbar-standard .brand-inline .brand-technologies {
    font-size: 14px;
    letter-spacing: 1px;
}

/* Footer brand sizing - match navbar proportions */
.footer .brand-campa {
    font-size: var(--brand-footer-campa);
    letter-spacing: 1px;
}

.footer .brand-technologies {
    font-size: var(--brand-footer-tech);
    letter-spacing: 0.5px;
}

/* ============================================
   Brand Size Modifier Classes
   Apply these to .brand-logo or parent container
   ============================================ */

/* Navbar size */
.brand-size-navbar .brand-campa {
    font-size: var(--brand-navbar-campa);
    letter-spacing: 2px;
}
.brand-size-navbar .brand-technologies {
    font-size: var(--brand-navbar-tech);
    letter-spacing: 1px;
}

/* Footer size */
.brand-size-footer .brand-campa {
    font-size: var(--brand-footer-campa);
    letter-spacing: 1px;
}
.brand-size-footer .brand-technologies {
    font-size: var(--brand-footer-tech);
    letter-spacing: 0.5px;
}

/* Hero banner size */
.brand-size-hero .brand-campa {
    font-size: var(--brand-hero-campa);
    letter-spacing: 3px;
}
.brand-size-hero .brand-technologies {
    font-size: var(--brand-hero-tech);
    letter-spacing: 2px;
}

/* Preview size (document previews in app - centered) */
.brand-size-preview .brand-campa {
    font-size: var(--brand-preview-campa);
    letter-spacing: 3px;
}
.brand-size-preview .brand-technologies {
    font-size: var(--brand-preview-tech);
    letter-spacing: 4px;
}

/* Centered branding layout variant */
.branding-centered {
    display: flex;
    justify-content: center;
    width: 100%;
}
.branding-centered .brand-vertical {
    align-items: center;
}

/* Document size (Quotes, Invoices - right aligned) */
.brand-size-document .brand-campa {
    font-size: var(--brand-document-campa);
    letter-spacing: 5px;
    line-height: 1.2;
}
.brand-size-document .brand-technologies {
    font-size: var(--brand-document-tech);
    letter-spacing: 7px;
}

/* Print size (Packing Slips - centered) */
.brand-size-print .brand-campa {
    font-size: var(--brand-print-campa);
    letter-spacing: 2px;
}
.brand-size-print .brand-technologies {
    font-size: var(--brand-print-tech);
    letter-spacing: 3px;
    margin-top: 2px;
}

/* Inline text size (matches surrounding paragraph text) */
.brand-size-inline .brand-campa {
    font-size: inherit;
    letter-spacing: 0.5px;
}
.brand-size-inline .brand-technologies {
    font-size: 0.65em;
    letter-spacing: 0.5px;
}

/* Ensure navbar brand doesn't crop company name */
.navbar-brand {
    overflow: visible !important;
    max-width: none !important;
    flex-shrink: 0;
}

.navbar-brand .brand-logo {
    overflow: visible;
    white-space: nowrap;
}

/* Hide TECHNOLOGIES in top navbar when sidebar is expanded, show when collapsed */
.navbar-top .brand-technologies {
    display: none;
}

.navbar-vertical-collapsed .navbar-top .brand-technologies {
    display: inline;
}

/* Vertical brand layout (titles/headers) */
.brand-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}

.brand-vertical .brand-campa {
    font-size: 2.88em;
}

.brand-vertical .brand-technologies {
    font-size: 1.32em;
    margin-top: 0.1em;
}

/* Hero section brand - larger size */
#banner .brand-vertical .brand-campa {
    font-size: 1.8em;
    padding-top: 15px; /* Space between brush mark and text */
}

#banner .brand-vertical .brand-technologies {
    font-size: 0.85em;
    margin-top: 0.15em;
}

/* Dark mode / dark navbar brand colors */
[data-bs-theme="dark"] .brand-campa,
.navbar-dark .brand-campa,
.bg-dark .brand-campa,
.landing-page-header .brand-campa {
    color: #ffffff;
}

/* Keep TECHNOLOGIES gold in all modes */
[data-bs-theme="dark"] .brand-technologies,
.navbar-dark .brand-technologies,
.bg-dark .brand-technologies,
.landing-page-header .brand-technologies {
    color: #ffb132;
}

/* ============================================
   Sidebar Icon Category Colors
   Applied to all navbar states (expanded, collapsed, offcanvas)
   ============================================ */

/* Base icon color rules - applies to sidebar nav-link-icon wrapper */
.nav-link-icon .icon-home { color: var(--icon-home) !important; }
.nav-link-icon .icon-dashboard { color: var(--icon-dashboard) !important; }
.nav-link-icon .icon-crm { color: var(--icon-crm) !important; }
.nav-link-icon .icon-quote-requests { color: var(--icon-quote-requests) !important; }
.nav-link-icon .icon-quotes { color: var(--icon-quotes) !important; }
.nav-link-icon .icon-purchase-orders { color: var(--icon-purchase-orders) !important; }
.nav-link-icon .icon-invoices { color: var(--icon-invoices) !important; }
.nav-link-icon .icon-operations { color: var(--icon-operations) !important; }
.nav-link-icon .icon-users { color: var(--icon-users) !important; }
.nav-link-icon .icon-business-units { color: var(--icon-business-units) !important; }
.nav-link-icon .icon-settings { color: var(--icon-settings) !important; }
.nav-link-icon .icon-templates { color: var(--icon-templates) !important; }

/* Icon colors for dropdown menus (My Projects dropdown, etc.) */
.icon-home { color: var(--icon-home) !important; }
.icon-dashboard { color: var(--icon-dashboard) !important; }
.icon-crm { color: var(--icon-crm) !important; }
.icon-quote-requests { color: var(--icon-quote-requests) !important; }
.icon-quotes { color: var(--icon-quotes) !important; }
.icon-purchase-orders { color: var(--icon-purchase-orders) !important; }
.icon-invoices { color: var(--icon-invoices) !important; }
.icon-operations { color: var(--icon-operations) !important; }
.icon-users { color: var(--icon-users) !important; }
.icon-business-units { color: var(--icon-business-units) !important; }
.icon-settings { color: var(--icon-settings) !important; }
.icon-templates { color: var(--icon-templates) !important; }

/* Ensure colors are consistent across all navbar vertical states */
.navbar-vertical .nav-link-icon .icon-home,
.navbar-vertical-collapsed .nav-link-icon .icon-home { color: var(--icon-home) !important; }
.navbar-vertical .nav-link-icon .icon-dashboard,
.navbar-vertical-collapsed .nav-link-icon .icon-dashboard { color: var(--icon-dashboard) !important; }
.navbar-vertical .nav-link-icon .icon-crm,
.navbar-vertical-collapsed .nav-link-icon .icon-crm { color: var(--icon-crm) !important; }
.navbar-vertical .nav-link-icon .icon-quote-requests,
.navbar-vertical-collapsed .nav-link-icon .icon-quote-requests { color: var(--icon-quote-requests) !important; }
.navbar-vertical .nav-link-icon .icon-quotes,
.navbar-vertical-collapsed .nav-link-icon .icon-quotes { color: var(--icon-quotes) !important; }
.navbar-vertical .nav-link-icon .icon-purchase-orders,
.navbar-vertical-collapsed .nav-link-icon .icon-purchase-orders { color: var(--icon-purchase-orders) !important; }
.navbar-vertical .nav-link-icon .icon-invoices,
.navbar-vertical-collapsed .nav-link-icon .icon-invoices { color: var(--icon-invoices) !important; }
.navbar-vertical .nav-link-icon .icon-operations,
.navbar-vertical-collapsed .nav-link-icon .icon-operations { color: var(--icon-operations) !important; }
.navbar-vertical .nav-link-icon .icon-users,
.navbar-vertical-collapsed .nav-link-icon .icon-users { color: var(--icon-users) !important; }
.navbar-vertical .nav-link-icon .icon-business-units,
.navbar-vertical-collapsed .nav-link-icon .icon-business-units { color: var(--icon-business-units) !important; }
.navbar-vertical .nav-link-icon .icon-settings,
.navbar-vertical-collapsed .nav-link-icon .icon-settings { color: var(--icon-settings) !important; }
.navbar-vertical .nav-link-icon .icon-templates,
.navbar-vertical-collapsed .nav-link-icon .icon-templates { color: var(--icon-templates) !important; }

/* Maintain icon colors on hover/active states */
.navbar-vertical .nav-link:hover .nav-link-icon [class*="icon-"],
.navbar-vertical .nav-link.active .nav-link-icon [class*="icon-"],
.navbar-vertical .nav-link:focus .nav-link-icon [class*="icon-"] {
    opacity: 1;
}

/* ============================================
   Application-Specific Styles
   ============================================ */

/* Page header with title and actions */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 500;
}

/* Status badges with brand colors */
.badge-status-draft {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}
.badge-status-pending {
    background-color: rgba(255, 177, 50, 0.1);
    color: #cc8e29;
}
.badge-status-approved {
    background-color: rgba(76, 175, 80, 0.1);
    color: #3d8b40;
}
.badge-status-rejected {
    background-color: rgba(244, 67, 54, 0.1);
    color: #c62828;
}
.badge-status-active {
    background-color: rgba(0, 80, 239, 0.1);
    color: var(--brand-primary);
}

/* ============================================
   Notification Styles
   ============================================ */

.notification-indicator-primary::before {
    background-color: var(--brand-primary) !important;
}

.notification-item.unread {
    background-color: var(--brand-primary-light);
}

[data-bs-theme="dark"] .notification-item.unread {
    background-color: rgba(61, 126, 255, 0.15);
}

/* ============================================
   Form Enhancements
   ============================================ */

/* Focus states with brand color */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 80, 239, 0.25);
}

/* ============================================
   Button Variants with Brand Colors
   ============================================ */

.btn-brand-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-brand-primary:hover {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #fff;
}

/* ============================================
   RFQ Chat Styles (preserve existing functionality)
   ============================================ */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-message {
    max-width: 80%;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
}

.chat-message.sent {
    background-color: var(--brand-primary);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 0.25rem;
}

.chat-message.received {
    background-color: var(--bs-tertiary-bg, #f0f0f0);
    margin-right: auto;
    border-bottom-left-radius: 0.25rem;
}

[data-bs-theme="dark"] .chat-message.received {
    background-color: var(--bs-tertiary-bg, #1e2130);
}

/* ============================================
   Utility Classes
   ============================================ */

.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.text-purple { color: #7b2cbf !important; }
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-primary-light { background-color: var(--brand-primary-light) !important; }

/* ============================================
   Landing Page Navbar - Always Visible
   ============================================ */

/* Give navbar a solid background for visibility */
.navbar-standard.navbar-dark {
    background-color: #00356d !important;
}

/* Fixed navbar spacing - handled by individual page headers */
main.main {
    padding-top: 0;
}

/* Fix first section spacing for fixed navbar (pages using bg-primary header) */
main.main > section.bg-primary:first-of-type {
    padding-top: 7rem !important; /* Account for fixed navbar (~60px) + extra space */
}

/* Ensure landing page headers start right after navbar */
main.main > .landing-page-header:first-of-type {
    margin-top: 0;
}

/* When scrolled, make it fully solid */
.navbar-standard.navbar-dark.navbar-glass-shadow {
    background-color: #00356d !important;
}

/* Ensure nav links are visible */
.navbar-standard .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-standard .nav-link:hover,
.navbar-standard .nav-link.active {
    color: #ffffff !important;
}

/* Navbar Dropdown Menus */
.navbar-standard .dropdown-menu {
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    min-width: 200px;
}

.navbar-standard .dropdown-item {
    color: #344050;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.navbar-standard .dropdown-item:hover,
.navbar-standard .dropdown-item:focus {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}

.navbar-standard .dropdown-item i {
    width: 20px;
}

.navbar-standard .dropdown-divider {
    margin: 0.25rem 0;
    border-color: #e9ecef;
}

/* Dark mode dropdown */
[data-bs-theme="dark"] .navbar-standard .dropdown-menu {
    background-color: #1e2130;
}

[data-bs-theme="dark"] .navbar-standard .dropdown-item {
    color: #d8e2ef;
}

[data-bs-theme="dark"] .navbar-standard .dropdown-item:hover,
[data-bs-theme="dark"] .navbar-standard .dropdown-item:focus {
    background-color: rgba(0, 80, 239, 0.2);
    color: #fff;
}

[data-bs-theme="dark"] .navbar-standard .dropdown-divider {
    border-color: #3a3f51;
}

/* Dropdown hover fix - CSS-based for stability (desktop only) */
/* All navbar dropdowns use hover behavior for consistency */
@media (min-width: 992px) {
    .navbar-standard .nav-item.dropdown > .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease, margin-top 0.15s ease;
        margin-top: 0.5rem;
        pointer-events: none;
        position: absolute;
        top: 100%;
    }

    .navbar-standard .nav-item.dropdown:hover > .dropdown-menu,
    .navbar-standard .nav-item.dropdown > .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Override data-bs-popper margin to prevent jump on close */
    .navbar-standard .nav-item.dropdown > .dropdown-menu[data-bs-popper] {
        margin-top: 0.5rem;
    }

    /* Ensure icon dropdowns (theme, language, dev) position correctly */
    .navbar-standard .navbar-nav.flex-row .nav-item.dropdown > .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
    }

    /* Bridge the gap between toggle and menu to prevent hover loss */
    .navbar-standard .nav-item.dropdown > .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -0.5rem;  /* Matches the margin-top gap */
        left: 0;
        right: 0;
        height: 0.5rem;
        background: transparent;
    }
}

/* Brand colors on navbar - White on dark background */
.navbar-standard .brand-name {
    color: #ffffff;
}

/* Footer brand name - White on dark background */
.bg-dark .brand-name {
    color: #ffffff;
}

/* ============================================
   Landing Page Components
   ============================================ */

/* Page Header */
.landing-page-header {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
    color: #fff;
    padding: 7rem 0 3rem; /* Extra top padding for fixed navbar */
    text-align: center;
}

.landing-page-header h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #fff !important; /* Ensure white text on dark background */
}

.landing-page-header p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.landing-page-header .breadcrumb {
    justify-content: center;
    margin-bottom: 0;
}

.landing-page-header .breadcrumb-item,
.landing-page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
}

.landing-page-header .breadcrumb-item.active {
    color: #fff;
}

.landing-page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

/* Page Header Color Variants */
.landing-page-header-primary {
    background: linear-gradient(135deg, #00356d 0%, #0050EF 100%);
}

.landing-page-header-info {
    background: linear-gradient(135deg, #006d6b 0%, #00ABA9 100%);
}

.landing-page-header-success {
    background: linear-gradient(135deg, #2d6a30 0%, #4CAF50 100%);
}

.landing-page-header-secondary {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.landing-page-header-warning {
    background: linear-gradient(135deg, #cc8000 0%, #ffb132 100%);
}

.landing-page-header-danger {
    background: linear-gradient(135deg, #a82727 0%, #dc3545 100%);
}

.landing-page-header-purple {
    background: linear-gradient(135deg, #4a1d6a 0%, #7b2cbf 100%);
}

/* Landing Sections */
.landing-section {
    padding: 4rem 0;
}

.landing-section-gray {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

[data-bs-theme="dark"] .landing-section-gray {
    background-color: var(--bs-tertiary-bg, #1e2130);
}

.landing-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--brand-primary-dark);
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .landing-section-title {
    color: #fff;
}

.landing-section-subtitle {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Portfolio Cards */
.landing-portfolio-card {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--campa-surface);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    min-height: 200px;
}

.landing-portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.landing-portfolio-card .portfolio-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, #f8f9fa 100%);
    font-size: 3rem;
    color: var(--brand-primary);
}

[data-bs-theme="dark"] .landing-portfolio-card .portfolio-image {
    background: linear-gradient(135deg, rgba(0, 80, 239, 0.2) 0%, rgba(30, 33, 48, 0.8) 100%);
}

.landing-portfolio-card .portfolio-overlay {
    padding: 1.25rem;
}

.landing-portfolio-card .portfolio-overlay h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--brand-primary-dark);
}

[data-bs-theme="dark"] .landing-portfolio-card .portfolio-overlay h5 {
    color: #fff;
}

.landing-portfolio-card .portfolio-overlay p {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0;
}

/* Portfolio Card Color Variants */
.landing-portfolio-card.portfolio-primary .portfolio-image {
    background: linear-gradient(135deg, #e8f4ff 0%, #cce5ff 100%);
    color: #0050EF;
}

.landing-portfolio-card.portfolio-warning .portfolio-image {
    background: linear-gradient(135deg, #fff8e8 0%, #ffe8b3 100%);
    color: #cc8e29;
}

.landing-portfolio-card.portfolio-success .portfolio-image {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #3d8b40;
}

.landing-portfolio-card.portfolio-info .portfolio-image {
    background: linear-gradient(135deg, #e0f7f7 0%, #b2ebeb 100%);
    color: #00908e;
}

.landing-portfolio-card.portfolio-danger .portfolio-image {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
}

.landing-portfolio-card.portfolio-secondary .portfolio-image {
    background: linear-gradient(135deg, #e8eaf0 0%, #cfd2db 100%);
    color: #495057;
}

/* Portfolio card overlay title colors */
.landing-portfolio-card.portfolio-primary .portfolio-overlay h5 { color: #0050EF; }
.landing-portfolio-card.portfolio-warning .portfolio-overlay h5 { color: #cc8e29; }
.landing-portfolio-card.portfolio-success .portfolio-overlay h5 { color: #3d8b40; }
.landing-portfolio-card.portfolio-info .portfolio-overlay h5 { color: #00908e; }
.landing-portfolio-card.portfolio-danger .portfolio-overlay h5 { color: #c62828; }
.landing-portfolio-card.portfolio-secondary .portfolio-overlay h5 { color: #495057; }

/* Dark mode portfolio card variants */
[data-bs-theme="dark"] .landing-portfolio-card.portfolio-primary .portfolio-image {
    background: linear-gradient(135deg, rgba(0, 80, 239, 0.3) 0%, rgba(0, 80, 239, 0.15) 100%);
    color: #5a9bff;
}

[data-bs-theme="dark"] .landing-portfolio-card.portfolio-warning .portfolio-image {
    background: linear-gradient(135deg, rgba(255, 177, 50, 0.3) 0%, rgba(255, 177, 50, 0.15) 100%);
    color: #ffb132;
}

[data-bs-theme="dark"] .landing-portfolio-card.portfolio-success .portfolio-image {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(76, 175, 80, 0.15) 100%);
    color: #6fbf73;
}

[data-bs-theme="dark"] .landing-portfolio-card.portfolio-info .portfolio-image {
    background: linear-gradient(135deg, rgba(0, 171, 169, 0.3) 0%, rgba(0, 171, 169, 0.15) 100%);
    color: #00d4d2;
}

[data-bs-theme="dark"] .landing-portfolio-card.portfolio-danger .portfolio-image {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.3) 0%, rgba(244, 67, 54, 0.15) 100%);
    color: #f77066;
}

[data-bs-theme="dark"] .landing-portfolio-card.portfolio-secondary .portfolio-image {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.3) 0%, rgba(108, 117, 125, 0.15) 100%);
    color: #a0a8b0;
}

[data-bs-theme="dark"] .landing-portfolio-card .portfolio-overlay h5 {
    color: #fff;
}

/* Stats Section */
.landing-stats {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    padding: 3rem 0;
    color: #fff;
}

.landing-stat-item {
    text-align: center;
    padding: 1rem;
}

.landing-stat-item .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.landing-stat-item .stat-label {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

/* Service Cards */
.landing-service-card {
    background: var(--campa-surface);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--bs-border-color, #e9ecef);
}

.landing-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* CTA Section */
.landing-cta {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
    padding: 4rem 0;
    text-align: center;
    color: #fff;
}

.landing-cta h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.landing-cta p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

/* Category Tabs */
.landing-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.landing-category-tabs .tab-btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--brand-primary);
    border-radius: 2rem;
    background: transparent;
    color: var(--brand-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.landing-category-tabs .tab-btn:hover,
.landing-category-tabs .tab-btn.active {
    background: var(--brand-primary);
    color: #fff;
}

/* FAQ Accordion Spacing Fix */
.landing-section .accordion {
    margin-top: 0;
}

/* Hero Section Adjustments */
.landing-hero {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
    padding: 7rem 0 4rem; /* Extra top padding for fixed navbar */
    color: #fff;
}

/* Product Cards */
.landing-product-card {
    background: var(--campa-surface);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.landing-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Feature Cards */
.landing-feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--campa-surface);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    height: 100%;
}

.landing-feature-card .feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: var(--brand-primary-light);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--brand-primary);
}

[data-bs-theme="dark"] .landing-feature-card .feature-icon {
    background: rgba(0, 80, 239, 0.2);
}

/* Trust/Why Us Cards */
.landing-trust-card {
    text-align: center;
    padding: 1.5rem;
    background: var(--campa-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color, #e9ecef);
    height: 100%;
}

.landing-trust-card .trust-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: var(--brand-primary-light);
    border-radius: 0.5rem;
    color: var(--brand-primary);
}

[data-bs-theme="dark"] .landing-trust-card .trust-icon {
    background: rgba(0, 80, 239, 0.2);
}

/* News Cards */
.landing-news-card {
    background: var(--campa-surface);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    height: 100%;
}

.landing-news-card .news-image {
    height: 180px;
    background: var(--brand-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--brand-primary);
}

.landing-news-card .news-content,
.landing-news-card .news-body {
    padding: 1.25rem;
}

/* Contact Form Card */
.landing-contact-card {
    background: var(--campa-surface);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Vision/Mission Cards */
.landing-vision-card {
    text-align: center;
    padding: 2rem;
    background: var(--brand-primary-light);
    border-radius: 0.5rem;
    height: 100%;
}

[data-bs-theme="dark"] .landing-vision-card {
    background: rgba(0, 80, 239, 0.15);
}

.landing-vision-card .vision-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: var(--brand-primary);
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
}

/* ============================================
   Footer Spacing Fix
   ============================================ */

/* Remove gap between last content section and footer */
main.main > section:last-of-type {
    margin-bottom: 0;
}

/* Ensure footer has no top margin */
main.main > section.bg-dark {
    margin-top: 0;
}

/* Remove any padding/margin that might cause gap */
main.main {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Fix footer overlapping content - ensure footer is not fixed/sticky */
.footer {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure buttons and form elements are clickable above footer */
.btn, button, input, select, textarea, a {
    position: relative;
    z-index: 2;
}

/* Ensure cards and forms are above footer */
.card, form {
    position: relative;
    z-index: 2;
}

/* ============================================
   Navbar Vertical Alignment Fixes
   ============================================ */

/* Landing navbar - ensure all items align vertically */
.navbar-standard .navbar-nav {
    align-items: center !important;
}

.navbar-standard .navbar-nav > .nav-item {
    display: flex;
    align-items: center;
}

.navbar-standard .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-standard .navbar-nav .btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    line-height: 1;
}

/* Ensure dropdown toggles align with other nav items */
.navbar-standard .navbar-nav .dropdown-toggle {
    display: flex;
    align-items: center;
}

/* Brand logo alignment */
.navbar-standard .navbar-brand,
.navbar-top .navbar-brand {
    display: flex;
    align-items: center;
}

/* Top navbar (app) - ensure all items align vertically */
.navbar-top .navbar-nav-icons {
    align-items: center !important;
}

.navbar-top .navbar-nav-icons > .nav-item {
    display: flex;
    align-items: center;
}

.navbar-top .navbar-nav-icons .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Fix notification bell icon size - was too large */
.navbar-top .nav-link .fa-bell {
    font-size: 1rem !important;
}

/* Fix avatar alignment in user dropdown */
.navbar-top .navbar-nav-icons .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure buttons in navbar align properly */
.navbar-top .navbar-nav-icons .btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    line-height: 1;
    margin-left: 4px;
}

/* Reduce gap between navbar icon items */
.navbar-top .navbar-nav-icons {
    gap: 0 !important;
}

/* Theme toggle icons - consistent sizing */
.navbar-top .theme-control-toggle .fas,
.navbar-standard .theme-control-toggle .fas {
    font-size: 1rem;
    line-height: 1;
}

/* Globe icon consistent sizing */
.navbar-top .fa-globe,
.navbar-standard .fa-globe {
    font-size: 1rem;
    line-height: 1;
}

/* Fix dropdown toggle floating issue - keep position stable when dropdown is open */
.navbar-top .nav-item.dropdown {
    position: relative;
    display: flex !important;
    align-items: center !important;
}

.navbar-top .nav-item.dropdown .nav-link {
    position: relative !important;
    transform: none !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure dropdown toggle stays in place when shown */
.navbar-top .nav-item.dropdown.show .nav-link,
.navbar-top .nav-item.dropdown .nav-link[aria-expanded="true"] {
    transform: none !important;
    position: relative !important;
}

/* Dropdown menu positioning */
.navbar-top .nav-item.dropdown .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
}

/* Remove the floating caret that causes misalignment */
.navbar-top .dropdown-caret::after,
.navbar-top .dropdown-caret::before,
.navbar-top .dropdown-caret-bg::before {
    display: none !important;
}

/* ============================================
   Non-authenticated page layout fixes
   ============================================ */

/* Reduce gap between navbar and content for non-auth pages */
nav.navbar-top + main[role="main"] {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
}

/* Login/Identity card - center vertically with less top gap */
nav.navbar-top + main[role="main"] > .row {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
}

/* Fix section padding inside cards (the global section rule adds 4rem) */
.card-body section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 991.98px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Keep brand and hamburger on same row - brand shrinks/clips */
    .navbar-standard .navbar-brand {
        flex-shrink: 1 !important;
        min-width: 0;
        overflow: hidden !important;
        max-width: calc(100% - 80px) !important;
    }

    .navbar-standard .navbar-toggler {
        flex-shrink: 0;
    }

    /* Mobile navbar hamburger toggle - keep it visible on the dark bar */
    .navbar-standard .navbar-toggler {
        padding: 0.25rem 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 0.375rem;
    }

    .navbar-standard .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M0 6h30M0 14h30M0 22h30'/%3E%3C/svg%3E");
    }

    /* Mobile navbar dropdown background */
    .navbar-standard .navbar-collapse {
        background-color: #00356d;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
    }

    /* Mobile collapsed menu: all nav items full-width and vertical */
    .navbar-standard .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }

    .navbar-standard .navbar-collapse .navbar-nav .nav-item {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Remove left margins on mobile nav items */
    .navbar-standard .navbar-collapse .navbar-nav .nav-item.ms-2 {
        margin-left: 0 !important;
    }

    .navbar-standard .navbar-collapse .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
        width: 100%;
    }

    /* Right-side utility nav: stack vertically with separator */
    .navbar-standard .navbar-collapse .navbar-nav.flex-row {
        align-items: stretch !important;
        gap: 0.25rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Dropdown menus inside collapsed nav: display inline, not absolute */
    .navbar-standard .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.08);
        border: none;
        box-shadow: none;
        border-radius: 0.375rem;
        padding: 0.25rem 0;
        margin-top: 0.25rem;
    }

    .navbar-standard .navbar-collapse .dropdown-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.85);
        padding: 0.4rem 1.25rem;
    }

    .navbar-standard .navbar-collapse .dropdown-menu .dropdown-item:hover,
    .navbar-standard .navbar-collapse .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .navbar-standard .navbar-collapse .dropdown-menu .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .navbar-standard .navbar-collapse .dropdown-menu .dropdown-header {
        color: rgba(255, 255, 255, 0.5);
    }

    /* Reset colors for dropdown items inside light-background containers (user dropdown, theme switcher) */
    .navbar-standard .navbar-collapse .dropdown-menu .bg-white .dropdown-item,
    .navbar-standard .navbar-collapse .dropdown-menu .bg-white .dropdown-header {
        color: var(--bs-body-color);
    }

    .navbar-standard .navbar-collapse .dropdown-menu .bg-white .dropdown-item:hover,
    .navbar-standard .navbar-collapse .dropdown-menu .bg-white .dropdown-item:focus {
        background-color: revert;
        color: #fff;
    }

    .navbar-standard .navbar-collapse .dropdown-menu .bg-white .dropdown-divider {
        border-color: revert;
    }

    /* Mobile: show My Projects + Login first, before theme/language */
    .navbar-standard .navbar-collapse .navbar-nav .nav-item-projects { order: -2; }
    .navbar-standard .navbar-collapse .navbar-nav .nav-item-login { order: -1; }

    /* Buttons (My Projects, Login) go full-width on mobile */
    .navbar-standard .navbar-collapse .btn {
        width: 100%;
        text-align: left;
    }

    /* Landing page responsive */
    .landing-page-header {
        padding: 5rem 0 2rem;
    }

    .landing-page-header h1 {
        font-size: 1.75rem;
    }

    .landing-section {
        padding: 3rem 0;
    }

    .landing-section-title {
        font-size: 1.5rem;
    }

    .landing-stats {
        padding: 2rem 0;
    }

    .landing-stat-item .stat-number {
        font-size: 1.75rem;
    }

    .landing-cta {
        padding: 3rem 0;
    }

    .landing-cta h2 {
        font-size: 1.5rem;
    }

    .landing-category-tabs {
        justify-content: center;
    }
}

/* ============================================
   Product Detail Page - Gallery & Cards
   ============================================ */

/* Gallery image hover effect */
.gallery-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.gallery-image {
    transition: opacity 0.3s ease;
}

.gallery-image:hover {
    opacity: 0.9;
}

/* Related product cards */
.related-product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Lightbox modal styling */
#imageModal .modal-content {
    background: transparent !important;
}

#imageModal .modal-body img {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

/* ============================================
   Portfolio Product Cards
   ============================================ */

.portfolio-product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.portfolio-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
}

.portfolio-product-image {
    height: 200px;
    overflow: hidden;
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-product-card:hover .portfolio-product-image img {
    transform: scale(1.05);
}

.portfolio-product-image .placeholder-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 100%);
}

.portfolio-product-image .placeholder-icon i {
    font-size: 4rem;
    color: var(--bs-secondary-color);
    opacity: 0.3;
}

/* ============================================
   Portfolio Gallery
   ============================================ */

.portfolio-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    height: 100%;
}

.portfolio-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.col-md-8 .portfolio-gallery-item img {
    height: 415px;
}

.portfolio-gallery-item-tall img {
    height: 415px !important;
}

.portfolio-gallery-item .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.portfolio-gallery-item:hover img {
    transform: scale(1.05);
}

.portfolio-gallery-item .gallery-zoom-icon {
    color: white;
    font-size: 2rem;
    margin-top: 0.5rem;
}

.portfolio-gallery-item .badge {
    font-size: 0.75rem;
    padding: 0.5em 1em;
}

/* Gallery modal styling */
#galleryModal .modal-content {
    background: transparent !important;
}

#galleryModal .modal-body img {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

/* Quote details page - More Actions dropdown overlay */
.card:has(.card-header .dropdown-menu.show) {
    z-index: 10;
    position: relative;
}

.card-header .dropdown-menu {
    z-index: 9999;
}

/* Admin hub card hover effect */
.hover-shadow {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-shadow:hover {
    transform: translateY(-3px);
}

/* ============================================
   Data table readability
   Table body text reads at full contrast; cost/amount columns stay muted on purpose
   (.text-400 is left untouched).
   ============================================ */

/* Un-classed body cells */
.table > tbody > tr > td {
    color: var(--bs-emphasis-color);
}

/* Explicit mid-gray utility classes inside table bodies */
.table > tbody .text-500,
.table > tbody .text-600,
.table > tbody .text-700,
.table > tbody .text-800 {
    color: var(--bs-emphasis-color) !important;
}

/* ============================================
   Project codename (<project-codename />)
   The emoji is drawn at 1.5x the surrounding text, so it scales with tables, breadcrumbs and
   headers alike; the word ("Zorro") on the project header keeps the text size.
   ============================================ */
.project-codename-emoji {
    font-size: 1.5em;
    line-height: 1;
    vertical-align: -0.12em;
}

/* ============================================
   App components
   ============================================ */
.branding-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 1rem;
}

/* Right-aligned variant for document headers */
.branding-row .brand-vertical {
    align-items: flex-end;
}

/* -------------------------------------------------------------------------- */
/*                           Collapsible Sections                             */
/* -------------------------------------------------------------------------- */
/* Chevron rotation for collapsible card sections */
.collapse-chevron {
    transition: transform 0.2s ease-in-out;
}
[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}

/* -------------------------------------------------------------------------- */
/*                  Readable Document Number (Quotes/Invoices/Packing Slips)  */
/* -------------------------------------------------------------------------- */
.doc-number-readable {
    font-family: "Cascadia Mono", "Cascadia Code", "Consolas", ui-monospace, "SF Mono", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.doc-number-readable .dn-letters {
    font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/*                Markdown content (Quote line item descriptions)             */
/* -------------------------------------------------------------------------- */
.markdown-content > :first-child {
    margin-top: 0;
}
.markdown-content > :last-child {
    margin-bottom: 0;
}
.markdown-content p {
    margin-bottom: 0.25rem;
}
.markdown-content ul,
.markdown-content ol {
    margin-bottom: 0.25rem;
    padding-left: 1.25rem;
}
.markdown-content code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.25rem;
    border-radius: 0.2rem;
    font-size: 0.9em;
}
.markdown-content pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    overflow-x: auto;
}
.markdown-content blockquote {
    border-left: 3px solid var(--falcon-border-color, #d8e2ef);
    padding-left: 0.5rem;
    margin: 0.25rem 0;
    color: var(--falcon-secondary-color, #6c757d);
}

/* ============================================
   Falcon names used by the pages, redefined on Bootstrap
   ============================================ */
.fs-11 { font-size: 0.6944rem !important; }
.fs-10 { font-size: 0.8333rem !important; }
.fs-9 { font-size: 1rem !important; }
.fs-8 { font-size: 1.2rem !important; }
.fs-7 { font-size: 1.44rem !important; }
.fs-6 { font-size: 1.728rem !important; }
.fs-5 { font-size: 2.0736rem !important; }
.fs-4 { font-size: 2.48832rem !important; }
.fs-3 { font-size: 2.985984rem !important; }
.fs-2 { font-size: 3.5831808rem !important; }
.fs-1 { font-size: 4.29981696rem !important; }
.text-100, .text-200, .text-300, .text-400 { color: var(--bs-tertiary-color) !important; }
.text-500, .text-600 { color: var(--bs-secondary-color) !important; }
.text-700, .text-800 { color: var(--bs-body-color) !important; }
.text-900, .text-1000, .text-1100 { color: var(--bs-emphasis-color) !important; }
.bg-100 { background-color: var(--bs-tertiary-bg) !important; }
.bg-200 { background-color: var(--bs-secondary-bg) !important; }
.border-200 { border-color: var(--bs-border-color) !important; }
.white-space-nowrap { white-space: nowrap !important; }
.fw-semi-bold { font-weight: 600 !important; }
.flex-between-center { justify-content: space-between; align-items: center; }
.flex-center { justify-content: center; align-items: center; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.opacity-85 { opacity: 0.85 !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.mt-6 { margin-top: 4rem !important; }
.pb-7 { padding-bottom: 5rem !important; }
.pt-8 { padding-top: 7.5rem !important; }
.fa-icon-wait { opacity: 0; }
.fontawesome-i2svg-active .fa-icon-wait { opacity: 1; }
@media (min-width: 768px) {
    .fs-md-5 { font-size: 2.0736rem !important; }
    .border-end-md { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
}
@media (min-width: 992px) {
    .pt-lg-9 { padding-top: 10rem !important; }
    .pb-lg-9 { padding-bottom: 10rem !important; }
}
@media (min-width: 1200px) {
    .pb-xl-9 { padding-bottom: 10rem !important; }
}
section { position: relative; padding-top: 4rem; padding-bottom: 4rem; }

:root, [data-bs-theme] {
    --falcon-100: var(--bs-tertiary-bg);
    --falcon-200: var(--bs-tertiary-bg);
    --falcon-600: var(--bs-secondary-color);
    --falcon-700: var(--bs-body-color);
    --falcon-900: var(--bs-emphasis-color);
    --falcon-body-bg: var(--bs-body-bg);
    --falcon-body-color: var(--bs-body-color);
    --falcon-body-highlight-color: #fff;
    --falcon-body-tertiary-bg: var(--bs-tertiary-bg);
    --falcon-tertiary-bg: var(--bs-tertiary-bg);
    --falcon-border-color: var(--bs-border-color);
    --falcon-card-bg: var(--campa-surface);
    --falcon-emphasis-color: var(--bs-emphasis-color);
    --falcon-font-monospace: var(--bs-font-monospace);
    --falcon-text-600: var(--bs-secondary-color);
    --falcon-secondary-color: var(--bs-secondary-color);
    --falcon-gray-300-rgb: var(--bs-secondary-bg-rgb);
    --falcon-danger: var(--bs-danger);
    --falcon-info: var(--bs-info);
    --falcon-success: var(--bs-success);
    --falcon-warning: var(--bs-warning);
    --falcon-primary: var(--bs-primary);
    --falcon-primary-rgb: var(--bs-primary-rgb);
    --falcon-secondary: var(--bs-secondary);
    --falcon-secondary-rgb: var(--bs-secondary-rgb);
    --falcon-primary-bg-subtle: var(--bs-primary-bg-subtle);
    --falcon-warning-bg-subtle: var(--bs-warning-bg-subtle);
    --falcon-gray-100: var(--bs-tertiary-bg);
    --falcon-gray-100-rgb: var(--bs-tertiary-bg-rgb);
    --falcon-gray-200: var(--bs-secondary-bg);
    --falcon-gray-300: var(--bs-border-color);
    --falcon-gray-400: var(--bs-tertiary-color);
    --falcon-gray-500: var(--bs-secondary-color);
    --falcon-gray-600: var(--bs-secondary-color);
    --falcon-gray-700: var(--bs-body-color);
    --falcon-gray-800: var(--bs-body-color);
    --falcon-gray-900: var(--bs-emphasis-color);
    /* Read by Falcon's theme.js: the landing navbar on scroll and the charts. */
    --falcon-gray-1000: var(--bs-emphasis-color);
    --falcon-gray-1100: var(--bs-emphasis-color);
    --falcon-dark: var(--bs-dark);
    --falcon-light: var(--bs-light);
    --falcon-white: #fff;
    --falcon-black: #000;
    --falcon-gray-1000-rgb: var(--bs-emphasis-color-rgb);
}

/* Tokens each theme may set */
:root, [data-bs-theme] {
    --campa-surface: var(--bs-body-bg);
    --shell-top-height: 3.6rem;
    --shell-sidebar-width: 15rem;
    --shell-sidebar-collapsed: 4.2rem;
    --shell-sidebar-bg: transparent;
    --shell-sidebar-border: 0;
    --shell-top-bg: var(--bs-body-bg);
    --shell-top-border: 0;
    --timeline-line: var(--bs-border-color);
}

/* ============================================
   Bootstrap compiles its palette into components: point them back at the tokens
   ============================================ */
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); }
.btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); }
.btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); }
.btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); }
.btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); }
.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); }
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-active-color: var(--bs-link-hover-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); }
.accordion { --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-active-bg: var(--bs-primary-bg-subtle); }

/* ============================================
   Falcon components, redefined on Bootstrap
   ============================================ */
.badge-subtle-primary { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); }
.badge-subtle-secondary { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); }
.badge-subtle-success { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); }
.badge-subtle-danger { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); }
.badge-subtle-warning { color: var(--bs-warning-text-emphasis); background-color: var(--bs-warning-bg-subtle); }
.badge-subtle-info { color: var(--bs-info-text-emphasis); background-color: var(--bs-info-bg-subtle); }
.badge-subtle-light { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); }
.badge-subtle-dark { color: var(--bs-emphasis-color); background-color: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .dark__bg-1000 { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--campa-surface) !important; }
[data-bs-theme="dark"] .dropdown-menu .bg-white { background-color: transparent !important; }
.sticky-sidebar { position: sticky; z-index: 1015; top: calc(var(--shell-top-height) + 1rem); }
.sort { cursor: pointer; white-space: nowrap; }
.dropdown-menu-card { padding: 0; }
.dropdown-menu-card .card { border: 0; }
.dropdown-menu-notification { min-width: 20rem; }
.card-notification { min-width: 20rem; }
.scrollbar-overlay { overflow: auto; }
.notification-time { margin-bottom: 0; color: var(--bs-secondary-color); font-size: 0.8333rem; }
.notification-body { margin-bottom: 0.25rem; }
.notification-unread { background-color: var(--brand-primary-light) !important; }
.notification-indicator { position: relative; }
.notification-indicator::before { position: absolute; content: ""; right: 0.125rem; top: 0.5rem; height: 0.75rem; width: 0.75rem; border-radius: 50%; }
.dropdown-item:not(.active) .dropdown-check-icon { display: none; }

.avatar { position: relative; display: inline-block; }
.avatar-s { width: 1.25rem; height: 1.25rem; }
.avatar-xl { width: 2rem; height: 2rem; }
.avatar img, .avatar .avatar-name { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar .avatar-name { position: absolute; text-align: center; text-transform: uppercase; font-weight: 700; color: #fff; background-color: var(--bs-primary); }
.avatar .avatar-name > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.avatar-s .avatar-name { font-size: 0.5rem; }
.avatar-xl .avatar-name { font-size: 0.75rem; }
.icon-item { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--bs-body-color); background-color: var(--campa-surface); }
.icon-item.icon-item-sm { width: 1.875rem; height: 1.875rem; }
.icon-item.icon-item-lg { width: 2.75rem; height: 2.75rem; }
.card-span { margin-top: 2.5rem; }
.card-span .card-span-img { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; background: var(--campa-surface); }

.timeline-vertical { position: relative; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.timeline-vertical .timeline-item { position: relative; padding-left: 1.8rem; }
.timeline-vertical .timeline-item:not(:first-child) { margin-top: 2.5rem; }
.timeline-vertical .timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 1.25rem; top: 0; height: calc(100% + 2.5rem); width: 2px; background: var(--timeline-line); }
.timeline-vertical .timeline-icon { position: absolute; left: 0; top: 0; z-index: 2; color: #fff; }
.timeline-vertical .timeline-item-content { position: relative; margin-left: 1.25rem; z-index: 1; }
.timeline-vertical .timeline-item-card { padding: 1rem 1.25rem; background: var(--campa-surface); }
.timeline-vertical .timeline-item-time { margin-top: 0.25rem; padding-left: 2.25rem; }
@media (min-width: 992px) {
    .timeline-vertical .timeline-item { padding-left: 0; }
    .timeline-vertical .timeline-item:not(:last-child)::before { left: 50%; transform: translateX(-50%); }
    .timeline-vertical .timeline-icon { left: 50%; transform: translateX(-50%); }
    .timeline-vertical .timeline-item-start .timeline-item-time:first-child { order: 1; padding-left: 2.5rem; }
    .timeline-vertical .timeline-item-start .timeline-item-content { margin-left: 0; margin-right: 2.25rem; }
    .timeline-vertical .timeline-item-end .timeline-item-time:first-child { display: flex; justify-content: flex-end; padding-left: 0; padding-right: 2.5rem; }
    .timeline-vertical .timeline-item-end .timeline-item-content { margin-left: 2.25rem; }
}
.timeline-simple { position: relative; }
.timeline-simple .timeline-item { position: relative; padding-left: 0; }
.timeline-simple .timeline-item .timeline-item-date { width: 3.4375rem; }
.timeline-simple .timeline-item:not(:last-child)::before { content: ""; position: absolute; border-left: 2px dashed var(--timeline-line); height: calc(100% + 3rem); left: 4.9rem; top: 1.25rem; }

/* ============================================
   App shell
   ============================================ */
/* Falcon's table edges: a table inside a card doesn't touch the card's border. */
th { font-weight: 600; }
.table tr th:first-child, .table tr td:first-child { padding-left: 1.25rem; }
.table tr th:last-child, .table tr td:last-child { padding-right: 1.25rem; }
.scrollbar { overflow: auto; }
/* An expanded top navbar must not scroll, or it clips its own dropdown menus. */
@media (min-width: 992px) {
    .navbar.navbar-expand-lg:not(.navbar-vertical) .navbar-collapse { overflow: visible !important; }
}
.container[data-layout] { max-width: none; padding-left: 0; padding-right: 0; }
.content { padding: 0 1.25rem 1.5rem; min-height: 100vh; display: flex; flex-direction: column; }
.content > .footer { margin-top: auto; }
.navbar-top {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin: 0 -1.25rem 1.25rem;
    padding: 0.45rem 1.25rem;
    min-height: var(--shell-top-height);
    background: var(--shell-top-bg);
    border-bottom: var(--shell-top-border);
}
.container > .navbar-top { margin: 0 0 1.25rem; }
.navbar-toggle-icon { position: relative; display: block; width: 1.25rem; height: 3px; }
.toggle-line, .toggle-line::before, .toggle-line::after { position: absolute; display: block; width: 1.25rem; height: 3px; background: currentColor; content: ""; }
.toggle-line::before { top: -6px; }
.toggle-line::after { top: 6px; }
.navbar-toggler-humburger-icon { padding: 0.5rem; border: 0; background: transparent; }
.navbar-vertical { --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0; z-index: 1030; }
.nav-link-icon { display: inline-flex; width: 1.5rem; justify-content: center; flex-shrink: 0; }
.navbar-vertical-label-wrapper { --bs-gutter-x: 0.75rem; margin-left: 0; margin-right: 0; }
.navbar-vertical .navbar-brand { margin: 0; }
@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: var(--shell-sidebar-width);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        background: var(--shell-sidebar-bg);
        border-right: var(--shell-sidebar-border);
    }
    .navbar-vertical > .d-flex { flex-shrink: 0; min-height: var(--shell-top-height); padding: 0 0.5rem; }
    .navbar-vertical .navbar-collapse { display: block !important; flex: 1 1 auto; min-height: 0; }
    .navbar-vertical .navbar-vertical-content { height: 100%; padding: 0.6rem; }
    .content { margin-left: var(--shell-sidebar-width); }
    .navbar-top > .navbar-toggler, .navbar-top > .navbar-brand { display: none; }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl { width: var(--shell-sidebar-collapsed); }
    .navbar-vertical-collapsed .content { margin-left: var(--shell-sidebar-collapsed); }
    .navbar-vertical-collapsed .navbar-vertical .navbar-brand { display: none; }
    .navbar-vertical-collapsed .navbar-vertical .nav-link-text,
    .navbar-vertical-collapsed .navbar-vertical-label { display: none; }
    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl { width: var(--shell-sidebar-width); }
    .navbar-vertical-collapsed-hover .navbar-vertical .navbar-brand { display: inline-block; }
    .navbar-vertical-collapsed-hover .navbar-vertical .nav-link-text,
    .navbar-vertical-collapsed-hover .navbar-vertical-label { display: inline; }
}
@media (max-width: 1199.98px) {
    .navbar-vertical.navbar-expand-xl { position: fixed; top: var(--shell-top-height); left: 0; right: 0; padding: 0; background: transparent; }
    .navbar-top.navbar-expand .navbar-toggler { display: block; }
    .navbar-vertical > .d-flex { display: none !important; }
    .navbar-vertical .navbar-collapse { background: var(--campa-surface); border-bottom: var(--shell-sidebar-border); }
    .navbar-vertical .navbar-vertical-content { max-height: calc(100vh - var(--shell-top-height)); padding: 0.6rem; }
}

/* Long text and button rows must not push the page wider than the phone */
.min-width-0 { min-width: 0; }
@media (max-width: 575.98px) {
    .card-header .d-flex:has(> .btn, > .dropdown) { flex-wrap: wrap; }
    /* Top-bar menus span the phone instead of hanging off the edge of their icon */
    .navbar-top .nav-item.dropdown { position: static; }
    .navbar-top .nav-item.dropdown .dropdown-menu { left: 0.5rem !important; right: 0.5rem !important; min-width: 0 !important; }
    .dropdown-menu-notification, .card-notification { min-width: 0; }
}

/* Table row menu on a phone: a sheet at the bottom of the screen, so it never pushes the page sideways.
   A .card stacks in Pixel, so the open one rises above the next card or that card takes the taps. */
@media (max-width: 991.98px) {
    .table-responsive .dropdown-menu.show { position: fixed !important; inset: auto 0.5rem 0.5rem 0.5rem !important; transform: none !important; max-height: 70vh; overflow-y: auto; z-index: 1080; }
    .card:has(.table-responsive .dropdown-menu.show) { z-index: 1080; }
}
@media (max-width: 575.98px) {
    .btn-group:not(.dv-toolbar .btn-group) { max-width: 100%; flex-wrap: wrap; }
    .badge { max-width: 100%; white-space: normal; }
}
/* Falcon's xxl starts at 1540px, Bootstrap's at 1400px */
@media (min-width: 1400px) and (max-width: 1539.98px) {
    .d-none.d-xxl-inline { display: none !important; }
}
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Classes that stayed light (or dark) in dark mode */
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .text-dark:not([class*="bg-"]) { color: var(--bs-emphasis-color) !important; }
[data-bs-theme="dark"] .text-purple { color: #c49bff !important; }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: #2a2f36; --bs-table-color: #fff; }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: #311a0c; --bs-table-color: #fff; }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: #2e0b11; --bs-table-color: #fff; }
[data-bs-theme="dark"] .table-success { --bs-table-bg: #00311c; --bs-table-color: #fff; }
[data-bs-theme="dark"] .table-info { --bs-table-bg: #082633; --bs-table-color: #fff; }
[data-bs-theme="dark"] .table-primary { --bs-table-bg: #001a4d; --bs-table-color: #fff; }

/* Tabulator's stylesheet is light only */
[data-bs-theme="dark"] .tabulator,
[data-bs-theme="dark"] .tabulator .tabulator-header,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
[data-bs-theme="dark"] .tabulator .tabulator-tableholder,
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table,
[data-bs-theme="dark"] .tabulator-row,
[data-bs-theme="dark"] .tabulator .tabulator-footer { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .tabulator-row.tabulator-row-even,
[data-bs-theme="dark"] .tabulator-row .tabulator-cell.tabulator-frozen { background-color: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { color: var(--bs-secondary-color); }

/* The search box hint, and text on a colored header or the dark landing footer */
.btn kbd { color: var(--bs-body-bg) !important; background-color: var(--bs-secondary-color) !important; opacity: 1; }
.card-header.text-white h1, .card-header.text-white h2, .card-header.text-white h3,
.card-header.text-white h4, .card-header.text-white h5, .card-header.text-white h6 { color: inherit; }
section.bg-dark a.text-primary, section.bg-dark .text-primary { color: #8cb4ff !important; }

/* Avatars with initials: Falcon never defined these, so the letters took the color of the circle */
.bg-soft-primary { background-color: var(--bs-primary-bg-subtle) !important; }
.bg-soft-secondary { background-color: var(--bs-secondary-bg-subtle) !important; }
.bg-soft-success { background-color: var(--bs-success-bg-subtle) !important; }
.bg-soft-info { background-color: var(--bs-info-bg-subtle) !important; }
.bg-soft-warning { background-color: var(--bs-warning-bg-subtle) !important; }
.bg-soft-danger { background-color: var(--bs-danger-bg-subtle) !important; }
[data-bs-theme="dark"] .bg-light.text-dark { color: var(--bs-emphasis-color) !important; }
[data-bs-theme="dark"] .tabulator-row.tabulator-calcs, [data-bs-theme="dark"] .tabulator-row.tabulator-calcs .tabulator-cell { background-color: var(--bs-secondary-bg) !important; }
@media (max-width: 575.98px) {
    .card-header.d-flex.justify-content-between { flex-wrap: wrap; gap: 0.5rem; }
}
/* Bootstrap fixes this label's color, which can't be read in dark mode */
.form-floating > :disabled ~ label, .form-floating > .form-control:disabled ~ label { color: var(--bs-secondary-color); }
/* Falcon drew this one gray; the brand teal is too faint on white */
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-secondary-color); }
.avatar .avatar-name { display: flex; align-items: center; justify-content: center; line-height: 1; }
.avatar-3xl { width: 3.5rem; height: 3.5rem; }
.avatar-3xl .avatar-name { font-size: 1.1667rem; }