/*
Theme Name: Protokoler Theme
Description: Tema Khusus Media Laporan Protokoler Kemenbud
*/

/* ====================================================
   KEMENBUD GLOBAL COLOR PALETTE
   ==================================================== */
:root {
    --kemenbud-maroon: #5A2F2F;
    --kemenbud-gold: #dbaf6c;
    --kemenbud-bg: #fcfaf8; 
    --kemenbud-text: #2d3748;
    --kemenbud-border: #eaddc5;
}

body { font-family: 'Inter', sans-serif; background-color: var(--kemenbud-bg); margin: 0; color: var(--kemenbud-text); }

/* --- 1. HEADER & NAV STYLES --- */
.nav-top { background-color: #fff; border-bottom: 3px solid var(--kemenbud-gold); box-shadow: 0 2px 10px rgba(90, 47, 47, 0.1); padding: 15px 0; }
.nav-container { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; flex-wrap: wrap; }
.profile-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kemenbud-maroon); font-weight: 600; transition: 0.2s; }
.profile-link:hover { opacity: 0.8; }
.avatar-circle { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kemenbud-gold); }
.nav-menu { display: flex; gap: 20px; align-items: center; }
.nav-menu a { text-decoration: none; color: var(--kemenbud-maroon); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 6px; transition: 0.3s; }
.nav-menu a:hover { background-color: #fdfbf7; color: var(--kemenbud-gold); }
.nav-menu a.logout { color: #e53e3e !important; }
.btn-login-header { background-color: var(--kemenbud-maroon) !important; color: var(--kemenbud-gold) !important; border: 2px solid var(--kemenbud-maroon) !important; padding: 8px 20px !important; border-radius: 6px; }
.btn-login-header:hover { background-color: var(--kemenbud-gold) !important; color: var(--kemenbud-maroon) !important; border-color: var(--kemenbud-gold) !important; }

@media (max-width: 600px) {
    .nav-container { flex-direction: column; gap: 15px; text-align: center; }
    .nav-menu { flex-wrap: wrap; justify-content: center; width: 100%; }
    .nav-menu a { flex: 1; text-align: center; background-color: #fdfbf7; border: 1px solid var(--kemenbud-border); }
}

/* --- 2. LAYOUT KOTAK LOGIN & DASHBOARD --- */
/* Dashboard & Laporan tetap butuh ruang lega */
html body .protokoler-container {
    max-width: 900px !important; 
    margin: 40px auto !important;
    background-color: #ffffff !important; padding: 35px !important;
    border-radius: 12px !important; box-shadow: 0 4px 20px rgba(90,47,47,0.08) !important;
    border: 1px solid var(--kemenbud-border) !important;
}

/* KHUSUS Kotak Login / Daftar dirampingkan agar elegan */
html body .um, html body .uwp-login, html body .um-login {
    max-width: 450px !important; 
    margin: 60px auto !important;
    background-color: #ffffff !important; padding: 40px !important;
    border-radius: 12px !important; box-shadow: 0 4px 20px rgba(90,47,47,0.08) !important;
    border: 1px solid var(--kemenbud-border) !important;
}

/* --- 3. TABS LOGIN & REGISTER (Menghabisi garis biru Ultimate Member) --- */
html body .um-tab-header, html body .login-tabs {
    border-bottom: 2px solid transparent !important; display: flex !important; margin-bottom: 20px !important;
}
html body .um-tab-header li a, html body .login-tabs li a {
    color: #a0aec0 !important; opacity: 0.6 !important; background: transparent !important; font-weight: 500 !important;
    border-bottom: 3px solid transparent !important; padding: 10px 20px !important; text-decoration: none !important;
}

/* PEMBUNUH GARIS BIRU 3PX ULTIMATE MEMBER */
html body .um-tab-header li.active a, 
html body .login-tabs li.active a,
.um .um-tab-header li.active a, 
.um .um-tab-header li.active a:hover {
    color: var(--kemenbud-maroon) !important; 
    opacity: 1 !important; 
    font-weight: bold !important;
    border-bottom: 3px solid var(--kemenbud-maroon) !important; 
    background: transparent !important;
}

/* --- 4. FORMS & INPUTS --- */
html body label { 
    color: var(--kemenbud-maroon) !important; 
    font-weight: 600 !important; 
    display: block !important; 
    margin-bottom: 8px !important; /* Jarak nafas antara label dan kotak input */
}

html body input[type="text"], 
html body input[type="email"], 
html body input[type="password"], 
html body textarea, 
html body select {
    border: 1px solid var(--kemenbud-border) !important; 
    border-radius: 6px !important; 
    color: var(--kemenbud-text) !important; 
    background-color: #fff !important; 
    padding: 14px 16px !important; /* Bantalan dalam kotak diperluas */
    font-size: 16px !important; /* Teks dibesarkan agar mudah dibaca */
    width: 100% !important; 
    box-sizing: border-box !important;
    margin-bottom: 20px !important; /* Jarak antara kotak input dengan elemen di bawahnya */
}

html body input:focus, html body textarea:focus, html body select:focus {
    border-color: var(--kemenbud-gold) !important; box-shadow: 0 0 0 3px rgba(219, 175, 108, 0.2) !important; outline: none !important;
}

/* --- 5. TOMBOL UTAMA --- */
html body input[type="submit"], html body button[type="submit"], html body .btn-kemenbud, html body .um-button {
    background-color: var(--kemenbud-maroon) !important; color: var(--kemenbud-gold) !important; border: 2px solid var(--kemenbud-maroon) !important; border-radius: 8px !important; transition: all 0.3s ease !important; box-shadow: 0 4px 6px rgba(90,47,47,0.1) !important; font-weight: bold !important;
}
html body input[type="submit"]:hover, html body button[type="submit"]:hover, html body .btn-kemenbud:hover, html body .um-button:hover {
    background-color: var(--kemenbud-gold) !important; color: var(--kemenbud-maroon) !important; border-color: var(--kemenbud-gold) !important; transform: translateY(-2px) !important;
}

/* --- 6. DASHBOARD TABLES & LINKS --- */
html body table th, html body thead th { background-color: #fdfbf7 !important; color: var(--kemenbud-maroon) !important; border-bottom: 2px solid var(--kemenbud-gold) !important; }
html body table td { border-bottom: 1px solid var(--kemenbud-border) !important; }
html body td a[href*="laporan"], html body td a[href*="edit"], html body td a.edit { color: var(--kemenbud-gold) !important; font-weight:bold !important; text-decoration: none !important; }
html body td a[href*="laporan"]:hover, html body td a[href*="edit"]:hover, html body td a.edit:hover { color: var(--kemenbud-maroon) !important; }
html body td a[href*="hapus"], html body td a.delete, html body td a.action-delete { color: #e53e3e !important; font-weight:bold !important; text-decoration: none !important; }
html body td a[href*="hapus"]:hover, html body td a.delete:hover, html body td a.action-delete:hover { color: #c53030 !important; }

/* --- 7. DROPDOWN MENU ELEGAN --- */
html body ul.sub-menu, html body ul.children, html body .dropdown-menu {
    background-color: #fff !important; border: 1px solid var(--kemenbud-border) !important; box-shadow: 0 4px 15px rgba(90,47,47,0.08) !important; padding: 8px 0 !important; border-radius: 8px !important;
}
html body ul.sub-menu li, html body ul.children li, html body .dropdown-menu li { border: none !important; background: transparent !important; margin: 0 !important; }
html body ul.sub-menu li a, html body ul.children li a, html body .dropdown-menu li a {
    color: var(--kemenbud-text) !important; background-color: transparent !important; border: none !important; padding: 10px 20px !important; display: block !important; text-decoration: none !important;
}
html body ul.sub-menu li a:hover, html body ul.children li a:hover, html body .dropdown-menu li a:hover, html body ul.sub-menu li.current-menu-item > a {
    background-color: #fdfbf7 !important; color: var(--kemenbud-maroon) !important; font-weight: 600 !important;
}

/* ====================================================
   KEMENBUD HARDCODE KILLER (DASHBOARD & LOGIN)
   Melibas warna biru spesifik dari template lama
   ==================================================== */

/* 1. Melibas inline style biru di tombol "Buat Laporan" */
html body button.btn-primary,
/*
Theme Name: Protokoler Theme
Description: Tema Khusus Media Laporan Protokoler Kemenbud
*/

/* ====================================================
   KEMENBUD GLOBAL COLOR PALETTE
   ==================================================== */
:root {
    --kemenbud-maroon: #5A2F2F;
    --kemenbud-gold: #dbaf6c;
    --kemenbud-bg: #fcfaf8; 
    --kemenbud-text: #2d3748;
    --kemenbud-border: #eaddc5;
}

body { font-family: 'Inter', sans-serif; background-color: var(--kemenbud-bg); margin: 0; color: var(--kemenbud-text); }

/* --- 1. HEADER & NAV STYLES --- */
.nav-top { background-color: #fff; border-bottom: 3px solid var(--kemenbud-gold); box-shadow: 0 2px 10px rgba(90, 47, 47, 0.1); padding: 15px 0; }
.nav-container { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; flex-wrap: wrap; }
.profile-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kemenbud-maroon); font-weight: 600; transition: 0.2s; }
.profile-link:hover { opacity: 0.8; }
.avatar-circle { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kemenbud-gold); }
.nav-menu { display: flex; gap: 20px; align-items: center; }
.nav-menu a { text-decoration: none; color: var(--kemenbud-maroon); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 6px; transition: 0.3s; }
.nav-menu a:hover { background-color: #fdfbf7; color: var(--kemenbud-gold); }
.nav-menu a.logout { color: #e53e3e !important; }
.btn-login-header { background-color: var(--kemenbud-maroon) !important; color: var(--kemenbud-gold) !important; border: 2px solid var(--kemenbud-maroon) !important; padding: 8px 20px !important; border-radius: 6px; }
.btn-login-header:hover { background-color: var(--kemenbud-gold) !important; color: var(--kemenbud-maroon) !important; border-color: var(--kemenbud-gold) !important; }

@media (max-width: 600px) {
    .nav-container { flex-direction: column; gap: 15px; text-align: center; }
    .nav-menu { flex-wrap: wrap; justify-content: center; width: 100%; }
    .nav-menu a { flex: 1; text-align: center; background-color: #fdfbf7; border: 1px solid var(--kemenbud-border); }
}

/* --- 2. LAYOUT KOTAK LOGIN & DASHBOARD --- */
html body .protokoler-container {
    max-width: 950px !important; 
    margin: 40px auto !important;
    background-color: #ffffff !important; padding: 35px !important;
    border-radius: 12px !important; box-shadow: 0 4px 20px rgba(90,47,47,0.08) !important;
    border: 1px solid var(--kemenbud-border) !important;
}

html body .um, html body .uwp-login, html body .um-login {
    max-width: 450px !important; 
    margin: 60px auto !important;
    background-color: #ffffff !important; padding: 40px !important;
    border-radius: 12px !important; box-shadow: 0 4px 20px rgba(90,47,47,0.08) !important;
    border: 1px solid var(--kemenbud-border) !important;
}

/* --- 3. TABS LOGIN & REGISTER --- */
html body .um-tab-header, html body .login-tabs {
    border-bottom: 2px solid transparent !important; display: flex !important; margin-bottom: 20px !important;
}
html body .um-tab-header li a, html body .login-tabs li a {
    color: #a0aec0 !important; opacity: 0.6 !important; background: transparent !important; font-weight: 500 !important;
    border-bottom: 3px solid transparent !important; padding: 10px 20px !important; text-decoration: none !important;
}
html body .um-tab-header li.active a, 
html body .login-tabs li.active a,
.um .um-tab-header li.active a, 
.um .um-tab-header li.active a:hover {
    color: var(--kemenbud-maroon) !important; opacity: 1 !important; font-weight: bold !important;
    border-bottom: 3px solid var(--kemenbud-maroon) !important; background: transparent !important;
}

/* --- 4. FORMS & INPUTS --- */
html body label { color: var(--kemenbud-maroon) !important; font-weight: 600 !important; display: block !important; margin-bottom: 8px !important; }
html body input[type="text"], html body input[type="email"], html body input[type="password"], html body textarea, html body select {
    border: 1px solid var(--kemenbud-border) !important; border-radius: 6px !important; color: var(--kemenbud-text) !important; background-color: #fff !important; padding: 14px 16px !important; font-size: 16px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 20px !important;
}
html body input:focus, html body textarea:focus, html body select:focus {
    border-color: var(--kemenbud-gold) !important; box-shadow: 0 0 0 3px rgba(219, 175, 108, 0.2) !important; outline: none !important;
}

/* --- 5. TOMBOL UTAMA --- */
html body input[type="submit"], html body button[type="submit"], html body .btn-kemenbud, html body .um-button {
    background-color: var(--kemenbud-maroon) !important; color: var(--kemenbud-gold) !important; border: 2px solid var(--kemenbud-maroon) !important; border-radius: 8px !important; transition: all 0.3s ease !important; box-shadow: 0 4px 6px rgba(90,47,47,0.1) !important; font-weight: bold !important;
}
html body input[type="submit"]:hover, html body button[type="submit"]:hover, html body .btn-kemenbud:hover, html body .um-button:hover {
    background-color: var(--kemenbud-gold) !important; color: var(--kemenbud-maroon) !important; border-color: var(--kemenbud-gold) !important; transform: translateY(-2px) !important;
}

/* --- KEMENBUD HARDCODE KILLER --- */
html body button.btn-primary, html body .btn-primary { background: var(--kemenbud-maroon) !important; background-color: var(--kemenbud-maroon) !important; color: var(--kemenbud-gold) !important; border: 2px solid var(--kemenbud-maroon) !important; }
html body button.btn-primary:hover, html body .btn-primary:hover { background: var(--kemenbud-gold) !important; background-color: var(--kemenbud-gold) !important; color: var(--kemenbud-maroon) !important; border-color: var(--kemenbud-gold) !important; }


/* ====================================================
   FITUR MOBILE RESPONSIVENESS (HP & TABLET)
   ==================================================== */

/* Bungkus Tabel agar bisa di-swipe horizontal di HP */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--kemenbud-border);
    border-radius: 8px;
    margin-bottom: 15px;
}
.table-responsive table {
    min-width: 800px; /* Paksa lebar tabel agar kolom tidak tergencet */
    border: none !important; /* Hilangkan border ganda dengan wrapper */
}

@media (max-width: 768px) {
    /* 1. Perkecil padding kotak utama agar lega di layar HP */
    html body .protokoler-container {
        padding: 20px !important;
        margin: 20px 10px !important; 
        width: auto !important;
    }
    
    /* Kotak login lebih compact */
    html body .um, html body .uwp-login, html body .um-login {
        padding: 25px !important;
        margin: 20px 10px !important;
    }

    /* 2. Header Dashboard (Tab dan Tombol Buat Laporan) ditumpuk rapi ke bawah */
    html body .dashboard-header-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px;
    }
    html body .tabs-riwayat { justify-content: space-between; width: 100%; }
    html body .tabs-riwayat a { flex: 1; text-align: center; font-size: 13px;}
    html body #dropdown-container, html body #dropdown-container button { width: 100%; }
    html body #jenisDropdown { width: 100% !important; }

    /* 3. Grid di Single Laporan (Keberangkatan dll) dipaksa turun jadi 1 kolom ke bawah */
    html body .laporan-content div[style*="display:grid"],
    html body div[style*="display: flex; flex-wrap: wrap;"] {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
}
/* ====================================================
   PEMBUNUH GARIS BIRU TAB LOGIN (THE COMEBACK)
   Melibas warna biru dari hardcode halaman login
   ==================================================== */
html body button.tab-btn.active,
html body .tab-btn.active,
html body div.auth-tabs button.tab-btn.active {
    color: var(--kemenbud-maroon) !important;
    border-bottom: 3px solid var(--kemenbud-maroon) !important;
    font-weight: bold !important;
}

html body button.tab-btn,
html body .tab-btn {
    color: #a0aec0 !important; /* Warna abu-abu elegan untuk tab yang tidak aktif */
}