/* ══════════════════════════════════════════════════════════
   light-overrides.css — MEA Hub
   Semua [data-theme="light"] rules dikumpul di sini.
   Load SETELAH semua CSS komponen di index.html.
   Komponen CSS individual tidak perlu dimodifikasi.
   ══════════════════════════════════════════════════════════ */

/* ── Header ───────────────────────────────────────────────── */
[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

/* Logo icon — dark pill biar logo biru keliatan di bg terang */
[data-theme="light"] .header-logo-icon {
  background: #161616;
  border-radius: 8px;
  padding: 4px;
  filter: brightness(1.1);
}

[data-theme="light"] .header-logo-text { color: var(--text); }
[data-theme="light"] .header-logo-text span { color: var(--accent); }
[data-theme="light"] .header-username { color: var(--text); }
[data-theme="light"] .header-role-inline { color: var(--text-3); }
[data-theme="light"] .header-avatar-fallback {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--accent);
}

/* ── Bottom Nav ───────────────────────────────────────────── */
[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
}

/* Matikan aurora glow strip di light mode */
[data-theme="light"] .bottom-nav::before { opacity: 0; }

[data-theme="light"] .nav-item-label { color: var(--text-3); }
[data-theme="light"] .nav-item.active .nav-item-label { color: var(--accent); }
[data-theme="light"] .nav-item:not(.nav-item--m):hover .nav-item-label { color: var(--accent); }
[data-theme="light"] .nav-item-active-dot { background: var(--accent); }

/* Launcher orb (nav-m-button) — dark agar logo biru keliatan */
[data-theme="light"] .nav-m-button {
  background: radial-gradient(
    circle at 38% 35%,
    #3A3A3A 0%,
    #161616 45%,
    #0A0A0A 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.2),
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(10, 10, 10, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: none;
}

[data-theme="light"] .nav-m-button:hover {
  transform: translateY(-3px) scale(1.05);
  background: radial-gradient(
    circle at 38% 35%,
    #2D3B60 0%,
    #1E1E1E 45%,
    #161616 100%
  );
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.35),
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(10, 10, 10, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

[data-theme="light"] .nav-m-button.is-open {
  background: radial-gradient(
    circle at 38% 35%,
    #2D3B60 0%,
    #1E1E1E 45%,
    #161616 100%
  );
  animation: none;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.45),
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(59, 130, 246, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(59, 130, 246, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Logo glow tetap di light mode */
[data-theme="light"] .nav-m-logo {
  filter:
    drop-shadow(0 0 6px rgba(59, 130, 246, 0.5))
    drop-shadow(0 0 14px rgba(59, 130, 246, 0.25));
}

/* ── Launcher Sheet ───────────────────────────────────────── */
[data-theme="light"] .launcher-backdrop {
  background: rgba(10,10,10,0.35);
}

[data-theme="light"] #launcher-sheet {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.10);
}

[data-theme="light"] .launcher-handle { background: var(--border-2); }
[data-theme="light"] .launcher-section-title { color: var(--text-3); }
[data-theme="light"] .launcher-divider { background: var(--border); }

[data-theme="light"] .launcher-app-item { color: var(--text-2); }
[data-theme="light"] .launcher-app-item:hover { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .launcher-app-item.disabled { opacity: 0.4; }

/* ── Sidebar ──────────────────────────────────────────────── */
[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .sidebar-backdrop { background: rgba(10,10,10,0.25); }

/* ── Cards ────────────────────────────────────────────────── */
[data-theme="light"] .card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="light"] .card:hover { border-color: var(--border-2); }

/* ── Stream ───────────────────────────────────────────────── */
[data-theme="light"] .stream-post {
  background: transparent;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
[data-theme="light"] .stream-feed { background: transparent; }
[data-theme="light"] .stream-composer-textarea { color: var(--text); }
[data-theme="light"] .stream-tab { color: var(--text-3); }
[data-theme="light"] .stream-tab.active { color: var(--accent); }

/* ── Alerts ───────────────────────────────────────────────── */
[data-theme="light"] .al2-row { border-color: var(--border); }
[data-theme="light"] .al2-row.unread { background: var(--accent-dim); }
[data-theme="light"] .al2-icon { background: var(--surface-2); }

/* ── Vault ────────────────────────────────────────────────── */
[data-theme="light"] .vault-item {
  background: var(--surface);
  border-color: var(--border);
}

/* ── Workspace ────────────────────────────────────────────── */
[data-theme="light"] .ws-item { border-color: var(--border); }

[data-theme="light"] .ws-bubble-other {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="light"] .ws-bubble-mine {
  background: var(--accent-dim);
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .ws-chat-input-bar {
  background: var(--bg);
  border-top-color: var(--border);
}

[data-theme="light"] .ws-chat-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .ws-modal {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="light"] .ws-invite-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="light"] .ws-modal-overlay { background: rgba(10,10,10,0.35); }

[data-theme="light"] .ws-modal-input,
[data-theme="light"] .ws-modal-group-name,
[data-theme="light"] .ws-leave-confirm-input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .ws-load-more-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}

/* ── People ───────────────────────────────────────────────── */
[data-theme="light"] .people-avatar-wrap {
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Avatar Picker ────────────────────────────────────────── */
[data-theme="light"] .avatar-picker-modal {
  background: var(--surface);
  border-color: var(--border);
}

/* ── Audit Log ────────────────────────────────────────────── */
[data-theme="light"] .al-row { border-color: var(--border); }

/* ── Role badge ───────────────────────────────────────────── */
[data-theme="light"] .role-badge {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}

/* ── Account Center ───────────────────────────────────────── */

/* Menu item — transparan, no box */
[data-theme="light"] .ac-menu-item {
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .ac-menu-item:last-child { border-bottom: none; }
[data-theme="light"] .ac-menu-item:hover,
[data-theme="light"] .ac-menu-item:active {
  background: rgba(37, 99, 235, 0.05);
}
/* Icon box tetap punya bg */
[data-theme="light"] .ac-menu-icon {
  background: var(--surface);
  border-color: var(--border);
}

/* Field value wrap — ini yang jadi kotak putih */
[data-theme="light"] .ac-field-value-wrap {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding-left: 2px;
  padding-right: 2px;
}

/* Input inline tetap punya bg */
[data-theme="light"] .ac-inline-form,
[data-theme="light"] .ac-input,
[data-theme="light"] .ac-textarea {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Theme options tetap box */
[data-theme="light"] .ac-theme-option {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .ac-theme-option.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}
[data-theme="light"] .ac-lang-toggle {
  background: var(--surface);
  border-color: var(--border);
}

/* ── Modals & overlays ────────────────────────────────────── */
[data-theme="light"] .modal-overlay { background: rgba(10,10,10,0.35); }

[data-theme="light"] .modal,
[data-theme="light"] .bottom-sheet {
  background: var(--surface);
  border-color: var(--border);
}

/* ── Loading spinner ──────────────────────────────────────── */
[data-theme="light"] .loading-spinner {
  border-color: var(--border-2);
  border-top-color: var(--accent);
}

/* ── Scrollbar (webkit) ───────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-2); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }