/* =====================================
   JAV CATERING SYSTEM
   MAIN STYLE CSS
   Based on index.php Design
===================================== */


/* RESET */

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


body{

    font-family:'Segoe UI',
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    background:#f8f9fa;

    color:#333;

}


/* COLORS */

:root{

    --primary:#c9a227;

    --primary-dark:#b38f1f;

    --dark-green:#6b1220;

    --light:#f8f9fa;

    --white:#ffffff;

    --shadow:
    0 4px 15px rgba(0,0,0,0.10);

}


/* ==========================
   MAIN NAVBAR (index.php)
   FIX: this was missing entirely,
   which is why the navbar looked
   invisible/transparent before.
========================== */

.navbar{

    background: var(--dark-green);

    box-shadow: 0 2px 15px rgba(0,0,0,.15);

}

.navbar .nav-link{

    color: rgba(255,255,255,.9) !important;

    font-weight: 500;

}

.navbar .nav-link:hover{

    color: var(--primary) !important;
}

.navbar-brand{

    color: white !important;

}

/* LOGIN BUTTON ONLY — keep the existing navbar color unchanged. */
.navbar .navbar-login-btn{
    background:#198754 !important;
    color:#fff !important;
    border-radius:6px;
    padding:8px 14px !important;
    margin-left:8px;
    font-weight:600;
}

.navbar .navbar-login-btn:hover,
.navbar .navbar-login-btn:focus{
    background:#157347 !important;
    color:#fff !important;
}

.navbar{
    background: #6b1220 !important;
    background-color: #6b1220 !important;
}

/* FIX: body needs top padding so page content
   doesn't hide behind the fixed-top navbar.
   Add class="has-fixed-nav" to <body> on pages
   that use the fixed-top navbar (e.g. index.php). */

body.has-fixed-nav{

    padding-top: 76px;

}


/* ==========================
   CONTAINER
========================== */

.container-box{

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:var(--shadow);

}



/* ==========================
   PAGE TITLE
========================== */


.page-title{

    color:var(--dark-green);

    font-size:2rem;

    font-weight:700;

    margin-bottom:30px;

    position:relative;

}


.page-title::after{

    content:"";

    display:block;

    width:80px;

    height:4px;

    background:var(--primary);

    margin-top:10px;

    border-radius:10px;

}



/* ==========================
   BUTTON STYLE
========================== */


.btn-primary-custom{


    background:var(--primary);

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}



.btn-primary-custom:hover{


    background:var(--primary-dark);

    transform:translateY(-3px);

    color:white;

}




.btn-outline-custom{


    border:2px solid var(--primary);

    color:var(--primary);

    background:white;

    padding:10px 25px;

    border-radius:50px;

    font-weight:600;

}



.btn-outline-custom:hover{


    background:var(--primary);

    color:white;

}



/* FIX: Cancel Reservation (reservation_details.php) used to be plain
   Bootstrap "btn btn-danger btn-sm", which ignores .btn-outline-custom's
   padding/border-radius/font-weight — so it rendered noticeably smaller
   and squarer than the "Edit Reservation" button next to it, even though
   both sit in the same d-flex row. This mirrors .btn-outline-custom's
   shape (same pill radius, padding, font-weight) but filled red, so the
   two buttons line up evenly. */
.btn-danger-custom{

    border:2px solid #dc3545;

    color:white;

    background:#dc3545;

    padding:10px 25px;

    border-radius:50px;

    font-weight:600;

}



.btn-danger-custom:hover{


    background:#b02a37;

    border-color:#b02a37;

    color:white;

}



/* ==========================
   CARD DESIGN
========================== */


.custom-card{


    background:white;

    border:none;

    border-radius:12px;

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:.3s;

}



.custom-card:hover{


    transform:translateY(-8px);

    box-shadow:
    0 8px 25px rgba(0,0,0,.15);

}




.card-header-green{


    background:
    linear-gradient(
    135deg,
    #c9a227,
    #b38f1f
    );


    color:white;

    padding:20px;

    font-weight:700;

}




.card-body-custom{

    padding:25px;

}




/* ==========================
   TABLE DESIGN
========================== */


.table-custom{


    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}



.table-custom thead{


    background:var(--dark-green);

    color:white;

}



.table-custom tbody tr:hover{


    background:#f1fff7;

}



/* ==========================
   FORM DESIGN
========================== */


.form-control{


    border-radius:10px;

    padding:12px;

    border:1px solid #ddd;

}



.form-control:focus{


    border-color:var(--primary);

    box-shadow:
    0 0 0 .2rem rgba(201, 162, 39,.25);

}



/* ==========================
   STATUS BADGE
========================== */


.status{

    padding:7px 15px;

    border-radius:20px;

    font-size:.85rem;

    font-weight:600;

}



.pending{

    background:#fff3cd;

    color:#856404;

}



.confirmed{

    background:#d4edda;

    color:#155724;

}



.finished{

    background:#cfe2ff;

    color:#084298;

}



.declined{

    background:#f8d7da;

    color:#842029;

}



.archived{

    background:#e2e3e5;

    color:#41464b;

}


.verified{

    background:#d4edda;

    color:#155724;

}


.rejected{

    background:#f8d7da;

    color:#842029;

}




/* ==========================
   MENU CARD
========================== */


.menu-item-card{


    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}



.menu-item-card:hover{

    transform:translateY(-10px);

}



.menu-item-card img{


    width:100%;

    height:220px;

    object-fit:cover;

}



.menu-content{


    padding:20px;

    text-align:center;

}



.menu-category{


    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

    font-size:.85rem;

}



/* ==========================
   ALERT POPUP
========================== */


.alert-custom{


    border:none;

    border-radius:12px;

    padding:20px;

    box-shadow:var(--shadow);

}



/* ==========================
   FOOTER
========================== */


.footer-custom{


    background:var(--dark-green);

    color:white;

    padding:40px;

    text-align:center;

}



/* ==========================
   MOBILE
========================== */


@media(max-width:768px){


.page-title{

    font-size:1.5rem;

}


.container-box{

    padding:20px;

}


.navbar{

    padding-top: 5px;
    padding-bottom: 5px;

}

}


/* ==========================
   SHARED COMPONENTS
   (ginagamit ng maraming pages, hindi lang index.php -- pinanatiling
   magkatugma ang kulay gamit ang parehong --dark-green / --primary
   variables sa itaas)
========================== */

.btn-hero {
    background: var(--dark-green);
    border: none;
    padding: 14px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(107, 18, 32, 0.25);
    text-decoration: none;
    display: inline-block;
}

.btn-hero:hover {
    background: #4d0d17;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(107, 18, 32, 0.35);
    color: white;
}

.btn-hero-secondary {
    background: var(--primary);
    border: 2px solid var(--primary);
    color: white;
}

.btn-hero-secondary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

.menu-card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: 100%;
    background: white;
}

.menu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.menu-card img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    background-color: #eee;
}

.menu-card:hover img {
    transform: scale(1.03);
}

.menu-card-body {
    padding: 16px;
    text-align: center;
}

.menu-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark-green);
    margin-bottom: 6px;
}

.menu-card-category {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* ================================================================
   V15 SHARED PUBLIC NAVBAR — MOBILE/TABLET ONLY
   Desktop/window (>992px) is intentionally untouched.
================================================================ */
@media (max-width:992px) and (hover:none) and (pointer:coarse){
    .navbar{overflow:visible !important;}
    .navbar .container{position:relative;overflow:visible !important;}

    .navbar-toggler{
        width:50px;
        height:44px;
        padding:0;
        border:0 !important;
        outline:0 !important;
        box-shadow:none !important;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 50px;
        background:transparent !important;
        position:relative;
        z-index:1050;
    }

    .navbar-toggle-icon{
        display:block;
        font-size:1.35rem;
        line-height:1;
        width:1em;
        text-align:center;
        transition:opacity .20s ease, transform .25s ease;
    }

    .navbar-collapse{
        position:absolute !important;
        top:100% !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        margin:0 !important;
        padding:10px 14px 14px !important;
        border:0 !important;
        border-radius:0 0 14px 14px !important;
        box-shadow:0 12px 24px rgba(0,0,0,.18);
        z-index:1040;
        transform-origin:top center;
        overflow:hidden !important;
    }

    .navbar-collapse.collapsing{
        display:block !important;
        height:auto !important;
        max-height:0 !important;
        opacity:0;
        transform:translateY(-8px);
        transition:max-height .30s ease, opacity .22s ease, transform .30s ease !important;
    }

    .navbar-collapse.show{
        display:block !important;
        max-height:calc(100vh - 68px) !important;
        opacity:1;
        transform:translateY(0);
        transition:max-height .30s ease, opacity .22s ease, transform .30s ease !important;
    }

    .navbar-nav{width:100%;margin:0 !important;text-align:center;}
    .navbar-nav .nav-item{width:100%;}
    .navbar-nav .nav-link{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-height:44px;
        padding:8px 12px !important;
        text-align:center !important;
        position:relative;
    }

    .navbar-nav .nav-link::after{
        left:15% !important;
        width:0 !important;
        bottom:2px !important;
        transition:left .25s ease, width .25s ease;
    }

    .navbar-nav .nav-link.active::after{
        left:15% !important;
        width:70% !important;
    }
}

@media (max-width:575.98px) and (hover:none) and (pointer:coarse){
    .navbar-collapse.show{max-height:calc(100vh - 58px) !important;}
}