/* ============================================================
   Base Styles – Reset, Typography, Layout foundation
   ============================================================ */

/* --- Universal box-model reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Remove iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
}

/* --- Root & body fill the viewport, no scroll at root level --- */
html {
  height: 100%;
  /* Prevent text size adjustment when rotating on iOS */
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  overflow: hidden;   /* each view handles its own scroll */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               system-ui, sans-serif;
  font-size: var(--font-md);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* --- App root: fills viewport, respects safe areas, clips views --- */
#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Push content below status bar / Dynamic Island */
  padding-top: var(--safe-top);
}

/* ============================================================
   View system – all views are positioned absolute and
   transition in/out via CSS classes set by app.js
   ============================================================ */
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  /* Views start off-screen to the right */
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  will-change: transform;
  /* Allow each view to scroll its content independently */
  overflow: hidden;
}

/* Visible, in-place */
.view--active {
  transform: translateX(0);
}

/* Partially visible behind the incoming view (parallax effect) */
.view--behind {
  transform: translateX(-28%);
}

/* Slides fully off to the left (forward navigation direction) */
.view--forward {
  transform: translateX(-100%);
}

/* Suppresses CSS transition for instant position snaps */
.view--no-transition {
  transition: none !important;
}

/* Calendar is always the base layer; shown without animation on init */
.view--base {
  transform: translateX(0);
  z-index: 0;
}

/* Start view sits above the calendar base layer, enters from the left */
.view--overlay {
  z-index: 10;
  /* Aktuell is left of Kalender → slides in from the left */
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
}
.view--overlay.view--active {
  transform: translateX(0);
}
/* Explicitly re-stating the hidden state so dismissal transitions smoothly */
.view--overlay.view--closing {
  transform: translateX(-100%);
}

/* ============================================================
   Scrollable containers
   ============================================================ */
.scroll-area {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;           /* fill remaining height inside a view */
  /* 56px tab bar + iOS home bar */
  padding-bottom: calc(56px + var(--safe-bottom));
}

/* ============================================================
   Typography helpers
   ============================================================ */
h1 { font-size: var(--font-xxl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--font-xl);  font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--font-lg);  font-weight: 600; line-height: 1.3;  }
h4 { font-size: var(--font-md);  font-weight: 600; line-height: 1.4;  }

.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary);  }
.text-accent     { color: var(--color-accent);   }
.text-danger     { color: var(--color-danger);   }
.text-sm         { font-size: var(--font-sm);    }
.text-xs         { font-size: var(--font-xs);    }

/* ============================================================
   Form element base styles
   ============================================================ */
input[type="text"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  font-size: var(--font-md);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color var(--transition-fast);
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

textarea {
  resize: vertical;
  min-height: 88px;
}

/* ============================================================
   Utility
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}