/* Shared Dashboard return button styling */
.dashboard-return-btn {
    background:#000; color:#fff; padding:10px 18px; border-radius:8px; font-weight:600; text-decoration:none; font-family:'Segoe UI',sans-serif; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:background .25s, transform .25s; letter-spacing:.5px; display:inline-block;
}
.dashboard-return-btn:hover { background:#1a1a1a; transform:translateY(-2px); }
.dashboard-return-btn:active { background:#000; transform:translateY(0); }
@media (max-width:700px){ .dashboard-return-btn { padding:8px 14px; font-size:14px; } }

/* Logout button (hero bar) */
.logout-hero-btn { background:var(--falcon-red,#C93B2A) !important; color:#fff !important; padding:10px 18px; border:none; border-radius:8px; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:background .25s, transform .25s; letter-spacing:.5px; }
.logout-hero-btn.hovering-logout, .logout-hero-btn:hover { background:#b2321f !important; transform:translateY(-2px); }
.logout-hero-btn:active { background:var(--falcon-red,#C93B2A) !important; transform:translateY(0); }
@media (max-width:700px){ .logout-hero-btn { padding:8px 14px; font-size:14px; } }
/* 
=========================================================================
FALCON GAS - MASTER STYLESHEET
Unified styling for all workflow pages to ensure consistent look & feel
=========================================================================
*/

/* ===== GLOBAL VARIABLES ===== */
:root {
    /* JACQUES' APPROVED COLOR PALETTE - Updated November 2025 */
    --falcon-green: #4DA554;           /* Green: RGB(77, 165, 84) */
    --falcon-red: #C93B2A;             /* Red: RGB(201, 59, 42) */
    --falcon-blue: #2A54B1;            /* Blue: RGB(42, 84, 177) */
    --falcon-orange: #EC753A;          /* Orange: RGB(236, 117, 58) */
    
    /* Falcon Brand Blues - Updated */
    --falcon-primary-blue: #2A54B1;    /* Updated to Jacques' blue */
    --falcon-secondary-blue: #1e3f85;  /* Darker shade of Jacques' blue */
    --falcon-hover-blue: #1a3570;      /* Even darker for hover states */
    --falcon-light-blue: #e3f2fd;
    
    /* Falcon Grey - Single Brand Color */
    --falcon-grey: #ffffff;
    --falcon-grey-light: #ffffff;
    --falcon-grey-dark: #ffffff;
    
    /* Basic Neutrals */
    --falcon-white: #ffffff;
    --falcon-black: #000000;
    --falcon-gray-50: #ffffff;
    
    /* Status Colors - JACQUES' APPROVED PALETTE */
    --falcon-success: #4DA554;         /* Green: Jacques' approved */
    --falcon-warning: #EC753A;         /* Orange: Jacques' approved */
    --falcon-danger: #C93B2A;          /* Red: Jacques' approved */
    --falcon-info: #2A54B1;            /* Blue: Jacques' approved */
    
    /* Legacy Aliases for Compatibility */
    --danger-red: #C93B2A;             
    --warning-red: #C93B2A;            
    --falcon-light-green: #E8F5E8;     /* Light green for backgrounds */
    --falcon-light-red: #FCE8E6;       /* Light red for backgrounds */
    
    /* Shadows */
    --falcon-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --falcon-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --falcon-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Typography - Based on Order Placement Page Standards */
    --falcon-font-family: 'Segoe UI', sans-serif;
    --falcon-font-size-xs: 0.75rem;    /* 12px */
    --falcon-font-size-sm: 0.875rem;   /* 14px */
    --falcon-font-size-base: 1rem;     /* 16px - Base size from order-placement */
    --falcon-font-size-lg: 1.125rem;   /* 18px */
    --falcon-font-size-xl: 1.25rem;    /* 20px */
    --falcon-font-size-2xl: 1.5rem;    /* 24px */
    --falcon-font-size-3xl: 1.875rem;  /* 30px */
    --falcon-font-size-4xl: 2.2rem;    /* 35px - Large display text */
    
    /* Button and Input Font Sizes - Order Placement Standards */
    --falcon-button-font-size: 1.2rem; /* Primary buttons */
    --falcon-input-font-size: 1rem;    /* Form inputs */
    --falcon-label-font-size: 1rem;    /* Form labels */
    --falcon-heading-font-size: 1.8rem; /* Section headings */
    
    /* Spacing */
    --falcon-space-1: 0.25rem;
    --falcon-space-2: 0.5rem;
    --falcon-space-3: 0.75rem;
    --falcon-space-4: 1rem;
    --falcon-space-5: 1.25rem;
    --falcon-space-6: 1.5rem;
    --falcon-space-8: 2rem;
    --falcon-space-10: 2.5rem;
    --falcon-space-12: 3rem;
    
    /* Border Radius */
    --falcon-radius-sm: 0.125rem;
    --falcon-radius-md: 0.375rem;
    --falcon-radius-lg: 0.5rem;
    --falcon-radius-xl: 0.75rem;
}

/* ===== GLOBAL RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--falcon-font-family) !important;
}

/* Force Segoe UI on ALL elements - override any Times New Roman */
*, *::before, *::after {
    font-family: 'Segoe UI', sans-serif !important;
}

/* Specific overrides for common elements that might have different fonts */
body, html, div, span, p, a, h1, h2, h3, h4, h5, h6, 
input, select, textarea, button, label, th, td, 
.modal, .card, .section, .header, .footer {
    font-family: 'Segoe UI', sans-serif !important;
}

body {
    background: var(--falcon-gray-50) !important;
    color: var(--falcon-black) !important;
    line-height: 1.6;
    font-size: var(--falcon-font-size-base);
}

/* ===== STANDARDIZED HEADER ===== */
.falcon-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--falcon-space-10) var(--falcon-space-12);
    background: var(--falcon-primary-blue);
    color: var(--falcon-white);
    position: relative;
    min-height: 80px;
    border-bottom: 3px solid var(--falcon-secondary-blue);
    margin-bottom: var(--falcon-space-8);
}

.falcon-header h1 {
    font-size: var(--falcon-font-size-2xl) !important;
    font-weight: 700 !important;
    color: var(--falcon-white) !important;
    margin: 0 !important;
    text-align: center;
}

.falcon-header .logo {
    position: absolute;
    left: var(--falcon-space-12);
    height: 60px;
    width: auto;
}

/* ===== STANDARDIZED BUTTONS ===== */
.falcon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--falcon-space-3) var(--falcon-space-6);
    border: none;
    border-radius: var(--falcon-radius-md);
    font-size: var(--falcon-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: var(--falcon-space-2);
    min-height: 40px;
}

.falcon-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--falcon-shadow-md);
}

.falcon-btn:active {
    transform: translateY(0);
}

/* Button Variants */
.falcon-btn-primary {
    background: var(--falcon-primary-blue);
    color: var(--falcon-white);
}

.falcon-btn-primary:hover {
    background: var(--falcon-hover-blue);
    color: var(--falcon-white);
}

.falcon-btn-secondary {
    background: var(--falcon-grey);
    color: var(--falcon-white);
}

.falcon-btn-secondary:hover {
    background: var(--falcon-grey-dark);
}

.falcon-btn-success {
    background: var(--falcon-success);
    color: var(--falcon-white);
}

.falcon-btn-success:hover {
    background: #059669;
}

.falcon-btn-warning {
    background: var(--falcon-warning);
    color: var(--falcon-white);
}

.falcon-btn-warning:hover {
    background: #d97706;
}

.falcon-btn-danger {
    background: var(--falcon-danger);
    color: var(--falcon-white);
}

.falcon-btn-danger:hover {
    background: #dc2626;
}

/* Button Sizes */
.falcon-btn-sm {
    padding: var(--falcon-space-2) var(--falcon-space-4);
    font-size: var(--falcon-font-size-xs);
    min-height: 32px;
}

.falcon-btn-lg {
    padding: var(--falcon-space-4) var(--falcon-space-8);
    font-size: var(--falcon-font-size-lg);
    min-height: 48px;
}

/* ===== STANDARDIZED CARDS ===== */
.falcon-card {
    background: var(--falcon-white);
    border-radius: var(--falcon-radius-lg);
    box-shadow: var(--falcon-shadow-md);
    border: 1px solid var(--falcon-gray-200);
    overflow: hidden;
}

.falcon-card-header {
    padding: var(--falcon-space-6);
    background: var(--falcon-gray-50);
    border-bottom: 1px solid var(--falcon-gray-200);
}

.falcon-card-body {
    padding: var(--falcon-space-6);
}

.falcon-card-footer {
    padding: var(--falcon-space-6);
    background: var(--falcon-gray-50);
    border-top: 1px solid var(--falcon-gray-200);
}

.falcon-card-title {
    font-size: var(--falcon-font-size-lg);
    font-weight: 600;
    color: var(--falcon-gray-900);
    margin: 0;
}

/* ===== STANDARDIZED FORMS ===== */
.falcon-form-group {
    margin-bottom: var(--falcon-space-4);
}

.falcon-label {
    display: block;
    font-size: var(--falcon-font-size-sm);
    font-weight: 600;
    color: var(--falcon-gray-700);
    margin-bottom: var(--falcon-space-2);
}

.falcon-input,
.falcon-select,
.falcon-textarea {
    width: 100%;
    padding: var(--falcon-space-3);
    border: 1px solid var(--falcon-gray-300);
    border-radius: var(--falcon-radius-md);
    font-size: var(--falcon-font-size-sm);
    background: var(--falcon-white);
    color: var(--falcon-gray-900);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.falcon-input:focus,
.falcon-select:focus,
.falcon-textarea:focus {
    outline: none;
    border-color: var(--falcon-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

/* ===== STANDARDIZED TABLES ===== */
.falcon-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--falcon-white);
    border-radius: var(--falcon-radius-lg);
    overflow: hidden;
    box-shadow: var(--falcon-shadow-md);
}

.falcon-table th {
    background: var(--falcon-primary-blue);
    color: var(--falcon-white);
    padding: var(--falcon-space-4);
    text-align: left;
    font-weight: 600;
    font-size: var(--falcon-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.falcon-table td {
    padding: var(--falcon-space-4);
    border-bottom: 1px solid var(--falcon-gray-200);
    color: var(--falcon-gray-900);
    font-size: var(--falcon-font-size-sm);
}

.falcon-table tbody tr:hover {
    background: var(--falcon-gray-50);
}

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

/* ===== STANDARDIZED ALERTS ===== */
.falcon-alert {
    padding: var(--falcon-space-4);
    border-radius: var(--falcon-radius-md);
    border: 1px solid;
    margin-bottom: var(--falcon-space-4);
}

.falcon-alert-success {
    background: #f0fdf4;
    border-color: var(--falcon-success);
    color: #166534;
}

.falcon-alert-warning {
    background: #fffbeb;
    border-color: var(--falcon-warning);
    color: #92400e;
}

.falcon-alert-danger {
    background: #fef2f2;
    border-color: var(--falcon-danger);
    color: #991b1b;
}

.falcon-alert-info {
    background: #eff6ff;
    border-color: var(--falcon-info);
    color: #1e40af;
}

/* ===== STANDARDIZED NAVIGATION ===== */
.falcon-nav {
    background: var(--falcon-white);
    box-shadow: var(--falcon-shadow-sm);
    border-bottom: 1px solid var(--falcon-gray-200);
}

.falcon-nav-item {
    display: inline-block;
    padding: var(--falcon-space-4) var(--falcon-space-6);
    color: var(--falcon-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.falcon-nav-item:hover {
    background: var(--falcon-gray-50);
    color: var(--falcon-primary-blue);
}

.falcon-nav-item.active {
    background: var(--falcon-primary-blue);
    color: var(--falcon-white);
}

/* ===== STANDARDIZED UTILITIES ===== */
.falcon-text-center { text-align: center; }
.falcon-text-right { text-align: right; }
.falcon-text-left { text-align: left; }

.falcon-font-bold { font-weight: 700; }
.falcon-font-semibold { font-weight: 600; }
.falcon-font-medium { font-weight: 500; }

.falcon-text-xs { font-size: var(--falcon-font-size-xs); }
.falcon-text-sm { font-size: var(--falcon-font-size-sm); }
.falcon-text-lg { font-size: var(--falcon-font-size-lg); }
.falcon-text-xl { font-size: var(--falcon-font-size-xl); }

.falcon-mb-2 { margin-bottom: var(--falcon-space-2); }
.falcon-mb-4 { margin-bottom: var(--falcon-space-4); }
.falcon-mb-6 { margin-bottom: var(--falcon-space-6); }
.falcon-mb-8 { margin-bottom: var(--falcon-space-8); }

.falcon-mt-2 { margin-top: var(--falcon-space-2); }
.falcon-mt-4 { margin-top: var(--falcon-space-4); }
.falcon-mt-6 { margin-top: var(--falcon-space-6); }
.falcon-mt-8 { margin-top: var(--falcon-space-8); }

.falcon-p-2 { padding: var(--falcon-space-2); }
.falcon-p-4 { padding: var(--falcon-space-4); }
.falcon-p-6 { padding: var(--falcon-space-6); }
.falcon-p-8 { padding: var(--falcon-space-8); }

/* ===== LOADING STATES ===== */
.falcon-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--falcon-gray-300);
    border-radius: 50%;
    border-top-color: var(--falcon-primary-blue);
    animation: falcon-spin 1s ease-in-out infinite;
}

@keyframes falcon-spin {
    to { transform: rotate(360deg); }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .falcon-header {
        padding: var(--falcon-space-6);
        text-align: center;
    }
    
    .falcon-header .logo {
        position: static;
        margin-bottom: var(--falcon-space-4);
    }
    
    .falcon-header h1 {
        font-size: var(--falcon-font-size-xl) !important;
    }
    
    .falcon-btn {
        width: 100%;
        margin-bottom: var(--falcon-space-2);
    }
    
    .falcon-table {
        font-size: var(--falcon-font-size-xs);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .falcon-btn,
    .falcon-nav {
        display: none !important;
    }
    
    .falcon-card {
        box-shadow: none;
        border: 1px solid var(--falcon-gray-300);
    }
    
    .falcon-header {
        background: var(--falcon-white) !important;
        color: var(--falcon-black) !important;
    }
}

/* ========================================================================
   JACQUES' APPROVED DESIGN STANDARDS - November 2025
   Customer feedback implementation for consistent design system
======================================================================== */

/* ===== JACQUES' RULE: NO BLACK TEXT ON COLORED BACKGROUNDS ===== */
/* Force white text on all colored backgrounds for better readability */

/* Blue background elements - use white text */
.falcon-btn-primary,
.falcon-header,
[style*="background: #2A54B1"],
[style*="background-color: #2A54B1"],
[style*="background: var(--falcon-primary-blue)"],
[style*="background: var(--falcon-blue)"] {
    color: var(--falcon-white) !important;
}

.falcon-btn-primary *,
.falcon-header *,
[style*="background: #2A54B1"] *,
[style*="background-color: #2A54B1"] *,
[style*="background: var(--falcon-primary-blue)"] *,
[style*="background: var(--falcon-blue)"] * {
    color: var(--falcon-white) !important;
}

/* Red background elements - use white text */
.falcon-btn-danger,
[style*="background: #C93B2A"],
[style*="background-color: #C93B2A"],
[style*="background: var(--falcon-red)"],
[style*="background: var(--falcon-danger)"] {
    color: var(--falcon-white) !important;
}

.falcon-btn-danger *,
[style*="background: #C93B2A"] *,
[style*="background-color: #C93B2A"] *,
[style*="background: var(--falcon-red)"] *,
[style*="background: var(--falcon-danger)"] * {
    color: var(--falcon-white) !important;
}

/* Green background elements - use white text */
.falcon-btn-success,
[style*="background: #4DA554"],
[style*="background-color: #4DA554"],
[style*="background: var(--falcon-success)"],
[style*="background: var(--falcon-green)"] {
    color: var(--falcon-white) !important;
}

.falcon-btn-success *,
[style*="background: #4DA554"] *,
[style*="background-color: #4DA554"] *,
[style*="background: var(--falcon-success)"] *,
[style*="background: var(--falcon-green)"] * {
    color: var(--falcon-white) !important;
}

/* Orange background elements - use white text */
.falcon-btn-warning,
[style*="background: #EC753A"],
[style*="background-color: #EC753A"],
[style*="background: var(--falcon-warning)"],
[style*="background: var(--falcon-orange)"] {
    color: var(--falcon-white) !important;
}

.falcon-btn-warning *,
[style*="background: #EC753A"] *,
[style*="background-color: #EC753A"] *,
[style*="background: var(--falcon-warning)"] *,
[style*="background: var(--falcon-orange)"] * {
    color: var(--falcon-white) !important;
}

/* ===== JACQUES' APPROVED FONT SIZES (Based on Order Placement Standards) ===== */
/* Update button colors to use Jacques' palette */
.falcon-btn-primary {
    background: var(--falcon-blue) !important;
    font-size: var(--falcon-button-font-size) !important;
}

.falcon-btn-primary:hover {
    background: var(--falcon-secondary-blue) !important;
}

.falcon-btn-success {
    background: var(--falcon-green) !important;
    font-size: var(--falcon-button-font-size) !important;
}

.falcon-btn-success:hover {
    background: #3d8a44 !important; /* Darker green for hover */
}

.falcon-btn-danger {
    background: var(--falcon-red) !important;
    font-size: var(--falcon-button-font-size) !important;
}

.falcon-btn-danger:hover {
    background: #a52e1f !important; /* Darker red for hover */
}

.falcon-btn-warning {
    background: var(--falcon-orange) !important;
    font-size: var(--falcon-button-font-size) !important;
}

.falcon-btn-warning:hover {
    background: #d4622a !important; /* Darker orange for hover */
}

/* ===== CONSISTENT FONT SIZING ACROSS ALL ELEMENTS ===== */
/* Apply order-placement.html font size standards system-wide */

/* Form elements use consistent sizing */
input, select, textarea, .falcon-input {
    font-size: var(--falcon-input-font-size) !important;
    font-family: var(--falcon-font-family) !important;
}

/* Labels use consistent sizing */
label, .falcon-label {
    font-size: var(--falcon-label-font-size) !important;
    font-family: var(--falcon-font-family) !important;
}

/* Section headings */
h1, h2, .falcon-heading {
    font-size: var(--falcon-heading-font-size) !important;
    font-family: var(--falcon-font-family) !important;
}

/* Standard body text */
p, div, span, td, th {
    font-size: var(--falcon-font-size-base) !important;
    font-family: var(--falcon-font-family) !important;
}

/* ===== JACQUES' CAPITALIZATION STANDARDS ===== */
/* Proper case for labels, CAPS for abbreviations */
.proper-case {
    text-transform: capitalize !important;
}

.caps-abbreviation {
    text-transform: uppercase !important;
}

/* Ensure dropdown values are consistent */
select option {
    text-transform: uppercase !important; /* COD, EFT, CARD format */
}

/* ===== JACQUES' COLOR ENFORCEMENT RULES ===== */
/* Force Jacques' approved colors across ALL elements, overriding any inline styles */

/* Hero bar styles now consolidated in main.css */

/* Override any remaining old blue colors with Jacques' blue */
[style*="#0056b3"] {
    background: #2A54B1 !important;
    color: #2A54B1 !important;
    border-color: #2A54B1 !important;
}

/* Override any remaining old red colors with Jacques' red */
[style*="#dc2626"],
[style*="#ef4444"] {
    background: #C93B2A !important;
    color: #C93B2A !important;
    border-color: #C93B2A !important;
}

/* Override any remaining old green colors with Jacques' green */
[style*="#10b981"],
[style*="#059669"] {
    background: #4DA554 !important;
    color: #4DA554 !important;
    border-color: #4DA554 !important;
}

/* Override any remaining old orange colors with Jacques' orange */
[style*="#f59e0b"],
[style*="#d97706"] {
    background: #EC753A !important;
    color: #EC753A !important;
    border-color: #EC753A !important;
}

/* ===== RESPONSIVE DESIGN SYSTEM ===== */
/* Mobile-first responsive design for all Falcon Gas dashboard pages */

/* Responsive font size variables */
:root {
    --falcon-heading-font-size-mobile: 1.4rem;   /* 22px on mobile */
    --falcon-heading-font-size-tablet: 1.6rem;   /* 26px on tablet */
    --falcon-heading-font-size-desktop: 1.8rem;  /* 29px on desktop */
    
    --falcon-button-font-size-mobile: 1rem;      /* 16px on mobile */
    --falcon-button-font-size-tablet: 1.1rem;    /* 18px on tablet */
    
    --falcon-card-padding-mobile: var(--falcon-space-4);  /* 16px */
    --falcon-card-padding-tablet: var(--falcon-space-5);  /* 20px */
}

/* ===== DASHBOARD GRID SYSTEM ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--falcon-space-6);
    margin: var(--falcon-space-6) 0;
}

/* ===== MOBILE RESPONSIVE (≤768px) ===== */
@media (max-width: 768px) {
    /* Typography adjustments */
    :root {
        --falcon-heading-font-size: var(--falcon-heading-font-size-mobile);
        --falcon-button-font-size: var(--falcon-button-font-size-mobile);
    }
    
    h1, h2, h3, .falcon-heading {
        font-size: var(--falcon-heading-font-size-mobile) !important;
        line-height: 1.3 !important;
    }
    
    /* Button adjustments */
    .falcon-btn {
        width: 100% !important;
        margin-bottom: var(--falcon-space-2) !important;
        font-size: var(--falcon-button-font-size-mobile) !important;
        padding: var(--falcon-space-3) var(--falcon-space-4) !important;
        min-height: 44px !important; /* Touch-friendly */
    }
    
    /* Card adjustments */
    .falcon-card,
    .dashboard-card,
    .compact-card {
        margin-bottom: var(--falcon-space-4) !important;
    }
    
    .falcon-card-header,
    .falcon-card-body,
    .falcon-card-footer {
        padding: var(--falcon-card-padding-mobile) !important;
    }
    
    /* Dashboard grid - single column on mobile */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--falcon-space-4) !important;
        margin: var(--falcon-space-4) 0 !important;
    }
    
    /* Table responsiveness */
    .falcon-table {
        font-size: var(--falcon-font-size-xs) !important;
        overflow-x: auto !important;
        display: block !important;
        white-space: nowrap !important;
    }
    
    .falcon-table th,
    .falcon-table td {
        padding: var(--falcon-space-2) !important;
        min-width: 120px !important;
    }
    
    /* Form adjustments */
    .falcon-form-group {
        margin-bottom: var(--falcon-space-3) !important;
    }
    
    .falcon-input,
    .falcon-select,
    .falcon-textarea {
        font-size: var(--falcon-font-size-base) !important;
        padding: var(--falcon-space-3) !important;
    }
    
    /* Navigation adjustments */
    .falcon-nav-item {
        display: block !important;
        padding: var(--falcon-space-3) var(--falcon-space-4) !important;
        border-bottom: 1px solid var(--falcon-gray-200) !important;
    }
    
    /* Modal adjustments */
    .modal {
        width: 95% !important;
        max-width: none !important;
        margin: var(--falcon-space-2) !important;
    }
    
    /* Hero bar adjustments */
    .hero-bar {
        padding: var(--falcon-space-3) !important;
        font-size: var(--falcon-font-size-lg) !important;
    }
    
    /* Section spacing */
    .section {
        padding: var(--falcon-space-4) !important;
        margin: var(--falcon-space-4) 0 !important;
    }
}

/* ===== TABLET RESPONSIVE (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Typography adjustments */
    :root {
        --falcon-heading-font-size: var(--falcon-heading-font-size-tablet);
        --falcon-button-font-size: var(--falcon-button-font-size-tablet);
    }
    
    h1, h2, h3, .falcon-heading {
        font-size: var(--falcon-heading-font-size-tablet) !important;
    }
    
    /* Button adjustments */
    .falcon-btn {
        font-size: var(--falcon-button-font-size-tablet) !important;
        padding: var(--falcon-space-3) var(--falcon-space-6) !important;
    }
    
    /* Card adjustments */
    .falcon-card-header,
    .falcon-card-body,
    .falcon-card-footer {
        padding: var(--falcon-card-padding-tablet) !important;
    }
    
    /* Dashboard grid - 2 columns on tablet */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: var(--falcon-space-5) !important;
    }
    
    /* Table adjustments */
    .falcon-table {
        font-size: var(--falcon-font-size-sm) !important;
    }
    
    /* Form adjustments */
    .falcon-input,
    .falcon-select,
    .falcon-textarea {
        font-size: var(--falcon-font-size-sm) !important;
    }
    
    /* Modal adjustments */
    .modal {
        width: 90% !important;
        max-width: 800px !important;
    }
}

/* ===== DESKTOP RESPONSIVE (≥1025px) ===== */
/* Desktop uses default styles defined above - no changes needed */