/*
 * HairConnect — merklaag over Filament.
 *
 * Filament levert de bouwstenen; dit bestand legt de huisstijl erover. De
 * waarden komen uit packages/tokens/tokens.css — verander ze daar, niet hier.
 *
 * De vorm: sidebar en topbalk zijn één doorlopend charcoal vlak in een L. Het
 * werkgebied ligt daar als een lichte kaart in, met een ronde hoek linksboven.
 * Dat leest als één applicatie in plaats van drie rechthoeken naast elkaar —
 * precies het verschil met Optios, waar elke module zijn eigen kader heeft.
 */

:root {
  --hc-charcoal: #1f1f1f;
  --hc-graphite: #333333;
  --hc-copper: #c48a6a;
  --hc-copper-400: #cfa287;
  --hc-copper-700: #8a5940;
  --hc-cream: #f4e9e2;
  --hc-ivory: #fafaf8;
  --hc-nav-fg: #d8d5d1;
  --hc-nav-fg-muted: #8a8783;

  /* Het logo neemt deze over; op een donkere balk worden ze lichter. */
  --hc-logo-ink: #f4f1ee;
  --hc-logo-mid: #cfa287;
  --hc-logo-accent: #c48a6a;

  --hc-shell-radius: 18px;
}

/* ---------------------------------------------------------------------------
   De schil: één donker vlak achter sidebar én topbalk
   --------------------------------------------------------------------------- */

.fi-body,
.fi-layout {
  background-color: var(--hc-charcoal);
}

/*
 * Op desktop is de zijbalk doorzichtig: het charcoal komt van .fi-layout
 * eronder, zodat zijbalk en topbalk één doorlopend vlak vormen.
 */
.fi-sidebar {
  background-color: transparent;
  border-right: 0;
  box-shadow: none;
}

/*
 * Op gsm klapt diezelfde zijbalk als losse laag óver de pagina. Doorzichtig
 * betekent dan dat de inhoud eronder door de menu-items heen leest. Daar moet
 * hij dus wél zijn eigen ondergrond meebrengen, plus een schaduw zodat het
 * onmiskenbaar een laag is.
 */
@media (max-width: 1023px) {
  .fi-sidebar {
    background-color: var(--hc-charcoal);
    box-shadow: 0 0 40px rgb(0 0 0 / 0.45);
  }
}

.fi-topbar,
.fi-topbar > nav,
.fi-topbar-ctn {
  background-color: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* Het werkgebied is de lichte kaart binnen die schil. */
.fi-main-ctn {
  background-color: var(--hc-ivory);
  border-top-left-radius: var(--hc-shell-radius);
  margin-top: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .fi-main-ctn {
    border-bottom-left-radius: var(--hc-shell-radius);
    margin-bottom: 0.75rem;
    margin-right: 0.75rem;
    border-top-right-radius: var(--hc-shell-radius);
    border-bottom-right-radius: var(--hc-shell-radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
  }
}

.fi-main {
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Navigatie
   --------------------------------------------------------------------------- */

.fi-sidebar-group-label {
  color: var(--hc-nav-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.6875rem;
  font-weight: 500;
}

.fi-sidebar-item-label {
  color: var(--hc-nav-fg);
  font-weight: 400;
}

.fi-sidebar-item-icon {
  color: var(--hc-nav-fg-muted);
}

/* Zachte, afgeronde vorm in plaats van een strakke rechthoek. */
.fi-sidebar-item-button {
  border-radius: 10px;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-button:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
  /* Koperen gloed in plaats van een blok: het actieve item licht op, het
     springt niet uit de balk. */
  background-image: linear-gradient(
    90deg,
    rgb(196 138 106 / 0.22) 0%,
    rgb(196 138 106 / 0.06) 100%
  );
  box-shadow: inset 2px 0 0 0 var(--hc-copper);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
  color: var(--hc-copper-400);
  font-weight: 500;
}

.fi-sidebar-nav-groups::-webkit-scrollbar-thumb {
  background-color: rgb(255 255 255 / 0.12);
}

/* ---------------------------------------------------------------------------
   Topbalk: zoekveld en knoppen op donker
   --------------------------------------------------------------------------- */

.fi-topbar .fi-global-search-field .fi-input-wrp,
.fi-topbar .fi-input-wrp {
  background-color: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
}

.fi-topbar .fi-input-wrp input {
  color: var(--hc-nav-fg);
}

.fi-topbar .fi-input-wrp input::placeholder {
  color: var(--hc-nav-fg-muted);
}

.fi-topbar .fi-icon-btn {
  color: var(--hc-nav-fg-muted);
}

.fi-topbar .fi-icon-btn:hover {
  color: var(--hc-copper-400);
}

/* ---------------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------------- */

.hc-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}

.hc-logo__mark {
  width: 2.9rem;
  height: 2.1rem;
  flex: none;
}

.hc-logo__words {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.hc-logo__wordmark {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.hc-logo__hair {
  color: var(--hc-logo-ink);
}

.hc-logo__connect {
  color: var(--hc-copper-400);
}

.hc-logo__tagline {
  font-size: 0.5rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--hc-nav-fg-muted);
  white-space: nowrap;
}

/* Op smalle schermen alleen het monogram: de tagline is dan onleesbaar klein. */
@media (max-width: 640px) {
  .hc-logo__tagline {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Inhoud
   --------------------------------------------------------------------------- */

.fi-header-heading {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.fi-ta-header-cell {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Bedragen, tijden en aantallen lijnen uit in hun kolom. */
.fi-ta-text-item-label {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Login: cream grond, zoals de brandboard
   --------------------------------------------------------------------------- */

.fi-simple-layout {
  background-color: var(--hc-cream);
}

.fi-simple-main {
  border: 1px solid rgb(31 31 31 / 0.06);
  border-radius: var(--hc-shell-radius);
}

/* Op de lichte loginpagina moet het woordmerk donker zijn. */
.fi-simple-layout .hc-logo {
  --hc-logo-ink: #1f1f1f;
}

.fi-simple-layout .hc-logo__connect {
  color: var(--hc-copper-700);
}

.fi-simple-layout .hc-logo__tagline {
  color: #78746d;
}

/* ---------------------------------------------------------------------------
   Toegankelijkheid
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--hc-copper);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}