/* ===========================================================
   SocialHub — Custom styles (selain TailwindCSS)
=========================================================== */

html, body { font-family: 'Inter', system-ui, sans-serif; }
body { background: #f7f8fb; }

.dark body { background: #0b0f19; color: #e5e7eb; }
.dark .card { background: #111827; border-color: #1f2937; }
.dark .soft { background: #0f172a; }
.dark input, .dark textarea, .dark select {
  background: #0f172a; color: #e5e7eb; border-color: #1f2937;
}

/* Card */
.card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Active nav item */
.nav-active {
  background: linear-gradient(135deg, #4569ff, #7c5cff);
  color: #fff !important;
}
.nav-active svg { color: #fff !important; }

/* Brand gradient */
.gradient-bg {
  background: linear-gradient(135deg, #4569ff 0%, #7c5cff 50%, #ec4899 100%);
}

/* Platform chip (composer) */
.platform-chip { transition: all .15s; }
.platform-chip.active {
  transform: scale(1.05);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.25);
}

/* Calendar */
.calendar-day { min-height: 96px; }
.post-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

/* Animation */
.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Modal */
.modal-backdrop {
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
}

/* Details summary reset */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}