alpenwerk-hr/app/globals.css

@import "tailwindcss";

/* ═══ Farben nach dem Manner CD Manual 2022 ═══════════════════════════
   §1.1 kennt genau zwei Markenfarben:

     Manner Rosa   #F69686   CMYK 0/50/40/0    sRGB 246 150 134
     Manner Blau   #164194   CMYK 100/80/0/0   sRGB 22 65 148   (Reflex Blue)

   Beide behalten ihren Wert unveraendert; die Abstufungen daneben sind
   Aufhellungen und Abdunklungen davon, weil eine Oberflaeche Zwischentoene
   fuer Hover, Chips und Flaechen braucht und das Manual nur fuer den Druck
   geschrieben ist.

   ── Warum Blau die Interaktion traegt und Rosa die Flaeche ──
   Nachgerechnet nach WCAG 2.1:

     Weiss auf Rosa    2.18:1   faellt durch, auch fuer Grossschrift
     Schwarz auf Rosa  7.47:1   AAA
     Weiss auf Blau    9.47:1   AAA
     Blau auf Weiss    9.47:1   AAA

   Rosa kann also keine Schrift tragen — weder weisse noch, bei 4.34:1,
   blaue Fliesschrift. Es ist eine Flaeche, auf der Dunkles steht. Blau
   traegt in beide Richtungen und wird damit zur Farbe von Knopf, Link und
   Fokusring. Das ist keine Auslegung des Manuals, sondern das, was die
   beiden Farben physikalisch hergeben. */
@theme {
  /* ── Blau: alles, was man anfassen kann ── */
  --color-brand-50: #eef3fb;
  --color-brand-100: #dae4f5;
  --color-brand-200: #afc3e6;
  --color-brand-500: #164194; /* Manner Blau, CD §1.1 */
  --color-brand-600: #11326f;
  --color-brand-700: #0d2857;

  /* ── Rosa: alles, was die Marke traegt ──
     accent-500 ist der Markenwert und bleibt Flaeche. Die Schrift darauf
     ist ink (7.47:1), nie Weiss. */
  --color-accent-50: #fef5f2;
  --color-accent-100: #fde7e1;
  --color-accent-200: #facec2;
  --color-accent-500: #f69686; /* Manner Rosa, CD §1.1 */
  --color-accent-600: #d9604b;
  --color-accent-700: #a8402e;

  --color-surface: #fdf6f4;

  --color-border: #f0dbd4;
  --color-border-subtle: #f8ece8;
  /* Fuer die Umrandung von Eingabefeldern. Der dekorative Kartenrahmen
     darueber darf blass sein; die Grenze eines Bedienelements muss nach
     WCAG 1.4.11 3:1 erreichen, und das tut dieser Ton mit 3.56:1 gegen
     Weiss und 3.34:1 gegen die Seitenflaeche. */
  --color-border-strong: #a67f70;

  /* Das Schwarz aus dem Manual selbst (#231F20), nicht reines Schwarz. */
  --color-ink: #231f20;
  --color-ink-body: #4b4446;
  --color-ink-muted: #756c6e;

  /* ── Funktionsfarben ──
     Sie bleiben, was sie sind. Das Manual regelt die Identitaet, nicht die
     Rueckmeldung: Rot heisst Fehler, weil die Benutzerin das mitbringt,
     nicht weil es jemand entworfen hat. In einem System, in dem ein Knopf
     einen Austritt erfasst, waere eine markenkonforme Fehlerfarbe kein
     Stil, sondern ein Mangel.

     `info` bleibt bewusst tuerkis statt blau zu werden: Blau heisst ab
     jetzt „hier kann man klicken", und ein Hinweischip in derselben Farbe
     saehe bedienbar aus. Gemessen kommt dazu, dass ein blaues info dem
     violetten Chip zu nahe kaeme (dE 6.8 — nicht unterscheidbar). */
  --color-success-bg: #dff6dd;
  --color-success-text: #0e700e;

  --color-danger-bg: #fde7e9;
  --color-danger-text: #b10e1c;
  --color-danger-solid: #c50f1f;

  --color-warning-bg: #fff4ce;
  --color-warning-text: #835b00;

  --color-info-bg: #d7f0f0;
  --color-info-text: #00666d;

  /* Nachgezogen: gegen den alten Wert #f0ecf7 stand der Fehler-Chip bei
     dE 8.0 — „Austritt" und „Befoerderung" waren im Vorbeigehen dieselbe
     blasse Flaeche. Jetzt dE 15.0 bei 7.9:1 Kontrast. */
  --color-purple-bg: #e4d9f5;
  --color-purple-text: #54277f;

  /* A bare `--radius` in Tailwind v4 collapses the whole scale onto one
     value — `rounded` and `rounded-lg` both came out at 8px, so a chip, an
     input and a card could not be told apart. Named steps restore the
     gradation; 8px stays the default so nothing shifts unintentionally. */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Warm, brand-tinted rather than neutral grey: a pure black shadow over
     the pink surface reads as dirt. Kept shallow — this is a data-dense
     admin UI, the depth only has to separate a card from the page.
     Der Grundton folgt dem Rosa der Flaeche, nicht mehr dem alten Magenta. */
  --shadow-card: 0 1px 2px rgb(122 60 45 / 0.05), 0 1px 3px rgb(122 60 45 / 0.07);
  --shadow-card-hover: 0 2px 4px rgb(122 60 45 / 0.07), 0 4px 12px rgb(122 60 45 / 0.09);
  --shadow-overlay: 0 8px 32px rgb(35 31 32 / 0.18);

  /* Siehe app/layout.tsx: DIN waere die Schrift des Manuals, ist aber nicht
     als Webfont lizenziert; geladen wird Barlow als naechstliegender freier
     Ersatz. Die Ersatzkette bleibt neutral — faellt der Webfont aus, soll
     keine gerundete Systemschrift einspringen. */
  --font-sans: var(--font-din), "Segoe UI", system-ui, sans-serif;
}

body {
  background-color: var(--color-surface);
  color: var(--color-ink);
  /* iOS bounce-scrolls the whole document behind fixed overlays (drawer,
     modal) and shows the white page edge; contain keeps the rubber band
     inside the scroller that actually overflowed. */
  overscroll-behavior-y: none;
}

/* Mobile browsers zoom the page when a focused input is under ~16px. Every
   form control in this app is text-sm (14px), so without this, tapping any
   field on iOS Safari jumps the layout. */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Touch devices have no hover, so the grey flash Chrome/Safari paint on tap
   is the only press feedback — but their default is a hard blue box. */
@media (hover: none) {
  * {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
  }
}

/* ── React Flow chrome ─────────────────────────────────────────────
   The library ships a generic grey control panel; these bring it onto the
   app's own palette and give the buttons a real touch target. */
.orgchart-canvas .react-flow__controls {
  gap: 2px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 2px 10px rgb(45 28 38 / 0.08);
  overflow: hidden;
}

.orgchart-canvas .react-flow__controls-button {
  width: 32px;
  height: 32px;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: #fff;
  color: var(--color-ink-body);
}

.orgchart-canvas .react-flow__controls-button:last-child {
  border-bottom: none;
}

.orgchart-canvas .react-flow__controls-button:hover {
  background: var(--color-brand-100);
  color: var(--color-brand-700);
}

.orgchart-canvas .react-flow__controls-button svg {
  fill: currentColor;
  max-width: 14px;
  max-height: 14px;
}

.orgchart-canvas .react-flow__minimap {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 2px 10px rgb(45 28 38 / 0.08);
}

/* Node selection has to stay enabled (it is what gives the card pointer
   events at all — see GraphOrgChart), but the card carries its own hover and
   match styling, so React Flow's default selected/focus outline is noise. */
.orgchart-canvas .react-flow__node.selected,
.orgchart-canvas .react-flow__node:focus,
.orgchart-canvas .react-flow__node:focus-visible {
  outline: none;
  box-shadow: none;
}

.orgchart-canvas .react-flow__attribution {
  background: transparent;
  font-size: 10px;
}

.orgchart-canvas .react-flow__attribution a {
  color: var(--color-ink-muted);
}

/* The minimap costs more screen than it earns on a phone. */
@media (max-width: 1023px) {
  .orgchart-canvas .react-flow__minimap {
    display: none;
  }
}