/* Package A — visual polish and layout refinements */

/* Sidebar: same hover/active language as clickable grids. */
.tutte-nav-item:hover,
.tutte-nav-item.active {
  color: var(--tutte-burgundy) !important;
  background: var(--tutte-burgundy-soft) !important;
}
.tutte-nav-item.active { box-shadow: inset 3px 0 0 var(--tutte-burgundy); }

/* No sidebar quote; logout lives at the bottom. */
.tutte-sidebar-footer {
  margin-top: auto;
  padding: 12px 11px 22px;
}
.tutte-sidebar-logout-form { margin: 0; }
.tutte-sidebar-logout {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #687386;
  font-weight: 500;
  text-align: left;
}
.tutte-sidebar-logout:hover {
  background: var(--tutte-burgundy-soft);
  color: var(--tutte-burgundy);
}
.tutte-sidebar-logout-icon { width: 22px; flex: 0 0 22px; text-align: center; font-size: 1.15rem; }
html.tutte-sidebar-precollapsed .tutte-sidebar-logout,
body.tutte-sidebar-collapsed .tutte-sidebar-logout { justify-content: center; padding-inline: 8px; }
html.tutte-sidebar-precollapsed .tutte-sidebar-logout-label,
body.tutte-sidebar-collapsed .tutte-sidebar-logout-label { display: none; }

/* Hero artwork: generated raster asset. */
.tutte-hero-strip {
  height: 96px !important;
  flex-basis: 96px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.02)),
    url('/img/tutte-score-v4.jpg') center center / cover no-repeat !important;
}
.tutte-hero-motto {
  left: 22px !important;
  top: 30px !important;
  font-size: 1.32rem !important;
}

/* Main content starts immediately after the hero; no global search bar. */
.tutte-content {
  padding-top: 18px !important;
  padding-bottom: 285px !important;
}

/* Shared page heading inspired by approved mockup. */
.tutte-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.tutte-page-heading-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tutte-page-heading-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tutte-burgundy);
  background: rgba(169,15,24,.10);
  font-size: 1.55rem;
}
.tutte-page-heading h1 { margin: 0; font-size: clamp(2rem, 3.4vw, 2.7rem); }
.tutte-page-heading-subtitle { margin-top: 2px; color: var(--tutte-text-soft); }
.tutte-page-heading-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* Collapsible filters, same behaviour as Gallery. */
.tutte-filter-details { margin: 0 0 16px; }
.tutte-filter-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--tutte-border);
  border-radius: 9px;
  background: rgba(255,255,255,.96);
  color: #526074;
  font-weight: 600;
}
.tutte-filter-details > summary::-webkit-details-marker { display: none; }
.tutte-filter-details[open] > summary {
  margin-bottom: 10px;
  color: var(--tutte-burgundy);
  background: var(--tutte-burgundy-soft);
}
.tutte-filter-details .tutte-filter-body {
  padding: 14px;
  border: 1px solid var(--tutte-border);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 16px rgba(24,35,55,.045);
}

/* Softer add/search/filter buttons. */
.btn-tutte-add,
.btn-tutte-search {
  color: #6f3137;
  background: #f7eeee;
  border-color: #e5cfd1;
}
.btn-tutte-add:hover,
.btn-tutte-add:focus,
.btn-tutte-search:hover,
.btn-tutte-search:focus {
  color: var(--tutte-burgundy-dark);
  background: #f1dfe1;
  border-color: #d9b9bc;
}
.btn-tutte-reset {
  color: #59677a;
  background: #f5f7f9;
  border-color: #dce2e9;
}
.btn-tutte-reset:hover,
.btn-tutte-reset:focus {
  color: #344054;
  background: #edf1f5;
  border-color: #cdd6df;
}

/* Gallery selection should read as a subtle secondary action. */
#toggleGallerySelection {
  color: #66504d !important;
  background: #f5f0ec !important;
  border-color: #dfd2ca !important;
}
#toggleGallerySelection:hover,
#toggleGallerySelection:focus {
  color: #4e3d3a !important;
  background: #ece3dc !important;
  border-color: #d1c0b5 !important;
}

/* Dictionaries: avoid blue navigation/action accents. */
.dictionary-nav .btn {
  color: #66504d;
  background: #faf7f5;
  border-color: #dfd6d1;
}
.dictionary-nav .btn.active,
.dictionary-nav .btn:hover,
.dictionary-nav .btn:focus {
  color: var(--tutte-burgundy);
  background: var(--tutte-burgundy-soft);
  border-color: #dfbdc0;
}
.dictionary-save {
  color: #4f6957 !important;
  background: #f0f6f2 !important;
  border-color: #cddfd2 !important;
}
.dictionary-save:hover { background: #e5f0e8 !important; }

/* Status palette — used now for existing statuses; Package B will also move 'Nowy' into the dictionary. */
.tutte-status-badge {
  display: inline-flex;
  align-items: center;
  padding: .3rem .58rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  margin-right: .25rem;
  margin-bottom: .2rem;
  color: #4d5867;
  background: #eef1f4;
  border: 1px solid #dde3e9;
}
.tutte-status-badge:nth-child(3n+1) { color:#466052; background:#edf5f0; border-color:#d5e7da; }
.tutte-status-badge:nth-child(3n+2) { color:#6b5843; background:#f7f2e8; border-color:#eadfc9; }
.tutte-status-badge:nth-child(3n) { color:#5e4f6b; background:#f3eff7; border-color:#e3d8ec; }
.tutte-status-new { color:#6d4a51; background:#f7ecee; border-color:#ead1d5; }

/* Footer artwork: generated raster asset. */
.tutte-page-background {
  background:
    url('/img/tutte-choir-v4.jpg') center bottom / 100% auto no-repeat,
    linear-gradient(180deg,#fafbfc 0%,#f6f7f8 58%,#fbf8f7 100%) !important;
}

@media (max-width: 767.98px) {
  .tutte-content { padding: 14px 14px 240px !important; }
  .tutte-hero-strip { height: 76px !important; flex-basis: 76px !important; }
  .tutte-hero-motto { left: 14px !important; top: 22px !important; font-size: 1.05rem !important; }
  .tutte-page-heading { align-items: flex-start; }
  .tutte-page-heading-main { align-items: flex-start; }
  .tutte-page-heading-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .tutte-page-heading h1 { font-size: 1.8rem; }
  .tutte-page-heading-actions { width: 100%; }
  .tutte-page-heading-actions .btn { flex: 1 1 auto; }

  .gallery-size-small .gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: .45rem !important; }
  .gallery-size-medium .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .6rem !important; }
  .gallery-size-large .gallery-grid { grid-template-columns: 1fr !important; }
  .gallery-image-link { aspect-ratio: 1 / 1 !important; }
  .gallery-size-large .gallery-image-link { aspect-ratio: 4 / 3 !important; }

  .tutte-page-background {
    background-size: auto 220px, auto !important;
    background-position: center bottom, center !important;
  }
}