/* Judul halaman di navbar — lebih tebal & kontras */
.navbar .page-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: -0.01em;
}

/* Judul di dalam tabel (table-header) */
.table-header .table-title {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Sub-title di modal & form */
.modal-title {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

/* Label form lebih terlihat */
.form-group label {
    color: #374151 !important;
    font-weight: 600 !important;
}

/* Search input placeholder & icon lebih jelas */
.search-wrapper i {
    color: #94a3b8 !important;
}
.search-input {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1f2937 !important;
}
.search-input::placeholder {
    color: #94a3b8 !important;
}

/* Tombol "+ Baru" di header tabel — lebih menonjol */
.table-header .btn-primary-custom {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(87, 51, 165, 0.25) !important;
}

/* Tombol "Lihat Semua" di dashboard */
.btn-secondary-custom {
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
.btn-secondary-custom:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: rgba(87, 51, 165, 0.04) !important;
}

/* ══════════════════════════════════════════════════ */
/* 🔧 FIX: Border, Button Visibility, Title Contrast  */
/* ══════════════════════════════════════════════════ */

/* ── 1. HILANGKAN GARIS PUTIH / BORDER ── */
.sidebar              { border-right: none !important; }
.navbar               { border-bottom: none !important; }
.table-header          { border-bottom: none !important; }
.data-table th         { border-bottom: 1px solid #e2e8f0 !important; }
.data-table td         { border-bottom: 1px solid #f1f5f9 !important; }
.data-table tr:last-child td { border-bottom: none !important; }
.modal-header          { border-bottom: 1px solid #e2e8f0 !important; }
.modal-footer          { border-top: 1px solid #e2e8f0 !important; }
.pagination-custom     { border-top: 1px solid #f1f5f9 !important; }
.sidebar-header        { border-bottom-color: rgba(255,255,255,0.06) !important; }

/* Shadow halus pengganti border pada card */
.table-container       { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03); }
.modal-content         { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.dropdown-menu-custom  { box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
.notification-dropdown { box-shadow: 0 10px 40px rgba(0,0,0,0.12); }

/* ── 2. TOMBOL AKSI TABEL — TERLIHAT JELAS ── */
.btn-icon {
    color: #64748b !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
    background: #ffffff !important;
}
.btn-icon:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: rgba(87, 51, 165, 0.06) !important;
    transform: translateY(-1px);
}
.btn-icon:disabled {
    color: #64748b !important;
    border-color: #64748b !important;
    opacity: 0.4 !important;
    background: #f8fafc !important;
    cursor: not-allowed !important;
}

/* ── 3. JUDUL — KONTRAS TINGGI ── */
.navbar .page-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}
.table-header .table-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
.modal-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}
.form-group label {
    color: #374151 !important;
    font-weight: 600 !important;
}

/* ── 4. SEARCH & INPUT AREA ── */
.search-wrapper i {
    color: #94a3b8 !important;
}
.search-input {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1f2937 !important;
}
.search-input::placeholder { color: #94a3b8 !important; }
.search-input:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
}

/* ── 5. TOMBOL UTAMA DI TABLE HEADER ── */
.table-header .btn-primary-custom {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(87, 51, 165, 0.3) !important;
}

/* ── 6. TOOLTIP TETAP TERBACA ── */
.tooltip-custom::after {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* ══════════════════════════════════════════════════ */
/* 🔧 FIX FINAL: Sidebar/Navbar #222d31, Judul Putih,  */
/*              Tombol Notifikasi Jelas                */
/* ══════════════════════════════════════════════════ */

/* ── SIDEBAR & NAVBAR: Hitam Doff (#222d31) ── */
.sidebar {
    background: #222d31 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.navbar {
    background: white !important;
}

/* Separator sidebar-header yang lebih halus */
.sidebar-header {
    border-bottom-color: rgba(255,255,255,0.07) !important;
}

/* ── JUDUL NAVBAR: Putih Tebal ── */
.navbar .page-title {
    color: #222d31 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-shadow: none !important;
}

/* ── TOMBOL NOTIFIKASI: Jelas & Terlihat ── */
.notification-btn {
    background: rgba(255,255,255,0.1) !important;
    border-color: #94a3b8 !important;
    color: #94a3b8 !important;
}
.notification-btn:hover {
    background: #f4bd5d !important;
    border-color: #f4bd5d !important;
    color: #94a3b8 !important;
}
.notification-btn i {
    color: #94a3b8 !important;
    font-size: 18px !important;
}
.notification-btn:hover i {
    color: #ffffff !important;
}

/* Badge notifikasi di atas tombol lonceng */
.notification-badge {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* ── USER MENU DI NAVBAR ── */
.user-menu {
    color: #e2e8f0 !important;
}
.user-menu:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}
.user-name {
    color: #525b67 !important;
}
.user-role {
    color: #94a3b8 !important;
}
.user-menu .bi-chevron-down {
    color: #94a3b8 !important;
}

/* ── DROPDOWN NOTIFIKASI & USER (sesuai warna baru) ── */
.notification-dropdown,
.dropdown-menu-custom {
    background: #ffffff !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.notification-dropdown .notif-header {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
.notif-title {
    color: #222d31 !important;
}
.notif-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
.notif-item:hover {
    background: rgba(255,255,255,0.06) !important;
}
.notif-item.unread {
    background: rgba(87, 51, 165, 0.1) !important;
}
.notif-item-title {
    color: #94a3b8 !important;
}
.notif-item-desc {
    color: #94a3b8 !important;
}
.notif-item-time {
    color: #64748b !important;
}
.dropdown-item-custom {
    color: #94a3b8 !important;
}
.dropdown-item-custom:hover {
    background: rgba(86, 50, 164, 0.15) !important;
    color: #5733a5 !important;
}
.dropdown-item-custom.danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* ── SIDEBAR NAV: Kontras Tetap Bagus ── */
.sidebar .nav-item {
    color: #cbd5e1 !important;
}
.sidebar .nav-item:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
}
.sidebar .nav-item.active {
    background: var(--primary) !important;
    color: #ffffff !important;
}
.sidebar .nav-section-title {
    color: #64748b !important;
}

/* ── SIDEBAR LOGO & BRAND ── */
.sidebar-logo {
    background: var(--primary) !important;
}
.sidebar-brand {
    color: #ffffff !important;
}
.sidebar-brand span {
    color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════ */
/* ✨ DROPDOWN ANIMATION: Fade + Slide Down           */
/* ══════════════════════════════════════════════════ */
.notification-dropdown,
.dropdown-menu-custom {
  /* Ganti display:none dengan visibility + opacity agar bisa di-animasi */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none; /* Cegah klik saat tersembunyi */
}

.notification-dropdown.show,
.dropdown-menu-custom.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Origin animasi dari pojok kanan atas (sesuai posisi dropdown) */
.notification-dropdown { transform-origin: top right; }
.dropdown-menu-custom { transform-origin: top right; }

/* Opsional: Animasi item di dalam dropdown (staggered) */
.notif-item, .dropdown-item-custom {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.notification-dropdown.show .notif-item,
.dropdown-menu-custom.show .dropdown-item-custom {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger delay (max 5 item) */
.notif-item:nth-child(1), .dropdown-item-custom:nth-child(1) { transition-delay: 0.04s; }
.notif-item:nth-child(2), .dropdown-item-custom:nth-child(2) { transition-delay: 0.08s; }
.notif-item:nth-child(3), .dropdown-item-custom:nth-child(3) { transition-delay: 0.12s; }
.notif-item:nth-child(4), .dropdown-item-custom:nth-child(4) { transition-delay: 0.16s; }
.notif-item:nth-child(5), .dropdown-item-custom:nth-child(5) { transition-delay: 0.20s; }

/* ══════════════════════════════════════════════════ */
/* ✨ ALERT ANIMATION: Fade + Slide Down              */
/* ══════════════════════════════════════════════════ */

/* Base alert style dengan animasi */
.alert-custom {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  animation: alertSlideIn 0.3s ease forwards;
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
  max-height: 100px;
  overflow: hidden;
}

/* Keyframes untuk slide in */
@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 100px;
    margin-bottom: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Class untuk hide dengan animasi */
.alert-custom.hiding {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Stagger animation untuk multiple alerts */
.alert-custom:nth-child(1) { animation-delay: 0s; }
.alert-custom:nth-child(2) { animation-delay: 0.1s; }
.alert-custom:nth-child(3) { animation-delay: 0.2s; }

/* Pulse animation untuk alert penting (optional) */
.alert-custom.important {
  animation: alertSlideIn 0.3s ease forwards, alertPulse 2s ease infinite 0.5s;
}

@keyframes alertPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(87, 51, 165, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(87, 51, 165, 0);
  }
}

/* Shake animation untuk error (optional) */
.alert-custom.error.shake {
  animation: alertSlideIn 0.3s ease forwards, alertShake 0.5s ease;
}

@keyframes alertShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}