/**
 * Section palette (left panel) styles.
 * Category tabs + scrollable thumbnail grid.
 */

.pb-palette-search {
  padding: var(--pb-space-4);
  border-bottom: 1px solid var(--pb-border);
}

.pb-palette-search input {
  width: 100%;
  border-radius: var(--pb-radius);
}

.pb-palette-search input::placeholder {
  color: var(--pb-text-dim);
}

/* Category tabs — horizontal scrollable strip */
.pb-category-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid var(--pb-border);
  scrollbar-width: none;
}

.pb-category-tabs::-webkit-scrollbar {
  display: none;
}

.pb-category-tab {
  flex-shrink: 0;
  padding: var(--pb-space-4) var(--pb-space-5);
  font-size: var(--pb-font-sm);
  font-weight: 500;
  color: var(--pb-text-dim);
  border-bottom: 2px solid transparent;
  transition: color var(--pb-transition), border-color var(--pb-transition);
  white-space: nowrap;
}

.pb-category-tab:hover {
  color: var(--pb-text);
}

.pb-category-tab.pb-active {
  color: var(--pb-accent);
  border-bottom-color: var(--pb-accent);
  background: var(--pb-accent-tint);
}

/* Section thumbnail grid */
.pb-section-grid {
  flex: 1;
  overflow-y: auto;
  padding: var(--pb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-4);
}

.pb-section-card {
  position: relative;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  overflow: hidden;
  background: var(--pb-bg);
  cursor: pointer;
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}

.pb-section-card:hover {
  border-color: var(--pb-accent-subtle);
  box-shadow: var(--pb-shadow-ring);
}

.pb-section-card img {
  width: 100%;
  display: block;
  background: var(--pb-content-bg);
}

.pb-section-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pb-space-3) var(--pb-space-4);
  background: var(--pb-surface);
}

.pb-section-card-name {
  font-size: var(--pb-font-sm);
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-section-card-add {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pb-accent);
  color: var(--pb-text-bright);
  font-size: var(--pb-font-lg);
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--pb-transition);
}

.pb-section-card-add:hover {
  background: var(--pb-accent-hover);
}

/* Category section count badge */
.pb-category-count {
  font-size: var(--pb-font-xs);
  color: var(--pb-text-dim);
  margin-left: var(--pb-space-2);
}

/* Template search bar */
.pb-template-search {
  padding-bottom: var(--pb-space-5);
}

.pb-template-search input {
  width: 100%;
  border-radius: var(--pb-radius);
}

/* Template industry filter pills */
.pb-template-filters {
  display: flex;
  gap: var(--pb-space-3);
  padding: 0 0 var(--pb-space-5);
  flex-wrap: wrap;
}

.pb-template-pill {
  padding: var(--pb-space-2) var(--pb-space-5);
  border-radius: var(--pb-radius-pill);
  border: 1px solid var(--pb-border);
  background: transparent;
  color: var(--pb-text);
  font-size: var(--pb-font-base);
  cursor: pointer;
  transition: all var(--pb-transition);
}

.pb-template-pill:hover {
  border-color: var(--pb-accent-subtle);
  background: var(--pb-bg-hover);
  box-shadow: var(--pb-shadow-ring);
}

.pb-template-pill[aria-pressed="true"] {
  background: var(--pb-accent);
  color: var(--pb-text-bright);
  border-color: var(--pb-accent);
}

.pb-pills-toggle {
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
  background: none;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-pill);
  padding: var(--pb-space-2) var(--pb-space-5);
  cursor: pointer;
  transition: color var(--pb-transition);
}
.pb-pills-toggle:hover { color: var(--pb-text); }

.pb-template-pill-starter {
  border-style: dashed;
}

.pb-template-empty {
  padding: var(--pb-space-10) 0;
  text-align: center;
  color: var(--pb-text-dim);
  font-size: var(--pb-font-md);
}

.pb-add-section-divider {
  grid-column: 1 / -1;
  padding: var(--pb-space-4) 0 var(--pb-space-2);
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
  border-top: 1px solid var(--pb-border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Template selector modal grid */
.pb-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pb-space-5);
}

.pb-template-card {
  position: relative;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--pb-transition), background var(--pb-transition);
}

.pb-template-card-badge {
  position: absolute;
  top: var(--pb-space-3);
  right: var(--pb-space-3);
  background: var(--pb-accent);
  color: var(--pb-text-bright);
  font-size: var(--pb-font-xs);
  padding: var(--pb-space-1) var(--pb-space-3);
  border-radius: var(--pb-radius);
  pointer-events: none;
  z-index: var(--pb-z-base);
}

.pb-template-card-placeholder {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-surface-hover);
  color: var(--pb-text-dim);
  font-size: var(--pb-font-md);
  font-weight: 600;
  border-bottom: 1px solid var(--pb-border);
}

.pb-template-card-name,
.pb-template-card-meta {
  padding-left: var(--pb-space-4);
  padding-right: var(--pb-space-4);
}

.pb-template-card-name {
  font-size: var(--pb-font-md);
  font-weight: 600;
  color: var(--pb-text-bright);
  margin-bottom: var(--pb-space-2);
  padding-top: var(--pb-space-4);
}

.pb-template-card-meta {
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
}

.pb-template-card-meta:last-child {
  padding-bottom: var(--pb-space-4);
}

.pb-template-card:hover {
  border-color: var(--pb-accent-subtle);
  background: var(--pb-surface-hover);
}

.pb-template-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  display: block;
  border-bottom: 1px solid var(--pb-border);
  background: var(--pb-content-placeholder);
}

/* Template preview panel */
.pb-tpl-preview {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-6);
}

/* Top bar: back button left, load button right */
.pb-tpl-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pb-tpl-preview-back {
  font-size: var(--pb-font-base);
  color: var(--pb-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--pb-space-2) 0;
}

.pb-tpl-preview-back:hover {
  text-decoration: underline;
}

.pb-tpl-preview-load {
  padding: var(--pb-space-4) var(--pb-space-8);
  font-size: var(--pb-font-md);
}

/* Hero area: screenshot + metadata side by side */
.pb-tpl-preview-hero {
  display: flex;
  gap: var(--pb-space-6);
  align-items: flex-start;
}

.pb-tpl-preview-thumb {
  width: 340px;
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: var(--pb-radius);
  border: 1px solid var(--pb-border);
  background: var(--pb-content-placeholder);
}

.pb-tpl-preview-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-4);
  min-width: 0;
}

.pb-tpl-preview-meta h3 {
  font-size: 18px; /* decorative heading, not part of type scale */
  font-weight: 600;
  color: var(--pb-text-bright);
  margin: 0;
}

.pb-tpl-preview-url {
  font-size: var(--pb-font-base);
  color: var(--pb-accent);
  text-decoration: underline;
  cursor: pointer;
  word-break: break-all;
}

.pb-tpl-preview-url:hover {
  color: var(--pb-accent-hover);
}

.pb-tpl-preview-industry {
  font-size: var(--pb-font-base);
  color: var(--pb-text-dim);
  font-weight: 500;
}

.pb-tpl-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-4);
  font-size: var(--pb-font-base);
  color: var(--pb-text-dim);
}

.pb-tpl-preview-stats span {
  padding: var(--pb-space-1) var(--pb-space-4);
  background: var(--pb-bg);
  border-radius: var(--pb-radius);
}

.pb-tpl-preview-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-4);
  margin-top: var(--pb-space-2);
}

.pb-tpl-preview-swatch {
  display: flex;
  align-items: center;
  gap: var(--pb-space-3);
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
}

.pb-tpl-preview-swatch span:first-child {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--pb-border);
  display: inline-block;
}

/* Sections title */
.pb-tpl-preview-title {
  font-size: var(--pb-font-sm);
  font-weight: 600;
  color: var(--pb-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.pb-tpl-preview-empty {
  color: var(--pb-text-dim);
  font-size: var(--pb-font-base);
}

/* Page count badge next to page name in template preview */
.pb-tpl-page-count {
  font-weight: 400;
  color: var(--pb-text-dim);
  font-size: var(--pb-font-xs);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Section card grid ── */
.pb-sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--pb-space-4);
}

.pb-sec-card {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  overflow: hidden;
  background: var(--pb-bg);
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}

.pb-sec-card:hover {
  border-color: var(--pb-accent-subtle);
  box-shadow: 0 0 0 1px var(--pb-accent-glow);
}

/* Thumbnail container */
.pb-sec-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pb-content-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--pb-border);
}

.pb-sec-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--pb-transition-slow);
}

.pb-sec-card:hover .pb-sec-card-thumb img {
  transform: scale(1.08);
}

/* Fallback when image fails to load */
.pb-sec-card-nothumb {
  background: var(--pb-surface);
}

.pb-sec-card-nothumb img {
  display: none;
}

.pb-sec-card-placeholder {
  font-size: 18px;
  font-weight: 700;
  color: var(--pb-text-dim);
  opacity: 0.4;
}

/* Info row below thumbnail */
.pb-sec-card-info {
  padding: var(--pb-space-3) var(--pb-space-4);
  display: flex;
  flex-direction: column;
  gap: 1px; /* intentional: tighter than --pb-space-1 (2px) */
}

.pb-sec-card-id {
  font-size: var(--pb-font-sm);
  font-weight: 500;
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-sec-card-role {
  font-size: var(--pb-font-xs);
  color: var(--pb-text-dim);
}

/* Accent for shared sections (nav/footer) */
.pb-sec-role-nav {
  border-left: 2px solid var(--pb-accent);
}

.pb-sec-role-footer {
  border-left: 2px solid var(--pb-text-dim);
}

/* Section loading spinner */
.pb-section-grid-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pb-space-8);
  color: var(--pb-text-dim);
  font-size: var(--pb-font-base);
}