:root{
    --fcl-blue:#0b4ea2;
    --fcl-deep-blue:#073b7a;
    --fcl-orange:#f58220;
    --fcl-gold:#f6c343;
    --fcl-bg:#fff3d6;
    --text:#102033;
    --muted:#666;
    --white:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
    margin:0;
    padding:0;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:#efe7cb;
    font-family:'Segoe UI',sans-serif;
}

/* HEADER */
.site-header{
    background:var(--fcl-blue);
    border-bottom:5px solid var(--fcl-orange);
    position:sticky;
    top:0;
    z-index:9999;
}

.header-bar{
    max-width:1400px;
    margin:0 auto;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.brand{
    display:flex;
    align-items:center;
    gap:16px;
}

.brand img{
    width:78px;
    height:78px;
    object-fit:contain;
}

.brand h1{
    color:white;
    font-size:28px;
    line-height:1.1;
}

.brand p{
    color:var(--fcl-gold);
    font-size:15px;
    margin-top:5px;
}

.main-menu{
    display:flex;
    gap:28px;
    align-items:center;
}

.main-menu a{
    color:white;
    text-decoration:none;
    font-weight:700;
}

.user-menu{
    position:relative;
}

.login-link,
.user-name{
    background:var(--fcl-orange);
    color:white;
    padding:12px 18px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
}

.dropdown-menu{
    display:none;
    position:absolute;
    right:0;
    top:48px;
    background:white;
    min-width:200px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    overflow:hidden;
    z-index:999;
}

.dropdown-menu a{
    display:block;
    padding:13px 16px;
    text-decoration:none;
    color:#111;
    font-weight:600;
    border-bottom:1px solid #eee;
}

.user-dropdown:hover .dropdown-menu{
    display:block;
}

/* MAIN CONTENT */
.page-content{
    flex:1;
    width:100%;
    padding:30px 35px 20px;
}

/* HERO */
.hero{
    max-width:1400px;
    margin:0 auto 35px;
    background:linear-gradient(120deg, #536579, #ff9f43);
    color:white;
    padding:60px 55px;
    border-radius:0 0 28px 28px;
}

.hero h1{
    font-size:44px;
    margin-bottom:22px;
}

.hero p{
    margin-bottom:20px;
}

/* DASHBOARD */
.dashboard-header{
    max-width:1050px;
    margin:0 auto 25px;
}

.dashboard-header h1{
    font-size:34px;
    margin-bottom:10px;
}

.dashboard-grid{
    max-width:1250px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:24px;
    padding-bottom:20px;
}

.dash-card,
.dashboard-card,
.feature-card{
    background:#fff;
    border-radius:22px;
    padding:30px;
    min-height:160px;
    text-decoration:none;
    color:#111;
    box-shadow:0 8px 22px rgba(0,0,0,.10);
    border-top:6px solid var(--fcl-orange);
    transition:.25s;
}

.dash-card:hover,
.dashboard-card:hover,
.feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.dash-icon{
    font-size:34px;
    margin-bottom:14px;
}

.dash-card h3,
.dashboard-card h3,
.feature-card h3{
    color:var(--fcl-blue);
    font-size:22px;
    margin-bottom:10px;
}

.dash-card p,
.dashboard-card p,
.feature-card p{
    color:#333;
}

/* ADMIN */
.admin-page-wrap{
    max-width:1050px;
    margin:0 auto;
}

.admin-action-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:20px 0;
}

.admin-card-panel{
    background:#fff;
    border-radius:24px;
    padding:28px;
    box-shadow:0 10px 28px rgba(0,0,0,.14);
    border-top:6px solid var(--fcl-orange);
    margin-top:24px;
}

.admin-card-panel h2{
    color:var(--fcl-blue);
    margin-bottom:8px;
}

.admin-help-text{
    color:#666;
    margin-bottom:22px;
}

.table-scroll{
    overflow-x:auto;
}

.admin-clean-table{
    width:100%;
    border-collapse:collapse;
}

.admin-clean-table th{
    background:var(--fcl-blue);
    color:white;
    padding:14px;
    text-align:left;
}

.admin-clean-table td{
    padding:14px;
    border-bottom:1px solid #eee;
}

.admin-clean-table tr:nth-child(even){
    background:#fff8e8;
}

/* BUTTONS */
.back-icon-text,
.primary-btn,
.primary-btn-small{
    display:inline-block;
    background:var(--fcl-orange);
    color:white;
    padding:11px 20px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    border:none;
    cursor:pointer;
}

.mini-btn{
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    color:white;
    margin-right:8px;
}

.edit-btn{
    background:#0b4ea2;
}

.delete-btn{
    background:#e02424;
}

/* FORMS */
.form-row{
    margin-bottom:18px;
}

.form-row label{
    display:block;
    font-weight:700;
    color:var(--fcl-blue);
    margin-bottom:8px;
}

.form-row input,
.form-row select,
.form-row textarea{
    width:100%;
    max-width:520px;
    padding:13px;
    border:1px solid #ccc;
    border-radius:12px;
    background:#f4f7fb;
    font-size:15px;
}

.form-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
}

/* STATUS */
.status-pill,
.status-badge{
    display:inline-block;
    padding:8px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    text-transform:capitalize;
}

.status-scheduled{
    background:#dbeafe;
    color:#1d4ed8;
}

.status-completed{
    background:#dcfce7;
    color:#166534;
}

.status-pending,
.status-standby{
    background:#fef3c7;
    color:#92400e;
}

.status-cancelled,
.status-inactive{
    background:#fee2e2;
    color:#991b1b;
}

.status-active{
    background:#dcfce7;
    color:#166534;
}

/* ALERTS */
.success-box{
    background:#d4edda;
    color:#155724;
    padding:13px 16px;
    border-radius:12px;
    margin:20px 0;
    font-weight:bold;
}

.error-box{
    background:#f8d7da;
    color:#721c24;
    padding:13px 16px;
    border-radius:12px;
    margin:20px 0;
    font-weight:bold;
}

/* FOOTER */
.site-footer{
    background:#0d47a1;
    color:white;
    padding:18px 30px;
    border-top:4px solid var(--fcl-orange);
    margin-top:auto;
}

.footer-content{
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    font-size:14px;
}

/* MOBILE NAV */
.mobile-bottom-nav,
.mobile-account-menu{
    display:none;
}

/* DESKTOP SCROLL FIX */
@media (min-width:769px){

    html,
    body{
        overflow:hidden;
    }

    .page-content{
        height:calc(100vh - 145px);
        overflow-y:auto;
    }
}

/* MOBILE */
/* MOBILE */
@media(max-width:768px){

    html,
    body{
        overflow:auto;
    }

    .main-menu,
    .user-menu,
    .site-footer{
        display:none !important;
    }

    .header-bar{
        padding:14px 16px;
        justify-content:flex-start;
    }

    .brand img{
        width:68px;
        height:68px;
    }

    .brand h1{
        font-size:22px;
    }

    .brand p{
        font-size:12px;
    }

    .page-content{
        padding:20px 14px 95px;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .mobile-bottom-nav{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height:74px;
        background:#0d47a1;
        border-top:4px solid var(--fcl-orange);
        display:flex;
        justify-content:space-around;
        align-items:center;
        z-index:9999;
    }

    .mobile-bottom-nav a{
        color:white;
        text-decoration:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        font-size:22px;
        width:25%;
    }

    .mobile-bottom-nav span{
        font-size:12px;
        margin-top:3px;
    }

    .mobile-account-menu{
        position:fixed;
        bottom:86px;
        right:14px;
        background:white;
        border-radius:18px;
        box-shadow:0 10px 28px rgba(0,0,0,.22);
        overflow:hidden;
        flex-direction:column;
        min-width:230px;
        z-index:99999;
    }

    .mobile-account-menu.show{
        display:flex;
    }

    .mobile-account-menu a{
        padding:15px 18px;
        text-decoration:none;
        color:#111;
        border-bottom:1px solid #eee;
        font-weight:700;
    }
}

/* DESKTOP HOME NO-SCROLL */
@media(min-width:769px){

    html,
    body{
        height:100vh;
        overflow:hidden;
    }

    .page-content{
        height:calc(100vh - 185px);
        overflow:hidden;
        padding:22px 35px;
    }

    .home-grid{
        height:100%;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows:repeat(2, 1fr);
        gap:20px;
        padding-bottom:0;
    }

    .home-grid .dash-card{
        min-height:0;
        height:100%;
        padding:22px 26px;
    }

    .home-grid .dash-icon{
        font-size:28px;
        margin-bottom:8px;
    }

    .home-grid h3{
        font-size:20px;
        margin-bottom:6px;
    }

    .home-grid p{
        font-size:14px;
        line-height:1.35;
    }
}
/* ===== FIXED HEADER + FOOTER ===== */

.site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    z-index:9999 !important;
}

.site-footer{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:58px !important;
    background:#0d47a1 !important;
    color:#fff !important;
    border-top:4px solid #f58220 !important;
    z-index:9999 !important;
    display:block !important;
}

.footer-content{
    height:54px !important;
    max-width:1400px !important;
    margin:0 auto !important;
    padding:0 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    font-size:14px !important;
}

/* desktop content between header/footer */
@media(min-width:769px){

    body{
        overflow:hidden !important;
    }

    .page-content{
        position:fixed !important;
        top:125px !important;
        bottom:58px !important;
        left:0 !important;
        right:0 !important;
        overflow-y:auto !important;
        padding:30px 35px !important;
    }
}

/* mobile fixed header + bottom nav */
@media(max-width:768px){

    .site-header{
        height:auto !important;
    }

    .site-footer{
        display:none !important;
    }

    .page-content{
        padding-top:105px !important;
        padding-bottom:90px !important;
    }

    .mobile-bottom-nav{
        position:fixed !important;
        bottom:0 !important;
        left:0 !important;
        width:100% !important;
        height:74px !important;
        display:flex !important;
        z-index:10000 !important;
    }
}
/* FORCE FOOTER DESIGN */

.site-footer{
    background:#0d47a1 !important;
    border-top:4px solid #f58220 !important;
    color:#ffffff !important;
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:58px !important;
    z-index:99999 !important;
    display:flex !important;
    align-items:center !important;
}

.footer-content{
    width:100% !important;
    max-width:1400px !important;
    margin:0 auto !important;
    padding:0 30px !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    color:white !important;
}
/* FINAL MOBILE FOOTER/MENU FIX */
@media(max-width:768px){

    .site-footer,
    .desktop-footer{
        display:none !important;
        visibility:hidden !important;
        height:0 !important;
    }

    .mobile-bottom-nav{
        position:fixed !important;
        bottom:0 !important;
        left:0 !important;
        width:100% !important;
        height:74px !important;
        background:#0d47a1 !important;
        border-top:4px solid #f58220 !important;
        display:flex !important;
        justify-content:space-around !important;
        align-items:center !important;
        z-index:999999 !important;
    }

    .mobile-bottom-nav a{
        color:white !important;
        text-decoration:none !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        font-size:22px !important;
        width:25% !important;
    }

    .mobile-bottom-nav span{
        font-size:12px !important;
        margin-top:3px !important;
    }

    .page-content{
        padding-bottom:95px !important;
    }
}
/* FIX MOBILE HEADER */

@media(max-width:768px){

    .site-header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
        z-index:999999 !important;
    }

    .page-content{
        padding-top:115px !important;
    }
}