/* =========================================
ROOT & THEME
========================================= */
:root{
--bg:#f4f7fb;
--bg2:#e8eef7;
--card:#ffffff;
--text:#1f2937;
--muted:#6b7280;
--primary:#2563eb;
--accent:#10b981;
--radius:14px;
--shadow:0 10px 28px rgba(16,24,40,0.08);
--gap:14px;
--max-width:980px;
font-family:Inter,"Segoe UI",Roboto,system-ui,Arial;
}

/* DARK MODE */
body.dark-mode{
--bg:#020617;
--bg2:#0f172a;
--card:#111827;
--text:#e5e7eb;
--muted:#94a3b8;
--primary:#3b82f6;
--accent:#22d3ee;
--shadow:0 10px 28px rgba(2,6,23,0.9);
}

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

*{
box-sizing:border-box;
}

html,body{
margin:0;
background:linear-gradient(180deg,var(--bg),var(--bg2));
color:var(--text);
}

.container{
max-width:var(--max-width);
margin:20px auto;
padding:16px;
}

/* HEADER */

header.top{
text-align:center;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid rgba(148,163,184,0.2);
padding-bottom:10px;
margin-bottom:18px;
}

h1{

margin:0;
font-size:22px;
color:var(--primary);
letter-spacing:0.5px;
}

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

.form-card,
.stats,
.table-wrap{
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:18px;
margin-bottom:16px;
transition:.25s;
}

.form-card:hover,
.stats:hover,
.table-wrap:hover{
transform:translateY(-2px);
box-shadow:0 18px 45px rgba(0,0,0,0.12);
}

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

label{
font-weight:600;
margin-bottom:4px;
display:block;
}

input,select{
width:100%;
padding:10px 12px;
border-radius:10px;
border:1px solid rgba(148,163,184,0.35);
background:var(--card);
color:var(--text);
font-size:14px;
transition:.2s;
}

input:focus,select:focus{
outline:none;
border-color:var(--primary);
box-shadow:
0 0 0 3px rgba(37,99,235,0.15),
0 6px 18px rgba(37,99,235,0.15);
}

/* ROW */

.row{
display:flex;
gap:var(--gap);
flex-wrap:wrap;
align-items:center;
}

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

.btn{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#fff;
border:none;
padding:10px 18px;
border-radius:12px;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
box-shadow:0 6px 16px rgba(37,99,235,0.25);
}

.btn.secondary{
background:linear-gradient(135deg,#64748b,#475569);
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(37,99,235,0.35);
}

.response{
font-weight:600;
margin-left:10px;
}

/* =========================================
SEARCHABLE DROPDOWN
========================================= */

.searchable-select{
position:relative;
}

.dropdown-list{
display:none;
position:absolute;
inset:auto 0;
background:var(--card);
border-radius:10px;
box-shadow:var(--shadow);
max-height:220px;
overflow:auto;
z-index:20;
}

.dropdown-list div{
padding:9px 12px;
cursor:pointer;
transition:0.15s;
}

.dropdown-list div:hover{
background:rgba(59,130,246,0.12);
}

/* GROUP HEADER */

.dropdown-group{

font-weight:700;
background:#f1f5f9;
cursor:default;
pointer-events:none;
color:#334155;
padding:10px 12px;
}

/* =========================================
TOOLS
========================================= */

.tools{
display:flex;
gap:10px;
flex-wrap:wrap;
}

/* =========================================
STATISTIK
========================================= */

.stats{
text-align:center;
font-weight:600;
line-height:1.7;
font-size:15px;
background:linear-gradient(
135deg,
rgba(59,130,246,0.08),
rgba(16,185,129,0.08)
);
}

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

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

table{
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:14px;
backdrop-filter:blur(6px);
}

/* HEADER */

thead th{
background:linear-gradient(135deg,var(--primary),#22d3ee);
color:#fff;
padding:12px 10px;
text-align:center;
font-weight:600;
position:sticky;
top:0;
z-index:5;
}

thead th:first-child{
border-top-left-radius:10px;
}

thead th:last-child{
border-top-right-radius:10px;
}

/* BODY */

tbody td{
padding:10px 8px;
text-align:center;
border-bottom:1px solid rgba(148,163,184,0.25);
}

/* ZEBRA */

tbody tr:nth-child(odd){
background:rgba(241,245,249,0.7);
}

tbody tr:nth-child(even){
background:rgba(255,255,255,0.95);
}

/* HOVER */

tbody tr:hover{
background:rgba(59,130,246,0.12);
}

/* DARK MODE TABLE */

body.dark-mode tbody tr:nth-child(odd){
background:rgba(15,23,42,0.9);
}

body.dark-mode tbody tr:nth-child(even){
background:rgba(30,41,59,0.9);
}

body.dark-mode tbody tr:hover{
background:rgba(37,99,235,0.3);
}

body.dark-mode tbody td{
border-bottom:1px solid rgba(148,163,184,0.15);
}

/* STATUS */

td[data-status="Hadir"]{
color:#22c55e;
font-weight:700;
}

td[data-status="Izin"]{
color:#fbbf24;
font-weight:700;
}

/* =========================================
MODAL
========================================= */

.modal-backdrop{
position:fixed;
inset:0;
background:rgba(2,6,23,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:50;
}

.modal{
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:18px;
max-width:420px;
width:100%;
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.modal-close{
background:none;
border:none;
font-size:22px;
cursor:pointer;
}

.hidden{
display:none;
}

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

@media(max-width:600px){

h1{
font-size:18px;
}

th,td{
font-size:12px;
padding:8px;
}

.btn{
width:100%;
}

}

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

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(var(--primary),var(--accent));
border-radius:10px;
}

/* =========================================
USER SELECT
========================================= */

body{
user-select:none;
}

input,textarea{
user-select:text;
}


/* =========================================
MODERN UPGRADE V2026
========================================= */

/* Background premium */
body{
background:
radial-gradient(circle at top left,#2563eb20,transparent 30%),
radial-gradient(circle at top right,#7c3aed20,transparent 30%),
linear-gradient(180deg,var(--bg),var(--bg2));
min-height:100vh;
}

/* Header */
.top h1{
text-align:center;
font-size:32px;
font-weight:800;
background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.top{
margin-bottom:25px;
}

/* Card Upgrade */
.form-card,
.stats,
.table-wrap{
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
}

/* Form Card */
.form-card{
padding:25px;
}

/* Input Modern */
input,
select{
border:none;
background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);
}

body.dark-mode input,
body.dark-mode select{
background:#0f172a;
}

/* Focus */
input:focus,
select:focus{
transform:translateY(-1px);
}

/* Tombol Modern */
.btn{
border-radius:14px;
padding:12px 18px;
font-size:14px;
letter-spacing:.3px;
}

.btn:hover{
transform:translateY(-3px);
}

/* Live Streaming Button */
a[href*="live.php"]{
display:block !important;
text-align:center;
margin-bottom:20px;
background:linear-gradient(
135deg,
#ef4444,
#dc2626
)!important;
box-shadow:0 10px 25px rgba(239,68,68,.25);
transition:.3s;
}

a[href*="live.php"]:hover{
transform:translateY(-2px);
}

/* Statistik */
.stats{
font-size:16px;
font-weight:700;
border-left:5px solid #2563eb;
}

/* Searchable Dropdown */
.dropdown-list{
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(15px);
}

.dropdown-list div{
transition:.2s;
}

.dropdown-list div:hover{
padding-left:18px;
}

/* Tabel Premium */
thead th{
font-size:13px;
letter-spacing:.5px;
text-transform:uppercase;
}

tbody td{
font-size:13px;
}

.table-wrap{
box-shadow:
0 20px 40px rgba(0,0,0,.08);
}

/* Status Badge */
td[data-status="Hadir"]{
background:rgba(34,197,94,.12);
border-radius:8px;
}

td[data-status="Izin"]{
background:rgba(251,191,36,.12);
border-radius:8px;
}

/* Modal */
.modal{
border-radius:24px;
padding:25px;
}

.modal h2{
color:var(--primary);
}

/* Dark Mode Button */
#themeToggle{
position:fixed;
top:15px;
right:15px;
z-index:999;
border:none;
padding:10px 18px;
border-radius:14px;
background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);
color:white;
font-weight:600;
box-shadow:0 10px 25px rgba(37,99,235,.25);
}

/* Scrollbar Modern */
::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(
180deg,
#2563eb,
#7c3aed
);
border-radius:50px;
}

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

.top h1{
font-size:24px;
}

.form-card{
padding:18px;
}

}  

/* ===========================
   PENGUMUMAN
=========================== */

.ticker{
    margin:15px 0;
    padding:12px;

    background:#fff8e1;
    border:1px solid #ffd54f;
    border-radius:12px;
}

.ticker-title{
    text-align:center;
    font-weight:bold;
    color:#f59e0b;
    margin-bottom:8px;
}

.ticker-run{
    overflow:hidden;
    white-space:nowrap;
}



@keyframes runTicker{
    from{
        transform:translateX(100vw);
    }

    to{
        transform:translateX(calc(-100% - 100vw));
    }
}

/* =========================================
   MODERN UI V2026 PREMIUM
========================================= */

/* Glass Effect Card */
.form-card,
.stats,
.table-wrap,
.modal{
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.25);

    box-shadow:
        0 10px 25px rgba(0,0,0,.08),
        0 20px 60px rgba(37,99,235,.08);

    border-radius:24px;
}

/* Dark Mode Glass */
body.dark-mode .form-card,
body.dark-mode .stats,
body.dark-mode .table-wrap,
body.dark-mode .modal{
    background:rgba(15,23,42,.85);
    border:1px solid rgba(255,255,255,.05);
}

/* Header */
.top{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    margin-bottom:25px;
    padding-bottom:15px;

    border-bottom:1px solid rgba(148,163,184,.2);
}

.top h1{
    margin:0;

    font-size:36px;
    font-weight:800;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-align:center;
}

/* Input Modern */
input,
select{
    border:none !important;

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

    border-radius:14px;

    transition:.25s;
}

body.dark-mode input,
body.dark-mode select{
    background:#0f172a;
}

input:hover,
select:hover{
    transform:translateY(-1px);
}

input:focus,
select:focus{
    transform:translateY(-2px);

    box-shadow:
    0 0 0 4px rgba(37,99,235,.15),
    0 10px 25px rgba(37,99,235,.15);
}

/* Tombol */
.btn{
    border-radius:14px;

    padding:12px 18px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    transition:.25s;
}

.btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 12px 30px rgba(37,99,235,.35);
}

/* Statistik */
.stats{
    font-size:16px;
    line-height:1.9;

    border-left:5px solid #2563eb;
}

/* Tabel */
thead th{
    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    text-transform:uppercase;
    letter-spacing:.5px;
}

tbody tr{
    transition:.2s;
}

tbody tr:hover{
    transform:scale(1.005);
}

/* Dropdown */
.dropdown-list{
    border-radius:16px;

    border:1px solid rgba(0,0,0,.05);

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

.dropdown-list div{
    transition:.2s;
}

.dropdown-list div:hover{
    padding-left:20px;
}

/* Running Text */
#tickerContent{
    display:inline-block;
    white-space:nowrap;

    color:#333;
    font-weight:700;

    will-change:transform;

    animation:runTicker 45s linear infinite;
}

.ticker-title{
    text-align:center;

    font-weight:800;

    color:#f59e0b;

    margin-bottom:10px;

    letter-spacing:.5px;
}

.ticker-run{
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}



/* Dark Mode Pengumuman */
body.dark-mode .ticker{
    background:#1e293b;
    border-color:#475569;
}

body.dark-mode .ticker-title{
    color:#fbbf24;
}

body.dark-mode #tickerContent{
    color:#f8fafc;
}

/* Live Streaming */
a[href*="live.php"]{
    display:block !important;

    text-align:center;

    margin-bottom:20px;

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    ) !important;

    box-shadow:
    0 10px 25px rgba(239,68,68,.25);

    transition:.25s;
}

a[href*="live.php"]:hover{
    transform:translateY(-3px);
}

/* Theme Button */
#themeToggle{
    position:fixed;

    top:15px;
    right:15px;

    z-index:999;

    border:none;

    border-radius:16px;

    padding:10px 18px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:white;

    box-shadow:
    0 10px 25px rgba(37,99,235,.25);
}

/* Scrollbar */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #2563eb,
        #7c3aed
    );

    border-radius:50px;
}

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

    .top h1{
        font-size:24px;
    }

    .form-card,
    .stats,
    .table-wrap{
        padding:15px;
    }

    .btn{
        width:100%;
    }

    .ticker{
        padding:12px;
    }
}