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

:root {
    --bg-main: #dfeeff;
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --white: #fff;
    --border: #e5e7eb;
    --primary-btn: #111827;
    --blue: #2563eb;
    --green: #16a34a;
    --red: #dc2626;
    --yellow: #ca8a04;
}

/* Gaya dasar untuk kedua tombol */
.btn-primary, .btn-outline {
    width: 100%;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease-in-out; /* Membuat animasi transisi mulus */
}

/* Tombol Masuk (Primary) */
.btn-primary {
    background-color: #4f46e5; /* Warna utama (biru/indigo) */
    color: #ffffff;
    border: 2px solid #4f46e5;
}

.btn-primary:hover {
    background-color: #4338ca; /* Warna lebih gelap saat kursor di atasnya */
    border-color: #4338ca;
}

.btn-primary:active {
    background-color: #3730a3; /* Warna makin gelap saat ditekan */
    transform: scale(0.98); /* Efek tombol tertekan */
}

/* Tombol Daftar (Outline) */
.btn-outline {
    background-color: transparent;
    color: #4f46e5;
    border: 2px solid #4f46e5;
}

.btn-outline:hover {
    background-color: #4f46e5; /* Latar belakang terisi saat kursor di atasnya */
    color: #ffffff;
}

.btn-outline:active {
    background-color: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
    transform: scale(0.98); /* Efek tombol tertekan */
}

/* Gaya dasar untuk kedua tombol */
.btn-primary, .btn-register {
    width: 100%;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    display: block;
    border: none;
    color: #ffffff; /* Teks putih untuk kedua tombol */
    transition: all 0.3s ease-in-out;
}

/* Tombol Masuk ke Dashboard (Biru) */
.btn-primary {
    background-color: #2563eb; 
}

.btn-primary:hover {
    background-color: #1d4ed8; /* Biru lebih gelap saat hover */
}

.btn-primary:active {
    background-color: #1e40af; /* Makin gelap dan mengecil saat ditekan */
    transform: scale(0.98);
}

/* Tombol Daftar Akun Baru (Ungu) */
.btn-register {
    background-color: #6366f1; 
}

.btn-register:hover {
    background-color: #4f46e5; /* Ungu lebih gelap saat hover */
}

.btn-register:active {
    background-color: #4338ca;
    transform: scale(0.98);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

html { background: #fff; }

body {
    background: #fff;
    color: var(--text-primary);
    min-height: 100vh;
    position: relative;
}

body::before { content: ""; display: none; }

.site-footer {
    text-align: center;
    color: #94a3b8;
    font-size: .7rem;
    padding: 1rem;
}

/* =====================================================
   AUTH PAGE
   ===================================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fdfdff 10%, #edf4ff 22%, #dfeaff 38%, #d3e1ff 55%, #9bbaff 72%, #1d4ed8 100%) !important;
    color: #191c1e;
}
.auth-main { background: transparent !important; }

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.8rem;
    min-height: 620px;
    background: linear-gradient(180deg, rgba(17,24,39,.08), rgba(29,78,216,.26)), url('BG-Login.jpeg') center/cover no-repeat;
    color: #fff;
    isolation: isolate;
}
.auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,19,48,.12), rgba(13,32,84,.42));
    z-index: -1;
}
.visual-content,
.visual-footer { position: relative; z-index: 1; }
.visual-content { padding-top: .25rem; }

.visual-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.visual-badge::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ef0d5;
    box-shadow: 0 0 0 5px rgba(126,240,213,.2);
}
.visual-content h2 {
    margin-top: 1rem;
    font-size: clamp(2.3rem, 3vw, 4rem);
    line-height: .96;
    font-weight: 800;
    letter-spacing: -.04em;
}
.visual-content p {
    margin-top: .75rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,.88);
    max-width: 32rem;
}
.visual-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.visual-quote {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.12);
    border-radius: 14px;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255,255,255,.96);
}
.visual-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 1rem;
}
.metric-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.metric-value {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}
.metric-label {
    font-size: .62rem;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.auth-topbar {
    width: 100%;
    border-bottom: 1px solid rgba(117,118,132,.22);
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
}
.auth-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    height: 72px;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #1f4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(30,64,175,.18);
}
.brand-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: transparent;
}
.brand-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.brand-name {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #111827;
}
.brand-badge {
    font-size: .64rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #e0e9ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.topbar-contact {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: #475569;
}
.topbar-contact .contact-icon {
    font-size: 1rem;
    color: #1d4ed8;
}
.topbar-contact a {
    color: #1d4ed8;
    font-weight: 700;
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}
.auth-shell {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: 5fr 7fr;
    min-height: 620px;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 1.3rem;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15,23,42,.08);
}

/* (duplikat visual-badge dkk. dari source tetap dipertahankan) */
.visual-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.visual-badge::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ef0d5;
    box-shadow: 0 0 0 5px rgba(126,240,213,.2);
}
.visual-content h2 {
    margin-top: 1rem;
    font-size: clamp(1.8rem, 2vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.04em;
}
.visual-content p {
    margin-top: .75rem;
    font-size: .92rem;
    line-height: 1.65;
    color: rgba(255,255,255,.85);
    max-width: 26rem;
}
.visual-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.visual-quote {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255,255,255,.9);
}
.visual-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 1rem;
}
.metric-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.metric-value {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}
.metric-label {
    font-size: .62rem;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.auth-panel {
    background: #fff;
    display: flex;
    flex-direction: column;
}
.auth-tabs {
    display: flex;
    border-bottom: 1px solid #e6ebf3;
    background: #f7f9fc;
}
.auth-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: none;
    background: transparent;
    color: #5b6476;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
}
.auth-tab:hover { color: #1f2937; }
.auth-tab.active {
    color: #1d4ed8;
    border-bottom: 2px solid #1d4ed8;
    background: #fff;
}
.auth-form-wrap {
    padding: 2rem 2.25rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-welcome { margin-bottom: 1.5rem; }
.auth-welcome h1 {
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    color: #111827;
    margin: 0 0 .45rem;
}
.auth-welcome p {
    margin: 0;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.5;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.form-group { margin-bottom: 1.05rem; }
.form-label {
    display: block;
    margin-bottom: .55rem;
    font-size: .82rem;
    font-weight: 700;
    color: #334155;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: .82rem .9rem;
    border: 1px solid #dfe7f1;
    border-radius: .75rem;
    font-size: .9rem;
    background: #fff;
    color: #111827;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder { color: #94a3b8; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(29,78,216,.08);
}

/* Login role picker */
.login-role {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
    align-items: stretch;
}
.role-option { position: relative; }
.role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.role-option label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-height: 120px;
    padding: .9rem;
    border: 2px solid #dfe7f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    color: #374151;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    line-height: 1.2;
}
.role-option label:hover {
    border-color: #93c5fd;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(37,99,235,.08);
}
.role-option .role-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.role-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    background: #e8eefc;
    color: #1d4ed8;
}
.role-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
}
.role-option:nth-child(2) .role-icon { background: #dffaf3; color: #0f766e; }
.role-option:nth-child(3) .role-icon { background: #f3f4f6; color: #475569; }
.role-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.role-option input:checked + label {
    border-color: #1d4ed8;
    background: linear-gradient(180deg, #edf4ff, #e6f0ff);
    box-shadow: 0 12px 24px rgba(29,78,216,.12);
}
.role-option input:checked + label .role-dot { border-color: #1d4ed8; }
.role-option input:checked + label .role-dot::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1d4ed8;
}
.role-name {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111827;
}
.role-meta {
    font-size: .62rem;
    color: #64748b;
    font-weight: 600;
}

/* Buttons */
.btn-submit,
.btn-primary,
.btn-danger,
.btn-outline,
.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.1rem;
    border-radius: .8rem;
    border: 1px solid transparent;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}
.btn-submit,
.btn-primary {
    background: linear-gradient(135deg, #143ea6, #1d4ed8);
    color: #fff;
    box-shadow: 0 12px 20px rgba(29,78,216,.2);
}
.btn-submit:hover,
.btn-primary:hover { transform: translateY(-1px); }
.btn-submit {
    width: 100%;
    margin-top: .25rem;
}

.login-note {
    margin-top: 1.2rem;
    text-align: center;
    font-size: .8rem;
    color: #64748b;
}
.login-note a {
    color: #1d4ed8;
    font-weight: 700;
}

/* Alerts */
.alert {
    padding: .8rem 1rem;
    border-radius: .7rem;
    font-size: .82rem;
    margin-bottom: 1rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid rgba(16,185,129,.15);
}
.alert.error {
    background: #fef2f2;
    color: #991b1b;
    border-color: rgba(239,68,68,.12);
}

/* =====================================================
   RESPONSIVE — AUTH
   ===================================================== */
@media (max-width: 980px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { min-height: 270px; }
}
@media (max-width: 540px) {
    .auth-topbar-inner { height: 64px; padding: 0 .8rem; }
    .brand-badge { display: none; }
    .auth-form-wrap { padding: 1.35rem 1rem 1.2rem; }
    .login-role { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .topbar-contact { font-size: .7rem; gap: .25rem; }
    .topbar-contact span:not(.contact-icon) { display: none; }
}

/* =====================================================
   LAYOUT — DASHBOARD
   ===================================================== */
.layout { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: 260px;
    position: relative;
    background: var(--sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sidebar-logo {
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
    font-size: 1.08rem;
    border-bottom: 1px solid var(--sidebar-hover);
}
.sidebar-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}
.sidebar-logo small {
    font-size: .62rem;
    font-weight: 400;
    color: #94a3b8;
    display: block;
    margin-top: 2px;
}
.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}
.nav-group {
    font-size: .7rem;
    color: #94a3b8;
    padding: 0 1.5rem;
    margin: .4rem 0;
    text-transform: uppercase;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .72rem 1.5rem;
    color: #cbd5e1;
    font-size: .84rem;
    transition: .2s;
}
.nav-item:hover,
.nav-item.active {
    background: var(--sidebar-hover);
    color: #fff;
    border-left: 3px solid #fff;
    padding-left: calc(1.5rem - 3px);
}
.sidebar-footer {
    padding: 1.2rem 1.5rem;
    border-top: 1px solid var(--sidebar-hover);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.user-brief {
    min-width: 0;
    flex: 1;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.user-brief h4 {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
    color: #fff;
}
.user-brief p {
    font-size: .68rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.sign-out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: .5rem .8rem;
    border: 1px solid rgba(148,163,184,.6);
    border-radius: 999px;
    background: rgba(15,23,42,.42);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: all .2s ease;
}
.sign-out:hover {
    background: rgba(59,130,246,.18);
    border-color: rgba(96,165,250,.9);
    box-shadow: 0 8px 18px rgba(59,130,246,.18);
    transform: translateY(-1px);
}
.sign-out:active { transform: translateY(0); }

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.topbar {
    padding: 1.25rem 2.5rem 1rem;
    background: var(--bg-main);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.topbar h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.topbar p {
    color: var(--text-secondary);
    font-size: .8rem;
}
.topbar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
}
.topbar-user .avatar,
.topbar-user strong {
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #075985;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.content {
    flex: 1;
    padding: 1rem 2.5rem 2.5rem;
    overflow-y: auto;
}
.body-scroll-sink .topbar-user .avatar,
.body-scroll-sink .topbar-user strong,
.body-scroll-sink .user-brief h4,
.body-scroll-sink .user-brief p {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
    pointer-events: none;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff;
    padding: 1.2rem;
    border-radius: .75rem;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-icon {
    width: 45px;
    height: 45px;
    border-radius: .65rem;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}
.stat-info h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: .2rem;
}
.stat-info p {
    font-size: .76rem;
    color: var(--text-secondary);
}

/* Cards */
.card {
    background: #fff;
    border-radius: .75rem;
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.card-header {
    padding: 1.15rem 1.4rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.card-title {
    font-weight: 600;
    font-size: .95rem;
}
.card-body { padding: 1.4rem; }
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}
.list-item:last-child { border-bottom: none; }
.list-info h5 {
    font-size: .84rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.list-info p {
    font-size: .72rem;
    color: var(--text-secondary);
}
.list-action {
    font-size: .78rem;
    color: #2563eb;
    font-weight: 600;
}

/* Tags & badges */
.tags {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.tag {
    padding: .25rem .65rem;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: .7rem;
}
.badge {
    padding: .25rem .7rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    display: inline-block;
}
.badge.pending { background: #fef3c7; color: #92400e; }
.badge.approved,
.badge.active { background: #dcfce7; color: #166534; }
.badge.rejected,
.badge.closed { background: #fee2e2; color: #991b1b; }
.badge.revision { background: #fef3c7; color: #92400e; }
.badge.info { background: #e0f2fe; color: #075985; }

/* Tables */
.table-wrap { overflow: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}
.table th,
.table td {
    text-align: left;
    padding: .75rem .8rem;
    border-bottom: 1px solid var(--border);
    font-size: .76rem;
    vertical-align: top;
}
.table th {
    font-size: .68rem;
    color: #6b7280;
    background: #f8fafc;
}

/* Grids */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1rem;
}
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Hero */
.hero {
    background: linear-gradient(135deg, #2563eb, #4f7df3);
    color: #fff;
    border-radius: 1rem;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.25rem;
}
.hero small { opacity: .85; }
.hero h1 { font-size: 1.45rem; margin: .45rem 0; }
.hero p { font-size: .8rem; line-height: 1.55; opacity: .92; }

/* Notices */
.notice {
    padding: .9rem 1rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1e40af;
    border-radius: .65rem;
    font-size: .78rem;
    margin-bottom: 1rem;
}

/* Progress */
.progress {
    height: 7px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.progress > span {
    height: 100%;
    display: block;
    background: #10b981;
}

/* Chat */
.chat { max-height: 380px; overflow: auto; }
.message {
    max-width: 78%;
    padding: .7rem .85rem;
    border-radius: .7rem;
    margin: .6rem 0;
    font-size: .76rem;
    line-height: 1.45;
}
.message.me {
    margin-left: auto;
    background: #e0f2fe;
    color: #0c4a6e;
}
.message.other { background: #f3f4f6; }
.message small {
    display: block;
    color: #6b7280;
    margin-top: .3rem;
    font-size: .62rem;
}

/* Misc */
.inline { display: inline-flex; gap: .4rem; align-items: center; }
.checklist { display: grid; gap: .55rem; }
.check { display: flex; gap: .6rem; align-items: center; font-size: .78rem; }
.modal { display: none; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.metric { font-size: 1.4rem; font-weight: 700; }
.muted { color: var(--text-secondary); font-size: .75rem; }
.text-success { color: #15803d; }
.text-danger { color: #b91c1c; }
.text-warning { color: #a16207; }

/* =====================================================
   RESPONSIVE — LAYOUT
   ===================================================== */
@media (max-width: 1200px) {
    .auth-brand { left: 18px; top: 16px; }
    .auth-main { padding-top: 5.5rem; }
    .role-help { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 30;
        transition: .2s;
        box-shadow: 12px 0 35px rgba(15,23,42,.18);
    }
    .sidebar.show { left: 0; }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.35);
        z-index: 20;
    }
    .sidebar-overlay.show { display: block; }
    .mobile-menu { display: inline-block; }
    .topbar { padding: 1.1rem 1rem; }
    .content { padding: 1rem; }
    .two-col,
    .three-col { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .topbar-user { display: none; }
}
@media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 1.15rem; }
    .sidebar-logo { padding-top: 1rem; }
    .login-wrapper { padding: .75rem; }
    .login-card { padding: 1.5rem; }
    .auth-brand span { font-size: .9rem; }
    .auth-brand small { font-size: .58rem; }
    .auth-links { flex-direction: column; align-items: center; gap: .45rem; }
}

/* =====================================================
   CHAT (duplikat dari source)
   ===================================================== */
.chat {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

/* AJAX form alert */
.ajax-alert {
    margin-top: 1rem;
    display: none;
}
.ajax-alert.alert { display: block; }

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
    .sidebar,
    .topbar,
    .site-footer,
    .btn-primary,
    .btn-outline,
    .btn-success,
    .btn-danger,
    .mobile-menu,
    .sidebar-overlay { display: none !important; }
    .layout { display: block !important; height: auto !important; }
    .main { display: block !important; overflow: visible !important; }
    .content { padding: 0 !important; overflow: visible !important; }
    .card {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    body { background: #fff !important; }
    #sertifikatCard {
        border: 4px double #0f172a !important;
        padding: 2rem !important;
    }
    .table th { background: #f1f5f9 !important; }
    .table { min-width: auto !important; }
}

/* =====================================================
   PROGRESS BAR ENHANCEMENTS
   ===================================================== */
@keyframes fillBar {
    from { width: 0 !important; }
}
.stats-grid .stat-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.stats-grid .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

/* =====================================================
   UI ICONS
   ===================================================== */
.ui-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -.2em;
    color: currentColor;
}
.nav-item .ui-icon { color: #cbd5e1; }
.nav-item:hover .ui-icon,
.nav-item.active .ui-icon { color: #fff; }
.stat-icon { color: #111827; }
.stat-icon .ui-icon {
    width: 1.45rem;
    height: 1.45rem;
}
.card-title .ui-icon { margin-right: .3rem; }
.notice > .ui-icon,
.notice strong .ui-icon { margin-right: .35rem; }
.feature-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .35rem;
    vertical-align: middle;
}
.feature-status.available,
.notice > .ui-icon,
.notice strong .ui-icon { color: #111827; }
.feature-status.locked { color: #64748b; }
.empty-state-icon {
    margin: 0 auto .5rem;
    color: #111827;
}
.empty-state-icon .ui-icon {
    width: 3rem;
    height: 3rem;
}
.btn-primary .ui-icon,
.btn-outline .ui-icon { margin-right: .35rem; }

/* =====================================================
   AUTH PAGE OVERRIDES
   ===================================================== */
.auth-page {
    background: linear-gradient(180deg, #dfeeff 0%, #b2bfd9 26%, #4d5a8a 100%);
}
.auth-page .login-card {
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.7);
    box-shadow: 0 20px 60px rgba(15,23,42,.24);
}
.auth-page .auth-brand { color: #0f172a; }
.auth-page .auth-brand small { color: #64748b; }
.auth-page .auth-brand::after { background: #30209b; }
.auth-page .login-header h1,
.auth-page .form-label { color: var(--text-primary); }
.auth-page .login-header p,
.auth-page .login-note { color: var(--text-secondary); }
.auth-page .login-note a {
    color: #2563eb;
    text-decoration: none;
}
.auth-page .site-footer { color: rgba(255,255,255,.78); }

/* =====================================================
   DASHBOARD THEME (aligned with auth)
   ===================================================== */
.layout { background: #f3f8ff; }
.layout .sidebar { background: #020d2c; }
.layout .sidebar-logo { border-bottom-color: rgba(255,255,255,.12); }
.layout .sidebar-logo img {
    background: transparent;
    border-radius: 0;
}
.layout .nav-group { color: #b7c6f1; }
.layout .nav-item { color: #dce6ff; }
.layout .nav-item .ui-icon { color: #c4d2f3; }
.layout .nav-item:hover,
.layout .nav-item.active {
    background: #173bab;
    color: #fff;
    border-left-color: #fff;
}
.layout .nav-item:hover .ui-icon,
.layout .nav-item.active .ui-icon { color: #fff; }
.layout .sidebar-footer { border-top-color: rgba(255,255,255,.12); }
.layout .user-brief p,
.layout .sign-out { color: #b7c6f1; }
.layout .main { background: #f3f8ff; }
.layout .topbar {
    background: #fff;
    border-bottom: 1px solid #e4eaf3;
}
.layout .topbar h2 {
    color: #111827;
    font-weight: 800;
    letter-spacing: -.03em;
}
.layout .topbar p { color: #64748b; }
.layout .avatar {
    background: #e0e9ff;
    color: #1d4ed8;
}
.layout .content { background: #f3f8ff; }
.layout .hero {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 1.4rem;
    background: linear-gradient(120deg, rgba(19,34,82,.72), rgba(81,114,204,.52)),
                url('https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
    box-shadow: 0 16px 42px rgba(20,32,81,.2);
    overflow: hidden;
}
.layout .hero small {
    color: #eaf0ff;
    font-weight: 700;
}
.layout .hero h1 {
    color: #fff;
    letter-spacing: -.03em;
}
.layout .hero p { color: rgba(255,255,255,.9); }
.layout .card,
.layout .stat-card {
    border-color: #dfe7f1;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(15,43,110,.045);
}
.layout .card-header { border-bottom-color: #e6ebf3; }
.layout .card-title {
    color: #172554;
    font-weight: 700;
}
.layout .stat-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.layout .stats-grid .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(29,78,216,.1);
}
.layout .stat-icon {
    background: #e8eefc !important;
    color: #1d4ed8;
}
.layout .notice {
    border-color: #c7d7fe;
    background: #eff5ff;
    color: #1e3a8a;
}
.layout .notice .ui-icon,
.layout .notice strong .ui-icon { color: #1d4ed8; }
.layout .table th {
    background: #eef3ff;
    color: #1e3a8a;
}
.layout .table th,
.layout .table td { border-color: #e5eaf3; }
.layout .btn-outline {
    border-color: #d7e1f0;
    color: #334155;
}
.layout .btn-outline:hover {
    border-color: #1d4ed8;
    color: #1d4ed8;
    background: #f5f8ff;
}
.layout .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .8rem;
    padding: 1.5rem 1rem;
}
.layout .empty-state .btn-primary { margin: 0 auto; }
.layout .empty-state-icon,
.layout .feature-status.available { color: #1d4ed8; }
.layout .site-footer { color: #64748b; }

@media (max-width: 700px) {
    .layout .topbar { padding: 1rem; }
    .layout .content { padding: 1rem; }
    .layout .hero { padding: 1.15rem; }
}

/* =====================================================
   LAYOUT — FIXED SHELL
   ===================================================== */
.layout {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}
.layout .sidebar {
    width: 260px;
    min-width: 260px;
    height: 100%;
}
.layout .main {
    flex: 1;
    min-width: 0;
    min-height: 0;
}
.layout .topbar { flex: 0 0 auto; }
.layout .content {
    min-width: 0;
    min-height: 0;
}
.layout a { text-decoration: none; }

.auth-topbar { background: #fff; }
.brand-icon {
    width: 52px;
    height: 52px;
    background: transparent;
    box-shadow: none;
}
.brand-icon img {
    width: 48px;
    height: 48px;
}

/* Scrollbars */
.layout .sidebar-nav,
.layout .content {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.45) transparent;
}
.layout .sidebar-nav::-webkit-scrollbar,
.layout .content::-webkit-scrollbar { width: 8px; }
.layout .sidebar-nav::-webkit-scrollbar-track,
.layout .content::-webkit-scrollbar-track { background: transparent; }
.layout .sidebar-nav::-webkit-scrollbar-thumb,
.layout .content::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.38);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
.layout .sidebar-nav::-webkit-scrollbar-thumb:hover,
.layout .content::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,.62);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Stat card link */
.stat-card-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.stat-card-link:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

/* =====================================================
   DASHBOARD PAGE HEADING
   ===================================================== */
.dashboard-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #dfe7f1;
    border-radius: 1.1rem;
    background: linear-gradient(120deg, #fff 0%, #f6f9ff 100%);
    box-shadow: 0 8px 24px rgba(15,43,110,.045);
}
.dashboard-page-heading-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.dashboard-page-heading-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 1rem;
    background: linear-gradient(135deg, #e8efff, #dce8ff);
    color: #1d4ed8;
}
.dashboard-page-heading-icon .ui-icon {
    width: 1.55rem;
    height: 1.55rem;
}
.dashboard-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 600;
}
.dashboard-page-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}
.dashboard-page-breadcrumb a:hover { color: #1d4ed8; }
.dashboard-page-heading h1 {
    color: #172554;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -.03em;
}
.dashboard-page-heading p {
    margin-top: .25rem;
    color: #64748b;
    font-size: .85rem;
    line-height: 1.5;
}
.dashboard-page-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: none;
    padding: .65rem .85rem;
    border: 1px solid #dbe5f5;
    border-radius: .75rem;
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    transition: all .18s ease;
}
.dashboard-page-home:hover {
    border-color: #93b4f5;
    background: #f5f8ff;
    color: #1d4ed8;
    transform: translateY(-1px);
}
.dashboard-page-home:focus-visible,
.dashboard-quick-card:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}
.dashboard-page-home .ui-icon {
    width: 1rem;
    height: 1rem;
}

/* =====================================================
   QUICK ACTIONS
   ===================================================== */
.dashboard-quick-section { margin: 1.25rem 0 1.5rem; }
.dashboard-quick-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: .7rem;
}
.dashboard-section-eyebrow {
    color: #64748b;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.dashboard-quick-heading h2 {
    margin-top: .12rem;
    color: #172554;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}
.dashboard-quick-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid #dfe7f1;
    border-radius: .9rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(15,43,110,.035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dashboard-quick-card:hover {
    transform: translateY(-2px);
    border-color: #b7caf2;
    box-shadow: 0 10px 22px rgba(29,78,216,.09);
}
.dashboard-quick-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: .8rem;
    background: #eef3ff;
    color: #2453c7;
}
.dashboard-quick-icon .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.dashboard-quick-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
}
.dashboard-quick-copy strong {
    color: #172554;
    font-size: .82rem;
}
.dashboard-quick-copy small {
    overflow: hidden;
    color: #64748b;
    font-size: .69rem;
    line-height: 1.4;
    text-overflow: ellipsis;
}
.dashboard-quick-arrow {
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 700;
}

/* =====================================================
   LAYOUT — CARD/TABLE OVERRIDES
   ===================================================== */
.layout .card { overflow: hidden; }
.layout .card-header {
    min-height: 3.25rem;
    padding: .9rem 1.15rem;
}
.layout .card-body { padding: 1.1rem 1.15rem; }
.layout .table {
    border-collapse: separate;
    border-spacing: 0;
}
.layout .table th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .025em;
}
.layout .table td {
    font-size: .81rem;
    line-height: 1.5;
}
.layout .table tr:last-child td { border-bottom: 0; }
.layout .list-item { gap: 1rem; }
.layout .list-item b { color: #172554; }
.layout .muted { line-height: 1.5; }
.layout .form-label { color: #334155; }
.layout .form-input,
.layout .form-select,
.layout .form-textarea {
    border-color: #dbe4f0;
    border-radius: .7rem;
    background: #fff;
}
.layout .form-input:focus,
.layout .form-select:focus,
.layout .form-textarea:focus {
    border-color: #6d95eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.09);
}

@media (max-width: 760px) {
    .dashboard-page-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 1rem;
    }
    .dashboard-page-home { width: 100%; }
    .dashboard-quick-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   APPLICATION LIST (HUMAS)
   ===================================================== */
.application-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1.1rem;
}
.application-summary-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: linear-gradient(145deg, #fff, #f8faff);
    box-shadow: 0 5px 16px rgba(15,43,110,.035);
}
.application-summary-icon {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: .85rem;
    background: #eff6ff;
    color: #2563eb;
}
.application-summary-icon .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.application-summary-icon.pending { background: #fff7ed; color: #c2410c; }
.application-summary-icon.approved { background: #ecfdf5; color: #15803d; }
.application-summary-icon.rejected { background: #fff1f2; color: #be123c; }
.application-summary-icon.total { background: #eef2ff; color: #4338ca; }
.application-summary-card > div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.application-summary-label {
    color: #64748b;
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.35;
}
.application-summary-card strong {
    color: #172554;
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 800;
}
.application-list-card { overflow: hidden; }
.application-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.application-list-heading .muted {
    margin-top: .25rem;
    font-size: .75rem;
}
.application-count {
    flex: none;
    padding: .38rem .7rem;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .7rem;
    font-weight: 700;
}
.application-table { min-width: 850px; }
.application-table td { vertical-align: middle; }
.application-student-name,
.application-institution-name {
    color: #172554;
    font-weight: 700;
}
.application-student-meta {
    margin-top: .2rem;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.45;
}
.application-student-meta span {
    padding: 0 .12rem;
    color: #94a3b8;
}
.application-score {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 75px;
    color: #334155;
    font-size: .73rem;
    font-weight: 700;
}
.application-score-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef7;
}
.application-score-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}
.application-status {
    display: inline-flex;
    align-items: center;
    padding: .36rem .6rem;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 700;
    white-space: nowrap;
}
.application-status.pending { background: #fff7ed; color: #c2410c; }
.application-status.approved { background: #ecfdf5; color: #15803d; }
.application-status.rejected { background: #fff1f2; color: #be123c; }
.application-review-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.application-review-actions button {
    padding: .48rem .65rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.application-review-actions button:hover { transform: translateY(-1px); }
.application-approve-button {
    background: #ecfdf5;
    color: #15803d;
    border-color: #bbf7d0 !important;
}
.application-approve-button:hover { background: #dcfce7; }
.application-reject-button {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3 !important;
}
.application-reject-button:hover { background: #ffe4e6; }
.application-empty-state { min-height: 230px; }
.application-empty-state h3 {
    color: #172554;
    font-size: 1rem;
}
.application-empty-state p {
    max-width: 28rem;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .application-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .application-summary { gap: .6rem; }
    .application-summary-card {
        gap: .6rem;
        padding: .8rem;
    }
    .application-summary-icon {
        width: 2.35rem;
        height: 2.35rem;
    }
    .application-summary-label { font-size: .63rem; }
    .application-summary-card strong { font-size: 1.15rem; }
    .application-list-heading { align-items: flex-start; }
}
@media (max-width: 768px) {
    .table { min-width: 0; }
    .application-table { min-width: 0; }
}

/* =====================================================
   HAMBURGER MODE — Berlaku di semua layar <= 1200px
   Sidebar tersembunyi dulu, muncul saat klik hamburger
   ===================================================== */
@media (max-width: 1200px) {

    /* Tombol hamburger — bersih tanpa kotak */
    .mobile-menu {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        padding: .5rem;
        margin: 0;
        cursor: pointer;
        color: #1d4ed8;
        line-height: 0;
        -webkit-appearance: none;
        appearance: none;
        border-radius: .5rem;
        transition: background .18s ease;
    }
    .mobile-menu:hover,
    .mobile-menu:focus {
        background: rgba(37,99,235,.08) !important;
    }
    .mobile-menu .ui-icon {
        width: 1.5rem;
        height: 1.5rem;
        color: #1d4ed8;
    }

    /* Sidebar jadi overlay, tersembunyi dulu */
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 30;
        transition: left .22s ease;
        box-shadow: 12px 0 35px rgba(15,23,42,.18);
    }
    .sidebar.show { left: 0; }

    /* Overlay gelap di belakang sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.45);
        z-index: 20;
    }
    .sidebar-overlay.show { display: block; }

    /* Topbar: beri ruang untuk tombol */
    .topbar {
        padding: 1rem 1.25rem;
    }
    .content {
        padding: 1rem 1.25rem 2rem;
    }
}

@media (min-width: 1201px) {
    .mobile-menu {
        display: none !important;
    }
}

/* =====================================================
   FIX — Kurangi jarak auth di HP
   ===================================================== */
@media (max-width: 980px) {
    .auth-main {
        padding: 1rem .9rem 1.5rem !important;
        align-items: flex-start;
    }
    .auth-shell {
        min-height: auto;
        border-radius: 1rem;
    }
    .auth-visual {
        min-height: 240px;
        padding: 1.2rem 1.1rem;
        border-radius: 1rem 1rem 0 0;
    }
    .visual-content h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.05;
    }
    .visual-content p {
        font-size: .85rem;
        line-height: 1.55;
        margin-top: .5rem;
    }
    .visual-quote {
        font-size: .82rem;
        padding: .8rem .85rem;
        margin-top: .75rem;
    }
    .visual-metrics {
        margin-top: .75rem;
        padding-top: .75rem;
    }
    .metric-value { font-size: 1rem; }
    .metric-label { font-size: .58rem; }

    .auth-form-wrap {
        padding: 1.2rem 1.1rem 1.4rem;
    }
    .auth-welcome h1 {
        font-size: 1.25rem;
    }
    .auth-welcome p {
        font-size: .85rem;
    }
}

/* =====================================================
   THEME TOGGLE — DI POJOK KANAN ATAS VISUAL (foto gedung)
   ===================================================== */
.auth-visual {
    position: relative;   /* ← WAJIB, biar tombol bisa absolute */
}

.auth-theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(15,23,42,.45);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.auth-theme-toggle:hover {
    background: rgba(15,23,42,.7);
    border-color: rgba(255,255,255,.6);
    transform: scale(1.05);
}
.auth-theme-toggle .icon-moon { display: none; }
.auth-theme-toggle .icon-sun  { display: block; }

html[data-theme="dark"] .auth-theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .auth-theme-toggle .icon-sun  { display: none; }
html[data-theme="dark"] .auth-theme-toggle {
    background: rgba(30,41,59,.7);
    border-color: rgba(148,163,184,.5);
    color: #fbbf24;
}

/* HP: sedikit lebih kecil & rapat */
@media (max-width: 540px) {
    .auth-theme-toggle {
        top: .75rem;
        right: .75rem;
        width: 2.1rem;
        height: 2.1rem;
    }
}

/* =====================================================
   THEME TOGGLE — FIX VISUAL & ICON
   ===================================================== */
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }

.auth-theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(15,23,42,.45);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.auth-theme-toggle:hover {
    background: rgba(15,23,42,.7);
    border-color: rgba(255,255,255,.6);
    transform: scale(1.05);
}
@media (max-width: 540px) {
    .auth-theme-toggle {
        top: .75rem;
        right: .75rem;
        width: 2.1rem;
        height: 2.1rem;
    }
}

/* =====================================================
   THEME TOGGLE — DASHBOARD (sama dengan form login)
   ===================================================== */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: none;
}

.theme-toggle-dashboard {
    position: static;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(148,163,184,.5);
    border-radius: 50%;
    background: rgba(15,23,42,.06);
    color: #334155;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}
.theme-toggle-dashboard:hover {
    background: rgba(37,99,235,.12);
    border-color: #60a5fa;
    color: #1d4ed8;
    transform: scale(1.05);
}

/* Dark mode untuk tombol dashboard */
html[data-theme="dark"] .theme-toggle-dashboard {
    background: rgba(30,41,59,.7);
    border-color: rgba(148,163,184,.5);
    color: #fbbf24;
}
html[data-theme="dark"] .theme-toggle-dashboard:hover {
    background: rgba(59,130,246,.25);
    border-color: #60a5fa;
    color: #fcd34d;
}

/* HP: rapatkan */
@media (max-width: 760px) {
    .topbar-actions { gap: .5rem; }
    .theme-toggle-dashboard {
        width: 2.1rem;
        height: 2.1rem;
    }
}

/* =====================================================
   DARK MODE — SEMUA KOMPONEN
   ===================================================== */
html[data-theme="dark"] {
    --bg-main: #0b1220;
    --text-primary: #e5e7eb;
    --text-secondary: #94a3b8;
    --border: #1f2937;
}

html[data-theme="dark"] body {
    background: #0b1220 !important;
    color: #e5e7eb !important;
}

/* ---------- AUTH PAGE ---------- */
html[data-theme="dark"] .auth-page {
    background: linear-gradient(180deg, #0b1220 0%, #111a2e 40%, #0f1e3f 70%, #1d4ed8 100%) !important;
    color: #e5e7eb;
}
html[data-theme="dark"] .auth-topbar {
    background: rgba(15,23,42,.85) !important;
    border-bottom-color: #1f2937 !important;
}
html[data-theme="dark"] .brand-name { color: #e5e7eb !important; }
html[data-theme="dark"] .brand-badge { background: #1e3a8a; color: #bfdbfe; }
html[data-theme="dark"] .topbar-contact { color: #cbd5e1; }
html[data-theme="dark"] .topbar-contact a { color: #60a5fa; }

html[data-theme="dark"] .auth-shell {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
html[data-theme="dark"] .auth-panel { background: #0f172a !important; }
html[data-theme="dark"] .auth-tabs {
    background: #111c33 !important;
    border-bottom-color: #1f2937 !important;
}
html[data-theme="dark"] .auth-tab { color: #94a3b8; }
html[data-theme="dark"] .auth-tab:hover { color: #e5e7eb; }
html[data-theme="dark"] .auth-tab.active {
    background: #0f172a !important;
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}
html[data-theme="dark"] .auth-welcome h1 { color: #f1f5f9 !important; }
html[data-theme="dark"] .auth-welcome p { color: #94a3b8 !important; }

html[data-theme="dark"] .form-label { color: #cbd5e1 !important; }
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea {
    background: #0b1220 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .form-input::placeholder { color: #64748b !important; }
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96,165,250,.15) !important;
}

html[data-theme="dark"] .role-option label {
    background: linear-gradient(180deg, #0f172a, #111c33) !important;
    border-color: #1f2937 !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .role-option label:hover {
    border-color: #60a5fa !important;
}
html[data-theme="dark"] .role-option input:checked + label {
    background: linear-gradient(180deg, #1e3a8a, #1e40af) !important;
    border-color: #60a5fa !important;
}
html[data-theme="dark"] .role-name { color: #f1f5f9 !important; }
html[data-theme="dark"] .role-meta { color: #94a3b8 !important; }

html[data-theme="dark"] .login-note { color: #94a3b8 !important; }
html[data-theme="dark"] .login-note a { color: #60a5fa !important; }

html[data-theme="dark"] .alert {
    background: #052e2b !important;
    color: #6ee7b7 !important;
    border-color: rgba(16,185,129,.25) !important;
}
html[data-theme="dark"] .alert.error {
    background: #2c0b0e !important;
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,.25) !important;
}

html[data-theme="dark"] .site-footer { color: #64748b !important; }
html[data-theme="dark"] .muted { color: #94a3b8 !important; }

/* ---------- DASHBOARD ---------- */
html[data-theme="dark"] .layout { background: #0b1220 !important; }
html[data-theme="dark"] .layout .main { background: #0b1220 !important; }
html[data-theme="dark"] .layout .content { background: #0b1220 !important; }
html[data-theme="dark"] .layout .topbar {
    background: #0f172a !important;
    border-bottom-color: #1f2937 !important;
}
html[data-theme="dark"] .layout .topbar h2 { color: #f1f5f9 !important; }
html[data-theme="dark"] .layout .topbar p { color: #94a3b8 !important; }

html[data-theme="dark"] .layout .card,
html[data-theme="dark"] .stat-card {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .layout .card-title { color: #bfdbfe !important; }
html[data-theme="dark"] .stat-info h3 { color: #f1f5f9 !important; }
html[data-theme="dark"] .stat-info p { color: #94a3b8 !important; }
html[data-theme="dark"] .layout .stat-icon {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .layout .table th {
    background: #111c33 !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] .layout .table td {
    color: #cbd5e1 !important;
    border-color: #1f2937 !important;
}
html[data-theme="dark"] .layout .table th,
html[data-theme="dark"] .layout .table td { border-color: #1f2937 !important; }

html[data-theme="dark"] .layout .notice {
    background: #0c1e4a !important;
    border-color: #1e3a8a !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] .layout .btn-outline {
    background: transparent !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .layout .btn-outline:hover {
    background: #111c33 !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}
html[data-theme="dark"] .avatar {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] .dashboard-page-heading {
    background: linear-gradient(120deg, #0f172a, #111c33) !important;
    border-color: #1f2937 !important;
}
html[data-theme="dark"] .dashboard-page-heading h1 { color: #f1f5f9 !important; }
html[data-theme="dark"] .dashboard-page-heading p { color: #94a3b8 !important; }
html[data-theme="dark"] .dashboard-page-home {
    background: #0b1220 !important;
    border-color: #1f2937 !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .dashboard-quick-card {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}
html[data-theme="dark"] .dashboard-quick-copy strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .dashboard-quick-copy small { color: #94a3b8 !important; }
html[data-theme="dark"] .dashboard-quick-icon {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] .tag {
    background: #111c33 !important;
    border-color: #1f2937 !important;
    color: #cbd5e1 !important;
}

/* Transisi halus saat ganti tema */
body, .auth-page, .auth-shell, .auth-panel, .auth-topbar,
.form-input, .card, .stat-card, .layout, .topbar, .content {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* =====================================================
   DARK MODE — FIX KHUSUS HALAMAN PENEMPATAN (HUMAS)
   ===================================================== */
html[data-theme="dark"] .layout .card,
html[data-theme="dark"] .layout .placement-card,
html[data-theme="dark"] .layout .institution-group,
html[data-theme="dark"] .layout .student-item {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* Judul grup jurusan (Akuntansi (AK), TKJ, dll) */
html[data-theme="dark"] .layout h3,
html[data-theme="dark"] .layout h4,
html[data-theme="dark"] .layout .card-title,
html[data-theme="dark"] .layout .major-title {
    color: #bfdbfe !important;
}

/* Nama siswa dan institusi */
html[data-theme="dark"] .layout .student-name,
html[data-theme="dark"] .layout .institution-name,
html[data-theme="dark"] .layout strong,
html[data-theme="dark"] .layout b {
    color: #f1f5f9 !important;
}

/* Teks abu-abu (CV Kreatif Digital, jawajawaja) */
html[data-theme="dark"] .layout .muted,
html[data-theme="dark"] .layout small,
html[data-theme="dark"] .layout p {
    color: #94a3b8 !important;
}

/* Nama Guru Pembimbing di sebelah kanan */
html[data-theme="dark"] .layout .guru-name {
    color: #e5e7eb !important;
}

/* Tombol Edit */
html[data-theme="dark"] .layout .btn-outline {
    border-color: #334155 !important;
    color: #cbd5e1 !important;
    background: transparent !important;
}
html[data-theme="dark"] .layout .btn-outline:hover {
    border-color: #60a5fa !important;
    color: #60a5fa !important;
    background: #111c33 !important;
}

/* Tombol Export CSV di kanan atas */
html[data-theme="dark"] .layout .btn-outline .ui-icon,
html[data-theme="dark"] .layout .btn-outline svg {
    color: inherit !important;
}

/* Card Header di dalam card (bagian atas kartu) */
html[data-theme="dark"] .layout .card-header {
    border-bottom-color: #1f2937 !important;
    background: transparent !important;
}

/* Fix untuk container yang mungkin punya background putih */
html[data-theme="dark"] .layout .card-body,
html[data-theme="dark"] .layout .placement-list,
html[data-theme="dark"] .layout .group-wrapper {
    background: transparent !important;
}

/* =====================================================
   PENEMPATAN HUMAS — DARK MODE FIX
   ===================================================== */
/* Mode Terang (Default) */
.placement-group-header { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.placement-student-card { background: rgba(148,163,184,.02); }
.placement-edit-box { background: #fff; }

/* Mode Gelap */
html[data-theme="dark"] .placement-group-header {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}
html[data-theme="dark"] .placement-group-header h4 {
    color: #60a5fa !important; /* Warna judul jurusan */
}
html[data-theme="dark"] .placement-student-card {
    background: #111c33 !important;
    border-color: #1f2937 !important;
}
html[data-theme="dark"] .placement-student-card div[style*="color:#111827"] {
    color: #f1f5f9 !important; /* Teks nama siswa & guru */
}
html[data-theme="dark"] .placement-student-card div[style*="color:#475569"] {
    color: #94a3b8 !important; /* Teks nama institusi */
}
html[data-theme="dark"] .placement-edit-box {
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* =====================================================
   FIX WARNA TEKS GURU DI DARK MODE
   ===================================================== */
html[data-theme="dark"] .placement-student-card span[style*="color:#111827"],
html[data-theme="dark"] .placement-student-card div[style*="color:#111827"] {
    color: #cbd5e1 !important; /* Warna teks abu terang */
}

/* Fix warna teks siswa jika masih ada yang hitam */
html[data-theme="dark"] .placement-student-card div[style*="color:#111827"] {
    color: #f1f5f9 !important;
}

/* Fix tombol Edit & badge active */
html[data-theme="dark"] .placement-student-card .btn-outline {
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .placement-student-card .badge.info {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

/* =====================================================
   DARK MODE — FORUM BIMBINGAN (BUBBLE CHAT)
   ===================================================== */

/* 1. Pesan dari Guru (Other) */
html[data-theme="dark"] .message.other {
    background: #1e293b !important; /* Warna abu kebiruan gelap */
    color: #e5e7eb !important;      /* Teks putih terang */
    border: 1px solid #334155 !important;
}

/* 2. Pesan dari Siswa (Me) */
html[data-theme="dark"] .message.me {
    background: #1e3a8a !important; /* Biru gelap */
    color: #bfdbfe !important;      /* Teks biru muda */
    border: 1px solid #2563eb !important;
}

/* 3. Teks waktu (jam) di dalam chat */
html[data-theme="dark"] .message small {
    color: #94a3b8 !important;
    opacity: 0.8;
}

/* 4. Area chat box utama (opsional, biar gelapnya nyatu) */
html[data-theme="dark"] .chat {
    background: #0f172a !important;
    border-radius: .7rem;
    padding: 1rem;
    border: 1px solid #1f2937;
}

/* =====================================================
   DARK MODE — KOTAK KOMPETENSI (PROFIL SISWA)
   ===================================================== */
/* Targetkan label yang membungkus checkbox kompetensi */
html[data-theme="dark"] .layout label[style*="background:#f8fafc"] {
    background: #111c33 !important; /* Warna gelap */
    border-color: #1f2937 !important; /* Border gelap */
    color: #e5e7eb !important; /* Teks terang */
}

/* Pastikan centang checkbox tetap terlihat */
html[data-theme="dark"] .layout label[style*="background:#f8fafc"] input[type="checkbox"] {
    accent-color: #3b82f6; /* Warna biru bawaan browser di dark mode */
}

/* =====================================================
   DARK MODE — INPUT FORM (KATA SANDI & LAINNYA)
   ===================================================== */
/* Jika ada input yang masih putih karena tidak kena class .form-input */
html[data-theme="dark"] .layout .form-input,
html[data-theme="dark"] .layout input[type="text"],
html[data-theme="dark"] .layout input[type="email"],
html[data-theme="dark"] .layout input[type="password"],
html[data-theme="dark"] .layout input[type="date"],
html[data-theme="dark"] .layout textarea {
    background-color: #0b1220 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* =====================================================
   FIX: BACKGROUND KOTAK LIST CHAT (FORUM GURU)
   ===================================================== */

/* Saat mode gelap, ubah nilai variabel --bg-subtle jadi biru gelap */
html[data-theme="dark"] {
    --bg-subtle: #1e3a8a; /* Warna biru gelap yang senada */
}

/* Paksa teks di dalam <a class="list-item"> jadi terang saat dark mode */
html[data-theme="dark"] a.list-item {
    color: #e5e7eb !important;
}
html[data-theme="dark"] a.list-item .muted,
html[data-theme="dark"] a.list-item small {
    color: #94a3b8 !important;
}

/* =====================================================
   DARK MODE — HALAMAN SEMUA LAMARAN (HUMAS)
   ===================================================== */

/* 1. Kartu Ringkasan Atas (Perlu ditinjau, Disetujui, dll) */
html[data-theme="dark"] .application-summary-card {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}

html[data-theme="dark"] .application-summary-label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .application-summary-card strong {
    color: #f1f5f9 !important;
}

/* 2. Tabel Daftar Lamaran */
html[data-theme="dark"] .application-table th {
    background: #111c33 !important;
    color: #bfdbfe !important;
    border-bottom: 1px solid #1f2937 !important;
}

html[data-theme="dark"] .application-table td {
    color: #e5e7eb !important;
    border-bottom: 1px solid #1f2937 !important;
}

/* 3. Nama Siswa & Institusi di dalam Tabel */
html[data-theme="dark"] .application-student-name,
html[data-theme="dark"] .application-institution-name {
    color: #f1f5f9 !important;
}

/* 4. Teks kecil (NIS, Jurusan, Kebutuhan) */
html[data-theme="dark"] .application-student-meta {
    color: #94a3b8 !important;
}

/* 5. Progress Bar Kecocokan */
html[data-theme="dark"] .application-score {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .application-score-track {
    background: #1f2937 !important;
}