/*
  De huisstijl van pconnect over het klantportaal. Alleen het paneel /portal: deze
  stylesheet wordt via een render hook op dat paneel ingeladen, dus /admin ziet er niets
  van.

  Dit is handgeschreven CSS en geen Tailwind-build. Reden: een eigen Filament-thema
  (`->viteTheme()`) vervangt Filaments stylesheet volledig en vraagt dan een
  Tailwind-build met hun preset, terwijl deze app geen assetbuild heeft en de deploy geen
  npm kent. Filaments eigen CSS blijft dus staan en dit bestand ligt erbovenop.

  Twee lagen, in deze volgorde van voorkeur:

  1. **Variabelen.** Kleur en lettertype komen uit de panel provider (`->colors()`,
     `->font()`). Dat is een afspraak van Filament en gaat niet stuk bij een upgrade.
  2. **Klassen.** Wat niet via een variabele kan, gaat hier via Filaments `fi-*`-klassen.
     Dat zijn interne namen, geen API, dus hier geldt: zo weinig mogelijk, en alleen waar
     het verschil echt gezien wordt. Breekt er na een Filament-upgrade iets in de
     vormgeving, kijk dan eerst in dit blok.

  De tokens staan in tokens.css ernaast, gedeeld met de marketingsite. Niet met de hand
  wijzigen; zie de kop van dat bestand.
*/

/* ---------- een kleur die de site niet heeft ---------- */

/*
  Op de site bestaat geen foutkleur: daar is niets kapot. In het portaal wel, want een
  gatekeeper die pCon niet kent of een abonnement dat uit staat moeten als zodanig te
  zien zijn. Dus hier, en alleen hier, een rood dat bij de inkt past. Niet in tokens.css:
  dat bestand is gedeeld, en een token dat de ene afnemer nooit gebruikt hoort daar niet.
*/
:root {
  --pc-danger: #b4342b;
}

:root.dark,
:root[data-theme='dark'] {
  --pc-danger: #f0938b;
}

/* ---------- tekst ---------- */

/*
  Dezelfde letterinstellingen als de site. Filament zet --font-family zelf (wij geven
  'Inter' mee in de provider), maar niet de OpenType-features, en juist die maken het
  verschil tussen Inter en "Inter zoals wij hem gebruiken".
*/
.fi-body {
  background-color: var(--canvas);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* Koppen staan op de site strak gespatieerd. Zonder dit leest een paneelkop losser. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
  letter-spacing: -0.02em;
}

.fi-header-heading {
  letter-spacing: -0.032em;
}

/* ---------- hoeken ---------- */

/*
  Filament rondt alles op 0.5rem af. Op de site zijn de hoeken ruimer (--r-sm voor
  velden, --r voor panelen) en knoppen zijn pillen. Dat is het verschil dat je het
  eerst ziet, nog voor de kleur.
*/
.fi-input-wrp,
.fi-fo-field-wrp .fi-input-wrp {
  border-radius: var(--r-sm);
}

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
  border-radius: var(--r);
}

.fi-btn:not(.fi-ta-actions .fi-btn) {
  border-radius: var(--r-pill);
}

/* ---------- de primaire knop ---------- */

/*
  Filament zet de knopkleur als inline variabele (--c-600) en daar kan een stylesheet
  niet tussen, dus hier staat de eigenschap zelf. Met de tokens erin klapt de knop in
  het donker mee zoals op de site: marineblauw met witte tekst wordt bijna-wit met
  marineblauwe tekst. Dat is precies waarom hier een token staat en geen kleur.
*/
.fi-btn.fi-color-primary {
  background-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--sh-glow);
}

.fi-btn.fi-color-primary:hover {
  background-color: color-mix(in oklab, var(--accent) 80%, var(--hi-2));
}

/* ---------- focus ---------- */

/*
  Een echte ring in de huiskleur, zoals op de site. Filament gebruikt per component een
  eigen ring-kleur uit de primaire ramp; dat werkt, maar valt net anders uit dan de
  :focus-visible van de site, en op de inlogpagina staan ze naast elkaar.
*/
.fi-body :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- zijbalk ---------- */

/*
  Het actieve item krijgt het groene streepje dat op de site boven elke sectiekop staat
  (.eyebrow). Filament markeert actief met een grijs vlak plus een blauw icoon; het vlak
  blijft, het streepje zegt waar je bent zonder een tweede kleur te introduceren.
*/
.fi-sidebar-item-active .fi-sidebar-item-button {
  position: relative;
}

/*
  Filament zet het actieve item in primary-400 zodra het donker is. Dat is onze inkt in
  een lichtere tint, en daardoor leest het actieve item in het donker zwakker dan de rest
  terwijl het juist het sterkste moet zijn. Dus: volle inkt voor het label, en het groen
  van het streepje ook in het pictogram, zodat "hier ben je" uit een kleur komt.
*/
.fi-sidebar-item-active .fi-sidebar-item-label {
  color: var(--ink);
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: var(--hi-ink);
}

.fi-sidebar-item-active .fi-sidebar-item-button::before {
  content: '';
  position: absolute;
  inset-inline-start: -0.5rem;
  top: 50%;
  width: 3px;
  height: 1.1rem;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--hi);
}

/* ---------- eigen bouwstenen ---------- */

/*
  Hieronder staat geen Filament meer. Dit zijn de bouwstenen van de site, opnieuw
  opgeschreven voor de eigen views en de inlogpagina, met `pc-` ervoor zodat ze nooit
  botsen met een Tailwind-utility of een fi-klasse. Per blok staat van welke klasse op
  de site hij is afgeleid, zodat je de twee naast elkaar kunt leggen.
*/

/*
  Tekst in de eigen schermen. Dit verving `text-sm text-gray-500 dark:text-gray-400` en
  zijn familie: die werkten alleen omdat Filament die utilities toevallig zelf gebruikt
  en dus meecompileert. Deze app bouwt geen Tailwind, dus dat is geleend en geen afspraak.
  Nu staat de kleur in onze eigen tokens en klopt licht en donker vanzelf.
*/
.pc-muted {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.pc-ink {
  font-size: 0.875rem;
  color: var(--ink);
}

.pc-subhead {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.pc-faint {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/*
  De haarlijn die twee blokken binnen een sectie scheidt. Geen marge erboven: deze
  blokken staan in een `space-y-6` en krijgen hun afstand daarvandaan.
*/
.pc-hr {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* Van .eyebrow: groen streepje plus kleine kapitalen. */
.pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hi-ink);
}

.pc-eyebrow::before {
  content: '';
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--hi);
}

/* Van .plabel: hetzelfde idee, kleiner, binnen een kaart. */
.pc-label {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Van .lead en .fine. */
.pc-lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}

.pc-fine {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* Van .formcard: het witte paneel met een zachte schaduw. */
.pc-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Van .btn en .btn--primary. */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.pc-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--sh-glow);
}

.pc-btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 80%, var(--hi-2));
  transform: translateY(-1px);
}

.pc-btn--block {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .pc-btn:hover {
    transform: none;
  }
}

/* Van .field: label, hint, invoerveld. */
.pc-field {
  display: grid;
  gap: 0.4rem;
}

.pc-field > label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.pc-field input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.pc-field input:hover {
  border-color: var(--line-strong);
}

.pc-field input:focus {
  background: var(--surface);
  border-color: var(--accent);
}

.pc-field--check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.pc-field--check input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  accent-color: var(--accent);
}

/*
  De foutmelding. Geen rode balk: een verkeerd wachtwoord is geen storing, dus hetzelfde
  rustige paneel als elders, met de kleur alleen in de tekst.
*/
.pc-error {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pc-danger);
  border-radius: var(--r-sm);
}

/* Van .ticks: een echt vinkje in salie, nooit in de accentkleur. */
.pc-ticks {
  display: grid;
  gap: 0.7rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.pc-ticks li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--ink-soft);
}

.pc-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
}

.pc-ticks li::after {
  content: '';
  position: absolute;
  left: 0.36rem;
  top: 0.66rem;
  width: 0.42rem;
  height: 0.24rem;
  border-left: 1.5px solid var(--sage);
  border-bottom: 1.5px solid var(--sage);
  transform: rotate(-45deg);
}

/* ---------- de inlogpagina ---------- */

/*
  Deze pagina draait zonder Filaments CSS, dus ook zonder zijn reset. Vandaar hier het
  kleine stukje basis dat elke pagina nodig heeft. Alles staat onder .pc-page, zodat het
  de schermen binnen het paneel niet raakt.
*/
.pc-page {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

.pc-page *,
.pc-page *::before,
.pc-page *::after {
  box-sizing: border-box;
}

/* Dezelfde focusring als op de site; zonder Filaments CSS is er anders de zwarte van de browser. */
.pc-page :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.pc-page h1,
.pc-page h2 {
  margin: 0 0 0.6em;
  text-wrap: balance;
}

.pc-page h1 {
  font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.pc-page h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.pc-page p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.pc-page a {
  color: inherit;
  text-underline-offset: 0.18em;
}

/*
  Twee kolommen, zoals de hero van de site: tekst links, het object rechts. Onder de
  59rem valt de rechterkolom weg. Dat mag, want daar staat geen informatie die je nodig
  hebt om in te loggen.
*/
.pc-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
  max-width: 68rem;
  min-height: 100vh;
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1rem, 4vw, 1.5rem);
}

.pc-login__form {
  max-width: 26rem;
  width: 100%;
}

.pc-login .pc-brand {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.pc-form {
  display: grid;
  gap: 1.25rem;
}

.pc-login .pc-fine {
  margin: 2rem 0 0;
}

@media (max-width: 59rem) {
  .pc-login {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
  }

  .pc-login__aside {
    display: none;
  }
}

/* ---------- het kader rechts ---------- */

/*
  Hetzelfde browserkader als op de site (.frame), met de onboardingtegels erin. Het is
  illustratie: in de HTML staat het op aria-hidden, want het toont geen echte gegevens.
*/
.pc-frame {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}

.pc-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}

.pc-frame__dots {
  display: inline-flex;
  gap: 0.3rem;
}

.pc-frame__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.pc-frame__url {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.pc-frame__body {
  padding: 1.35rem 1.5rem 1.5rem;
}

/*
  In dit kader passen er geen vier naast elkaar. Twee bij twee leest als een opzet; drie
  en dan een losse eronder leest als een fout.
*/
.pc-frame .pc-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
  De tegels uit PortalMock op de site. Afgeronde stap: een vinkje in salie. Openstaande
  stap: het stapnummer in de accentkleur, want dat is een handeling die nog moet
  gebeuren. Precies daarom hoort het vinkje zelf nooit in de accentkleur.
*/
.pc-tiles {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tegel;
}

.pc-tiles li {
  counter-increment: tegel;
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem 0.8rem 2.1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.pc-tiles strong {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pc-tiles span {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.pc-tiles li::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0.95rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
}

.pc-tiles .is-done::after {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 1.26rem;
  width: 0.34rem;
  height: 0.2rem;
  border-left: 1.4px solid var(--sage);
  border-bottom: 1.4px solid var(--sage);
  transform: rotate(-45deg);
}

.pc-tiles .is-next {
  background: var(--hi-soft);
  border-color: var(--hi-line);
}

.pc-tiles .is-next::before {
  content: counter(tegel);
  display: grid;
  place-items: center;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-size: 0.5625rem;
  font-weight: 700;
}

.pc-tiles .is-next span {
  color: var(--hi-ink);
}

/* ---------- het onboardingbord ---------- */

/*
  Het dashboard van het portaal: dezelfde tegels als hierboven, maar met echte gegevens
  en in een paneel. Vandaar dat de tegels een label meer hebben dan in de illustratie: op
  de inlogpagina staat er verzonnen tekst in, hier staat er een stand.
*/
.pc-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: 1.35rem 1.5rem 1.5rem;
}

.pc-board .pc-tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.pc-tiles__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pc-board .pc-tiles strong {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.pc-label--sub {
  margin-top: 1.5rem;
}

/*
  Een openstaande stap die niet aan de beurt is: wel het stapnummer, niet de nadruk.
  Alleen de eerstvolgende handeling krijgt het groene vlak.
*/
.pc-tiles .is-todo::before,
.pc-tiles .is-unknown::before {
  content: counter(tegel);
  display: grid;
  place-items: center;
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-faint);
  font-size: 0.5625rem;
  font-weight: 700;
}

/* Fout is geen stap die je nog moet doen, dus geen nummer maar een teken. */
.pc-tiles .is-wrong::before {
  background: color-mix(in srgb, var(--pc-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--pc-danger) 45%, transparent);
}

.pc-tiles .is-wrong::after {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1.11rem;
  width: 1px;
  height: 0.62rem;
  background: var(--pc-danger);
}

.pc-tiles .is-wrong span {
  color: var(--pc-danger);
}

/* ---------- de verbindingen ---------- */

/*
  Een rij per verbinding, zoals in de mockup: welke site, welk platform, welke versie en
  wanneer hij zich voor het laatst meldde. De nieuwere versie staat ernaast in het groen,
  want dat is het enige in deze rij waar de klant iets mee moet.
*/
.pc-rows {
  display: grid;
  gap: 0.5rem;
}

.pc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.35rem 1.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
}

.pc-row__naam {
  font-weight: 500;
}

.pc-row__plat,
.pc-row__gezien {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.pc-row__ver {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  text-align: right;
}

.pc-row__ver b {
  margin-left: 0.35rem;
  color: var(--hi-ink);
  font-weight: 600;
}

@media (max-width: 36rem) {
  .pc-row {
    grid-template-columns: 1fr;
  }

  .pc-row__ver {
    text-align: left;
  }
}

/* Het merkteken, zoals in de koptekst van de site. */
.pc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.pc-brand svg {
  flex: none;
}