/* ============================================================
   Sticky Footer
   Header, Seiteninhalt und Seitenabschluss als Flex-Spalte: bei kurzem
   Inhalt sitzt der Abschluss trotzdem am unteren Rand, bei langem
   fliesst er normal mit. Kein position:fixed.
   ============================================================ */

html,
body {
  min-height: 100dvh;
}

body {
  display: flex;
  flex-direction: column;
}

header.topbar {
  flex: 0 0 auto;
}

main.container {
  flex: 1 0 auto;
}

/* ============================================================
   Seitenabschluss
   Band in der Hausfarbe mit weisser Wortmarke. Uebernommen aus der
   bisherigen App und der Website, aber flacher als die alten 360px
   (kostet auf jeder Seite Scrollweg) und als SVG statt 207-KB-JPG,
   dadurch auf jedem Display scharf statt einer Rasterkompression.
   ============================================================ */

.site-endcap {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 72px;
  background: var(--taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  padding: 0 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.site-endcap svg {
  width: min(300px, 60%);
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .site-endcap {
    margin-top: 44px;
    height: 110px;
  }

  .site-endcap svg {
    width: min(200px, 70%);
  }
}

/* ============================================================
   Easter Egg: dreifacher Klick auf den Seitenabschluss
   Das Logo macht einen kleinen Satz, und ein Kranz aus Lineal-Strichen
   zeichnet sich einmal um die Wortmarke - ein Zirkelschlag statt
   Konfetti von der Stange, passend zu einem Architekturbuero.
   ============================================================ */

.easter-egg-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  color: #111;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.easter-egg-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.easter-egg-spark {
  font-size: 16px;
  line-height: 1;
}

.push-subscribe-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  color: #111;
  font-size: 14px;
  line-height: 1.35;
}

.push-subscribe-banner[hidden] {
  display: none;
}

.site-endcap.easter-egg-pulse svg {
  animation: agsta-easter-pop 650ms ease-out;
}

@keyframes agsta-easter-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }

  30% {
    transform: scale(1.1) rotate(-2deg);
  }

  60% {
    transform: scale(0.98) rotate(1deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Lineal-Striche: von JS erzeugt (.egg-tick), fliegen radial aus der
   Mitte, drehen sich auf ihre eigene Richtung ein und blassen aus.
   Winkel und Laufweite kommen als Inline-Custom-Properties je Strich,
   damit die Regel fuer beliebig viele Striche reicht. */
.egg-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 14px;
  margin: -7px 0 0 -1px;
  background: #ffffff;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: agsta-easter-tick 700ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes agsta-easter-tick {
  0% {
    opacity: 0;
    transform: rotate(var(--egg-angle)) translateY(0) scaleY(0.4);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--egg-angle)) translateY(var(--egg-reach)) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-endcap.easter-egg-pulse svg,
  .egg-tick {
    animation: none;
  }
}

@media (max-width: 760px) {
  .easter-egg-toast {
    right: 16px;
    bottom: 18px;
    left: 16px;
    justify-content: center;
    text-align: center;
  }
}

/* Projektverwaltung: übersichtliche Projektkarten */
.project-admin-list {
  display: grid;
  gap: 1rem;
}

.project-admin-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.72);
}

.project-admin-card.is-inactive {
  opacity: 0.62;
}

.project-admin-form {
  display: grid;
  gap: 1rem;
}

.project-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.project-admin-head::-webkit-details-marker {
  display: none;
}

.project-admin-head::marker {
  content: "";
}

.project-admin-card:not([open]) .project-admin-head {
  border-bottom: 0;
  padding-bottom: 0;
}

.project-admin-card > form,
.project-admin-card > .project-readonly-phases {
  margin-top: 1rem;
}

.project-admin-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.project-admin-head p {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

.project-active-check {
  white-space: nowrap;
  margin-top: 0.1rem;
}

.project-admin-fields {
  display: grid;
  grid-template-columns: minmax(90px, 0.6fr) minmax(220px, 1.4fr) minmax(220px, 1.1fr);
  gap: 0.75rem;
}

.project-admin-fields label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--muted);
}

.project-phase-groups {
  display: grid;
  gap: 0.85rem;
}

.project-phase-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.55);
}

.project-phase-group h4 {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.project-category-checks {
  flex-wrap: wrap;
  max-width: 680px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.45rem 0.9rem;
}

.project-category-checks.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.project-category-check {
  white-space: nowrap;
  font-size: 0.9rem;
  align-items: flex-start;
  line-height: 1.25;
}

.project-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

.project-readonly-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

@media (max-width: 760px) {
  .project-admin-head,
  .project-admin-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .project-admin-fields {
    grid-template-columns: 1fr;
  }

  .project-category-checks,
  .project-category-checks.compact {
    grid-template-columns: 1fr;
  }
}

.project-default-phase {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.55);
}

.project-default-phase label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--muted);
}

.project-default-phase p {
  margin: 0.45rem 0 0;
}

/* Mobile Kurzbezeichnungen für Leistungsphasen */
.phase-label-short {
  display: none;
}

@media (max-width: 760px) {
  .phase-label-full {
    display: none;
  }

  .phase-label-short {
    display: inline;
  }
}

/* Sonderstunden-Häkchen */

.special-hours-cell {
  text-align: center;
  vertical-align: middle;
}

.special-hours-label-short {
  display: none;
}

@media (max-width: 760px) {
  .special-hours-label-full {
    display: none;
  }

  .special-hours-label-short {
    display: inline;
  }

  .special-hours-column {
    width: auto;
  }
}

/* Sonderstunden Layout-Korrektur */
.entry-hours-special-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  gap: 0.75rem;
  align-items: end;
}

.entry-hours-special-head label {
  margin: 0;
}

.entry-hours-special-row {
  display: grid;
  gap: 0.75rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
}

.entry-hours-special-row .special-hours-checkbox {
  justify-self: start;
  align-self: center;
}

/* Monatsansicht: keine horizontale Scrollleiste, Notiz wieder nutzbar */

.month-entries-table th,
.month-entries-table td {
  overflow-wrap: anywhere;
}

/* bestehende breite Sonderstunden-Regel hier bewusst übersteuern */

.special-hours-column {
  width: 7.5rem;
  text-align: center;
}

.special-hours-checkbox {
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  accent-color: var(--text);
  width: 18px;
  height: 18px;
}

/* Sonderstunden-Haekchen wie in der Tagansicht: eigens gezeichnetes
   eckiges Kaestchen statt des nativen, teils abgerundeten Checkbox-Stils. */
.month-cbx-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.month-cbx-wrap .day-cbx-box {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .entry-hours-special-head,
  .entry-hours-special-row {
    grid-template-columns: minmax(0, 1fr) 6.75rem;
  }

  .month-entries-table th:nth-child(5),
  .month-entries-table td:nth-child(5) {
    width: auto;
  }
}

/* Tageskopf darf niemals horizontal scrollen */




.day-entry-title {
  width: clamp(22rem, 48vw, 42rem);
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

@media (max-width: 760px) {
  .day-entry-title {
    width: min(70vw, 24rem);
    max-width: 100% !important;
    overflow: hidden !important;
    grid-column: 2 !important;
    justify-self: center !important;
    text-align: center !important;
    min-width: 0 !important;
  }
}

.day-entry-title h1 {
  max-width: calc(100vw - 8rem);
  overflow-wrap: anywhere;
}

.day-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 0.35rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: inherit;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .day-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 0.35rem;
    font-size: clamp(2.4rem, 6vw, 4rem);
    color: inherit;
    flex: 0 0 auto;
  }
}

/* Tagesansicht Desktop: Spalten sauberer aufteilen */










/* Monatsansicht Desktop: kein horizontaler Scroll, aber saubere Abstände */

.month-entries-table th:nth-child(1),
.month-entries-table td:nth-child(1) {
  width: 11%;
}

.month-entries-table th:nth-child(2),
.month-entries-table td:nth-child(2) {
  width: 24%;
}

.month-entries-table th:nth-child(3),
.month-entries-table td:nth-child(3) {
  width: 22%;
}

.month-entries-table th:nth-child(4),
.month-entries-table td:nth-child(4) {
  width: 8%;
}

.month-entries-table th:nth-child(5),
.month-entries-table td:nth-child(5) {
  width: 10%;
  text-align: right;
  white-space: nowrap;
  padding-right: 1.25rem;
}

.month-entries-table th:nth-child(6),
.month-entries-table td:nth-child(6) {
  width: 25%;
  padding-left: 1rem;
}

.month-entries-table .month-entry-note {
  width: 100%;
}

.month-entries-table .special-hours-checkbox {
  margin-left: auto;
  margin-right: 0;
}


.month-entries-table {
  width: 100%;
  table-layout: fixed;
}

.month-entries-card {
  overflow-x: hidden;
}

@media (max-width: 760px) {
  .month-entries-card {
    overflow-x: hidden !important;
    position: relative;
    padding-bottom: 34px !important;
    margin: 28px 0 0 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   Bestätigungsdialog (generisch)
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  background: #ffffff;
  border: 1px solid var(--agsta-border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  max-width: 420px;
  width: 100%;
  padding: 28px;
}

.modal-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.modal-card p {
  margin: 0 0 24px;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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