/* =============================================
   SIPP THEME — menyelaraskan Portal KKN dengan SIPP LPPM
   Dimuat SETELAH style.css. Hanya menimpa token & komponen
   chrome (sidebar, topbar, tombol, form, kartu, tabel).
   Acuan: sipp_lppm/assets/css/{base,layout,components}.css
   Palet SIPP: ungu #4f1d9e · aksen emas #fbbf24/#fde047 · Poppins
   ============================================= */

:root {
    /* Merek SIPP */
    --primary:        #4f1d9e;
    --primary-dark:   #1a0547;
    --primary-mid:    #7131e0;
    --primary-light:  #ede9fe;
    --primary-xlight: #f5f3ff;
    --accent:         #8b5cf6;
    --accent-light:   #c4b5fd;
    --gold:           #fbbf24;
    --gold-light:     #fde047;
    --shadow-glow:    0 4px 20px rgba(79, 29, 158, 0.15);
    --shadow-focus:   0 0 0 3px rgba(124, 58, 237, 0.2);
    --topbar-h:       58px;

    /* Token lama KKN dipetakan ke ungu SIPP (sehingga halaman lama ikut berubah) */
    --indigo:    #4f1d9e;
    --blue:      #4f1d9e;
    --sb-accent: #7c3aed;

    /* Konten */
    --bg:      #f8fafc;
    --surface: #ffffff;
    --border:  #e2e8f0;
    --text:    #0f172a;
    --muted:   #475569;

    /* Sidebar */
    --sb-bg:          linear-gradient(180deg, #0a0420 0%, #12082e 40%, #0e0628 100%);
    --sb-hover:       rgba(251, 191, 36, 0.06);
    --sb-active:      rgba(251, 191, 36, 0.08);
    --sb-text:        rgba(255, 255, 255, 0.75);
    --sb-active-text: #fde047;
    --sb-brand:       #ffffff;
    --sb-border:      rgba(139, 92, 246, 0.08);

    /* Bootstrap 5.3 */
    --bs-primary:        #4f1d9e;
    --bs-primary-rgb:    79, 29, 158;
    --bs-link-color:     #4f1d9e;
    --bs-link-hover-color: #8b5cf6;
    --bs-body-font-family: 'Poppins', system-ui, Arial, sans-serif;
}

[data-theme="dark"] {
    --text:          #e8e4f5;
    --text-primary:  #e8e4f5;
    --text-body:     #d6d1ea;
    --primary-dark:  #e4defa;                 /* dipakai untuk judul: harus terang di latar gelap */
    --primary-light: rgba(167, 139, 250, .16);
    --primary-xlight: rgba(167, 139, 250, .08);
    --shadow-glow:   0 4px 20px rgba(0, 0, 0, .35);
    --primary:    #a78bfa;
    --indigo:     #a78bfa;
    --blue:       #a78bfa;
    --bg:         #0d0a1a;
    --surface:    #16112b;
    --border:     #2a2145;
    --muted:      #9a93b8;
    --sb-bg:      linear-gradient(180deg, #05020f 0%, #0a0420 100%);
    --sb-hover:   rgba(251, 191, 36, 0.08);
    --sb-active:  rgba(251, 191, 36, 0.10);
    --sb-active-text: #fde047;
    --bs-link-color: #c4b5fd;
}

::selection { background: var(--primary-light); color: var(--primary-dark); }
:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
a { color: var(--primary); }
a:hover { color: var(--accent); }

/* ---------- Sidebar ---------- */
.sidebar {
    background: var(--sb-bg) !important;
    border-right: 1px solid var(--sb-border);
}
.sidebar-logo .logo-icon {
    background: rgba(139, 92, 246, 0.1);
    border: 1.5px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    width: 38px; height: 38px;
    box-shadow: none;
    color: var(--accent-light);
}
.sidebar-logo .logo-icon svg { color: var(--accent-light); }
.sidebar-logo-text { color: #fff; font-weight: 700; font-size: 0.8rem; }
.sidebar-logo-sub  { color: rgba(255, 255, 255, 0.4); text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.68rem; }

.nav-link { color: var(--sb-text); border-radius: 9px; }
.nav-link:hover,
.nav-group-toggle:hover { background: var(--sb-hover); color: var(--gold-light); }
.nav-link.active { background: var(--sb-active); color: var(--gold-light); }
.nav-group-toggle { color: var(--sb-text); border-radius: 9px; }
.nav-group-toggle[aria-expanded="true"] { color: var(--gold-light); }
.nav-link.nav-sub { color: var(--sb-text); }
.nav-link.nav-sub:hover { background: var(--sb-hover); color: var(--gold-light); }
.nav-link.nav-sub.active { background: var(--sb-active); color: var(--gold-light); }
.nav-group-items {
    border-left: 1.5px solid rgba(251, 191, 36, 0.12);
    margin-left: 1.35rem;
}
.nav-link.nav-sub { padding-left: 1.25rem; }
.nav-link.nav-sub::before { display: none; }
.nav-link.nav-sub.active::before { display: none; }
[data-theme="dark"] .nav-link.nav-sub.active::before { display: none; }
.lang-toggle a.active-lang { background: var(--sb-accent); }

/* ---------- Topbar ---------- */
.topbar {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .topbar { background: rgba(22, 17, 43, 0.85); }
.topbar-inner { min-height: var(--topbar-h); }
.sidebar-toggle:hover,
.sidebar-toggle:focus { background: var(--primary-light) !important; color: var(--primary); }
.breadcrumb-icon,
.topbar-user-avatar { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.topbar-lang a.active-lang { background: var(--primary); }
.topbar-icon-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}
.topbar-user:hover,
.topbar-user:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow, rgba(139, 92, 246, 0.15)); }
.topbar-dropdown .dropdown-header { background: linear-gradient(135deg, rgba(79, 29, 158, 0.08), rgba(139, 92, 246, 0.06)); }
[data-theme="dark"] .topbar-icon-btn:hover { background: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .topbar-user:hover { border-color: var(--accent); }

/* ---------- Header halaman ---------- */
.page-header-icon {
    background: linear-gradient(135deg, var(--ph-accent, var(--primary)), var(--ph-accent-2, var(--accent)));
}
.page-header[data-accent="indigo"] { --ph-accent: #4f1d9e; --ph-accent-2: #8b5cf6; }
.page-header[data-accent="blue"]   { --ph-accent: #4f1d9e; --ph-accent-2: #7131e0; }
.page-title { color: var(--text); }

/* ---------- Tombol ---------- */
.btn { border-radius: 9px; letter-spacing: 0.01em; transition: all 0.2s ease; }
.btn:active { transform: scale(0.97); }
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-mid);
    --bs-btn-hover-border-color: var(--primary-mid);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-mid);
    border-color: var(--primary-mid);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-dark);
}
[data-theme="dark"] .btn-outline-primary { color: #c4b5fd; border-color: #a78bfa; }
[data-theme="dark"] .btn-outline-primary:hover { background: #7c3aed; color: #fff; }
.btn-action-view { background: var(--primary-xlight); border-color: #ddd6fe; color: var(--primary); }
.btn-action-view:hover { background: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-glow); }
[data-theme="dark"] .btn-action-view { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.3); color: #c4b5fd; }

/* ---------- Form ---------- */
.form-control, .form-select { border-width: 1.5px; border-radius: 9px; }
.form-control:focus, .form-select:focus {
    border-color: #7131e0;
    box-shadow: var(--shadow-focus);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: #7131e0; box-shadow: var(--shadow-focus); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2); }

/* ---------- Kartu, tabel, lencana ---------- */
.card-s, .card-custom, .setting-card, .stat-tile, .card { border-radius: 16px; }
.card-s, .card-custom, .stat-tile { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03); }
.stat-tile:hover { box-shadow: var(--shadow-glow); }
.table th { background: var(--primary-xlight); color: var(--muted); font-size: 0.66rem; letter-spacing: 0.05em; }
.table-hover tbody tr:hover { background: var(--primary-xlight); }
[data-theme="dark"] .table th { background: #1d1738; }
[data-theme="dark"] .table-hover tbody tr:hover { background: rgba(167, 139, 250, 0.05); }
.icon-box { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .icon-box { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active { color: var(--primary); }
.page-link { color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.progress-bar { background-color: var(--primary); }

/* Logo gambar di sidebar (sama dengan SIPP) */
.sidebar-logo .logo-icon img { width: 26px; height: 26px; object-fit: contain; }

/* =============================================
   Kurangi kesan "template": ikuti karakter SIPP
   ============================================= */

/* Judul halaman: polos, tanpa kotak ikon gradien di setiap halaman */
.page-header:not([data-hero]) .page-header-icon { display: none; }
.page-header:not([data-hero]) { border-bottom-color: var(--border); }
.page-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--primary-dark); }
[data-theme="dark"] .page-title { color: var(--text); }
.page-subtitle { font-size: 0.78rem; }

/* Beranda tiap peran: banner foto kampus seperti "welcome-banner" SIPP */
.page-header[data-hero] {
    background:
        linear-gradient(rgba(15, 5, 35, .72), rgba(15, 5, 35, .72)),
        url('../img/hero_kampus.webp') center/cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.page-header[data-hero] .page-title    { color: #fff; font-size: 1.05rem; letter-spacing: -0.02em; }
.page-header[data-hero] .page-subtitle { color: rgba(255, 255, 255, .75); }
.page-header[data-hero] .page-subtitle strong { color: #fff; }
.page-header[data-hero] .page-header-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none; color: rgba(255, 255, 255, .7);
}
.page-header[data-hero] .btn-outline-warning,
.page-header[data-hero] .btn-outline-success,
.page-header[data-hero] .btn-outline-primary,
.page-header[data-hero] .btn-outline-secondary {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .4);
    --bs-btn-hover-bg: rgba(255, 255, 255, .15); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff;
    background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .4);
}
.page-header[data-hero] .btn-primary { background: var(--primary-mid); border-color: var(--primary-mid); }

/* Tombol aksi: satu bahasa visual (bukan pelangi kuning/hijau/biru) */
.btn-outline-warning, .btn-outline-success, .btn-outline-info, .btn-outline-secondary {
    --bs-btn-color: var(--text); --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--primary-xlight); --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-light); --bs-btn-active-color: var(--primary); --bs-btn-active-border-color: var(--primary);
    background: var(--surface); color: var(--text); border-color: var(--border);
}

/* Kartu statistik: tipis & rata; aksen warna hanya garis kiri, angka tanpa chip ikon */
.stat-tile, .stat-tile[class*="border-"] {
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    box-shadow: none;
    padding: 1rem 1.15rem;
}
.stat-tile.border-green  { border-left: 3px solid var(--green)  !important; }
.stat-tile.border-red    { border-left: 3px solid var(--red)    !important; }
.stat-tile.border-amber  { border-left: 3px solid var(--amber)  !important; }
.stat-tile.border-blue   { border-left: 3px solid var(--primary) !important; }
.stat-tile.border-indigo { border-left: 3px solid var(--primary) !important; }
.stat-tile.border-teal   { border-left: 3px solid #0d9488       !important; }
.stat-tile.border-slate, .stat-tile.border-secondary { border-left: 3px solid #64748b !important; }
.stat-tile:hover { transform: none; box-shadow: var(--shadow-glow); }
.stat-tile-icon { background: none !important; width: auto; height: auto; color: var(--muted); opacity: .7; }
.stat-tile-num { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 2px; }
.stat-tile-lbl { font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Kartu & panel: radius dan bayangan lebih tenang, seperti kartu SIPP */
.card-s, .card-custom, .setting-card { border-radius: 12px; box-shadow: none; }
.setting-card-header { background: var(--primary-xlight); }
[data-theme="dark"] .setting-card-header { background: rgba(167, 139, 250, .06); }
.icon-box { border-radius: 8px; }

/* Status periode pendaftaran (beranda mahasiswa) */
.kn-periode { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.25rem 1.5rem; border-left: 4px solid #94a3b8; border-bottom: 1px solid var(--border); }
.kn-periode.kn-dibuka { border-left-color: var(--green); }
.kn-periode.kn-segera { border-left-color: var(--amber); }
.kn-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kn-big { font-size: 1.25rem; font-weight: 700; color: var(--primary-dark); line-height: 1.3; }
[data-theme="dark"] .kn-big { color: var(--text); }
.kn-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.kn-siapkan { padding: 1.1rem 1.5rem 1.25rem; }
.kn-siapkan ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--text); line-height: 1.8; }

/* Peringatan: datar dan ringkas seperti notifikasi SIPP (garis aksen di kiri, judul kecil) */
.alert {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 8px;
    box-shadow: none;
    padding: .8rem 1.1rem;
    font-size: .84rem;
    line-height: 1.55;
}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert .alert-heading {
    font-size: .95rem; font-weight: 700; margin: 0 0 .15rem; letter-spacing: 0;
}
.alert-warning { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; color: #92400e; }
.alert-info    { background: var(--primary-xlight); border-color: #ddd6fe; border-left-color: var(--primary); color: var(--primary-dark); }
.alert-danger  { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; color: #991b1b; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; border-left-color: #059669; color: #065f46; }
[data-theme="dark"] .alert-info { background: rgba(167, 139, 250, .08); border-color: #3b2d63; color: #ddd6fe; }

/* Kartu "akses cepat": baris rata kiri (ikon di kiri), bukan kartu tengah dengan chip pastel */
a.card-custom.hover-lift { border: 1px solid var(--border) !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
a.card-custom.hover-lift:hover { border-color: #ddd6fe !important; box-shadow: var(--shadow-glow) !important; transform: none; }
a.card-custom.hover-lift .card-body.text-center {
    display: grid; grid-template-columns: 36px 1fr; column-gap: .9rem; row-gap: 0; align-items: center;
    text-align: left !important; padding: 1rem 1.1rem !important;
}
a.card-custom.hover-lift .icon-circle { grid-row: 1 / span 2; }
a.card-custom.hover-lift .card-body h6 { margin: 0 !important; }
a.card-custom.hover-lift .card-body p  { margin: 0 !important; }
a.card-custom.hover-lift .icon-circle {
    margin: 0 !important; flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
    background: var(--primary-xlight) !important; color: var(--primary) !important;
    display: flex; align-items: center; justify-content: center;
}
a.card-custom.hover-lift .card-body h6 { color: var(--text); font-size: .85rem; }
.card-custom.border-0 { border: 1px solid var(--border) !important; }
.card-custom.shadow-sm, .card-custom .shadow-sm { box-shadow: none !important; }

/* Peringatan bawaan halaman (border-0 / shadow-sm) tetap mengikuti gaya datar */
.alert.border-0, .alert.shadow-sm { border: 1px solid var(--border) !important; border-left-width: 3px !important; box-shadow: none !important; }
.alert-warning.border-0 { border-color: #fde68a !important; border-left-color: #d97706 !important; }
.alert-info.border-0    { border-color: #ddd6fe !important; border-left-color: var(--primary) !important; }
.alert-danger.border-0  { border-color: #fecaca !important; border-left-color: #dc2626 !important; }
.alert-success.border-0 { border-color: #a7f3d0 !important; border-left-color: #059669 !important; }

/* =============================================
   SKALA TIPOGRAFI & KERAPATAN — disamakan dengan SIPP
   (sipp_lppm/assets/css/{base,components,forms,modals}.css)
   root 14px · isi 13px · judul kartu 13px/600 · tabel 12px (th 10px kapital)
   label form 11px kapital · input 13px/42px · tombol 12px/40px · badge 10.5px
   ============================================= */
html { font-size: 14px; }
:root {
    --fs-xs: 10.5px; --fs-sm: 11.5px; --fs-base: 13px; --fs-md: 14px;
    --fs-lg: 16px;   --fs-xl: 18px;   --fs-2xl: 22px;
    --bs-body-font-size: 13px; --bs-body-line-height: 1.6;
}
body { font-size: 13px; line-height: 1.6; font-weight: 400; color: var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
h4 { font-size: 15px; } h5 { font-size: 14px; } h6 { font-size: 13px; }
.fw-bold, .fw-semibold { font-weight: 600 !important; }
small, .small { font-size: 11.5px; }
.smallest { font-size: 10.5px; }
.text-muted { color: var(--muted) !important; }

/* Judul halaman & kartu */
.page-title { font-size: 17px; font-weight: 700; }
.page-subtitle { font-size: 12px; }
.page-header[data-hero] .page-title { font-size: 16px; }
.card-header, .card-title, .card-head { font-size: 13px; font-weight: 600; }
.card-custom h5, .card-custom h6, .setting-card h5, .setting-card h6 { font-size: 13px; font-weight: 600; }

/* Tabel */
.table th { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: .8rem 1rem; }
.table td { font-size: 12px; padding: .85rem 1rem; }

/* Form */
.form-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.form-control, .form-select { font-size: 13px; min-height: 42px; padding: .55rem .9rem; border-radius: 9px; }
textarea.form-control { min-height: 90px; line-height: 1.6; }
.form-text, .form-hint { font-size: 10.5px; }
.input-group-text { font-size: 13px; }

/* Tombol & lencana */
.btn { font-size: 12px; font-weight: 600; min-height: 40px; padding: .5rem 1.1rem; }
.btn-sm { font-size: 11px; min-height: 32px; padding: .3rem .8rem; }
.btn-lg { font-size: 13px; min-height: 46px; }
.badge, .badge-status { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

/* Modal */
.modal-title { font-size: 14px; font-weight: 600; }
.modal-body { font-size: 13px; }

/* Navigasi: sidebar 12px seperti SIPP, judul topbar 14px */
.nav-link, .nav-group-toggle { font-size: 12px; font-weight: 500; }
.nav-link.nav-sub { font-size: 12px; }
.nav-link.nav-footer { font-size: 12px; }
.sidebar-logo-text { font-size: 13px; }
.sidebar-logo-sub  { font-size: 11px; }
.topbar-title { font-size: 14px; font-weight: 600; }
.topbar-page  { font-size: 13px; }
.topbar-user-name { font-size: 12px; }
.topbar-user-role { font-size: 10.5px; }
.topbar-dropdown .dropdown-item { font-size: 12px; }

/* Kartu statistik */
.stat-tile-lbl { font-size: 11.5px; }
.stat-tile-num { font-size: 22px; }
.stat-summary-num { font-size: 22px; font-weight: 700; }
.stat-mini-num { font-size: 16px; font-weight: 700; }

/* Jarak isi halaman mengikuti SIPP (.page-content 28px) */
.main-content { padding-left: 28px; padding-right: 28px; }
.content-body { padding-top: 22px; padding-bottom: 28px; }
@media (max-width: 768px) {
    .main-content { padding-left: 16px; padding-right: 16px; }
    .content-body { padding-top: 16px; }
}

/* Tab/pil di dalam isi halaman: jangan ikut gaya .nav-link sidebar (teks putih di latar putih = tab hilang) */
.content-body .nav-pills .nav-link, .content-body .nav-tabs .nav-link {
    color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 9px;
    min-height: 0; width: auto; padding: .5rem 1rem; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.content-body .nav-pills .nav-link::before, .content-body .nav-tabs .nav-link::before { display: none !important; }
.content-body .nav-pills .nav-link:hover { background: var(--primary-xlight); color: var(--primary); }
.content-body .nav-pills .nav-link.active, .content-body .nav-pills .show > .nav-link {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.content-body .nav-tabs { border-bottom: 1px solid var(--border); }
.content-body .nav-tabs .nav-link.active { color: var(--primary); border-color: transparent transparent var(--primary); background: transparent; }

/* Tombol: radius 9px seperti SIPP (bukan pil); peringatan = amber lembut */
.btn.rounded-pill { border-radius: 9px !important; }
.btn-warning {
    --bs-btn-bg: #fffbeb; --bs-btn-border-color: #fde68a; --bs-btn-color: #92400e;
    --bs-btn-hover-bg: #fef3c7; --bs-btn-hover-border-color: #fbbf24; --bs-btn-hover-color: #78350f;
    background: #fffbeb; border-color: #fde68a; color: #92400e;
}

/* =============================================
   Formulir pendaftaran KKN (mhs_kkn_daftar.php) — gaya SIPP
   ============================================= */
.daftar-container { max-width: 880px; }
.daftar-container .step-card { border: 1px solid var(--border); border-radius: 16px; box-shadow: none; overflow: hidden; }
.daftar-container .step-header {
    background: var(--surface) !important; color: var(--text) !important; text-align: left !important;
    padding: 22px 28px 18px !important; border-bottom: 1px solid var(--border);
}
.daftar-container .step-header h4 { font-size: 17px; font-weight: 700; color: var(--primary-dark); margin: 0 0 2px !important; }
.daftar-container .step-header p { color: var(--muted); opacity: 1 !important; font-size: 12px; }
.daftar-container .step-card > .card-body { padding: 24px 28px !important; }
.daftar-container .section-title {
    font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--primary);
    margin: 0 0 14px; padding: 0; border: 0;
}
.daftar-container .section-title::before { display: none; }

/* Ringkasan skema → satu baris teks, bukan tiga lencana */
.daftar-container .skema-summary { gap: 16px; margin-bottom: 14px; }
.daftar-container .skema-summary-item { background: none; padding: 0; font-size: 11.5px; font-weight: 500; color: var(--muted); border-radius: 0; }

/* Kartu skema: baris datar seperti daftar skema di landing */
.daftar-container .skema-select-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.daftar-container .skema-select-card {
    flex-direction: row; align-items: flex-start; text-align: left; gap: 12px; padding: 14px;
    border: 1.5px solid var(--border); border-radius: 10px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.daftar-container .skema-select-card:hover { border-color: #c4b5fd; transform: none; box-shadow: none; }
.daftar-container .skema-select-card.selected { border-color: var(--primary); background: var(--primary-xlight); box-shadow: 0 0 0 3px rgba(79, 29, 158, .08); }
.daftar-container .skema-select-card > * { min-width: 0; }
.daftar-container .skema-select-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--primary-xlight); color: var(--primary); flex-shrink: 0; }
.daftar-container .skema-select-icon svg { width: 18px; height: 18px; }
.daftar-container .skema-select-card.selected .skema-select-icon { background: #fff; }
.daftar-container .skema-select-name { font-size: 13px; font-weight: 600; color: var(--text); }
.daftar-container .skema-select-desc { font-size: 11.5px; text-align: left; -webkit-line-clamp: 3; }
.daftar-container .skema-select-period { justify-content: flex-start; font-size: 10.5px; margin-top: 2px; }
.daftar-container .skema-select-check { top: 10px; right: 10px; width: 20px; height: 20px; background: var(--primary); box-shadow: none; }
.daftar-container .skema-select-card { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; }
.daftar-container .skema-select-card .skema-select-icon { grid-row: 1 / span 3; }
.daftar-container .skema-status-badge {
    position: static; transform: none; grid-column: 2; justify-self: start; box-shadow: none;
    font-size: 9.5px; padding: 1px 8px; margin-bottom: 2px;
}
.daftar-container .skema-status-badge.open { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.daftar-container .skema-status-badge.closed-badge { background: #f8fafc; color: #64748b; border: 1px solid var(--border); }
.daftar-container .skema-select-card.closed { opacity: .6; }
.daftar-container .skema-ket-panel { background: var(--primary-xlight); border: 1px solid #ddd6fe; border-radius: 10px; }
.daftar-container .skema-ket-ul li { font-size: 12px; }

/* Area unggah: kotak putus-putus sederhana */
.daftar-container .upload-drop { border: 1.5px dashed #c4b5fd; border-radius: 10px; background: var(--primary-xlight); padding: 1.4rem 1rem; }
.daftar-container .upload-drop-icon { width: 40px; height: 40px; font-size: 1.1rem; background: #fff; }
.daftar-container .upload-drop-danger { border-color: #fecaca; background: #fef2f2; }
.daftar-container .btn-primary.w-100, .daftar-container button[type="submit"].w-100 { min-height: 44px; border-radius: 9px; }
@media (max-width: 575px) {
    .daftar-container .step-header, .daftar-container .step-card > .card-body { padding-left: 16px !important; padding-right: 16px !important; }
    .daftar-container .skema-select-grid { grid-template-columns: 1fr; }
}
.daftar-container .skema-select-desc { color: var(--muted); }
.daftar-container .skema-select-card.closed .skema-select-name, .daftar-container .skema-select-card.closed .skema-select-desc { color: #94a3b8; }

/* Modal: kepala putih bergaris tipis, sudut 16px — sama pola modal SIPP */
.modal-content { border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(15, 5, 35, .25); overflow: hidden; }
.modal-header { background: var(--surface) !important; border-bottom: 1px solid var(--border); padding: 16px 22px; }
.modal-header .modal-title { color: var(--primary-dark); }
[data-theme="dark"] .modal-header .modal-title { color: var(--text); }
.modal-footer { border-top: 1px solid var(--border); }

/* Tabel bertumpuk di layar sempit (class .tbl-stack; label kolom diisi otomatis dari <th>) */
@media (max-width: 640px) {
    .tbl-stack { min-width: 0 !important; width: 100%; }
    .table-responsive:has(.tbl-stack) { overflow: visible; }
    .tbl-stack thead { display: none; }
    .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; }
    .tbl-stack tbody tr {
        border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
        margin-bottom: 10px; padding: .4rem .85rem;
    }
    .tbl-stack tbody td {
        display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
        padding: .5rem 0 !important; border: 0 !important; border-bottom: 1px dashed var(--border) !important;
        text-align: right; background: transparent !important;
    }
    .tbl-stack tbody td:last-child { border-bottom: 0 !important; }
    .tbl-stack tbody td::before {
        content: attr(data-label); flex: 0 0 34%; text-align: left;
        font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
    }
    .tbl-stack tbody td[data-label=""]::before { display: none; }
    .tbl-stack tbody td[data-label=""] { justify-content: flex-end; }
    .tbl-stack tbody td > * { max-width: 100%; }
}
@media (max-width: 640px) {
    /* tabel dengan isi sel kompleks (judul + uraian + catatan): label di atas, isi rata kiri */
    .tbl-stack-block tbody td { display: block; text-align: left; }
    .tbl-stack-block tbody td::before { display: block; flex: none; margin-bottom: 3px; }
    .tbl-stack-block tbody td[data-label=""] { text-align: left; }
    /* sel aksi: tombol boleh turun baris, tidak menembus kartu */
    .tbl-stack tbody td { flex-wrap: wrap; }
    .tbl-stack tbody td .btn { white-space: normal; }
}

/* =============================================
   Pengaturan Sistem (admin_pengaturan.php) — tanpa hero gradien, tab ungu, lencana ringkas
   ============================================= */
.settings-hero { background: var(--surface) !important; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 12px; padding: 1rem 1.25rem; }
.settings-hero::before { display: none !important; }
.settings-hero-icon { display: none !important; }
.settings-hero-text .page-title { font-size: 17px; font-weight: 700; color: var(--primary-dark); letter-spacing: -0.01em; }
.settings-hero-text .page-subtitle { font-size: 12px; max-width: none; }
[data-theme="dark"] .settings-hero-text .page-title { color: var(--text); }

.settings-pill.is-active, .settings-pill.active {
    background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: none !important;
}
.settings-pill:hover:not(.is-active) { border-color: #c4b5fd !important; color: var(--primary) !important; }

.skema-status { display: inline-flex !important; width: auto !important; align-self: flex-start; padding: 1px 9px !important; border-radius: 99px;
    font-size: 10px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.skema-status.active   { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0; }
.skema-status.inactive { background: #f8fafc !important; color: #64748b !important; border: 1px solid var(--border); }
.settings-section-title { font-size: 14px; font-weight: 600; color: var(--primary-dark); }
[data-theme="dark"] .settings-section-title { color: var(--text); }

/* Panel Pengaturan: aksen kiri seragam (sebelumnya biru/ungu/hijau berbeda tiap seksi) */
.setting-card, .settings-section { border-left-color: var(--primary) !important; }

/* Kelas lencana "-soft" yang dipakai halaman tetapi belum ada (teks lencana jadi putih di atas latar putih = tak terbaca) */
.bg-success-soft   { background: #ecfdf5; color: #065f46; }
.bg-warning-soft   { background: #fffbeb; color: #92400e; }
.bg-danger-soft    { background: #fef2f2; color: #991b1b; }
.bg-info-soft      { background: #eff6ff; color: #1e40af; }
.bg-secondary-soft, .bg-muted-soft { background: #f1f5f9; color: #475569; }
[data-theme="dark"] .bg-success-soft   { background: rgba(63, 185, 80, .12);  color: #3fb950; }
[data-theme="dark"] .bg-warning-soft   { background: rgba(227, 179, 65, .12); color: #e3b341; }
[data-theme="dark"] .bg-danger-soft    { background: rgba(248, 81, 73, .12);  color: #f85149; }
[data-theme="dark"] .bg-info-soft      { background: rgba(88, 166, 255, .12); color: #58a6ff; }
[data-theme="dark"] .bg-secondary-soft, [data-theme="dark"] .bg-muted-soft { background: rgba(148, 163, 184, .12); color: #94a3b8; }


/* =============================================
   MODE GELAP — perbaikan lanjutan
   ============================================= */
[data-theme="dark"] body { color: var(--text); }
[data-theme="dark"] ::placeholder { color: #6b6585 !important; opacity: 1; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color: var(--text); }
[data-theme="dark"] .form-select option { background: #1c1733; color: var(--text); }

/* teks gelap yang ditulis langsung di atribut style halaman */
[data-theme="dark"] [style*="color:#0f172a"], [data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#1e293b"], [data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1a0547"], [data-theme="dark"] [style*="color: #1a0547"],
[data-theme="dark"] [style*="color:#334155"], [data-theme="dark"] [style*="color: #334155"] { color: var(--text) !important; }
[data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#f8fafc"], [data-theme="dark"] [style*="background: #f8fafc"] { background: var(--surface) !important; }

/* kartu & panel dengan latar putih di CSS halaman */
[data-theme="dark"] .card, [data-theme="dark"] .card-custom, [data-theme="dark"] .card-s,
[data-theme="dark"] .setting-card, [data-theme="dark"] .stat-tile, [data-theme="dark"] .bg-white { background: var(--surface) !important; color: var(--text); }
[data-theme="dark"] .daftar-container .step-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .daftar-container .skema-select-card { background: var(--surface); }
[data-theme="dark"] .daftar-container .skema-select-card.closed { background: rgba(255,255,255,.02); }
[data-theme="dark"] .daftar-container .skema-select-card.selected { background: rgba(167,139,250,.12); border-color: var(--primary); }
[data-theme="dark"] .daftar-container .skema-select-card.selected .skema-select-icon { background: rgba(167,139,250,.2); }
[data-theme="dark"] .daftar-container .skema-select-icon { background: rgba(167,139,250,.1); }
[data-theme="dark"] .daftar-container .upload-drop { background: rgba(167,139,250,.06); border-color: #4b3d7a; }
[data-theme="dark"] .daftar-container .upload-drop-icon { background: rgba(167,139,250,.15); }
[data-theme="dark"] .daftar-container .skema-ket-panel { background: rgba(167,139,250,.08); border-color: #3b2d63; }
[data-theme="dark"] .daftar-container .skema-summary-item { color: var(--muted); }
[data-theme="dark"] .daftar-container .skema-select-name { color: var(--text); }
[data-theme="dark"] .daftar-container .step-header h4 { color: var(--text); }
[data-theme="dark"] .daftar-container .section-title { color: #c4b5fd; }

/* tabel, modal, dropdown */
[data-theme="dark"] .table, [data-theme="dark"] .table > :not(caption) > * > * { background: transparent; color: var(--text); }
[data-theme="dark"] .table-warning, [data-theme="dark"] .table-warning > td { background: rgba(227, 179, 65, .12) !important; color: var(--text); }
[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text); }
[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: rgba(167,139,250,.1); }

/* tombol & lencana */
[data-theme="dark"] .btn-light { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-light:hover { background: rgba(255,255,255,.12); color: var(--text); }
[data-theme="dark"] .btn-outline-warning, [data-theme="dark"] .btn-outline-success, [data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-secondary { background: transparent; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-warning { background: rgba(227,179,65,.12); border-color: rgba(227,179,65,.35); color: #e3b341; }
[data-theme="dark"] .btn-primary { color: #1a0547; }
[data-theme="dark"] .btn-primary:hover { color: #1a0547; }
[data-theme="dark"] .topbar-user-name, [data-theme="dark"] .topbar-title { color: var(--text) !important; }
[data-theme="dark"] .page-header[data-hero] .btn-primary { color: #fff; }

/* peringatan */
[data-theme="dark"] .alert { background: rgba(255,255,255,.04); color: var(--text); }
[data-theme="dark"] .alert-warning { background: rgba(227,179,65,.1); border-color: rgba(227,179,65,.3); border-left-color: #e3b341; color: #e3b341; }
[data-theme="dark"] .alert-danger  { background: rgba(248,81,73,.1); border-color: rgba(248,81,73,.3); border-left-color: #f85149; color: #ff9b94; }
[data-theme="dark"] .alert-success { background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.3); border-left-color: #3fb950; color: #6fdc84; }

/* beranda mahasiswa & status periode */
[data-theme="dark"] .status-banner { background: rgba(255,255,255,.03); }
[data-theme="dark"] .kn-siapkan ul li { color: var(--text); }
[data-theme="dark"] .kn-periode { background: transparent; }
[data-theme="dark"] .tbl-stack tbody tr { background: var(--surface); }
[data-theme="dark"] .topbar-lang a.active-lang { color: #1a0547; }
[data-theme="dark"] [style*="color:#92400e"], [data-theme="dark"] [style*="color: #92400e"] { color: #e3b341 !important; }
[data-theme="dark"] .sidebar-toggle:hover, [data-theme="dark"] .sidebar-toggle:focus { background: rgba(167,139,250,.12) !important; }

/* Tombol aksi baris (ikon outline saja) — admin_users.php */
.ua { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex: 0 0 34px;
    border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
    text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.ua svg { width: 16px; height: 16px; stroke-width: 1.75; }
.ua:hover, .ua:focus-visible { color: var(--primary); border-color: #c4b5fd; background: var(--primary-xlight); }
.ua-danger:hover, .ua-danger:focus-visible { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
[data-theme="dark"] .ua:hover, [data-theme="dark"] .ua:focus-visible { color: #c4b5fd; border-color: #4b3d7a; background: rgba(167,139,250,.1); }
[data-theme="dark"] .ua-danger:hover { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
@media (max-width: 575px) { .ua { width: 38px; height: 38px; flex-basis: 38px; } }  /* target sentuh lebih besar di ponsel */

/* admin_users.php — responsif */
#userFilterPills { overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
#userFilterPills::-webkit-scrollbar { display: none; }
#userFilterPills .nav-link { width: auto; flex: 0 0 auto; white-space: nowrap; min-height: 0; }
@media (max-width: 575px) {
    #userTable thead { display: none; }
    #userTable, #userTable tbody { display: block; width: 100%; }
    #userTable tr.user-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
        padding: 12px 4px; border-bottom: 1px solid var(--border); }
    #userTable tr.user-row > td { display: block; border: 0 !important; padding: 0 !important; background: transparent !important; }
    #userTable tr.user-row > td:first-child { flex: 1 1 100%; }
    #userTable tr.user-row > td:last-child { flex: 1 1 100%; }
    #userTable tr.user-row > td:last-child > div { justify-content: flex-start !important; flex-wrap: wrap; }
}

/* =============================================
   Sidebar dapat disembunyikan di desktop (seperti SIPP)
   <html class="sidebar-collapsed"> diset oleh header.php (anti-kedip) dan tombol hamburger di footer.php
   ============================================= */
@media (min-width: 769px) {
    .sidebar-toggle { opacity: 1 !important; pointer-events: auto !important; width: 42px !important; min-width: 42px !important; overflow: visible !important; padding: 0 !important; }
    .sidebar-toggle:hover { background: var(--primary-xlight) !important; }
    html.sidebar-collapsed .sidebar { display: none !important; }
    html.sidebar-collapsed .main-content,
    html.sidebar-collapsed .main-content.col-md-10 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
    html.sidebar-collapsed .main-content { padding-left: clamp(1rem, 3vw, 2.5rem); padding-right: clamp(1rem, 3vw, 2.5rem); }
}
@media (prefers-reduced-motion: no-preference) { .main-content { transition: padding .2s ease; } }
/* Isi sangat lebar (layar besar + sidebar tersembunyi): batasi lebar baca, tengahkan */
@media (min-width: 1600px) { html.sidebar-collapsed .content-body { max-width: 1480px; margin-left: auto; margin-right: auto; width: 100%; } }

/* Lencana ikon saja (jenis & status laporan) — teks cukup di tooltip */
.ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; flex: 0 0 30px; }
.ib svg { width: 15px; height: 15px; stroke-width: 1.9; }
.ib-pengantaran, .ib-menunggu { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.ib-supervisi { background: var(--primary-xlight); color: var(--primary); border-color: #ddd6fe; }
.ib-penarikan, .ib-draf { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ib-diterima { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ib-revisi { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
[data-theme="dark"] .ib-pengantaran, [data-theme="dark"] .ib-menunggu { background: rgba(148,163,184,.12); color: #cbd5e1; border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .ib-supervisi { background: rgba(167,139,250,.14); color: #c4b5fd; border-color: rgba(167,139,250,.3); }
[data-theme="dark"] .ib-penarikan, [data-theme="dark"] .ib-draf { background: rgba(227,179,65,.12); color: #e3b341; border-color: rgba(227,179,65,.3); }
[data-theme="dark"] .ib-diterima { background: rgba(63,185,80,.12); color: #6fdc84; border-color: rgba(63,185,80,.3); }
[data-theme="dark"] .ib-revisi { background: rgba(248,81,73,.12); color: #ff9b94; border-color: rgba(248,81,73,.3); }

/* Tab jenis laporan: ikon saja, ringkas */
.jenis-tabs { flex-wrap: wrap; }
.jenis-tabs .nav-link { height: 38px; padding: 0 16px; gap: 7px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); }
.jenis-tabs .nav-link svg { width: 17px; height: 17px; }
.jenis-tabs .nav-link.active { border-color: var(--primary); }
/* Tab status: ikon + jumlah */
.status-tab { gap: 6px; }
.status-tab svg { width: 16px; height: 16px; }
/* Layar sentuh/ponsel tidak punya "hover": di kartu tabel, lencana ikon menampilkan teksnya di sebelah ikon */
@media (max-width: 640px) {
    .ib { width: auto; height: auto; flex: 0 0 auto; padding: 4px 11px 4px 8px; border-radius: 99px; gap: 6px; }
    .ib::after { content: attr(title); font-size: 11px; font-weight: 600; line-height: 1.3; }
}

/* =============================================
   Modal detail laporan DPL (includes/dpl_modal.php)
   ============================================= */
.dm .modal-content { overflow: hidden; }
.dm-head { align-items: center; gap: 12px; padding: 16px 22px; }
.dm-ico { width: 40px; height: 40px; flex: 0 0 40px; }
.dm-ico svg { width: 19px; height: 19px; }
.dm-head-text { min-width: 0; flex: 1; }
.dm-head .modal-title { font-size: 15px; font-weight: 700; margin: 0; }
.dm-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-head .btn-close { margin: 0; flex: 0 0 auto; }
.dm-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.dm-status svg { width: 14px; height: 14px; }
.dm-diterima { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.dm-revisi   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.dm-menunggu { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.dm-draf     { background: #fffbeb; color: #b45309; border-color: #fde68a; }

.dm-body { padding: 0; }
.dm-sec { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.dm-last { border-bottom: 0; }
.dm-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.dm-h svg { width: 15px; height: 15px; }

.dm-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.dm-strip > div { padding: 12px 14px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-strip > div:first-child { border-left: 0; }
.dm-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dm-v { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.dm-n { font-size: 11px; color: var(--muted); line-height: 1.45; }

.dm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dm-dl { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 7px 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; align-content: start; }
.dm-dl dt { font-weight: 500; color: var(--muted); }
.dm-dl dd { margin: 0; color: var(--text); font-weight: 500; word-break: break-word; }
.dm-dl .dm-dt-title { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--primary-dark); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.dm-dl a { color: var(--primary); text-decoration: none; }

.dm-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.dm-file-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-xlight); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.dm-file-ico svg { width: 18px; height: 18px; }
.dm-file-meta { min-width: 0; flex: 1; }
.dm-file-name { font-size: 13px; font-weight: 600; word-break: break-all; }
.dm-file-sub { font-size: 11px; color: var(--muted); }
.dm-file-hilang { background: #fffbeb; border-color: #fde68a; }
.dm-file-hilang .dm-file-ico { background: #fef3c7; color: #b45309; }
.dm-check { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--primary-xlight); }
.dm-check-t { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.dm-check ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; font-size: 12px; }
.dm-check li { display: flex; align-items: center; gap: 6px; color: var(--text); }
.dm-check li svg { width: 14px; height: 14px; color: var(--primary); flex: 0 0 14px; }

.dm-tl { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.dm-tl li { position: relative; padding: 0 0 14px 26px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.dm-tl li:last-child { padding-bottom: 0; }
.dm-tl li::before { content: ''; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #cbd5e1; background: var(--surface); }
.dm-tl li::after { content: ''; position: absolute; left: 8px; top: 16px; bottom: -1px; width: 2px; background: var(--border); }
.dm-tl li:last-child::after { display: none; }
.dm-tl li.done::before { border-color: var(--primary); background: var(--primary); }
.dm-tl li.warn::before { border-color: #dc2626; background: #dc2626; }
.dm-tl b { font-weight: 600; color: var(--text); }
.dm-tl span { color: var(--muted); font-size: 11px; }
.dm-tl li.todo b { color: var(--muted); font-weight: 500; }

.dm-note { margin: 0; padding: 12px 16px; border-left: 3px solid #d97706; background: #fffbeb; border-radius: 0 10px 10px 0; font-size: 12.5px; line-height: 1.7; color: #78350f; }

.dm-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-opt { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.dm-opt-ok  { border-color: #a7f3d0; background: #f0fdf4; }
.dm-opt-rev { border-color: #fecaca; background: #fef8f8; }
.dm-opt-t { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.dm-opt-ok .dm-opt-t { color: #047857; } .dm-opt-rev .dm-opt-t { color: #b91c1c; }
.dm-opt-t svg { width: 16px; height: 16px; }
.dm-opt p { margin: 0; font-size: 12px; color: var(--muted); flex: 1; }
.dm-opt .btn { margin-top: auto; }
.dm-opt .btn svg { width: 15px; height: 15px; }
.dm-hint { font-size: 11px; color: var(--muted); margin-top: -4px; }
.dm-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; border: 1px solid; }
.dm-banner svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.dm-banner-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.dm-banner-rev { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.dm-banner-info { background: #f8fafc; border-color: var(--border); color: var(--muted); }
.dm-foot { padding: 12px 22px; }

@media (max-width: 767px) {
    .dm-strip { grid-template-columns: 1fr 1fr; }
    .dm-strip > div:nth-child(3) { border-left: 0; }
    .dm-strip > div:nth-child(n+3) { border-top: 1px solid var(--border); }
    .dm-cols, .dm-choice { grid-template-columns: 1fr; }
    .dm-check ul { grid-template-columns: 1fr 1fr; }
    .dm-head { flex-wrap: wrap; }
    .dm-head .dm-status { order: 3; margin-left: 52px; }
    .dm-sec { padding: 16px; }
}
[data-theme="dark"] .dm-diterima { background: rgba(63,185,80,.12); color: #6fdc84; border-color: rgba(63,185,80,.3); }
[data-theme="dark"] .dm-revisi   { background: rgba(248,81,73,.12); color: #ff9b94; border-color: rgba(248,81,73,.3); }
[data-theme="dark"] .dm-menunggu { background: rgba(148,163,184,.12); color: #cbd5e1; border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .dm-draf     { background: rgba(227,179,65,.12); color: #e3b341; border-color: rgba(227,179,65,.3); }
[data-theme="dark"] .dm-dl .dm-dt-title { color: var(--text); }
[data-theme="dark"] .dm-note { background: rgba(227,179,65,.08); color: #f0d78a; }
[data-theme="dark"] .dm-opt-ok { background: rgba(63,185,80,.06); border-color: rgba(63,185,80,.3); }
[data-theme="dark"] .dm-opt-rev { background: rgba(248,81,73,.06); border-color: rgba(248,81,73,.3); }
[data-theme="dark"] .dm-opt-ok .dm-opt-t { color: #6fdc84; } [data-theme="dark"] .dm-opt-rev .dm-opt-t { color: #ff9b94; }
[data-theme="dark"] .dm-banner-ok { background: rgba(63,185,80,.1); color: #6fdc84; border-color: rgba(63,185,80,.3); }
[data-theme="dark"] .dm-banner-rev { background: rgba(248,81,73,.1); color: #ff9b94; border-color: rgba(248,81,73,.3); }
[data-theme="dark"] .dm-file-hilang { background: rgba(227,179,65,.08); border-color: rgba(227,179,65,.3); }

/* Tooltip cepat (menggantikan title bawaan browser yang lambat) */
#fast-tip { position: fixed; z-index: 2000; pointer-events: none; padding: 4px 9px; border-radius: 6px; background: #1e1b2e; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; opacity: 0; transition: opacity .08s; }
#fast-tip.on { opacity: 1; }

/* Pager daftar user */
.usr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.usr-pager-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.usr-per { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.usr-per select { width: auto; font-size: 12px; }
.usr-nav { display: inline-flex; align-items: center; gap: 6px; }
.usr-page { min-width: 78px; text-align: center; color: var(--text); }
.ua.is-off { opacity: .35; pointer-events: none; }
@media (max-width: 575px) { .usr-pager { justify-content: center; } }

/* Select jumlah tampil: ruang untuk panah agar tidak menimpa angka */
.usr-per select, .kel-size select { min-width: 74px; padding: 5px 32px 5px 12px !important; background-position: right 10px center !important; background-size: 12px 10px !important; }