/* =====================================================
   SIMPEG YPCM — meniru tema cendekia-muslim
   (emerald, Plus Jakarta Sans, sidebar gelap)
   Dipakai bersama Tailwind Browser CDN untuk utilitas.
   ===================================================== */

:root {
    --brand: #059669;
    --brand-dark: #047857;
    --gold: #e0b64a;
    --gold-2: #c9962f;
}

body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }

/* ---------- Sidebar emerald ---------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: 16rem; overflow-y: auto;
    background: #022c22;            /* emerald-950 */
    color: #d1fae5;
    transition: transform .2s ease;
    transform: translateX(-100%);
}
@media (min-width: 1024px) { .sidebar { transform: translateX(0); } }
body.sidebar-open .sidebar { transform: translateX(0); }

.menu-item {
    display: flex; align-items: center; gap: .75rem;
    border-radius: .5rem; padding: .625rem .75rem;
    font-size: .875rem; color: rgba(167, 243, 208, .8);
    text-decoration: none; transition: background .15s, color .15s;
}
.menu-item:hover { background: #064e3b; color: #fff; }
.menu-item.active { background: #059669; color: #fff; font-weight: 600; }
.menu-label {
    margin: 1rem 0 .25rem; padding: 0 .75rem;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: #10b981;
}

/* ---------- Komponen umum ---------- */
.card {
    border-radius: .75rem; border: 1px solid #f3f4f6;
    background: #fff; padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.btn-primary, .btn-outline, .btn-danger {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: .5rem; padding: .5rem 1rem;
    font-size: .875rem; font-weight: 600; cursor: pointer;
    transition: background .15s; text-decoration: none; border: none;
}
.btn-primary { background: #059669; color: #fff; }
.btn-primary:hover { background: #047857; }
.btn-outline { border: 1px solid #d1d5db; color: #374151; background: #fff; }
.btn-outline:hover { background: #f9fafb; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.input {
    width: 100%; border-radius: .5rem; border: 1px solid #d1d5db;
    padding: .5rem .75rem; font-size: .875rem; background: #fff;
}
.input:focus { border-color: #10b981; outline: none; box-shadow: 0 0 0 2px #a7f3d0; }
.label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 500; color: #374151; }

.table-base { width: 100%; text-align: left; font-size: .875rem; border-collapse: collapse; }
.table-base thead th {
    border-bottom: 1px solid #e5e7eb; background: #f9fafb;
    padding: .75rem 1rem; font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: #6b7280;
}
.table-base tbody td { border-bottom: 1px solid #f3f4f6; padding: .75rem 1rem; color: #374151; }

.badge-green, .badge-red, .badge-yellow, .badge-gray, .badge-blue {
    display: inline-flex; border-radius: 9999px;
    padding: .125rem .625rem; font-size: .75rem; font-weight: 600;
}
.badge-green  { background: #d1fae5; color: #047857; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-yellow { background: #fef3c7; color: #b45309; }
.badge-gray   { background: #f3f4f6; color: #4b5563; }
.badge-blue   { background: #dbeafe; color: #1d4ed8; }

/* ---------- Login gradient ---------- */
.login-bg {
    background: linear-gradient(135deg, #022c22 0%, #065f46 55%, #059669 100%);
}

/* ---------- Kartu Pegawai digital ---------- */
.ktp-card {
    background: linear-gradient(150deg, #064e3b 0%, #047857 55%, #0f766e 100%);
    border-radius: 1.25rem; color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 16px 40px rgba(4, 120, 87, .35);
}
.ktp-card::before {
    content: ""; position: absolute; top: -40%; right: -15%;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(224, 182, 74, .18);
}
.ktp-card::after {
    content: ""; position: absolute; bottom: -45%; left: -10%;
    width: 170px; height: 170px; border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

[x-cloak] { display: none !important; }

/* ---------- Cetak ---------- */
@media print {
    .sidebar, header, .no-print, button, .btn-primary, .btn-outline, .btn-danger { display: none !important; }
    main { padding: 0 !important; }
    .lg\:ml-64, .lg\:pl-64 { margin-left: 0 !important; padding-left: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #e5e7eb; }
    body { background: #fff !important; }
}