/* ==========================================================
   GLOBAL
========================================================== */

body{
    background:#f4f8fc;
    font-family:'Poppins',sans-serif;
}

.content-wrapper{
    background:#f4f8fc;
    padding-bottom:90px;
}

.card{
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    border-radius:20px !important;
}

/* ==========================================================
   PGS MODERN ROUNDED THEME SYSTEM
========================================================== */
.rounded-0 { border-radius: 0px !important; }
.rounded-1 { border-radius: 6px !important; }
.rounded-2 { border-radius: 10px !important; }
.rounded-3 { border-radius: 14px !important; }
.rounded-4 { border-radius: 20px !important; }
.rounded-5 { border-radius: 24px !important; }
.rounded-6 { border-radius: 28px !important; }

.rounded-sm { border-radius: 8px !important; }
.rounded-md { border-radius: 12px !important; }
.rounded-lg { border-radius: 16px !important; }
.rounded-xl { border-radius: 20px !important; }
.rounded-2xl { border-radius: 24px !important; }
.rounded-3xl { border-radius: 28px !important; }
.rounded-pill { border-radius: 50px !important; }
.rounded-circle { border-radius: 50% !important; }

.modal-content {
    border-radius: 24px !important;
    overflow: hidden !important;
}

.modal-header {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
}

.card-header:first-child {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.card-footer:last-child {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/* ==========================================================
   PGS BULLETPROOF GLOBAL BUTTON CENTERING & ICON SYSTEM
   Eliminates all hardcode alignment hacks & forces perfect centering
========================================================== */
.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.btn.btn-block,
.btn-block {
    display: flex !important;
    width: 100% !important;
}

/* Any icon inside any button: automatic centering, zero baseline shift */
.btn > i,
.btn > svg,
.btn > .fas,
.btn > .far,
.btn > .fab,
.btn > .fa,
.btn > .bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Circular & Square Icon Buttons (.rounded-circle, .btn-circle, .btn-icon) */
.btn.rounded-circle,
.btn.btn-circle,
.btn.btn-icon,
.btn-circle,
.btn-icon {
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.btn.rounded-circle > i,
.btn.btn-circle > i,
.btn.btn-icon > i,
.btn.rounded-circle > svg,
.btn.btn-circle > svg,
.btn.btn-icon > svg {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modal and generic close buttons */
.close,
button.close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* ==========================================================
   HEADER & NAVBAR
========================================================== */

.main-header{
    background:#fff;
    border:none;
    padding:10px 8px;
    box-shadow:none;
}

.navbar{
    min-height:72px;
}

/* ==========================================================
   LOGO
========================================================== */

.logo-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    margin:0;
}

.logo-brand{
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));
}

.logo-title{
    margin:0;
    padding:0;
    font-size:15px;
    font-weight:600;
    line-height:1.15;
    color:#1f2937;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.logo-title span{
    color:#00bcd4;
    font-weight:700;
    line-height:1.15;
    display:block;
}

/* ==========================================================
   NOTIFICATION & AVATAR
========================================================== */

.notification{
    position:relative;
    font-size:22px;
}

.notification-dot{
    position:absolute;
    top:2px;
    right:0;
    width:10px;
    height:10px;
    background:#ff4081;
    border-radius:50%;
}

.avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    margin-left:15px;
}

/* ==========================================================
   BANNER
========================================================== */

.banner-card{
    border:none;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    background:linear-gradient(
        135deg,
        #eafaff 0%,
        #f7fdff 45%,
        #fff7fb 100%
    );
    box-shadow:0 6px 18px rgba(0,188,212,.08);
}

.banner-card .card-body{
    padding:18px 20px;
}

.banner-card h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:6px;
    line-height:1.2;
}

.banner-card p{
    font-size:14px;
    color:#4b5563;
    line-height:1.5;
    margin-bottom:0;
}

.banner-kidney{
    width:100%;
    max-width:180px;
    height:auto;
    object-fit:contain;
    display:block;
    margin:auto;
    filter:drop-shadow(
        0 6px 12px rgba(0,188,212,.15)
    );
    animation:float 4s ease-in-out infinite;
}

.kidney-icon{
    font-size:100px;
    color:#ff4081;
}

@keyframes float{
    0%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
    100%{transform:translateY(0);}
}

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

.menu-card{
    border:none;
    border-radius:20px;
}

.menu-item{
    text-align:center;
}

.menu-circle{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:24px;
}

.menu-title{
    margin-top:8px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.blue{
    background:#e6f9ff;
    color:#00bcd4;
}

.pink{
    background:#ffeaf3;
    color:#ff4081;
}

/* ==========================================================
   SUMMARY CARD
========================================================== */

.summary-box{
    border:1px solid #eef2f7;
    border-radius:18px;
    box-shadow:none;
    height:100%;
}

.summary-box .card-body{
    padding:14px 10px;
    text-align:center;
}

.summary-icon{
    font-size:24px;
    margin-bottom:8px;
}

.summary-title{
    font-size:12px;
    font-weight:600;
    margin-bottom:6px;
}

.summary-value{
    font-size:28px;
    font-weight:700;
    line-height:1;
    margin-bottom:4px;
}

.summary-unit{
    font-size:11px;
    color:#6b7280;
}

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

.status-green,
.status-blue,
.status-pink{
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.status-green{
    background:#dff6e4;
    color:#28a745;
}

.status-blue{
    background:#dff5ff;
    color:#17a2b8;
}

.status-pink{
    background:#ffe3ec;
    color:#e91e63;
}

/* ==========================================================
   AI ASSISTANT
========================================================== */

.ai-card{
    border:none;
    border-radius:20px;
    background:#f0fbff;
}

.ai-avatar{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#dff8ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    color:#00bcd4;
}

.ask-btn{
    border-radius:15px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:8px 4px;
}

/* ==========================================================
   SCHEDULE
========================================================== */

.schedule-card{
    border:none;
    border-radius:20px;
}

.schedule-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
}

.schedule-item:not(:last-child){
    border-bottom:1px solid #eef2f7;
}

.schedule-icon{
    width:55px;
    height:55px;
    border-radius:16px;
    background:#f4fbff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-right:15px;
}

.schedule-info{
    flex:1;
}

.schedule-title{
    font-size:16px;
    font-weight:600;
}

.schedule-desc{
    color:#666;
    font-size:14px;
}

.schedule-time{
    color:#666;
    font-size:13px;
}

.schedule-action{
    min-width:90px;
    text-align:right;
}

.btn-pink{
    background:#ffe3ec;
    color:#e91e63;
    border:none;
    border-radius:12px;
    min-width:80px;
    font-weight:600;
}

/* ==========================================================
   PROFILE
========================================================== */

.profile-card{
    border:none;
    border-radius:24px;
    overflow:hidden;
}

.profile-header{
    text-align:center;
    padding:30px 20px;
    background:linear-gradient(
        135deg,
        #eafaff,
        #fff4fa
    );
}

.profile-photo{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 12px;
    border:4px solid #fff;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.profile-name{
    font-size:20px;
    font-weight:700;
}

.profile-role{
    color:#6b7280;
}

.profile-id{
    color:#00bcd4;
    font-size:13px;
    font-weight:600;
}

.profile-summary{
    display:flex;
    justify-content:space-around;
    padding:18px;
}

.profile-summary-item{
    text-align:center;
}

.profile-summary-value{
    font-size:22px;
    font-weight:700;
}

.profile-summary-label{
    font-size:12px;
    color:#6b7280;
}

.profile-menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    border-bottom:1px solid #eef2f7;
    color:#333;
}

.profile-menu-item:hover{
    background:#f8fbfd;
    text-decoration:none;
}

.profile-menu-item span i{
    width:24px;
    color:#00bcd4;
}

/* ==========================================================
   STATISTIC
========================================================== */

.stat-card{
    border:none;
    border-radius:18px;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.stat-card h3{
    color:#00bcd4;
    font-weight:700;
}

/* ==========================================================
   JADWAL PAGE
========================================================== */

.jadwal-modern-card{
    border:none;
    border-radius:20px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.jadwal-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    background:#f4fbff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.jadwal-time{
    color:#6b7280;
    font-size:13px;
}

.agenda-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid #eef2f7;
}

.agenda-item:last-child{
    border-bottom:none;
}

.agenda-date{
    width:50px;
    height:50px;
    border-radius:14px;
    background:#e6f9ff;
    color:#00bcd4;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
}

/* ==========================================================
   BOTTOM NAVIGATION
========================================================== */

.bottom-nav{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:#fff;
    border-top:1px solid #e5e5e5;
    z-index:999;
}

.bottom-nav a{
    display:block;
    text-align:center;
    padding:8px;
    font-size:12px;
    color:#666;
}

.bottom-nav a.active{
    color:#00bcd4;
    font-weight:600;
}

.bottom-nav i{
    display:block;
    font-size:20px;
}

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

@media(max-width:768px){

    .banner-card .card-body{
        padding:16px;
    }

    .banner-card h3{
        font-size:18px;
    }

    .banner-card p{
        font-size:13px;
    }

    .banner-kidney{
        max-width:140px;
    }
}

@media(max-width:576px){

    .banner-card{
        border-radius:20px;
    }

    .banner-card .card-body{
        padding:14px 16px;
    }

    .banner-card h3{
        font-size:16px;
    }

    .banner-card p{
        font-size:12px;
    }

    .banner-kidney{
        width:120px;
    }

    .summary-title{
        font-size:11px;
    }

    .summary-value{
        font-size:22px;
    }

    .summary-unit{
        font-size:10px;
    }
}

@media(max-width:360px){

    .menu-circle{
        width:52px;
        height:52px;
        font-size:22px;
    }

    .menu-title{
        font-size:11px;
    }

    .ask-btn{
        font-size:10px;
        padding:7px 2px;
    }
}

#aiModal .modal-dialog{
    max-width:900px;
}

@media (max-width:768px){

    #aiModal .modal-dialog{
        margin:0;
        max-width:100%;
        height:100%;
    }

    #aiModal .modal-content{
        height:100vh;
        border-radius:0;
    }

}

#aiModal .modal-content{
    border-radius:20px;
    overflow:hidden;
}

#aiModal .modal-body{
    height:85vh;
    overflow:hidden;
}

.ai-floating-close{
    position:absolute;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#dc3545;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:9999;
}

#aiModal .modal-dialog{
    max-width:95%;
    height:95vh;
    margin:auto;
}

#aiModal .modal-content{
    height:95vh;
    border-radius:20px;
    overflow:hidden;
}

#aiModal .modal-body{
    padding:0;
    overflow:hidden;
}

.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:70px;
    background:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    box-shadow:0 -2px 15px rgba(0,0,0,.08);
    z-index:1050;
}

.bottom-nav .nav-item{
    flex:1;
    text-align:center;
    text-decoration:none;
    color:#9ca3af;
    font-size:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.bottom-nav .nav-item i{
    font-size:20px;
    margin-bottom:4px;
}

.bottom-nav .nav-item.active{
    color:#0d6efd;
    font-weight:600;
}

.bottom-nav .nav-item.active i{
    transform:scale(1.1);
}

.nav-ai{
    position:relative;
}

.ai-btn{
    width:56px;
    height:56px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #0d6efd,
        #00cfe8
    );
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:-28px;
    box-shadow:0 6px 15px rgba(13,110,253,.35);
}

.ai-btn i{
    font-size:24px;
    margin:0;
}

.nav-ai span{
    margin-top:4px;
    color:#0d6efd;
    font-weight:600;
}

/* Modal AI Full Screen */

#aiModal{
    padding:0 !important;
}

#aiModal .modal-dialog{
    margin:0;
    max-width:100%;
    width:100%;
    height:100vh;
}

#aiModal .modal-content{
    height:100vh;
    border:0;
    border-radius:0;
}

#aiModal .modal-body{
    padding:0;
    height:100%;
    overflow:hidden;
}



#aiModal{
    z-index:99999;
}

#aiModal .modal-dialog{
    max-width:100%;
    width:100%;
    height:100%;
    margin:0;
}

#aiModal .modal-content{
    height:100vh;
    border-radius:0;
}

#aiModal .modal-body{
    overflow-y:auto;
    padding-bottom:120px;
}

.bottom-nav{
    z-index:1050;
}

.notification{
    position:relative;
    color:#333;
    font-size:22px;
}

.notification-dot{
    position:absolute;
    top:0;
    right:0;
    width:10px;
    height:10px;
    background:#ff3b30;
    border-radius:50%;
    border:2px solid #fff;
}



/* Banner */
.banner-card h3{
    font-size:1.15rem;
}

.banner-card p{
    font-size:0.85rem;
}

/* Menu Cepat */
.menu-title{
    font-size:0.72rem;
    line-height:1.2;
    margin-top:6px;
}

.menu-circle{
    width:50px;
    height:50px;
    font-size:1rem;
}

/* Judul Section */
h5{
    font-size:1rem;
}

/* Ringkasan Kesehatan */
.summary-title{
    font-size:0.75rem;
    font-weight:600;
}

.summary-value{
    font-size:1.15rem;
    font-weight:700;
    line-height:1.2;
}

.summary-unit{
    font-size:0.70rem;
    color:#6c757d;
}

.summary-box .badge{
    font-size:0.65rem;
    padding:4px 7px;
}

/* AI Assistant */
.ai-card h5{
    font-size:1rem;
}

.ai-card strong{
    font-size:0.85rem;
}

.ai-card p{
    font-size:0.80rem;
}

.ask-btn{
    font-size:0.72rem;
    padding:6px;
}

/* Jadwal */
.schedule-title{
    font-size:0.85rem;
    font-weight:600;
}

.schedule-desc{
    font-size:0.75rem;
}

.schedule-time{
    font-size:0.70rem;
}

.schedule-action .btn{
    font-size:0.70rem;
}

/* Link */
a{
    font-size:0.80rem;
}

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

    .summary-value{
        font-size:1rem;
    }

    .summary-title{
        font-size:0.70rem;
    }

    .summary-unit{
        font-size:0.65rem;
    }

    .menu-title{
        font-size:0.65rem;
    }

    .schedule-title{
        font-size:0.80rem;
    }

    .schedule-desc{
        font-size:0.70rem;
    }

}
/* ===========================
   Fixed Top Navbar
=========================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 70px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

/* Beri ruang agar konten tidak tertutup navbar */
.content-wrapper {
    margin-top: 68px;
}

/* Jika memakai Bottom Nav */
body {
    padding-bottom: 80px;
}

/* Logo */
.logo-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    margin:0;
}

.logo-title{
    margin:0;
    padding:0;
    font-size:15px;
    font-weight:600;
    line-height:1.15;
    color:#1f2937;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.logo-title span{
    color:#00bcd4;
    font-weight:700;
    line-height:1.15;
    display:block;
}

/* Avatar */
.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    margin-left:15px;
    border:2px solid #eee;
}

/* Notifikasi */
.notification{
    color:#555;
    margin-right:15px;
    font-size:20px;
}

.card-luknol{
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(135deg,#0f9d58,#43a047);
    color:#fff;
}

.card-luknol .btn{
    border-radius:30px;
}

.card-luknol img{
    max-height:120px;
}
.card-img-top{
    border-radius:12px 12px 0 0;
}

@media (max-width:576px){

    .card-img-top{
        height:210px;
    }

}