/*==================================================
SISTEM ANALISIS STATUS GIZI SISWA
K-MEANS CLUSTERING
GLOBAL STYLE
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#5E8B7E;

--primary-dark:#4A7266;

--secondary:#EAF4EE;

--background:#F4FAF7;

--card:#F9FCFA;

--border:#D8E8DF;

--text:#31413A;

--text2:#6B7671;

--danger:#EF4444;

--warning:#F59E0B;

--success:#10B981;

--info:#14B8A6;

--dark:#0F766E;

--shadow:
0 12px 35px rgba(40,70,50,.08);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

body{

font-family:'Manrope',sans-serif;

background:
linear-gradient(
135deg,
#F6FBF8,
#EEF6F1,
#E5F1EA,
#F9FCFA
);

min-height:100vh;

overflow-x:hidden;

color:var(--text);

position:relative;

}

/*==================================================
BACKGROUND DECORATION
==================================================*/

body::before{

content:"";

position:fixed;

width:420px;

height:420px;

top:-160px;

left:-150px;

background:radial-gradient(circle,
rgba(94,139,126,.18),
transparent 70%);

border-radius:50%;

z-index:-3;

}

body::after{

content:"";

position:fixed;

width:420px;

height:420px;

bottom:-180px;

right:-140px;

background:radial-gradient(circle,
rgba(145,191,164,.18),
transparent 70%);

border-radius:50%;

z-index:-3;

}

/*==================================================
EMOJI DECORATION
==================================================*/

.emoji{

position:fixed;

pointer-events:none;

user-select:none;

opacity:.06;

z-index:-2;

filter:grayscale(15%);

animation:float 7s ease-in-out infinite;

}

.e1{

top:6%;

left:5%;

font-size:65px;

animation-delay:.2s;

}

.e2{

top:18%;

right:7%;

font-size:60px;

animation-delay:1.2s;

}

.e3{

top:42%;

left:2%;

font-size:55px;

animation-delay:2s;

}

.e4{

top:55%;

right:6%;

font-size:70px;

animation-delay:3s;

}

.e5{

bottom:8%;

left:8%;

font-size:60px;

animation-delay:4s;

}

.e6{

bottom:10%;

right:14%;

font-size:65px;

animation-delay:2.5s;

}

.e7{

top:70%;

left:40%;

font-size:50px;

animation-delay:1.5s;

}

.e8{

top:10%;

left:45%;

font-size:48px;

animation-delay:5s;

}

.e9{

bottom:35%;

right:35%;

font-size:52px;

animation-delay:2.8s;

}

.e10{

top:32%;

left:70%;

font-size:58px;

animation-delay:4.6s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/*==================================================
NAVBAR
==================================================*/

.navbar{

background:rgba(94,139,126,.95);

backdrop-filter:blur(14px);

box-shadow:0 10px 30px rgba(0,0,0,.08);

padding:12px 0;

}

.navbar-brand{

font-family:'Marcellus',serif;

font-size:28px;

color:white!important;

letter-spacing:.5px;

}

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

.container{

position:relative;

z-index:10;

}

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

.card-custom,
.card,
.cardc{

background:rgba(249,252,250,.90);

border:1px solid var(--border);

border-radius:28px;

box-shadow:var(--shadow);

backdrop-filter:blur(12px);

transition:.35s;

}

.card-custom:hover,
.card:hover,
.cardc:hover{

transform:translateY(-6px);

box-shadow:
0 20px 45px rgba(40,70,50,.12);

}

/*==================================================
GLASS
==================================================*/

.glass{

background:rgba(255,255,255,.65);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.4);

border-radius:28px;

}

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

h1,
h2,
h3,
h4{

font-family:'Marcellus',serif;

color:var(--primary);

}

h1{

font-size:42px;

}

h2{

font-size:34px;

}

h3{

font-size:30px;

}

p{

color:var(--text2);

line-height:1.8;

}

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

.table{

background:rgba(249,252,250,.90);

border-radius:22px;

overflow:hidden;

margin-bottom:0;

vertical-align:middle;

}

.table-responsive{

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

background:rgba(249,252,250,.90);

}

.table thead{

background:linear-gradient(
90deg,
#5E8B7E,
#739F90
);

color:white;

}

.table thead th{

font-family:'Marcellus',serif;

font-size:16px;

font-weight:normal;

padding:15px;

border:none;

white-space:nowrap;

}

.table tbody td{

padding:14px;

vertical-align:middle;

border-color:#E5EFE9;

color:var(--text);

font-size:14px;

}

.table tbody tr{

transition:.30s;

}

.table tbody tr:nth-child(even){

background:#F8FCFA;

}

.table tbody tr:hover{

background:#EAF5EF;

transform:scale(1.002);

}

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

.btn{

border-radius:15px;

font-weight:600;

padding:10px 22px;

transition:.30s;

box-shadow:none;

}

.btn:hover{

transform:translateY(-2px);

}

.btn-main{

background:var(--primary);

color:white;

}

.btn-main:hover{

background:var(--primary-dark);

color:white;

}

.btn-success{

background:#4F8A73;

border:none;

}

.btn-success:hover{

background:#3E6F5C;

}

.btn-danger{

border:none;

}

.btn-warning{

border:none;

}

.btn-info{

border:none;

}

.btn-primary{

background:#5E8B7E;

border:none;

}

.btn-primary:hover{

background:#476C60;

}

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

.badge,
.badge-custom{

padding:8px 15px;

border-radius:999px;

font-size:12px;

font-weight:600;

letter-spacing:.3px;

}

.badge-buruk{

background:#EF4444;

color:white;

}

.badge-kurang{

background:#F59E0B;

color:white;

}

.badge-baik{

background:#10B981;

color:white;

}

.badge-lebih{

background:#0EA5A5;

color:white;

}

.badge-obesitas{

background:#0F766E;

color:white;

}

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

.form-control,
.form-select{

border-radius:15px;

border:1px solid #D7E7DE;

background:#FAFDFC;

padding:12px;

transition:.30s;

box-shadow:none;

}

.form-control:focus,
.form-select:focus{

border-color:#5E8B7E;

box-shadow:
0 0 0 .18rem rgba(94,139,126,.15);

}

/*==================================================
SEARCH
==================================================*/

input[type="search"]{

border-radius:15px;

}

/*==================================================
CARD HEADER
==================================================*/

.card-header{

background:transparent;

border:none;

font-family:'Marcellus',serif;

font-size:22px;

color:var(--primary);

padding:22px 25px 10px;

}

/*==================================================
STAT CARD
==================================================*/

.card-status{

border-radius:25px;

padding:22px;

background:#F9FCFA;

border:1px solid #D8E8DF;

box-shadow:var(--shadow);

transition:.30s;

}

.card-status:hover{

transform:translateY(-5px);

}

.card-status h3{

font-size:34px;

margin-top:8px;

margin-bottom:0;

}

.card-status h6{

font-family:'Manrope',sans-serif;

font-size:15px;

font-weight:600;

color:#66756E;

}

/*==================================================
COLOR TOP
==================================================*/

.c1{

border-top:7px solid #EF4444;

}

.c2{

border-top:7px solid #F59E0B;

}

.c3{

border-top:7px solid #10B981;

}

.c4{

border-top:7px solid #0EA5A5;

}

.c5{

border-top:7px solid #0F766E;

}

/*==================================================
HR
==================================================*/

hr{

border-color:#DCE9E2;

opacity:1;

}

/*==================================================
TEXT
==================================================*/

.text-muted{

color:#6C7B74!important;

}

/*==================================================
SHADOW
==================================================*/

.shadow-soft{

box-shadow:var(--shadow);

}

/*==================================================
SIDEBAR
==================================================*/

.sidebar{

width:260px;

min-height:100vh;

position:fixed;

left:0;

top:0;

padding:25px 18px;

background:rgba(249,252,250,.92);

backdrop-filter:blur(18px);

border-right:1px solid var(--border);

box-shadow:6px 0 25px rgba(40,70,50,.06);

z-index:999;

}

.sidebar-logo{

font-family:'Marcellus',serif;

font-size:28px;

color:var(--primary);

margin-bottom:30px;

text-align:center;

}

.sidebar-menu{

display:flex;

flex-direction:column;

gap:8px;

}

.sidebar-menu a{

text-decoration:none;

padding:14px 18px;

border-radius:16px;

color:var(--text);

font-weight:600;

transition:.3s;

display:flex;

align-items:center;

gap:12px;

}

.sidebar-menu a:hover{

background:#EAF5EF;

padding-left:24px;

color:var(--primary);

}

.sidebar-menu a.active{

background:linear-gradient(
135deg,
#5E8B7E,
#7DA998
);

color:white;

box-shadow:0 10px 25px rgba(94,139,126,.25);

}

/*==================================================
ICON
==================================================*/

.icon{

font-size:28px;

transition:.3s;

}

.card:hover .icon{

transform:scale(1.15) rotate(-6deg);

}

/*==================================================
PAGINATION
==================================================*/

.pagination{

gap:8px;

}

.page-link{

border:none;

border-radius:12px;

padding:10px 15px;

color:var(--primary);

background:#F7FBF8;

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

}

.page-link:hover{

background:#5E8B7E;

color:white;

}

.page-item.active .page-link{

background:#5E8B7E;

color:white;

}

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

.alert{

border:none;

border-radius:18px;

box-shadow:var(--shadow);

}

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

footer{

margin-top:50px;

padding:25px;

text-align:center;

color:#6C7B74;

font-size:14px;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#EDF6F1;

}

::-webkit-scrollbar-thumb{

background:#7AA08F;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#5E8B7E;

}

/*==================================================
FADE ANIMATION
==================================================*/

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
FLOAT CARD
==================================================*/

.float-card{

animation:cardFloat 5s ease-in-out infinite;

}

@keyframes cardFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

/*==================================================
LOADING
==================================================*/

.loading{

width:40px;

height:40px;

border:4px solid #EAF5EF;

border-top:4px solid #5E8B7E;

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==================================================
IMAGE
==================================================*/

img{

max-width:100%;

border-radius:18px;

}

/*==================================================
LINK
==================================================*/

a{

transition:.3s;

}

a:hover{

text-decoration:none;

}

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

@media(max-width:992px){

.sidebar{

width:100%;

position:relative;

min-height:auto;

}

main{

margin-left:0!important;

}

}

@media(max-width:768px){

h1{

font-size:34px;

}

h2{

font-size:28px;

}

h3{

font-size:24px;

}

.table{

font-size:13px;

}

.card,
.cardc,
.card-custom{

border-radius:22px;

}

}

@media(max-width:576px){

.btn{

width:100%;

margin-bottom:10px;

}

.navbar-brand{

font-size:22px;

}

}

/*==================================================
PREMIUM CONTENT BOX
==================================================*/

.content-box{

background:linear-gradient(
135deg,
#E6F2EB 0%,
#DCEDE4 50%,
#EAF6EF 100%
);

border:1px solid rgba(94,139,126,.15);

border-radius:30px;

padding:35px;

margin-bottom:30px;

box-shadow:
0 20px 45px rgba(70,100,80,.08);

position:relative;

overflow:hidden;

}

.content-box::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:6px;

background:linear-gradient(
90deg,
#5E8B7E,
#A3C8B6,
#5E8B7E
);

}

.content-box::after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:rgba(255,255,255,.12);

right:-70px;

top:-70px;

}

.page-header{

background:linear-gradient(
135deg,
#5E8B7E,
#83A999
);

padding:40px;

border-radius:30px;

margin-bottom:30px;

color:white;

box-shadow:
0 20px 45px rgba(0,0,0,.12);

}

.page-header h1{

font-size:38px;

color:white;

margin-bottom:10px;

}

.page-header p{

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

margin:0;

}

.filter-box{

background:#EEF7F2;

border:1px solid #D3E7DC;

padding:25px;

border-radius:22px;

margin-bottom:30px;

display:flex;

gap:20px;

align-items:center;

flex-wrap:wrap;

}

.table-box{

background:#EEF7F2;

padding:25px;

border-radius:25px;

border:1px solid #D3E7DC;

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

}

.stat-box{

background:linear-gradient(
135deg,
#DDEDE4,
#EEF8F3
);

border-radius:24px;

padding:28px;

border:1px solid #CFE3D8;

text-align:center;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

}

.stat-box h2{

font-size:40px;

margin-top:12px;

color:#4F7364;

}

.stat-box span{

font-size:15px;

color:#66756F;

font-weight:600;

}

.box-title{

display:flex;

align-items:center;

gap:12px;

margin-bottom:22px;

padding-bottom:14px;

border-bottom:2px solid rgba(94,139,126,.12);

}

.box-title h3{

margin:0;

font-size:28px;

color:#4F7364;

}

.box-title span{

font-size:32px;

}

.inner-box{

background:rgba(255,255,255,.28);

border:1px solid rgba(94,139,126,.10);

padding:22px;

border-radius:18px;

margin-bottom:18px;

}

/*==================================================
CHART BOX
==================================================*/

.chart-box{

background:linear-gradient(
135deg,
#EEF7F2,
#E5F2EB
);

border:1px solid #D6E8DF;

border-radius:28px;

padding:30px;

margin-bottom:30px;

box-shadow:0 15px 35px rgba(60,90,70,.08);

position:relative;

overflow:hidden;

}

.chart-box::before{

content:"📊";

position:absolute;

right:25px;

top:20px;

font-size:60px;

opacity:.08;

}

.chart-box canvas,
.chart-box img{

width:100%;

border-radius:18px;

}

/*==================================================
TABLE BOX
==================================================*/

.table-box{

background:linear-gradient(
135deg,
#F2F9F5,
#EAF5EF
);

border:1px solid #D7E7DE;

border-radius:28px;

padding:25px;

margin-top:15px;

box-shadow:0 10px 25px rgba(60,90,70,.08);

}

/*==================================================
FORM BOX
==================================================*/

.form-box{

background:#EEF7F2;

padding:28px;

border-radius:25px;

border:1px solid #D6E8DF;

margin-bottom:25px;

}

/*==================================================
SUMMARY BOX
==================================================*/

.summary-box{

background:linear-gradient(
135deg,
#DDEDE4,
#EDF7F2
);

border-left:7px solid #5E8B7E;

padding:28px;

border-radius:22px;

margin-bottom:25px;

}

.summary-box h4{

font-family:'Marcellus',serif;

margin-bottom:12px;

color:#456759;

}

/*==================================================
REPORT BOX
==================================================*/

.report-box{

background:#F3F9F5;

border:1px dashed #8DB5A3;

padding:30px;

border-radius:25px;

margin-bottom:25px;

}

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

.profile-box{

display:flex;

align-items:center;

gap:20px;

background:linear-gradient(
135deg,
#E7F2EB,
#DCEEE5
);

padding:25px;

border-radius:25px;

margin-bottom:25px;

}

.profile-box img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

border:5px solid white;

}

/*==================================================
ACTION BOX
==================================================*/

.action-box{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:25px;

flex-wrap:wrap;

}

/*==================================================
EMPTY DATA
==================================================*/

.empty-box{

text-align:center;

padding:60px;

background:#EEF7F2;

border-radius:25px;

border:2px dashed #B9D6C6;

}

.empty-box h3{

margin-top:15px;

}

.empty-box p{

margin-top:8px;

}

/*==================================================
NUMBER CARD
==================================================*/

.number-card{

background:linear-gradient(
135deg,
#EDF8F2,
#E1F0E8
);

padding:28px;

border-radius:22px;

text-align:center;

border:1px solid #D6E8DF;

transition:.35s;

}

.number-card:hover{

transform:translateY(-5px);

}

.number-card h2{

font-size:42px;

margin-top:10px;

color:#4B7062;

}

.number-card p{

margin:0;

}

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

.status-bar{

width:100%;

height:10px;

background:#D8E8DF;

border-radius:999px;

overflow:hidden;

margin-top:15px;

}

.status-bar span{

display:block;

height:100%;

background:linear-gradient(
90deg,
#5E8B7E,
#93C1AD
);

border-radius:999px;

}

/*==================================================
PAGE SPACE
==================================================*/

.page-wrapper{

max-width:1450px;

margin:auto;

padding:35px;

}

.page-section{

margin-bottom:35px;

}

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

.table-box{
    padding:0;
    overflow:hidden;
}

.table-container{
    overflow-x:auto;
    border-radius:20px;
}

.modern-table{
    width:100%;
    border-collapse:collapse;
    min-width:1100px;
    background:#eef6f2;
}

/* HEADER */

.modern-table thead tr{
    background:linear-gradient(135deg,#5E8B7E,#7FA996);
}

.modern-table thead th{

    padding:15px;

    color:white;

    font-weight:bold;

    text-align:center;

    border:1px solid #7FA996;

}

/* ISI */

.modern-table tbody td{

    padding:13px;

    text-align:center;

    border:1px solid #c9ddd2;

}

/* ZEBRA */

.modern-table tbody tr:nth-child(even){
    background:#f6fbf8;
}

.modern-table tbody tr:nth-child(odd){
    background:#edf6f1;
}

/* HOVER */

.modern-table tbody tr:hover{

    background:#dceee5;

}

.header-box{

    padding:35px;

    margin-bottom:30px;

}

.stat-card{

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:170px;

}

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

.table-container{
    width:100%;
    overflow-x:auto;
    border-radius:25px;
    background:linear-gradient(135deg,#eef7f2,#e7f3ed);
    padding:15px;
    border:1px solid #d8e8df;
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

table{
    width:100%;
    min-width:1000px;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:18px;
}

table thead tr{
    background:linear-gradient(135deg,#5E8B7E,#7FA996);
}

table thead th{

    color:white;

    padding:15px;

    text-align:center;

    font-weight:700;

    border:1px solid rgba(255,255,255,.15);

}

table tbody td{

    padding:13px;

    text-align:center;

    border:1px solid #d7e7de;

    background:#eef7f2;

}

table tbody tr:nth-child(even){

    background:#f7fbf9;

}

table tbody tr:nth-child(even) td{

    background:#f7fbf9;

}

table tbody tr:hover td{

    background:#dceee5;

    transition:.3s;

}

.page-wrapper{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:30px;

}