/* ============================================
   CAMPA TECHNOLOGIES - Falcon Theme Overrides
   Brand customizations on top of Falcon v3.26.0
   ============================================ */

/* Brand Colors mapped to Falcon variables */
:root,
[data-bs-theme="light"] {
    /* Primary Brand Colors */
    --falcon-primary: #0050EF;
    --falcon-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 */
    --falcon-secondary: #00ABA9;
    --falcon-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 */
    --icon-cyan: #00BCD4;           /* Cyan - Parts */
    --icon-lime: #8BC34A;           /* Lime - Payments */
    --icon-red: #F44336;            /* Red - Tools */
    --icon-deep-orange: #FF5722;    /* Deep Orange - Transactions */
}

/* Dark Mode Brand Colors */
[data-bs-theme="dark"] {
    --falcon-primary: #3d7eff;
    --falcon-primary-rgb: 61, 126, 255;
    --falcon-secondary: #00d4d2;
    --falcon-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; }
.nav-link-icon .icon-cyan { color: var(--icon-cyan) !important; }
.nav-link-icon .icon-lime { color: var(--icon-lime) !important; }
.nav-link-icon .icon-red { color: var(--icon-red) !important; }
.nav-link-icon .icon-deep-orange { color: var(--icon-deep-orange) !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; }
.icon-cyan { color: var(--icon-cyan) !important; }
.icon-lime { color: var(--icon-lime) !important; }
.icon-red { color: var(--icon-red) !important; }
.icon-deep-orange { color: var(--icon-deep-orange) !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; }
.navbar-vertical .nav-link-icon .icon-cyan,
.navbar-vertical-collapsed .nav-link-icon .icon-cyan { color: var(--icon-cyan) !important; }
.navbar-vertical .nav-link-icon .icon-lime,
.navbar-vertical-collapsed .nav-link-icon .icon-lime { color: var(--icon-lime) !important; }
.navbar-vertical .nav-link-icon .icon-red,
.navbar-vertical-collapsed .nav-link-icon .icon-red { color: var(--icon-red) !important; }
.navbar-vertical .nav-link-icon .icon-deep-orange,
.navbar-vertical-collapsed .nav-link-icon .icon-deep-orange { color: var(--icon-deep-orange) !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 - Falcon style with brand colors */
.status-draft {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}
.status-submitted {
    background-color: rgba(33, 150, 243, 0.1);
    color: #1565c0;
}
.status-pending {
    background-color: rgba(255, 177, 50, 0.1);
    color: #cc8e29;
}
.status-approved {
    background-color: rgba(76, 175, 80, 0.1);
    color: #3d8b40;
}
.status-sent {
    background-color: rgba(0, 80, 239, 0.1);
    color: var(--brand-primary);
}
.status-confirmed {
    background-color: rgba(0, 150, 136, 0.1);
    color: #00796b;
}
.status-partial {
    background-color: rgba(255, 152, 0, 0.1);
    color: #e65100;
}
.status-received {
    background-color: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}
.status-planning {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}
.status-in-progress {
    background-color: rgba(0, 80, 239, 0.1);
    color: var(--brand-primary);
}
.status-on-hold {
    background-color: rgba(255, 177, 50, 0.15);
    color: #cc8e29;
}
.status-completed {
    background-color: rgba(56, 142, 60, 0.15);
    color: #1b5e20;
}
.status-rejected {
    background-color: rgba(244, 67, 54, 0.1);
    color: #c62828;
}
.status-cancelled {
    background-color: rgba(158, 158, 158, 0.1);
    color: #757575;
}
.status-default {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}
.status-active {
    background-color: rgba(0, 80, 239, 0.1);
    color: var(--brand-primary);
}

/* ============================================
   Notification Styles (Falcon-enhanced)
   ============================================ */

.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(--falcon-body-tertiary-bg, #f0f0f0);
    margin-right: auto;
    border-bottom-left-radius: 0.25rem;
}

[data-bs-theme="dark"] .chat-message.received {
    background-color: var(--falcon-body-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(--falcon-body-tertiary-bg, #f8f9fa);
}

[data-bs-theme="dark"] .landing-section-gray {
    background-color: var(--falcon-body-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(--falcon-card-bg, #fff);
    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(--falcon-card-bg, #fff);
    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(--falcon-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(--falcon-card-bg, #fff);
    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(--falcon-card-bg, #fff);
    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(--falcon-card-bg, #fff);
    border-radius: 0.5rem;
    border: 1px solid var(--falcon-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(--falcon-card-bg, #fff);
    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(--falcon-card-bg, #fff);
    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 (Falcon adds 120px by default) */
.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 - restore visibility stripped by Falcon theme */
    .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(--falcon-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: var(--falcon-body-highlight-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(--falcon-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(--falcon-body-tertiary-bg) 0%, var(--falcon-body-bg) 100%);
}

.portfolio-product-image .placeholder-icon i {
    font-size: 4rem;
    color: var(--falcon-text-600);
    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;
}

/* ============================================
   Table body text — darker, legible default
   ============================================
   Falcon ships tables with a muted slate default (--falcon-table-color /
   --falcon-table-striped-color = #5e6e82) that reads as low-contrast gray in
   the index listings. Bump the default cell text to the theme-aware emphasis
   color (near-black in light mode, near-white in dark mode). Cells that opt
   into a lighter tone with an explicit .text-400/500/600 utility keep it
   (those rules are !important and win over these variables). */
.table {
    --falcon-table-color: var(--falcon-emphasis-color, #000);
    --falcon-table-striped-color: var(--falcon-emphasis-color, #000);
    --falcon-table-active-color: var(--falcon-emphasis-color, #000);
    --falcon-table-hover-color: var(--falcon-emphasis-color, #000);
}

/* Allow row-action dropdowns to escape table-responsive overflow clipping */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

tbody .dropdown-menu {
    z-index: 1050;
}

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

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

/* Shape pill — "[SQ] <icon>" / "[RD] <icon>" / "[LI] <icon>".
   Used in raw-material lists and BuildPart tables via Pages/Shared/_ShapeBadge.cshtml. */
.shape-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--bs-font-monospace, monospace);
    line-height: 1;
}

.shape-pill .shape-pill-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linejoin: round;
    opacity: 0.85;
}

/* ============================================================
   Related-documents quick navigation (_RelatedDocuments.cshtml)
   ============================================================ */
.related-card .related-row {
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    line-height: 1.4;
}

.related-card .related-icon {
    color: #9aa5b1;
    width: 1rem;
    text-align: center;
}

.related-card .related-link:hover .text-900 {
    text-decoration: underline;
}

.related-card .related-status {
    color: #b0b7c3;
}

/* Current ("Estás aquí") node — subtle highlight strip. */
.related-card .related-current {
    background-color: rgba(44, 123, 229, 0.07);
}
.related-card .related-current .related-icon {
    color: var(--falcon-primary, #2c7be5);
}

/* Nested children: indent with a connector rail on the left. */
.related-card .related-children {
    margin-left: 0.65rem;
    padding-left: 0.85rem;
    border-left: 1px solid #e3e6ed;
}

/* Collapse/expand: the card carries .collapsed by default. The summary (inline lineage) shows when
   collapsed; the full tree shows when expanded. Header + summary are clickable affordances. */
.related-card .related-header { cursor: pointer; }
.related-card .related-summary { cursor: pointer; }

.related-card .related-full { display: none; }
.related-card .related-summary { display: block; }
.related-card:not(.collapsed) .related-full { display: block; }
.related-card:not(.collapsed) .related-summary { display: none; }

/* Header label swaps with state. Default (collapsed) shows "Ver más". */
.related-card .related-toggle-label .when-expanded { display: none; }
.related-card:not(.collapsed) .related-toggle-label .when-expanded { display: inline; }
.related-card:not(.collapsed) .related-toggle-label .when-collapsed { display: none; }

/* Collapsed inline lineage breadcrumb. */
.related-card .related-trail { line-height: 1.6; }
.related-card .related-sep { color: #c6ccd8; font-size: 0.7rem; }
.related-card .related-crumb-current { background-color: rgba(44, 123, 229, 0.07); border-radius: 0.3rem; padding: 0.05rem 0.35rem; }
.related-card .related-crumb-current .related-icon { color: var(--falcon-primary, #2c7be5); }

/* ============================================================
   Keyboard navigation shortcuts
   ============================================================ */

/* Visible per-item shortcut badge in the vertical sidebar. Rendered as the
   "alt" modifier followed by the item's letter, so users know to hold Alt
   (e.g. "alt p"). The prefix is injected via ::before to avoid duplicating it
   in markup. */
.navbar-vertical .nav-link .nav-kbd {
    margin-left: auto;
    font-family: var(--falcon-font-monospace, monospace);
    font-size: 0.62rem;
    line-height: 1;
    padding: 0.12rem 0.34rem;
    border-radius: 0.28rem;
    color: var(--falcon-secondary, #748194);
    background-color: rgba(116, 129, 148, 0.12);
    border: 1px solid rgba(116, 129, 148, 0.20);
    text-transform: lowercase;
    opacity: 0.65;
    letter-spacing: 0.04em;
    transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

/* "alt" prefix shown before each item letter (slightly dimmer than the letter). */
.navbar-vertical .nav-link .nav-kbd::before {
    content: "alt\00A0";
    opacity: 0.6;
    font-weight: 600;
}

.navbar-vertical .nav-link:hover .nav-kbd,
.navbar-vertical .nav-link.active .nav-kbd {
    opacity: 1;
}

/* Help overlay (toggled with "?"). */
.kbd-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(11, 23, 39, 0.55);
    padding: 1rem;
}

.kbd-help-overlay.show { display: flex; }

.kbd-help-panel {
    background-color: var(--falcon-card-bg, #fff);
    color: var(--falcon-body-color, #5e6e82);
    border-radius: 0.6rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 32rem;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.4rem 1.6rem;
}

.kbd-help-title {
    margin: 0 0 0.35rem;
    font-weight: 600;
}

.kbd-help-intro {
    font-size: 0.85rem;
    color: var(--falcon-secondary, #748194);
    margin-bottom: 1rem;
}

.kbd-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kbd-help-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.28rem 0;
    border-bottom: 1px solid rgba(116, 129, 148, 0.12);
}

.kbd-help-keys {
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-size: 0.78rem;
    color: var(--falcon-secondary, #748194);
}

.kbd-help-or { color: rgba(116, 129, 148, 0.6); }

.kbd-help-name { font-size: 0.9rem; }

.kbd-help-hint {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--falcon-secondary, #748194);
    text-align: right;
}

.kbd-help-panel kbd {
    font-size: 0.72rem;
    padding: 0.08rem 0.34rem;
    border-radius: 0.25rem;
    background-color: rgba(116, 129, 148, 0.14);
    border: 1px solid rgba(116, 129, 148, 0.24);
    color: inherit;
}

/* ============================================================
   Global search palette (Ctrl/Cmd+K or g g)
   ============================================================ */

.gs-overlay {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: none;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(11, 23, 39, 0.55);
    padding: 4.5rem 1rem 1rem;
}

.gs-overlay.show { display: flex; }

.gs-panel {
    background-color: var(--falcon-card-bg, #fff);
    color: var(--falcon-body-color, #5e6e82);
    border-radius: 0.6rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 40rem;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gs-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(116, 129, 148, 0.18);
}

.gs-input-icon { color: var(--falcon-secondary, #748194); }

.gs-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1.05rem;
    color: var(--falcon-emphasis-color, #344050);
}

.gs-esc {
    flex: 0 0 auto;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background-color: rgba(116, 129, 148, 0.14);
    border: 1px solid rgba(116, 129, 148, 0.24);
    color: var(--falcon-secondary, #748194);
}

.gs-results {
    overflow-y: auto;
    padding: 0.4rem 0.4rem 0.6rem;
}

.gs-empty {
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--falcon-secondary, #748194);
    font-size: 0.9rem;
}

.gs-group {
    padding: 0.5rem 0.8rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--falcon-secondary, #748194);
}

.gs-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.4rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.gs-row.active { background-color: rgba(44, 123, 229, 0.10); }

.gs-row-icon {
    flex: 0 0 1.6rem;
    text-align: center;
    color: var(--falcon-primary, #2c7be5);
}

.gs-row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gs-row-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--falcon-emphasis-color, #344050);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-row-sub {
    font-size: 0.78rem;
    color: var(--falcon-secondary, #748194);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Globals block in the help overlay gets a divider under it. */
.kbd-help-globals { margin-bottom: 0.4rem; padding-bottom: 0.2rem; }

/* Rendered Markdown content (e.g. mirrored project Requirement). Tightens spacing so a
   Markdown block sits naturally inside cards without runaway top/bottom margins. */
.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }
.markdown-content p { margin-bottom: 0.5rem; }
.markdown-content ul,
.markdown-content ol { margin-bottom: 0.5rem; padding-left: 1.25rem; }
.markdown-content li { margin-bottom: 0.15rem; }
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { margin-top: 0.75rem; margin-bottom: 0.35rem; font-weight: 600; }
.markdown-content h1 { font-size: 1.15rem; }
.markdown-content h2 { font-size: 1.05rem; }
.markdown-content h3 { font-size: 0.98rem; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 0.92rem; }
.markdown-content code {
    background: var(--falcon-body-tertiary-bg, #f5f6f7);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    font-size: 0.85em;
}
.markdown-content pre {
    background: var(--falcon-body-tertiary-bg, #f5f6f7);
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.markdown-content pre code { background: transparent; padding: 0; }
.markdown-content blockquote {
    border-left: 3px solid var(--falcon-border-color, #d8e2ef);
    padding-left: 0.75rem;
    margin-left: 0;
    color: var(--falcon-secondary, #748194);
}
.markdown-content table {
    width: auto;
    max-width: 100%;
    margin-bottom: 0.5rem;
    border-collapse: collapse;
}
.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--falcon-border-color, #d8e2ef);
    padding: 0.25rem 0.5rem;
}
.markdown-content img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   File dropzone (wwwroot/js/file-dropzone.js)
   Any <input type="file" data-dropzone> is upgraded into this drag/paste target.
   --------------------------------------------------------------------------- */
.file-dropzone {
    position: relative;
    border: 1px dashed var(--falcon-border-color, #d8e2ef);
    border-radius: 0.375rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.file-dropzone:hover,
.file-dropzone:focus-visible {
    border-color: var(--bs-primary, #2c7be5);
    background-color: rgba(44, 123, 229, 0.04);
    outline: none;
}

.file-dropzone.is-dragover {
    border-color: var(--bs-primary, #2c7be5);
    border-style: solid;
    background-color: rgba(44, 123, 229, 0.08);
}

.file-dropzone.is-accepted {
    border-color: var(--bs-success, #00d27a);
    background-color: rgba(0, 210, 122, 0.08);
}

.file-dropzone.is-invalid {
    border-color: var(--bs-danger, #e63757);
    background-color: rgba(230, 55, 87, 0.08);
}

/* The real input stays in the form so the POST is unchanged; it is just never shown. */
.file-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.file-dropzone__hint {
    color: var(--falcon-600, #748194);
    font-size: 0.8rem;
    text-align: center;
}

.file-dropzone.has-files .file-dropzone__hint {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.file-dropzone__files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.file-dropzone__file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 1px solid var(--falcon-border-color, #d8e2ef);
    border-radius: 0.25rem;
    background-color: var(--falcon-100, #f9fafd);
}

.file-dropzone__thumb {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.file-dropzone__icon {
    width: 38px;
    text-align: center;
    color: var(--falcon-500, #9da9bb);
    flex-shrink: 0;
}

.file-dropzone__meta { min-width: 0; }

.file-dropzone__name {
    font-size: 0.75rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-dropzone__size {
    font-size: 0.7rem;
    color: var(--falcon-600, #748194);
}

.file-dropzone__remove {
    border: 0;
    background: none;
    line-height: 1;
    font-size: 1.1rem;
    padding: 0 0.15rem;
    color: var(--falcon-600, #748194);
}

.file-dropzone__remove:hover { color: var(--bs-danger, #e63757); }