/*
===================================================================================
FALCON GAS - GLOBAL STANDARDS (FINAL PRODUCTION)
Ensures consistent fonts, headings, and buttons across ALL pages
Applied LAST to override all other styles
===================================================================================

??  CRITICAL WARNING ??
DO NOT EVER APPLY WHITE BACKGROUNDS TO .falcon-hero-bar OR ANY OF ITS CHILD ELEMENTS
This caused a major visual bug with white blocks covering the logo and page title
The hero bar MUST maintain its blue gradient background and white text at all times
Any rule that sets background: #ffffff or background-color: #ffffff on .falcon-hero-bar* 
will break the UI for ALL PAGES and upset customers
If you need to fix styling, use transparent backgrounds instead
===================================================================================
*/

/* ===== BLACK TEXT REQUIREMENT (Targeted to content areas only) ===== */
/* Apply black text only to actual content, NOT global elements that have their own styling */

/* HERO BAR EXCEPTION - ENFORCE BLUE GRADIENT, WHITE TEXT, NO WHITE BLOCKS - HIGHEST PRIORITY */
.falcon-hero-bar {
    background: linear-gradient(135deg, #2A54B1, #1e3f85) !important;
    background-image: linear-gradient(135deg, #2A54B1, #1e3f85) !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

.falcon-hero-bar *,
.falcon-hero-bar h1,
.falcon-hero-bar h2,
.falcon-hero-bar h3,
.falcon-hero-bar h4,
.falcon-hero-bar h5,
.falcon-hero-bar h6,
.falcon-hero-bar span,
.falcon-hero-bar .company-name,
.falcon-hero-bar .page-title,
.falcon-hero-bar .logo-section,
.falcon-hero-bar .hero-left,
.falcon-hero-bar .hero-center,
.falcon-hero-bar .hero-right,
.falcon-hero-bar .logo-section img,
.falcon-hero-bar .hero-left img {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Prevent span wrapping company name from getting white background */
.falcon-hero-bar span[style],
.falcon-hero-bar .company-name span {
    background: transparent !important;
    background-color: transparent !important;
}

/* CARD HEADER EXCEPTION - ENFORCE BLUE BACKGROUND, WHITE TEXT FOR SECTION HEADERS */
.falcon-card-header,
.falcon-card-header *,
.falcon-card-header h1,
.falcon-card-header h2,
.falcon-card-header h3,
.falcon-card-header h4,
.falcon-card-header h5,
.falcon-card-header h6 {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Preserve styling for blue card headers */
.falcon-card-header[style*="background: #2A54B1"],
.falcon-card-header[style*="background:#2A54B1"] {
    background: #2A54B1 !important;
}

.falcon-card-header[style*="background: #2A54B1"] *,
.falcon-card-header[style*="background:#2A54B1"] * {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Content areas get black text */
.container:not(.login-container),
.content,
.modal,
.card,
.panel,
table,
input,
textarea,
select,
.header:not(.login-header),
.controls,
p:not(.login-header p):not(.falcon-hero-bar p):not(.falcon-card-header p),
li,
td,
.table-row {
    color: #262626 !important;
}

/* Preserve white text in hero bar and buttons */
.falcon-hero-bar,
.falcon-hero-bar *,
button,
.falcon-btn,
.btn {
    color: inherit;
}

/* Only apply white background to specific content areas, not hero or logo areas */
.container,
.content,
.modal,
.card,
.panel,
table,
input,
textarea,
select {
    background-color: #ffffff !important;
}

/* ===== FORCE SEGOE UI EVERYWHERE ===== */
*, *::before, *::after,
html, body, div, span, p, a, h1, h2, h3, h4, h5, h6,
input, select, textarea, button, label, th, td, li, ul, ol,
.modal, .card, .section, .header, .footer, .falcon-card,
.falcon-btn, button, .btn {
    font-family: 'Segoe UI', sans-serif !important;
}

/* ===== STANDARDIZED HEADING SIZES ===== */
/* All H1 tags - Main page titles (EXCEPT in hero bar, card headers, and login header) */
h1:not(.falcon-hero-bar h1):not(.falcon-card-header h1):not(.login-header h1), 
.h1:not(.falcon-hero-bar .h1):not(.falcon-card-header .h1):not(.login-header .h1) {
    font-size: 2rem !important;        /* 32px */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 1rem 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* All H2 tags - Section headers (EXCEPT in hero bar, card headers, and login header) */
h2:not(.falcon-hero-bar h2):not(.falcon-card-header h2):not(.login-header h2), 
.h2:not(.falcon-hero-bar .h2):not(.falcon-card-header .h2):not(.login-header .h2) {
    font-size: 1.6rem !important;      /* 25.6px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 0.75rem 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* All H3 tags - Sub-section headers (EXCEPT in hero bar and card headers) */
h3:not(.falcon-hero-bar h3):not(.falcon-card-header h3), 
.h3:not(.falcon-hero-bar .h3):not(.falcon-card-header .h3) {
    font-size: 1.25rem !important;     /* 20px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* All H4 tags - Minor headers (EXCEPT in hero bar and card headers) */
h4:not(.falcon-hero-bar h4):not(.falcon-card-header h4), 
.h4:not(.falcon-hero-bar .h4):not(.falcon-card-header .h4) {
    font-size: 1.125rem !important;    /* 18px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* All H5 and H6 tags (EXCEPT in hero bar and card headers) */
h5:not(.falcon-hero-bar h5):not(.falcon-card-header h5), 
h6:not(.falcon-hero-bar h6):not(.falcon-card-header h6), 
.h5:not(.falcon-hero-bar .h5):not(.falcon-card-header .h5), 
.h6:not(.falcon-hero-bar .h6):not(.falcon-card-header .h6) {
    font-size: 1rem !important;        /* 16px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* Mobile heading adjustments */
@media (max-width: 768px) {
    h1, .h1 {
        font-size: 1.75rem !important; /* 28px on mobile */
    }
    h2, .h2 {
        font-size: 1.4rem !important;  /* 22.4px on mobile */
    }
    h3, .h3 {
        font-size: 1.2rem !important;  /* 19.2px on mobile */
    }
}

/* ===== STANDARDIZED BUTTONS ===== */
/* ALL BUTTONS: Black background, white text, same size */
button, .falcon-btn, .btn, 
input[type="button"], input[type="submit"], input[type="reset"],
.falcon-btn-primary, .falcon-btn-secondary, .falcon-btn--primary, 
.falcon-btn--secondary, .falcon-btn--action, .falcon-btn--neutral {
    background: #262626 !important;
    color: #ffffff !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    height: auto !important;
    min-height: 44px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
}

button:hover, .falcon-btn:hover, .btn:hover,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

button:active, .falcon-btn:active, .btn:active,
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
    background: #262626 !important;
    transform: translateY(0) !important;
}

button:disabled, .falcon-btn:disabled, .btn:disabled,
input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* EXCEPTION: Danger/Delete buttons - Keep red */
.falcon-btn--danger, .btn-danger, button.danger, button[class*="delete"], button[class*="remove"] {
    background: #C93B2A !important;
    color: #ffffff !important;
}

.falcon-btn--danger:hover, .btn-danger:hover, button.danger:hover {
    background: #a32f22 !important;
}

/* EXCEPTION: Success/Confirm buttons - Keep green */
.falcon-btn--success, .btn-success, button.success, button[class*="confirm"], button[class*="complete"] {
    background: #4DA554 !important;
    color: #ffffff !important;
}

.falcon-btn--success:hover, .btn-success:hover, button.success:hover {
    background: #3d8544 !important;
}

/* EXCEPTION: Outline buttons - White with black border */
.falcon-btn--outline, .btn-outline {
    background: #ffffff !important;
    color: #262626 !important;
    border: 2px solid #262626 !important;
}

.falcon-btn--outline:hover, .btn-outline:hover {
    background: #262626 !important;
    color: #ffffff !important;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    button, .falcon-btn, .btn,
    input[type="button"], input[type="submit"], input[type="reset"] {
        font-size: 14px !important;
        padding: 14px 20px !important;
        min-height: 48px !important;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== BODY AND PARAGRAPH TEXT ===== */
body {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: #262626 !important;
    background: #ffffff !important;
}

p, .paragraph {
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin: 0 0 1rem 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #262626 !important;
    background: #ffffff !important;
}

/* ===== FORM ELEMENTS ===== */
input, select, textarea, label {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 17px !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

label {
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    display: block;
    color: #262626 !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    padding: 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    width: 100%;
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* ===== TABLE HEADINGS ===== */
th {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #262626 !important;
    background-color: #f5f5f5 !important;
}

td {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 16px !important;
    color: #262626 !important;
    background-color: #ffffff !important;
}

table {
    color: #262626 !important;
    background-color: #ffffff !important;
}

/* ===== LINKS ===== */
a {
    font-family: 'Segoe UI', sans-serif !important;
    text-decoration: none;
    color: #0066cc !important;
}

a:visited {
    color: #0066cc !important;
}

a:hover {
    color: #004499 !important;
}

/* ===== MODAL HEADERS ===== */
.modal h1, .modal h2, .modal h3,
.dialog h1, .dialog h2, .dialog h3 {
    font-family: 'Segoe UI', sans-serif !important;
}

/* ===== CARD HEADERS ===== */
.falcon-card h2, .falcon-card h3,
.card h2, .card h3 {
    font-family: 'Segoe UI', sans-serif !important;
}

/* ===== ENSURE NO TEXT TRANSFORM ===== */
*, *::before, *::after {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
    body {
        font-size: 17px !important;
    }
    
    .container, .falcon-container {
        padding: 12px !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    button, .falcon-btn, .btn {
        display: none !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }
}

/* ===== LOGIN PAGE EXCEPTION - FINAL OVERRIDE ===== */
/* LOGIN HEADER: Blue background with white text - NO other styles should override this */
.login-header,
.login-header h1,
.login-header h2, 
.login-header h3,
.login-header p {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    font-weight: 700 !important;
}

.login-header * {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.login-header {
    background: #2A54B1 !important;
}

.login-container {
    background: white !important;
}