/* theme.css - Dark mode styles & transisi halus untuk NAMANYA TRAVEL
   Dipakai bersama Tailwind CSS dengan darkMode: 'class'
   Aktif saat <html class="dark"> */

/* === Transisi tema halus (anti flash) === */
*,
*::before,
*::after {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease;
}

/* === Dark mode: background & teks dasar === */
html.dark body {
    background-color: #0f172a; /* slate-900 */
    color: #e2e8f0; /* slate-200 */
}

html.dark body.font-sans {
    color: #e2e8f0;
}

/* === Dashboard: topbar === */
html.dark .bg-emerald-900 {
    background-color: #052e1b !important; /* emerald sangat gelap */
}

/* === Dashboard: sidebar === */
html.dark aside.bg-white {
    background-color: #1e293b !important; /* slate-800 */
}
html.dark .nav-tab {
    color: #cbd5e1 !important; /* slate-300 */
}
html.dark .nav-tab:hover {
    background-color: #0f172a !important; /* slate-900 */
}
html.dark .nav-tab.active {
    background-color: #065f46 !important; /* emerald-800 */
    color: white !important;
}

/* === Dashboard: kartu & container putih === */
html.dark .bg-white:not(.modal-show) {
    background-color: #1e293b !important; /* slate-800 */
}
html.dark .bg-gray-50 {
    background-color: #0f172a !important; /* slate-900 */
}
html.dark .bg-gray-100 {
    background-color: #0f172a !important;
}

/* === Dashboard: teks === */
html.dark .text-gray-800 {
    color: #f1f5f9 !important; /* slate-100 */
}
html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: #cbd5e1 !important; /* slate-300 */
}
html.dark .text-gray-500 {
    color: #94a3b8 !important; /* slate-400 */
}
html.dark .text-gray-400 {
    color: #64748b !important; /* slate-500 */
}

/* === Dashboard: border === */
html.dark .border-gray-100 {
    border-color: #334155 !important; /* slate-700 */
}
html.dark .border-gray-200 {
    border-color: #334155 !important;
}
html.dark .border-gray-300 {
    border-color: #475569 !important; /* slate-600 */
}

/* === Dashboard: input & form === */
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="date"],
html.dark input[type="email"],
html.dark select,
html.dark textarea {
    background-color: #0f172a !important; /* slate-900 */
    border-color: #475569 !important; /* slate-600 */
    color: #e2e8f0 !important;
}
html.dark input[disabled],
html.dark input[disabled] {
    background-color: #1e293b !important;
    color: #64748b !important;
    border-color: #334155 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #475569 !important; /* slate-600 */
}
html.dark select option {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* === Dashboard: tabel === */
html.dark thead.bg-gray-50 {
    background-color: #0f172a !important;
}
html.dark thead {
    color: #94a3b8 !important;
}
html.dark tbody tr:hover {
    background-color: #1e293b !important; /* slate-800 */
}
html.dark .border-b.border-gray-100 {
    border-color: #334155 !important;
}

/* === Dashboard: modal === */
html.dark .fixed.bg-gray-600 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}
html.dark .bg-white.rounded-xl {
    background-color: #1e293b !important; /* slate-800 */
}

/* === Status badge di dark mode === */
html.dark .status-badge-baru {
    background-color: #1e3a8a; /* blue-900 */
    color: #93c5fd; /* blue-300 */
}
html.dark .status-badge-dispatched {
    background-color: #78350f; /* amber-900 */
    color: #fcd34d; /* amber-300 */
}
html.dark .status-badge-diproses {
    background-color: #581c87; /* purple-900 */
    color: #d8b4fe; /* purple-300 */
}
html.dark .status-badge-deal {
    background-color: #064e3b; /* emerald-900 */
    color: #6ee7b7; /* emerald-300 */
}
html.dark .status-badge-gagal {
    background-color: #7f1d1d; /* red-900 */
    color: #fca5a5; /* red-300 */
}

/* === Role badge di dark mode === */
html.dark .role-admin {
    background-color: #7f1d1d;
    color: #fca5a5;
}
html.dark .role-petugas {
    background-color: #1e3a8a;
    color: #93c5fd;
}
html.dark .role-sales {
    background-color: #064e3b;
    color: #6ee7b7;
}

/* === Tombol action === */
html.dark .btn-action {
    border: 1px solid #475569;
}

/* === Login page === */
html.dark .login-bg {
    background-color: #0f172a !important;
}
html.dark .login-card {
    background-color: #1e293b !important;
}

/* === Combobox pencarian pelanggan (Log Aktivitas) === */
html.dark #logCustomerList {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #475569 !important; /* slate-600 */
}
html.dark #logCustomerList > div {
    border-color: #334155 !important; /* slate-700 */
}
html.dark #logCustomerList > div:hover {
    background-color: #0f172a !important; /* slate-900 */
}
html.dark #logCustomerSearch {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
html.dark #logCustomerSearch::placeholder {
    color: #64748b !important; /* slate-500 */
}

/* === Index/landing page: hero & section === */
html.dark .bg-white:not(.modal-show):not(.login-card) {
    background-color: #1e293b !important;
}
html.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

/* === Scrollbar dark === */
html.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 5px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* === Theme toggle button === */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.theme-toggle-btn:active {
    transform: scale(0.92);
}

/* === Indikator loading skeleton (modern touch) === */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
html.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}