/* ============================================================
   carelogic Styleguide · Komponenten (Blazor / Web)
   Voraussetzung: carelogic-tokens.css ist zuvor geladen.

   Herkunft: blazor/carelogic-components.css des Styleguide-Repos
   (Stand August 2026). Der Styleguide fuehrt diese Datei nicht mehr
   (heute web/carelogic-controls.css mit anderen Klassennamen) - die
   Klassen bleiben, Farben/Radien/Schatten laufen ueber die Tokens
   aus web/carelogic-tokens.css (Gestaltungsrichtlinien v1.0).

   Namensschema der Klassen: Zweck + Komponenten-Art
     .cl-btn-primary, .cl-card, .cl-section-header, .cl-chip …
   Statusfarben werden über Modifier gesetzt (.cl-pill.blue …);
   die fachliche Zuordnung Status -> Modifier liefert StatusTone.cs.
   ============================================================ */

/* ================= Typografie ================= */
.cl-display        { font-size: var(--cl-fs-h1); font-weight: 700; letter-spacing: -.02em; }
/* Seitentitel bewusst in Textfarbe, nicht wie im Styleguide (.cl-phead h1) in Primaerfarbe */
.cl-page-title     { font-size: var(--cl-fs-h2); font-weight: 700; letter-spacing: -.02em; }
.cl-page-subtitle  { font-size: 13px; color: var(--cl-ink-2); margin-top: 2px; }
.cl-card-title     { font-size: var(--cl-fs-card-title); font-weight: 700; }
.cl-secondary      { font-size: var(--cl-fs-secondary); color: var(--cl-ink-2); }
.cl-caption        { font-size: 12px; color: var(--cl-ink-3); }
.cl-section-header {
  font-size: var(--cl-fs-caption); font-weight: 700; color: var(--cl-ink-3);
  letter-spacing: .07em; text-transform: uppercase;
}
.cl-mono-error {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--cl-red); white-space: pre-wrap;
}
.cl-empty-state {
  font-size: var(--cl-fs-body); color: var(--cl-ink-3);
  text-align: center; margin: 40px 0;
}

/* ================= Container ================= */
.cl-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-stroke);
  border-radius: var(--cl-r-card);
  box-shadow: var(--cl-sh);
  padding: 15px;
}
.cl-tile {
  background: var(--cl-surface);
  border: 1px solid var(--cl-stroke);
  border-radius: var(--cl-r-tile);
  box-shadow: var(--cl-sh);
  padding: 14px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.cl-tile.cl-clickable { cursor: pointer; user-select: none; }
.cl-tile.cl-clickable:hover { border-color: var(--cl-brand); transform: translateY(-2px); }
.cl-tile.cl-selected {
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px var(--cl-accent-soft);
}
.cl-separator { height: 1px; background: var(--cl-stroke); border: 0; }

/* Listenzeile (Standard & selektiert) */
.cl-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--cl-r-ctrl);
  cursor: pointer; transition: background .12s;
}
.cl-list-row:hover { background: var(--cl-fill); }
.cl-list-row.cl-selected { background: var(--cl-accent-soft); }

/* Avatar 40x40 mit Initialen - Kuerzel-Kreis wie Styleguide .cl-av: immer rund, der
   Verlauf ist dort die bewusste Ausnahme von "keine Verlaeufe". */
.cl-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: var(--cl-on-brand);
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-brand-pressed));
}

/* Farbiges Icon-Quadrat 38x38 (Module, Terminarten) */
.cl-icon-tile {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--cl-brand-soft); color: var(--cl-brand);
}
.cl-icon-tile svg { width: 19px; height: 19px; }
.cl-icon-tile.blue   { background: var(--cl-blue-soft);   color: var(--cl-blue); }
.cl-icon-tile.amber  { background: var(--cl-amber-soft);  color: var(--cl-amber); }
.cl-icon-tile.red    { background: var(--cl-red-soft);    color: var(--cl-red); }
.cl-icon-tile.green  { background: var(--cl-green-soft);  color: var(--cl-green); }
.cl-icon-tile.purple { background: var(--cl-purple-soft); color: var(--cl-purple); }

/* Kalenderblock 44x44 */
.cl-date-block {
  width: 44px; height: 44px; border-radius: var(--cl-r-ctrl);
  background: var(--cl-surface); border: 1px solid var(--cl-stroke);
  text-align: center; display: flex; flex-direction: column;
  justify-content: center; line-height: 1.05; flex: none;
}
.cl-date-block small {
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cl-red);
}
.cl-date-block b { font-size: 16px; }

/* ================= Buttons ================= */
.cl-btn {
  border: 0; border-radius: var(--cl-r-ctrl);
  padding: 9px 15px; min-height: 40px;
  font: 700 var(--cl-fs-body) var(--cl-font);
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; transition: transform .12s, background .12s;
}
.cl-btn:active { transform: scale(.96); }
.cl-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--cl-accent-soft), 0 0 0 1px var(--cl-accent); }

/* Styleguide .cl-btn.cl-primary: flach, ohne Schatten */
.cl-btn-primary {
  background: var(--cl-brand); color: var(--cl-on-brand);
}
.cl-btn-primary:hover:not(:disabled)  { background: var(--cl-brand-pressed); }
.cl-btn-primary:disabled {
  background: var(--cl-stroke-2); color: var(--cl-on-brand);
  box-shadow: none; cursor: default;
}
/* Nebenaktion bewusst neutral, nicht als Kontur in Primaerfarbe wie Styleguide .cl-btn.cl-ghost */
.cl-btn-secondary {
  background: var(--cl-surface); color: var(--cl-ink);
  border: 1px solid var(--cl-stroke);
}
.cl-btn-secondary:hover { border-color: var(--cl-brand); color: var(--cl-brand); }
.cl-btn-destructive { background: transparent; color: var(--cl-red); }
.cl-btn-inline      { background: transparent; color: var(--cl-brand); padding: 4px 9px; min-height: 0; }

/* Runder Icon-Button 38x38 */
.cl-icon-btn {
  width: 38px; height: 38px; border-radius: var(--cl-r-ctrl);
  background: var(--cl-surface); border: 1px solid var(--cl-stroke);
  display: grid; place-items: center; cursor: pointer; color: var(--cl-ink-2);
}
.cl-icon-btn:hover { border-color: var(--cl-brand); color: var(--cl-brand); }

/* ================= Status-Pill =================
   <span class="cl-pill @Status.CssClass()">@Status.DisplayText()</span> */
.cl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: var(--cl-r-pill);
  white-space: nowrap;
}
.cl-pill.blue   { background: var(--cl-blue-soft);   color: var(--cl-blue); }
.cl-pill.amber  { background: var(--cl-amber-soft);  color: var(--cl-amber); }
.cl-pill.red    { background: var(--cl-red-soft);    color: var(--cl-red); }
.cl-pill.green  { background: var(--cl-green-soft);  color: var(--cl-green); }
.cl-pill.purple { background: var(--cl-purple-soft); color: var(--cl-purple); }
/* Marke als Kontur - Info (blue) ist im Styleguide bewusst die Primaerfarbe, so bleiben beide unterscheidbar */
.cl-pill.brand  { background: var(--cl-surface); color: var(--cl-brand); box-shadow: inset 0 0 0 1px var(--cl-brand); }

/* Zähler-Badge (rote "3" an Modulen/Tabs) */
.cl-counter-badge {
  display: inline-grid; place-items: center; min-width: 20px;
  padding: 2px 7px; border-radius: var(--cl-r-pill);
  background: var(--cl-red); color: var(--cl-on-brand);
  font-size: 11px; font-weight: 700;
}

/* ================= Filter-Chip ================= */
.cl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--cl-stroke); background: var(--cl-surface);
  border-radius: var(--cl-r-pill); padding: 7px 14px;
  font: 700 13px var(--cl-font); color: var(--cl-ink-2);
  cursor: pointer; user-select: none;
}
.cl-chip .cl-chip-count {
  background: var(--cl-fill-2); border-radius: var(--cl-r-pill);
  padding: 1px 7px; font-size: 11.5px;
}
.cl-chip.cl-selected {
  background: var(--cl-brand); border-color: var(--cl-brand); color: var(--cl-on-brand);
}
.cl-chip.cl-selected .cl-chip-count { background: rgba(255,255,255,.22); color: var(--cl-on-brand); }

/* Segmented Control */
.cl-segmented {
  display: inline-flex; background: var(--cl-fill-2);
  border-radius: 10px; padding: 3px;
}
.cl-segmented button {
  border: 0; background: transparent; border-radius: 8px;
  padding: 7px 15px; font: 700 13px var(--cl-font);
  color: var(--cl-ink-2); cursor: pointer;
}
.cl-segmented button.cl-selected {
  background: var(--cl-surface); color: var(--cl-brand); box-shadow: var(--cl-sh);
}

/* ================= Eingabefelder (Filled) =================
   <label class="cl-field">
     <span class="cl-field-label">Vorname</span>
     <input class="cl-field-input" value="Henriette" />
   </label>  */
.cl-field {
  display: block; background: var(--cl-fill);
  border: 1px solid transparent; border-radius: var(--cl-r-ctrl);
  padding: 8px 12px; transition: background .14s, border-color .14s, box-shadow .14s;
  cursor: text;
}
.cl-field:focus-within {
  background: var(--cl-surface); border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px var(--cl-accent-soft);
}
.cl-field-label { display: block; font-size: 11px; font-weight: 700; color: var(--cl-ink-3); }
.cl-field:focus-within .cl-field-label { color: var(--cl-accent); }
.cl-field-input, .cl-field textarea, .cl-field select {
  display: block; width: 100%; margin-top: 2px;
  border: 0; background: transparent; outline: 0; resize: none;
  font: 400 15px var(--cl-font); color: var(--cl-ink);
}
.cl-field-input::placeholder { color: var(--cl-ink-3); }
.cl-field-required::after { content: " *"; color: var(--cl-red); }

/* Native Controls in Selektionsfarbe */
input[type="checkbox"].cl-check,
input[type="radio"].cl-check,
input[type="range"].cl-range,
progress.cl-progress { accent-color: var(--cl-accent); }

/* Schalter */
.cl-switch {
  width: 44px; height: 26px; border-radius: var(--cl-r-pill);
  background: var(--cl-stroke-2); position: relative;
  cursor: pointer; transition: background .18s; flex: none; border: 0;
}
.cl-switch::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; top: 2px; left: 2px;
  transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.cl-switch.cl-on { background: var(--cl-accent); }
.cl-switch.cl-on::after { left: 20px; }

/* ================= Banner ================= */
.cl-banner {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--cl-r-card); padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--cl-ink);
}
.cl-banner-error   { background: var(--cl-red-soft); }
.cl-banner-warning { background: var(--cl-amber-soft); }
.cl-banner-info    { background: var(--cl-accent-soft); }

/* ================= Tabelle ================= */
.cl-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--cl-surface); border: 1px solid var(--cl-stroke);
  border-radius: var(--cl-r-tile); overflow: hidden; box-shadow: var(--cl-sh);
}
.cl-table th {
  font-size: 11px; font-weight: 700; color: var(--cl-ink-3);
  text-transform: uppercase; letter-spacing: .05em; text-align: left;
  padding: 11px 14px; border-bottom: 1px solid var(--cl-stroke);
  background: var(--cl-fill);
}
.cl-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--cl-stroke);
  font-size: 13.5px; vertical-align: middle;
}
.cl-table tr:last-child td { border-bottom: 0; }
.cl-table tbody tr { cursor: pointer; transition: background .12s; }
/* Hover neutral, damit er sich von der Auswahl (accent-soft = Kachelton) abhebt */
.cl-table tbody tr:hover { background: var(--cl-fill); }
.cl-table tbody tr.cl-selected { background: var(--cl-accent-soft); }

/* ================= App-Rahmen ================= */
.cl-navbar {
  background: var(--cl-surface); border-bottom: 1px solid var(--cl-stroke);
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
}
.cl-tabbar {
  background: var(--cl-surface); border-top: 1px solid var(--cl-stroke);
  display: flex; justify-content: center; gap: 6px; padding: 8px 0 12px;
}
.cl-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 20px; border-radius: var(--cl-r-tile);
  font-size: 11px; font-weight: 700; color: var(--cl-ink-3); cursor: pointer;
}
.cl-tab.cl-selected { color: var(--cl-brand); background: var(--cl-brand-soft); }