/* ============================================================
   Diese Datei ist Teil 1 von 8 der frueheren einzelnen style.css,
   aufgeteilt fuer bessere Uebersicht (ca. 9.000 Zeilen in einer
   Datei). Die Aufteilung folgt den bestehenden Abschnitten und
   aendert nichts an Inhalt oder Reihenfolge der Regeln - viele
   Stellen verlassen sich per !important auf die Ladereihenfolge,
   siehe layout.html fuer die <link>-Reihenfolge (nicht aendern).
   Teil 5 (05-mobile-altbestand.css) enthaelt vor allem historische,
   viewportspezifische Korrekturen aus der Zeit vor dem Entwurfs-
   Umbau von Monatsuebersicht und Tagansicht - moeglicherweise mit
   noch mehr totem CSS als bereits gefunden, aber nicht Teil dieser
   Aufteilung geprueft.
   ============================================================ */

/* ============================================================
   Design-Tokens
   ------------------------------------------------------------
   Vorher standen hier drei :root-Blöcke (Zeile 1, 785, 1021), die
   sich gegenseitig überschrieben haben. Welcher Wert am Ende galt,
   liess sich nur durch Nachrechnen der Reihenfolge feststellen.
   Dieser Block ist jetzt der einzige; die Werte im Abschnitt
   "Bestand" sind die, die vorher tatsächlich gewonnen haben.

   Der Umbau auf das Zielsystem läuft in zwei Etappen. Hier steht
   erst beides nebeneinander: das Zielsystem ist definiert, wird aber
   von noch keiner Regel benutzt und ändert deshalb nichts. Erst der
   nächste Schritt zieht die Bestandsnamen auf die Zielwerte um.

   ACHTUNG, vier Namen kollidieren. --bg, --text, --muted und --border
   heissen im Alt- und im Zielsystem gleich, haben aber verschiedene
   Werte. Sie können nicht gleichzeitig existieren und stehen deshalb
   unten im Bestand noch mit ihren Alt-Werten. Ihr Umzug ist ein
   echter Farbwechsel an 56 Stellen, keine Alias-Umleitung.
   ============================================================ */

:root {
  /* ---- Zielsystem: agsta CI --------------------------------
     Aus dem CI-Styleguide abgeleitet und abgestimmt.
     Weiss auf --taupe erreicht nur 4,09:1 und verfehlt WCAG AA für
     normalen Text. Flächige Schaltflächen mit weisser Schrift nutzen
     deshalb --taupe-dark (7,33:1), Hover --taupe-hover. Das Taupe
     bleibt Identitätsfarbe für Login-Fläche, Kalendermarkierung,
     Hover-Flächen und Aktiv-Unterstreichung. Die Trennung ist
     Absicht und darf nicht wegoptimiert werden. */
  --taupe: #867c72;
  --taupe-dark: #5c554e;
  --taupe-light: #a79e94;
  --taupe-wash: #f0eeeb;
  --taupe-hover: #3e3934;

  --surface-soft: #f7f6f4;
  --border-strong: #c9c4bc;

  --pos: #4f6b52;
  --neg: #9a4f45;
  --pos-wash: #edf1ed;
  --neg-wash: #f6edeb;

  /* Kein CI-Ton, sondern eine bestehende Entscheidung: der Kalender
     markiert den heutigen Tag bewusst in Rot statt in der Hausfarbe,
     siehe Kommentar "today marker only red, no black focus frame"
     weiter unten. Als Token benannt, damit die Farbe nicht als
     Literal an drei Stellen steht. */
  --today: #c0392b;

  /* Je Schnitt ein eigener Familienname, siehe Ebene 2 des
     @font-face-Blocks. Wer --f-bold oder --f-head einsetzt, muss
     font-weight: normal dazusetzen, sonst kommt künstliche Fettung
     auf einen bereits fetten Schnitt. */
  --f-body: "Halcom Book", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Halcom Medium", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-bold: "Halcom Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head: "Halcom ExtraBold", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-light: "Halcom Light", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radien durchgehend 0. Die App hatte das faktisch schon, aber über
     einen Overwrite-Block statt als Entscheidung. */
  --radius: 0;

  /* 8px-Raster aus den drei Entwürfen, dort durchgängig als --s1..--s8
     verwendet. Hier einmal zentral definiert statt in jedem umgesetzten
     Template neu erfunden. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --maxw: 1220px;
  --touch: 44px;

  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6560;
  --border: #e2dfda;

  /* ---- Bestand ---------------------------------------------
     Die Altnamen stehen nur noch als Weiterleitung auf das
     Zielsystem. Sie bleiben, weil rund 200 Regeln sie benutzen;
     einen eigenen Wert hat keiner mehr. Wer eine neue Regel
     schreibt, nimmt die Zielnamen. */

  --agsta-font: "Halcom", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --agsta-bg: var(--bg);
  --agsta-surface-soft: var(--surface-soft);
  --agsta-text: var(--text);
  --agsta-muted: var(--muted);
  --agsta-border: var(--border);

  /* hiess "black", war aber nie schwarz, sondern immer die
     Textfarbe. Der Name hat mehr versprochen als er hielt. */
  --agsta-black: var(--text);

  --agsta-radius-sm: var(--radius);
  --agsta-radius-md: var(--radius);
  --agsta-radius-lg: var(--radius);

  /* Status-Farben, ziehen im naechsten Teil auf --pos und --neg um */
  --error-bg: var(--neg-wash);
  --success-bg: var(--pos-wash);
  --agsta-danger: var(--neg);
  --agsta-danger-soft: var(--neg-wash);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

nav a {
  font-size: 14px;
}

nav a:hover {
  text-decoration: underline;
}

h1,
h2 {
  margin-top: 0;
}

input,
select,
textarea {
  border: 1px solid var(--border);
}

button {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 18px 0;
}

.filter input,
.filter select {
  min-width: 180px;
}

.right {
  text-align: right;
}

.small {
  font-size: 12px;
  color: var(--muted);
}

.message.error {
  background: var(--error-bg);
}

.message.success {
  background: var(--success-bg);
}

@media (max-width: 760px) {

  nav {
    margin-top: 12px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  table {
    font-size: 14px;
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  align-items: center;
}

@media (max-width: 760px) {
  .entry-form .entry-grid {
    grid-template-columns: 1fr;
  }

  .button-row button,
  .button-row .secondary-button {
    width: 100%;
  }
}

/* Monatsübersicht als Kalender */

.calendar-title h2 {
  margin-bottom: 0.25rem;
}

.calendar-nav:first-child {
  justify-self: start;
}

.calendar-nav:last-child {
  justify-self: end;
}

.calendar-day.is-weekend {
  background-image: linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025));
}

.calendar-day.is-outside {
  opacity: 0.35;
}

@media (max-width: 850px) {
  .dashboard-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-actions a {
    width: 100%;
  }

}

/* Anpassungen Monatsübersicht */
.dashboard-actions .button-like,
.button-like.primary-action,
.button-like.secondary-action {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 0.45rem;
  padding: 0.65rem 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.9);
}

.button-like.primary-action {
  background: rgba(0, 0, 0, 0.9);
  color: white;
}

.button-like.secondary-action {
  color: inherit;
}

.calendar-title h2 {
  margin-top: 0;
}

/* Anklickbare Kalendertage und Tabellenkopf */

.calendar-day:hover {
  transform: translateY(-1px);
}

.table-heading h2 {
  margin-bottom: 0;
}

@media (max-width: 760px) {

  .filter-item,
  .filter-strip button,
  .filter-reset {
    width: 100%;
  }
}

/* Aufgeräumte Tages-/Monatsansicht */

.period-hero .period-label {
  display: block;
  font-size: 0.9rem;
  opacity: 0.7;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.period-hero strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.filter-line label span {
  font-weight: 700;
  opacity: 0.7;
}

.filter-line .filter-reset {
  opacity: 0.75;
}

@media (max-width: 760px) {
  .period-hero {
    padding-top: 0.5rem;
  }

  .period-actions .button-like {
    width: 100%;
  }

  .filter-line label,
  .filter-line button,
  .filter-line .filter-reset {
    width: 100%;
  }

  .filter-line input,
  .filter-line select,
  .filter-line input[name="filter_day"],
  .filter-line input[name="filter_year"],
  .filter-line select[name="filter_month"],
  .filter-line .filter-employee select {
    width: 100%;
  }
}

/* Filterleiste: auch auf schmalen Fenstern kompakt in einer Zeile */

.filter-line .filter-line-form {
  min-width: max-content;
}

.filter-line label,
.filter-line-form label,
.filter-line button,
.filter-line .filter-reset {
  width: auto !important;
  flex: 0 0 auto;
  margin: 0;
}

.filter-line label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}

.filter-line label span {
  font-size: 0.78rem;
}

.filter-line input,
.filter-line select,
.filter-line input[name="filter_day"],
.filter-line input[name="filter_year"],
.filter-line select[name="filter_month"],
.filter-line .filter-employee select {
  width: auto !important;
  min-height: 2rem;
  height: 2rem;
  font-size: 0.95rem;
  padding: 0.2rem 0.45rem;
}

.filter-line input[name="filter_day"] {
  width: 3.7rem !important;
}

.filter-line select[name="filter_month"] {
  min-width: 6.6rem;
}

.filter-line .filter-employee select {
  min-width: 9rem;
}

.filter-line button {
  min-height: 2rem;
  height: 2rem;
  padding: 0.2rem 0.7rem;
  white-space: nowrap;
}

.filter-line .filter-reset {
  align-self: center;
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Alte Mobile-Regeln für diese Filterleiste gezielt neutralisieren */
@media (max-width: 760px) {
  .filter-line-top {
    border-radius: 999px;
    margin-left: 0;
    margin-right: 0;
  }

  .filter-line label,
  .filter-line button,
  .filter-line .filter-reset {
    width: auto !important;
  }

  .filter-line input,
  .filter-line select,
  .filter-line input[name="filter_day"],
  .filter-line input[name="filter_year"],
  .filter-line select[name="filter_month"],
  .filter-line .filter-employee select {
    width: auto !important;
  }
}

/* Datumsfeld im kompakten Filter */
.filter-line input[type="date"] {
  width: 8.8rem !important;
  min-width: 8.8rem;
}

.filter-line input[name="filter_year"] {
  width: 5.2rem !important;
}

/* Tag im Filter nur als TT anzeigen, Kalender-Picker bleibt nativ */

.filter-line input[type="date"].date-picker-native {
  width: 100% !important;
  min-width: 0 !important;
}

/* Soll/Ist-Kennzahlen Monatsübersicht */

.calendar-kpi span {
  opacity: 0.7;
}

.calendar-kpi.delta-positive {
  background: var(--pos-wash);
  border-color: var(--border);
}

.calendar-kpi.delta-negative {
  background: var(--neg-wash);
  border-color: var(--border);
}

/* Feiertage Niedersachsen */
tr.is-cancelled {
  opacity: 0.55;
}

tr.is-cancelled td {
  text-decoration: line-through;
}

/* Abgelehnte Abwesenheit: gedaempft wie storniert, aber ohne
   Durchstreichen - der Eintrag war nie gueltig, im Unterschied zu einer
   stornierten (einmal gueltigen) Abwesenheit. */
tr.is-rejected {
  opacity: 0.7;
}

.delta-neutral {
  color: inherit;
}

.project-report-table th,
.project-report-table td {
  vertical-align: top;
}

/* --- Ebene 1: Familie "Halcom" mit Gewichten --------------- */

@font-face {
  font-family: "Halcom";
  src: url("/static/fonts/halcom/HalcomLight.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom";
  src: url("/static/fonts/halcom/HalcomBook.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomBook.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom";
  src: url("/static/fonts/halcom/HalcomBookItalic.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomBookItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Halcom";
  src: url("/static/fonts/halcom/HalcomMedium.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom";
  src: url("/static/fonts/halcom/HalcomBold.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom";
  src: url("/static/fonts/halcom/HalcomExtraBold.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --- Ebene 2: ein Familienname je Schnitt, für die Tokens --- */

@font-face {
  font-family: "Halcom Light";
  src: url("/static/fonts/halcom/HalcomLight.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomLight.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom Book";
  src: url("/static/fonts/halcom/HalcomBook.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomBook.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom Book";
  src: url("/static/fonts/halcom/HalcomBookItalic.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomBookItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Halcom Medium";
  src: url("/static/fonts/halcom/HalcomMedium.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomMedium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom Bold";
  src: url("/static/fonts/halcom/HalcomBold.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomBold.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halcom ExtraBold";
  src: url("/static/fonts/halcom/HalcomExtraBold.woff2") format("woff2"),
       url("/static/fonts/halcom/HalcomExtraBold.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Tokens dieses Blocks stehen jetzt oben im einzigen :root.
   Sie wurden ohnehin vollständig vom Block "Clean Layout" weiter
   unten überschrieben - Beige-Grundfläche, warmes Braun und die
   Radien 8/14/18px waren seit dessen Einführung wirkungslos. */

html {
  font-family: var(--agsta-font);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--agsta-font);
}

button,
input,
select,
textarea {
  font-family: var(--agsta-font);
}

h1,
h2,
h3,
h4 {
  font-family: var(--agsta-font);
  letter-spacing: -0.035em;
}

p,
label,
td,
th,
input,
select,
textarea,
button,
a {
  letter-spacing: -0.01em;
}

/* Kopfzeile ruhiger und klarer */
nav,
header {
  font-family: var(--agsta-font);
}

nav {
  background: var(--agsta-black);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

nav a,
.navbar a,
.topbar a,
header a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.015em;
}

nav a:hover,
.navbar a:hover,
.topbar a:hover,
header a:hover {
  color: #ffffff;
}

/* App-Titel links etwas prägnanter */
nav strong,
.navbar strong,
.topbar strong,
.logo {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.brand {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* Allgemeine Links außerhalb der Navigation */
main a,
.container a,
.card a,
.content a {
  color: var(--agsta-black);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

main a:hover,
.container a:hover,
.card a:hover,
.content a:hover {
  color: var(--taupe-dark);
}

/* Der primäre Arbeitsbutton: Zeit erfassen */
a[href="/zeiten/neu"],
a[href*="/zeiten/neu"] {
  text-decoration: none;
}

/* Buttons grundsätzlich vereinheitlichen */
button,
input[type="submit"],
input[type="button"],
a.button,
a.btn {
  font-family: var(--agsta-font);
  letter-spacing: -0.015em;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

/* Sekundäre Buttons / Navigationsbuttons */
.button.secondary,
.btn.secondary,
a.secondary,
a[href*="month="],
a[href*="date="],
a[href*="prev"],
a[href*="next"] {
  background: #ffffff;
  color: var(--agsta-black);
  border: 1px solid var(--agsta-border);
  text-decoration: none;
}

.button.secondary:hover,
.btn.secondary:hover,
a.secondary:hover,
a[href*="month="]:hover,
a[href*="date="]:hover,
a[href*="prev"]:hover,
a[href*="next"]:hover {
  background: var(--agsta-surface-soft);
  color: var(--agsta-black);
  border-color: var(--agsta-black);
}

/* Monatsnavigation: violett entfernen */
.calendar-nav a,
.month-nav a,
.month-navigation a,
a[href*="month="] {
  color: var(--agsta-black) !important;
  font-weight: 600;
}

.calendar-nav a:hover,
.month-nav a:hover,
.month-navigation a:hover,
a[href*="month="]:hover {
  color: var(--taupe-dark) !important;
}

/* Formularbuttons etwas wertiger */
form button,
form input[type="submit"] {
  min-height: 44px;
}

/* Fokus sichtbar, aber ruhiger */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 3px;
}

/* Kleine optische Korrektur: nicht alles zu rund und weich */
section,
table,
input,
select,
textarea {
  border-color: var(--agsta-border);
}

/* Tokens dieses Blocks stehen jetzt oben im einzigen :root.
   Das waren die Werte, die bisher tatsächlich gewonnen haben. */

html,
body {
  background: #ffffff !important;
}

/* Obere schwarze Leiste entfernen */
header.topbar {
  background: #ffffff !important;
  color: var(--agsta-text) !important;
}

/* Navigation als ruhige Website-Navigation */

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  color: var(--agsta-text) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

/* Logo-SVG ist auf die Kontur beschnitten, die Boxhoehe ist die
   Schrifthoehe. Halcom hat x-Hoehe 0,50em; bei 17,5px Box ergibt das
   9,2px x-Hoehe gegen 8,4px des Begleittexts "zeiterfassung"
   (--brand-app-size 1.05rem = 16,8px * 0,50em). Wer die Logohoehe
   aendert, muss die Textgroesse mitziehen. aspect-ratio erzwingt die
   Breite, ohne sie faellt ein inline-SVG ohne width/height-Attribute
   in manchen Browsern auf 100% der Elternbreite zurueck. */
.brand-logo svg {
  height: 17.5px;
  width: auto;
  aspect-ratio: 237.698 / 29.505;
  max-width: 100%;
  display: block;
}

.brand-sep {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  flex: 0 0 auto;
}

.brand-app {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: normal;
}