/* ==========================================================================
   1. VARIABLES DE THÈME & POLICES
   ========================================================================== */
:root {
    --win-blue: #000080;
    --win-yellow: #FFFF00;
    --win-light-blue: #BDD5FB;
    --win-green: #008000;
    --win-white: #FFFFFF;
    --win-light-grey: #E0E0E0;
    --max-menu-width: 500px;
}

/* ==========================================================================
   2. STYLES GÉNÉRAUX DE L'APPLICATION (JQM)
   ========================================================================== */
.ui-page.custom-bg {
    background-color: var(--win-light-grey) !important;
}

table {
    border: 1px solid var(--win-green);
    border-collapse: collapse;
}

/* ==========================================================================
   3. STRUCTURE, LAYOUT CENTRAL & MENUS
   ========================================================================== */
.center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le menu sur PC */
    padding: 20px !important;
    margin-top: 5px !important; 
}

.logo-container, .menu-container {
    width: 100%;
    max-width: var(--max-menu-width);
}

.logo-container {
    text-align: left;
    margin-bottom: 10px;
}

/* ==========================================================================
   4. HEADER, FOOTER & BOUTONS DE NAVIGATION
   ========================================================================== */
.my-header, .my-footer {
    background-color: var(--win-green) !important;
    color: var(--win-white) !important;
    text-shadow: none !important;
    border: none !important;
}

[data-role="header"].my-header {
    background-image: none !important;
    height: 60px !important; 
    min-height: 60px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.my-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    color: var(--win-white) !important;
    text-shadow: none !important;
}

/* --- FOOTER --- */
[data-role="footer"].footer-class {
    background-color: var(--win-green) !important;
    background-image: none !important;
    border: none !important;
    border-top: 1px solid white !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    /* 🌟 On laisse JQM gérer le block, on ne force plus le flex global ici */
    display: block !important; 
}

.footer-class p {
    margin: 0 !important;
    /* 🌟 C'est la ligne magique pour centrer verticalement et horizontalement sans Flexbox */
    line-height: 40px !important; 
    text-align: center !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: var(--win-white) !important;
    text-shadow: none !important;
}
/* Bouton Retour */
.my-header .ui-btn-left {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    background-color: white !important;
    color: var(--win-green) !important;
    border: 1px solid white !important;
    text-shadow: none !important;
    font-weight: bold !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

.my-header .ui-btn-left:after {
    background-color: var(--win-green) !important;
}

.my-header .ui-btn-left:active {
    background-color: #f0f0f0 !important;
}

/* ==========================================================================
   5. OPTIMISATION DES LISTVIEWS (L'aspect "Bouton" JQM)
   ========================================================================== */
.ui-listview-inset {
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.ui-listview > li > a.ui-btn {
    display: flex !important;
    align-items: center !important; 
    padding: 8px 15px !important;
}

.ui-listview li a {
    color: var(--win-green) !important;
    text-shadow: none !important;
}

.ui-listview .ui-li-heading, .ui-listview li a .ui-li-heading {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.ui-listview li a::after {
    background-color: var(--win-green) !important;
}

.ui-listview li.ui-li-divider {
    color: var(--win-green) !important;
    background-color: #e8e8e8 !important;
    text-shadow: none !important;
    border-bottom: 1px solid var(--win-green) !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 16px !important;
}

.my-custom-icon {
    width: 32px !important;  
    height: 32px !important; 
    margin-right: 12px !important;
    position: static !important;
    display: block !important;
    padding: 0 !important;
}

/* Texte Écrans infos */
.about-title { color: var(--win-green) !important; font-weight: bold !important; display: block; }
.about-subtitle { color: var(--win-green) !important; font-size: 0.85em !important; display: block; }

/* ==========================================================================
   6. GRILLES COMPACTES (TABULATOR)
   ========================================================================== */
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--win-green) !important;
    color: var(--win-white) !important;    
    font-weight: 500;
}

.tabulator .tabulator-tableholder .tabulator-cell {
    background-color: white !important;
    color: var(--win-green) !important;
    font-weight: 500;
}

.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected .tabulator-cell,
.tabulator .tabulator-row.tabulator-selected:hover,
.tabulator .tabulator-row.tabulator-selected:hover .tabulator-cell {
    background-color: var(--win-light-grey) !important;
    color: var(--win-green) !important;
    font-weight: bold; 
}

.tabulator-row {
    min-height: auto !important;
}

.tabulator-row .tabulator-cell {
    padding: 6px 4px !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   7. FORMULAIRES & ONGLETS D'ANALYSE
   ========================================================================== */
.form-block-custom {
    background-color: var(--win-light-grey) !important;
    color: var(--win-green) !important;
    border: 1px solid var(--win-green) !important;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    margin-top: 15px;
    max-width: var(--max-menu-width);
    width: 100%;
    box-sizing: border-box;
}

.form-title-custom {
    background-color: var(--win-green) !important;
    color: var(--win-white) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-weight: bold !important;
    border-bottom: 1px solid var(--win-green);
    padding-bottom: 5px;
    text-align: center;
}

.btn-validate-custom { background-color: #4CAF50 !important; border: none !important; width: 45px !important; height: 45px !important; margin: 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
.btn-cancel-custom { background-color: #d9534f !important; border: none !important; width: 45px !important; height: 45px !important; margin: 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }

.analysis-tab {
    background-color: white;
    color: #008000;
    border: 1px solid #008000;
    border-bottom: none;
    padding: 10px 25px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.analysis-tab.active-tab {
    background-color: #008000;
    color: white;
    border-color: #008000;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

/* ==========================================================================
   8. COMPORTEMENTS RESPONSIVE & RESPONSIVE FLEXBOX (Le gros morceau !)
   ========================================================================== */

/* --- A. Système de blocage de l'orientation (Smartphone Portrait) --- */
#landscape-message {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    color: white;
    text-align: center;
}

#landscape-message .message-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
}

@media screen and (max-width: 960px) and (orientation: portrait) {
    #landscape-message { display: block; }
}

/* --- B. Analyse Générale (Mise en page des tableaux de bord classiques) --- */
.dashboard-flex-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

@media screen and (max-width: 960px) {
    .dashboard-flex-container {
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard-flex-container > div:first-child {
        flex: 1 !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- C. 🌟 SYSTÈME DE CENTRAGE EXCLUSIF POUR L'ÉCRAN <TOP 3> --- */

/* Par défaut sur MOBILE : On écrase complètement les deux blocs tampons */
.top3-buffer-left, .top3-buffer-right {
    display: none !important;
}

/* Sur ORDINATEUR & TABLETTE PAYSAGE (Écrans larges) */
@media screen and (min-width: 768px) {
    /* On réaffiche UNIQUEMENT nos tampons spécifiques sans toucher au reste de l'appli */
    .top3-buffer-left, .top3-buffer-right {
        display: block !important;
        flex: 0 0 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 100% !important;
    }
}