/* ==========================================================================
   Layout: app shell (header, search bar, main area, footer, page views)
   and the responsive rules for the shell.
   Breakpoints used across the stylesheets:
     <=1200  gallery 3 columns, detail sections stack
     <=1100  detail info row stacks, wizard sidebar becomes a stepper
     <=1024  prototype banner moves out of the header row
     <=900   gallery 2 columns, stats 3 columns, detail gallery re-flows
     <=768   tablet portrait: map strip, scrollable tables, wizard grids
     <=640   phone: single column, compact controls, 16px gutters
   ========================================================================== */

/* --- Header --- */
.header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  min-height: var(--header-height); padding: 0 var(--page-gutter); position: relative; flex-shrink: 0;
  background: var(--primary-900); color: var(--neutral-50);
}
.header-left { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; color: inherit; }
.logo { width: var(--space-8); height: var(--space-8); display: flex; align-items: center; justify-content: center; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.header-title { display: flex; flex-direction: column; line-height: 1.3; font-size: var(--font-size-xs); }
.header-title-main { font-weight: var(--font-weight-semibold); }
.header-title-sub { opacity: 0.9; }
.header-right { display: flex; gap: var(--space-4); flex-shrink: 0; }

/* Prototype banner, centred in header and footer */
.prototype-warning {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--color-warning-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}

/* --- Footer --- */
.footer {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: relative;
  padding: var(--space-1) var(--page-gutter);
  background: var(--primary-900); color: var(--neutral-50);
}
.footer-right { display: flex; align-items: center; gap: var(--space-4); }
.footer-link {
  color: var(--neutral-50); text-decoration: none; font-size: var(--font-size-sm); transition: opacity var(--transition-normal);
  display: inline-block; padding: var(--space-2) var(--space-1); margin: calc(-1 * var(--space-2)) 0; /* larger tap target, same footer height */
}
.footer-link:hover { opacity: 0.8; }
.footer-version { font-size: var(--font-size-sm); opacity: 0.7; }

/* --- Search & filter bar --- */
.search-section { background: var(--neutral-50); padding: var(--space-4) 0; border-bottom: 1px solid var(--neutral-200); flex-shrink: 0; }
.search-section-inner { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--page-gutter); }
.search-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.search-row .search-field { flex: 1; min-width: 0; }
.view-toggle { display: flex; flex-shrink: 0; background: var(--neutral-100); border-radius: var(--radius-md); padding: var(--space-1); }
.view-btn {
  display: flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--neutral-500);
  transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}
.view-btn .material-icons-outlined { font-size: var(--font-size-2xl); }
.view-btn:hover { color: var(--neutral-900); }
.view-btn.active { background: var(--accent-600); color: var(--neutral-50); box-shadow: var(--shadow-sm); }
.view-btn-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-left: var(--space-2); }
.filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1; }
.reset-filters { display: none; }
.reset-filters.visible { display: inline-flex; }
.filter-right { display: flex; align-items: center; gap: var(--space-4); }
.stats-count { font-size: var(--font-size-base); color: var(--neutral-700); font-weight: var(--font-weight-semibold); }
.filter-btn {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--neutral-200); border-radius: var(--radius-full); background: var(--neutral-50);
  font-size: var(--font-size-sm); color: var(--neutral-700);
  transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}
.filter-btn .material-icons-outlined { font-size: var(--font-size-2xl); }
.filter-btn:hover { border-color: var(--accent-600); color: var(--accent-600); }
.filter-btn.has-filters { border-color: var(--accent-600); color: var(--accent-600); background: var(--accent-100); }
.filter-btn.panel-open { border-color: var(--accent-600); color: var(--neutral-50); background: var(--accent-600); }
.filter-count {
  display: none; padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--accent-600); color: var(--neutral-50); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold);
}
.filter-count.visible { display: inline; }

/* --- Main area and full-page views --- */
.main {
  flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%;
  max-width: var(--page-max-width); margin: 0 auto; padding: var(--page-gutter);
}
.view-container { display: none; }
.view-container.active { display: block; }
.page-view { display: none; flex-direction: column; flex: 1; }
.page-view.active { display: flex; }
body.page-active .search-section, body.page-active .main { display: none; }

/* Page header shared by the detail page, the wizard and the API docs */
.page-header { background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200); padding: var(--space-4) var(--page-gutter); }
.page-header-inner {
  max-width: var(--page-max-width); width: 100%; margin: 0 auto; padding: 0 var(--panel-padding);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}
.page-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.page-breadcrumb { font-size: var(--font-size-base); color: var(--neutral-500); }
.page-title { font-size: var(--font-size-2xl); color: var(--neutral-900); }
.page-content {
  max-width: var(--page-max-width); width: calc(100% - 2 * var(--page-gutter)); min-width: 0;
  margin: var(--page-gutter) auto; padding: var(--panel-padding);
  background: var(--neutral-50); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}

/* --- Responsive shell --- */
@media (max-width: 1024px) {
  /* The absolutely centred banner would overlap the header buttons: give it its own line */
  .header { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .header .prototype-warning { position: static; transform: none; flex-basis: 100%; order: 3; text-align: center; font-size: var(--font-size-2xs); }
}
@media (max-width: 768px) {
  .footer { flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .footer .prototype-warning { position: static; transform: none; flex-basis: 100%; order: 3; text-align: center; font-size: var(--font-size-2xs); white-space: normal; }
}
@media (max-width: 640px) {
  .header { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .header .prototype-warning { display: none; } /* the footer banner stays visible */
  .header-right { width: 100%; gap: var(--space-3); }
  .header-right .btn { flex: 1; }
  .search-section { padding: var(--space-3) 0; }
  .search-row { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-3); }
  .view-toggle .view-btn { flex: 1; }
  .filter-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } /* nowrap: a wrapping column sizes its line to the unwrapped chips */
  .filter-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--page-gutter)); padding: 2px var(--page-gutter);
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-right { justify-content: space-between; }
  .footer-right { gap: var(--space-2); }
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1 1 auto; }
}
/* Touch devices (and small screens, where touch is likely): comfortable targets */
@media (pointer: coarse), (max-width: 768px) {
  .chip, .filter-btn, .view-btn { min-height: var(--space-10); }
  .link-icon, .dialog-links .link { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}