/**
 * assets/css/app.css
 * Custom CSS overrides for Rumah Aspirasi
 * (Tailwind CSS is loaded via CDN — this file handles gaps Tailwind can't cover)
 */

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Prose / rich text content ──────────────────────────────────────────── */
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3; }
.prose p   { margin-bottom: 1em; line-height: 1.75; }
.prose ul  { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.prose ol  { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.prose li  { margin-bottom: 0.25em; }
.prose blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; color: #6b7280; font-style: italic; margin: 1.5em 0; }
.prose a   { color: #2563eb; text-decoration: underline; }
.prose a:hover { color: #1d4ed8; }
.prose img { max-width: 100%; border-radius: 0.5rem; margin: 1rem 0; }
.prose pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.875rem; margin-bottom: 1em; }
.prose code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
.prose pre code { background: transparent; padding: 0; }

/* ── Line clamp utilities (older browsers) ──────────────────────────────── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ── Navigation active state ────────────────────────────────────────────── */
nav a.active { color: #ED1C24; font-weight: 600; }
nav a.active.text-white { color: #ffffff; border-bottom: 2px solid #ffffff; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; color: #4b5563; transition: background 0.15s, color 0.15s; }
.sidebar-link:hover { background: #f3f4f6; color: #111827; }
.sidebar-link.active { background: #fff1f2; color: #ED1C24; }
.sidebar-link i    { width: 1.125rem; text-align: center; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }

/* ── Live player ────────────────────────────────────────────────────────── */
#remotePlayer, #localPlayer {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
}
#remotePlayer video, #localPlayer video { width: 100%; height: 100%; object-fit: cover; }

/* ── Chat box ───────────────────────────────────────────────────────────── */
#chatMessages { scrollbar-width: thin; scrollbar-color: #374151 transparent; }
#chatMessages::-webkit-scrollbar { width: 4px; }
#chatMessages::-webkit-scrollbar-track { background: transparent; }
#chatMessages::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }

/* ── Modal backdrop ─────────────────────────────────────────────────────── */
.modal-open { overflow: hidden; }

/* ── Dashboard table ────────────────────────────────────────────────────── */
.dashboard-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dashboard-table th { padding: 0.75rem 1rem; background: #f9fafb; text-align: left; text-transform: uppercase; font-size: 0.75rem; color: #6b7280; letter-spacing: 0.05em; }
.dashboard-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.dashboard-table tbody tr:hover { background: #f9fafb; }

/* ── Print styles ───────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  nav, footer, .sidebar, header { display: none !important; }
  body { background: white; color: black; }
  .shadow, .shadow-md, .shadow-xl { box-shadow: none !important; }
  a { text-decoration: none; color: black; }
}

/* ── Transitions ────────────────────────────────────────────────────────── */
.transition-fast { transition: all 0.15s ease; }

/* ── Custom scrollbar (desktop) ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }