/* =============================================
   NABAWI MULIA — MITRA DASHBOARD STYLES
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --mitra-primary: #047857;
  --mitra-primary-light: #059669;
  --mitra-primary-dark: #065F46;
  --mitra-accent: #D97706;
  --mitra-accent-light: #F59E0B;
  --mitra-gold: #B45309;
  --mitra-gold-light: #FCD34D;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --green: #10B981;
  --red: #EF4444;
  --blue: #3B82F6;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#F0FDF4; min-height:100vh; display:flex; color:var(--gray-800); }

/* ── Login Page ── */
.login-page {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background:linear-gradient(135deg, #064E3B 0%, #047857 40%, #059669 100%);
}
.login-card {
  background:white; border-radius:24px; padding:48px 40px; width:100%; max-width:420px;
  box-shadow:0 25px 60px rgba(0,0,0,0.25);
}
.login-card .brand { font-size:1.5rem; font-weight:800; color:var(--mitra-primary); text-align:center; }
.login-card .sub { font-size:0.8rem; color:var(--gray-400); text-align:center; margin-bottom:28px; }
.login-title { font-size:1.3rem; font-weight:700; text-align:center; margin-bottom:6px; }
.login-sub { font-size:0.85rem; color:var(--gray-500); text-align:center; margin-bottom:24px; }
.login-err { color:var(--red); font-size:0.8rem; text-align:center; margin-top:12px; display:none; }

/* ── Sidebar ── */
.sidebar {
  width:260px; background:linear-gradient(180deg, #064E3B 0%, #065F46 100%);
  color:white; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100;
}
.sidebar-logo { padding:24px 20px 16px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sidebar-logo .brand { font-size:1.2rem; font-weight:800; }
.sidebar-logo .sub { font-size:0.7rem; opacity:0.6; margin-top:2px; }

.sidebar-nav { flex:1; padding:12px 0; overflow-y:auto; }
.nav-section-title { font-size:0.65rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,0.4); padding:16px 20px 6px; font-weight:700; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:11px 20px; color:rgba(255,255,255,0.75);
  text-decoration:none; font-size:0.85rem; font-weight:500; transition:all 0.15s; border-left:3px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,0.08); color:white; }
.nav-item.active { background:rgba(255,255,255,0.12); color:white; border-left-color:var(--mitra-accent-light); font-weight:700; }
.nav-item .icon { font-size:1.1rem; width:24px; text-align:center; }

.sidebar-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,0.1); }
.sidebar-user { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sidebar-avatar {
  width:36px; height:36px; border-radius:10px; background:var(--mitra-accent);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem;
}
.sidebar-username { font-weight:700; font-size:0.85rem; }
.sidebar-role { font-size:0.7rem; opacity:0.5; }

.tier-badge-lite {
  display:inline-block; padding:2px 10px; border-radius:20px; font-size:0.65rem; font-weight:700;
  background:rgba(59,130,246,0.2); color:#93C5FD; letter-spacing:0.5px;
}
.tier-badge-pro {
  display:inline-block; padding:2px 10px; border-radius:20px; font-size:0.65rem; font-weight:700;
  background:rgba(252,211,77,0.3); color:#FCD34D; letter-spacing:0.5px;
}

/* ── Main ── */
.main-content { margin-left:260px; flex:1; min-height:100vh; }
.topbar {
  background:white; padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:1rem; font-weight:700; color:var(--gray-900); }
.topbar-title span { font-weight:400; color:var(--gray-400); }
.topbar-time { font-size:0.78rem; color:var(--gray-400); }
.page-content { padding:24px 28px; }

/* ── Stat Cards ── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background:white; border-radius:16px; padding:20px; border:1px solid var(--gray-200);
  transition:transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.stat-card .stat-icon { font-size:1.8rem; margin-bottom:8px; }
.stat-card .stat-value { font-size:1.8rem; font-weight:800; color:var(--gray-900); }
.stat-card .stat-label { font-size:0.78rem; color:var(--gray-500); margin-top:2px; }
.stat-card.green .stat-value { color:var(--mitra-primary); }
.stat-card.gold .stat-value { color:var(--mitra-accent); }
.stat-card.blue .stat-value { color:var(--blue); }

/* ── Cards ── */
.table-card {
  background:white; border-radius:16px; border:1px solid var(--gray-200); margin-bottom:20px; overflow:hidden;
}
.table-header {
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--gray-100);
}
.table-header h2 { font-size:1rem; font-weight:700; color:var(--gray-900); }
.empty-state {
  text-align:center; padding:40px 20px; color:var(--gray-400);
}
.empty-state .icon { font-size:2rem; margin-bottom:8px; }
.empty-state h3 { font-size:0.95rem; color:var(--gray-500); }

/* ── Media Grid ── */
.media-card {
  background:white; border:1px solid var(--gray-200); border-radius:16px; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
}
.media-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.media-card-img {
  height:180px; background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.media-card-img img { width:100%; height:100%; object-fit:cover; }
.media-card-body { padding:16px; }

/* ── Update Timeline ── */
.update-item {
  display:flex; gap:16px; padding:20px; border-bottom:1px solid var(--gray-100); align-items:flex-start;
  transition:background 0.2s;
}
.update-item:hover { background:var(--gray-50); }
.update-item.pinned { background:#FFFBEB; }
.update-icon {
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px;
  border:none; border-radius:10px; font-size:0.82rem; font-weight:600; cursor:pointer;
  transition:all 0.15s; text-decoration:none;
}
.btn-primary { background:var(--mitra-primary); color:white; }
.btn-primary:hover { background:var(--mitra-primary-light); transform:translateY(-1px); }
.btn-secondary { background:var(--gray-100); color:var(--gray-700); }
.btn-secondary:hover { background:var(--gray-200); }
.btn-download {
  background:linear-gradient(135deg, var(--mitra-primary) 0%, var(--mitra-primary-light) 100%);
  color:white; padding:10px 20px;
}
.btn-download:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(4,120,87,0.3); }
.btn-sm { padding:6px 12px; font-size:0.78rem; }
.btn-logout {
  width:100%; padding:10px; border:none; border-radius:8px; background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7); cursor:pointer; font-size:0.8rem; font-weight:600; transition:all 0.15s;
}
.btn-logout:hover { background:rgba(239,68,68,0.3); color:white; }

/* ── Pills ── */
.pill {
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.72rem; font-weight:700;
}
.pill-green { background:#D1FAE5; color:#065F46; }
.pill-gold { background:#FEF3C7; color:#92400E; }
.pill-blue { background:#DBEAFE; color:#1E40AF; }
.pill-red { background:#FEE2E2; color:#991B1B; }

/* ── Form ── */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; }
.form-control {
  width:100%; padding:10px 14px; border:1px solid var(--gray-300); border-radius:10px;
  font-size:0.85rem; font-family:'Inter',sans-serif; outline:none; transition:border 0.2s;
}
.form-control:focus { border-color:var(--mitra-primary); box-shadow:0 0 0 3px rgba(4,120,87,0.1); }

/* ── Toast ── */
#toast {
  position:fixed; bottom:30px; right:30px; padding:14px 24px; border-radius:12px;
  font-size:0.85rem; font-weight:600; z-index:9999; transform:translateY(100px); opacity:0;
  transition:all 0.3s; color:white;
}
#toast.show { transform:translateY(0); opacity:1; }
#toast.success { background:#047857; }
#toast.error { background:#DC2626; }

/* ── Dashboard Welcome Card ── */
.welcome-card {
  background:linear-gradient(135deg, #064E3B 0%, #047857 50%, #059669 100%);
  border-radius:20px; padding:32px; color:white; margin-bottom:24px; position:relative; overflow:hidden;
}
.welcome-card::after {
  content:''; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  background:rgba(255,255,255,0.05); border-radius:50%;
}
.welcome-card .greeting { font-size:0.85rem; opacity:0.8; margin-bottom:4px; }
.welcome-card .name { font-size:1.6rem; font-weight:800; margin-bottom:12px; }
.welcome-card .tier-label {
  display:inline-block; padding:5px 16px; border-radius:20px; font-size:0.75rem; font-weight:700;
  letter-spacing:0.5px;
}
.welcome-card .tier-lite { background:rgba(59,130,246,0.3); }
.welcome-card .tier-pro { background:rgba(252,211,77,0.3); }

/* ── Responsive ── */
@media (max-width:768px) {
  .sidebar { display:none; }
  .main-content { margin-left:0; }
}