/* Kleine Ergaenzungen, die ueber Tailwind-Utilities hinausgehen. */

body {
  -webkit-tap-highlight-color: transparent;
}

/* Das hidden-Attribut muss auch gegen Display-Utilities (flex, inline-flex)
   gewinnen - z. B. fuer die per JS umgeschalteten Push-Zustaende. */
[hidden] {
  display: none !important;
}

/* Formulare/Tabellen/Zahlen bekommen Inter statt Nunito Sans (siehe README
   "FamSync Design Guidelines") - klarer fuer Kalender-Raster, Daten, Eingaben. */
input, select, textarea, table, .font-data {
  font-family: 'Inter', system-ui, sans-serif;
}

.font-data {
  font-variant-numeric: tabular-nums;
}

::selection {
  background-color: var(--sage-200);
}

:focus-visible {
  outline: 2px solid var(--sage-600);
  outline-offset: 2px;
}

.progress-bar-track {
  background-color: var(--fog-100);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar-fill {
  transition: width 0.5s ease;
}

input[type="checkbox"].fp-check {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--meadow-600);
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--sage-600);
}

.step-row.completed .step-label,
.task-row.completed .task-label {
  text-decoration: line-through;
  color: var(--fog-500);
}

/* --- Kalender: Zeitraster ------------------------------------------------ */

.cal-grid-lines {
  background-image: repeating-linear-gradient(180deg, var(--fog-100) 0 1px, transparent 1px var(--hour-px, 48px));
}

.cal-ev {
  position: absolute;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid var(--ev-line);
  background: var(--ev-bg);
  color: var(--ev-ink);
  overflow: hidden;
  text-align: left;
  transition: filter .15s ease, box-shadow .15s ease;
}
.cal-ev:hover { filter: brightness(0.97); }
.cal-ev.is-selected { box-shadow: 0 0 0 2px var(--ink); }

/* "Farbe nach Betroffenen": jedes Ereignis traegt beide Farbsaetze als
   CSS-Variablen, der Schalter im Kalender tauscht nur das Attribut. */
[data-color-by="who"] .cal-ev[data-has-who] {
  --ev-bg: var(--ev-bg-who);
  --ev-line: var(--ev-line-who);
  --ev-ink: var(--ev-ink-who);
}

.cal-gap {
  border: 1.5px dashed var(--sand-500) !important;
  background: var(--sand-50) !important;
  color: var(--sand-700) !important;
}

.cal-hidden-person, .cal-hidden-layer { display: none !important; }

/* --- Dunkelmodus --------------------------------------------------------
   Farben wechseln ueber die CSS-Variablen im Layout (data-theme am <html>);
   hier nur, was sich nicht ueber Variablen loesen laesst. */

.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline-block; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .logo-light { display: none; }
  :root[data-theme="system"] .logo-dark { display: inline-block; }
}

:root[data-theme="dark"] .shadow-sm, :root[data-theme="dark"] .shadow-lg, :root[data-theme="dark"] .shadow-xl, :root[data-theme="dark"] .shadow-2xl {
  --tw-shadow-color: rgb(0 0 0 / 0.5);
}

input, select, textarea {
  background-color: var(--surface);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--fog-500); }

@media (max-width: 480px) {
  .hide-mobile { display: none; }
}