/* ==================================================
   Gym Management System
   Main Stylesheet
================================================== */

body{
    background: linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);
    min-height:100vh;
    font-family: Arial, Helvetica, sans-serif;
}

.login-card{
    border:none;
    border-radius:20px;
    backdrop-filter:blur(10px);
    box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.logo{
    font-size:55px;
}

.system-title{
    font-weight:bold;
}

.left-side{
    color:white;
}

.form-control{
    height:50px;
}

.btn-login{
    height:50px;
    font-weight:bold;
}
/* ==========================================
   Add Member Page
========================================== */

.card {
    border: none;
    border-radius: 12px;
}

.card-body {
    padding: 30px;
}

.form-label {
    font-weight: 600;
    color: #495057;
}

.form-control,
.form-select {
    height: 48px;
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

textarea.form-control {
    height: auto;
}

.btn-primary {
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
}

.btn-secondary {
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
}

h2 {
    font-weight: 700;
}

h5 {
    font-weight: 600;
}

.card.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.10) !important;
}
/* ==========================================================
   DARK MODE IMPROVEMENTS
========================================================== */

/* Page */

body.dark-mode{
    background:#0b1220;
}

/* Main Content */

body.dark-mode .content,
body.dark-mode .main-content,
body.dark-mode .container-fluid{
    background:#0b1220;
}

/* Cards */

body.dark-mode .card,
body.dark-mode .dashboard-card{

    background:#172033;

    border:1px solid #283548;

    box-shadow:none;
}

/* Welcome Card */

body.dark-mode .welcome-card{

    background:linear-gradient(135deg,#1e3a8a,#0f172a);
}

/* Navbar */

body.dark-mode .navbar{

    background:#111827 !important;
}

/* Sidebar */

body.dark-mode .sidebar{

    background:#111827;
}

/* Tables */

body.dark-mode .table{

    color:#e5e7eb;
}

body.dark-mode .table td,
body.dark-mode .table th{

    border-color:#374151;
}

/* Buttons */

body.dark-mode .btn-outline-light{

    border-color:#64748b;

    color:#ffffff;
}

body.dark-mode .btn-outline-light:hover{

    background:#2563eb;

    border-color:#2563eb;
}
/* ==========================================
   Application Footer
========================================== */

.app-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px 30px;

    margin-top:40px;

    border-top:1px solid #dee2e6;

    background:#ffffff;

    color:#6c757d;

    font-size:13px;

    min-height:55px;
}

.footer-left strong{
    color:#0d6efd;
}

.footer-center{
    font-weight:500;
}

.footer-right{
    color:#6c757d;
}
/* =====================================================
   Responsive Base Layout
===================================================== */

html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

.container,
.container-fluid{
    width:100%;
}

.card{
    width:100%;
}

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

.btn{
    white-space:nowrap;
}
/* =====================================================
   RESPONSIVE SIDEBAR
===================================================== */

@media (max-width: 991px){

    .sidebar{

        position: fixed;

        left: -270px;

        top: 0;

        width: 260px;

        height: 100vh;

        z-index: 1050;

        transition: .3s;
    }

    .sidebar.active{

        left: 0;
    }

    .main-content{

        margin-left: 0 !important;

        width: 100%;
    }

    .navbar{

        width:100%;
    }

}

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

@media (max-width:576px){

    .sidebar{

        width:250px;
    }

    .navbar-brand{

        font-size:18px;
    }

    .navbar .btn{

        padding:6px 10px;

        font-size:12px;
    }

}
/* =====================================================
   RESPONSIVE FORMS
===================================================== */

/* Tablets */
@media (max-width:991px){

    .row > [class*="col-"]{
        margin-bottom:18px;
    }

}

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

    h2{
        font-size:28px;
    }

    h3{
        font-size:24px;
    }

    h4{
        font-size:22px;
    }

    h5{
        font-size:20px;
    }

    .form-control,
    .form-select{
        height:46px;
        font-size:15px;
    }

    textarea.form-control{
        min-height:120px;
    }

    .btn{
        width:100%;
        margin-bottom:10px;
    }

    .btn-group .btn{
        width:auto;
        margin-bottom:0;
    }

}

/* Small Phones */
@media (max-width:576px){

    .card-body{
        padding:20px;
    }

    .form-label{
        font-size:14px;
    }

    .form-control,
    .form-select{
        font-size:14px;
    }

    .btn{
        font-size:15px;
        padding:12px;
    }

    img.img-thumbnail{
        max-width:180px;
    }

}
/* =====================================================
   RESPONSIVE TABLES
===================================================== */

.table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media (max-width:768px){

    table{

        min-width:700px;

    }

    .table th,
    .table td{

        white-space:nowrap;

        vertical-align:middle;

        font-size:14px;
    }

    .table .btn{

        width:auto;

        padding:5px 10px;

        margin:2px;
    }

}
/* =====================================================
   FINAL MOBILE POLISH
===================================================== */

/* Smooth scrolling */
html{
    scroll-behavior:smooth;
}

/* Better touch targets */
@media (max-width:768px){

    .btn{
        min-height:46px;
    }

    .form-control,
    .form-select{
        min-height:46px;
    }

    .card{
        border-radius:15px;
    }

    .card-header{
        padding:14px 18px;
    }

    .card-body{
        padding:18px;
    }

    .badge{
        font-size:12px;
    }

    h1{
        font-size:28px;
    }

    h2{
        font-size:24px;
    }

    h3{
        font-size:22px;
    }

    h4{
        font-size:20px;
    }

    p{
        font-size:14px;
    }

}

/* Small phones */
@media (max-width:576px){

    .container-fluid{
        padding:12px;
    }

    .row{
        --bs-gutter-x:1rem;
    }

    .navbar-brand{
        font-size:18px;
    }

    .app-footer{
        flex-direction:column;
        gap:8px;
        text-align:center;
        padding:15px;
    }

}
/* =====================================================
   PRELOADER
===================================================== */

#preloader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .5s ease;

}

.preloader-content{

    text-align:center;

}

.preloader-content img{

    width:90px;

    margin-bottom:20px;

}

.preloader-content h2{

    font-weight:700;

    color:#0d6efd;

}

.preloader-content p{

    color:#6c757d;

    margin-bottom:10px;

}

#preloader.hide{

    opacity:0;

    visibility:hidden;

}
.navbar .btn{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.navbar .btn i{
    margin:0;
}
/* =====================================================
   DIET BUILDER — PREMIUM NUTRITION SUMMARY CARDS
===================================================== */

.diet-summary-card{
    position:relative;
    min-height:218px;
    overflow:hidden;

    border:1px solid rgba(15, 23, 42, 0.06);
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.diet-summary-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:5px;

    background:var(--diet-card-color);
}

.diet-summary-card::after{
    content:"";

    position:absolute;
    top:-45px;
    right:-45px;

    width:125px;
    height:125px;

    border-radius:50%;

    background:var(--diet-card-soft);

    opacity:.8;

    pointer-events:none;
}

.diet-summary-card:hover{
    transform:translateY(-6px);

    border-color:var(--diet-card-border);

    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.13);
}

.diet-summary-card .card-body{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:218px;

    padding:26px 20px 22px;
}

/* Icon circle */

.diet-summary-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    margin-bottom:14px;

    border-radius:16px;

    background:var(--diet-card-soft);
    color:var(--diet-card-color);

    font-size:25px;

    box-shadow:
        inset 0 0 0 1px var(--diet-card-border);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.diet-summary-card:hover .diet-summary-icon{
    transform:scale(1.08) rotate(-3deg);

    box-shadow:
        0 8px 20px var(--diet-card-shadow);
}

/* Card title */

.diet-summary-title{
    margin-bottom:3px;

    color:#475569;

    font-size:14px;
    font-weight:600;

    text-align:center;
}

/* Main number */

.diet-summary-value{
    margin:0;

    color:#0f172a;

    font-size:28px;
    font-weight:800;
    line-height:1.15;

    letter-spacing:-0.6px;

    text-align:center;
}

.diet-summary-unit{
    margin-top:6px;

    color:#64748b;

    font-size:13px;
    font-weight:500;

    text-align:center;
}

/* Progress area */

.diet-progress-wrap{
    width:100%;

    margin-top:16px;
}

.diet-progress-info{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:8px;

    margin-bottom:7px;

    color:#64748b;

    font-size:11px;
    font-weight:600;
}

.diet-progress{
    width:100%;
    height:7px;

    overflow:hidden;

    border-radius:999px;

    background:#e9eef5;
}

.diet-progress-bar{
    width:0%;
    height:100%;

    border-radius:999px;

    background:var(--diet-card-color);

    transition:width .35s ease;
}

/* Target status text */

.diet-summary-status{
    min-height:18px;

    margin-top:12px;

    color:#f59e0b;

    font-size:12px;
    font-weight:600;

    text-align:center;
}

.diet-summary-status.status-below{
    color:#f59e0b;
}

.diet-summary-status.status-on-target{
    color:#16a34a;
}

.diet-summary-status.status-above{
    color:#dc2626;
}

/* =====================================================
   INDIVIDUAL CARD COLORS
===================================================== */

.diet-card-calories{
    --diet-card-color:#ef4444;
    --diet-card-soft:#fff1f2;
    --diet-card-border:#fecdd3;
    --diet-card-shadow:rgba(239, 68, 68, .18);

    background:
        linear-gradient(
            180deg,
            #fff7f7 0%,
            #ffffff 55%
        );
}

.diet-card-protein{
    --diet-card-color:#2563eb;
    --diet-card-soft:#eff6ff;
    --diet-card-border:#bfdbfe;
    --diet-card-shadow:rgba(37, 99, 235, .18);

    background:
        linear-gradient(
            180deg,
            #f4f8ff 0%,
            #ffffff 55%
        );
}

.diet-card-carbs{
    --diet-card-color:#f59e0b;
    --diet-card-soft:#fffbeb;
    --diet-card-border:#fde68a;
    --diet-card-shadow:rgba(245, 158, 11, .18);

    background:
        linear-gradient(
            180deg,
            #fffdf3 0%,
            #ffffff 55%
        );
}

.diet-card-fats{
    --diet-card-color:#059669;
    --diet-card-soft:#ecfdf5;
    --diet-card-border:#a7f3d0;
    --diet-card-shadow:rgba(5, 150, 105, .18);

    background:
        linear-gradient(
            180deg,
            #f1fff9 0%,
            #ffffff 55%
        );
}

.diet-card-cost{
    --diet-card-color:#06b6d4;
    --diet-card-soft:#ecfeff;
    --diet-card-border:#a5f3fc;
    --diet-card-shadow:rgba(6, 182, 212, .18);

    background:
        linear-gradient(
            180deg,
            #f1fdff 0%,
            #ffffff 55%
        );
}

/* =====================================================
   DARK MODE
===================================================== */

body.dark-mode .diet-summary-card{
    border-color:#334155;

    background:#172033;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .2);
}

body.dark-mode .diet-card-calories,
body.dark-mode .diet-card-protein,
body.dark-mode .diet-card-carbs,
body.dark-mode .diet-card-fats,
body.dark-mode .diet-card-cost{
    background:
        linear-gradient(
            180deg,
            #1d2940 0%,
            #172033 65%
        );
}

body.dark-mode .diet-summary-value{
    color:#f8fafc;
}

body.dark-mode .diet-summary-title,
body.dark-mode .diet-summary-unit,
body.dark-mode .diet-progress-info{
    color:#cbd5e1;
}

body.dark-mode .diet-progress{
    background:#334155;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:1199px){

    .diet-summary-card,
    .diet-summary-card .card-body{
        min-height:205px;
    }

    .diet-summary-value{
        font-size:25px;
    }
}

@media (max-width:768px){

    .diet-summary-card{
        min-height:auto;
    }

    .diet-summary-card .card-body{
        min-height:190px;
        padding:22px 16px;
    }

    .diet-summary-icon{
        width:50px;
        height:50px;

        font-size:22px;
    }

    .diet-summary-value{
        font-size:25px;
    }
}