/*
===================================================================================
FALCON GAS SA - CENTRAL THEME VARIABLES
Default values for the --app-* custom properties used by theme-settings.html.
central.js overrides these at runtime with any saved user preferences.
===================================================================================
*/

:root {
    /* ===== Page & Text ===== */
    --app-bg:               #f5f5f5;
    --app-text:             #262626;
    --app-panel-bg:         #ffffff;
    --app-line:             #e2e8f0;
    --app-muted:            #6b7280;
    --app-table-bg:         #ffffff;
    --app-table-text:       #262626;
    --app-table-head-bg:    #2A54B1;
    --app-table-head-text:  #ffffff;
    --app-table-head-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --app-table-head-font-size:   14px;
    --app-table-body-bg:    #ffffff;
    --app-table-body-text:  #262626;
    --app-table-body-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --app-table-body-font-size:   14px;
    --app-table-border:     #e2e8f0;
    --app-table-text-transform: none;

    /* ===== Cards ===== */
    --app-card-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --app-card-title-size:  16px;
    --app-card-text-size:   14px;
    --app-card-radius:      12px;
    --app-card-pad-y:       14px;
    --app-card-pad-x:       14px;
    --app-card-text-align:  center;
    --app-card-1-bg:        #2A54B1;
    --app-card-1-text:      #ffffff;
    --app-card-1-border:    #1e3f85;
    --app-card-2-bg:        #2A54B1;
    --app-card-2-text:      #ffffff;
    --app-card-2-border:    #1e3f85;
    --app-card-3-bg:        #2A54B1;
    --app-card-3-text:      #ffffff;
    --app-card-3-border:    #1e3f85;
    --app-card-4-bg:        #2A54B1;
    --app-card-4-text:      #ffffff;
    --app-card-4-border:    #1e3f85;

    /* ===== Badges ===== */
    --app-badge-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --app-badge-font-size:   12px;
    --app-badge-radius:      999px;
    --app-badge-pad-y:       4px;
    --app-badge-pad-x:       10px;
    --app-badge-success-bg:  #16a34a;
    --app-badge-success-text:#ffffff;
    --app-badge-danger-bg:   #dc2626;
    --app-badge-danger-text: #ffffff;
    --app-badge-warning-bg:  #ffffff;
    --app-badge-warning-text:#ffffff;
    --app-badge-info-bg:     #2563eb;
    --app-badge-info-text:   #ffffff;
    --app-badge-map-active:  success;
    --app-badge-map-cancelled: danger;
    --app-badge-map-pending: warning;
    --app-badge-map-synced: info;
    --app-badge-map-unsynced: danger;
    --app-badge-map-walkin: success;
    --app-badge-map-whatsapp: success;
    --app-badge-map-phone: warning;
    --app-badge-map-online: info;
    --app-badge-map-regular: info;
    --app-badge-map-delivery: danger;

    /* ===== Buttons ===== */
    --app-button-bg:        #2A54B1;   /* Jacques' approved blue */
    --app-button-bg-alt:    #1e3f85;   /* Darker blue for hover / dark-shade */
    --app-button-text:      #ffffff;
    --app-button-align:     center;

    /* ===== Status / Accent ===== */
    --app-accent:           #ffffff;   /* Falcon orange */
    --app-ok:               #4DA554;   /* Falcon green */
    --app-warn:             #ffffff;   /* Re-use orange for warnings */

    /* ===== Hero Bar ===== */
    --app-hero-bg:          #2A54B1;
    --app-hero-bg-alt:      #1e3f85;
    --app-hero-text:        #ffffff;

    /* ===== Logout Button ===== */
    --app-logout-bg:        #C93B2A;   /* Falcon red */
    --app-logout-text:      #ffffff;
    --app-logout-size:      14px;

    /* ===== Typography ===== */
    --app-font-family:      "Segoe UI", Tahoma, Arial, sans-serif;
    --app-hero-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --app-hero-title-size:          32px;
    --app-hero-subtitle-size:       16px;
    --app-hero-title-size-tablet:   24px;
    --app-hero-title-size-mobile:   20px;
    --app-mobile-font-scale:        0.95;

    /* ===== Spacing & Layout ===== */
    --app-hero-padding-y:   14px;
    --app-hero-padding-x:   16px;
    --app-hero-radius:      8px;
    --app-radius:           12px;
    --app-ui-scale:         1;
    --app-page-max-width:   1680px;
    --app-page-side-gap:    24px;
    --app-page-inner-pad:   18px;
    --app-touch-min:        44px;

    /* ===== Logo ===== */
    --app-logo-width:       150px;
    --app-logo-height:      150px;
    --app-logo-hide-mobile: block;
}

/*
===============================================================================
Reusable Hero Contract
Pages only need these classes:
- .falcon-hero-bar
- .hero-content
- .hero-logo-left
- .hero-logo
- .page-title
===============================================================================
*/
.falcon-hero-bar .hero-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.falcon-hero-bar .hero-logo-left,
.falcon-hero-bar .hero-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 64px;
    max-height: 64px;
    width: auto;
    height: auto;
}

.falcon-hero-bar .hero-logo-left {
    left: 40px;
}

.falcon-hero-bar .hero-logo {
    right: 40px;
}

.falcon-hero-bar .hero-content .page-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
    max-width: calc(100% - 240px);
    font-family: var(--app-hero-font-family, "Segoe UI", Tahoma, Arial, sans-serif);
    font-size: var(--app-hero-title-size, 32px);
    color: var(--app-hero-text, #ffffff);
}

@media (max-width: 1024px) {
    .falcon-hero-bar .hero-logo-left,
    .falcon-hero-bar .hero-logo {
        max-width: 52px;
        max-height: 52px;
    }

    .falcon-hero-bar .hero-logo-left {
        left: 24px;
    }

    .falcon-hero-bar .hero-logo {
        right: 24px;
    }

    .falcon-hero-bar .hero-content .page-title {
        font-size: var(--app-hero-title-size-tablet, 24px);
        max-width: calc(100% - 220px);
    }
}

@media (max-width: 768px) {
    .falcon-hero-bar .hero-logo-left,
    .falcon-hero-bar .hero-logo {
        max-width: 42px;
        max-height: 42px;
    }

    .falcon-hero-bar .hero-logo-left {
        left: 12px;
    }

    .falcon-hero-bar .hero-logo {
        right: 12px;
    }

    .falcon-hero-bar .hero-content .page-title {
        font-size: var(--app-hero-title-size-mobile, 20px);
        max-width: calc(100% - 150px);
    }
}

@media (max-width: 480px) {
    .falcon-hero-bar .hero-logo-left,
    .falcon-hero-bar .hero-logo {
        max-width: 34px;
        max-height: 34px;
    }

    .falcon-hero-bar .hero-logo-left {
        left: 8px;
    }

    .falcon-hero-bar .hero-logo {
        right: 8px;
    }

    .falcon-hero-bar .hero-content .page-title {
        max-width: calc(100% - 112px);
    }
}