/* ─────────────────────────────────────────────────────────────────────────────
   Race Day Procedure — Main Stylesheet
   Modern, clean, professional design
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Custom Properties ──────────────────────────────────────────────────────── */
:root {
  --color-bg:        #F5F5F7;
  --color-surface:   #FFFFFF;
  --color-surface-2: #F9F9FB;
  --color-border:    #E4E4E7;
  --color-border-2:  #D1D1D6;

  --color-text:      #18181B;
  --color-text-2:    #52525B;
  --color-text-3:    #A1A1AA;

  --color-primary:   #2563EB;
  --color-primary-h: #1D4ED8;
  --color-primary-l: #EFF6FF;

  --color-success:   #16A34A;
  --color-success-l: #F0FDF4;
  --color-warning:   #CA8A04;
  --color-warning-l: #FEFCE8;
  --color-error:     #DC2626;
  --color-error-l:   #FEF2F2;

  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow:     0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);

  --transition: 180ms ease;

  --header-height: 60px;
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-h); text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── Typography ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
p  { color: var(--color-text-2); }
small { font-size: .8125rem; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }

.page-body { padding: calc(var(--header-height) + 2rem) 0 4rem; }

/* ── Header / Nav ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-height);
  background: var(--color-text);
  display: flex; align-items: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

.site-header .container {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

.site-logo {
  font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  color: #FFFFFF; text-transform: uppercase; letter-spacing: .08em;
  font-size: .8125rem;
}
.site-logo:hover { color: #FFFFFF; text-decoration: none; }
.site-logo span { color: var(--color-primary); margin-right: 2px; }

.site-nav { display: flex; align-items: center; gap: 0.25rem; }

.site-nav a, .site-nav button {
  font-size: .875rem; font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: .375rem .75rem; border-radius: var(--radius-sm);
  border: none; background: none; cursor: pointer;
  transition: all var(--transition);
}
.site-nav a:hover, .site-nav button:hover {
  color: #fff; background: rgba(255,255,255,.1); text-decoration: none;
}
.site-nav a.active { color: #fff; background: rgba(255,255,255,.12); }

.nav-sep { width: 1px; height: 20px; background: rgba(255,255,255,.15); margin: 0 .5rem; }

.user-chip {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: rgba(255,255,255,.6);
}
.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary);
  color: #fff; font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.card-body { padding: 1.5rem; }
.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .875rem; font-weight: 500; line-height: 1;
  padding: .625rem 1.125rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-h); border-color: var(--color-primary-h); color: #fff; }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-2); }
.btn-secondary:hover { background: var(--color-bg); border-color: var(--color-text-3); color: var(--color-text); }

.btn-danger { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }

.btn-ghost { background: transparent; color: var(--color-text-2); border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg); color: var(--color-text); }

.btn-sm { font-size: .8125rem; padding: .375rem .75rem; }
.btn-icon { padding: .5rem; min-width: 36px; justify-content: center; }

/* ── Form Elements ──────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-label { font-size: .875rem; font-weight: 500; color: var(--color-text); }
.form-hint  { font-size: .8125rem; color: var(--color-text-3); }

.form-control {
  width: 100%;
  font-family: inherit; font-size: .9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-control::placeholder { color: var(--color-text-3); }

textarea.form-control { min-height: 80px; resize: vertical; }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352525B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.25rem; }

/* ── Custom Checkbox ────────────────────────────────────────────────────────── */
.check-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem .75rem; border-radius: var(--radius-sm);
  transition: background var(--transition);
  cursor: pointer;
}
.check-row:hover { background: var(--color-surface-2); }
.check-row.is-checked { background: var(--color-success-l); }

.check-box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--color-border-2);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  margin-top: 2px;
  background: var(--color-surface);
}
.check-row.is-checked .check-box {
  background: var(--color-success); border-color: var(--color-success);
}
.check-box svg { display: none; }
.check-row.is-checked .check-box svg { display: block; }

.check-label { flex: 1; font-size: .9375rem; }
.check-meta   { font-size: .8125rem; color: var(--color-text-3); margin-top: 1px; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  padding: .2em .6em; border-radius: 999px;
  white-space: nowrap;
}
.badge-required { background: #FEF3C7; color: #92400E; }
.badge-planned  { background: #F1F5F9; color: #475569; }
.badge-active   { background: #DCFCE7; color: #166534; }
.badge-done     { background: #E0F2FE; color: #0369A1; }
.badge-archived { background: #F1F5F9; color: #94A3B8; }
.badge-admin    { background: #EDE9FE; color: #5B21B6; }
.badge-fahrer   { background: #DBEAFE; color: #1D4ED8; }
.badge-betreuer { background: #D1FAE5; color: #065F46; }

/* ── Progress Bar ───────────────────────────────────────────────────────────── */
.progress-bar {
  height: 4px; background: var(--color-border); border-radius: 99px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; background: var(--color-primary);
  border-radius: 99px; transition: width .4s ease;
}
.progress-bar-fill.full { background: var(--color-success); }

.progress-label {
  font-size: .8125rem; font-weight: 600; color: var(--color-text-2);
  white-space: nowrap;
}
.progress-label.full { color: var(--color-success); }

/* ── Tab Navigation ─────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scrollbar-width: none;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 0 1.5rem;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500;
  color: var(--color-text-2);
  padding: .875rem .25rem;
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
  margin-right: 1.5rem;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Section Headers (Checklist groups) ─────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}
.section-header:hover { background: var(--color-bg); }
.section-header.open { border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; }

.section-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .625rem; }
.section-meta  { font-size: .8125rem; color: var(--color-text-3); }

.section-body {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.chevron { transition: transform var(--transition); }
.section-header.open .chevron { transform: rotate(180deg); }

/* ── Phase block (Ablaufplan) ───────────────────────────────────────────────── */
.phase-block { margin-bottom: 1rem; }

.phase-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .875rem 1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.phase-key  { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--color-primary); background: var(--color-primary-l); padding: .2em .6em; border-radius: 4px; white-space: nowrap; }
.phase-name { font-weight: 600; font-size: 1rem; }
.phase-desc { font-size: .8125rem; color: var(--color-text-3); margin-top: .2rem; }
.phase-time { font-size: .8125rem; font-weight: 600; color: var(--color-text-2); white-space: nowrap; }

.task-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--color-surface-2); }
.task-row.is-checked { background: var(--color-success-l); }

.task-check { cursor: pointer; }
.task-name  { font-size: .9375rem; }
.task-name.done { text-decoration: line-through; color: var(--color-text-3); }
.task-meta  { font-size: .8125rem; color: var(--color-text-3); margin-top: 1px; }
.task-role  { font-size: .8125rem; color: var(--color-text-3); text-align: right; }
.task-time  { font-size: .8125rem; font-weight: 600; color: var(--color-text-2); white-space: nowrap; }

/* ── Race Card (index) ──────────────────────────────────────────────────────── */
.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }

.race-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  transition: all var(--transition);
  display: flex; flex-direction: column; gap: .625rem;
  text-decoration: none; color: inherit;
}
.race-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transform: translateY(-1px);
}
.race-card-name { font-size: 1.125rem; font-weight: 700; }
.race-card-date { font-size: .875rem; color: var(--color-text-3); }
.race-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }

/* ── Alert / Flash ──────────────────────────────────────────────────────────── */
.alert {
  padding: .875rem 1.125rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.25rem;
}
.alert-error   { background: var(--color-error-l);   border: 1px solid #FECACA; color: #991B1B; }
.alert-success { background: var(--color-success-l); border: 1px solid #BBF7D0; color: #14532D; }
.alert-warning { background: var(--color-warning-l); border: 1px solid #FDE68A; color: #78350F; }
.alert-info    { background: var(--color-primary-l); border: 1px solid #BFDBFE; color: #1E40AF; }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-size: .8125rem; font-weight: 600; text-align: left;
  color: var(--color-text-2);
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.data-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.data-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .9375rem;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-surface-2); }

/* ── Page header ────────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.page-title { font-size: 1.5rem; font-weight: 700; }
.page-subtitle { font-size: .9375rem; color: var(--color-text-2); margin-top: .25rem; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--color-text-3); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--color-text-2); }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }
.breadcrumb-sep { color: var(--color-text-3); }

/* ── Modal (create race, edit user) ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 540px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .18s ease;
}
@keyframes modal-in { from { opacity:0; transform: scale(.97) translateY(4px); } }

.modal-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 1.125rem; font-weight: 700; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-3); padding: .25rem; border-radius: var(--radius-sm); transition: all var(--transition); }
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }

.modal-body   { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: .75rem; }

/* ── Login page ─────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg); padding: 1.5rem;
}
.login-card { width: 100%; max-width: 400px; }
.login-logo {
  text-align: center; margin-bottom: 2rem;
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-3);
}
.login-logo strong { display: block; font-size: 1.5rem; color: var(--color-text); margin-bottom: .25rem; letter-spacing: -.02em; }

/* ── Autosave indicator ─────────────────────────────────────────────────────── */
.save-indicator {
  font-size: .8125rem; color: var(--color-text-3);
  display: flex; align-items: center; gap: .375rem;
  opacity: 0; transition: opacity .2s;
}
.save-indicator.visible { opacity: 1; }
.save-indicator.saving { color: var(--color-primary); }
.save-indicator.saved  { color: var(--color-success); }
.save-indicator.error  { color: var(--color-error); }

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.d-flex  { display: flex; }
.flex-1  { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1   { gap: .5rem; }
.gap-2   { gap: 1rem; }
.gap-3   { gap: 1.5rem; }

.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.text-sm  { font-size: .875rem; }
.text-xs  { font-size: .8125rem; }
.text-muted { color: var(--color-text-3); }
.text-right { text-align: right; }
.font-mono { font-family: 'SF Mono', 'Fira Code', monospace; }

.divider { height: 1px; background: var(--color-border); margin: 1.5rem 0; }

.empty-state {
  text-align: center; padding: 4rem 2rem;
  color: var(--color-text-3);
}
.empty-state h3 { font-size: 1.125rem; color: var(--color-text-2); margin-bottom: .5rem; }

/* ── Steckbrief / time-params grid helpers ──────────────────────────────────── */
.steckbrief-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.time-params-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* ── Responsive — Tablet ≤ 768px ────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: 1.375rem; }

  .container, .container-sm { padding: 0 1rem; }
  .page-body { padding-top: calc(var(--header-height) + 1.25rem); }

  .card-body   { padding: 1.125rem; }
  .card-header { padding: 1rem 1.125rem .875rem; }

  .page-header { flex-direction: column; gap: .75rem; }
  .race-grid   { grid-template-columns: 1fr; }

  .tab-btn { padding: .75rem .125rem; margin-right: 1.125rem; font-size: .8125rem; }

  .task-row  { grid-template-columns: 28px 1fr auto; }
  .task-role { display: none; }

  .data-table td, .data-table th { padding: .625rem .75rem; font-size: .875rem; }
}

/* ── Responsive — Phone ≤ 640px ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Navigation: compact — keep logo + avatar + logout, hide text labels */
  .nav-sep { display: none; }
  .user-chip span:not(.avatar) { display: none; }
  .site-nav { gap: .125rem; }
  .site-nav a, .site-nav button { padding: .375rem .5rem; }

  /* Steckbrief: 1 column; time params: 2 columns */
  .steckbrief-grid  { grid-template-columns: 1fr; }
  .time-params-grid { grid-template-columns: 1fr 1fr; }

  /* Cards */
  .card-body   { padding: .875rem; }
  .card-header { padding: .875rem; }

  /* Section headers */
  .section-header { padding: .625rem .75rem; flex-wrap: wrap; gap: .375rem; }
  .section-title  { font-size: .9375rem; }
  .phase-time     { display: none; }

  /* Checklist rows */
  .check-row { padding: .5rem .625rem; }
  .task-time { font-size: .75rem; }

  /* Race page header: buttons full-width row */
  .page-header > div:last-child { width: 100%; }
  .page-header select.form-control { flex: 1; }

  /* Modal: slide from bottom */
  .modal-overlay { padding: .5rem; align-items: flex-end; }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Admin data tables: card becomes horizontal scroll container */
  .card:has(> .data-table),
  .card:has(> .card-header + .data-table) { overflow-x: auto; }

  /* Principles key-value: stack vertically */
  .principles-kv { grid-template-columns: 1fr; gap: .25rem .75rem; }
  .principles-kv dt { margin-top: .625rem; }
}

/* ── Responsive — Very small phones ≤ 380px ─────────────────────────────────── */
@media (max-width: 380px) {
  .time-params-grid { grid-template-columns: 1fr; }
  .tab-btn { font-size: .75rem; margin-right: .625rem; }
  .page-title { font-size: 1.25rem; }
  .site-nav > a { display: none; } /* hide Admin link; accessible via avatar menu if added */
}

/* ── Principles page ────────────────────────────────────────────────────────── */
.principles-section { margin-bottom: 2rem; }
.principles-section h3 { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: .625rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); }
.principles-section p, .principles-section li { font-size: .9375rem; color: var(--color-text-2); margin-bottom: .5rem; }
.principles-section ul { padding-left: 1.25rem; }
.principles-section li { list-style: disc; }
.principles-kv { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; }
.principles-kv dt { font-weight: 600; color: var(--color-text); font-size: .9375rem; white-space: nowrap; }
.principles-kv dd { font-size: .9375rem; color: var(--color-text-2); }

/* ── Pack inline editing & management ──────────────────────────────────────── */
.pack-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.pack-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: .2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-3);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
  flex-shrink: 0;
}
.pack-name-wrap:hover .pack-edit-btn,
.pack-edit-btn:focus { opacity: 1; color: var(--color-primary); }
@media (hover: none) { .pack-edit-btn { opacity: .5; } }

.pack-inline-input {
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: .125rem .375rem;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  background: var(--color-surface);
  outline: none;
  min-width: 120px;
  max-width: 280px;
  width: auto;
  color: var(--color-text);
}

/* DnD drag handle */
.pack-dnd-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  flex-shrink: 0;
  color: var(--color-text-3);
  cursor: grab;
  font-size: 1rem;
  letter-spacing: -.1em;
  opacity: 0;
  transition: opacity var(--transition);
  user-select: none;
  touch-action: none;
}
.check-row:hover .pack-dnd-handle,
.pack-cat-block:hover > .section-header .pack-dnd-handle,
.pack-cat-header:hover .pack-dnd-handle { opacity: 1; }
@media (hover: none) {
  .pack-dnd-handle { opacity: .4; }
}

/* Action buttons (add item, hide, delete) */
.pack-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-3);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.section-header:hover .pack-action-btn,
.check-row:hover .pack-action-btn { opacity: 1; }
.pack-action-btn:hover { background: var(--color-surface-2); color: var(--color-text-2); }
.pack-action-btn.pack-delete-btn:hover { color: var(--color-error); }
.pack-action-btn.is-hidden-btn { opacity: 1; color: var(--color-primary); }
@media (hover: none) {
  .pack-action-btn { opacity: .5; }
}

/* Per-item action group */
.pack-item-actions {
  display: flex;
  align-items: center;
  gap: .125rem;
  flex-shrink: 0;
}

/* Category block when hidden */
.cat-is-hidden {
  opacity: .6;
}
.cat-is-hidden .section-header {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,.025) 4px,
    rgba(0,0,0,.025) 8px
  );
}

/* Hidden item rows (shown in the "ausgeblendet" drawer) */
.item-is-hidden { opacity: .55; }
.item-is-hidden .check-label { text-decoration: line-through; }

/* "N ausgeblendet" notice */
.pack-hidden-notice {
  padding: .375rem .75rem;
}
.pack-show-hidden-btn {
  background: none;
  border: none;
  font-size: .8125rem;
  color: var(--color-text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem 0;
  transition: color var(--transition);
}
.pack-show-hidden-btn:hover { color: var(--color-primary); }
.pack-hidden-items { border-top: 1px dashed var(--color-border); margin-top: .25rem; }

/* "Add item" inline row */
.pack-add-item-row {
  background: var(--color-primary-l);
  border-radius: var(--radius-sm);
  margin: .25rem .5rem;
}

/* "Add category" inline row */
.pack-add-cat-row {
  border: 1.5px dashed var(--color-border-2);
  border-radius: var(--radius);
  margin-bottom: .75rem;
  background: var(--color-surface-2);
}

/* SortableJS ghost/drag states */
.dnd-ghost {
  opacity: .35;
  background: var(--color-primary-l);
  border-radius: var(--radius);
}
.dnd-drag { box-shadow: var(--shadow); opacity: .95; }

/* ── Pflicht toggle (pack items) ─────────────────────────────────────────── */
.pack-req-toggle {
  cursor: pointer;
  border: none;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .15rem .45rem;
  border-radius: 999px;
  transition: opacity var(--transition), background var(--transition);
}
.pack-req-toggle.badge-required {
  background: var(--color-error-l);
  color: var(--color-error);
}
.pack-req-toggle.badge-optional {
  background: transparent;
  color: var(--color-text-3);
  border: 1px dashed var(--color-border-2);
  opacity: 0;
}
.pack-item-actions:hover .pack-req-toggle.badge-optional,
.check-row:hover .pack-req-toggle.badge-optional {
  opacity: 1;
}

/* ── Ablaufplan: task role select + person name ───────────────────────────── */
.task-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .15rem;
}
.task-role-select {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border-2);
  font-size: .78rem;
  color: var(--color-text-2);
  padding: .05rem .2rem;
  cursor: pointer;
  max-width: 160px;
  transition: border-color var(--transition), color var(--transition);
}
.task-role-select:hover,
.task-role-select:focus {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
  outline: none;
}
.task-person-name {
  font-size: .78rem;
  color: var(--color-text-3);
  font-style: italic;
}

/* ── Pack: filter bar ─────────────────────────────────────────────────────── */
/* (filter removed — styles kept for potential future use) */

/* ── Pack: column header ("Gepackt") ─────────────────────────────────────── */
.pack-col-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .75rem .375rem;
}
.pack-col-handle-pad {
  width: 1.25rem;
  flex-shrink: 0;
}
.pack-col-gepackt {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-3);
}

/* ── Pack: responsive row layout ─────────────────────────────────────────── */
.pack-row-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .75rem;
  align-items: center;
  min-width: 0;
}
.pack-row-name {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pack-row-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Pack: purpose dropdown (inline, compact) ────────────────────────────── */
.pack-purpose-select {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border-2);
  font-size: .8125rem;
  font-family: inherit;
  color: var(--color-text-3);
  padding: .1rem .15rem;
  cursor: pointer;
  max-width: 150px;
  transition: border-color var(--transition), color var(--transition);
}
.pack-purpose-select:hover,
.pack-purpose-select:focus {
  border-bottom-color: var(--color-primary);
  color: var(--color-text-2);
  outline: none;
}

/* ── Pack: optional item styling ─────────────────────────────────────────── */
.check-row.item-optional .check-label {
  color: var(--color-text-3);
  font-weight: 400;
}
.check-row.item-optional .check-box {
  opacity: .45;
}
.check-row:not(.item-optional) .pack-row-name .check-label {
  font-weight: 600;
}

/* ── Pack: section complete (all required items checked) ─────────────────── */
.pack-cat-block.section-complete > .section-header {
  background: var(--color-success-l);
  border-color: #BBF7D0;
}
.pack-cat-block.section-complete > .section-header:hover {
  background: #dcfce7;
}

/* ── Pack: small screen row stacking ─────────────────────────────────────── */
@media (max-width: 640px) {
  .pack-row-content {
    grid-template-columns: 1fr;
  }
}