/**
 * Ticketminds Shared Seat-Map Structural CSS (D-11)
 *
 * Host-agnostic structural rules for every seat-map surface in this repository,
 * merged from src/Ticketminds.PublicShop.Web/wwwroot/css/shop.css and
 * src/Ticketminds.Web/wwwroot/css/admin-inventory-hold.css — the two stylesheets
 * that each already define their own version of these concepts today
 * (src/Ticketminds.PublicShop.Web/wwwroot/css/seat-selection.css was also read as
 * the shop's second stylesheet, for anything it might already override).
 *
 * Deliberately excludes BOTH hosts' seat-status palettes: the shop's pastel CSS
 * custom properties for seat fill/stroke colors, and the admin wizard's
 * traffic-light literal hex color values. Those two palettes coexist by
 * design and must never be merged into one (UI-SPEC "Seat & Section Status Color
 * Contract") — each host keeps its own. Also excludes all page-level chrome (the
 * shop's map card / selection rail / sticky bar / bottom sheet, the wizard's step
 * layout) — that stays host-owned per D-11's split.
 *
 * Where a rule existed in both source stylesheets with a DIFFERENT value, this
 * file carries the SHOP's value (the live, revenue-carrying, test-uncovered
 * surface) — see 102-06-SUMMARY.md's divergence log for every case that applied
 * and which override plan 102-07's wizard CSS must carry as a result.
 */

/* ─── SVG layer sizing / preserveAspectRatio companions ──────────────────── */

/* Verbatim from shop.css. Lets the SVG fill its container box exactly as the
   `preserveAspectRatio="xMidYMid meet"` attribute set at render time expects. */
.venue-map-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Verbatim from shop.css — the section-shape hover/selection feedback that
   accompanies a drill-down state change (venue-map.js's applySectionStates()).
   No admin-inventory-hold.css equivalent exists yet for this selector; carried
   forward as-is (not a divergence to resolve), available for plan 102-07's
   wizard drill-down to reuse without re-deriving the same transition. */
.venue-map-container svg g[data-section-id] {
    transition: opacity 0.2s, stroke-width 0.2s;
    cursor: pointer;
}

/* ─── Drill-down transition timing tokens ────────────────────────────────── */

/* Match seat-map-view.js's ZOOM_TO_SECTION_DURATION_MS / ZOOM_BY_DURATION_MS
   constants exactly (plan 102-05) so any host CSS that eases alongside a
   viewBox animation (e.g. an aspect-ratio transition on a map container) can
   reference these tokens instead of re-hardcoding the same two numbers a
   second time in a different file. */
:root {
    --seat-map-zoom-to-section-duration: 300ms;
    --seat-map-zoom-by-duration: 200ms;
}

/* ─── Tooltip box chrome ──────────────────────────────────────────────────── */

/* The tooltip element seat-map-view.js's createTooltipElement() actually
   creates carries the class `seat-map-view-tooltip` (not the shop's
   pre-extraction `venue-map-tooltip`) — this is the selector the live DOM
   element needs after plan 102-06's shop shrink. Values below are copied
   verbatim from shop.css's `.venue-map-tooltip` block; no admin-inventory-
   hold.css equivalent exists, so there is no divergence to record here.
   The shop's tooltip content-producer (venue-map.js) still builds DOM nodes
   with the `tooltip-name`/`tooltip-zone`/`tooltip-category`/`color-dot`/
   `tooltip-price`/`tooltip-seats` class names, so those sub-rules move here
   too, byte-identical, re-parented under the new wrapper class only. */
.seat-map-view-tooltip {
    position: fixed;
    z-index: 1000;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    max-width: 280px;
    font-size: 0.875rem;
}
.seat-map-view-tooltip .tooltip-name { font-weight: 600; margin-bottom: 2px; }
.seat-map-view-tooltip .tooltip-zone { color: #6c757d; font-size: 0.8rem; }
.seat-map-view-tooltip .tooltip-category { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.seat-map-view-tooltip .color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.seat-map-view-tooltip .tooltip-price { margin-top: 2px; color: #495057; }
.seat-map-view-tooltip .tooltip-seats { color: #6c757d; font-size: 0.8rem; margin-top: 2px; }

/* ─── Sold-out / not-pickable dimming ─────────────────────────────────────── */

/* Generalised from admin-inventory-hold.css's
   `#seating-svg-container [data-seat-id][data-seat-status="sold"|"reserved"]`
   rules (values unchanged), dropping the page-specific `#seating-svg-container`
   ID prefix so any host's seat-status-driven dimming can reuse the same two
   declarations without redeclaring them. No shop.css/seat-selection.css
   equivalent exists for this exact rule — the shop encodes sold-out at the
   SECTION level via a runtime style block venue-map.js injects itself, not a
   static per-seat rule, so there is nothing to remove from the shop's
   stylesheets for this pairing (out of this task's scope; venue-map.js is
   Task 2's file, not Task 1's or Task 3's). */
[data-seat-status="sold"] {
    cursor: not-allowed;
    opacity: 0.7;
}
[data-seat-status="reserved"] {
    cursor: not-allowed;
    opacity: 0.85;
}