/* ============================================================
   Social Publr – Common Stylesheet
   Shared by: login.html & user-dashboard.html
   ============================================================ */

/* Base reset & fonts */
*, *::before, *::after { box-sizing: border-box; }
body, input, button, select, textarea { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, .syne { font-family: 'Syne', sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

/* Form accent color */
input[type="checkbox"],
input[type="radio"] { accent-color: #E8452C; }

/* ── Social icon backgrounds ─────────────────────────────── */
.si-fb { background: #1877f2; }
.si-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.si-tw { background: #000; }
.si-li { background: #0077b5; }
.si-yt { background: #ff0000; }
.si-pi { background: #e60023; }

/* ── Logo filters ────────────────────────────────────────── */
.logo-dark    { filter: brightness(10) saturate(0); }
.logo-colored { filter: brightness(0) saturate(100%) invert(37%) sepia(96%) saturate(1200%) hue-rotate(346deg) brightness(95%); }

/* ── Button shimmer overlay ──────────────────────────────── */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 55%);
  pointer-events: none;
}

/* ── Page fade-in animation ──────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp .4s ease both; }
.fade-up { animation: fadeUp .5s ease both; }

/* ── Dashboard: page show/hide ───────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ── Dashboard: sidebar mobile slide ────────────────────── */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .3s;
  }
  #sidebar.open { transform: translateX(0); }
}
@media (min-width: 1024px) {
  #sidebar { position: relative; transform: none !important; }
}

/* ── Dashboard: calendar day aspect ratio ────────────────── */
.cal-day {
  aspect-ratio: 1;
  min-height: 4rem;
}

/* ── Login: dot-grid left panel overlay ─────────────────── */
.dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ── Login: gradient text ────────────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, #ff6b50, #ffd166);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Login: decorative right panel accent blob ───────────── */
.rp-accent::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 15rem; height: 15rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(232,69,44,.1), transparent 70%);
}

/* ── Login: gradient divider line ────────────────────────── */
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0dbd8, transparent);
}

/* ── Login: submit button wrapper (shimmer alias) ────────── */
.btn-submit-wrap {
  position: relative;
  overflow: hidden;
}
.btn-submit-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 55%);
  pointer-events: none;
}

/* ── Login: orb floating blobs ───────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  pointer-events: none;
}
@keyframes floatA {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-28px) scale(1.06); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px) scale(1.04); }
}
.float-a { animation: floatA 8s ease-in-out infinite; }
.float-b { animation: floatB 10s ease-in-out infinite; }

/* ── Login: feature card slide-in animations ─────────────── */
@keyframes slideL {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-l-1 { animation: slideL .5s ease .08s both; }
.slide-l-2 { animation: slideL .5s ease .16s both; }
.slide-l-3 { animation: slideL .5s ease .24s both; }

/* ── Login: input focus ring ─────────────────────────────── */
.field-inp:focus {
  outline: none;
  border-color: #E8452C;
  box-shadow: 0 0 0 4px rgba(232,69,44,.1);
  background: #fff;
}