/* Package B — final Package A alignment + status polish */

/* Keep the page width stable between short and long views. On Windows the
   classic vertical scrollbar changes the layout viewport width when it
   appears; reserving its gutter prevents the hero artwork from shifting. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.tutte-shell,
.tutte-main,
.tutte-page-background,
.tutte-hero-strip {
  width: 100%;
  max-width: 100%;
}

/* Public landing page shown before authentication. */
.tutte-login-landing {
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 80px;
}

.tutte-login-logo {
  width: min(280px, 70vw);
  height: auto;
  margin-bottom: 24px;
}

.tutte-login-landing h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.tutte-login-subtitle {
  max-width: 760px;
  margin-top: 10px;
  color: #687386;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.tutte-login-quote {
  max-width: 760px;
  margin-top: 24px;
  font-size: 1.08rem;
  font-style: italic;
  color: #7b5a60;
}

.btn-tutte-login {
  margin-top: 30px;
  min-width: 150px;
  color: #6f3137;
  background: #f7eeee;
  border-color: #e5cfd1;
}
.btn-tutte-login:hover,
.btn-tutte-login:focus {
  color: var(--tutte-burgundy-dark);
  background: #f1dfe1;
  border-color: #d9b9bc;
}

/* Keep the musical hero visually identical on every authenticated page. */
.tutte-hero-strip {
  min-height: 104px !important;
  height: 104px !important;
  flex-basis: 104px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    url('/img/tutte-score-v4.jpg') center center / cover no-repeat !important;
}

.tutte-hero-page-heading {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 28px 0 24px !important;
}

.tutte-hero-page-copy {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 330px);
  padding: 0 !important;
  background: transparent !important;
}

.tutte-hero-page-actions {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.tutte-hero-motto {
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%);
  margin-top: 0 !important;
}

/* Shared controls row for Repertuar, Wydarzenia and Galeria. */
.tutte-list-controls {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}

.tutte-list-controls .tutte-filter-details,
.tutte-list-controls .gallery-filter-details {
  width: 112px;
  flex: 0 0 112px;
  margin: 0 !important;
}

.tutte-list-controls .tutte-filter-details > summary,
.tutte-list-controls .gallery-filter-details > summary {
  width: 112px;
  min-width: 112px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  line-height: 1;
  white-space: nowrap;
}

/* The expanded panel may be wide, but the details element itself stays fixed.
   This prevents Planowane/Historyczne from moving when filters open. */
.tutte-list-controls .tutte-filter-body,
.tutte-list-controls .gallery-filter-panel {
  width: min(1080px, calc(100vw - var(--tutte-sidebar-width) - 80px));
  margin-top: 10px;
}

body.tutte-sidebar-collapsed .tutte-list-controls .tutte-filter-body,
body.tutte-sidebar-collapsed .tutte-list-controls .gallery-filter-panel {
  width: min(1080px, calc(100vw - var(--tutte-sidebar-collapsed) - 80px));
}

.tutte-event-mode-bar {
  height: 42px;
  min-height: 42px;
  margin: 0 !important;
  align-items: center !important;
}

.tutte-event-mode-switch {
  height: 42px;
  align-items: center;
}

.tutte-event-mode-option {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Repertuar and Wydarzenia grids start at the same vertical position. */
.tutte-list-grid-anchor {
  margin-top: 0 !important;
}

/* Stable, semantic status colours. */
.tutte-status-new {
  color: #765b24 !important;
  background: #fbf3da !important;
  border-color: #ead89d !important;
}
.tutte-status-priority {
  color: #7b3d45 !important;
  background: #f8e9eb !important;
  border-color: #e8c9cd !important;
}
.tutte-status-progress {
  color: #5d557a !important;
  background: #f0edf7 !important;
  border-color: #dcd4ec !important;
}
.tutte-status-ready {
  color: #3e654d !important;
  background: #eaf4ed !important;
  border-color: #cfe3d5 !important;
}
.tutte-status-neutral {
  color: #4d5867 !important;
  background: #eef1f4 !important;
  border-color: #dde3e9 !important;
}

@media (max-width: 991.98px) {
  .tutte-hero-page-copy {
    left: 18px;
    max-width: calc(100% - 220px);
  }
  .tutte-hero-page-actions { right: 18px; }

  .tutte-list-controls .tutte-filter-body,
  .tutte-list-controls .gallery-filter-panel {
    width: min(760px, calc(100vw - 48px));
  }
}

@media (max-width: 767.98px) {
  .tutte-login-landing {
    min-height: calc(100vh - 80px);
    padding: 28px 16px 56px;
  }
  .tutte-login-logo {
    width: min(230px, 72vw);
    margin-bottom: 18px;
  }
  .tutte-login-quote {
    margin-top: 18px;
    font-size: 1rem;
  }

  .tutte-hero-strip {
    min-height: 76px !important;
    height: 76px !important;
    flex-basis: 76px !important;
  }

  .tutte-hero-page-copy {
    left: 14px;
    max-width: calc(100% - 150px);
  }
  .tutte-hero-page-actions { right: 12px; }
  .tutte-hero-page-title { font-size: 1.55rem !important; }
  .tutte-hero-page-subtitle { font-size: .82rem !important; margin-top: 3px !important; }
  .tutte-hero-motto {
    left: 14px !important;
    font-size: 1.05rem !important;
  }

  .tutte-list-controls {
    gap: 8px;
    flex-wrap: wrap;
  }

  .tutte-list-controls .tutte-filter-body,
  .tutte-list-controls .gallery-filter-panel {
    width: calc(100vw - 28px);
  }

  .tutte-event-mode-label { display: none; }
  .tutte-event-mode-option { min-width: 94px; padding-inline: 10px; }
}