/* HatoBato (formerly Social Hub) — Point Two Global skin for Postiz (v1, 10 Nov 2026).
   Loaded by Caddy after Postiz's own CSS. Remove the Caddy "replace" line to switch it off.
   Brand source: pointtwoglobal.com (navy #0d0d0f, gold #e8d080 / #f0e090, Unbounded + Outfit). */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Unbounded:wght@400;600;700&family=Bricolage+Grotesque:wght@800&display=swap");

/* ---------- Dark = the PTG look ---------- */
:root body.dark {
  --ptg-ink: #0d0d0f;
  --ptg-gold: #e8d080;
  --ptg-gold-hi: #f0e090;
  --new-back-drop: #000;
  --new-bgColor: #0d0d0f;
  --new-bgColorInner: #141417;
  --new-settings: #1b1b20;
  --new-border: #26241f;
  --new-sep: #3a3628;
  --new-bgLineColor: #1c1b19;
  --new-textItemFocused: #0d0d0f;
  --new-textItemBlur: #a19c90;
  --new-boxFocused: #e8d080;
  --new-blockSeparator: #22211d;
  --new-btn-simple: #23221f;
  --new-btn-text: #f3efe4;
  --new-btn-primary: #e8d080;
  --new-ai-btn: #c9a94a;
  --new-box-hover: #1d1c19;
  --new-table-border: #26241f;
  --new-table-header: #18181b;
  --new-table-text: #a19c90;
  --new-table-text-focused: #f0e090;
  --new-big-strips: #121214;
  --new-col-color: #1e1d1a;
  --new-menu-dots: #8a857a;
  --popup-color: rgba(13, 13, 15, .72);
  --color-primary: #0d0d0f;
  --color-secondary: #111113;
  --color-third: #0b0b0d;
  --color-forth: #e8d080;
  --color-seventh: #f0e090;
  --color-custom4: #c9a94a;
  --color-custom7: #e8d080;
}

/* ---------- Light = PTG ivory ---------- */
:root body.light {
  --ptg-ink: #0d0d0f;
  --ptg-gold: #e8d080;
  --ptg-gold-hi: #f0e090;
  --new-back-drop: #0d0d0f;
  --new-bgColor: #f4f1ea;
  --new-bgColorInner: #fffdf8;
  --new-settings: #efebe1;
  --new-border: #e6e0d2;
  --new-sep: #d8d0bd;
  --new-bgLineColor: #ebe6da;
  --new-textItemFocused: #5c4710;
  --new-textItemBlur: #6f6a5f;
  --new-boxFocused: #f3e6bb;
  --new-blockSeparator: #efeadf;
  --new-btn-simple: #ece7db;
  --new-btn-text: #0d0d0f;
  --new-btn-primary: #e8d080;
  --new-ai-btn: #b8953a;
  --new-box-hover: #f7f3e9;
  --new-table-border: #e6e0d2;
  --new-table-header: #f7f4ec;
  --new-table-text: #6f6a5f;
  --new-table-text-focused: #9a7a22;
  --new-big-strips: #f7f4ec;
  --new-col-color: #f1ede3;
  --popup-color: rgba(13, 13, 15, .35);
  --color-primary: #f4f1ea;
  --color-secondary: #fffdf8;
  --color-forth: #c9a94a;
  --color-seventh: #b8953a;
  --color-custom4: #b8953a;
  --color-custom7: #c9a94a;
}

/* ---------- Type ---------- */
body, body * { font-family: "Outfit", "jakartaSans", system-ui, sans-serif; }
body h1, body h2, body h3,
body .text-\[24px\], body .text-\[20px\] {
  font-family: "Unbounded", "Outfit", sans-serif;
  letter-spacing: -.02em;
  font-weight: 600;
}
/* keep code monospace (icon fonts use class selectors, which already win over body *) */
body code, body pre, body .font-mono, body code *, body pre * { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Primary buttons: gold with ink text ---------- */
body .bg-btnPrimary, body .bg-btnPrimary * { color: var(--ptg-ink) !important; }
body .bg-btnPrimary { font-weight: 600; letter-spacing: .02em; box-shadow: 0 6px 18px -8px rgba(232, 208, 128, .55); }
body .bg-btnPrimary:hover { background: var(--ptg-gold-hi) !important; }
body .bg-btnPrimary svg [fill="white"], body .bg-btnPrimary svg [fill="#fff"], body .bg-btnPrimary svg [fill="#FFF"],
body .bg-btnPrimary svg [fill="#ffffff"], body .bg-btnPrimary svg [fill="#FFFFFF"] { fill: currentColor; }
body .bg-btnPrimary svg [stroke="white"], body .bg-btnPrimary svg [stroke="#fff"], body .bg-btnPrimary svg [stroke="#FFF"] { stroke: currentColor; }

/* Hard-coded Postiz purple buttons (Add to calendar, Settings tile...) -> solid gold */
body [class~="bg-[#612BD3]"], body [class~="bg-[#612bd3]"], body [class~="bg-[#612AD5]"], body [class~="bg-[#612ad5]"] {
  background-color: var(--ptg-gold) !important; color: var(--ptg-ink) !important;
}
body [class~="bg-[#612BD3]"] *, body [class~="bg-[#612bd3]"] *, body [class~="bg-[#612AD5]"] *, body [class~="bg-[#612ad5]"] * { color: var(--ptg-ink) !important; }
body [class~="bg-[#612BD3]"] svg [fill="white"], body [class~="bg-[#612BD3]"] svg [fill="#fff"], body [class~="bg-[#612BD3]"] svg [fill="#FFF"] { fill: currentColor; }
/* Pink secondary actions (Post now, Add comment) -> gold outline */
body [class~="bg-[#D82D7E]"], body [class~="bg-[#d82d7e]"] {
  background-color: transparent !important; color: var(--ptg-gold) !important;
  box-shadow: inset 0 0 0 1px var(--ptg-gold);
}
body [class~="bg-[#D82D7E]"] *, body [class~="bg-[#d82d7e]"] * { color: var(--ptg-gold) !important; }
body [class~="bg-[#D82D7E]"]:hover, body [class~="bg-[#d82d7e]"]:hover { background-color: rgba(232, 208, 128, .12) !important; }
body.light [class~="bg-[#D82D7E]"], body.light [class~="bg-[#d82d7e]"], body.light [class~="bg-[#D82D7E]"] *, body.light [class~="bg-[#d82d7e]"] * { color: #7a5f17 !important; }
body.light [class~="bg-[#D82D7E]"], body.light [class~="bg-[#d82d7e]"] { box-shadow: inset 0 0 0 1px #b8953a; }
/* Tinted purple variants (bg-[#612bd3]/10, hover borders) */
body [class*="bg-[#612bd3]/" i] { background-color: rgba(232, 208, 128, .14) !important; }
body [class*="border-[#612bd3]" i]:hover { border-color: rgba(232, 208, 128, .5) !important; }
/* Pink "selected" accents (selected channel avatar, today) -> gold */
body [class~="border-[#FC69FF]"], body [class~="border-[#fc69ff]"] { border-color: var(--ptg-gold) !important; }
body [class~="text-[#FC69FF]"], body [class~="text-[#fc69ff]"] { color: var(--ptg-gold) !important; }
body.light [class~="text-[#FC69FF]"], body.light [class~="text-[#fc69ff]"] { color: #9a7a22 !important; }
body.light [class~="border-[#FC69FF]"], body.light [class~="border-[#fc69ff]"] { border-color: #b8953a !important; }
/* Purple strokes/fills hard-coded in SVG icons */
body svg [stroke="#612BD3" i], body svg [stroke="#612AD5" i], body svg [stroke="#FC69FF" i] { stroke: var(--ptg-gold); }
body svg [fill="#612BD3" i], body svg [fill="#612AD5" i], body svg [fill="#FC69FF" i] { fill: var(--ptg-gold); }
body [class~="bg-[#612BD3]"] svg [stroke="#612BD3" i], body [class~="bg-[#612BD3]"] svg [fill="#612BD3" i] { stroke: var(--ptg-ink); }
body [class*="scrollbar-thumb"] { --scrollbar-thumb: #8a7434 !important; }
body ::selection { background: rgba(232, 208, 128, .35); }

/* ---------- Gold hairline accents (PTG signature) ---------- */
:root body.dark { background-image: radial-gradient(1200px 500px at 85% -10%, rgba(232, 208, 128, .07), transparent 60%); }
body.dark .bg-newBgColorInner { box-shadow: inset 0 1px 0 rgba(232, 208, 128, .10); }

/* ---------- Logo: replace Postiz mark with the PTG globe ---------- */
body svg.min-w-\[60px\].min-h-\[60px\] { display: none !important; }
body div.flex.justify-center:has(> svg.min-w-\[60px\].min-h-\[60px\])::before {
  content: "";
  display: block;
  width: 52px; height: 52px; margin-top: 8px;
  background: url("/ptg-skin/hatobato-hb-bg.svg") center / contain no-repeat;
}
body.light div.flex.justify-center:has(> svg.min-w-\[60px\].min-h-\[60px\])::before { filter: brightness(0); }

/* Settings menu: selected-item indicator (SVG gradient) -> gold */
body .group\/profile svg stop { stop-color: var(--ptg-gold) !important; }

/* ---------- v3 (11 Nov 2026): login page, notifications, misc ---------- */
/* Gold buttons that use Postiz's "forth" colour (Sign in) need ink text */
body .bg-forth, body .bg-forth * { color: var(--ptg-ink) !important; }
body .bg-forth { font-weight: 600; letter-spacing: .02em; }
body .bg-forth:hover { background-color: var(--ptg-gold-hi) !important; }
/* Login: Postiz's own near-black panels -> PTG navy */
body [class~="bg-[#0E0E0E]"] { background-color: #0d0d0f !important;
  background-image: radial-gradient(900px 500px at 80% 10%, rgba(232, 208, 128, .08), transparent 60%) !important; }
body [class~="bg-[#1A1919]"] { background-color: #141417 !important; box-shadow: inset 0 0 0 1px rgba(232, 208, 128, .16); }
/* Login: PTG logo in place of the Postiz wordmark */
body svg[viewBox="0 0 101 33"] { display: none !important; }
body div:has(> svg[viewBox="0 0 101 33"])::before {
  content: ""; display: block; width: 190px; height: 53px;
  background: url("/ptg-skin/hatobato-wordmark-bg.svg") left center / contain no-repeat;
}
/* Login: replace Postiz's marketing column with a Social Hub panel */
body div.pt-\[88px\]:has(> .animate-marqueeUp, .animate-marqueeUp) > * { display: none !important; }
body div.pt-\[88px\]:has(.animate-marqueeUp) { justify-content: center; padding-top: 0 !important; text-align: center; }
body div.pt-\[88px\]:has(.animate-marqueeUp)::before {
  content: "POINT TWO GLOBAL";
  font: 500 12px/1 "Outfit", sans-serif; letter-spacing: .3em; color: var(--ptg-gold);
  margin-bottom: 28px;
}
body div.pt-\[88px\]:has(.animate-marqueeUp)::after {
  content: "HatoBato";
  font: 800 clamp(44px, 5.6vw, 80px)/1.05 "Bricolage Grotesque", "Unbounded", sans-serif; letter-spacing: -.04em; color: #fff;
  padding-bottom: 34px;
  background: linear-gradient(to right, transparent, var(--ptg-gold), transparent) bottom / 60% 1px no-repeat;
}
/* Login: registration is closed, so hide the "Sign Up" line */
body p:has(> a[href="/auth"]) { display: none !important; }
/* Notification dot and upload drop-zone -> gold */
body svg circle[fill="#FF3EA2" i] { fill: var(--ptg-gold); }
body .uppy-Dashboard-dropFilesHereHint { border-color: var(--ptg-gold) !important; color: var(--ptg-gold) !important; }