/* ============================================================
   MANTAF v2 — APP.CSS
   Sidebar (3 bagian), topbar, layout section aplikasi
   ============================================================ */

/* ---------- SIDEBAR ---------- */
.sidebar{
position:fixed;
left:0;top:0;
width:var(--sidebar-w);
height:100vh;
background:linear-gradient(170deg,#0f172a 0%,#0b2b28 55%,#0f3d38 100%);
padding:18px 16px 12px;
color:#fff;
display:flex;
flex-direction:column;
z-index:999;
transition:width .3s cubic-bezier(.4,0,.2,1);
box-shadow:4px 0 24px rgba(15,23,42,.25);
}

.sidebar::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(600px 300px at -10% 0%,rgba(20,184,166,.14),transparent 60%);
}

.sidebar.collapsed{width:var(--sidebar-w-collapsed)}

.sidebar-scroll{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:2px;
margin-top:10px;
scrollbar-width:thin;
scrollbar-color:rgba(94,234,212,.25) transparent;
}

/* ---------- PROFILE ---------- */
.profile-section{
text-align:center;
padding:12px 8px 14px;
border-bottom:1px solid rgba(255,255,255,.09);
position:relative;
transition:all .3s ease;
}

.profile-avatar{
width:76px;height:76px;
border-radius:24px;
margin:0 auto 10px;
background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
backdrop-filter:blur(10px);
border:2px solid rgba(94,234,212,.35);
display:flex;align-items:center;justify-content:center;
overflow:hidden;
transition:all .3s ease;
box-shadow:0 8px 28px rgba(0,0,0,.35);
position:relative;
}

.profile-section.collapsed .profile-avatar{width:50px;height:50px;border-radius:16px;margin-bottom:6px}

.profile-avatar:hover{transform:scale(1.05);border-color:rgba(94,234,212,.7)}

.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:22px}

.profile-section.collapsed .profile-avatar img{border-radius:13px}

.profile-status{
position:absolute;
bottom:3px;right:3px;
width:14px;height:14px;
background:#16a34a;
border-radius:50%;
border:2px solid #0b2b28;
animation:pulse 2s infinite;
}

.profile-name{
font-size:16px;
font-weight:700;
margin-bottom:3px;
color:#fff;
font-family:'Montserrat',sans-serif;
letter-spacing:.5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.profile-name span{color:#5eead4}

.profile-role{font-size:11px;color:#a7f3d0;margin-bottom:5px}
.profile-status-text{font-size:10px;color:#94a3b8;display:flex;align-items:center;justify-content:center;gap:4px}

.profile-status-text::before{
content:'';
width:7px;height:7px;
background:#16a34a;border-radius:50%;
display:inline-block;
}

.profile-section.collapsed .profile-name,
.profile-section.collapsed .profile-role,
.profile-section.collapsed .profile-status-text{opacity:0;visibility:hidden;height:0;margin:0;overflow:hidden}

/* ---------- MENU GROUPS (3 BAGIAN) ---------- */
.menu-group{margin-bottom:8px}

.menu-group-label{
display:flex;
align-items:center;
gap:7px;
font-size:9.5px;
font-weight:700;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(94,234,212,.55);
padding:14px 10px 8px;
white-space:nowrap;
transition:opacity .2s;
}

.menu-group-label i{font-size:10px}

.menu-group-label::after{
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,rgba(94,234,212,.25),transparent);
}

.sidebar.collapsed .menu-group-label{opacity:0;height:10px;padding:6px 0 4px;overflow:hidden}

.menu{display:flex;flex-direction:column;gap:5px}

.menu button{
border:none;
background:transparent;
color:rgba(255,255,255,.78);
padding:12px 13px;
border-radius:12px;
cursor:pointer;
font-size:13.5px;
text-align:left;
font-weight:500;
transition:all .22s ease;
display:flex;
align-items:center;
gap:12px;
position:relative;
white-space:nowrap;
overflow:hidden;
font-family:'Poppins',sans-serif;
}

.menu button i{
width:20px;
text-align:center;
font-size:15px;
color:#5eead4;
transition:transform .22s;
flex-shrink:0;
}

.menu button:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
.menu button:hover i{transform:scale(1.12)}

.menu button.active{
background:linear-gradient(135deg,rgba(20,184,166,.95),rgba(13,148,136,.9));
color:#fff;
box-shadow:0 6px 18px rgba(20,184,166,.35);
}

.menu button.active i{color:#fff}

.menu button.active::before{
content:'';
position:absolute;
left:0;top:20%;bottom:20%;
width:3px;
background:#5eead4;
border-radius:0 4px 4px 0;
}

.menu-admin{border:1px dashed rgba(94,234,212,.25) !important}

.menu-admin.active{border-color:transparent !important}

/* ---------- v3.2: GEMBOK MENU WAJIB LOGIN ----------
   Ikon kecil di ujung kanan item menu yang terkunci untuk guest
   (grup Data & Informasi + Layanan). */
.menu button .menu-lock{
margin-left:auto;
font-size:10.5px;
color:rgba(255,255,255,.45);
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
padding:3px 5px;
border-radius:6px;
width:auto;
flex-shrink:0;
}

.menu button:hover .menu-lock{color:#fbbf24;border-color:rgba(251,191,36,.4)}

.sidebar.collapsed .menu button .menu-lock{display:none}

/* ================= v3.2: GERBANG AKSES UKOM (WAJIB AKUN) ================= */
.ukom-gate{
max-width:640px;
margin:0 auto;
text-align:center;
padding:40px 30px;
}

.ukom-gate-icon{
width:64px;height:64px;
margin:0 auto 16px;
border-radius:50%;
background:rgba(245,158,11,.12);
border:1px solid rgba(245,158,11,.4);
color:#d97706;
font-size:24px;
display:flex;align-items:center;justify-content:center;
}

.ukom-gate h3{font-size:17px;color:#0f172a;margin-bottom:10px;font-weight:700}

.ukom-gate p{font-size:13.5px;color:#475569;line-height:1.85;max-width:520px;margin:0 auto}

.ukom-gate-actions{
display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
margin-top:24px;
}

.ukom-gate-note{
display:flex;gap:10px;align-items:flex-start;text-align:left;
margin-top:24px;padding:13px 16px;
border-radius:12px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#166534;
font-size:12.5px;line-height:1.75;
}

.ukom-gate-note i{margin-top:2px;color:#16a34a}

/* Input terkunci (NIK milik akun) */
.input-locked{
background:#f1f5f9 !important;
cursor:not-allowed;
}

.sidebar.collapsed .menu button span{opacity:0;width:0;overflow:hidden}

/* ---------- SIDEBAR FOOTER ---------- */
.sidebar-footer{
padding-top:10px;
border-top:1px solid rgba(255,255,255,.09);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}

.sidebar-collapse-btn{
border:none;
background:rgba(255,255,255,.08);
color:#5eead4;
width:34px;height:34px;
border-radius:10px;
cursor:pointer;
transition:all .2s;
display:flex;align-items:center;justify-content:center;
}

.sidebar-collapse-btn:hover{background:rgba(20,184,166,.3);transform:scale(1.06)}

.sidebar-copy{font-size:9.5px;color:rgba(255,255,255,.35);white-space:nowrap;transition:opacity .2s}

.sidebar.collapsed .sidebar-copy{opacity:0;height:0;overflow:hidden}

.sidebar.collapsed .sidebar-collapse-btn i{transform:rotate(180deg)}

/* ---------- MAIN ---------- */
.main{
margin-left:var(--sidebar-w);
padding:22px 26px 40px;
min-height:100vh;
background:
radial-gradient(900px 400px at 100% 0%,rgba(20,184,166,.06),transparent 55%),
radial-gradient(700px 500px at 0% 100%,rgba(15,118,110,.05),transparent 55%);
transition:margin .3s cubic-bezier(.4,0,.2,1);
}

.sidebar.collapsed + .main{margin-left:var(--sidebar-w-collapsed)}

/* ---------- TOPBAR ---------- */
.topbar{
background:#fff;
padding:16px 22px;
border-radius:18px;
box-shadow:var(--shadow);
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:22px;
border:1px solid rgba(226,232,240,.7);
flex-wrap:wrap;
gap:12px;
}

.topbar-left{display:flex;align-items:center;gap:14px}

.topbar-burger{
display:none;
border:none;
background:rgba(15,118,110,.08);
color:var(--primary);
width:40px;height:40px;
border-radius:12px;
cursor:pointer;
font-size:16px;
}

.title{font-size:21px;font-weight:700;color:var(--dark);font-family:'Montserrat',sans-serif;letter-spacing:-.01em}

.subtitle{font-size:12px;color:var(--gray);margin-top:3px;display:flex;align-items:center;gap:6px}

.subtitle::before{content:'';width:6px;height:6px;background:var(--secondary);border-radius:50%;display:inline-block}

.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.topbar-clock{
background:linear-gradient(135deg,#f0fdfa,#ecfeff);
border:1px solid rgba(20,184,166,.25);
color:var(--primary-dark);
font-size:12.5px;
font-weight:600;
padding:9px 15px;
border-radius:12px;
display:flex;align-items:center;gap:8px;
font-variant-numeric:tabular-nums;
}

/* ---------- TOMBOL ADMIN DI TOPBAR ---------- */
.topbar-admin-btn{
display:flex;align-items:center;gap:9px;
background:linear-gradient(135deg,#0f766e,#14b8a6);
color:#fff;border:none;cursor:pointer;
padding:6px 14px 6px 6px;border-radius:999px;
font-size:13px;font-weight:600;font-family:inherit;
box-shadow:0 4px 12px rgba(15,118,110,.28);
transition:all .18s ease;
max-width:220px;
}
.topbar-admin-btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(15,118,110,.38);
}
.topbar-admin-btn.is-logged-in{
background:linear-gradient(135deg,#1e293b,#334155);
box-shadow:0 4px 12px rgba(30,41,59,.25);
}
.topbar-admin-btn.is-logged-in:hover{
box-shadow:0 6px 18px rgba(30,41,59,.38);
}

.topbar-admin-avatar{
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.22);
display:flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
font-size:14px;
}
.topbar-admin-avatar img{
width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.topbar-admin-avatar .avatar-initial{
font-weight:700;font-size:14px;color:#fff;text-transform:uppercase;
}
.topbar-admin-avatar i{color:#fff}

.topbar-admin-label{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:140px;
}

@media (max-width:640px){
  .topbar-admin-label{display:none}
  .topbar-admin-btn{padding:6px;max-width:none}
}

/* ---------- SECTIONS ---------- */
.section{display:none;animation:fade .35s ease}
.section.active{display:block}

.section-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
flex-wrap:wrap;
gap:12px;
}

.section-head h2{
font-size:19px;
display:flex;align-items:center;gap:10px;
font-family:'Montserrat',sans-serif;
color:var(--dark);
}

.section-head h2 i{color:var(--secondary)}

/* ---------- TOOLBAR PENCARIAN ---------- */
.peserta-search{
display:flex;
gap:12px;
margin-bottom:16px;
flex-wrap:wrap;
align-items:flex-end;
}

.peserta-search input,.peserta-search select{
padding:11px 14px;
border:1.5px solid var(--line);
border-radius:11px;
font-size:13px;
outline:none;
min-width:170px;
background:#fff;
transition:border-color .15s,box-shadow .15s;
}

.peserta-search input:focus,.peserta-search select:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(20,184,166,.12)}

.peserta-search label{font-size:11.5px;font-weight:600;color:#334155;margin-bottom:5px;display:block}

.peserta-search .search-group{display:flex;flex-direction:column}

/* ---------- BADGE STATUS PESERTA ---------- */
.peserta-foto{
width:50px;height:62px;
object-fit:cover;
border-radius:9px;
border:2px solid var(--line);
cursor:pointer;
transition:transform .2s,box-shadow .2s;
}

.peserta-foto:hover{transform:scale(1.9);box-shadow:0 10px 30px rgba(0,0,0,.28);z-index:10;position:relative}

.sertifikat-thumb{
height:38px;
border-radius:7px;
cursor:pointer;
border:1px solid var(--line);
transition:transform .2s;
}

.sertifikat-thumb:hover{transform:scale(1.7);box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:10;position:relative}

/* ---------- PAGINATION ---------- */
.pu-pag-info{font-size:12.5px;color:var(--gray)}

.pu-pag-btns{display:flex;gap:4px;flex-wrap:wrap}

.pu-pag-btn{
padding:6px 12px;
border:1.5px solid var(--line);
border-radius:9px;
background:#fff;
color:#334155;
font-size:12px;
cursor:pointer;
transition:all .15s;
font-weight:500;
}

.pu-pag-btn:hover{background:#f0fdfa;border-color:var(--secondary);color:var(--primary)}
.pu-pag-btn.active{background:var(--grad-brand);color:#fff;border-color:var(--primary)}
.pu-pag-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- DASHBOARD STATUS LIST ---------- */
.dash-status-list{margin-top:18px;display:flex;flex-direction:column;gap:6px;text-align:left}

.dash-status-item{
display:flex;
align-items:center;
gap:9px;
padding:9px 12px;
border-radius:11px;
background:#f8fafc;
font-size:12.5px;
cursor:pointer;
transition:all .15s;
border:1px solid transparent;
}

.dash-status-item:hover{background:#f0fdfa;border-color:rgba(20,184,166,.3);transform:translateX(3px)}

.dash-status-item .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

.dash-status-item .count{margin-left:auto;font-weight:700;color:var(--dark)}

/* ---------- DASHBOARD MODAL ---------- */
.dash-modal-overlay{
position:fixed;inset:0;
background:rgba(15,23,42,.6);
backdrop-filter:blur(5px);
z-index:10000;
display:flex;align-items:center;justify-content:center;
padding:20px;
animation:fade .2s ease;
}

.dash-modal{
background:#fff;
border-radius:20px;
width:100%;
max-width:820px;
max-height:86vh;
display:flex;flex-direction:column;
overflow:hidden;
box-shadow:var(--shadow-lg);
}

.dash-modal-header{
display:flex;justify-content:space-between;align-items:center;
padding:18px 22px;
border-bottom:1px solid var(--line);
background:linear-gradient(135deg,#f8fafc,#fff);
}

.dash-modal-header h3{font-size:15px;color:var(--dark)}

.dash-modal-close{
border:none;background:none;
font-size:22px;cursor:pointer;color:var(--gray);
width:34px;height:34px;border-radius:50%;
transition:all .15s;
}

.dash-modal-close:hover{background:rgba(220,38,38,.1);color:var(--danger)}

.dash-modal-body{padding:18px 22px;overflow-y:auto;flex:1;min-height:0}

.dash-modal table{min-width:760px}

/* ---------- DASHBOARD KARTU KATEGORI (klik → pop up) ---------- */
.dash-cat-group{margin-bottom:22px}

.dash-cat-title{
display:flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;color:var(--dark);
margin:18px 0 10px;
text-transform:uppercase;letter-spacing:.4px;
}

.dash-cat-title i{color:var(--secondary)}

.dash-cat-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:12px;
}

.dash-cat-card{
background:#f8fafc;
border:1.5px solid var(--line);
border-radius:14px;
padding:14px 16px;
cursor:pointer;
transition:all .15s;
display:flex;flex-direction:column;gap:10px;
}

.dash-cat-card:hover{
background:#fff;
border-color:rgba(20,184,166,.45);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(15,118,110,.1);
}

.dash-cat-icon{
width:36px;height:36px;
border-radius:10px;
display:flex;align-items:center;justify-content:center;
font-size:15px;flex-shrink:0;
}

.dash-cat-name{
font-size:13px;font-weight:600;color:var(--dark);
line-height:1.45;word-break:break-word;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:2.6em;
}

.dash-cat-foot{
display:flex;align-items:center;justify-content:space-between;
font-size:11.5px;color:var(--gray);font-weight:600;
}

.dash-cat-foot i{font-size:10px;color:#94a3b8;transition:all .15s}
.dash-cat-card:hover .dash-cat-foot i{color:var(--secondary);transform:translate(1px,-1px)}

.dash-cat-empty{
grid-column:1/-1;
text-align:center;padding:22px;
color:#94a3b8;font-size:12.5px;
background:#f8fafc;
border:1.5px dashed var(--line);
border-radius:14px;
}

.dash-cat-empty i{display:block;font-size:20px;margin-bottom:6px;opacity:.5}

/* ---------- SEARCH DALAM MODAL DASHBOARD ---------- */
.dash-search{
width:100%;
padding:10px 14px;
border:1.5px solid var(--line);
border-radius:11px;
font-size:13px;font-family:inherit;
margin-bottom:10px;outline:none;
color:var(--dark);background:#fff;
transition:border-color .15s,box-shadow .15s;
}

.dash-search:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(20,184,166,.12)}
.dash-search::placeholder{color:#94a3b8}

.dash-modal-info{font-size:11.5px;color:var(--gray);margin-bottom:10px;font-weight:500}

/* ---------- TREN PENDAFTARAN PER BULAN ---------- */
.dash-trend-wrap{margin-top:8px}

.dash-trend-svg{width:100%;height:auto;display:block}

.dash-trend-dot{cursor:pointer;transition:stroke-width .15s}
.dash-trend-dot:hover{stroke-width:4.5}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
.sidebar{
transform:translateX(-100%);
width:var(--sidebar-w) !important;
transition:transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar.mobile-open{transform:translateX(0)}

.sidebar.collapsed{width:var(--sidebar-w) !important}

.sidebar.collapsed .menu button span,
.sidebar.collapsed .profile-name,
.sidebar.collapsed .profile-role,
.sidebar.collapsed .profile-status-text{opacity:1;width:auto;height:auto}

.main{margin-left:0 !important;padding:16px}

.topbar-burger{display:flex;align-items:center;justify-content:center}

.sidebar-backdrop{
position:fixed;inset:0;
background:rgba(15,23,42,.5);
z-index:998;
animation:fade .25s;
}

table{min-width:1500px}
}

@media(max-width:640px){
.title{font-size:17px}
.topbar-clock{display:none}
.menu button{padding:12px}
}