/* ============================================================================
 * DiraSuite Brand Overlay for Postiz → Cadence by DiraSuite
 * Injected via nginx sub_filter into every Postiz HTML response.
 *
 * Goals:
 *  1. Kill the "Over 20,000+ Entrepreneurs use Postiz" testimonial rail
 *  2. Replace Postiz logo with Cadence wordmark
 *  3. Recolor to navy/cream/terracotta
 *  4. FORCE LIGHT THEME even in the post-login dark interior
 *
 * Last updated: 2026-04-24
 * ========================================================================= */

/* ---------- Palette + brand variables ------------------------------------ */
:root {
  --dira-navy:        #163049;
  --dira-navy-deep:   #0F2237;
  --dira-navy-soft:   #2B4766;
  --dira-cream:       #FAF6EE;
  --dira-cream-warm:  #F2ECDE;
  --dira-cream-deep:  #E8E0CB;
  --dira-terracotta:  #B85C38;
  --dira-terracotta-deep: #8A3F23;
  --dira-amber:       #E4A23B;
  --dira-teal:        #2A8C87;
  --dira-border:      #DED7C5;
  --dira-border-soft: #EBE5D5;
  --dira-muted:       #6B6B66;
}

/* ============================================================================
 * FORCE LIGHT THEME EVERYWHERE
 * Postiz has a dark interior when logged in. We override it at the root.
 * ========================================================================= */

/* Kill any prefers-color-scheme: dark handling */
html,
html[data-theme="dark"],
html.dark,
body,
body.dark,
body[class*="dark"],
#__next,
[data-theme="dark"],
.dark {
  background: var(--dira-cream) !important;
  color: var(--dira-navy) !important;
  color-scheme: light !important;
}

/* Override Postiz's CSS variables — these are likely Tailwind tokens */
:root,
html,
html[data-theme="dark"] {
  --background:           var(--dira-cream) !important;
  --foreground:           var(--dira-navy) !important;
  --card:                 #FFFFFF !important;
  --card-foreground:      var(--dira-navy) !important;
  --popover:              #FFFFFF !important;
  --popover-foreground:   var(--dira-navy) !important;
  --primary:              var(--dira-navy) !important;
  --primary-foreground:   var(--dira-cream) !important;
  --secondary:            var(--dira-cream-warm) !important;
  --secondary-foreground: var(--dira-navy) !important;
  --muted:                var(--dira-cream-warm) !important;
  --muted-foreground:     var(--dira-muted) !important;
  --accent:               var(--dira-terracotta) !important;
  --accent-foreground:    #FFFFFF !important;
  --border:               var(--dira-border) !important;
  --input:                var(--dira-cream) !important;
  --ring:                 var(--dira-navy) !important;
  --radius:               0.5rem !important;

  /* Tailwind-style color palette overrides */
  --gray-50:  var(--dira-cream) !important;
  --gray-100: var(--dira-cream-warm) !important;
  --gray-200: var(--dira-border-soft) !important;
  --gray-300: var(--dira-border) !important;
  --gray-900: var(--dira-navy) !important;
  --gray-950: var(--dira-navy-deep) !important;

  /* Postiz might use slate/zinc too */
  --slate-50:  var(--dira-cream) !important;
  --slate-100: var(--dira-cream-warm) !important;
  --slate-900: var(--dira-navy) !important;
  --slate-950: var(--dira-navy-deep) !important;

  /* Kill n-color gray backgrounds that Postiz uses for dark containers */
  --customColor1: var(--dira-cream) !important;
  --customColor2: var(--dira-cream-warm) !important;
  --customColor3: #FFFFFF !important;
  --customColor4: var(--dira-border) !important;
  --customColor5: var(--dira-navy) !important;

  --newBgColor:         var(--dira-cream) !important;
  --newBgColorInner:    #FFFFFF !important;
  --newTextColor:       var(--dira-navy) !important;
  --newBorderColor:     var(--dira-border) !important;
}

/* Nuke dark backgrounds by class name — common Tailwind patterns */
.bg-black, .bg-gray-900, .bg-gray-950,
.bg-slate-900, .bg-slate-950,
.bg-zinc-900, .bg-zinc-950,
.bg-neutral-900, .bg-neutral-950,
[class*="bg-black"],
[class*="bg-gray-9"],
[class*="bg-slate-9"] {
  background-color: var(--dira-cream) !important;
  color: var(--dira-navy) !important;
}

/* Semi-dark panels → cream-warm */
.bg-gray-800, .bg-slate-800, .bg-zinc-800, .bg-neutral-800,
.bg-gray-700, .bg-slate-700,
[class*="bg-gray-8"],
[class*="bg-slate-8"] {
  background-color: var(--dira-cream-warm) !important;
  color: var(--dira-navy) !important;
}

/* Dark borders → DiraSuite border */
.border-gray-700, .border-gray-800, .border-gray-900,
.border-slate-700, .border-slate-800,
[class*="border-gray-7"],
[class*="border-gray-8"],
[class*="border-gray-9"] {
  border-color: var(--dira-border) !important;
}

/* White-on-dark text → navy-on-cream */
.text-white, .text-gray-100, .text-gray-200,
.text-slate-100, .text-slate-200,
[class*="text-white"] {
  color: var(--dira-navy) !important;
}

/* Keep white text on actually-navy backgrounds (our new primary buttons) */
button.btn-primary .text-white,
.bg-navy .text-white,
[style*="background-color: rgb(22, 48, 73)"] .text-white,
[style*="background: rgb(22, 48, 73)"] .text-white {
  color: var(--dira-cream) !important;
}

/* ============================================================================
 * TYPOGRAPHY
 * ========================================================================= */
body,
#__next,
* {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, .heading, [class*="heading"] {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--dira-navy) !important;
}

/* ============================================================================
 * KILL THE POSTIZ TESTIMONIAL RAIL
 * The login page ships with a massive "Over 20,000+ Entrepreneurs use Postiz"
 * testimonial column that is absolutely not appropriate for a DiraSuite brand.
 * Hunt and kill it via multiple selectors since we don't know the exact class.
 * ========================================================================= */

/* Any element that says "Postiz" in a heading inside the auth area */
h1:has(span:contains("Postiz")),
h2:has(span:contains("Postiz")),
[class*="testimonial"],
[class*="Testimonial"],
[class*="review"],
[class*="Review"] {
  display: none !important;
}

/* Hide the right-side panel of the two-column signin layout where testimonials live */
main > div > div:nth-child(2):has(img[src*="avatar"]),
main > div > div:nth-child(2):has([class*="testimonial"]),
main .grid > div:nth-child(2):has(img[src*="avatar"]) {
  display: none !important;
}

/* Center the sign-in panel after the testimonials are gone */
main > div:has(img[src*="avatar"]),
main .grid:has(img[src*="avatar"]) {
  display: flex !important;
  justify-content: center !important;
  grid-template-columns: 1fr !important;
}

/* Specific known Postiz selectors (belt-and-suspenders) */
[class*="right-side"],
[class*="RightSide"],
.testimonials-column,
#testimonials,
div:has(> img[src*="/auth/avatars/"]) {
  display: none !important;
}

/* ============================================================================
 * LOGIN PAGE REBUILD
 * ========================================================================= */

/* Page background */
body,
main,
[class*="auth"],
[class*="Auth"],
[class*="signin"],
[class*="SignIn"],
[class*="login"],
[class*="Login"] {
  background: var(--dira-cream) !important;
}

/* Login card/form container */
form,
[class*="auth"] form,
[class*="signin"] form,
[class*="login"] form,
.auth-container form,
main form {
  background: #FFFFFF !important;
  border: 1px solid var(--dira-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(22, 48, 73, 0.08) !important;
  padding: 40px 36px !important;
  max-width: 460px !important;
  margin: 0 auto !important;
}

/* "Sign In" heading */
main h1, form h1,
main h2, form h2 {
  color: var(--dira-navy) !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* ============================================================================
 * POSTIZ LOGO — hide and replace with Cadence wordmark
 * ========================================================================= */

/* Hide Postiz logo */
img[src*="logo"],
img[alt*="Postiz"],
img[alt*="postiz"],
svg[class*="logo"],
[class*="logo"] > img,
[class*="Logo"] > img,
header img:first-child,
a[href="/"] > img,
a[href="/"] > svg {
  display: none !important;
}

/* Inject Cadence wordmark above the sign-in form */
main form::before,
[class*="auth"] form::before {
  content: '';
  display: block;
  width: 220px;
  height: 56px;
  background-image: url('/dirasuite-brand/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto 28px;
}

/* ============================================================================
 * INPUTS
 * ========================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--dira-cream) !important;
  border: 1px solid var(--dira-border) !important;
  border-radius: 8px !important;
  color: var(--dira-navy) !important;
  padding: 11px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--dira-navy) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(22, 48, 73, 0.08) !important;
}

label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--dira-navy) !important;
}

/* ============================================================================
 * BUTTONS
 * ========================================================================= */
button[type="submit"],
button.submit,
button[class*="primary"],
button[class*="Primary"],
.btn-primary,
form button:not([type="button"]) {
  background: var(--dira-navy) !important;
  color: var(--dira-cream) !important;
  border: 1px solid var(--dira-navy) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

button[type="submit"]:hover,
button.submit:hover,
button[class*="primary"]:hover {
  background: var(--dira-navy-deep) !important;
  border-color: var(--dira-navy-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(22, 48, 73, 0.2) !important;
}

/* "Continue with Google" button */
button[class*="google"],
button[class*="Google"],
a[class*="google"] {
  background: #FFFFFF !important;
  color: var(--dira-navy) !important;
  border: 1px solid var(--dira-border) !important;
  border-radius: 8px !important;
}

button[class*="google"]:hover {
  background: var(--dira-cream) !important;
  border-color: var(--dira-navy-soft) !important;
}

/* ============================================================================
 * LINKS
 * ========================================================================= */
a {
  color: var(--dira-navy) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--dira-terracotta) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ============================================================================
 * POST-LOGIN UI
 * Sidebar, top bar, workflow calendar, post composer — force light theme.
 * ========================================================================= */

/* Top nav / header */
header, nav[role="navigation"], [class*="header"], [class*="Header"] {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--dira-border) !important;
  color: var(--dira-navy) !important;
}

/* Sidebar — navy chrome (per DiraSuite system) */
aside,
[class*="sidebar"],
[class*="Sidebar"],
nav[class*="side"] {
  background: var(--dira-navy) !important;
  border-right: 1px solid var(--dira-navy-deep) !important;
  color: var(--dira-cream) !important;
}

aside a,
[class*="sidebar"] a,
[class*="Sidebar"] a {
  color: rgba(250, 246, 238, 0.8) !important;
}

aside a:hover,
[class*="sidebar"] a:hover,
aside a.active,
[class*="sidebar"] a.active,
aside [class*="active"],
[class*="sidebar"] [class*="active"] {
  color: var(--dira-cream) !important;
  background: rgba(250, 246, 238, 0.08) !important;
}

/* Active item gets terracotta accent */
aside a.active,
[class*="sidebar"] a.active,
aside [aria-current="page"],
[class*="sidebar"] [aria-current="page"] {
  background: rgba(184, 92, 56, 0.15) !important;
  color: var(--dira-terracotta) !important;
  border-left: 3px solid var(--dira-terracotta) !important;
}

/* Main content area */
main,
[role="main"],
[class*="content-area"],
[class*="ContentArea"] {
  background: var(--dira-cream) !important;
}

/* Cards, panels, modals */
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="Panel"],
[class*="modal"],
[class*="Modal"],
[role="dialog"] {
  background: #FFFFFF !important;
  border: 1px solid var(--dira-border) !important;
  color: var(--dira-navy) !important;
}

/* Calendar cells / post boxes */
[class*="calendar"],
[class*="Calendar"] {
  background: #FFFFFF !important;
  border: 1px solid var(--dira-border-soft) !important;
}

[class*="calendar"] [class*="day"],
[class*="Calendar"] [class*="day"] {
  background: #FFFFFF !important;
  border: 1px solid var(--dira-border-soft) !important;
  color: var(--dira-navy) !important;
}

/* Post editor / composer */
[class*="editor"],
[class*="Editor"],
[class*="composer"],
[class*="Composer"] {
  background: #FFFFFF !important;
  border: 1px solid var(--dira-border) !important;
  color: var(--dira-navy) !important;
}

[class*="editor"] [contenteditable="true"],
[class*="Editor"] [contenteditable="true"] {
  background: var(--dira-cream) !important;
  color: var(--dira-navy) !important;
  border: 1px solid var(--dira-border) !important;
}

/* Tooltips, dropdowns */
[role="tooltip"],
[class*="tooltip"],
[class*="Tooltip"],
[class*="dropdown"],
[class*="Dropdown"],
[class*="menu"][role="menu"] {
  background: #FFFFFF !important;
  border: 1px solid var(--dira-border) !important;
  color: var(--dira-navy) !important;
  box-shadow: 0 8px 24px rgba(22, 48, 73, 0.1) !important;
}

/* Tables */
table {
  background: #FFFFFF !important;
  color: var(--dira-navy) !important;
}

thead {
  background: var(--dira-cream-warm) !important;
}

tbody tr:nth-child(even) {
  background: var(--dira-cream) !important;
}

tbody tr:hover {
  background: var(--dira-cream-warm) !important;
}

/* Badges, pills, tags */
[class*="badge"],
[class*="Badge"],
[class*="pill"],
[class*="tag"] {
  background: var(--dira-cream-warm) !important;
  color: var(--dira-navy) !important;
  border: 1px solid var(--dira-border) !important;
}

/* Platform channel badges — use their native brand colors but with terracotta outline */
[class*="twitter"], [class*="Twitter"], [class*="x-platform"] { background: rgba(29, 155, 240, 0.08) !important; color: #1A7EC2 !important; border-color: rgba(29, 155, 240, 0.25) !important; }
[class*="linkedin"], [class*="LinkedIn"]                     { background: rgba(10, 102, 194, 0.08) !important; color: #084881 !important; border-color: rgba(10, 102, 194, 0.25) !important; }
[class*="instagram"], [class*="Instagram"]                   { background: rgba(225, 48, 108, 0.08) !important; color: #B0184F !important; border-color: rgba(225, 48, 108, 0.25) !important; }
[class*="facebook"], [class*="Facebook"]                     { background: rgba(24, 119, 242, 0.08) !important; color: #0F5CB8 !important; border-color: rgba(24, 119, 242, 0.25) !important; }

/* Success/error states */
[class*="success"], .text-green-500, .text-green-600 {
  color: var(--dira-teal) !important;
}

[class*="error"], [class*="danger"], .text-red-500, .text-red-600 {
  color: #B8453A !important;
}

/* ============================================================================
 * KILL POSTIZ BRAND LEAKS
 * ========================================================================= */

/* Any "Postiz" branding that survives elsewhere */
title, [class*="brand-name"], [class*="BrandName"] {
  /* nothing visual to do for <title>, but nginx already covers the actual browser tab */
}

/* "Powered by Postiz" / footer attributions */
[class*="poweredBy"],
[class*="PoweredBy"],
footer a[href*="postiz"],
.powered-by {
  display: none !important;
}

/* ============================================================================
 * SCROLLBARS — light theme scrollbars to match
 * ========================================================================= */
* {
  scrollbar-color: var(--dira-border) var(--dira-cream);
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--dira-cream); }
*::-webkit-scrollbar-thumb { background: var(--dira-border); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--dira-navy-soft); }

/* ============================================================================
 * FINAL GUARD — if dark-mode image filters exist, disable them
 * ========================================================================= */
img, svg {
  filter: none !important;
}

/* ============================================================================
 * END OF OVERLAY
 * ========================================================================= */