/* =========================================
   GLOBAL RESET
   ========================================= */
   html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-x: hidden; 
}

/* =========================================
   INDEX.HTML
   ========================================= */
body.page-index { display: flex; flex-direction: column; background-color: #ffffff; width: 100%; }
.page-index #topHeader { flex: 0 0 auto; width: 100%; z-index: 1001; position: relative; }
.page-index #welcome-msg { text-align: right; padding: 5px 15px; font-size: 14px; color: #0C419a; font-weight: bold; background-color: #f9f9f9; border-bottom: 1px solid #ddd; }
.page-index #main-content { flex: 1; display: block; position: relative; width: 100%; overflow: hidden; }
.page-index #contentFrame { width: 100%; height: 100%; border: none; display: block; overflow: hidden; }
#global-footer { flex: 0 0 auto; background-color: #f9f9f9; border-top: 1px solid #ddd; text-align: center; padding: 10px; font-size: 13px; color: #777; width: 100%; z-index: 999; }

/* =========================================
   NAVBAR STYLES
   ========================================= */
.navbar-custom { background-color: #d9edf7; border-color: #bce8f1; margin-bottom: 0; border-radius: 0; }
.navbar-brand-custom { color: #31708f !important; font-weight: bold; }
.nav-link-custom { color: #333 !important; }
.nav-whatsapp-link { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; padding: 10px 15px !important; color: #333 !important; text-decoration: none; }
.nav-whatsapp-text { font-size: 13px; margin-right: 8px; font-weight: bold; margin-bottom: 0; }

/* ---------------------------------------------------- */
/* FIXED: TABLET & MOBILE MENU (Max-Width 991px)      */
/* ---------------------------------------------------- */
@media (max-width: 991px) {
    .navbar-header { float: none; }
    .navbar-left, .navbar-right { float: none !important; }
    .navbar-toggle { display: block; background-color: transparent !important; border-color: #31708f; }
    .navbar-toggle .icon-bar { background-color: #31708f !important; }
    
    /* FIX FOR TABLET PORTRAIT:
       Bootstrap defaults (>=768px) usually set width:auto and float elements.
       We must override this to force the dropdown "Drawer" behavior up to 991px.
    */
    .navbar-collapse { 
        border-top: 1px solid transparent; 
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
        width: 100% !important; /* Force full width so it drops down */
        position: relative !important; /* Reset position for standard drop-down */
        bottom: auto !important; 
        top: auto !important;
        background-color: #d9edf7;
    }
    
    .navbar-collapse.collapse { display: none !important; }
    
    /* Support both 'in' (BS3) and 'show' (BS4/5) */
    .navbar-collapse.collapse.in,
    .navbar-collapse.collapse.show { 
        display: block !important; 
        overflow-y: auto; 
        max-height: 75vh; 
    }
    
    #user-info-block { display: block !important; float: none !important; width: 100%; text-align: left; margin: 0; padding: 10px 15px; border-bottom: 1px solid #bce8f1; }
    
    .navbar-nav { float: none !important; margin-top: 0; }
    .navbar-nav > li { float: none; }
    .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
    .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; }
    .navbar-nav .open .dropdown-menu > li > a { color: #333 !important; font-weight: 600 !important; }
}

/* =========================================
   BOTTOM NAVIGATION (Mobile Only)
   ========================================= */
#bottom-nav {
    background-color: #f8f8f8;
    border-top: 1px solid #e7e7e7;
    min-height: 60px; /* Taller for thumbs */
    margin-bottom: 0;
    z-index: 2000; /* Highest priority */
}

.nav-btn {
    border: none !important;
    background: transparent !important;
    /* CHANGED: Set to Brand Blue instead of Gray (#555) */
    color: #0C419a !important; 
    padding-top: 8px !important;
    font-size: 11px !important;
    box-shadow: none !important;
}

.nav-btn:hover, .nav-btn:focus, .nav-btn:active {
    color: #093175 !important; /* Slightly darker blue on hover */
    /* CHANGED: Light Blue background on hover to match theme */
    background-color: #d9edf7 !important; 
}

.nav-btn .glyphicon {
    font-size: 20px;
    margin-bottom: 4px;
}

/* Style for the integrated footer text in mobile nav */
.mobile-footer-text {
    text-align: center;
    font-size: 10px;
    color: #999;
    padding: 2px 0 5px 0;
    width: 100%;
    background-color: #f8f8f8;
    display: block;
    line-height: 1.2;
}

/* =========================================
   VISIBILITY HELPERS (Portrait Mobile)
   ========================================= */

/* Default: Hide bottom nav on desktop */
.visible-xs-portrait { display: none !important; }
.hidden-xs-portrait { display: block !important; } /* Desktop: Block */

/* 1. Mobile Portrait: Hide Top Header Content, Show Bottom Nav */
@media screen and (max-width: 767px) and (orientation: portrait) {
    .visible-xs-portrait { display: block !important; }
    .hidden-xs-portrait { display: none !important; } /* Mobile: None */
    
    /* --- HIDE DEFAULT FOOTER --- */
    /* We show it inside #bottom-nav instead */
    #global-footer { display: none !important; }

    /* --- FIX: HEADER HEIGHT --- */
    /* Aggressively squash the desktop header container */
    #topHeader,
    #topHeader .navbar,
    #topHeader .container-fluid {
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: visible !important; /* Allow navbar to popup */
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1049;
    }
    
    #topHeader .navbar-header { display: none !important; }
    
    /* FIX: Make Mobile Header Fixed */
    #mobile-top-bar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px !important;
        z-index: 2000; /* Above everything */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* PUSH CONTENT DOWN TO AVOID OVERLAP */
    /* Top: 40px header. Bottom: ~80px for Nav+Text */
    #main-content {
        margin-top: 40px !important;
        /* Increase space for iframe to not get cut off by taller bottom nav */
        height: calc(100vh - 40px - 85px) !important; 
    }

    /* --- FIX: PREVENT FLASH --- */
    /* Hide collapsed menu completely so it doesn't take space at top */
    .navbar-collapse.collapse {
        display: none !important;
    }

    /* --- FIX: DRAWER DISPLAY FOR PHONE PORTRAIT ONLY --- */
    /* Target BOTH the open state AND the animating state (.collapsing) */
    .navbar-collapse.collapse.in,
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing {
        display: block !important;
        position: fixed !important;
        bottom: 85px !important; /* Raised to clear nav+text */
        right: 0 !important;
        top: auto !important; /* Override any top calc */
        left: auto !important;
        
        width: 70% !important;
        max-width: 300px;
        max-height: 60vh;
        
        background-color: #d9edf7;
        border-top: 2px solid #0C419a;
        border-left: 1px solid #bce8f1;
        border-top-left-radius: 8px;
        box-shadow: -5px -5px 15px rgba(0,0,0,0.1);
        z-index: 1050;
        overflow-y: auto;
        
        /* DISABLE ANIMATION HEIGHT CALCULATION */
        height: auto !important; 
        transition: none !important;  /* KILLS THE SLIDE EFFECT */
    }
    
    .navbar-collapse.collapsing {
        bottom: 85px !important;
    }
}

/* 2. Mobile Landscape: Show Top Header, Hide Bottom Nav */
/* TARGET PHONES ONLY via Max Height */
@media screen and (orientation: landscape) and (max-height: 600px) {
    #bottom-nav { display: none !important; }
    
    /* FIX: Hide Mobile Branding */
    #mobile-top-bar { display: none !important; }
    #global-footer { display: block !important; } /* Show normal footer */
    
    /* FIX: Correct Menu Visibility */
    .visible-xs-portrait { display: none !important; }
    .hidden-xs-portrait { display: block !important; }

    /* Force Header Visible */
    #topHeader { 
        display: block !important;
        position: relative !important; 
        height: auto !important; 
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    #topHeader .navbar-header { display: block !important; }
    .navbar-toggle { display: block !important; }
    
    /* FIX: Ensure Menu is Collapsed by Default */
    .navbar-collapse.collapse {
        display: none !important; /* Forces it hidden unless .in is present */
    }
    
    /* Show when opened */
    .navbar-collapse.collapse.in,
    .navbar-collapse.collapse.show {
        display: block !important;
        position: absolute;
        bottom: auto;
        top: 100%;
        max-height: 80vh;
        width: 100% !important;
        right: 0;
        left: 0;
        background-color: #d9edf7;
        overflow-y: auto;
    }
    
    /* Reset Content Margins */
    #main-content {
        margin-top: 0 !important;
        height: auto !important;
    }
}

/* =========================================
   PAGE STYLES
   ========================================= */
body.page-splash { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: #ffffff; text-align: center; margin: 0; }
.page-splash .content-wrapper { flex: 1; display: flex; align-items: flex-start; justify-content: center; min-height: 0; padding: 10px; padding-top: 40px; overflow: hidden; }
.page-splash .hero-img { max-height: 65vh; max-width: 100%; width: auto; height: auto; object-fit: contain; }

body.page-profile { background-color: #f5f5f5; padding: 40px 20px 20px 20px; height: auto; min-height: 100%; box-sizing: border-box; }
.profile-card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; max-width: 600px; margin: 0 auto; }
.profile-header { background-color: #0C419a; color: white; padding: 30px 20px; text-align: center; }
#avatarContainer { width: 100px; height: 100px; background-color: rgba(255,255,255,0.2); border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden; }
.profile-body { padding: 20px; }
.detail-row { border-bottom: 1px solid #eee; padding: 12px 0; display: flex; justify-content: space-between; }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-weight: bold; color: #555; }
.detail-value { color: #333; text-align: right; }

body.page-login { display: flex; justify-content: center; align-items: center; height: 100%; background-color: #f5f5f5; overflow: hidden; }
.login-wrapper { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }

body.page-calendar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #ffffff; display: flex; flex-direction: column; height: 100%; overflow: hidden; margin: 0; padding: 0; }
#calendar-container { flex: 1; background: white; padding: 0; overflow-y: auto; min-height: 0; }
.page-calendar footer { flex-shrink: 0; background: #fff; padding: 10px; text-align: center; border-top: 1px solid #eee; }
#calendar { min-height: 600px; margin: 0 2px; }
#loading { text-align: center; font-size: 1.2em; color: #666; margin-bottom: 10px; padding-top: 10px; }

/* --- UTILITIES --- */
.fc-header-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 10px; margin-bottom: 1.5em !important; }
.fc-toolbar-title { font-size: 1.75em !important; color: #333; font-weight: bold; }
.fc-button-primary { background-color: #0C419a !important; border-color: #0C419a !important; }
.fc-event-main { padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important; }
.selected-day { background-color: #fff9c4 !important; }
.loader-spinner { border: 3px solid #f3f3f3; border-top: 3px solid #0C419a; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-right: 8px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.btn-add-me { background: linear-gradient(135deg, #28a745 0%, #218838 100%); color: white; border: none; border-radius: 50px; padding: 6px 16px; font-size: 0.85em; font-weight: 600; text-transform: uppercase; cursor: pointer; margin-left: 10px; }
.btn-clock-in { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border: none; border-radius: 50px; padding: 6px 16px; font-size: 0.85em; font-weight: 600; text-transform: uppercase; cursor: pointer; margin-left: 10px; display: inline-flex; align-items: center; gap: 5px; }
.btn-clock-in:disabled { background: #ccc; cursor: not-allowed; }

.timesheet-container { max-width: 1000px; margin: 0 auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.timesheet-container h2 { border-bottom: 2px solid #0C419a; padding-bottom: 10px; color: #333; margin-top: 0; }
.ts-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.ts-table th, .ts-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; }
.ts-table th { background-color: #f8f9fa; color: #0C419a; font-weight: 600; }
.ts-table tr:hover { background-color: #f1f1f1; }
.money { font-weight: bold; color: #28a745; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #0C419a; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
.ts-col-desktop { display: table-cell !important; white-space: normal !important; padding: 8px 5px !important; font-size: 0.95em; vertical-align: bottom; }
.ts-col-mobile { display: none !important; }

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container.timesheet-container { width: 98% !important; max-width: 98% !important; padding-left: 5px !important; padding-right: 5px !important; }
    .timesheet-container { padding: 10px !important; }
    .ts-table th, .ts-table td { padding: 8px 4px !important; font-size: 0.9em; }
}
@media screen and (max-width: 767px) {
    .ts-col-desktop { display: none !important; }
    .ts-col-mobile { display: table-cell !important; }
    .ts-table { font-size: 13px; }
    .ts-table th, .ts-table td { padding: 8px 4px; }
}
@media screen and (min-width: 480px) and (max-width: 900px) and (orientation: landscape) {
    #global-footer { display: none !important; }
    .ts-table th { white-space: normal !important; word-wrap: break-word !important; max-width: 50px; line-height: 1.0; vertical-align: bottom; font-size: 10px !important; padding: 2px !important; }
    .ts-col-desktop { display: table-cell !important; }
    .ts-col-mobile { display: none !important; }
    .container.timesheet-container { width: 98vw !important; max-width: 98vw !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .timesheet-container { padding: 2px !important; width: 100% !important; }
    .ts-table { font-size: 10px !important; }
    .ts-table td { padding: 4px 2px !important; }
}

.week-header-row td { background-color: #e9ecef; font-weight: 700; color: #0C419a; padding: 12px; font-size: 1.1em; border-top: 2px solid #b0b0b0; }
.week-summary-row { background-color: #fff8e1; border-top: 2px solid #0C419a; border-bottom: 2px solid #0C419a; font-weight: 800; color: #333; font-size: 1.05em; }
.pagination-controls { display: flex; justify-content: center; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.page-btn { background-color: #0C419a; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.page-btn:disabled { background-color: #ccc; cursor: not-allowed; }
#page-indicator { margin: 0 30px; font-weight: bold; color: #555; }

@media screen and (max-width: 767px) and (orientation: portrait) {
    .fc-event-title { display: none !important; }
    .fc-event-time { font-weight: 900 !important; font-size: 1.1em !important; display: block !important; text-align: left !important; white-space: normal !important; padding-left: 2px; }
    .fc-event { min-height: 25px; }
}

.gps-section { margin-top: 25px; text-align: center; padding-bottom: 30px; }
.btn-gps-check { background-color: #0C419a; color: white; border: none; padding: 12px 24px; border-radius: 50px; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.1s, background-color 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-gps-check:hover { background-color: #093175; }
.btn-gps-check:active { transform: scale(0.95); }
#gps-result { display: none; margin-top: 15px; font-size: 14px; padding: 15px; border-radius: 8px; max-width: 90%; margin-left: auto; margin-right: auto; }
.gps-box { border: 1px solid #ddd; }
.gps-loading { background-color: #f0f0f0; color: #555; }
.gps-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
.gps-error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }

@media screen and (max-width: 767px) and (orientation: portrait) {
    #user-info-block { text-align: center; }
    #user-info-block a { margin-top: 5px; display: inline-block; }
    .logout-separator { display: none; }
}