/* ==========================================================================
   OnlyPost AI — premium purple + white theme (override layer)
   Loaded AFTER the app bundle. Purely visual: no logic, routes or
   behavior changes. Errors/notifications keep their semantic red.
   ========================================================================== */

/* ---------- page backdrop: faint lavender-white ---------- */
.bg-\[\#F9FAFB\]{background-color:#F7F3FF !important}

/* ---------- typography: HD display font for headings ---------- */
main h1, main h2, aside h1,
.font-display{
  font-family:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif !important;
  font-weight:800;
  letter-spacing:-.02em;
}
main h1{font-size:1.9rem}

/* ---------- primary buttons: red -> premium purple ---------- */
button.bg-red-600, a.bg-red-600{
  background:linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%) !important;
  border-color:transparent !important;
  box-shadow:0 8px 20px rgba(109,40,217,.35) !important;
}
button.bg-red-600:hover, a.bg-red-600:hover,
button.hover\:bg-red-700:hover, a.hover\:bg-red-700:hover{
  background:linear-gradient(135deg,#6D28D9 0%,#5B21B6 100%) !important;
  box-shadow:0 10px 26px rgba(109,40,217,.45) !important;
}
button.active\:bg-red-800:active{background:#4C1D95 !important}

/* ---------- hero gradient banner: red/amber -> purple ---------- */
[class*="from-red-600"][class*="to-amber-600"]{
  --tw-gradient-from:#6D28D9 !important;
  --tw-gradient-via:#8B5CF6 !important;
  --tw-gradient-to:#4C1D95 !important;
  box-shadow:0 20px 50px rgba(109,40,217,.35) !important;
  border:1px solid rgba(255,255,255,.25) !important;
}
[class*="from-red-600"][class*="to-amber-600"]:hover{
  --tw-gradient-from:#5B21B6 !important;
  --tw-gradient-via:#7C3AED !important;
  --tw-gradient-to:#3B1470 !important;
}

/* ---------- sidebar: active pill black -> purple ---------- */
aside nav .bg-black{
  background:linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(109,40,217,.35) !important;
}
aside nav .text-xs{font-size:13px}
aside{
  box-shadow:4px 0 24px rgba(109,40,217,.06);
}

/* ---------- selection + focus rings: red -> purple ---------- */
.border-red-500{border-color:#6D28D9 !important}
.ring-red-500\/20{--tw-ring-color:rgba(109,40,217,.22) !important}
.focus\:ring-red-500:focus{--tw-ring-color:#6D28D9 !important}

/* ---------- cards: softer radius, premium layered shadows ---------- */
main .rounded-xl{border-radius:20px}
main .rounded-lg{border-radius:14px}
main .shadow-xs{box-shadow:0 10px 30px rgba(109,40,217,.08) !important}
main .shadow-sm{box-shadow:0 12px 32px rgba(109,40,217,.10) !important}
main .shadow-md{box-shadow:0 18px 44px rgba(109,40,217,.14) !important}

/* gentle lift on clickable cards */
main .cursor-pointer.rounded-xl{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
main .cursor-pointer.rounded-xl:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(109,40,217,.16) !important;
  border-color:#E4DDF5 !important;
}

/* ---------- topbar polish ---------- */
header input{
  border-radius:999px !important;
}
header input:focus{
  border-color:#6D28D9 !important;
  box-shadow:0 0 0 3px rgba(109,40,217,.15) !important;
}

/* ---------- filter pills: active -> soft purple ---------- */
main .bg-gray-100{background-color:#F1EAFE !important}

/* ---------- stat numbers: tabular, crisp ---------- */
main .font-mono{font-variant-numeric:tabular-nums}

/* ---------- scrollbars: subtle purple ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D9C9F7;border-radius:8px;border:2px solid #F7F3FF}
::-webkit-scrollbar-thumb:hover{background:#6D28D9}