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

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

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

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

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