@charset "utf-8";
/* Die regel hierboven moet de ALLEREERSTE van het bestand zijn en is er niet
   voor de sier: de tekst in `content:` onderaan draagt een · en een —, en
   zonder deze verklaring raadt de browser de codering. Op 16 september stond er
   na de eerste echte boot `Crystalloids · social planner â€" dit draait…` op
   het scherm — UTF-8 gelezen als Latin-1. De bytes op schijf waren goed; het
   ontbrak aan de verklaring. `charset utf-8;` in de nginx-config dekt hetzelfde
   af via de header, en allebei is hier het goedkoopst.

   Crystalloids over Postiz' inlogscherm. Kleuren uit
   frontend/src/styles/global.css, want dit scherm staat naast CrystalHub.

   Elke regel hieronder is op 16 september op dev nagemeten in de browser, niet
   bedacht. Wat er NIET in staat is net zo belangrijk — zie onderaan. */
:root {
  --cl-black: #0A0A0A;
  --cl-ink:   #1C1C1C;
  --cl-ink-3: #9A9A9A;
  --cl-line:  #2E2C2C;
  --cl-red:   #E84D3C;
  --cl-red-h: #D13E2E;
  --cl-paper: #F2EFE8;
}

/* 1 · De marketingkolom weg: "Over 20.000+ Entrepreneurs use Postiz To Grow
      Their Social Presence", vier verzonnen aanbevelingen en zestien foto's van
      vreemden. Geselecteerd op een stuk van de klassenaam: Tailwind zet er
      blokhaken in die in CSS ontsnapt moeten worden, en dat breekt eerder. */
div[class*="pt-[88px]"][class*="lg:flex"] { display: none !important; }

/* 2 · Postiz' woordmerk is een inline <svg>, dus niet als bestand te
      vervangen. Verbergen, en het onze op dezelfde plek tekenen. */
div[class*="max-w-[440px]"] > svg:first-of-type { display: none !important; }
div[class*="max-w-[440px]"]::before {
  content: "";
  display: block;
  height: 30px;
  margin-bottom: 4px;
  background: url("/_crystalloids/logo-licht.svg") left center / auto 30px no-repeat;
}

/* 3 · Onze tonen. Postiz draait alleen donker, en dat laten we zo: licht maken
      vraagt het overschrijven van honderden Tailwind-klassen en breekt bij de
      eerste versie-update. Dit zijn de donkere tinten uit ons eigen palet. */
body, div[class*="bg-[#0E0E0E]"] { background-color: var(--cl-black) !important; }
div[class*="rounded-[12px]"][class*="py-[40px]"] {
  background-color: var(--cl-ink) !important;
  border: 1px solid var(--cl-line) !important;
}

/* 4 · Het accent. Postiz zet hier paars neer. */
button[type="submit"], button[class*="bg-customColor"] {
  background-color: var(--cl-red) !important;
  border-color: var(--cl-red) !important;
  color: #FFFFFF !important;
}
button[type="submit"]:hover { background-color: var(--cl-red-h) !important; }
a { color: var(--cl-paper); }

/* 5 · Eén regel die zegt waar je bent — de enige tekst die we toevoegen in
      plaats van weghalen. */
div[class*="max-w-[440px]"]::after {
  content: "Crystalloids · social planner — dit draait op onze eigen machine";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cl-ink-3);
}

/* 6 · "Continue With Google" weg, met het label en de OR-streep erbij.

      Dit stond er eerst NIET in, met als argument dat een broze selector erger
      is dan een knop die faalt. Twee dingen hebben dat omgedraaid.
 
      **Wat die knop werkelijk doet.** Richard klikte hem op 16 september. Je
      krijgt een Google-scherm met je eigen naam en foto erop:
 
        Toegang geblokkeerd: autorisatiefout
        Missing required parameter: client_id
        Fout 400: invalid_request
 
      Voor wie niet weet wat een client_id is, leest dat als "ik heb iets fout
      gedaan" of "mijn toegang is ingetrokken". Dat is duurder dan een knop die
      niets doet.
 
      **En de knop is niet aan te zetten.** In `register.tsx` staat hij er
      onvoorwaardelijk, als de val van een ternair:
 
        {genericOauth && isGeneral ? <OauthProvider /> : <GoogleProvider />}
 
      Er is dus geen instelling die hem weghaalt; hij verschijnt of we een
      Google-client hebben of niet.
 
      **De haak die ik eerst niet zag.** De knop tekent Googles eigen logo als
      inline SVG, met Googles eigen merkkleuren erin. `#FFC107` in een pad is
      geen Tailwind-klasse die bij de volgende versie verschuift — het is het
      logo. Met `:has()` is dat van buitenaf te selecteren.
 
      Alle drie de regels zijn op 16 september in de browser op dev getest: elk
      precies één treffer, en het e-mailformulier blijft heel. Verschuift de
      opmaak ooit zó dat ze niets meer raken, dan staat de knop er weer — dat is
      zichtbaar en niet stil, en dat is het verschil met een regel die per
      ongeluk iets ánders verbergt. */
div:has(> div > svg path[fill="#FFC107"]) { display: none !important; }
div:has(+ div > div > div > div > svg path[fill="#FFC107"]) { display: none !important; }
div:has(> div[class*="px-[16px]"]) { display: none !important; }

/* Wat hier nog steeds NIET staat: een regel op "Don't Have An Account? Sign Up".
   Die is wél een doodlopend pad zodra het eerste account bestaat, maar hij faalt
   zacht — je komt op een pagina die zegt dat registratie dicht is — en er is
   geen enkele eigen haak voor. */