/* ============================================================
   LakbayLokal — Global Theme CSS
   Works on ALL pages via [data-theme] on <html>
   ============================================================ */

/* ── TOGGLE BUTTON (works everywhere) ── */
.ct-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}
.ct-theme-btn:hover {
    background: rgba(255,255,255,0.14);
    transform: rotate(18deg);
}

/* ── DARK PAGES (index, register, tracker, login, user, driver)
      These are already dark — light mode is the override ── */
[data-theme="light"] body.dark-page {
    --ink:    #f1f5f9 !important;
    --paper:  #1e293b !important;
    --muted:  #64748b !important;
    --border: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] body.dark-page {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
[data-theme="light"] body.dark-page nav {
    background: rgba(241,245,249,0.9) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] body.dark-page .modal-inner,
[data-theme="light"] body.dark-page .register-inner,
[data-theme="light"] body.dark-page .glass-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1e293b !important;
}
[data-theme="light"] body.dark-page .field-input,
[data-theme="light"] body.dark-page .field-select,
[data-theme="light"] body.dark-page input,
[data-theme="light"] body.dark-page select,
[data-theme="light"] body.dark-page textarea {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1e293b !important;
}
[data-theme="light"] body.dark-page .btn-ghost {
    color: #475569 !important;
    border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] body.dark-page .btn-ghost:hover {
    color: #1e293b !important;
    background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] body.dark-page .step-card,
[data-theme="light"] body.dark-page .panel,
[data-theme="light"] body.dark-page .panel-section,
[data-theme="light"] body.dark-page .grab-section,
[data-theme="light"] body.dark-page .grab-vcard,
[data-theme="light"] body.dark-page .stile,
[data-theme="light"] body.dark-page .task-card,
[data-theme="light"] body.dark-page .sheet,
[data-theme="light"] body.dark-page .mode-btn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.09) !important;
    color: #1e293b !important;
}
[data-theme="light"] body.dark-page .stile-active {
    background: rgba(56,189,248,0.1) !important;
    border-color: rgba(56,189,248,0.4) !important;
}
[data-theme="light"] body.dark-page .grab-vcard.selected {
    background: rgba(56,189,248,0.1) !important;
    border-color: #38bdf8 !important;
}
[data-theme="light"] body.dark-page .sidebar {
    background: rgba(248,250,252,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] body.dark-page .tab-btn {
    color: #64748b !important;
}
[data-theme="light"] body.dark-page .tab-btn.active {
    color: #c8f135 !important;
    background: rgba(200,241,53,0.08) !important;
}
[data-theme="light"] body.dark-page .topbar {
    background: rgba(241,245,249,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] body.dark-page .blob { opacity: 0.15 !important; }
[data-theme="light"] body.dark-page .suggest-dropdown {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
}
[data-theme="light"] body.dark-page .suggest-item:hover {
    background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] body.dark-page .suggest-main { color: #1e293b !important; }
[data-theme="light"] body.dark-page .suggest-sub  { color: #64748b !important; }
[data-theme="light"] body.dark-page .section-label::after { background: rgba(0,0,0,0.07) !important; }
[data-theme="light"] body.dark-page .page-title,
[data-theme="light"] body.dark-page .hero-title,
[data-theme="light"] body.dark-page .reg-title,
[data-theme="light"] body.dark-page .modal-title,
[data-theme="light"] body.dark-page .order-name,
[data-theme="light"] body.dark-page .task-name  { color: #1e293b !important; }
[data-theme="light"] body.dark-page .step-desc,
[data-theme="light"] body.dark-page .hero-body,
[data-theme="light"] body.dark-page .reg-sub,
[data-theme="light"] body.dark-page .modal-sub,
[data-theme="light"] body.dark-page .task-dest  { color: #64748b !important; }
[data-theme="light"] body.dark-page body::before { opacity: 0 !important; }

/* smooth transitions for dark pages */
body.dark-page,
body.dark-page nav,
body.dark-page .step-card,
body.dark-page .panel,
body.dark-page .grab-section,
body.dark-page .grab-vcard,
body.dark-page .stile,
body.dark-page .modal-inner,
body.dark-page .register-inner,
body.dark-page .sidebar,
body.dark-page .topbar,
body.dark-page .task-card,
body.dark-page .sheet {
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

/* ── ADMIN PAGES (Tailwind light by default)
      These are already light — dark mode is the override ── */
[data-theme="dark"] body.admin-page {
    background: #0f1117 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] body.admin-page .bg-white,
[data-theme="dark"] body.admin-page .glass-card,
[data-theme="dark"] body.admin-page table {
    background: #1a1d27 !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] body.admin-page .bg-slate-50,
[data-theme="dark"] body.admin-page .bg-slate-900 {
    background: #111420 !important;
}
[data-theme="dark"] body.admin-page .text-slate-900,
[data-theme="dark"] body.admin-page .text-slate-800,
[data-theme="dark"] body.admin-page .font-black.text-slate-900 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] body.admin-page .text-slate-400,
[data-theme="dark"] body.admin-page .text-slate-500,
[data-theme="dark"] body.admin-page .text-slate-600 {
    color: #94a3b8 !important;
}
[data-theme="dark"] body.admin-page .border,
[data-theme="dark"] body.admin-page .border-slate-100,
[data-theme="dark"] body.admin-page .border-slate-200,
[data-theme="dark"] body.admin-page .divide-y > * {
    border-color: rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] body.admin-page .shadow-sm,
[data-theme="dark"] body.admin-page .shadow-xl {
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] body.admin-page .hover\:bg-white\/60:hover,
[data-theme="dark"] body.admin-page tr:hover {
    background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] body.admin-page input,
[data-theme="dark"] body.admin-page select {
    background: #1e2130 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] body.admin-page .nav-item {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] body.admin-page .nav-item span { color: #f1f5f9 !important; }
[data-theme="dark"] body.admin-page .nav-item:hover {
    background: rgba(255,255,255,0.12) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] body.admin-page #map { filter: invert(0.9) hue-rotate(180deg); }
[data-theme="dark"] body.admin-page .rounded-\[2\.5rem\],
[data-theme="dark"] body.admin-page .rounded-\[3rem\],
[data-theme="dark"] body.admin-page .rounded-\[4rem\],
[data-theme="dark"] body.admin-page .rounded-2xl,
[data-theme="dark"] body.admin-page .rounded-3xl {
    background: #1a1d27 !important;
}
[data-theme="dark"] body.admin-page .bg-amber-50  { background: rgba(245,158,11,0.12) !important; }
[data-theme="dark"] body.admin-page .bg-emerald-50 { background: rgba(34,197,94,0.1) !important; }
[data-theme="dark"] body.admin-page .bg-indigo-600 { background: #4f46e5 !important; }
[data-theme="dark"] body.admin-page .border-slate-200\/30 { border-color: rgba(255,255,255,0.06) !important; }

/* smooth admin transitions */
body.admin-page,
body.admin-page .bg-white,
body.admin-page .glass-card {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

/* ── TOGGLE BUTTON light styling on admin (light bg) ── */
[data-theme="light"] .ct-theme-btn {
    border-color: rgba(0,0,0,0.15);
    background: rgba(0,0,0,0.06);
}
[data-theme="light"] .ct-theme-btn:hover {
    background: rgba(0,0,0,0.1);
}