/* input_20 Phase 4: shared admin-page structural/layout CSS.
   Extracted from the near-identical ".bb-admin*" rule blocks that used to be
   duplicated verbatim (values aside) across all three theme stylesheets.
   This file owns layout only: display/grid/flex, positioning, spacing,
   sizing, responsive structure, form-control dimensions, and generic
   card/table/button geometry. It never defines a color, font-family, or
   background value itself — where a value genuinely needs to vary by theme
   (currently just corner radius on a few structural containers), it
   references a CSS custom property (var(--bb-admin-radius)) that each
   theme.css defines. Every other visual property (colors, fonts,
   backgrounds, borders, shadows, decorative effects, and each theme's own
   bespoke dashboard classes such as Lady Gianna's .lg-*) stays entirely in
   that theme's own stylesheet.

   Load this file BEFORE the selected theme's theme.css (see
   edit-event.ejs / assets.ejs) so theme-specific declarations, loaded
   second, naturally take precedence for anything they still define. */

.bb-admin { margin: 0; padding: 2rem 4vw 4rem; }
.bb-admin * { box-sizing: border-box; }
.bb-admin-wrap { max-width: 1200px; margin: 0 auto; }
.bb-admin h1 { margin: 0.2rem 0 1.5rem; }
.bb-admin h2 { margin: 0 0 1rem; }
.bb-admin-back { display: inline-block; margin-bottom: 1rem; }

/* Per-event admin header */
.bb-admin-header { position: sticky; top: 0; z-index: 20; margin-bottom: 2rem; padding-top: 0.5rem; }
.bb-admin-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: var(--bb-admin-radius);
}
.bb-admin-header-title { text-decoration: none; }
.bb-admin-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bb-admin-nav a { text-decoration: none; padding: 0.5em 0.7em; }

/* Shared tile/card geometry — every block on an admin page (quick-action
   tile, detail-field tile, guest-management panel, danger zone) uses the
   same padding/radius so nothing reads as a structurally different
   component, even though each theme paints it differently. */
.bb-admin-card, .bb-admin-tile { padding: 1.25rem 1.4rem; border-radius: var(--bb-admin-radius); }
.bb-admin-section { margin-bottom: 2.5rem; }
.bb-admin-section:last-child { margin-bottom: 0; }

/* Dashboard "top row: photo + quick-action tiles" grid (Botanical Bloom's
   own dashboard uses this; kept generically available for any theme that
   wants the same layout). */
.bb-admin-top { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1.5rem; align-items: stretch; }
.bb-admin-photo-panel { overflow: hidden; min-height: 260px; border-radius: var(--bb-admin-radius); }
.bb-admin-photo-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-admin-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 820px) {
  .bb-admin-top { grid-template-columns: 1fr; }
  .bb-admin-photo-panel { min-height: 200px; }
}
@media (max-width: 480px) {
  .bb-admin-quick-grid { grid-template-columns: 1fr; }
}

/* "Wedding/Event details" reflowing tile grid — used by edit-event.ejs and
   each theme's own inline dashboard details form. minmax(170px,1fr) lands
   around six columns on a ~1200px container and narrows on its own down to
   the phone-width single column, no separate breakpoint rules needed. */
/* min(170px, 100%) instead of a bare 170px keeps the track minimum itself
   from ever exceeding the viewport. The actual overflow culprit (found
   via real computed-geometry inspection, pre-existing, affecting every
   theme equally at narrow widths — the Card image tile's native
   <input type="file"> has a non-shrinkable intrinsic width) is CSS
   Grid's default `min-width: auto` on grid items, which lets a track grow
   past its `1fr` share to fit content that refuses to shrink. min-width: 0
   here is the standard fix — it lets the track (and the file input inside
   it) shrink to the column's actual width instead of forcing the grid
   wider than its own container. */
.bb-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 1.25rem; }
.bb-details-grid .bb-admin-tile { display: flex; flex-direction: column; min-width: 0; }
.bb-details-grid .bb-admin-tile.bb-tile-wide { grid-column: span 2; }
.bb-details-grid label { margin: 0 0 0.4rem; }
.bb-details-grid textarea { flex: 1; min-height: 90px; }

.bb-admin-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 0.6rem; }
.bb-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Guest management: form+table (left) / instructions (right) */
.bb-guest-mgmt { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) {
  .bb-guest-mgmt { grid-template-columns: 1fr; }
}

.bb-admin label { display: block; margin-bottom: 0.9rem; }
.bb-admin input[type="text"],
.bb-admin input[type="date"],
.bb-admin input[type="email"],
.bb-admin input[type="password"],
.bb-admin input[type="color"],
.bb-admin input[type="file"],
.bb-admin textarea,
.bb-admin select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55em 0.75em;
}
.bb-admin table { width: 100%; border-collapse: collapse; }
.bb-admin th, .bb-admin td { padding: 0.6em 0.5em; text-align: left; }
.bb-admin th { letter-spacing: 0.03em; }
.bb-admin .bb-btn { padding: 0.6em 1.6em; }
.bb-admin .bb-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bb-admin .bb-stats strong { display: block; }

/* Gallery management (assets.ejs) */
.bb-admin-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.bb-admin-gallery-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.bb-admin-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-admin-gallery-item form { position: absolute; top: 4px; right: 4px; margin: 0; }
.bb-admin-gallery-item button { border: none; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; padding: 0; cursor: pointer; }
.bb-admin-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; }

.bb-assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 820px) {
  .bb-assets-grid { grid-template-columns: 1fr; }
}