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


:root {
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #141414;
    --border-color: #e5e7eb;
    --accent-color: #3b82f6;
    --accent: #1a68c279;
    --accents: #1976e0cb;
    --accent-text-color: #ffffff;
    --hover-bg: #f9fafb;
    --primary-color: #8c0000;
    --secondary-color: #a00;
    --font-family: 'Tohama', sans-serif;
    --text-color: #080808;
    --background-color: #f4f7f6;
    --card-bg-color: rgba(255, 255, 255, 0.021);
    --card-border-color: rgba(255, 255, 255, 0.18);
    --template-btn-bg: #e5e7eb;
    --template-btn-bg-hover: #d1d5db;
    --template-btn-text: #374151;
    /* --file-btn: Tombol 'Choose File' */
    --file-btn-bg: #e0e7ff;
    --file-btn-text: #3b82f6;
    --border-color: #e5e7eb;

    --popup-bg: #e2e8f0;
    /* Latar belakang terang (abu-abu muda) */
    --popup-text: #1a202c;
    /* Teks gelap */
    --popup-shadow: rgba(0, 0, 0, 0.4);

    --card-bg: #ffffff;
    /* Latar belakang kartu (putih) */
    --card-border: #e5e7eb;
    /* Border kartu (abu-abu muda) */
    --text-primary: #111827;
    /* Teks utama (hitam) */
    --card-header-bg: #f9fafb;
    /* --shadow: Efek bayangan untuk card */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --bg-tertiary: #f9fafb;
    --link-text: #3b82f6;
    /* Latar belakang & teks ikon arsip */
    --icon-bg: rgba(59, 130, 246, 0.1);
    --icon-text: #2563eb;

    /* Warna Modal (Light Mode) */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;
    --modal-border: #e5e7eb;
    /* Garis pemisah header/footer */

    /* Warna Form (Light Mode) */
    --form-input-bg: #ffffff;
    --form-input-border: #d1d5db;
    --file-button-bg: #f9fafb;
    --file-button-text: #374151;
    --file-button-hover-bg: #f3f4f6;

    --evt-bg: #ffffff;
    --evt-text-main: #1e293b;
    --evt-text-sub: #64748b;
    --evt-border: #e2e8f0;
    --evt-icon-bg: #f1f5f9;
    --evt-icon-color: #475569;


    --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --btn-hover-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

    /* Warna Tombol (Normal) */
    --color-add: #3b82f6;
    /* Biru */
    --color-add-hover: #2563eb;

    --color-import: #8b5cf6;
    /* Ungu */
    --color-import-hover: #7a51c2;

    --color-export: #10b981;
    /* Hijau */
    --color-export-hover: #059669;

    --color-template: #6b7280;
    /* Abu-abu */
    --color-template-hover: #4b5563;

    /* Status Colors */
    --st-blue: #3b82f6;
    --st-green: #22c55e;
    --st-red: #ef4444;
    /* Warna Alert Info (Light Mode) */
    --alert-info-bg: #eff6ff;
    /* bg-blue-50 */
    --alert-info-text: #1d4ed8;
    /* text-blue-700 */
    --alert-info-border: #bfdbfe;
    /* border-blue-300 */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

    --mon-bg: #ffffff;
    /* Background putih */
    --mon-border: #e2e8f0;
    /* Border abu terang */
    --mon-text-title: #334155;
    /* Teks judul gelap */
    --mon-text-legend: #64748b;
    /* Teks keterangan abu */

    /* Variabel Baru untuk Komponen Statistik */
    --success-color: #10B981;
    --success-hover-color: #059669;
    --button-bg: #e5e7eb;
    --button-text-color: #1f2937;
    --button-hover-bg: #d1d5db;
    --tab-text-color: #6b7280;
    --tab-hover-bg: #f9fafb;
    --tab-hover-text: #1f2937;
    --tab-active-text: #3b82f6;
    --tab-active-bg: rgba(59, 130, 246, 0.1);
    --tab-active-border: #3b82f6;

    --bukti-bg-main: #f8fafc;
    --bukti-border-main: #e2e8f0;
    --bukti-bg-input: #ffffff;
    --bukti-border-input: #cbd5e1;
    --bukti-text-primary: #0f172a;
    --bukti-text-muted: #64748b;
    --bukti-accent-blue: #2563eb;
    --bukti-accent-slate: #475569;


    /* Dashboard Survey - Light Mode Variables */
    --ds-bg: #f4f7fe;
    --ds-card-bg: #ffffff;
    --ds-text-main: #1B2559;
    --ds-text-sub: #A3AED0;
    --ds-accent: #4318FF;
    --ds-border: #E0E5F2;
    --ds-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03);
    --ds-icon-bg: #F4F7FE;

    /* Brand Colors */
    --srv-primary: #4318FF;
    --srv-primary-gradient: linear-gradient(135deg, #4318FF 0%, #707EFF 100%);
    --srv-success: #05CD99;
    --srv-warning: #FFB547;
    --srv-danger: #EE5D50;

    /* Neutral Colors */
    --srv-bg: #F4F7FE;
    --srv-card-bg: #FFFFFF;
    --srv-text-main: #1B2559;
    --srv-text-sub: #8F9BBA;
    --srv-border: #E0E5F2;

    /* Shadows - Kunci Tampilan Profesional */
    --srv-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
    --srv-shadow-md: 14px 17px 40px 4px rgba(112, 144, 176, 0.12);
    --srv-shadow-glow: 0 0 15px rgba(5, 205, 153, 0.4);

    /* Radius */
    --srv-radius-lg: 20px;
    --srv-radius-md: 16px;
    --srv-radius-sm: 10px;

}

html.dark {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-card: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --hover-bg: #374151;
    --accent-text-color: #ffffff;
    --bg-tertiary: rgba(17, 24, 39, 0.5);
    --link-text: #93c5fd;
    --icon-bg: rgba(2, 132, 199, 0.2);
    --icon-text: #38bdf8;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --evt-bg: #1e293b;
    /* Slate-800 */
    --evt-text-main: #f8fafc;
    /* Slate-50 */
    --evt-text-sub: #94a3b8;
    /* Slate-400 */
    --evt-border: #334155;
    /* Slate-700 */
    --evt-icon-bg: #0f172a;
    /* Slate-900 */
    --evt-icon-color: #cbd5e1;
    /* Slate-300 */
    --mon-bg: #1e293b;
    /* Background slate-800 (Original) */
    --mon-border: #334155;
    /* Border slate-700 */
    --mon-text-title: #ffffff;
    /* Teks judul putih */
    --mon-text-legend: #cbd5e1;
    /* Teks keterangan terang */

    --popup-bg: #2d3748;
    /* Latar belakang gelap */
    --popup-text: #ffffff;
    /* Teks putih */
    --popup-shadow: rgba(0, 0, 0, 0.3);


    --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Shadow lebih gelap */
    /* Di mode gelap, warna dibuat sedikit lebih cerah/pastel agar kontras */
    --color-add: #60a5fa;
    --color-add-hover: #3b82f6;

    --color-import: #a78bfa;
    /* Ungu lebih terang */
    --color-import-hover: #8b5cf6;

    --color-export: #34d399;
    /* Hijau lebih terang */
    --color-export-hover: #10b981;

    --color-template: #9ca3af;
    --color-template-hover: #6b7280;
    /* Bayangan gelap */

    /* Bayangan tetap gelap (agar terlihat di atas bg terang) */

    --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    --color-add: #60a5fa;
    --color-add-hover: #3b82f6;
    --color-import: #a78bfa;
    --color-import-hover: #8b5cf6;
    --color-export: #34d399;
    --color-export-hover: #10b981;
    --color-template: #9ca3af;
    --color-template-hover: #6b7280;
    /* Warna Modal (Dark Mode) */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-bg: #1f2937;
    --modal-border: #374151;
    /* Status Badge (Dark) */
    --status-bg: rgba(16, 185, 129, 0.2);
    --status-text: #6ee7b7;

    --card-bg: #1f2937;
    /* Latar belakang dari kode asli Anda */
    --card-border: #374151;
    /* Border yang sedikit lebih terang dari bg */
    --text-primary: #e5e7eb;
    /* Teks utama dari kode asli Anda */
    --card-header-bg: rgba(255, 255, 255, 0.05);

    /* Warna Form (Dark Mode) */
    --form-input-bg: #374151;
    --form-input-border: #4b5563;
    --file-button-bg: #4b5563;
    --file-button-text: #e5e7eb;
    --file-button-hover-bg: #5a6673;

    /* Status Badge (Light) */
    --status-bg: #d1fae5;
    /* tailwind-green-100 */
    --status-text: #065f46;
    /* tailwind-green-700 */

    /* Alert Box (Light) */
    --alert-bg: #e0f2fe;
    /* tailwind-sky-100 */
    --alert-border: #7dd3fc;
    /* tailwind-sky-300 */
    --alert-text: #0369a1;
    /* tailwind-sky-700 */

    /* Button Warning (Bisa tetap sama) */
    --btn-warning-bg: #f59e0b;
    --btn-warning-bg-hover: #d97706;
    --btn-warning-text: #ffffff;

    /* Warna Alert Info (Dark Mode) - Sesuai kode Anda */
    --alert-info-bg: rgba(59, 130, 246, 0.1);
    --alert-info-text: #93c5fd;
    --alert-info-border: rgba(59, 130, 246, 0.5);
    /* Alert Box (Dark) */
    --alert-bg: rgba(56, 189, 248, 0.1);
    --alert-border: rgba(56, 189, 248, 0.5);
    --alert-text: #7dd3fc;

    /* Variabel Baru untuk Komponen Statistik (Dark Mode) */
    --button-bg: #4B5563;
    --button-text-color: #f3f4f6;
    --button-hover-bg: #6B7280;
    --tab-text-color: #D1D5DB;
    --tab-hover-bg: #374151;
    --tab-hover-text: #F9FAFB;
    --tab-active-text: #EFF6FF;
    --tab-active-bg: rgba(59, 130, 246, 0.1);
    --tab-active-border: var(--accent-color);
    --border-color: #374151;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
        0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --template-btn-bg: #4b5563;
    --template-btn-bg-hover: #6b7280;
    --template-btn-text: #ffffff;
    --file-btn-bg: rgba(59, 130, 246, 0.1);
    --file-btn-text: #93c5fd;


    --bukti-bg-main: #1e293b;
    --bukti-border-main: #334155;
    --bukti-bg-input: #0f172a;
    --bukti-border-input: #475569;
    --bukti-text-primary: #f1f5f9;
    --bukti-text-muted: #94a3b8;
    --bukti-accent-blue: #3b82f6;



    /* Dashboard Survey - Dark Mode Variables */
    --ds-bg: #0b1437;
    --ds-card-bg: #111c44;
    --ds-text-main: #ffffff;
    --ds-text-sub: #a3aed0;
    --ds-accent: #7551ff;
    --ds-border: #1b254b;
    --ds-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    --ds-icon-bg: #1b254b;
}


/* --- General Body & Layout --- */
body {
    font-family: var(--font-family);
    font-size: 14px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    height: 100%;

}




/* Tombol tab (standar/tidak aktif) */
.tab-button {
    padding: 0.75rem 1rem;
    /* Memberi ruang di dalam tombol */
    margin-bottom: -1px;
    /* Trik agar border bawah menyatu dengan border container */

    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    /* PENTING: Border transparan agar layout tidak loncat saat aktif */

    color: #9CA3AF;
    /* Warna teks abu-abu saat tidak aktif */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* Animasi halus */
}

/* Tombol tab saat disentuh mouse (hover) */
.tab-button:hover {
    color: #E5E7EB;
    /* Warna teks sedikit lebih terang saat hover */
}

/* KUNCI UTAMA: Tombol tab yang sedang AKTIF */
.tab-button.active {
    color: #FFFFFF;
    /* Warna teks putih terang saat aktif */
    font-weight: 600;
    /* Teks lebih tebal saat aktif */
    border-bottom-color: #3B82F6;
    /* INI GARIS BIRU YANG ANDA INGINKAN */
}

.tab-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #D1D5DB;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.tab-button:hover {
    background-color: #374151;
    color: #F9FAFB;
}

.tab-button.active {
    color: #93C5FD;
    border-color: #3B82F6;
    background-color: rgba(59, 130, 246, 0.1);
}


.main-container {
    display: flex;
}

/* === LAYOUT UTAMA & RESPONSIVE === */


.content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    /* Pastikan tidak ada margin yang mendorongnya */
    margin: 0;
}

main {
    flex-grow: 1;
    overflow-y: auto;
    /* KUNCI: Kurangi padding di sini. 1.5rem (24px) adalah standar yang baik.
       Sebelumnya mungkin nilainya terlalu besar. */
    padding: 1.5rem;
    background-color: var(--bg-primary);
    /* Tambahkan warna latar belakang jika perlu */
}

/* =========================================
   SIDEBAR COLLAPSIBLE - FIXED
   ========================================= */

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

/* === SIDEBAR BASE === */
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: linear-gradient(180deg, #a5b4fc 0%, #c4b5fd 100%);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    overflow: hidden;
}

html.dark .sidebar {
    background: #1b2433;
}

/* === SIDEBAR COLLAPSED (Mini) === */
.sidebar.collapsed {
    width: 60px;
}

.sidebar.collapsed .sidebar-header span,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .submenu,
.sidebar.collapsed button.sidebar-link i.fa-chevron-down {
    display: none;
}

.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0.625rem 0;
}

.sidebar.collapsed .sidebar-link i {
    margin-right: 0;
    font-size: 1.2rem;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

.sidebar.collapsed .sidebar-header img {
    margin-right: 0;
}

/* === MOBILE STYLES === */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar.collapsed {
        width: 250px;
    }
}

/* === DESKTOP STYLES === */
@media (min-width: 1024px) {
    .sidebar {
        position: sticky;
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none !important;
    }

    /* Content wrapper - NO margin by default */
    .content-wrapper {
        margin-left: 0;
        transition: margin-left 0.3s ease;
    }
}

/* === INTERNAL SIDEBAR STYLING === */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.sidebar-header img {
    height: 2.25rem;
    width: auto;
    margin-right: 0.75rem;
    transition: margin 0.3s ease;
}

.sidebar-header span {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

html.dark .sidebar-header span {
    color: #f3f4f6;
}

.sidebar nav {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

hr {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 0.5rem 0;
    border-style: solid;
    border-width: 1px 0 0 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.5rem;
    border-radius: 0.5rem;
    color: #191d24;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    font-size: 14px;
    white-space: nowrap;
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #1f2937;
}

.sidebar-link.active {
    background-color: rgba(255, 255, 255, 0.4);
    color: #050607 !important;
    font-weight: 600;
}

html.dark .sidebar-link {
    color: #d1d5db;
}

html.dark .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
}

html.dark .sidebar-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #f3f4f6 !important;
}

.sidebar-link i {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

button.sidebar-link {
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

button.sidebar-link div {
    display: flex;
    align-items: center;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding-left: 2.5rem;
}

.submenu a {
    display: block;
    padding: 0.6rem 1rem;
    border-radius: 0.375rem;
    color: #15171a;
    text-decoration: none;
    font-size: 13px;
}

.submenu a:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

html.dark .submenu a {
    color: #9ca3af;
}

/* === CONTENT WRAPPER === */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* === TOPBAR === */
.topbar {
    height: 4rem;
    background: linear-gradient(90deg, #a5b4fc 0%, #c4b5fd 100%);
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 900;
}

html.dark .topbar {
    background: rgba(31, 41, 55, 0.7);
    backdrop-filter: blur(10px);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

html.dark .topbar-title {
    color: #f3f4f6;
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    color: #4b5563;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #1f2937;
}

html.dark .icon-button {
    color: #d1d5db;
}

html.dark .icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
}

.icon-button i,
.icon-button svg {
    font-size: 1.2rem;
    line-height: 1;
    height: 1.2rem;
    width: 1.2rem;
}

.divider {
    height: 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

html.dark .divider {
    border-left-color: rgba(255, 255, 255, 0.1);
}

/* === MAIN CONTAINER === */
.main-container {
    display: flex;
    min-height: 100vh;
}

main {
    flex: 1;
    padding: 1.5rem;
    background-color: #f9fafb;
}

html.dark main {
    background-color: #111827;
}

/* === 2. STYLES DROPDOWN === */
.dropdown {
    position: relative;
}

.dropdown summary {
    list-style: none;
    /* Menghilangkan marker default */
    cursor: pointer;
}

.dropdown summary::-webkit-details-marker {
    display: none;
}

.dropdown-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    /* Posisi lebih robust daripada margin-top */
    background-color: var(--bg-primary);
    /* Latar belakang solid lebih baik */
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    /* Sedikit lebih besar */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.profile-panel {
    min-width: 12rem;
    /* Atur lebar minimal di sini */
}

.dropdown[open]>.dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-panel-header,
.dropdown-panel-footer {
    padding: 0.75rem 1rem;
    font-weight: 600;
    text-decoration: none;
}

.dropdown-panel-header {
    border-bottom: 1px solid var(--border-color);
}

.dropdown-panel-footer {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.dropdown-panel-footer:hover {
    background-color: var(--hover-bg);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: var(--hover-bg);
}

.dropdown-divider {
    margin: 0.25rem 0;
    border-top: 1px solid var(--border-color);
}


/* === 3. STYLES NOTIFIKASI & PROFIL SPESIFIK === */
.notification-badge {
    position: absolute;
    top: 4px;
    /* Posisi lebih konsisten */
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    /* Gunakan min-width agar fleksibel */
    height: 1.1rem;
    padding: 0 4px;
    /* Padding horizontal */
    border-radius: 9999px;
    background-color: #ef4444;
    /* Red-500 */
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border: 2px solid var(--bg-secondary);
    /* Border agar terpisah dari ikon */
}

.notification-panel {
    min-width: 22rem;
}

.notification-list {
    max-height: 400px;
    /* Batas scroll */
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: var(--hover-bg);
}

.notification-icon {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 1rem;
    flex-shrink: 0;
}

.icon-bg-validasi {
    background-color: #3b82f6;
}

/* Blue-500 */
.icon-bg-revisi {
    background-color: #f97316;
}

/* Orange-500 */

.notification-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.1rem 0 0.25rem 0;
    /* Kunci: Truncate text untuk 2 baris, jauh lebih baik dari 1 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.notification-content .time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    /* Dibuat konsisten dengan variabel */
    opacity: 0.8;
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 4px;
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.profile-summary:hover {
    background-color: var(--hover-bg);
}

.profile-avatar {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.profile-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-right: 0.25rem;
    /* Sedikit spasi di kanan */
}

/* === 4. RESPONSIVE === */
@media (min-width: 1024px) {
    #menu-button {
        display: none;
    }
}

@media (max-width: 767px) {
    .topbar {
        padding: 0 1rem;
    }

    /* Kurangi padding di tablet */
    .topbar-title {
        display: none;
    }
}

@media (max-width: 639px) {
    .topbar {
        padding: 0 0.5rem;
    }

    /* Kurangi padding lagi di mobile */
    .topbar-right {
        gap: 0.25rem;
    }

    /* Rapatkan ikon di kanan */
    .profile-name {
        display: none;
    }

    /* Kunci: Membuat panel notifikasi tidak meluap dari layar */
    .notification-panel {
        max-width: calc(100vw - 2rem);
    }
}

/* === Universal Box Sizing (Prevents Padding Issues) === */
* {
    box-sizing: border-box;
}

.selection-page {
    background-color: #111827;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    /* Pastikan font ini diimpor */
}

/* --- Container Utama & Slideshow --- */
#slideshow-container {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Padding untuk jarak dari tepi layar */
    transition: background-image 1s ease-in-out;
}

.slideshow-overlay {
    position: absolute;
    inset: 0;
    /* Pintasan untuk top, right, bottom, left: 0 */
    background-color: rgba(0, 0, 0, 0.507);
    /* Overlay gelap agar teks terbaca */

    /* KUNCI: Kurangi nilai blur di sini sesuai selera Anda.
       Coba nilai antara 2px hingga 4px. */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- Kotak Konten Utama --- */
.selection-container {
    position: relative;
    /* Agar tampil di atas overlay */
    width: 100%;
    max-width: 64rem;
    /* 1024px, sedikit lebih lebar untuk 2 kartu */
    background: rgba(12, 16, 22, 0.411);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    /* Sudut lebih tumpul */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);
    padding: 2.5rem;
    text-align: center;
}

.selection-container h1 {
    font-size: 2.25rem;
    /* 36px */
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.selection-container .username {
    color: #338af5;
    /* Biru terang */
}

.selection-container>p {
    font-size: 1.125rem;
    /* 18px */
    color: #d1d5db;
    /* Abu-abu terang */
    margin-bottom: 3rem;
    max-width: 600px;
    /* Batasi lebar agar mudah dibaca */
    margin-left: auto;
    margin-right: auto;
}

/* --- Grid untuk Kartu Pilihan --- */
.card-grid {
    display: grid;
    gap: 2rem;
    /* Mulai dengan 1 kolom untuk mobile */
    grid-template-columns: 1fr;
}

.selection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pusatkan semua item di dalam kartu */
    text-align: center;
    text-decoration: none;
    color: #f9fafb;
    background: rgba(117, 128, 141, 0.062);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    padding: 2.5rem;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.selection-card:hover {
    transform: translateY(-10px);
    /* Efek mengangkat lebih jelas */
    background: rgba(69, 76, 87, 0.425);
}

.selection-card-icon {
    font-size: 2.5rem;
    /* Ukuran ikon disesuaikan */
    margin-bottom: 1.5rem;
    line-height: 1;
    /* Pastikan ikon tidak punya spasi ekstra */
}

.selection-card-icon.icon-blue {
    color: #60a5fa;
}

.selection-card-icon.icon-green {
    color: #4ade80;
}

.selection-card h2 {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.selection-card p {
    color: #d1d5db;
    line-height: 1.6;
    flex-grow: 1;
    /* Pastikan paragraf mengisi ruang agar tombol sejajar */
}

/* --- Tombol Logout --- */
.logout-link-selection {
    display: inline-block;
    margin-top: 3rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.logout-link-selection:hover {
    color: rgb(235, 23, 23);
}

.logout-link-selection i {
    margin-right: 0.5rem;
}

/* --- Animasi --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* --- Responsif untuk Tablet & Desktop --- */
@media (min-width: 768px) {
    .selection-container {
        padding: 3.5rem;
    }

    .selection-container h1 {
        font-size: 2.75rem;
        /* 44px */
    }

    /* Ubah grid menjadi 2 kolom di layar lebar */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Konten (Tabel, Form, Alert) --- */
.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
}

.alert-success {
    color: #a7f3d0;
    background-color: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.alert-error {
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    font-size: 0.875rem;
}

.alert strong {
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    text-decoration: none;
    border: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

.btn i {
    margin-right: 0.5rem;
}

.card {
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    overflow: hidden;
}

.card-header {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.card-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

@media (min-width: 640px) {
    .card-header {
        flex-direction: row;
        align-items: center;
    }

    .card-header h2 {
        margin-bottom: 0;
    }

    .card-footer {
        flex-direction: row;
    }

    .card-footer p {
        margin-bottom: 0;
    }
}

.card-footer p {
    margin-bottom: 0.75rem;
}


.data-table {
    width: 100%;
    font-size: 0.875rem;
    text-align: left;
    color: var(--text-secondary);
}

.data-table thead {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #d1d5db;
    background-color: rgba(55, 65, 81, 0.5);
}

.data-table th,
.data-table td {
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr:last-of-type {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background-color: rgba(41, 79, 145, 0.089);
}

.data-table td.font-medium {
    font-weight: 500;
    color: var(--text-primary);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.badge-purple {
    background-color: rgba(168, 85, 247, 0.2);
    color: #9580ec;
}

.badge-blue {
    background-color: rgba(59, 130, 246, 0.2);
    color: #2077da;
}

.action-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.action-icon {
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.action-icon-edit {
    color: #facc15;
}

.action-icon-edit:hover {
    color: #fde047;
}

.action-icon-delete {
    color: #ef4444;
}

.action-icon-delete:hover {
    color: #f87171;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    list-style: none;
}

.page-link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-secondary);
    transition: all 0.2s ease-in-out;
}

.page-link:hover {
    color: var(--text-primary);
    background-color: var(--hover-bg);
}

.page-item.active .page-link {
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.page-item.disabled .page-link {
    color: #4b5563;
    pointer-events: none;
}



/* Kontainer Utama untuk Info dan Form */
.login-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    /* Memastikan konten berada di atas overlay */
}

/* --- BAGIAN KIRI: INFORMASI --- */
.login-info {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.login-info-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-info-content .subtitle {
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 0;
}

.login-info hr {
    border: 0;
    height: 2px;
    background: #fff;
    width: 50%;
    margin: 1rem auto;
    opacity: 0.5;
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.partner-logos img {
    filter: brightness(0) invert(1);
}

.logo-main {
    width: 200px;
    height: auto;
}

.logo-secondary {
    width: 170px;
    height: auto;
}

.login-info .agenda {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
    max-width: 500px;
    /* Batasi lebar agar tidak terlalu melebar di layar besar */
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.agenda-item i {
    font-size: 1.5rem;
}

.login-info-content .agenda h4 {
    font-size: 1.24rem;
    margin: 0 0 4px 0;
}

.login-info-content .agenda p {
    font-size: 1rem;
    margin: 0;
}

.login-info-content .tagline {
    font-size: 1.3rem;
    margin-top: 3rem;
}

/* --- BAGIAN KANAN: FORM LOGIN --- */
.login-form-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    background-color: var(--card-bg-color);
    backdrop-filter: blur(15px);
    border: 1px solid var(--card-border-color);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
    width: 100%;
    max-width: 450px;
}

.login-card-header {
    margin-bottom: 2rem;
}

.login-card-header img {
    max-width: 150px;
    /* Sesuaikan ukuran logo */
    height: auto;
    margin-bottom: 1rem;
}

.login-card-header h2 {
    font-size: 1.5rem;
    margin: 0;
    color: white;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.input-group {
    display: flex;
    align-items: center;
    background-color: rgba(104, 104, 104, 0.151);
    border-radius: 10px;
    padding: 10px 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.input-group-icon {
    color: var(--primary-color);
    margin-right: 10px;
    font-size: 1.1rem;
}

.form-control {
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;
    font-size: 1rem;
    padding: 5px 0;
    color: white;
    caret-color: white;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

.password-toggle {
    cursor: pointer;
    color: #ccc;
}

.btn-maroon {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-maroon:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.login-card hr {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 2rem 0;
}

.copyright {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 1.2rem;
    text-align: left;
    font-size: 0.9rem;
}

/* ======================================================= */
/* --- PERBAIKAN UNTUK TAMPILAN MOBILE (RESPONSIVE) --- */
/* ======================================================= */
@media (max-width: 992px) {

    /* Pada layar tablet, sembunyikan info di kiri */
    .login-info {
        display: none;
    }
}

@media (max-width: 768px) {

    /* PERBAIKAN UTAMA: 
      Izinkan body dan html untuk memiliki tinggi sesuai kontennya,
      sehingga scrolling alami browser bisa berfungsi.
    */
    html,
    body {
        height: auto;
    }

    #slideshow-container {
        flex-direction: column;
        justify-content: flex-start;
        /* Konten dimulai dari atas */
        height: auto;
        /* Tinggi container menyesuaikan konten di dalamnya */
        min-height: 100vh;
        /* Minimal setinggi layar penuh */
    }

    /* Tampilkan kembali info di mobile, tapi di atas form */
    .login-info {
        display: flex;
        /* Aktifkan kembali */
        flex: 1;
        /* Hentikan agar tidak memaksa mengambil 50% tinggi layar */
        padding: 40px 20px 20px 20px;
        /* Atur padding atas lebih besar */
        order: 1;
        /* Posisikan di urutan pertama */
    }

    .login-form-wrapper {
        flex: none;
        /* Hentikan juga agar tidak memaksa tinggi */
        width: 100%;
        padding: 20px 20px 40px 20px;
        /* Padding bawah lebih besar */
        order: 2;
        /* Posisikan di urutan kedua */
    }

    .partner-logos {
        display: none;
        /* Sembunyikan logo partner untuk hemat ruang */
    }

    /* Kecilkan ukuran font di bagian info */
    .login-info-content h1 {
        font-size: 2rem;
    }

    .login-info-content .subtitle {
        font-size: 1.1rem;
    }

    .login-info-content .agenda h4 {
        font-size: 1rem;
    }

    .login-info-content .agenda p {
        font-size: 0.9rem;
    }

    .login-info .agenda {
        gap: 1rem;
    }

    .login-info-content .tagline {
        font-size: 1.1rem;
        margin-top: 2rem;
    }

    .login-card {
        background-color: var(--card-bg-color);
        backdrop-filter: blur(15px);
        border: 1px solid var(--card-border-color);
        border-radius: 20px;
        padding: 2.5rem;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        text-align: center;
        width: 100%;
        max-width: 450px;
    }

}

/* --- Halaman Dashboard / Grafik Capaian --- */

.chart-header {
    padding: 1.5rem;
    /* p-6 */
    border-bottom: 1px solid var(--border-color);
    /* border-b border-gray-700 */
    display: flex;
    flex-direction: column;
    /* Default: flex-col */
    justify-content: space-between;
    align-items: flex-start;
    /* items-start */
}

.chart-header-title h2 {
    color: #2962FF;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    padding: 1;
    letter-spacing: 0.5px;
}

.chart-header-title p {
    font-size: 0.875rem;
    /* text-sm */
    color: var(--text-secondary);
    /* text-gray-400 */
}

.chart-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* gap-2 */
}

.chart-action-btn {
    /* --- Tampilan & Ukuran --- */
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    font-size: 1rem;

    /* --- Paksa Pewarnaan --- */
    background-color: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;

    /* --- Fungsionalitas & Posisi Ikon --- */
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.chart-action-btn:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.chart-body {
    padding: 1rem;
    /* p-6 */
}



.chart-filters {
    padding: 1.5rem;
    /* p-6 */
    background-color: transparent(17, 24, 39, 0.5);
    /* bg-gray-900/50 */
    border-top: 1px solid var(--border-color);
    /* border-t border-gray-700 */
}

#filterForm .grid-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* grid-cols-1 */
    gap: 1rem;
    /* gap-4 */
}

.grid-container {
    display: flex;
    /* Menggunakan Flexbox untuk membuat item sejajar */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* grid-cols-1 */
    gap: 1rem;
    /* Membuat elemen sejajar secara vertikal di tengah */
}

.stats-filter-container {
    padding: 1rem;
    margin-bottom: 1.5rem;
    /* Tambahkan baris ini */
}

.grid-container .filter-select {
    background-color: var(--hover-bg);
    /* bg-gray-700 */
    border: 1px solid #4b5563;
    /* border border-gray-600 */
    color: var(--text-primary);
    /* text-white */
    font-size: 0.875rem;
    /* text-sm */
    border-radius: 0.5rem;
    /* rounded-lg */
    display: block;
    width: 100%;
    padding: 0.625rem;
    /* p-2.5 */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.grid-container .filter-submit-btn {
    width: 100%;
    /* w-full */
    color: white;
    /* text-white */
    background-color: #2563eb;
    /* bg-blue-600 */
    font-weight: 500;
    /* font-medium */
    border-radius: 0.5rem;
    /* rounded-lg */
    font-size: 0.875rem;
    /* text-sm */
    padding: 0.625rem 1.25rem;
    /* px-5 py-2.5 */
    text-align: center;
    /* text-center */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-select {
    background-color: var(--hover-bg);
    /* bg-gray-700 */
    border: 1px solid #4b5563;
    /* border border-gray-600 */
    color: var(--text-primary);
    /* text-white */
    font-size: 0.875rem;
    /* text-sm */
    border-radius: 0.5rem;
    /* rounded-lg */
    display: block;
    width: 100%;
    padding: 0.625rem;
    /* p-2.5 */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    /* Simplified focus:ring-blue-500 */
}

.filter-submit-btn {
    width: 100%;
    /* w-full */
    color: white;
    /* text-white */
    background-color: #2563eb;
    /* bg-blue-600 */
    font-weight: 500;
    /* font-medium */
    border-radius: 0.5rem;
    /* rounded-lg */
    font-size: 0.875rem;
    /* text-sm */
    padding: 0.625rem 1.25rem;
    /* px-5 py-2.5 */
    text-align: center;
    /* text-center */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-submit-btn:hover {
    background-color: #1d4ed8;
    /* hover:bg-blue-700 */
}

.filter-submit-btn:focus {
    outline: none;
    /* focus:outline-none */
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.5);
    /* Simplified focus:ring-4 focus:ring-blue-800 */
}

/* --- Responsive Styles for Chart --- */
@media (min-width: 640px) {

    /* sm breakpoint */
    .chart-header {
        flex-direction: row;
        align-items: center;
    }



    #filterForm .grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* sm:grid-cols-2 */
    }
}

@media (min-width: 768px) {

    /* md breakpoint */
    #filterForm .grid-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* md:grid-cols-4 */
    }
}

/* =========================================
   PERBAIKI BLOK CSS ANDA SEPERTI INI
 =========================================
*/

/* * Aturan untuk form Perkembangan (Kartu 2) 
*/
#filterPerkembanganForm .grid-container {
    /**
     * ▼ TAMBAHKAN/PASTIKAN ADA BARIS INI ▼
     * Ini untuk mengalahkan 'display: flex' yang bocor
     */
    display: grid;

    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* 1 kolom di HP */
    gap: 1rem;
}

/* * Di layar 640px atau lebih lebar
*/
@media (min-width: 640px) {
    #filterPerkembanganForm .grid-container {
        /* Paksa 2 kolom SAMA RATA */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Halaman Dashboard / Grafik Perkembangan Unit --- */
.chart-selector-group {
    margin-bottom: 1.5rem;
    /* mb-6 */
    max-width: 24rem;
    /* max-w-sm */
}

.selector-label {
    display: block;
    margin-bottom: 0.5rem;
    /* mb-2 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    color: #d1d5db;
    /* text-gray-300 */
}

.loading-indicator,
.no-data-message {
    text-align: center;
    /* text-center */
    padding-top: 2.5rem;
    /* py-10 */
    padding-bottom: 2.5rem;
    /* py-10 */
    color: var(--text-secondary);
    /* text-gray-500 or text-gray-400 */
}

.loading-indicator i,
.no-data-message i {
    font-size: 2.25rem;
    /* text-4xl */
}

.loading-indicator p {
    margin-top: 0.5rem;
    /* mt-2 */
}

.no-data-message i {
    margin-bottom: 0.75rem;
    /* mb-3 */
}

/* Helper class untuk menyembunyikan elemen */
.hidden {
    display: none;
}

/* --- Halaman Statistik (Tabs & Tables) --- */

/* Navigasi Tab */
.tabs-navigation {
    margin-bottom: 1.5rem;
    /* mb-6 */
    display: flex;
    justify-content: center;
    /* justify-center */
    flex-wrap: wrap;
    /* flex-wrap */
    gap: 0.5rem;
    /* gap-2 */
    border-bottom: 1px solid var(--border-color);
    /* border-b border-gray-700 */
    padding-bottom: 1rem;
    /* pb-4 */
}



/* Kontainer dan Filter di dalam Tab */
.stats-card {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    overflow: hidden;
}


.table-container {
    /* BIARKAN padding ini (ini sudah benar untuk memberi jarak) */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;

}


.stats-table .table-header {
    font-size: 0.75rem;
    color: #ffffff;
    /* Anda bisa ganti ini ke var(--text-secondary) jika ada */
    text-transform: uppercase;
    color: var(--header-text-color);
    /* Contoh: mungkin var(--text-primary-on-accent) atau var(--text-secondary) */
    background-color: var(--accent);
    /* Anda bisa ganti ini ke var(--bg-accent) jika ada */

    /* ✅ PERBAIKAN: Menggunakan Variabel CSS untuk mode terang/gelap */
    border-bottom: 1px solid var(--border-color);
}



.stats-table th.text-center,
.stats-table td.text-center {
    text-align: center;
}

.stats-table .table-body {
    border-top: 1px solid var(--border-color);
    /* divide-y divide-gray-700 */
}

.stats-table .table-body tr {
    border-bottom: 1px solid var(--border-color);
}

.stats-table .table-body tr:last-child {
    border-bottom: none;
}


/* Gantikan CSS .stats-table Anda yang lama dengan yang ini */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    /* Menyatukan border tabel */
    border-spacing: 0;
    /* ▼ TAMBAHKAN 4 BARIS INI ▼ */
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.75rem;
    /* Atur lengkungannya di sini */
    overflow: hidden;
    /* Ini memotong header & baris di dalamnya */

    border-spacing: 0;
}


/* Menghilangkan semua garis bawaan dan mengatur padding */
.stats-table th,
.stats-table td {
    border: none;
    padding: 1rem 1.5rem;
    /* HAPUS 'text-align: left;' DARI SINI */

}

/* Memberi garis bawah HANYA pada header */
.stats-table thead th {
    border-bottom: 1px solid #374151;
    /* Warna abu-abu gelap (sesuaikan jika perlu) */
}

/* [KUNCI UTAMA] Menambahkan garis bawah untuk setiap baris di body tabel */
.stats-table tbody tr {
    border-bottom: 1px solid #2d3748;
    /* Garis pemisah antar baris. Ganti warnanya jika perlu */
}

/* [PENTING] Menghilangkan garis bawah pada baris terakhir agar terlihat rapi */
.stats-table tbody tr:last-child {
    border-bottom: none;
}

/* Menjaga agar sel yang butuh rata tengah tetap di tengah */
.stats-table .text-center {
    text-align: center;
}

/* Kolom yang bisa di-sort */
.sortable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sortable:hover {
    background-color: var(--hover-bg);
    /* bg-gray-700 */
}

/* Paginasi */
.pagination-container {
    padding: 1.5rem;
    /* p-6 */
    border-top: 1px solid var(--border-color);
    color: white;
    /* border-t border-gray-700 */
}


/* --- Statistik ISO Page --- */
/* Menggunakan prefix 'sm-' untuk 'Statistik Mutu' agar tidak bentrok */

/* 2. Wadah/Grup Tab (Pastikan ID "sm-tab-nav" ada di HTML) */
#sm-tab-nav {
    display: inline-flex;
    position: relative;
    background-color: var(--bg-secondary);
    /* Latar belakang grup */
    border-radius: 0.625rem;
    /* 10px */
    padding: 1rem;
    padding-bottom: 1rem;
    /* 4px */
    margin-bottom: 1.5rem;
    /* Jarak ke konten di bawahnya */
}

/* 3. Tombol Tab (Teks-nya) */
.sm-tab-button {
    padding: 0.75rem 1.75rem;
    /* Sesuaikan lebar di sini */
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    /* 8px */
    transition: color 0.3s ease;
    cursor: pointer;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    /* Teks tidak aktif (abu-abu) */
    position: relative;
    z-index: 1;
    /* Di atas slider */
    text-align: center;
    /* Men-senterkan teks */
}

/* 4. Hover */
.sm-tab-button:hover {
    color: var(--text-primary);
    /* Teks jadi lebih jelas */
}

/* 5. Tombol Aktif (Teks-nya) */
.sm-tab-button.active {
    color: var(--header-text-color, #ffffff);
    /* Teks jadi PUTIH */
}

/* 6. Indikator/Slider Biru */
.sm-tab-indicator {
    position: absolute;
    z-index: 0;
    /* Di belakang teks */
    top: 0.25rem;
    /* Sesuaikan dgn padding wadah */
    height: calc(100% - 0.5rem);
    /* (100% - 8px) */
    background-color: var(--accents);
    /* Warna biru */
    border-radius: 0.5rem;
    /* 8px */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    /* Efek geser */
}

/* Style untuk header tabel yang bisa di-sort */
.sm-sortable:hover {
    background-color: var(--hover-bg);
    cursor: pointer;
}

/* Tombol aksi umum di halaman statistik */
.sm-action-button {
    background-color: var(--button-bg);
    text-decoration: none;
    color: var(--button-text-color);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
    border: none;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
}


.sm-action-button:hover {
    background-color: var(--button-hover-bg);
}

/* Tombol download dengan warna khusus */
.sm-action-button.sm-download-btn {
    background-color: var(--success-color);
    color: var(--accent-text-color);
    /* Teks putih kontras */
}

.sm-action-button.sm-download-btn:hover {
    background-color: var(--success-hover-color);
}


/* Kontainer utama halaman */
.download-center-container {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.download-center-container p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Grup untuk semua item accordion */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Setiap item accordion (Unit Kerja) */
.accordion-item {
    background-color: var(--bg-tertiary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

/* Tombol untuk membuka/menutup accordion */
.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.accordion-trigger:hover {
    background-color: var(--hover-bg);
}

.accordion-trigger .accordion-title {
    display: flex;
    align-items: center;
}

.accordion-trigger .accordion-title .fa-university {
    margin-right: 0.75rem;
    color: var(--text-secondary);
}

.accordion-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.3s ease-in-out;
}

/* Konten di dalam accordion yang bisa disembunyikan */
.accordion-panel {
    padding: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Timeline untuk daftar laporan per tahun */
.report-timeline {
    padding-left: 1rem;
    border-left: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Link untuk setiap file laporan */
.report-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.report-link:hover {
    background-color: var(--hover-bg);
}

.report-link .report-details p {
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.report-link .report-details small {
    color: var(--text-secondary);
}

.report-link .report-download-badge {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--link-text);
}

.report-download-badge .fa-download {
    margin-right: 0.5rem;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Pesan saat tidak ada data */
.no-data-placeholder {
    text-align: center;
    padding: 2.5rem 0;
}

.no-data-placeholder .fa-folder-open {
    font-size: 2.25rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* --- Halaman Arsip Pengguna (User Archive Page) --- */

.archive-container {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
}

.archive-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.archive-header h3 {
    font-size: 1.125rem;
    g: 600;
    color: var(--text-primary);
}

.archive-header p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.archive-body {
    padding: 1.5rem;
}

.archive-year-group {
    margin-bottom: 2rem;
}

.archive-year-group:last-child {
    margin-bottom: 0;
}

.archive-year-group h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.archive-year-group hr {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border-color: var(--border-color);
}

.archive-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.archive-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.archive-item-link:hover {
    background-color: var(--hover-bg);
}

.archive-item-content {
    display: flex;
    align-items: center;
}

.archive-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--icon-bg);
    color: var(--icon-text);
    border-radius: 0.5rem;
    margin-right: 1rem;
}

.archive-item-details p {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.archive-item-details small {
    color: var(--text-secondary);
}

/* Tombol download ini sudah biru, jadi tidak perlu diubah */
.archive-download-button {
    color: #fff;
    background-color: #2563eb;
    font-weight: 500;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease-in-out;
}

.archive-item-link:hover .archive-download-button {
    background-color: #1d4ed8;
}

/* Alert style for "no data" message */
.alert-info-styled {
    display: flex;
    align-items: center;
    padding: 1rem;
    font-size: 0.875rem;
    color: #93c5fd;
    /* text-blue-300 */
    border: 1px solid rgba(59, 130, 246, 0.5);
    /* border-blue-500/50 */
    border-radius: 0.5rem;
    background-color: rgba(59, 130, 246, 0.1);
    /* bg-blue-500/10 */
}

.alert-info-styled .fa-info-circle {
    margin-right: 0.75rem;
}

.alert-info-styled .font-medium {
    font-weight: 500;
    margin-right: 0.25rem;
}

/* --- Halaman Filter & Tabel Dinamis (GKM) --- */

/* ================================================= */
/* === KARTU FILTER ADAPTIF (LIGHT & DARK MODE) ===  */
/* ================================================= */

/* 1. Card untuk filter */
.filter-card {
    border-radius: 0.75rem;
    /* rounded-xl */
    padding: 1.5rem;
    margin-bottom: 1.5rem;

    /* === Mode Terang (Default) === */
    /* Menggunakan variabel :root Anda */
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */
}

/* === Mode Gelap === */
[data-theme="dark"] .filter-card {
    background-color: #1f2937;
    /* bg-gray-800 */
    border-color: #374151;
    /* Border gelap */
}

/* 2. Judul "Filter Analisis" */
.filter-card h3 {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    /* Dari HTML Anda */

    /* === Mode Terang (Default) === */
    color: var(--text-primary, #1f2937);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    /* Garis terang */
}

/* === Mode Gelap === */
[data-theme="dark"] .filter-card h3 {
    color: #fff;
    border-bottom-color: #374151;
    /* Garis gelap (dari HTML Anda) */
}

/* ================================================= */
/* === FORM STYLING (SUDAH ADAPTIF) ===              */
/* ================================================= */

.form-grid {
    display: grid;
    /* padding: 1rem; */
    /* Padding sudah ada di .filter-card */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

/* Media query Anda (ini sudah benar) */
@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.align-end {
    justify-content: flex-end;
}

/* ================================================= */
/* === FORM SELECT & BUTTON (ADAPTIF) ===            */
/* ================================================= */

/* 4. Dropdown (Semua Tahun, Periode, Unit) */
.form-select {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 0.375rem;
    /* 6px */
    border: 1px solid;
    transition: all 0.2s ease-in-out;
    font-size: 0.9em;

    /* Mode Terang (Default) */
    background-color: var(--bg-secondary, #ffffff);
    color: var(--text-primary, #1f2937);
    border-color: var(--border-color, #e5e7eb);
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-color, #3b82f6);
}

/* Mode Gelap */
[data-theme="dark"] .form-select {
    background-color: #374151;
    /* Latar gelap dari screenshot */
    color: #e5e7eb;
    border-color: #4b5563;
}

/* 5. Tombol Filter (Biru Aksen) */
.filter-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    border-radius: 0.375rem;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;

    /* Warna Biru Aksen (Sama di kedua mode) */
    background-color: var(--accent-color, #3B82F6);
    color: var(--accent-text-color, #ffffff);
}

.filter-submit-btn:hover {
    background-color: #2563EB;
    /* Varian accent lebih gelap */
}


.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    color: #d1d5db;
    /* text-gray-300 */
}


.form-select:focus {
    outline: none;
    border-color: #3b82f6;
    /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    /* focus:ring-blue-500 */
}

/* Menggunakan kembali .sm-action-button untuk konsistensi */
.filter-submit-btn {
    width: 100%;
    padding: 0.625rem 1.25rem;
    background-color: #2563eb;
    /* bg-blue-600 */
    color: #fff;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

.filter-submit-btn:hover {
    background-color: #1d4ed8;
}

/* Indikator Loading & Pesan Status */
.loading-indicator {
    text-align: center;
    padding: 2.5rem 0;
}

.loading-indicator .fa-spinner {
    font-size: 2.25rem;
    color: #6b7280;
}

.loading-indicator p {
    margin-top: 0.5rem;
    color: #9ca3af;
}

.status-message {
    background-color: #1f2937;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
}

.status-message.error {
    color: #f87171;
}

/* --- BASE STYLE (Ukuran & Bentuk) --- */
.status-badge {
    padding: 0.25rem 0.75rem;
    /* Sedikit dilebarkan agar lebih rapi */
    font-size: 0.75rem;
    font-weight: 600;
    /* Ditebalkan sedikit agar lebih jelas */
    border-radius: 9999px;
    display: inline-block;
    /* Agar padding berfungsi sempurna */
}

/* --- MODE TERANG (DEFAULT) --- 
   PERBAIKAN: Menggunakan warna SOLID (Pekat) dengan teks PUTIH 
   agar kontras tinggi dan angka terbaca sangat jelas. */

/* Hijau (Success) - Saat data ada */
.status-badge-success {
    background-color: #16a34a !important;
    /* Hijau Daun Pekat */
    color: #ffffff !important;
    /* Teks Putih Bersih */
}

/* Merah (Danger) - Saat ada error */
.status-badge-danger {
    background-color: #dc2626 !important;
    /* Merah Cabai Pekat */
    color: #ffffff !important;
    /* Teks Putih Bersih */
}

/* Abu-abu (Default) - Saat data kosong */
.status-badge-default {
    background-color: #e5e9f0 !important;
    /* Abu-abu Tua Pekat */
    color: #0c0a0a !important;
    /* Teks Putih Bersih */
}


/* --- MODE GELAP (DARK MODE) --- 
   Tidak perlu diubah karena gaya neon/transparan sudah paling cocok untuk background hitam.
   Kode di bawah ini otomatis aktif saat browser mendeteksi mode gelap.
*/

@media (prefers-color-scheme: dark) {
    .status-badge-success {
        background-color: rgba(74, 222, 81, 0.2) !important;
        color: #58ce58 !important;
        /* Hijau Neon */
        border: 1px solid rgba(74, 222, 74, 0.3);
        /* Tambah garis tepi tipis biar makin jelas */
    }

    .status-badge-danger {
        background-color: rgba(222, 91, 74, 0.534) !important;
        color: #f55555 !important;
        /* Merah Muda Neon */
        border: 1px solid rgba(222, 91, 74, 0.603);
    }

    .status-badge-default {
        background-color: rgba(255, 255, 255, 0.459) !important;
        color: #32373da6 !important;
        /* Abu-abu Terang */
        border: 1px solid rgba(107, 114, 128, 0.3);
    }
}

/* Tambahan: Support untuk class manual ".dark" atau ".dark-mode" pada template */
.dark .status-badge-success,
.dark-mode .status-badge-success {
    background-color: rgba(74, 222, 128, 0.2) !important;
    color: #86efac !important;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.dark .status-badge-danger,
.dark-mode .status-badge-danger {
    background-color: rgba(222, 91, 74, 0.2) !important;
    color: #f74a4a !important;
    border: 1px solid rgba(222, 91, 74, 0.3);
}

.dark .status-badge-default,
.dark-mode .status-badge-default {
    background-color: rgba(107, 114, 128, 0.2) !important;
    color: #d1d5db !important;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Paginasi */
.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pagination-item {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.pagination-link {
    text-decoration: none;
    color: #d1d5db;
    background-color: rgba(55, 65, 81, 0.5);
    transition: background-color 0.2s;
}

.pagination-link:hover {
    background-color: #4b5563;
}

.pagination-item.active {
    font-weight: 700;
    color: #fff;
    background-color: #2563eb;
}

.stats-table tbody td {
    vertical-align: top;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;

    /* ✅ PERBAIKAN: Menggunakan Variabel CSS untuk mode terang/gelap */
    border-bottom: 1px solid var(--border-color);
}

.pagination-item.disabled {
    color: #6b7280;
    background-color: #1f2937;
    cursor: not-allowed;
}

.sm-action-button.sm-export-btn {
    background-color: #159443fa;
    color: #ffffff;
}

.sm-action-button.sm-export-btn:hover {
    background-color: #15803d;
}

.sm-action-button.sm-validasi-btn {
    background-color: #19aa4e00;
    color: #15bb06;
}

.sm-action-button.sm-validasi-btn:hover {
    background-color: #15803d;
}

.sm-action-button.sm-revisi-btn {
    background-color: #b4aa1e00;
    color: #a78e00;
}

.sm-action-button.sm-revisi-btn:hover {
    background-color: #7e8015;
}

/* Card untuk header informasi dan tombol aksi */
.detail-header-card {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .detail-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.detail-actions-bar {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Tombol Biru (Tambah) tidak perlu diubah, asumsi warnanya sama */
.sm-action-button.sm-add-btn {
    background-color: #2563eb;
}

.sm-action-button.sm-add-btn:hover {
    background-color: #1d4ed8;
}

/* Tombol Abu-abu (Template) sekarang menggunakan variabel */
.sm-action-button.sm-template-btn {
    background-color: var(--template-btn-bg);
    color: var(--template-btn-text);
}

.sm-action-button.sm-template-btn:hover {
    background-color: var(--template-btn-bg-hover);
}

.stats-table th {
    vertical-align: middle;
}

/* Link Aksi di dalam tabel (Edit/Hapus) */
.table-action-link-edit {
    padding: 0.5rem;
    color: #facc15;
    transition: color 0.2s;
}

.table-action-link-edit:hover {
    color: #fde047;
}

.table-action-link-delete {
    padding: 0.5rem;
    color: #ef4444;
    transition: color 0.2s;
}

.table-action-link-delete:hover {
    color: #f87171;
}



/* 1. Mengatur Overlay Modal (Latar Belakang Gelap) */
.modal-overlay {
    position: fixed;
    /* Muncul di atas segalanya (termasuk sidebar) */
    z-index: 5000;
    top: 0;
    left: 0;
    width: 100vw;
    /* Lebar penuh viewport */
    height: 100vh;
    /* Tinggi penuh viewport */
    background-color: rgba(0, 0, 0, 0.75);
    /* Latar belakang hitam transparan */

    /* Trik untuk menengahkan konten */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Transisi halus */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out;
}

/* Status 'hidden' untuk modal */
.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 2. Mengatur Konten Modal (Kotak Putih/Gelap) */
.modal-content {
    position: relative;
    /* Penting untuk tombol close */
    padding: 1rem;
    border-radius: 8px;

    /* Mengambil warna dari variabel tema Anda */
    background-color: var(--card-bg-color, #ffffff);

    /* INI PENTING: Membatasi ukuran kotak */
    max-width: 95vw;
    /* Maksimal 95% lebar layar */
    max-height: 95vh;
    /* Maksimal 95% tinggi layar */

    /* Memastikan konten (gambar) juga ikut di-tengah-kan */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Mengatur Gambar di Dalam Modal (SOLUSI UTAMA) */
#sm_modal_img {
    /* INI PENTING: Memaksa gambar mengecil agar pas */
    object-fit: contain;

    /* Membatasi ukuran gambar agar pas di dalam .modal-content */
    max-width: 100%;
    max-height: 100%;

    /* Perkiraan untuk layar yang sangat besar, 
           jaga agar tidak lebih tinggi dari viewport */
    max-height: 90vh;
}

/* 4. Tombol Close (X) */
.modal-close-btn {
    position: absolute;
    top: -15px;
    /* Sedikit di luar kotak */
    right: -15px;
    /* Sedikit di luar kotak */
    z-index: 5010;
    /* Di atas konten modal */

    /* Tampilan Tombol */
    background-color: #EF4444;
    /* Merah */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-close-btn:hover {
    background-color: #DC2626;
    /* Merah lebih gelap */
}


.table-actions-container {
    padding: 0.5rem 1rem 1rem 1rem;
    border-bottom: 1px solid var(--border-color, #374151);
    display: flex;
    justify-content: flex-end;
    /* Mengatur tombol ke kanan */
}

.action-button {
    background-color: var(--primary-color, #3B82F6);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.action-button:hover {
    background-color: var(--primary-hover-color, #2563EB);
}

.action-button i {
    margin-right: 0.5rem;
}


/* 1. Mengatur Overlay Modal (Latar Belakang Gelap) */
.gkm-modal-overlay {
    position: fixed;
    z-index: 5000;
    /* Muncul di atas segalanya */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out;
}

.gkm-modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 2. Mengatur Konten Modal (Kotak) */
.gkm-modal-content {
    position: relative;
    padding: 1rem;
    border-radius: 8px;
    /* Ambil warna dari kartu (akan diatur oleh JS, default putih) */
    background-color: var(--card-bg-color, #ffffff);
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Mengatur Gambar di Dalam Modal (SOLUSI UKURAN) */
#gkm_modal_img {
    object-fit: contain;
    /* Paksa gambar mengecil agar pas */
    max-width: 100%;
    max-height: 100%;
    max-height: 90vh;
    /* Batas tinggi */
}

/* 4. Tombol Close (X) */
.gkm-modal-close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 5010;
    background-color: #EF4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gkm-modal-close-btn:hover {
    background-color: #DC2626;
}


/* ================================================= */
/* === CONTAINER RATA-RATA KESELURUHAN (STATISTIK) === */
/* ================================================= */

/* ================================================= */
/* === CONTAINER RATA-RATA KESELURUHAN (STATISTIK) === */
/* ================================================= */

.overall-average-container {
    /* 1. Menggunakan Flexbox */
    display: flex;

    /* 2. Mengubah arah menjadi vertikal (menumpuk) */
    flex-direction: column;

    /* 3. Menjadikan RATA TENGAH (Horizontal) */
    align-items: center;

    /* 4. Memberi jarak antara teks dan angka */
    gap: 0.25rem;
    /* 4px, bisa Anda ubah */

    /* Style yang sudah ada (tetap sama) */
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Teks "Rata-rata..." */
.overall-average-container strong {
    font-weight: 600;
    /* Warna otomatis diambil dari 'color' di atas */
}

/* Menimpa style jika 'font-bold' tidak berfungsi */
.overall-average-container span {
    font-weight: 700 !important;
    /* 700 adalah nilai untuk 'bold' */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #374151;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    /* Mencegah header menyusut */
}

.modal-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}




.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
    border-top: 1px solid #374151;
    padding-top: 1rem;
}

.modal-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-button.cancel {
    color: #d1d5db;
    background-color: #4b5563;
}

.modal-button.cancel:hover {
    background-color: #6b7280;
}

.modal-button.submit-revisi {
    color: #000;
    background-color: #facc15;
    /* bg-yellow-400 */
}

.modal-button.submit-revisi:hover {
    background-color: #fde047;
}


/* --- Styling untuk Paginasi Bawaan CodeIgniter 4 --- */
.pagination-nav nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-nav ul.pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-nav .page-item a,
.pagination-nav .page-item span {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #d1d5db;
    background-color: rgba(55, 65, 81, 0.5);
    transition: background-color 0.2s;
}

.pagination-nav .page-item a:hover {
    background-color: #4b5563;
}

.pagination-nav .page-item.active a,
.pagination-nav .page-item.active span {
    font-weight: 700;
    color: #fff;
    background-color: #2563eb;
}

.pagination-nav .page-item.disabled span {
    color: #6b7280;
    background-color: #1f2937;
    cursor: not-allowed;
}

/* --- Varian Badge Status Tambahan --- */
.status-badge-warning {
    background-color: rgba(240, 155, 9, 0.5);
    color: #000000;
}

.status-badge-info {
    background-color: rgba(59, 131, 246, 0.308);
    color: #f5eb57;
}

/* --- Halaman Detail Sasaran Mutu (Tambahan) --- */
/* Card untuk form import */
.import-card {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.import-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.import-form-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .import-form-layout {
        flex-direction: row;
        align-items: center;
    }
}


.import-form-layout .sm-action-button {
    width: 100%;
}

@media (min-width: 640px) {
    .import-form-layout .sm-action-button {
        width: auto;
        flex-shrink: 0;
    }
}

.import-card small {
    margin-top: 0.5rem;
    display: block;
    color: var(--text-secondary);
}

/* Styling untuk list di dalam sel tabel agar rapi */
.stats-table td ul.list-disc {
    padding-left: 1.25rem;
    /* Memberi indentasi */
    margin: 0;
}

.stats-table td ul.list-disc li {
    margin-bottom: 0.25rem;
}

.stats-table td ul.list-disc li:last-child {
    margin-bottom: 0;
}

/* --- Komponen Halaman Pengguna (Tambahan) --- */

/* Varian Alert/Notifikasi Pesan */
.alert {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.alert-icon {
    margin-right: 0.75rem;
    font-size: 1.25rem;
    /* Ukuran ikon lebih besar */
}

.alert-content {
    flex-grow: 1;
}

.alert-content .alert-title {
    font-weight: 600;
}

.alert-success {
    color: #86efac;
    /* text-green-300 */
    background-color: rgba(74, 222, 128, 0.1);
    /* bg-green-500/10 */
    border-color: rgba(74, 222, 128, 0.5);
    /* border-green-500/50 */
}

.alert-danger {
    color: #f87171;
    /* text-red-300 */
    background-color: rgba(239, 68, 68, 0.1);
    /* bg-red-500/10 */
    border-color: rgba(239, 68, 68, 0.5);
    /* border-red-500/50 */
}

.alert-danger ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
}

/* 2. Gunakan variabel pada style Anda */
.info-summary-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    /* Tambahkan border agar terlihat di mode terang */
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s, border-color 0.3s;
    /* Transisi halus (opsional) */
}

.info-summary-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .info-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .info-summary-grid {
        /* --- PERUBAHAN DI SINI --- */
        /* Mengganti '1fr' (merentang) menjadi 'auto' (sesuai konten) */
        grid-template-columns: repeat(4, auto);
    }
}

/* --- PERUBAHAN DIMULAI DI SINI --- */

/* 1. Gunakan flexbox untuk membuat item sejajar */
.info-summary-item {
    display: flex;
    align-items: baseline;
    /* Meratakan baseline teks */
    gap: 0.4rem;
    /* Memberi jarak antara label dan nilai */
    flex-wrap: wrap;
    /* Memastikan teks bisa wrap jika terlalu panjang */
}

.info-summary-item dt {
    font-weight: 500;
    color: var(--text-secondary);
    /* Gunakan variabel */
    transition: color 0.3s;
    /* Transisi halus (opsional) */
}

/* 2. Tambahkan titik dua (:) setelah label */
.info-summary-item dt::after {
    content: ":";
}

.info-summary-item dd {
    margin-top: 0;
    /* 3. Hapus margin-top agar sejajar */
    color: var(--text-primary);
    /* Gunakan variabel */
    font-weight: 600;
    transition: color 0.3s;
    /* Transisi halus (opsional) */
}

/* --- PERUBAHAN SELESAI --- */
/* Dropdown Aksi (Alpine.js) */
.action-dropdown {
    position: relative;
    display: inline-block;
    text-align: left;
}

.action-dropdown-button {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #4b5563;
    /* border-gray-600 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    background-color: #374151;
    /* bg-gray-700 */
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.action-dropdown-button:hover {
    background-color: #4b5563;
    /* hover:bg-gray-600 */
}

.action-dropdown-menu {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    width: 14rem;
    origin: top right;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background-color: #374151;
    border: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.action-dropdown-menu .py-1 {
    padding: 0.25rem 0;
    border-bottom: 1px solid #4b5563;
}

.action-dropdown-menu .py-1:last-child {
    border-bottom: none;
}

.action-dropdown-menu button,
.action-dropdown-menu a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #d1d5db;
}


.action-dropdown-menu button:hover,
.action-dropdown-menu a:hover {
    background-color: #4b5563;
}

.action-dropdown-menu .text-green-300 {
    color: #86efac;
}

.action-dropdown-menu .text-yellow-300 {
    color: #fcd34d;
}

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

/* --- Tambahan untuk Halaman User Sasaran Mutu --- */
.actions-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Base style untuk tombol aksi */
.sm-action-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
}

.sm-action-button .mr-2 {
    margin-right: 0.5rem;
}

.sm-action-button.teal {
    background-color: #0d9488;
}

.sm-action-button.teal:hover {
    background-color: #0f766e;
}

.sm-action-button.sky {
    background-color: #0284c7;
}

.sm-action-button.sky:hover {
    background-color: #0369a1;
}

.sm-action-button.teale {
    background-color: #0d3c94;
}

.sm-action-button.teale:hover {
    background-color: #0f2776;
}

/* --- Form Layout & Input Styling --- */

.form-card {
    max-width: 64rem;
    /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    background-color: #1f2937;
    /* bg-gray-800 */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.form-header {
    border-bottom: 1px solid #374151;
    /* border-gray-700 */
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.form-header h3 {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;

}

.form-info-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;

}

@media (min-width: 768px) {
    .form-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.form-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* space-y-6 */
}

.form-grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .form-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}



/* Menambahkan kembali panah dropdown khusus untuk select */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    /* Memberi ruang untuk panah */
}




.form-preview-box {
    background-color: rgba(17, 24, 39, 0.5);
    /* bg-gray-900/50 */
    color: #fff;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    width: 100%;
    padding: 0.625rem;
    min-height: 42px;
    /* h-[42px] */
    display: flex;
    align-items: center;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    /* space-x-4 */
    margin-top: 2rem;
}

/* --- Tambahan untuk Form Pengguna --- */

.form-group.checkbox-group .form-label {
    margin-bottom: 0.75rem;
}

.checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* space-y-3 */
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.form-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    background-color: #374151;
    border: 1px solid #4b5563;
    color: #3b82f6;
    /* Warna centang */
    transition: background-color 0.2s, border-color 0.2s;
}

.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.form-checkbox+label {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
}

.form-card-footer {
    padding: 1.5rem;
    background-color: #1f2937;
    /* bg-gray-800 */
    border-top: 1px solid #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Tambahan untuk Form Edit Pengguna --- */

.form-readonly-section {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.form-readonly-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.form-readonly-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.readonly-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
}

.readonly-item label {
    font-weight: 500;
    color: var(--text-secondary);
}

.readonly-item p {
    color: var(--text-primary);
    white-space: pre-wrap;
    /* Agar baris baru dihormati */
}

/* --- Komponen Halaman Pengguna (Tambahan) --- */

/* Varian Alert/Notifikasi Pesan */
.alert {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.alert-icon {
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

.alert-content .alert-title {
    font-weight: 600;
}

.alert-success {
    color: #86efac;
    background-color: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.5);
}

.alert-danger {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.5);
}

.alert-warning {
    color: #fcd34d;
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.5);
}

.alert-danger ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
}

/* Dropdown Aksi (Alpine.js) */




/* --- [FINAL] Styling for Custom Pagination View --- */

/* Re-using .pagination-nav as the main container */
.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .pagination-container {
        flex-direction: row;
        justify-content: space-between;
    }
}

.pagination-summary {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.pagination-list {
    display: inline-flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 0.5rem;
    /* Rounded corners for the group */
    overflow: hidden;
    /* Ensures corners are applied */
    border: 1px solid var(--border-color);
}

.pagination-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    height: 2rem;
    /* 32px */
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    transition: background-color 0.2s, color 0.2s;
}

.pagination-list li:first-child a {
    border-left: none;
}

.pagination-list li a:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.pagination-list li a.active {
    z-index: 1;
    color: var(--accent-text-color);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

html.dark .pagination-list {
    border-color: #4b5563;
}

html.dark .pagination-list li a {
    color: #d1d5db;
    background-color: #374151;
    border-left-color: #4b5563;
}

html.dark .pagination-list li a:hover {
    background-color: #4b5563;
    color: #fff;
}

html.dark .pagination-list li a.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* --- Halaman Notifikasi --- */

.notification-page-container {
    max-width: 56rem;
    /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem;
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: 700;
    color: var(--text-primary);
}

.page-header p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Daftar Notifikasi --- */
.notification-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* space-y-4 */
}

.notification-item {
    display: block;
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease-in-out;
    background-color: var(--bg-secondary);
}

.notification-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.notification-item.unread {
    background-color: #eff6ff;
    /* bg-blue-50 */
    border-left: 4px solid var(--accent-color);
}

html.dark .notification-item.unread {
    background-color: rgba(59, 130, 246, 0.15);
    /* dark:bg-blue-900/20 */
}

.notification-item-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.notification-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 1.125rem;
}

/* Varian warna ikon notifikasi */
.notification-icon.info {
    background-color: #dbeafe;
    color: #3b82f6;
}

.notification-icon.revisi {
    background-color: #fef3c7;
    color: #f59e0b;
}

.notification-icon.valid {
    background-color: #dcfce7;
    color: #22c55e;
}

html.dark .notification-icon.info {
    background-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

html.dark .notification-icon.revisi {
    background-color: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

html.dark .notification-icon.valid {
    background-color: rgba(74, 222, 128, 0.25);
    color: #86efac;
}


.notification-details {
    flex-grow: 1;
    min-width: 0;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 1rem;
}

.notification-message {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Kondisi Kosong (Empty State) --- */
.empty-state-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 3rem;
    text-align: center;
}

.empty-state-icon {
    margin: 0 auto 1rem;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hover-bg);
    border-radius: 9999px;
}

.empty-state-icon .fas {
    font-size: 1.5rem;
    color: #9ca3af;
}

.empty-state-card h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.empty-state-card p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Halaman "Coming Soon" --- */

.coming-soon-container {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: background-image 1s ease-in-out;
}

.coming-soon-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.glass-container {
    position: relative;
    width: 100%;
    max-width: 32rem;
    /* max-w-lg */
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    /* rounded-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 3rem;
    color: #fff;
    text-align: center;
}

.glass-container .icon {
    font-size: 3.75rem;
    /* text-6xl */
    margin-bottom: 1.5rem;
    color: #60a5fa;
    /* text-blue-400 */
}

.glass-container h1 {
    font-size: 3rem;
    /* text-5xl */
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.025em;
    /* tracking-tight */
}

.glass-container p {
    font-size: 1.125rem;
    /* text-lg */
    color: #d1d5db;
    /* text-gray-300 */
    margin-bottom: 2rem;
}

.glass-container .back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s;
}

.glass-container .back-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.coming-soon-footer {
    position: absolute;
    bottom: 1rem;
    text-align: center;
    width: 100%;
    font-size: 0.75rem;
    /* text-xs */
    color: #9ca3af;
    /* text-gray-400 */
}

/* Animasi */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}


.chart-action-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text-secondary);
    background-color: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.chart-action-button:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.chart-filter-bar {
    padding: 1.5rem;
    background-color: transparent(--hover-bg);
    border-bottom: 1px solid var(--border-color);
}



.chart-canvas-container {
    position: relative;
    height: 20vh;
    /* Default height */
}

.chart-canvasss-container {
    position: relative;
    overflow: hidden;
    height: 850px
        /* Default height */
}

.table-actions {
    display: flex;
    /* Menggunakan Flexbox */
    align-items: center;
    /* Membuat label dan tombol sejajar secara vertikal */
    gap: 0.75rem;
    /* Memberi jarak antar elemen (misal: antara "Unduh" dan tombol) */
    padding: 1rem;
    /* Memberi ruang di dalam kontainer */
}

/* Menghilangkan margin bawaan dari paragraf dan mengatur font */
.table-actions p {
    margin: 0;
    /* Menghapus margin default */
    font-size: 0.875rem;
    /* Ukuran font (14px) */
    font-weight: 500;
    /* Ketebalan font medium */
    color: #9CA3AF;
    /* Warna teks abu-abu agar tidak terlalu menonjol */
}


/* ================================================= */
/* === TOMBOL AKSI (EXCEL, PDF, DLL) ADAPTIF ===     */
/* ================================================= */

/* Gaya dasar untuk semua tombol */
.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-width: 1px;
    border-style: solid;

    /* === 1. Mode Terang (Default) === */
    /* Menggunakan variabel dari :root Anda */
    background-color: var(--button-bg, #e5e7eb);
    /* Latar abu-abu muda */
    color: var(--text-primary, #1f2937);
    /* Teks hitam */
    border-color: var(--border-color, #e5e7eb);
    /* Border abu-abu muda */
}

/* Gaya saat kursor berada di atas tombol (Mode Terang) */
.action-button:hover {
    background-color: #d1d5db;
    /* Latar menjadi sedikit lebih gelap */
    border-color: #d1d5db;
    color: var(--text-primary, #1f2937);
    /* Teks tetap hitam */
}

/* === 2. Mode Gelap === */
/* Ganti [data-theme="dark"] dengan selector mode gelap Anda */
[data-theme="dark"] .action-button {
    background-color: #374151;
    /* Warna latar belakang abu-abu gelap */
    color: #F9FAFB;
    /* Warna teks/ikon putih keabuan */
    border-color: #4B5563;
    /* Border tipis agar terlihat */
}

/* Gaya saat kursor berada di atas tombol (Mode Gelap) */
[data-theme="dark"] .action-button:hover {
    background-color: #4B5563;
    /* Latar belakang menjadi sedikit lebih terang */
    border-color: #6B7280;
    /* Border menjadi sedikit lebih terang */
    color: #FFFFFF;
    /* Teks/ikon menjadi putih solid */
}

/* Gaya khusus untuk tombol yang hanya berisi ikon (Aksi Diagram) */
.action-button i {
    font-size: 1rem;
    /* Sedikit memperbesar ukuran ikon (16px) */
}

/*
 * === GANTI SEMUA CSS TAB ANDA DENGAN INI ===
 */

/* * TAMBAHAN CSS UNTUK MEN-SENTERKAN GRUP TAB
 */
.tab-wrapper {
    width: 100%;
    text-align: center;
}

/* 1. Wadah/Grup Tab Utama */
.tabs-navigation {
    margin-bottom: 1.5rem;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    /* Penting untuk slider */

    /* ✅ Ini adalah background "putih" (di mode terang) */
    /* atau "abu-abu gelap" (di mode gelap) yang Anda minta */
    background-color: var(--bg-secondary);

    border-radius: 0.625rem;
    /* (10px) Membuat wadah rounded */
    padding: 1rem;
    /* (4px) Memberi jarak di dalam wadah */

    /* Hapus style lama jika ada */
    border-bottom: none;
    padding-bottom: 1rem;
    /* Sesuaikan dengan padding atas */
}

/* 2. Tombol Tab (Teks-nya) */
.main-tab-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    /* (8px) */
    transition: color 0.3s ease;
    cursor: pointer;


    /* Buat transparan agar slider terlihat */
    background-color: transparent;
    border: none;
    box-shadow: none;

    /* Teks tidak aktif (abu-abu) */
    color: var(--text-secondary), #2962FF;

    /* Pastikan teks ada di atas slider */
    position: relative;
    z-index: 1;
    text-align: center;
}

/* 3. Hover di tombol (tidak aktif) */
.main-tab-button:hover {
    color: var(--text-primary);
    /* Teks jadi jelas */
    background-color: transparent;
}

/* 4. Tombol yang AKTIF (Teks-nya) */
.main-tab-button.active {
    color: var(--header-text-color, #ffffff);
    /* Teks jadi PUTIH */
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* 5. Indikator/Slider Biru yang Bergeser */
.main-tab-indicator {
    position: absolute;
    z-index: 0;
    /* Di belakang tombol teks */

    /* Posisikan di dalam padding 0.25rem */
    top: 0.25rem;
    height: calc(100% - 0.5rem);
    /* (100% dikurangi 2x padding) */

    /* Ini adalah blok biru-nya */
    background-color: var(--accents);
    border-radius: 0.5rem;
    /* (8px) Samakan dengan tombol */

    /* Animasi geser */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    /* Lebar dan 'left' diatur oleh JavaScript */
}

/* Kode ini sudah benar, tidak perlu diubah */
.tab-content {
    display: block;
}

.tab-content.hidden {
    display: none;
}

/* --- Halaman Dashboard / Grafik Capaian --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === 1. Layout Grid Dashboard (Lebih Fleksibel) === */
.dashboard-grids {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;

    /* KUNCI: Membuat grid responsif secara otomatis.
       - Browser akan mengisi baris dengan kolom sebanyak mungkin.
       - Setiap kolom memiliki lebar minimal 320px.
       - Jika tidak muat, akan pindah ke baris baru secara otomatis. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}


/* === 2. Penataan Chart (Tidak ada perubahan besar, hanya merapikan) === */
.chart-title {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    /* Margin-bottom saja */
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.chart-content {
    margin-top: 1.5rem;
    /* Sedikit lebih besar untuk spasi */
}

.chart-container {
    height: 16rem;
    /* 256px */
    margin-top: 1.5rem;
    /* <-- TAMBAHKAN BARIS INI */
    position: relative;
    /* Penting untuk Chart.js */
}


/* === 3. Formulir Filter (Diubah menggunakan Flexbox agar lebih Robust) === */
.filter-form {
    display: flex;
    /* Mulai dengan tumpukan vertikal di mobile */
    flex-direction: column;
    gap: 1rem;
}

/* Terapkan layout horizontal di layar yang lebih besar */
@media (min-width: 768px) {
    .filter-form {
        flex-direction: row;
        /* Ubah ke baris */
        align-items: flex-end;
        /* Sejajarkan item di bagian bawah */
        flex-wrap: wrap;
        /* Izinkan item turun baris jika tidak muat */
    }

    /* Biarkan form-group tumbuh mengisi ruang */
    .filter-form .form-group {
        flex: 1 1 auto;
    }

    /* Beri lebar tetap untuk tombol */
    .filter-form button {
        flex-shrink: 0;
        /* Mencegah tombol menyusut */
    }
}


/* === 4. Penataan Elemen Form (Dengan Peningkatan UX) === */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
}

/* Gunakan nama class yang lebih spesifik untuk select */
.form-select {
    width: 100%;
    padding: 0.5rem;
    /* Sedikit lebih besar agar mudah diklik */
    background-color: var(--hover-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 0.5rem;
    /* Sudut lebih tumpul */
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Transisi halus */

    /* Menghilangkan tampilan default browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Tambahkan ikon panah dropdown kustom */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em;
    padding-right: 2.5rem;
    /* Beri ruang untuk panah */
}

/* Status Fokus untuk UX yang lebih baik */
.form-select:focus {
    outline: none;
    border-color: var(--accent-blue, #3b82f6);
    /* Ganti dengan warna aksen Anda */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* === TAB STYLES === */
.tab-container {
    margin-bottom: 1.5rem;

}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -1px;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.tab-btn:hover:not(.active) {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--tab-active-text);
    border-color: var(--tab-active-border);
    background-color: var(--tab-active-bg);
}

.tab-panel.hidden {
    display: none;
}

/* === TABLE STYLES === */
.table-card {
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.table-card-header {
    padding: 1.5rem;
}

.data-table thead th.sortable:hover {
    background-color: var(--hover-bg);
    cursor: pointer;
}


/* === PAGINATION STYLES === */
.table-pagination {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-pagination button {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.table-pagination button:hover:not(:disabled) {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.table-pagination button.active {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border-color: var(--accent-color);
}

.table-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}





/* Kartu khusus di dalam dashboard */
.dashboard-card {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.dashboard-card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-card-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-card-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}


.dashboard-card-footer {
    padding: 1.5rem;
    background-color: var(--hover-bg);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    /* Mendorong footer ke bawah */
}

.chart-placeholder {
    height: 200px;
    position: relative;
}

.doughnut-chart-container {
    height: 220px;
    width: 220px;
    position: center;
    margin: auto;
}


.dashboard-card-filter {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}


.form-grid .form-select {
    flex-grow: 1;
    /* Membuat select box mengisi ruang */
}

.card-body {
    padding: 1rem 1rem;
    /* Atas-Bawah: 32px, Kiri-Kanan: 24px */
}

.dashboard-card-body {
    padding: 1.5rem;
    /* <-- INI AKAN MENJADI 'jarak' Anda yang konsisten */
    flex-grow: 1;
    /* display: flex; <-- DIHAPUS */
    /* align-items: center; <-- DIHAPUS */
    /* justify-content: center; <-- DIHAPUS */
    min-height: 350px;
    position: relative;

    /* CATATAN: Karena sudah ada padding, Anda TIDAK PERLU 
       lagi 'mt-4' atau 'style="margin-top:..."' di HTML Anda. 
       Hapus itu agar tidak tumpang tindih. */
}

.dashboard-card-body.body-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Hapus padding agar bisa pas di tengah */
}

/* Helper untuk state di dalam card body */
.chart-state-message {
    text-align: center;
    color: var(--text-secondary);
}

.chart-state-message i {
    font-size: 2.5rem;
    /* 40px */
    margin-bottom: 0.75rem;
}




.card-header .m-0 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-color);
}

.card-header.text-center .m-0 {
    color: var(--text-primary);
}

.text-center {
    text-align: center;
}

.filter-form-wrapper {
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--border-color);
}

#filterFormKinerja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    align-items: center;
}

.form-control-sm {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: #fff;
}


/* Main Card Styling */
.chart-card {
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    padding: 1.5rem;
    /* Ensures child elements conform to border radius */
}


/* Header Styling */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #374151;
}


.chart-header-title p {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #9ca3af;
}



.charts-grid {
    display: flex;
    /* Menggunakan flexbox agar sejajar */
    justify-content: space-around;
    /* Memberi jarak yang merata */
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    /* Akan turun ke bawah jika layar terlalu kecil */
}

.sub-chart-card {
    text-align: center;
}

.chart-canvass-container {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 1rem auto 0 auto;
}

/* CSS BARU (SADAR TEMA) */
.chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #111827;
    /* <-- Warna mode terang (mis. abu-abu gelap) */
}

/* Otomatis berlaku jika <html> atau <body> punya class "dark" 
*/
.dark .chart-center-text {
    color: #ffffff;
    /* <-- Warna mode gelap (putih) */
}

.chart-center-text .value {
    font-size: 3rem;
    font-weight: bold;
}

.chart-center-text .label {
    font-size: 1rem;
    color: #9ca3af;
}

#loading-text {
    text-align: center;
    font-size: 1.25rem;
    padding: 2rem;
}

.hidden {
    display: none;
}



@media (max-width: 768px) {
    .charts-grid {
        grid-template-columns: fr;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* --- Components --- */
.tab-container {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tab-btn:hover:not(.active) {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.tab-btn.active {
    color: #93C5FD;
    border-color: var(--accent-color);
    background-color: rgba(59, 130, 246, 0.1);
}


.data-table {
    width: 100%;
    font-size: 0.875rem;
    text-align: left;
    color: var(--text-secondary);
    border-collapse: collapse;
}

.data-table thead {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #d1d5db;
    background-color: rgba(55, 65, 81, 0.5);
}

.data-table th,
.data-table td {
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr:last-of-type {
    border-bottom: none;
}


.data-table .text-center {
    text-align: center;
}

.data-table .font-semibold {
    font-weight: 600;
    color: var(--text-primary);
}

.data-table a {
    color: #60a5fa;
    text-decoration: none;
}

.data-table a:hover {
    text-decoration: underline;
}

.data-table .total-row {
    background-color: rgba(55, 65, 81, 0.5);
}

.data-table .total-row td {
    font-weight: 600;
    color: var(--text-primary);
}

.chart-grid-container {
    display: grid;
    /* Mengaktifkan layout grid */
    grid-template-columns: 1fr 1fr;
    /* Membuat 2 kolom dengan lebar yang sama */
    gap: 1.5rem;
    /* Memberi jarak antar kolom dan baris */
}

/* Tambahkan ini di bawah kode CSS sebelumnya */
@media (max-width: 768px) {
    .chart-grid-container {
        grid-template-columns: 1fr;
        /* Ubah menjadi 1 kolom di layar kecil */
    }
}

/* === PROFILE PAGE STYLES === */
/* === GLOBAL BODY STYLES (Tambahkan ini) === */



/* === PROFILE PAGE STYLES === */

.profile-container {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    /* Tambahkan padding agar tidak terlalu mepet ke tepi halaman */
}

.profile-card {
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    /* Menggunakan variabel untuk bayangan */
    box-shadow: var(--card-shadow);
    /* DIUBAH */
    overflow: hidden;
}

.profile-card-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    /* Warna teks header juga mengikuti primary text */
    color: var(--text-primary);
    /* DIUBAH */
    font-weight: 600;
    /* Sedikit lebih tebal */
    font-size: 1.125rem;
    /* Ukuran teks yang sedikit lebih besar */
}

.profile-card-body {
    padding: 1.5rem;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

/* On screens 640px and wider */
@media (min-width: 640px) {
    .profile-details-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

.detail-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.detail-value {
    margin-top: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* === BADGE & BUTTON STYLES === */
.status-badge-active {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    background-color: var(--status-bg);
    color: var(--status-text);
    /* Tambahkan border 1px yang sangat tipis untuk definisi lebih baik di light mode */
    border: 1px solid rgba(6, 95, 70, 0.1);
    /* green-700 dengan transparansi */
}

.btn-warning {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--btn-warning-bg);
    color: var(--btn-warning-text);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
    border: none;
}

.btn-warning:hover {
    background-color: var(--btn-warning-bg-hover);
}

/* === ALERT BOX STYLES === */
.alert-box-info {
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--alert-text);
    border: 1px solid var(--alert-border);
    border-radius: 0.5rem;
    background-color: var(--alert-bg);
}

.alert-box-info .fa-fw {
    width: 1.25em;
    text-align: center;
    /* Ubah warna ikon agar sesuai dengan teks alert */
    color: var(--alert-text);
    /* DIUBAH */
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.space-y-1> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

/* === FORM LAYOUT & CARD STYLES === */

.form-container {
    max-width: 56rem;
    /* Equivalent to max-w-4xl */
    margin-left: auto;
    margin-right: auto;
}

.form-card {
    background-color: var(--bg-card, #1f2937);
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    overflow: hidden;
    /* Ensures child corners are rounded */
}

.form-card-body {
    padding: 1.5rem;
    /* p-6 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* space-y-6 */
}

.form-card-footer {
    padding: 1rem 1.5rem;
    /* p-6 with less vertical padding */
    background-color: var(--bg-card, #1f2937);
    border-top: 1px solid var(--border-color, #374151);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-2 */
}

/* === FORM ELEMENTS === */

.form-grid-2-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* On screens 640px and wider */
@media (min-width: 640px) {
    .form-grid-2-col {
        grid-template-columns: repeat(2, 1fr);
    }
}


.form-label {
    display: block;
    margin-bottom: 0.5rem;
    /* mb-2 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    color: var(--text-primary-dark, #d1d5db);
    /* text-gray-300 */
}



.form-help-text {
    margin-top: 0.5rem;
    /* mt-2 */
    font-size: 0.75rem;
    /* text-xs */
    color: var(--text-secondary, #9ca3af);
    /* text-gray-400 */
}

.form-divider {
    border-color: var(--border-color, #374151);
}

/* === BUTTONS (Additions) === */

.btn-success {
    background-color: #16a34a;
    /* bg-green-600 */
    color: white;
}

.btn-success:hover {
    background-color: #15803d;
    /* hover:bg-green-700 */
}

.btn-secondary {
    background-color: #4b5563;
    /* bg-gray-600 */
    color: white;
}

.btn-secondary:hover {
    background-color: #374151;
    /* hover:bg-gray-700 */
}

/* === ALERT BOX (Error/Validation) === */

.alert-box-danger {
    margin-bottom: 1rem;
    /* mb-4 */
    padding: 1rem;
    font-size: 0.875rem;
    /* text-sm */
    color: #fca5a5;
    /* text-red-300 */
    border: 1px solid rgba(239, 68, 68, 0.5);
    /* border-red-500/50 */
    border-radius: 0.5rem;
    /* rounded-lg */
    background-color: rgba(239, 68, 68, 0.1);
    /* bg-red-500/10 */
}

/* --- CSS untuk Tombol Aksi Responsif --- */

/* Secara default (di desktop), tampilkan teks panjang dan sembunyikan teks mobile */
.sm-action-button .mobile-text {
    display: none;
}

/* Gunakan Media Query untuk layar kecil (misalnya, di bawah 640px) */
@media (max-width: 640px) {

    /* Sembunyikan teks versi desktop */
    .sm-action-button .desktop-text {
        display: none;
    }

    /* Tampilkan teks versi mobile */
    .sm-action-button .mobile-text {
        display: inline;
        /* atau 'inline-block' */
    }

    /* ============================================== */
    /* === PERBAIKAN FINAL UNTUK TOMBOL AKSI ('Detail') === */
    /* ============================================== */

    .sm-action-button {
        /* 1. Jadikan tombol sebagai flex container */
        display: inline-flex;

        /* 2. Sejajarkan teks dan ikon di tengah secara vertikal */
        align-items: center;

        /* 3. Sejajarkan teks dan ikon di tengah secara horizontal */
        justify-content: center;

        /* 4. Beri sedikit jarak antara teks "Detail" dan ikon panah */
        gap: 0.25rem;
        /* setara dengan 4px */

        /* 5. (PENTING) Mencegah teks dan ikon turun baris */
        white-space: nowrap;
    }
}

/* === PERBAIKAN WARNA PESAN CHART === */

.loading-indicator,
.no-data-message {
    /* (Mode Terang) Atur warna default ke abu-abu gelap */
    color: var(--text-secondary, #6b7280);
}

[data-theme="dark"] .loading-indicator,
[data-theme="dark"] .no-data-message {
    /* (Mode Gelap) Atur warna ke abu-abu terang */
    color: var(--text-secondary-dark, #9ca3af);
}

/* ================================================= */
/* === DROPDOWN "PER PAGE" (LIGHT & DARK MODE) ===   */
/* ================================================= */

.per-page-form select {
    /* 1. Style Dasar (Berlaku di kedua mode) */
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    border-width: 1px;
    border-style: solid;
    transition: all 0.2s ease-in-out;

    /* 2. Style Mode Terang (Default) */
    /* Menggunakan variabel dari :root di style.css Anda */
    border-color: var(--border-color, #e5e7eb);
    background-color: var(--bg-secondary, #ffffff);
    color: var(--text-primary, #1f2937);
}

/* Tampilan saat di-klik/focus (Berlaku di kedua mode) */
.per-page-form select:focus {
    outline: none;
    border-color: var(--accent-color, #3b82f6);
    /* Anda bisa tambahkan box-shadow jika mau */
    /* box-shadow: 0 0 0 2px var(--accent-color-light, #5fa4ff); */
}

/* 3. Style Mode Gelap (Dark Mode) */
/* * PENTING: Ganti [data-theme="dark"] dengan selector 
 * yang Anda gunakan untuk mengaktifkan mode gelap.
 * (Contoh: body.dark-mode, html.dark, dll.)
*/
[data-theme="dark"] .per-page-form select {
    /* Warna spesifik untuk mode gelap (dari screenshot) */
    border-color: #555;
    background-color: #2a2a38;
    color: #fff;
}

/* Kita targetkan elemen yang memiliki KEDUA class */
.import-excel-modal.modal-alpine {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--modal-overlay-bg);
    padding: 1rem;
    backdrop-filter: blur(4px);
    /* Efek blur (opsional) */
}

/* Semua elemen di bawah ini adalah turunan, jadi kita pakai spasi */
.import-excel-modal .modal-content {
    background-color: var(--modal-bg);
    color: var(--text-primary);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 32rem;
    /* 512px */
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s;
}

.import-excel-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--modal-border);
    transition: border-color 0.3s;
}

.import-excel-modal .modal-header h3 {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 600;
    margin: 0;
}

.import-excel-modal .modal-close-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    /* 28px */
    font-weight: 400;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

.import-excel-modal .modal-close-btn:hover {
    color: var(--text-primary);
}

.import-excel-modal .modal-body {
    padding: 1.5rem;
    color: var(--text-primary);
}

.import-excel-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--modal-border);
    transition: border-color 0.3s;
}

/* ======================================================================== */
/* 4. Style Form & Alert di dalam Modal (BARU & Disesuaikan) */
/* ======================================================================== */

/* Style untuk alert-info (light & dark mode) */
.import-excel-modal .alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}

.import-excel-modal .alert-info {
    color: var(--alert-info-text);
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.import-excel-modal .alert-content strong {
    color: var(--alert-info-text);
    /* Pastikan strong juga berubah warna */
}

/* Style untuk form group */
.import-excel-modal .form-group {
    margin-bottom: 1rem;
}

.import-excel-modal .form-label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* Style untuk input file */
.import-excel-modal .form-input-file {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Style tombol "Choose File" */
.import-excel-modal .form-input-file::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 0.75rem;
    border: 1px solid var(--form-input-border);
    border-radius: 0.375rem;
    background-color: var(--file-button-bg);
    color: var(--file-button-text);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.import-excel-modal .form-input-file::file-selector-button:hover {
    background-color: var(--file-button-hover-bg);
}

/* Style Tombol Footer */
.import-excel-modal .modal-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: 0.875rem;
}

/* Tombol "Batal" (Sekunder) */
.import-excel-modal .modal-button.cancel {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}

.import-excel-modal .modal-button.cancel:hover {
    background-color: var(--btn-secondary-hover-bg);
}

/* Tombol "Mulai Import" (Primary, pakai style .sky) */
.import-excel-modal .modal-button.sm-add-btn {
    background-color: #0284c7;
    /* bg-sky-600 */
    color: white;
    border: none;
}

.import-excel-modal .modal-button.sm-add-btn:hover {
    background-color: #0369a1;
    /* bg-sky-700 */
}

.import-excel-modal .modal-button.sm-add-btn .mr-2 {
    margin-right: 0.5rem;
}

/* ======================================= */
/* CSS PUSAT UNDUHAN (SUDAH LIGHT/DARK) */
/* ======================================= */

.report-card-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .report-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .report-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.report-card-item {
    background-color: var(--card-bg);
    /* Menggunakan variabel */
    border: 1px solid var(--card-border);
    /* Menggunakan variabel */
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Header dari kartu */
.report-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    /* --- PERUBAHAN DI SINI --- */
    background-color: var(--card-header-bg);
    /* Menggunakan variabel */
    /* ------------------------ */
    border-bottom: 1px solid var(--card-border);
    /* Menggunakan variabel */
    font-weight: 600;
    color: var(--text-primary);
    /* Menggunakan variabel */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Body dari kartu (tempat list laporan) */
.report-card-body {
    padding: 1.5rem;
}

/* Tombol "Download Semua" (Tidak perlu diubah, sudah terlihat bagus) */
.btn-success.btn-excel {
    background-color: #108759;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-success.btn-excel:hover {
    background-color: #0d6d47;
}

/* Wrapper untuk table, agar bisa scroll di layar kecil */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* Class tabel baru agar tidak bentrok */
.download-center-table {
    width: 100%;
    min-width: 800px;
    /* Minimal lebar agar tidak terlalu sempit */
    border-collapse: collapse;
    color: var(--text-primary, #e5e7eb);
}

.download-center-table thead {
    background-color: var(--card-border, #374151);
    /* Warna header */
    border-bottom: 2px solid var(--card-border, #4b5563);
}

.download-center-table th {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary, #9ca3af);
}

.download-center-table tbody tr {
    border-bottom: 1px solid var(--card-border, #374151);
    transition: background-color 0.2s ease-in-out;
}

.download-center-table tbody tr:last-child {
    border-bottom: none;
}

.download-center-table tbody tr:hover {
    background-color: var(--card-border, #374151);
    /* Efek hover */
}

.download-center-table td {
    padding: 1rem 1rem;
    vertical-align: middle;
}

.download-center-table .text-center {
    text-align: center;
}

.download-center-table .font-semibold {
    font-weight: 600;
}

/* Tombol Unduh di dalam tabel */
.btn-unduh {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background-color: var(--btn-secondary-bg, #4b5563);
    color: var(--btn-secondary-text, #ffffff);
    text-decoration: none;
    transition: background-color 0.2s;
    border: 1px solid var(--btn-secondary-border, #4b5563);
}

.btn-unduh:hover {
    background-color: var(--btn-secondary-hover-bg, #5a6673);
}

/* Placeholder saat tidak ada data di tabel */
.no-data-placeholder-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    font-size: 1rem;
    color: var(--text-secondary, #9ca3af);
}

.no-data-placeholder-table .fas {
    font-size: 2.5rem;
    opacity: 0.5;
}

/* Penyesuaian form filter agar lebih rapi */
.filter-form {
    align-items: flex-end;
    /* Membuat tombol sejajar dengan input */
}

.filter-form .form-label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-group {
    min-width: 150px;
    /* Beri lebar minimal agar tidak terlalu rapat */
}

/* Anda mungkin sudah punya style .table-pagination dari template Anda */
.table-pagination {
    padding: 1.5rem;
    border-top: 1px solid var(--card-border, #374151);
}

/* TAMBAHKAN INI DI AKHIR FILE CSS ANDA */

.stats-table td.font-bold,
.stats-table td .font-bold {
    font-weight: bold !important;
    /* atau 700 !important */
}

/* Ini untuk membuat 'Total' dan 'Rata-rata Capaian' juga tebal */
.stats-table td.font-bold {
    font-weight: bold !important;
}

/* --- TAMBAHKAN DI BAWAH CSS ANDA --- */

/* Menghilangkan Tampilan Link (Biru & Garis Bawah) di Tabel */
.stats-table tbody td a {
    color: inherit;
    /* Membuat link mewarisi warna teks (jadi hitam/abu-abu) */
    text-decoration: none;
    /* Menghilangkan garis bawah */
}

/* (Opsional tapi bagus) Memastikan tidak ada garis bawah saat di-hover */
.stats-table tbody td a:hover {
    text-decoration: none;
}

/* --- TAMBAHKAN DI BAWAH CSS ANDA --- */

.stats-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;

    /* Agar transisi warnanya halus */
    transition: background-color 0.2s ease;

}

.stats-table tbody tr:first-child:hover {
    border-top-left-radius: 0;

    border-top-right-radius: 0;

}

.stats-table tbody tr:last-child:hover {
    border-bottom-left-radius: 0.75rem;

    border-bottom-right-radius: 0.75rem;

}

/* 2. Wadah/Grup Tab (Gunakan ID dari HTML) */
#gkm-tab-nav {
    display: inline-flex;
    position: relative;
    background-color: var(--bg-secondary);
    /* Latar belakang grup */
    border-radius: 0.625rem;
    /* 10px */
    padding: 1rem;
    padding-bottom: 1rem;
    /* 4px */

}

/* 3. Tombol Tab (Teks-nya) */
.tab-btn {
    padding: 0.75rem 1.75rem;
    /* Sesuaikan lebar di sini */
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    /* 8px */
    transition: color 0.3s ease;
    cursor: pointer;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    /* Teks tidak aktif (abu-abu) */
    position: relative;
    z-index: 1;
    /* Di atas slider */
    text-align: center;
    /* Men-senterkan teks */
}

/* 4. Hover */
.tab-btn:hover {
    color: var(--text-primary);
    /* Teks jadi lebih jelas */
}

/* 5. Tombol Aktif (Teks-nya) */
.tab-btn.active {
    color: var(--header-text-color, #ffffff);
    /* Teks jadi PUTIH */
}

/* 6. Indikator/Slider Biru */
#gkm-tab-nav .tab-indicator {
    position: absolute;
    z-index: 0;
    /* Di belakang teks */
    top: 0.25rem;
    /* Sesuaikan dgn padding wadah */
    height: calc(100% - 0.5rem);
    /* (100% - 8px) */
    background-color: var(--accents);
    /* Warna biru */
    border-radius: 0.5rem;
    /* 8px */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    /* Efek geser */
}

/* 2. Wadah/Grup Tab (Gunakan ID dari HTML) */
#kinerja-tab-nav {
    display: inline-flex;
    position: relative;
    background-color: var(--bg-secondary);
    /* Latar belakang grup */
    border-radius: 0.625rem;
    /* 10px */
    padding: 1rem;
    padding-bottom: 1rem;
    /* 4px */
    margin-bottom: 1.5rem;
}

/* 3. Tombol Tab (Teks-nya) */
#kinerja-tab-nav .tab-button {
    padding: 0.75rem 1.75rem;
    /* Sesuaikan lebar di sini */
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    /* 8px */
    transition: color 0.3s ease;
    cursor: pointer;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    /* Teks tidak aktif (abu-abu) */
    position: relative;
    z-index: 1;
    /* Di atas slider */
    text-align: center;
    /* Men-senterkan teks */
}

/* 4. Hover */
#kinerja-tab-nav .tab-button:hover {
    color: var(--text-primary);
    /* Teks jadi lebih jelas */
}

/* 5. Tombol Aktif (Teks-nya) */
#kinerja-tab-nav .tab-button.active {
    color: var(--header-text-color, #ffffff);
    /* Teks jadi PUTIH */
}

/* 6. Indikator/Slider Biru */
#kinerja-tab-nav .tab-indicator {
    position: absolute;
    z-index: 0;
    /* Di belakang teks */
    top: 0.25rem;
    /* Sesuaikan dgn padding wadah */
    height: calc(100% - 0.5rem);
    /* (100% - 8px) */
    background-color: var(--accents);
    /* Warna biru */
    border-radius: 0.5rem;
    /* 8px */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    /* Efek geser */
}

/* CSS untuk panel konten. 
  Pastikan Anda punya ini agar tab-nya berfungsi.
*/
.tab-content-panel {
    display: block;
}

.tab-content-panel.hidden {
    display: none;
}

.action-banner-popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    /* PERUBAHAN: Menggunakan variabel */
    background-color: var(--popup-bg);
    color: var(--popup-text);
    box-shadow: 0 6px 15px var(--popup-shadow);

    padding: 12px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease, bottom 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    /* Transisi lebih mulus */
}

/* Style saat banner tersembunyi (Tidak berubah) */
.action-banner-popup.hidden {
    opacity: 0;
    bottom: -100px;
    pointer-events: none;
}

/* Style untuk text counter (Tidak berubah) */
#selectedCount {
    font-weight: bold;
    margin-right: 8px;
}



/* Untuk tombol aksi PDF */
.action-icon-pdf {
    color: #dc2626;
    /* Merah */
    /* background-color: transparent; */
    /* Tidak perlu eksplisit, default-nya transparan */
    /* border: none; */
    /* Tidak perlu eksplisit, default-nya tidak ada border */
}

.action-icon-pdf:hover {
    color: #991b1b;
    /* Merah lebih gelap saat hover */
    background-color: var(--hover-bg);
    /* Menggunakan variabel tema untuk hover background */
}

/* Untuk tombol aksi Word */
.action-icon-word {
    color: #1e40af;
    /* Biru */
    /* background-color: transparent; */
    /* Tidak perlu eksplisit */
    /* border: none; */
    /* Tidak perlu eksplisit */
}

.action-icon-word:hover {
    color: #172554;
    /* Biru lebih gelap saat hover */
    background-color: var(--hover-bg);
    /* Menggunakan variabel tema untuk hover background */
}

/* Pastikan action-icon-edit juga ada di CSS Anda */
.action-icon-edit {
    color: var(--primary-text-color);
    /* Atau warna ikon default Anda */
    /* background-color: transparent; */
    /* border: none; */
}

.action-icon-edit:hover {
    background-color: var(--hover-bg);
}

/* Tambahan: pastikan --hover-bg dan --primary-text-color terdefinisi di :root atau html */
/* Contoh di awal file CSS atau di layout Anda jika menggunakan Tailwind JIT */
/*
:root {
    --card-bg: #2d3748; // Contoh untuk dark mode
    --text-secondary: #a0aec0; // Contoh untuk dark mode
    --primary-text-color: #cbd5e0; // Contoh untuk dark mode
    --hover-bg: rgba(255, 255, 255, 0.05); // Contoh hover transparan untuk dark mode
}
*/

/* --- Dashboard Grid Layout --- */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Stat Cards --- */
.stat-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Bubble Decoration (Background Blur) */
.stat-card::after {
    content: '';
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(20px);
    z-index: 0;
}

.stat-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Color Variants */
.stat-blue .stat-label {
    color: #2563eb;
}

.stat-blue .stat-icon {
    background-color: #eff6ff;
    color: #2563eb;
}

.stat-blue::after {
    background-color: #eff6ff;
}

.stat-emerald .stat-label {
    color: #059669;
}

.stat-emerald .stat-icon {
    background-color: #ecfdf5;
    color: #059669;
}

.stat-emerald::after {
    background-color: #ecfdf5;
}

.stat-purple .stat-label {
    color: #7c3aed;
}

.stat-purple .stat-icon {
    background-color: #f5f3ff;
    color: #7c3aed;
}

.stat-purple::after {
    background-color: #f5f3ff;
}

/* Dark Mode Overrides for Stats */
@media (prefers-color-scheme: dark) {
    .stat-blue .stat-label {
        color: #60a5fa;
    }

    .stat-blue .stat-icon {
        background-color: rgba(37, 99, 235, 0.2);
        color: #60a5fa;
    }

    .stat-blue::after {
        background-color: rgba(37, 99, 235, 0.15);
    }

    .stat-emerald .stat-label {
        color: #34d399;
    }

    .stat-emerald .stat-icon {
        background-color: rgba(5, 150, 105, 0.2);
        color: #34d399;
    }

    .stat-emerald::after {
        background-color: rgba(5, 150, 105, 0.15);
    }

    .stat-purple .stat-label {
        color: #a78bfa;
    }

    .stat-purple .stat-icon {
        background-color: rgba(124, 58, 237, 0.2);
        color: #a78bfa;
    }

    .stat-purple::after {
        background-color: rgba(124, 58, 237, 0.15);
    }
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-icon {
    padding: 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-footer {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.stat-badge {
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: 600;
    margin-right: 0.5rem;
    font-size: 0.7rem;
}

/* Badge colors for footer */
.stat-blue .stat-badge {
    background-color: #dbeafe;
    color: #1e40af;
}

.stat-emerald .stat-badge {
    background-color: #d1fae5;
    color: #065f46;
}

.stat-purple .stat-badge {
    background-color: #ede9fe;
    color: #5b21b6;
}

@media (prefers-color-scheme: dark) {
    .stat-blue .stat-badge {
        background-color: #1e3a8a;
        color: #dbeafe;
    }

    .stat-emerald .stat-badge {
        background-color: #064e3b;
        color: #d1fae5;
    }

    .stat-purple .stat-badge {
        background-color: #4c1d95;
        color: #ede9fe;
    }
}


/* =====================================================================
   FULLCALENDAR CARD VIEW CUSTOMIZATION (UPDATED)
   Bagian ini telah diperbarui total agar kalender berbentuk KARTU
   ===================================================================== */

#calendar {
    font-family: inherit;
    color: var(--text-primary);
    min-height: 700px;
    /* PENTING: Agar kalender punya tinggi */
}

/* 1. RESET GRID TABEL BAWAAN */
.fc {
    background: transparent !important;
}

.fc-theme-standard td,
.fc-theme-standard th,
.fc-scrollgrid,
.fc-scrollgrid td,
.fc-scrollgrid th {
    border: none !important;
    /* Hilangkan garis tabel */
    background: transparent !important;
}

/* 2. HEADER HARI (SENIN, SELASA...) */
.fc .fc-col-header-cell {
    padding-bottom: 15px !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--text-muted);
    text-decoration: none !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--body-bg);
    /* Atau warna gelap spesifik */
    padding: 8px 15px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid var(--card-border);
}

/* 3. TOMBOL HEADER KALENDER (Prev, Next, Today) */
.fc .fc-toolbar-title {
    font-size: 1.25rem !important;
    color: var(--text-primary);
}

.fc .fc-button {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-primary) !important;
    text-transform: capitalize !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.fc .fc-button:hover {
    background-color: var(--table-striped-bg) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-today-button {
    background-color: var(--primary-bg) !important;
    border-color: var(--primary-bg) !important;
    color: var(--primary-text) !important;
}

/* 4. KOTAK KARTU TANGGAL (THE CARD) - INI KUNCINYA */
.fc .fc-daygrid-day {
    padding: 8px !important;
    /* Jarak antar kartu (Gap) */
    border: none !important;
}

.fc .fc-daygrid-day-frame {
    background-color: var(--card-bg);
    /* Warna latar kartu */
    border: 1px solid var(--card-border);
    border-radius: 12px;
    min-height: 160px;
    /* Tinggi kartu agar tidak gepeng */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Efek Hover pada Kartu */
.fc .fc-daygrid-day-frame:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
    /* Warna biru saat hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Angka Tanggal */
.fc .fc-daygrid-day-top {
    flex-direction: row;
    justify-content: flex-end;
    padding: 8px;
}

.fc .fc-daygrid-day-number {
    color: var(--text-muted);
    text-decoration: none !important;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.05);
}

/* Highlight Hari Ini */
.fc .fc-day-today .fc-daygrid-day-frame {
    border-color: var(--primary-bg);
    background-color: rgba(59, 130, 246, 0.05);
}

.fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--primary-bg);
    color: var(--primary-text);
}

/* 5. ISI CUSTOM EVENT (Yang diinject via JS) */

/* Reset style bawaan FullCalendar */
.fc-daygrid-event {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    white-space: normal !important;
}

.fc-h-event {
    background: none;
    border: none;
}

/* --- UPDATE UTAMA DI SINI --- */


/* --- Modal Styles (Alpine) - TIDAK DIUBAH --- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-bg {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-panel {
    position: relative;
    background-color: var(--card-bg);
    width: 100%;
    max-width: 32rem;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Header Gradient Variants based on status */
.header-scheduled {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.1), transparent);
}

.header-finished {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.1), transparent);
}

.header-canceled {
    background: linear-gradient(to right, rgba(239, 68, 68, 0.1), transparent);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
}

.modal-close-btn:hover {
    background-color: var(--body-bg);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.info-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.info-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: var(--body-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.info-content label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.info-content p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    background-color: var(--body-bg);
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Badge Status in Modal */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-scheduled {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.2);
}

.status-finished {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.2);
}

.status-canceled {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
}

/* Dark mode fixes for pills */
@media (prefers-color-scheme: dark) {
    .status-scheduled {
        color: #60a5fa;
    }

    .status-finished {
        color: #34d399;
    }

    .status-canceled {
        color: #f87171;
    }
}

/* Animation Classes for Alpine x-transition replacement */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}

.scale-enter-active {
    transition: all 0.2s ease-out;
}

.scale-leave-active {
    transition: all 0.15s ease-in;
}

.scale-enter-from,
.scale-leave-to {
    opacity: 0;
    transform: scale(0.95);
}

.scale-enter-to,
.scale-leave-from {
    opacity: 1;
    transform: scale(1);
}


/* 2. STYLE COMPONENT */
.monitoring-card {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.monitoring-header {
    /* Gunakan Variable di sini */
    background: var(--mon-bg);
    border: 1px solid var(--mon-border);

    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    /* Transisi halus saat ganti tema */
    transition: all 0.3s ease;
}

.monitoring-title {
    margin: 0;
    padding: 0;
    color: var(--mon-text-title);
    /* Pakai variable */
    font-size: 1.25rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
}

.monitoring-icon {
    margin-right: 0.5rem;
    color: #f59e0b;
    /* Warna icon tetap kuning/warning di kedua mode */
}

.monitoring-legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    color: var(--mon-text-legend);
    /* Pakai variable */
    font-size: 0.9rem;
    font-weight: 500;
}

/* Bagian Dot tetap sama karena warnanya universal */
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.legend-dot.blue {
    background-color: #3b82f6;
}

.legend-dot.green {
    background-color: #22c55e;
}

.legend-dot.red {
    background-color: #ef4444;
}

/* --- 2. MAIN MODAL PANEL STYLE --- */
.evt-modal-panel {
    background-color: var(--evt-bg);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 500px;
    /* Lebar maksimal modal */
    overflow: hidden;
    /* Agar sudut rounded header ikut terpotong */
    transition: all 0.3s ease;
    border: 1px solid var(--evt-border);

    /* Posisi (Opsional, tergantung parent container Anda) */
    position: relative;
    margin: 0 auto;
}

/* --- 3. HEADER SECTION --- */
.evt-modal-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #ffffff;
    /* Text selalu putih karena background berwarna */
    background-color: #64748b;
    /* Default gray jika status kosong */
}

/* Header Variants based on Status */
.evt-modal-header.header-scheduled {
    background-color: var(--st-blue);
}

.evt-modal-header.header-finished {
    background-color: var(--st-green);
}

.evt-modal-header.header-canceled {
    background-color: var(--st-red);
}

.evt-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.evt-modal-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 4px 0 0 0;
}

.evt-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.evt-close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* --- 4. BODY SECTION --- */
.evt-modal-body {
    padding: 1.5rem;
}

/* Status Pill (Label Status di dalam body) */
.evt-status-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.evt-status-pill.status-scheduled {
    background: #dbeafe;
    color: var(--st-blue);
}

/* Biru Muda */
.evt-status-pill.status-finished {
    background: #dcfce7;
    color: var(--st-green);
}

/* Hijau Muda */
.evt-status-pill.status-canceled {
    background: #fee2e2;
    color: var(--st-red);
}

/* Merah Muda */

/* Info Row (Icon + Label + Text) */
.evt-info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.evt-info-row:last-child {
    margin-bottom: 0;
}

.evt-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--evt-icon-bg);
    color: var(--evt-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.evt-info-content label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--evt-text-sub);
    font-weight: 600;
    margin-bottom: 2px;
}

.evt-info-content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--evt-text-main);
    font-weight: 500;
}

/* --- 5. FOOTER SECTION --- */
.evt-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--evt-border);
    background-color: var(--evt-bg);
    /* Match bg */
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.sm-import-btn {
    background-color: #6f42c1;
    /* Warna Ungu */
    color: white;
    border: none;
    cursor: pointer;
}

.sm-import-btn:hover {
    background-color: #5a32a3;
    color: white;
    text-decoration: none;
}

/* =========================================
       3. STYLE TOMBOL UMUM
       ========================================= */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: #ffffff !important;
    /* Teks selalu putih */
    box-shadow: var(--btn-shadow);

    /* Pastikan line-height normal agar icon sejajar */
    line-height: 1.5;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-hover-shadow);
    color: #ffffff !important;
    filter: brightness(1.1);
    /* Efek kilau sedikit saat hover */
}

.btn-action i {
    margin-right: 8px;
    /* Jarak icon ke teks */
}

/* =========================================
       4. IMPLEMENTASI WARNA
       ========================================= */

/* Tombol Tambah */
.btn-add {
    background-color: var(--color-add);
}

.btn-add:hover {
    background-color: var(--color-add-hover);
}

/* Tombol Import (KHUSUS) */
.btn-import {
    background-color: var(--color-import);
}

.btn-import:hover {
    background-color: var(--color-import-hover);
}

/* Tombol Export */
.btn-export {
    background-color: var(--color-export);
}

.btn-export:hover {
    background-color: var(--color-export-hover);
}

/* Tombol Template */
.btn-template {
    background-color: var(--color-template);
}

.btn-template:hover {
    background-color: var(--color-template-hover);
}

/* Responsif untuk HP: Tombol jadi lebar penuh */
@media (max-width: 576px) {
    .detail-actions-bar {
        flex-direction: column;
        align-items: stretch;
        /* Tombol memanjang ke samping */
    }

    .btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   1. MODE GELAP (Override)
   Ini hanya aktif jika tag html memiliki class="dark"
   ========================================= */
html.dark .form-input,
html.dark .form-textarea,
html.dark .form-select {
    color: #ffffff;
    background-color: #374151;
    /* Gray-700 */
    border-color: #4b5563;
    /* Gray-600 */
}

html.dark .form-input::placeholder,
html.dark .form-textarea::placeholder {
    color: #9ca3af;
    /* Gray-400 */
}

/* =========================================
   2. STYLE UTAMA (Default / Mode Terang)
   Ini adalah tampilan dasar (background putih)
   ========================================= */
.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: 0.625rem;
    /* 10px */
    font-size: 0.875rem;
    /* 14px */

    /* PERBAIKAN DISINI: Set warna default ke Mode Terang */
    color: #111827;
    /* Text gelap (Gray-900) */
    background-color: #ffffff;
    /* Background Putih */
    border: 1px solid #d1d5db;
    /* Border abu muda (Gray-300) */

    border-radius: 0.5rem;
    /* 8px */
    transition: border-color 0.2s, box-shadow 0.2s;

    /* Reset default browser styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* =========================================
   3. FOCUS STATE
   ========================================= */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* =========================================
   4. INPUT TYPE NUMBER (Menghapus panah)
   ========================================= */
.form-input[type=number]::-webkit-inner-spin-button,
.form-input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

/* =========================================
   5. INPUT TYPE FILE
   ========================================= */
.form-input-file {
    width: 100%;
    font-size: 0.875rem;
    color: #4b5563;
    /* Text secondary default */
}

/* Tombol 'Choose File' */
.form-input-file::file-selector-button {
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 0;
    font-size: 0.875rem;
    font-weight: 600;

    /* Warna tombol file default */
    background-color: #e5e7eb;
    color: #1f2937;

    cursor: pointer;
    transition: background-color 0.2s;
}

.form-input-file:hover::file-selector-button {
    filter: brightness(95%);
}

/* Mode gelap untuk tombol file (Opsional) */
html.dark .form-input-file::file-selector-button {
    background-color: #4b5563;
    color: #ffffff;
}

html.dark .form-input-file {
    color: #d1d5db;
}

/* Konfigurasi Umum untuk Kolom Sticky */
.sticky-col {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    /* Agar berada di atas sel data biasa */
    background-color: #ffffff;
    /* PENTING: Agar teks yang berjalan di belakangnya tidak terlihat */
}

/* Konfigurasi Khusus Header (TH) */
.table-header th.sticky-col {
    z-index: 3;
    /* Header harus lebih tinggi dari body */
    background-color: #f8f9fa;
    /* Sesuaikan dengan warna background header tabel Anda */
    color: #333;
    /* Sesuaikan warna teks header */
}

/* --- POSISI KOLOM --- */

/* Kolom 1: Checkbox (Paling Kiri) */
.col-checkbox {
    left: 0;
    width: 40px;
    /* Lebar tetap agar perhitungan posisi kolom berikutnya pas */
    min-width: 40px;
    border-right: 1px solid #e5e7eb;
    /* Garis pemisah tipis */
}

/* Kolom 2: No (Sebelah Kanan Checkbox) */
.col-no {
    left: 40px;
    /* Nilai ini harus sama dengan width .col-checkbox */
    width: 50px;
    min-width: 50px;
    border-right: 2px solid #d1d5db;
    /* Garis pemisah lebih tebal sebagai batas freeze pane */
    box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.1);
    /* Efek bayangan agar terlihat mengambang */
}

/* =========================================
   STYLE CUSTOM CARD (FIXED FOR DARK MODE)
   ========================================= */

/* --- STYLE KARTU EVENT MODERN --- */
.custom-event-card {
    background-color: var(--evt-bg);
    border: 1px solid var(--evt-border);
    border-left-width: 4px;
    border-left-style: solid;

    border-radius: 8px;
    /* Sudut lebih membulat */
    padding: 10px 12px;
    /* Padding lebih lega */
    margin-bottom: 6px;

    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Jarak antar elemen */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Shadow halus */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.custom-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 1. Header: Nama Unit / Kategori */
.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.event-category {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: var(--evt-text-sub);
    /* Warna abu-abu */
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 2. Main: Waktu & Judul */
.event-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.event-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-add);
    /* Menggunakan warna aksen (Biru) */
    display: flex;
    align-items: center;
    gap: 5px;
}

.event-time i {
    font-size: 0.65rem;
}

.event-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--evt-text-main);
    /* Warna utama mengikuti tema */

    /* Batasi maks 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Footer: Lokasi */
.event-footer {
    margin-top: 2px;
}

.event-room {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    /* Bentuk pill/kapsul */

    /* Warna background lokasi halus */
    background-color: var(--evt-icon-bg);
    color: var(--evt-text-sub);

    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-room i {
    color: var(--color-add);
    /* Ikon lokasi berwarna */
}

/* Fix tambahan untuk Dark Mode (jika background lokasi terlalu terang) */
html.dark .event-room {
    background-color: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
}

/* Pastikan CSS ini dimuat di bagian <head> atau file CSS kustom Anda */

.unit-kerja-checkbox-list {
    /* Gaya Container Utama */
    border: 1px solid #d1d5db;
    /* gray-300 */
    padding: 1rem;
    border-radius: 0.5rem;
    /* rounded-lg */
    max-height: 250px;
    /* Batas tinggi */
    overflow-y: auto;
    /* Aktifkan scroll */
    background-color: white;
    /* Default light mode */
    font-size: 0.875rem;
    /* text-sm */
}

/* Dark Mode Styling (Asumsi Anda menggunakan Tailwind/CSS Native Dark Mode) */
.dark .unit-kerja-checkbox-list {
    border-color: #374151;
    /* gray-700 */
    background-color: #1f2937;
    /* gray-800 */
    color: #d1d5db;
    /* light gray text */
}

.unit-kerja-item,
.unit-kerja-item-all {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.unit-kerja-item:hover {
    background-color: #f3f4f6;
    /* gray-50 hover effect */
}

.dark .unit-kerja-item:hover {
    background-color: #374151;
    /* gray-700 hover effect in dark mode */
}

.unit-kerja-item label,
.unit-kerja-item-all label {
    margin-left: 0.5rem;
    cursor: pointer;
    user-select: none;
    /* Cegah teks terpilih */
    flex-grow: 1;
    /* Pastikan label mengisi ruang */
}

.unit-kerja-divider {
    border-top: 1px solid #e5e7eb;
    /* gray-200 */
    margin: 0.75rem 0;
}

.dark .unit-kerja-divider {
    border-top: 1px solid #4b5563;
    /* gray-600 */
}

/* Sesuaikan gaya checkbox (jika form-checkbox-control tidak didefinisikan) */
.form-checkbox-control {
    height: 1rem;
    /* h-4 */
    width: 1rem;
    /* w-4 */
    /* Tambahkan style checkbox lainnya jika diperlukan */
}

/* Gaya khusus untuk item ALL */
.unit-kerja-item-all label {
    color: #2563eb;
    /* blue-600 */
}

.dark .unit-kerja-item-all label {
    color: #60a5fa;
    /* blue-400 in dark mode */
}

/* Container utama */
.new-in-unit-container {
    border: 1px solid #374151;
    /* Warna border gelap menyesuaikan tema */
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(31, 41, 55, 0.5);
    /* Background transparan gelap */
    max-height: 400px;
    overflow-y: auto;
    margin: 0 auto;
    /* Memastikan container berada di tengah */
}

/* Grid Khusus 2 Kolom */
.new-in-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 30px !important;
    width: 100% !important;
}

/* Styling item checkbox */
.new-in-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin-bottom: 5px;
}

/* Memastikan label rata tengah secara visual */
.new-in-item label {
    color: #d1d5db;
    font-size: 14px;
    cursor: pointer;
}

/* Warna khusus untuk unit user login */
.unit-anda {
    font-weight: bold !important;
    color: #60a5fa !important;
    /* Biru terang */
}

/* Tambahkan scrollbar yang lebih halus untuk tema gelap */
.new-in-unit-container::-webkit-scrollbar {
    width: 8px;
}

.new-in-unit-container::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 10px;
}

/* Responsif untuk HP */
@media (max-width: 768px) {
    .new-in-grid-wrapper {
        grid-template-columns: 1fr !important;
    }
}

.unit-container-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.unit-card-box {
    border: 1px solid #374151;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(31, 41, 55, 0.5);
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    max-width: 900px;
    /* Membatasi lebar agar tetap di tengah */
}

.unit-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
}

.unit-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unit-label {
    color: #d1d5db;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 0;
    /* Override bootstrap margin */
}

.unit-anda {
    font-weight: bold;
    color: #60a5fa !important;
}

/* Scrollbar Styling */
.unit-card-box::-webkit-scrollbar {
    width: 6px;
}

.unit-card-box::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .unit-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* Container Alert Warning */
.alert-warning-box {
    background-color: #fef2f2;
    /* Merah Muda (Red 50) */
    border-left: 4px solid #ef4444;
    /* Garis merah tegas (Red 500) */
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;
}

/* Icon Warning */
.alert-warning-icon {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.1rem;
}

/* Konten Teks */
.alert-warning-content {
    margin-left: 0.75rem;
}

.alert-warning-text {
    font-size: 0.875rem;
    color: #991b1b;
    /* Merah Tua (Red 800) */
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.alert-emphasis {
    text-decoration: underline;
    font-weight: 800;
}


.custom-filter-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
}

.custom-filter-wrapper .filter-container-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.custom-filter-wrapper .filter-layout-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
}

.custom-filter-wrapper .filter-input-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.custom-filter-wrapper .filter-input-group label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 2px;
}

/* Styling Field Input & Select */
.custom-filter-wrapper .filter-field-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #1f2937;
    background-color: #fff;
    transition: all 0.2s ease;
}

.custom-filter-wrapper .filter-field-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* Input dengan Icon Pencarian */
.custom-filter-wrapper .input-with-icon {
    position: relative;
}

.custom-filter-wrapper .input-with-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.custom-filter-wrapper .input-with-icon input {
    padding-left: 35px;
    width: 100%;
}

/* Styling Buttons */
.custom-filter-wrapper .filter-button-group {
    display: flex;
    gap: 10px;
}

.custom-filter-wrapper .filter-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.custom-filter-wrapper .filter-btn-primary {
    background-color: #2563eb;
    color: #ffffff;
}

.custom-filter-wrapper .filter-btn-primary:hover {
    background-color: #1d4ed8;
}

.custom-filter-wrapper .filter-btn-secondary {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.custom-filter-wrapper .filter-btn-secondary:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .custom-filter-wrapper .filter-input-group {
        flex: 1 1 100%;
    }

    .custom-filter-wrapper .filter-button-group {
        width: 100%;
    }

    .custom-filter-wrapper .filter-btn {
        flex: 1;
    }
}



/* --- Konfigurasi Tema (CSS Variables) --- */

/* --- Class Styles --- */
.link-bukti-container {
    background-color: var(--bukti-bg-main);
    border: 1px solid var(--bukti-border-main);
    padding: 1.5rem;
    border-radius: 8px;
}

.bukti-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bukti-title {
    font-weight: 600;
    color: var(--bukti-text-primary);
}

.bukti-hint {
    font-size: 0.75rem;
    color: var(--bukti-text-muted);
}

.link-list-wrapper {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.link-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bukti-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.875rem;
    border-radius: 4px;
    background-color: var(--bukti-bg-input);
    border: 1px solid var(--bukti-border-input);
    color: var(--bukti-text-primary);
    outline: none;
    transition: all 0.2s;
}

.btn-delete {
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 1rem;
}

.bukti-grid-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.btn-add-manual {
    background-color: var(--bukti-accent-slate);
    color: white;
    border: none;
    padding: 0 15px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-db-select {
    width: 100%;
    background-color: var(--bukti-accent-blue);
    color: white;
    border: none;
    padding: 9px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}











/* --- 1. GENERAL & LAYOUT --- */
.risk-container {
    padding: 20px;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #f4f6f9;
}

.risk-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-top: 3px solid #007bff;
    /* Garis biru di atas */
    overflow: hidden;
}

.risk-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.risk-title {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
    font-weight: 600;
}

/* --- 2. TABLE STYLING --- */
.table-scroll {
    overflow-x: auto;
    /* Agar bisa discroll horizontal di HP */
    padding-bottom: 10px;
}

.risk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #333;
}

.risk-table th,
.risk-table td {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

/* Header Styles */
.risk-table thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    text-align: center !important;
}

/* Kolom Spesifik - Warna Pembeda */
.th-group {
    text-align: center !important;
}

.th-sub {
    text-align: center !important;
    font-size: 13px;
}

.th-inheren,
.bg-inheren-light {
    background-color: #e3f2fd !important;
}

/* Biru Muda */
.th-residual,
.bg-residual-light {
    background-color: #e8f5e9 !important;
}

/* Hijau Muda */

/* Lebar Kolom */
.col-kode {
    width: 60px;
    text-align: center;
}

.col-pendek {
    min-width: 120px;
}

.col-panjang {
    min-width: 250px;
}

.col-aksi {
    width: 60px;
    text-align: center;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-muted {
    color: #6c757d;
    font-size: 13px;
}

.text-main {
    color: #007bff;
    font-weight: 600;
}

.font-bold {
    font-weight: 600;
}

/* --- 3. BADGES & ALERTS --- */
.badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.badge-outline {
    border: 1px solid #ccc;
    color: #555;
    background: #fff;
}

.badge-dark {
    background: #343a40;
    color: #fff;
}

/* Level Colors */
.badge-red {
    background-color: #dc3545;
    color: #fff;
}

.badge-orange {
    background-color: #fd7e14;
    color: #fff;
}

.badge-yellow {
    background-color: #ffc107;
    color: #000;
}

.badge-green {
    background-color: #28a745;
    color: #fff;
}

.badge-grey {
    background-color: #6c757d;
    color: #fff;
}

.alert {
    padding: 12px;
    margin: 15px 20px 0;
    border-radius: 4px;
    font-size: 14px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* --- 4. BUTTONS --- */
.btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #545b62;
}

.btn-icon {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.btn-delete {
    color: #dc3545;
}

.btn-delete:hover {
    background-color: #f8d7da;
}

/* --- 5. MODAL (Custom Popup) --- */
.modal-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black background with opacity */
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    overflow-y: auto;
}

.modal-box {
    background-color: #fff;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
    margin-bottom: 50px;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.btn-close:hover {
    color: #000;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Form Styles inside Modal */
.form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 5px;
    box-sizing: border-box;
    /* Agar padding tidak menambah lebar */
}

.form-input:focus {
    border-color: #80bdff;
    outline: none;
}

.form-group {
    margin-bottom: 15px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group.col-3 {
    flex: 3;
}

.form-group.col-6 {
    flex: 6;
}

.form-group.col-9 {
    flex: 9;
}

label {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.text-danger {
    color: #dc3545;
}

/* Labels for sections */
.section-label {
    padding: 8px 10px;
    margin: 10px 0 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
}

.section-label.info {
    background-color: #cce5ff;
    color: #004085;
}

.section-label.warning {
    background-color: #fff3cd;
    color: #856404;
}

.section-label.success {
    background-color: #d4edda;
    color: #155724;
}

.target-box {
    border: 1px dashed #ccc;
    padding: 15px;
    background-color: #fdfdfe;
    border-radius: 4px;
}

.target-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
}

/* Responsive adjustment for Mobile */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .risk-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}


/* --- Custom Risk Register Badges --- */

/* Style Dasar (Bentuk Badge) */
.risk-badge {
    display: inline-block;
    padding: 4px 10px;
    /* Jarak dalam agar angka tidak mepet */
    border-radius: 6px;
    /* Sudut membulat (Rounded) */
    font-weight: 700;
    /* Tebal (Bold) */
    font-size: 0.875rem;
    /* Ukuran font pas */
    text-align: center;
    min-width: 35px;
    /* Lebar minimum agar rapi */
}

/* 1. Low Risk (1-5) - Hijau Muda Excel */
.risk-low {
    background-color: #92D050;
    color: #000000;
    /* Teks Hitam */
}

/* 2. Medium Risk (6-10) - Kuning Excel */
.risk-medium {
    background-color: #FFFF00;
    color: #000000;
    /* Teks Hitam */
}

/* 3. High Risk (11-15) - Oranye Excel */
.risk-high {
    background-color: #FFC000;
    /* Atau gunakan #ED7D31 jika ingin oranye lebih gelap */
    color: #000000;
    /* Teks Hitam agar kontras dengan oranye */
}

/* 4. Extreme Risk (16-25) - Merah Excel */
.risk-extreme {
    background-color: #FF0000;
    color: #ffffff;
    /* Teks Putih */
}








/* =========================================
   THEMING VARIABLES (LIGHT & DARK)
   ========================================= */

:root {
    /* --- SKEMA WARNA UMUM (LIGHT MODE / DEFAULT) --- */
    --card-bg: #ffffff;

    --border-color: #e3e6f0;
    --shadow-color: rgba(58, 59, 69, 0.15);

    /* Tabel */
    --table-head-bg: #f8f9fc;
    --table-head-text: #4e73df;
    --table-row-hover: #eaecf4;
    --table-border: #e3e6f0;

    /* Icon Placeholder */
    --icon-placeholder: #dddfeb;

    /* Warna Risiko (Tetap sama di kedua mode agar konsisten) */
    --risk-low: #2bff00;
    /* Hijau */
    --risk-medium: #eeff00;
    /* Kuning */
    --risk-high: #ff9100;
    /* Oranye/Merah */
    --risk-extreme: #851010;
    /* Merah Gelap */
}

/* --- SKEMA WARNA DARK MODE --- */
/* Pastikan tag <body> atau parent memiliki class "dark-mode" atau "dark" */
body.dark-mode,
body.dark,
[data-theme="dark"] {
    --card-bg: #1e1e2d;
    /* Background Card Gelap */
    --body-bg: #151521;


    /* Tabel Gelap */
    --table-head-bg: #2b2b40;
    --table-head-text: #6889eb;
    --table-row-hover: #2b2b40;
    --table-border: #323248;

    /* Icon Placeholder Gelap */
    --icon-placeholder: #3a3a4b;
}

/* =========================================
   ISOLATED RISK DASHBOARD STYLES
   ========================================= */

.risk-dashboard-wrapper {
    width: 100%;
}

/* --- GRID SYSTEM --- */
.risk-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .risk-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .risk-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- CARD ITEM STYLES --- */
.card-link-wrapper {
    text-decoration: none !important;
    display: block;
    height: 100%;
}

.risk-card-item {
    background-color: var(--card-bg);
    /* ADAPTIVE */
    border: 1px solid var(--border-color);
    /* ADAPTIVE */
    border-radius: 0.5rem;
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0.15rem 0.5rem 0 var(--shadow-color);
    /* ADAPTIVE */
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.risk-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem 0 var(--shadow-color);
}

/* Typography Card */
.text-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    /* Default color pake variable, nanti di-override per level */
    color: var(--text-secondary);
}

.text-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    /* ADAPTIVE: Hitam di Light, Putih di Dark */
    line-height: 1;
}

.risk-icon {
    font-size: 2.5rem;
    color: var(--icon-placeholder);
    /* ADAPTIVE */
    opacity: 0.5;
    transition: color 0.3s ease;
}

/* --- INDIKATOR WARNA (Border & Text) --- */
/* LOW */
.border-left-low {
    border-left: 5px solid var(--risk-low);
}

.text-risk-low {
    /* Khusus Low Risk, di Light mode dia abu-abu, di Dark mode harus terang */
    color: var(--risk-low);
}

/* MEDIUM */
.border-left-medium {
    border-left: 5px solid var(--risk-medium);
}

.text-risk-medium {
    color: var(--risk-medium);
}

/* HIGH */
.border-left-high {
    border-left: 5px solid var(--risk-high);
}

.text-risk-high {
    color: var(--risk-high);
}

/* EXTREME */
.border-left-extreme {
    border-left: 5px solid var(--risk-extreme);
}

.text-risk-extreme {
    color: var(--risk-extreme);
}

/* Hover Effect: Icon berubah warna */
.card-link-wrapper:hover .border-left-low .risk-icon {
    color: var(--risk-low);
    opacity: 1;
}

.card-link-wrapper:hover .border-left-medium .risk-icon {
    color: var(--risk-medium);
    opacity: 1;
}

.card-link-wrapper:hover .border-left-high .risk-icon {
    color: var(--risk-high);
    opacity: 1;
}

.card-link-wrapper:hover .border-left-extreme .risk-icon {
    color: var(--risk-extreme);
    opacity: 1;
}


/* =========================================
   TABLE STYLES (Header & Body)
   ========================================= */

/* Paksa background card tabel mengikuti tema */
.risk-dashboard-wrapper .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.risk-dashboard-wrapper .card-header {
    background-color: var(--card-bg);
    /* Header Card sama dengan Body Card */
    border-bottom: 1px solid var(--border-color);
}

.risk-dashboard-wrapper .card-header h6 {
    color: var(--table-head-text);
    /* Judul tabel ikut tema */
}

/* Table Header Fix */
.risk-dashboard-wrapper .table thead th {
    background-color: var(--table-head-bg);
    /* ADAPTIVE */
    color: var(--table-head-text);
    /* ADAPTIVE */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-top: none;
    border-bottom: 2px solid var(--border-color);
}

/* Table Body Fix */
.risk-dashboard-wrapper .table td {
    vertical-align: middle;
    font-size: 0.9rem;
    color: var(--text-primary);
    /* ADAPTIVE: Teks isi tabel */
    border-top: 1px solid var(--border-color);
}

/* Table Hover Row */
.risk-dashboard-wrapper .table-hover tbody tr:hover {
    background-color: var(--table-row-hover);
    color: var(--text-primary);
}

/* Kotak Skor (Badges) - Tetap Cerah */
.risk-score-box {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 900;
    min-width: 40px;
    text-align: center;
    color: #fff;
    /* Teks dalam kotak skor selalu putih */
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.bg-excel-low {
    background-color: var(--risk-low);
}

.bg-excel-medium {
    background-color: var(--risk-medium);
    color: #333 !important;
    /* Kuning text hitam biar kebaca */
}

.bg-excel-high {
    background-color: var(--risk-high);
}

.bg-excel-extreme {
    background-color: var(--risk-extreme);
}

/* =========================================
   UPDATE: CENTER ALIGNMENT
   ========================================= */

/* Paksa konten di dalam kartu untuk menjadi kolom (tumpuk ke bawah) dan rata tengah */
.risk-card-item .d-flex {
    flex-direction: column !important;
    /* Mengubah baris menjadi kolom */
    justify-content: center !important;
    /* Tengah vertikal */
    align-items: center !important;
    /* Tengah horizontal */
    text-align: center !important;
    /* Teks rata tengah */
    height: 100%;
    width: 100%;
}

/* Mengatur container teks agar tidak rata kiri */
.risk-card-item .d-flex>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Beri jarak sedikit antara Angka Besar dengan Ikon di bawahnya */
.risk-card-item .risk-icon {
    margin-top: 0.5rem;
    font-size: 2.2rem;
    /* Sedikit diperbesar agar seimbang */
    opacity: 0.7;
}

/* Pastikan label tetap rapi */
.text-label {
    margin-bottom: 0.2rem;
    width: 100%;
    text-align: center;
}

/* Pastikan angka besar rata tengah */
.text-value {
    width: 100%;
    text-align: center;
}

/* =========================================
   VARIABLES & THEME ADAPTIVE
   ========================================= */
:root {
    --risk-low: #28a745;
    --risk-medium: #ffc107;
    --risk-high: #fd7e14;
    --risk-extreme: #dc3545;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --table-head-bg: #f8fafc;
    --table-head-text: #475569;
}

/* Jika Anda menggunakan Dark Mode, variabel ini akan otomatis berubah */
[data-theme='dark'] {
    --card-bg: #1e293b;
    --border-color: #334155;
    --text-primary: #f1f5f9;
    --table-head-bg: #0f172a;
    --table-head-text: #94a3b8;
}

/* =========================================
   STAT CARDS (Center Alignment)
   ========================================= */
.risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.risk-stat-card {
    display: block;
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.risk-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-icon {
    margin-top: 0.5rem;
    font-size: 2rem;
    opacity: 0.3;
    transition: all 0.3s ease;
}

/* Color Indicators */
.border-low {
    border-left: 5px solid var(--risk-low);
}

.text-low {
    color: var(--risk-low);
}

.risk-stat-card:hover .icon-low {
    color: var(--risk-low);
    opacity: 1;
}

.border-medium {
    border-left: 5px solid var(--risk-medium);
}

.text-medium {
    color: var(--risk-medium);
}

.risk-stat-card:hover .icon-medium {
    color: var(--risk-medium);
    opacity: 1;
}

.border-high {
    border-left: 5px solid var(--risk-high);
}

.text-high {
    color: var(--risk-high);
}

.risk-stat-card:hover .icon-high {
    color: var(--risk-high);
    opacity: 1;
}

.border-extreme {
    border-left: 5px solid var(--risk-extreme);
}

.text-extreme {
    color: var(--risk-extreme);
}

.risk-stat-card:hover .icon-extreme {
    color: var(--risk-extreme);
    opacity: 1;
}

/* =========================================
   TABLE STYLES
   ========================================= */
.risk-section-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.risk-table {
    width: 100%;
    border-collapse: collapse;
}

.risk-table thead th {
    background-color: var(--table-head-bg);
    color: var(--table-head-text);
    padding: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.risk-table td {
    padding: 1rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}



.bg-risk-low {
    background-color: var(--risk-low);
}

.bg-risk-medium {
    background-color: var(--risk-medium);
    color: #333 !important;
}

.bg-risk-high {
    background-color: var(--risk-high);
}

.bg-risk-extreme {
    background-color: var(--risk-extreme);
}

/* Container Header Tombol */
.action-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

/* Modal Overlay */
/* Pastikan ini ada di file CSS Anda */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Background gelap transparan */
    backdrop-filter: blur(4px);
    /* Efek blur di belakang modal */
    display: flex;
    /* Untuk memposisikan modal di tengah */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Pastikan di atas semua elemen lain */
    padding: 1rem;
    transition: all 0.3s ease;
}

/* KUNCI: Sembunyikan modal saat status hidden */
.modal-hidden {
    display: none !important;
    opacity: 0;
}

/* Tampilkan modal saat status visible */
.modal-visible {
    display: flex !important;
    opacity: 1;
}

.modal-container {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-visible {
    visibility: visible;
    opacity: 1;
}

.modal-visible .modal-container {
    transform: scale(1);
}

/* Header & Footer */
.modal-header {
    background: #2563eb;
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.modal-form {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Grid & Form Elements */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.5rem;
}

.form-input {
    padding: 0.625rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    outline: none;
}

.form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.input-readonly {
    background-color: #f1f5f9;
    cursor: not-allowed;
}

/* Buttons */
.btn-primary {
    background-color: #2563eb;
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

.btn-secondary {
    background-color: #f1f5f9;
    color: #475569;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

/* --- Styling Tombol di Tengah --- */
.action-header-center {
    text-align: center;
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.helper-text {
    color: #94a3b8;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.btn-primary-lg {
    background-color: #2563eb;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    /* Lonjong / Pill */
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
    transition: all 0.2s;
}

.btn-primary-lg:hover {
    transform: translateY(-2px);
    background-color: #1d4ed8;
}

/* --- FIX MODAL (Wajib Fixed agar Melayang) --- */
.modal-overlay {
    position: fixed;
    /* Kunci agar melayang */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.8);
    /* Gelap transparan */
    backdrop-filter: blur(5px);
    z-index: 9999 !important;
    /* Paling depan */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Kunci agar modal tersembunyi total */
.modal-hidden {
    display: none !important;
}

.modal-visible {
    display: flex !important;
}

.modal-container {
    background: white;
    width: 100%;
    max-width: 600px;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: #1e293b;
    /* Warna teks gelap dalam modal */
    animation: modalIn 0.3s ease-out;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.th-group-monev {
    background-color: #6f42c1 !important;
    color: white;
    text-align: center;
    vertical-align: middle !important;
}

.th-group-inherent {
    background-color: #f8f9fa;
    text-align: center;
}

.th-group-residual {
    background-color: #e9ecef;
    text-align: center;
}

.th-group-target {
    background-color: #f0f4f8;
    text-align: center;
}

.table-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

.risk-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    min-width: 30px;
}

.risk-extreme {
    background-color: #dc3545;
}

.risk-high {
    background-color: #fd7e14;
}

.risk-medium {
    background-color: #eeff00;
    color: #212529 !important;
}

.risk-low {
    background-color: #28a745;
}

.toggle-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: 1px solid var(--btn-border);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.toggle-btn:hover {
    background-color: var(--btn-hover-bg);
}

.toggle-btn.active {
    background-color: var(--btn-active-bg);
    color: var(--btn-active-text);
    border-color: var(--btn-active-border);
}

.toggle-icon {
    width: 16px;
    text-align: center;
}


/* Container DataTables agar lebih rapi */
.dataTables_wrapper {
    padding-top: 10px;
    font-family: 'Inter', sans-serif;
    /* Gunakan font yang bersih */
}

/* Mempercantik Input Search dan Show Entries */
.dataTables_length select,
.dataTables_filter input {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    outline: none !important;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.dataTables_length select:focus,
.dataTables_filter input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mengatur posisi label agar tidak terlalu rapat */
.dataTables_length,
.dataTables_filter {
    margin-bottom: 15px !important;
    color: #64748b !important;
    font-size: 0.85rem;
}

/* Mempercantik Header Tabel */
table.dataTable thead th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 12px 10px !important;
}

/* Mempercantik Baris Tabel */
table.dataTable tbody tr {
    transition: background-color 0.2s;
}

table.dataTable tbody tr:hover {
    background-color: #f1f5f9 !important;
}

table.dataTable tbody td {
    padding: 12px 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.85rem;
}

/* Mempercantik Navigasi Halaman (Pagination) */
.dataTables_paginate {
    margin-top: 15px !important;
    padding-top: 10px !important;
}

.dataTables_paginate .paginate_button {
    padding: 5px 12px !important;
    margin-left: 4px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: white !important;
    color: #475569 !important;
    font-size: 0.8rem !important;
}

.dataTables_paginate .paginate_button.current {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

.dataTables_paginate .paginate_button:hover:not(.current) {
    background: #f8fafc !important;
    color: #3b82f6 !important;
    border-color: #cbd5e1 !important;
}

/* Menghilangkan garis bawah default datatables */
table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0 !important;
}







/* ==========================================================================
   1. MODERN VARIABLES & BASE PREFERENCES
   ========================================================================== */

/* Reset Global untuk Dashboard */
.dash-container {
    padding: 2rem;
    background-color: var(--srv-bg);
    font-family: 'Inter', sans-serif;
    color: var(--srv-text-main);
    min-height: 100vh;
}

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.header-text h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--srv-text-main);
}

.header-text p {
    color: var(--srv-text-sub);
    font-size: 0.95rem;
    margin-top: 5px;
}

.year-selector {
    padding: 10px 16px;
    border-radius: var(--srv-radius-sm);
    border: 1px solid var(--srv-border);
    background: white;
    font-weight: 700;
    color: var(--srv-primary);
    cursor: pointer;
    box-shadow: var(--srv-shadow-sm);
    outline: none;
    transition: 0.3s;
}

.year-selector:hover {
    border-color: var(--srv-primary);
}

/* ==========================================================================
   3. TOP STATS GRID (3 GRID ATAS)
   ========================================================================== */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--srv-card-bg);
    padding: 1.5rem;
    border-radius: var(--srv-radius-md);
    box-shadow: var(--srv-shadow-md);
    display: flex;
    align-items: center;
    border: 1px solid white;
    /* Glassmorphism subtle */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-card:hover {
    transform: translateY(-5px);
}

/* Khusus Card ke-3 (Index Global) agar lebih stand out */
.stat-card.highlight {
    background: var(--srv-primary-gradient);
    color: white;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 1.25rem;
}

.icon-blue {
    background: #E9EDFE;
    color: var(--srv-primary);
}

.icon-green {
    background: #E6F9F0;
    color: var(--srv-success);
}

.icon-orange {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--srv-text-sub);
    margin-bottom: 2px;
}

.stat-card.highlight .stat-label {
    color: rgba(255, 255, 255, 0.8);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

/* ==========================================================================
   4. MIDDLE GRID (CHARTS & LIVE INSIGHTS)
   ========================================================================== */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.data-card {
    background: white;
    border-radius: var(--srv-radius-lg);
    box-shadow: var(--srv-shadow-md);
    padding: 1.5rem;
    border: none;
}

.data-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Style Khusus Live Insights (Menyala) */
.insight-card {
    background: #0B1437 !important;
    /* Navy Dark Professional */
    color: white !important;
}

.insight-item label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}

.insight-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #05CD99;
    /* Glow color */
    text-shadow: 0 0 10px rgba(5, 205, 153, 0.3);
    margin: 5px 0;
}

.insight-score {
    font-size: 0.85rem;
    font-weight: 500;
    color: #A3AED0;
}

.status-indicator {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-success {
    background: var(--srv-success);
    box-shadow: 0 0 12px var(--srv-success);
}

/* ==========================================================================
   5. TABLES SECTION
   ========================================================================== */
.survey-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Card Header dengan Gradient */
.card-head {
    background: var(--srv-primary);
    padding: 1.25rem 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    border-radius: 20px 20px 0 0;
    color: white;
}

.card-head.orange-gradient {
    background: linear-gradient(90deg, #FF9900 0%, #FFB547 100%);
}

.card-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

/* Utility Header (Show Entries) */
.table-utility-header {
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--srv-text-sub);
}

.entries-select {
    border: 1px solid var(--srv-border);
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--srv-text-main);
    outline: none;
}

/* ... (Kode Grid dan Card tetap sama) ... */

/* Tambahkan/Perbarui Bagian Tabel agar mendukung variabel CSS */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ds-text-main);
    /* Menggunakan variabel teks utama */
}

.custom-table thead th {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid var(--ds-border);
    font-size: 13px;
    font-weight: 800;
    color: var(--ds-text-main);
}

.custom-table tbody td {
    padding: 15px;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
    color: var(--ds-text-main);
    /* Memastikan teks body tabel adaptif */
}

/* Styling Khusus Unit agar tetap kontras */
.unit-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ds-text-main);
    margin-bottom: 4px;
}

.unit-meta {
    font-size: 11px;
    color: var(--ds-text-muted, #858796);
}

.table-utility-header span,
.show-entries span {
    color: var(--ds-text-main);
    font-size: 13px;
}

/* ==========================================================================
   DARK MODE FIXES (Tambahkan ini di bagian bawah CSS)
   ========================================================================== */
body.dark-mode,
[data-theme='dark'] {
    --ds-text-main: #ffffff;
    /* Teks utama menjadi putih */
    --ds-text-muted: #aeb1c5;
    /* Teks kecil/meta menjadi abu terang */
}

/* Memastikan elemen spesifik di dalam tabel mengikuti mode gelap */
body.dark-mode .custom-table,
[data-theme='dark'] .custom-table {
    color: #ffffff !important;
}

body.dark-mode .unit-name,
[data-theme='dark'] .unit-name {
    color: #ffffff !important;
}

body.dark-mode .unit-meta,
[data-theme='dark'] .unit-meta {
    color: #aeb1c5 !important;
}

/* Memperbaiki dropdown select di mode gelap */
body.dark-mode .entries-select,
[data-theme='dark'] .entries-select {
    background-color: #1a1f37;
    color: #ffffff;
    border: 1px solid #2d3748;
}

/* Memastikan angka No dan Responden terlihat */
body.dark-mode .custom-table strong,
[data-theme='dark'] .custom-table strong {
    color: #ffffff;
}

/* Penyesuaian Pagination */
body.dark-mode .custom-pagination li,
[data-theme='dark'] .custom-pagination li {
    background: #1a1f37;
    color: #ffffff;
    border-color: #2d3748;
}

.badge-unit {
    background: #F4F7FE;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

/* Score Badge Profesional */
.score-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(67, 24, 255, 0.08);
    color: var(--srv-primary);
    font-weight: 800;
    font-size: 0.9rem;
}

.score-badge.orange {
    background: rgba(255, 153, 0, 0.1);
    color: #FF9900;
}

/* Detail Button */
.btn-detail {
    display: inline-block;
    padding: 6px 14px;
    background: #F4F7FE;
    color: var(--srv-primary);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    transition: 0.2s;
}

.btn-detail:hover {
    background: var(--srv-primary);
    color: white;
}

/* ==========================================================================
   6. COMPONENTS (MODAL, BUTTONS, DLL)
   ========================================================================== */
.btn-icon-action {
    background: transparent;
    border: 1px solid var(--srv-border);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--srv-text-sub);
    cursor: pointer;
    transition: 0.2s;
}

.btn-icon-action:hover {
    background: var(--srv-bg);
    color: var(--srv-primary);
    border-color: var(--srv-primary);
}

/* Responsive Fix */
@media (max-width: 1200px) {
    .main-grid {
        grid-template-columns: 1fr 1fr;
    }

    .insight-card {
        grid-column: span 2;
    }
}

@media (max-width: 992px) {

    .stats-row,
    .survey-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .main-grid {
        grid-template-columns: 1fr;
    }

    .insight-card {
        grid-column: span 1;
    }
}

/* ==========================================================================
   1. GLOBAL & VARIABLES
   ========================================================================== */

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   3. SERVICE DETAIL COMPONENT (srv-)
   ========================================================================== */
.srv-container {
    padding: 2rem;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.srv-detail-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}

.srv-answer-card {
    padding: 1.5rem;
    background-color: white;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
}

/* Professional Rating Badge */
.srv-rating-badge {
    display: inline-flex;
    align-items: center;
    background-color: #3b82f6;
    color: white;
    border-radius: 8px;
    overflow: hidden;
}

.srv-rating-label {
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    font-size: 0.7rem;
    font-weight: 800;
}

.srv-rating-value {
    padding: 0.5rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 800;
}

/* ==========================================================================
   4. DASHBOARD COMPONENT (dash- / survey-grid)
   ========================================================================== */
.dash-container {
    background: var(--ds-bg);
    padding: 25px;
    min-height: 100vh;
}

/* Dashboard Header */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.year-selector {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    background: var(--ds-card-bg);
    font-weight: 700;
    cursor: pointer;
}

/* Grids */
.main-grid,
.survey-grid-wrapper {
    display: grid;
    gap: 25px;
    margin-top: 20px;
    align-items: stretch;
}

.main-grid {
    grid-template-columns: repeat(3, 1fr);
}

.survey-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
}

/* Dashboard Cards */
.data-card {
    background: var(--ds-card-bg);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--ds-shadow);
    border: 1px solid var(--ds-border);
}

.card-head {
    margin: -20px -20px 20px -20px;
    padding: 15px 20px;
    background: var(--ds-accent);
    border-radius: 20px 20px 0 0;
    color: white;
}

/* Stats */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--ds-card-bg);
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--ds-border);
}

.stat-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* Table Utilities */
.table-utility-header,
.table-utility-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.custom-pagination {
    display: flex;
    list-style: none;
    gap: 5px;
    margin: 0;
}

.custom-pagination li {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    font-size: 12px;
    cursor: pointer;
    font-weight: 700;
}

.custom-pagination li.active {
    background: var(--ds-accent);
    color: white;
}

/* ==========================================================================
   5. MODAL SYSTEM
   ========================================================================== */
.ds-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 20, 55, 0.85);
    backdrop-filter: blur(8px);
}

.ds-modal-content {
    background-color: #ffffff;
    margin: 5vh auto;
    padding: 25px;
    width: 90%;
    max-width: 1100px;
    border-radius: 24px;
    height: 85vh;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .main-grid {
        grid-template-columns: 1fr 1fr;
    }

    .survey-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .main-grid,
    .stats-row,
    .srv-detail-grid,
    .pub-form-row {
        grid-template-columns: 1fr;
    }

    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .pub-grid-selection {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .table-utility-footer {
        flex-direction: column;
        gap: 15px;
    }
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */
.srv-text-answer {
    padding: 1.25rem;
    background-color: var(--bg-tertiary);
    border-left: 5px solid var(--accent-color);
    border-radius: 0.75rem;
}

.pub-hidden {
    display: none !important;
}

.orange-gradient {
    background: linear-gradient(90deg, #FFB547, #ff9900);
}

.score-badge {
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 800;
    background: var(--ds-icon-bg);
    color: var(--ds-accent);
}



/* --- Root Variables & Reset --- */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --success-color: #059669;
    --success-hover: #047857;
    --bg-light: #f8fafc;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius: 8px;
}

.srv-container {
    padding: 2rem;
    background-color: var(--bg-light);
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-main);
}

/* --- Header Section --- */
.srv-header-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1.5rem;
}

.srv-page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.srv-page-subtitle {
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-size: 1rem;
}

/* --- Buttons --- */
.srv-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 500;
}

.srv-btn-outline:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.srv-btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--success-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.srv-btn-export:hover {
    background-color: var(--success-hover);
}

.srv-btn-view {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: opacity 0.2s;
}

.srv-btn-view:hover {
    background-color: var(--primary-hover);
}

/* --- Action Row & Cards --- */
.srv-action-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.srv-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.srv-flex-center {
    display: flex;
    align-items: center;
}

.srv-counter-box {
    text-align: center;
    min-width: 150px;
}

.srv-label-sm {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.srv-big-number {
    font-size: 2rem;
    margin: 0;
    color: var(--primary-color);
    font-weight: 800;
}

/* --- Table Styles --- */
.srv-table-wrapper {
    padding: 0;
    /* Remove padding for table to reach edges */
    overflow: hidden;
}

.srv-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.srv-data-table thead {
    background-color: #f8fafc;
}

.srv-data-table th {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.srv-table-row {
    transition: background 0.2s;
}

.srv-table-row:hover {
    background-color: #f1f5f9;
}

.srv-data-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* --- Utility Classes inside Table --- */
.srv-date-main {
    display: block;
    font-weight: 600;
    color: var(--text-main);
}

.srv-date-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.srv-font-bold {
    font-weight: 600;
    color: var(--text-main);
}

.srv-badge-pill {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.srv-text-center {
    text-align: center;
}

/* --- Empty State --- */
.srv-empty-state {
    padding: 4rem 0 !important;
    text-align: center;
    color: var(--text-muted);
}

.srv-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .srv-action-row {
        grid-template-columns: 1fr;
    }

    .srv-header-alt {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .srv-data-table {
        display: block;
        overflow-x: auto;
    }
}




/* Header Section */
.srv-header-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.srv-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.srv-page-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Tombol Kembali */
.srv-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid #cbd5e1;
    background: white;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.srv-btn-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

/* Grid Layout */
.srv-detail-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
}

/* Card Styling */
.srv-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
}

.srv-detail-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #0f172a;
}

.srv-detail-section-title i {
    color: #3b82f6;
}

/* Info List (Sidebar) */
.srv-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.srv-info-item label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.srv-info-item p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
}

/* Answers Section */
.srv-answers-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.srv-answer-card {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #3b82f6;
}

.srv-question-text {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    color: #334155;
    line-height: 1.5;
}

.srv-text-answer {
    line-height: 1.6;
    color: #475569;
    white-space: pre-line;
}

/* Rating Badge Styling */
.srv-rating-badge {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    overflow: hidden;
}

.srv-rating-label {
    padding: 0.4rem 0.8rem;
    background: #3b82f6;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}

.srv-rating-value {
    padding: 0.4rem 1rem;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Utilities */
.srv-text-muted {
    color: #94a3b8;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 992px) {
    .srv-detail-grid {
        grid-template-columns: 1fr;
    }

    .srv-detail-sidebar {
        order: 2;
    }

    .srv-detail-main {
        order: 1;
    }
}

@media (max-width: 640px) {
    .srv-header-alt {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .srv-btn-outline {
        width: 100%;
        justify-content: center;
    }
}


















:root {
    /* Palette Default (Dark Mode) */

    --sw-bg: #f8fafc;
    --sw-card: #ffffff;
    --sw-text: #1e293b;
    --sw-text-muted: #64748b;
    --sw-border: #e2e8f0;
    --sw-header-bg: #f1f5f9;
    --sw-primary-soft: rgba(129, 140, 248, 0.2);


    --sw-primary: #4f46e5;
    --sw-primary-soft: rgba(79, 70, 229, 0.1);
    --sw-success: #10b981;
    --sw-success-soft: rgba(16, 185, 129, 0.1);
    --sw-danger: #ef4444;
    --sw-danger-soft: rgba(239, 68, 68, 0.1);
    --sw-warning: #f59e0b;
    --sw-warning-soft: rgba(245, 158, 11, 0.1);
}

/* Override untuk Light Mode */
body.dark-mode {

    --sw-bg: #0f172a;
    --sw-card: #1e293b;
    --sw-text: #f1f5f9;
    --sw-text-muted: #94a3b8;
    --sw-border: #334155;
    --sw-header-bg: #0f172a;
    --sw-primary-soft: rgba(79, 70, 229, 0.1);


}

.survey-design-wrapper {
    font-family: 'Inter', sans-serif;
    padding: 20px;
    min-height: 100vh;
    background-color: var(--sw-bg);
    color: var(--sw-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography & Header */
.survey-design-wrapper h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--sw-text);
    margin: 0;
}

.survey-design-wrapper .meta-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Buttons Main */
.btn-sw {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    font-size: 14px;
}

.btn-sw-primary {
    background: var(--sw-primary);
    color: white !important;
}

.btn-sw-success {
    background: var(--sw-success);
    color: white !important;
}

.btn-sw-back {
    background: var(--sw-card);
    border: 1px solid var(--sw-border);
    color: var(--sw-text-muted) !important;
    width: 42px;
    height: 42px;
    justify-content: center;
}

.btn-sw-secondary {
    background: var(--sw-header-bg);
    border: 1px solid var(--sw-border);
    color: var(--sw-text) !important;
}

.btn-sw:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Card System */
.sw-card {
    background: var(--sw-card);
    border: 1px solid var(--sw-border);
    border-radius: 16px;
    margin-top: 30px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.sw-card-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--sw-border);
    background: var(--sw-card);
}

/* Table System */
.table-res {
    overflow-x: auto;
}

.sw-table {
    width: 100%;
    border-collapse: collapse;
}

.sw-table th {
    background: var(--sw-header-bg);
    padding: 15px 25px;
    color: var(--sw-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--sw-border);
}

.sw-table td {
    padding: 18px 25px;
    border-bottom: 1px solid var(--sw-border);
    color: var(--sw-text);
    vertical-align: middle;
}

.sw-table tr:hover {
    background: rgba(129, 140, 248, 0.03);
}

/* Badge & Actions */
.sw-badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

.sw-badge-primary {
    background: var(--sw-primary-soft);
    color: var(--sw-primary);
}

.sw-badge-warning {
    background: var(--sw-warning-soft);
    color: var(--sw-warning);
}

.sw-badge-outline {
    border: 1px solid var(--sw-border);
    color: var(--sw-text-muted);
}

.action-btn {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    transition: 0.2s;
    cursor: pointer;
}

.edit-btn {
    background: var(--sw-primary-soft);
    color: var(--sw-primary);
}

.delete-btn {
    background: var(--sw-danger-soft);
    color: var(--sw-danger);
}

/* MODAL PROFESSIONAL STYLING */
.sw-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.sw-modal.active {
    display: flex;
}

.sw-modal-content {
    background: var(--sw-card);
    width: 100%;
    max-width: 550px;
    border-radius: 24px;
    border: 1px solid var(--sw-border);
    color: var(--sw-text);
    animation: swFadeUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.sw-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--sw-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sw-modal-body {
    padding: 25px;
}

.sw-modal-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--sw-border);
    background: var(--sw-header-bg);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form Elements Inside Modal */
.sw-form-group {
    margin-bottom: 20px;
}

.sw-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sw-text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.sw-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--sw-bg);
    border: 1.5px solid var(--sw-border);
    border-radius: 12px;
    color: var(--sw-text);
    font-size: 14px;
    transition: all 0.2s;
    outline: none;
}

.sw-input:focus {
    border-color: var(--sw-primary);
    box-shadow: 0 0 0 4px var(--sw-primary-soft);
}

/* Info Box in Import Modal */
.sw-info-box {
    background: var(--sw-primary-soft);
    border: 1px solid var(--sw-primary);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sw-text);
}

@keyframes swFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sm-export-btn {
    background-color: #28a745;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.sm-export-btn:hover {
    background-color: #218838;
    color: white;
}



/* =====================================================
   SUBMISSION STATUS BOX - DARK & LIGHT MODE
   ===================================================== */

/* Base Styles */
.submission-status-box {
    margin-bottom: 1rem;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Dark Mode (Default) */
.submission-status-box.submitted {
    background-color: #2a9c7a;

}

.submission-status-box.draft {
    background-color: #71a3aa;
}

/* Light Mode */
.light-mode .submission-status-box.submitted {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.light-mode .submission-status-box.draft {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

/* Title */
.submission-status-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Info Text */
.submission-status-info {
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.6;
}

.submission-status-info strong {
    font-weight: 600;
}

/* Actions Container */
.submission-status-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Buttons Base */
.btn-submit-laporan,
.btn-unsubmit-laporan {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-submit-laporan:hover,
.btn-unsubmit-laporan:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-submit-laporan:active,
.btn-unsubmit-laporan:active {
    transform: translateY(0);
}

/* Submit Button - Dark Mode */
.btn-submit-laporan {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.btn-submit-laporan:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Unsubmit Button - Dark Mode */
.btn-unsubmit-laporan {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.btn-unsubmit-laporan:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Submit Button - Light Mode */
.light-mode .btn-submit-laporan {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.light-mode .btn-submit-laporan:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Unsubmit Button - Light Mode */
.light-mode .btn-unsubmit-laporan {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.light-mode .btn-unsubmit-laporan:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Icon Styles */
.submission-status-title i {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .submission-status-box {
        padding: 1rem;
    }

    .submission-status-actions {
        width: 100%;
        margin-top: 1rem;
    }

    .btn-submit-laporan,
    .btn-unsubmit-laporan {
        flex: 1;
        justify-content: center;
    }
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.submission-status-box {
    animation: slideIn 0.3s ease-out;
}

/* Disabled State */
.btn-submit-laporan:disabled,
.btn-unsubmit-laporan:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading State */
.btn-submit-laporan.loading,
.btn-unsubmit-laporan.loading {
    pointer-events: none;
    position: relative;
}

.btn-submit-laporan.loading::after,
.btn-unsubmit-laporan.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}