/*
 * StableOS design tokens — single source of truth for color and typography.
 *
 * Extracted from the existing app/views (107 ERB files analyzed) on 2026-07-14.
 * The palette below is NOT invented — it is the design system that already
 * existed implicitly (mostly defined in views/gesundheit/_shared_styles.html.erb
 * and views/layouts/*), just never applied consistently. 187 distinct hex
 * colors and 34 font-size values were found in inline styles and per-page
 * <style> blocks; 99.6% of all color usages map cleanly onto the 24 tokens
 * below. See colors_report.csv / token_mapping.csv / fonts_report.csv /
 * migration_report.md for the full data behind these decisions.
 *
 * Usage: reference var(--color-text) etc. instead of hardcoding hex values.
 * This file is linked once from views/layouts/application.html.erb and
 * views/layouts/admin.html.erb — do not duplicate it or add per-page
 * <style> blocks with their own color/font values.
 */

:root {
  /* ---- Typography ---- */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Canonical type scale (already established across layouts + most views) */
  --font-size-2xs: 8px;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;

  /* Added 2026-07-14: 18/20/22/24px weren't in the original common
     stylesheet, but showed up consistently across 13-55 files each
     (mostly headings and stat numbers) -- promoted to tokens rather
     than left as scattered literals. */
  --font-size-3xl: 18px;
  --font-size-4xl: 20px;
  --font-size-5xl: 22px;
  --font-size-6xl: 24px;

  /* ---- Color: neutrals / text ---- */
  --color-text: #1c1c1a;              /* primary body text */
  --color-text-secondary: #4a4a45;    /* secondary text */
  --color-text-muted: #6b6b62;        /* muted labels */
  --color-text-faint: #8a8a82;        /* faintest secondary/meta text */

  /* ---- Color: surfaces / borders (warm cream scale) ---- */
  --color-bg: #f5f0e8;                /* page background */
  --color-bg-subtle: #f0ece4;         /* subtle bg / light border */
  --color-bg-hover: #fafaf7;          /* row/list hover background */
  --color-surface: #ffffff;           /* card / white surface */
  --color-border: #e2ddd4;            /* default border */
  --color-border-strong: #d4cfc8;     /* stronger border, form inputs */

  /* ---- Color: brand green ---- */
  --color-brand: #1a3d2b;             /* primary brand green */
  --color-brand-hover: #2d6a4f;       /* hover / mid green */
  --color-brand-light: #d8f3dc;       /* light green bg (badges, highlights) */
  --color-sidebar: #25342a;           /* sidebar background */

  /* ---- Color: accent ---- */
  --color-accent: #c9a96e;            /* gold/tan accent */

  /* ---- Color: status - success ---- */
  --color-success-text: #0f6e56;
  --color-success-bg: #e1f5ee;

  /* ---- Color: status - warning ---- */
  --color-warning-text: #b45309;
  --color-warning-bg: #fef3e2;

  /* ---- Color: status - error ---- */
  --color-error-text: #991b1b;
  --color-error-bg: #fee2e2;
  --color-error-border: #fca5a5;

  /* ---- Color: status - neutral/inactive ---- */
  --color-neutral-text: #5f5e5a;
  --color-neutral-bg: #f1efe8;

  /* ---- Color: status - info ---- */
  /* Added 2026-07-14: found independently in 3+ places (admin/dashboard
     icon-bg-blue, admin/rollen eye icon, admin/roles/show read-access
     toggle, admin/staff shield icon) as slightly different blues used for
     the same "informational/read-only" meaning. Consolidated to one pair. */
  --color-info-text: #075985;
  --color-info-bg: #e0f2fe;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---- Shared component classes, consolidated from views/gesundheit/_shared_styles.html.erb ----
   (previously only defined there and only usable on pages that rendered that
   partial; now globally available so any page can use the ent-* / status
   classes without re-implementing them). */

.ent-tab-btn { padding: 10px 16px; border: none; background: none; font-family: inherit; font-size: var(--font-size-lg); color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.ent-tab-btn:hover { color: var(--color-text); }
.ent-tab-active { color: var(--color-brand) !important; border-bottom-color: var(--color-brand) !important; }

.ent-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-md); }
.ent-table th { text-align: left; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-faint); letter-spacing: 0.04em; padding: 8px 12px; border-bottom: 1px solid var(--color-border); }
.ent-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-bg-subtle); color: var(--color-text); vertical-align: middle; }
.ent-table tr:last-child td { border-bottom: none; }
.ent-table tr:hover td { background: var(--color-bg-hover); }

.ent-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); font-weight: 500; padding: 2px 8px; border-radius: 4px; }
.ent-badge-aktuell { background: var(--color-success-bg); color: var(--color-success-text); }
.ent-badge-bald_faellig { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ent-badge-ueberfaellig { background: var(--color-error-bg); color: var(--color-error-text); }
.ent-badge-kein_status { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

.ent-form-label { display: block; font-size: var(--font-size-base); color: var(--color-text-muted); font-weight: 500; margin-bottom: 5px; }
.ent-form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; font-size: var(--font-size-md); font-family: inherit; color: var(--color-text); background: var(--color-surface); box-sizing: border-box; }
.ent-form-input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(26, 61, 43, 0.08); }
.ent-form-select { width: 100%; padding: 8px 32px 8px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; font-size: var(--font-size-md); font-family: inherit; color: var(--color-text); background: var(--color-surface); appearance: none; cursor: pointer; box-sizing: border-box; }
.ent-select-wrap { position: relative; }
.ent-select-wrap::after { content: '\f078'; font-family: 'Font Awesome 6 Pro'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: var(--font-size-xs); color: var(--color-text-faint); pointer-events: none; }

.ent-card { background: var(--color-surface); border-radius: 12px; border: 1px solid var(--color-border); overflow: hidden; }
.ent-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }

.ent-btn-primary { display: flex; align-items: center; gap: 7px; padding: 9px 18px; background: var(--color-brand); color: var(--color-surface); border: none; border-radius: 8px; font-family: inherit; font-size: var(--font-size-md); font-weight: 500; cursor: pointer; }
.ent-btn-primary:hover { background: var(--color-brand-hover); }
.ent-btn-secondary { padding: 9px 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-family: inherit; font-size: var(--font-size-md); cursor: pointer; color: var(--color-text); }
.ent-btn-secondary:hover { background: var(--color-bg); }
.ent-btn-add { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--color-brand); border-radius: 8px; background: var(--color-surface); color: var(--color-brand); font-family: inherit; font-size: var(--font-size-md); font-weight: 500; cursor: pointer; }
.ent-btn-add:hover { background: var(--color-success-bg); }

.ent-rhythmus-row { display: grid; grid-template-columns: 1fr 1fr 1fr 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.ent-row-remove { background: none; border: none; cursor: pointer; color: var(--color-text-faint); font-size: var(--font-size-md); padding: 6px; }
.ent-row-remove:hover { color: var(--color-error-text); }

[x-cloak] { display: none !important; }
.nav-items { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.nav-section-btn {
  width: 100%; background: none; border: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35); text-transform: uppercase;
  padding: 14px 10px 5px; text-align: left;
  transition: color 0.15s;
}
.nav-section-btn:hover { color: rgba(255, 255, 255, 0.55); }
.nav-chevron {
  margin-left: auto; font-size: 8px;
  color: rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}