/* =========================================
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{
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;
}