/* ======================================
   MCU APP - Global Style
   ====================================== */

/* Import Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Reset bawaan browser */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Warna utama aplikasi */
:root{
    --primary:#16A34A;
    --primary-dark:#15803D;

    --background:#F5F7FA;

    --white:#FFFFFF;

    --sidebar:#1F2937;

    --text:#1E293B;

    --success:#22C55E;

    --danger:#EF4444;

    --border:#E2E8F0;
}

/* Pengaturan dasar halaman */
body{
    font-family:'Poppins',sans-serif;
    background:var(--background);
    color:var(--text);
}

/* ======================================
   LOGIN PAGE
====================================== */

.login-container{
    display:flex;
    width:100%;
    min-height:100vh;
}

.login-left{
    flex:1;

    background:
        linear-gradient(
            rgba(22,163,74,.82),
            rgba(21,128,61,.82)
        ),
        url("../images/klinik.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

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

    color:white;

    padding:60px;
}

.login-left h1{

    font-size:48px;

    margin-bottom:15px;

    text-align:center;

}

.login-left h3{

    font-weight:400;

    margin-bottom:40px;

    text-align:center;

}

.login-left p{

    width:100%;

    font-size:20px;

    margin:10px 0;

}

.login-right{
    flex:1;

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

    background:white;
}

.login-card{

    width:380px;

    background:white;

    border-radius:20px;

    padding:40px;

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

}
.login-card h2{

    margin-bottom:20px;

    text-align: center;

    color:#222;

}
.login-card p{

    color:#666;

    margin-bottom:30px;

}
.login-card form{

    display:flex;

    flex-direction:column;

}
.login-card label{

    margin-bottom:8px;

    font-weight:600;

}
.login-card input{

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    margin-bottom:20px;

    font-size:15px;

}
.login-card button{

    padding:15px;

    border:none;

    border-radius:10px;

    background:#16A34A;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}
.login-card button:hover{

    background:#15803D;

}

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

.logo-klinik{

    width:120px;

    height:120px;

    object-fit:contain;

    margin-bottom:25px;

    border-radius:50%;

    background:white;

    padding:15px;

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

}

/*=========================================
 Notification Center V2
=========================================*/

.notification{

position:relative;

}

.notification-panel{

position:absolute;

top:65px;

right:0;

width:380px;

background:#fff;

border-radius:22px;

padding:25px;

box-shadow:0 20px 60px rgba(0,0,0,.18);

display:none;

z-index:999;

animation:popup .25s ease;

}

.notification:hover .notification-panel{

display:block;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.notification-panel h3{

font-size:22px;

margin-bottom:20px;

display:flex;

gap:10px;

align-items:center;

}

.notification-list{

display:flex;

flex-direction:column;

gap:15px;

}

.notif-item{

display:flex;

gap:15px;

padding:15px;

border-radius:16px;

transition:.25s;

cursor:pointer;

}

.notif-item:hover{

background:#f8fafc;

}

.notif-icon{

width:55px;

height:55px;

border-radius:15px;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

flex-shrink:0;

}

.notif-icon.success{

background:#DCFCE7;

color:#16A34A;

}

.notif-icon.warning{

background:#FEF3C7;

color:#D97706;

}

.notif-icon.info{

background:#DBEAFE;

color:#2563EB;

}

.notif-item strong{

display:block;

font-size:16px;

margin-bottom:4px;

}

.notif-item p{

margin:0;

font-size:14px;

color:#475569;

}

.notif-item small{

color:#94A3B8;

}

.see-all{

display:block;

margin-top:18px;

text-align:center;

text-decoration:none;

font-weight:700;

color:#16A34A;

padding:12px;

border-top:1px solid #eee;

}

.notif-count{

position:absolute;

top:-5px;

right:-5px;

background:#ef4444;

color:#fff;

width:22px;

height:22px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:11px;

font-weight:bold;

border:2px solid white;

}

/* ===========================
PAGE HEADER
=========================== */

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.page-header h1{

    font-size:28px;

    margin-bottom:8px;

}

.page-header p{

    color:#64748B;

}

.btn-primary{

    background:#16A34A;

    color:white;

    text-decoration:none;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#15803D;

}

.btn-secondary{

    background:#E5E7EB;

    color:#374151;

    padding:12px 20px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

}

.full-width{

    grid-column:1 / -1;

}

.btn-save{

    background:#16A34A;

    color:#fff;

    border:none;

    padding:13px 25px;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.btn-save:hover{

    background:#15803D;

}

.btn-primary{

    background:#16A34A;

    color:#fff;

    padding:12px 25px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    transition:.3s;

}

.btn-primary:hover{

    background:#15803D;

}

.btn-secondary{

    background:#E5E7EB;

    color:#374151;

    padding:12px 25px;

    border-radius:10px;

    text-decoration:none;

}

.btn-secondary:hover{

    background:#D1D5DB;

}

/* ===============================
WELCOME DASHBOARD
=============================== */

.welcome-box{

    background:#fff;

    border-radius:20px;

    padding:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

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

}

.welcome-left h1{

    font-size:34px;

    color:#16A34A;

    margin-bottom:10px;

}

.welcome-left p{

    font-size:18px;

    color:#555;

}

.welcome-left span{

    display:block;

    margin-top:15px;

    color:#999;

}

.welcome-right{

    font-size:80px;

}

/* ===================================
ACTIVITY
=================================== */

.activity-list{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:20px;

}

.activity-section{

    background:#fff;

    border-radius:20px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.activity-section h2{

    margin-bottom:20px;

}

.activity-item{

    display:flex;

    gap:15px;

    align-items:flex-start;

    padding:15px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    transition:.25s;

    background:#fff;

}

.activity-item:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.activity-item:last-child{

    border:none;

}

.activity-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#16a34a;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    flex-shrink:0;

}

.activity-content{

    flex:1;

}

.activity-content h4{

    margin:0;

    color:#1f2937;

    font-size:15px;

}

.activity-content p{

    margin:6px 0;

    color:#4b5563;

}

.activity-content small{

    color:#9ca3af;

}

.role{

    color:#16a34a;

    font-size:12px;

    font-weight:600;

}

.empty-state{

    text-align:center;

    padding:40px;

    color:#9ca3af;

}

.empty-state i{

    font-size:40px;

    margin-bottom:15px;

}

.activity-text strong{

    color:#222;

}

.activity-text small{

    color:#777;

}

.lab-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:20px;
}

.card-section{
    background:#fff;
    border-radius:12px;
    padding:20px;
    margin-bottom:25px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

@media(max-width:768px){

.lab-grid{

grid-template-columns:1fr;

}

}

/* ===================================
MCU
=================================== */

.detail-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;

}

.detail-card{

    background:#fff;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.detail-card h2{

    margin-bottom:20px;
    color:#18a84f;

}

.detail-card table{

    width:100%;
    border-collapse:collapse;

}

.detail-card td{

    padding:12px 5px;
    border-bottom:1px solid #eee;

}

.detail-card td:first-child{

    font-weight:bold;
    width:180px;

}



.success{
    background:#16a34a;
}

.warning{
    background:#f59e0b;
}

.orange{
    background:#f97316;
}

.danger{
    background:#dc2626;
}


.card-summary{

background:#fff;

padding:25px;

border-radius:16px;

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

transition:.3s;

}

.card-summary:hover{

transform:translateY(-6px);

}

.card-summary h3{

color:#666;

font-size:15px;

margin-bottom:15px;

}

.card-summary h1{

font-size:40px;

color:#16a34a;

}

.chart-placeholder{

height:300px;

display:flex;

justify-content:center;

align-items:center;

background:#f7f7f7;

border-radius:15px;

font-size:20px;

color:#999;

}

.detail-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:25px;

}

.full-width{

grid-column:1/3;

}

.detail-card{

background:#fff;

padding:25px;

border-radius:15px;

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

}

.detail-card h2{

margin-bottom:20px;

color:#16a34a;

}

/* =================================
   TABEL HASIL LABORATORIUM
================================= */

.lab-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


/* =================================
   HEADER & ISI
================================= */

.lab-table th,
.lab-table td {
    padding: 16px 8px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}


/* =================================
   KOLOM PEMERIKSAAN
================================= */

.lab-table th:nth-child(1),
.lab-table td:nth-child(1) {
    width: 30%;
    text-align: left;
}


/* =================================
   KOLOM HASIL
================================= */

.lab-table th:nth-child(2),
.lab-table td:nth-child(2) {
    width: 25%;
    text-align: left;
}


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

.lab-table th:nth-child(3),
.lab-table td:nth-child(3) {
    width: 45%;
    text-align: left;
}


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

.lab-table thead th {
    background: #138e43;
    color: white;
    font-weight: 600;
}


/* =================================
   ISI TABEL
================================= */

.lab-table tbody td {
    color: #102a43;
}


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

.lab-table .badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.summary-box{

    margin-top:30px;
    background:#f8fafc;
    border-left:6px solid #16a34a;
    border-radius:12px;
    padding:25px;

}

.summary-box h3{

    margin-bottom:20px;
    color:#0f172a;

}

.summary-item{

    padding:15px 0;
    border-bottom:1px solid #e5e7eb;

}

.summary-item:last-child{

    border-bottom:none;

}

.summary-title{

    font-weight:bold;
    font-size:17px;
    margin-bottom:8px;

}

.summary-status{

    display:inline-block;
    padding:6px 15px;
    border-radius:20px;
    color:white;
    font-weight:bold;
    margin-bottom:10px;

}

.summary-item p{

    color:#6b7280;
    margin:0;

}

.has-submenu.active .submenu{

display:block;

}

.arrow{

transition:.3s;

}

.has-submenu.active .arrow{

transform:rotate(180deg);

}

.btn-info{
    background:#3498db;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
}

.btn-warning{
    background:#f39c12;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
}

.btn-success{
    background:#27ae60;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
}

.btn-danger{
    background:#e74c3c;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
}

.btn-info:hover,
.btn-warning:hover,
.btn-success:hover,
.btn-danger:hover{
    opacity:.9;
}

.summary-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-bottom:25px;

}

.summary-card{

background:#fff;

padding:22px;

border-radius:14px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}

.summary-card:hover{

transform:translateY(-5px);

}

.summary-title{

font-size:15px;

color:#777;

margin-bottom:8px;

}

.summary-number{

font-size:34px;

font-weight:700;

color:#16a34a;

}

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

.filter-card{

background:#fff;

padding:22px;

border-radius:16px;

box-shadow:0 8px 24px rgba(0,0,0,.08);

margin-bottom:25px;

}

.filter-form{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr auto;

gap:18px;

align-items:end;

}

.filter-group{

display:flex;

flex-direction:column;

}

.filter-group label{

font-size:13px;

font-weight:600;

margin-bottom:8px;

color:#555;

}

.filter-group input,
.filter-group select{

height:44px;

padding:0 14px;

border:1px solid #ddd;

border-radius:10px;

font-size:14px;

outline:none;

transition:.25s;

}

.filter-group input:focus,
.filter-group select:focus{

border-color:#16a34a;

box-shadow:0 0 0 4px rgba(22,163,74,.12);

}

.filter-button{

display:flex;

gap:10px;

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 18px;

border-radius:10px;

background:#e5e7eb;

text-decoration:none;

color:#333;

font-weight:600;

transition:.25s;

}

.btn-secondary:hover{

background:#d1d5db;

}

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

.action-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

.action-btn{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    color:#fff;

    text-decoration:none;

    transition:.3s;

    font-size:15px;

}

.action-btn:hover{

    transform:translateY(-3px);

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

}

.action-btn.edit{

    background:#3B82F6;

}

.action-btn.delete{

    background:#EF4444;

}

.action-btn.wa{

    background:#25D366;

}

.action-btn.mcu{

    background:#16A34A;

}

.action-btn.lab{

    background:#8B5CF6;

}

thead{

background:#16a34a;

}

thead th{

padding:16px;

font-size:14px;

letter-spacing:.3px;

}

tbody tr{

transition:.25s;

}

tbody tr:hover{

background:#f8fafc;

}

.title-icon{

width:55px;

height:55px;

background:#ecfdf5;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

font-size:26px;

}

/* ==========================
   FILTER REPORT
========================== */

.filter-form{

    margin-top:20px;

}

.filter-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:20px;

}

.filter-grid label{

    display:block;

    font-weight:600;

    margin-bottom:8px;

}

.filter-grid input,
.filter-grid select{

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:14px;

}

.filter-grid input:focus,
.filter-grid select:focus{

    outline:none;

    border-color:#22c55e;

}

/* ===========================
   SUMMARY REPORT
=========================== */

.summary-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top: 20px;

    margin-bottom:25px;

}

.summary-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

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

    text-align:center;

    transition:.3s;

}

.summary-card:hover{

    transform:translateY(-6px);

}

.summary-card h3{

    color:#64748b;

    font-size:15px;

    margin-bottom:15px;

}

.summary-card span{

    font-size:38px;

    font-weight:700;

    color:#16a34a;

}


.arrow{

    font-size:12px;

    transition:.3s;

}


.submenu li a{

    padding:10px 15px;

    font-size:14px;

    background:transparent;

}