@import './design-system/styles.css';

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--as-color-surface);
  color: var(--as-color-body);
  font-family: var(--as-font);
  font-size: var(--as-text-body);
  line-height: var(--as-lh-body);
}

h1, h2, h3, h4 {
  color: var(--as-color-heading);
  font-weight: var(--as-weight-bold);
  line-height: var(--as-lh-heading);
  margin: 0 0 var(--as-space-md);
}
h1 { font-size: var(--as-text-h1); }
h2 { font-size: var(--as-text-h2); }
h3 { font-size: var(--as-text-h3); }

a { color: var(--as-color-primary); }
a:hover { opacity: 0.8; }

/* ── Layout ─────────────────────────────────────────────── */
.as-header {
  background: var(--as-dark-bg);
  color: var(--as-white);
  padding: 0 var(--as-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.as-header__brand { display: flex; align-items: center; gap: var(--as-space-sm); text-decoration: none; color: inherit; }
.as-header__brand:hover { opacity: 0.8; }
.as-header__brand img { height: 28px; }
.as-header__brand span { font-weight: var(--as-weight-bold); color: var(--as-white); }
.as-nav { display: flex; gap: var(--as-space-md); align-items: center; flex-wrap: wrap; }
.as-nav a {
  color: var(--as-white);
  text-decoration: none;
  font-size: var(--as-text-small);
  font-weight: var(--as-weight-bold);
  letter-spacing: var(--as-tracking-btn);
}
.as-nav a.active { color: var(--as-blue); }
.as-nav form { margin: 0; }
.as-nav button.linklike {
  background: none; border: none; color: var(--as-white); cursor: pointer;
  font-size: var(--as-text-small); font-weight: var(--as-weight-bold); font-family: var(--as-font);
}

.as-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--as-space-xl) var(--as-space-lg);
}

/* ── Event-Layout (globale Nav oben + Event-Sidebar links) ─ */
.as-event-layout { display: flex; align-items: flex-start; min-height: calc(100vh - 64px); }
.as-event-sidebar {
  flex: 0 0 220px; background: var(--as-white); border-right: 1px solid rgba(0,0,0,0.08);
  padding: var(--as-space-lg) var(--as-space-md); position: sticky; top: 64px;
  height: calc(100vh - 64px); box-sizing: border-box; overflow-y: auto;
}
.as-event-sidebar__back { font-size: var(--as-text-label); color: rgba(49,49,49,0.6); text-decoration: none; display: inline-block; margin-bottom: var(--as-space-md); }
.as-event-sidebar__back:hover { opacity: 0.8; }
.as-event-sidebar__title { font-weight: var(--as-weight-bold); font-size: var(--as-text-h3); margin-bottom: var(--as-space-md); line-height: var(--as-lh-heading); }
.as-event-nav { display: flex; flex-direction: column; gap: 2px; }
.as-event-nav a {
  padding: 10px 12px; font-size: var(--as-text-small); font-weight: var(--as-weight-bold);
  color: var(--as-color-body); text-decoration: none; border-left: 3px solid transparent;
}
.as-event-nav a:hover { opacity: 0.8; background: var(--as-color-surface); }
.as-event-nav a.is-active { color: var(--as-color-primary); border-left-color: var(--as-color-primary); background: rgba(0,159,227,0.06); }
.as-event-nav__group-label {
  padding: 10px 12px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: var(--as-tracking-label);
  color: rgba(49,49,49,0.45); font-weight: var(--as-weight-bold);
}
.as-event-nav a.as-event-nav__sub { padding-left: 24px; font-weight: var(--as-weight-regular); font-size: var(--as-text-label); }
.as-event-nav a.as-event-nav__sub.is-active { font-weight: var(--as-weight-bold); }
.as-sidebar-section h4 a { color: inherit; text-decoration: none; }
.as-sidebar-section h4 a:hover { opacity: 0.8; }

.as-sidebar-stat { margin-bottom: var(--as-space-md); padding-bottom: var(--as-space-md); border-bottom: 1px solid rgba(0,0,0,0.08); }
.as-sidebar-section { margin-top: var(--as-space-lg); }
.as-sidebar-section h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--as-tracking-label);
  color: rgba(49,49,49,0.55); margin: 0 0 var(--as-space-sm) 12px; font-weight: var(--as-weight-bold);
}
.as-sidebar-phase-list { display: grid; gap: 2px; }
.as-sidebar-phase { display: flex; justify-content: space-between; padding: 6px 12px; font-size: var(--as-text-label); }
.as-sidebar-position-group { margin-bottom: var(--as-space-sm); }
.as-sidebar-position-group-label {
  font-size: 10px; color: rgba(49,49,49,0.45); padding: 6px 12px 2px; text-transform: uppercase; letter-spacing: 0.04em;
}
.as-sidebar-position-link {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: var(--as-text-label);
  text-decoration: none; color: var(--as-color-body); border-left: 3px solid transparent;
}
.as-sidebar-position-link:hover { background: var(--as-color-surface); opacity: 1; }
.as-sidebar-position-link.is-active { background: rgba(0,159,227,0.06); border-left-color: var(--as-color-primary); color: var(--as-color-primary); font-weight: var(--as-weight-bold); }
.as-event-content { flex: 1; min-width: 0; padding: var(--as-space-xl) var(--as-space-lg); max-width: 1100px; }
@media (max-width: 860px) {
  .as-event-layout { flex-direction: column; }
  .as-event-sidebar { position: static; height: auto; width: 100%; flex: none; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .as-event-nav { flex-direction: row; flex-wrap: wrap; }
  .as-event-nav a { border-left: none; border-bottom: 3px solid transparent; }
  .as-event-nav a.is-active { border-left-color: transparent; border-bottom-color: var(--as-color-primary); }
}

.as-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-space-md);
  margin-bottom: var(--as-space-lg);
  flex-wrap: wrap;
}

/* ── Cards ──────────────────────────────────────────────── */
.as-card {
  background: var(--as-white);
  border-top: var(--as-border-accent);
  border-radius: var(--as-radius);
  padding: var(--as-space-lg);
  margin-bottom: var(--as-space-md);
  box-shadow: var(--as-shadow-sm);
}
.as-card h3 { margin-bottom: var(--as-space-sm); }
.as-card-list { display: grid; gap: var(--as-space-md); }

/* ── Buttons ────────────────────────────────────────────── */
.as-btn {
  display: inline-block;
  background: var(--as-color-primary);
  color: var(--as-white);
  border: none;
  border-radius: var(--as-radius);
  padding: 10px 20px;
  font-family: var(--as-font);
  font-weight: var(--as-weight-bold);
  font-size: var(--as-text-small);
  letter-spacing: var(--as-tracking-btn);
  text-decoration: none;
  cursor: pointer;
}
.as-btn:hover { opacity: 0.8; }
.as-btn--secondary { background: var(--as-white); color: var(--as-color-primary); border: 1px solid var(--as-color-primary); }
.as-btn--danger { background: var(--as-color-error); }
.as-btn--small { padding: 6px 14px; font-size: var(--as-text-label); }
.as-btn--ghost { background: transparent; color: var(--as-color-body); border: 1px solid rgba(0,0,0,0.15); }

/* ── Forms ──────────────────────────────────────────────── */
.as-field { margin-bottom: var(--as-space-md); }
.as-field label {
  display: block;
  font-size: var(--as-text-small);
  font-weight: var(--as-weight-bold);
  margin-bottom: var(--as-space-xs);
  color: var(--as-color-heading);
}
.as-field input[type=text],
.as-field input[type=email],
.as-field input[type=password],
.as-field input[type=date],
.as-field input[type=datetime-local],
.as-field input[type=time],
.as-field input[type=number],
.as-field input[type=tel],
.as-field input[type=file],
.as-field select,
.as-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: var(--as-radius);
  font-family: var(--as-font);
  font-size: var(--as-text-body);
  background: var(--as-white);
  color: var(--as-color-body);
}
.as-field textarea { min-height: 80px; }
.as-field-hint { font-size: var(--as-text-label); color: rgba(49,49,49,0.7); margin-top: 4px; }
.as-checkbox { display: flex; align-items: center; gap: var(--as-space-sm); }
.as-checkbox label { margin: 0; font-weight: var(--as-weight-regular); }
.as-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--as-space-md); }
@media (max-width: 640px) { .as-form-row { grid-template-columns: 1fr; } }

/* ── Tags/Badges/Avatar (Ausnahmen bei Radien) ─────────────── */
.as-badge {
  display: inline-block;
  border-radius: var(--as-radius-pill);
  padding: 3px 12px;
  font-size: var(--as-text-label);
  font-weight: var(--as-weight-bold);
  letter-spacing: var(--as-tracking-label);
  text-transform: uppercase;
}
.as-badge--success { background: rgba(29,154,86,0.12); color: var(--as-color-success); }
.as-badge--error { background: rgba(154,29,29,0.12); color: var(--as-color-error); }
.as-badge--neutral { background: rgba(0,0,0,0.06); color: var(--as-color-body); }
.as-badge--extern { background: transparent; color: var(--as-color-primary); border: 1px solid var(--as-color-primary); }
.as-tag {
  display: inline-block;
  border-radius: var(--as-radius-tag);
  padding: 2px 8px;
  font-size: var(--as-text-label);
  background: rgba(0,159,227,0.1);
  color: var(--as-color-primary);
}
.as-avatar {
  width: 36px; height: 36px; border-radius: var(--as-radius-circle);
  background: var(--as-color-primary); color: var(--as-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--as-weight-bold); font-size: var(--as-text-small);
}

/* ── Table ──────────────────────────────────────────────── */
table.as-table { width: 100%; border-collapse: collapse; background: var(--as-white); }
table.as-table th, table.as-table td {
  text-align: left; padding: var(--as-space-sm) var(--as-space-md);
  border-bottom: 1px solid rgba(0,0,0,0.08); font-size: var(--as-text-small);
}
table.as-table th { color: var(--as-color-heading); font-size: var(--as-text-label); text-transform: uppercase; letter-spacing: var(--as-tracking-label); }

/* ── Alerts / Flash ─────────────────────────────────────── */
.as-alert { padding: var(--as-space-md); border-radius: var(--as-radius); margin-bottom: var(--as-space-md); font-size: var(--as-text-small); }
.as-alert--success { background: rgba(29,154,86,0.1); color: var(--as-color-success); border-left: 3px solid var(--as-color-success); }
.as-alert--error { background: rgba(154,29,29,0.1); color: var(--as-color-error); border-left: 3px solid var(--as-color-error); }
.as-alert--warning { background: rgba(0,159,227,0.08); color: var(--as-color-body); border-left: 3px solid var(--as-blue); }

/* ── Stat-Kacheln (z. B. Arbeitsstunden) ────────────────────── */
.as-stat-row { display: flex; gap: var(--as-space-md); margin-bottom: var(--as-space-lg); flex-wrap: wrap; }
.as-stat-tile { background: var(--as-color-surface); padding: var(--as-space-md) var(--as-space-lg); flex: 1; min-width: 140px; }
.as-stat-tile__value { display: block; font-size: var(--as-text-h2); font-weight: var(--as-weight-bold); color: var(--as-color-heading); }
.as-stat-tile__label { display: block; font-size: var(--as-text-label); color: rgba(49,49,49,0.6); text-transform: uppercase; letter-spacing: var(--as-tracking-label); margin-top: 2px; }

.as-empty { color: rgba(49,49,49,0.6); font-size: var(--as-text-small); padding: var(--as-space-md) 0; }
.as-progress-track { background: rgba(0,0,0,0.08); height: 8px; border-radius: var(--as-radius); overflow: hidden; }
.as-progress-fill { background: var(--as-color-success); height: 100%; }
.as-progress-row { display: flex; align-items: center; gap: var(--as-space-sm); margin-bottom: var(--as-space-md); }
.as-progress-row .as-progress-track { flex: 1; }
.as-progress-row .as-progress-label { font-size: var(--as-text-small); font-weight: var(--as-weight-bold); white-space: nowrap; color: var(--as-color-heading); }

/* ── Checkliste ─────────────────────────────────────────── */
.as-checklist { display: grid; }
.as-checklist-item {
  display: flex; align-items: flex-start; gap: var(--as-space-sm);
  padding: var(--as-space-sm) 2px; border-bottom: 1px solid rgba(0,0,0,0.07);
}
.as-checklist-item:last-child { border-bottom: none; }
.as-checklist-item input[type=checkbox] {
  width: 20px; height: 20px; accent-color: var(--as-color-primary);
  margin-top: 2px; flex-shrink: 0; cursor: pointer;
}
.as-checklist-text { display: flex; flex-direction: column; gap: 2px; }
.as-checklist-title { font-size: var(--as-text-body); }
.as-checklist-item.is-done .as-checklist-title { text-decoration: line-through; opacity: 0.55; }
.as-checklist-hint { font-size: var(--as-text-label); color: rgba(49,49,49,0.65); }
.as-checklist-source { font-size: var(--as-text-label); color: rgba(49,49,49,0.5); text-transform: uppercase; letter-spacing: var(--as-tracking-label); }

/* ── Zeitblock-Karten (Schichtbedarf) ───────────────────── */
.as-timeblock { border: 1px solid rgba(0,0,0,0.1); padding: var(--as-space-md); margin-bottom: var(--as-space-sm); }
.as-timeblock summary { cursor: pointer; list-style: none; }
.as-timeblock summary::-webkit-details-marker { display: none; }
.as-timeblock summary .as-timeblock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--as-space-sm); flex-wrap: wrap; }
.as-timeblock-edit { margin-top: var(--as-space-md); padding-top: var(--as-space-md); border-top: 1px dashed rgba(0,0,0,0.15); }
.as-flex { display: flex; gap: var(--as-space-sm); align-items: center; flex-wrap: wrap; }
.as-muted { color: rgba(49,49,49,0.65); font-size: var(--as-text-small); }
.as-list-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--as-space-sm); }

.as-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--as-dark-bg); }
.as-login-card { background: var(--as-white); border-top: var(--as-border-accent); padding: var(--as-space-2xl) var(--as-space-xl); width: 100%; max-width: 380px; }

/* ── Zuweisungs-Kalender ────────────────────────────────── */
.as-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--as-space-md); }
.as-calendar-nav h2 { margin: 0; text-transform: capitalize; }
.as-calendar-legend { display: flex; gap: var(--as-space-md); margin-bottom: var(--as-space-md); font-size: var(--as-text-label); color: rgba(49,49,49,0.7); }
.as-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.as-calendar-dot { width: 10px; height: 10px; display: inline-block; flex-shrink: 0; }
.as-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: rgba(0,0,0,0.08); gap: 1px; border: 1px solid rgba(0,0,0,0.08); }
.as-calendar-weekday { background: var(--as-dark-bg); color: var(--as-white); text-align: center; padding: 6px 0; font-size: var(--as-text-label); font-weight: var(--as-weight-bold); text-transform: uppercase; letter-spacing: var(--as-tracking-label); }
.as-calendar-day {
  background: var(--as-white); min-height: 88px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  position: relative;
}
.as-calendar-day:hover { opacity: 0.85; }
.as-calendar-day.is-outside { background: var(--as-color-surface); color: rgba(49,49,49,0.4); }
.as-calendar-day .as-daynum { font-size: var(--as-text-small); font-weight: var(--as-weight-bold); }
.as-calendar-day.is-today .as-daynum {
  background: var(--as-color-primary); color: var(--as-white);
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.as-calendar-day .as-daycount { font-size: var(--as-text-label); font-weight: var(--as-weight-bold); padding: 2px 6px; align-self: flex-start; }
.as-daycount--voll { background: rgba(29,154,86,0.12); color: var(--as-color-success); }
.as-daycount--teil { background: rgba(0,159,227,0.12); color: var(--as-color-primary); }
.as-daycount--offen { background: rgba(154,29,29,0.12); color: var(--as-color-error); }
@media (max-width: 640px) {
  .as-calendar-day { min-height: 56px; padding: 4px; }
  .as-calendar-weekday { font-size: 9px; }
}

/* ── Wochenansicht (Zeitraster) ─────────────────────────── */
.as-view-toggle { display: flex; gap: 2px; }
.as-view-toggle a { padding: 8px 16px; font-size: var(--as-text-small); font-weight: var(--as-weight-bold); text-decoration: none; color: var(--as-color-body); background: var(--as-color-surface); }
.as-view-toggle a.is-active { background: var(--as-color-primary); color: var(--as-white); }

.as-week-scroll { overflow-x: auto; }
.as-week-grid { display: flex; min-width: 760px; }
.as-week-timeaxis { flex: 0 0 52px; }
.as-week-timeaxis-spacer { height: 44px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.as-week-hour-label { height: 56px; font-size: var(--as-text-label); color: rgba(49,49,49,0.55); transform: translateY(-6px); text-align: right; padding-right: 6px; }
.as-week-days { display: flex; flex: 1; }
.as-week-day-col { flex: 1; border-left: 1px solid rgba(0,0,0,0.08); min-width: 100px; }
.as-week-day-header {
  height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,0.1); font-size: var(--as-text-small);
}
.as-week-day-header .as-week-daynum { font-weight: var(--as-weight-bold); }
.as-week-day-col.is-today .as-week-day-header { background: rgba(0,159,227,0.08); }
.as-week-day-col.is-today .as-week-daynum { color: var(--as-color-primary); }
.as-week-day-body { position: relative; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.07) 0, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 56px); }
.as-week-block {
  position: absolute; overflow: hidden; padding: 4px 6px; text-decoration: none; color: var(--as-color-heading);
  border: 1px solid var(--as-color-error); background: rgba(154,29,29,0.08);
  font-size: var(--as-text-label); line-height: 1.3; box-sizing: border-box;
}
.as-week-block:hover { opacity: 0.85; }
.as-week-block .as-week-block-title { font-weight: var(--as-weight-bold); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-week-block .as-week-block-count { font-weight: var(--as-weight-bold); }
.as-week-block.is-teilweise { border-color: var(--as-blue); background: rgba(0,159,227,0.08); }
.as-week-block.is-voll { border-color: var(--as-color-success); background: rgba(29,154,86,0.14); }
@media (max-width: 640px) {
  .as-week-hour-label { font-size: 9px; }
  .as-week-block { font-size: 9px; }
}

.as-week-block.is-dropzone-active { outline: 2px dashed var(--as-color-primary); outline-offset: -2px; opacity: 0.95; }
.as-week-block-avatars { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.as-week-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--as-color-heading); color: var(--as-white);
  font-size: 8px; font-weight: var(--as-weight-bold); flex-shrink: 0;
}

/* ── Wochenansicht: Layout mit Mitarbeiter-Panel ───────────── */
.as-week-layout { display: flex; gap: var(--as-space-md); align-items: flex-start; }
.as-week-panel-employees {
  flex: 0 0 210px; background: var(--as-white); border-top: var(--as-border-accent);
  padding: var(--as-space-md); position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto;
}
.as-employee-chip {
  display: flex; align-items: center; gap: var(--as-space-sm); padding: 8px;
  border: 1px solid rgba(0,0,0,0.1); margin-bottom: 6px; cursor: grab; background: var(--as-white);
  font-size: var(--as-text-small);
}
.as-employee-chip:active { cursor: grabbing; opacity: 0.7; }
.as-employee-chip.is-filtered { border-color: var(--as-color-primary); background: rgba(0,159,227,0.06); }
.as-week-filterbar select {
  padding: 8px 10px; border: 1px solid rgba(0,0,0,0.2); font-family: var(--as-font); font-size: var(--as-text-small); background: var(--as-white);
}
@media (max-width: 960px) {
  .as-week-layout { flex-direction: column; }
  .as-week-panel-employees { position: static; width: 100%; max-height: none; display: flex; flex-wrap: wrap; gap: var(--as-space-sm); }
  .as-employee-chip { flex: 0 0 auto; }
}