/* bbbs-theater-seating — same-origin stylesheet (strict CSP: no inline styles anywhere).
   Part 1 replaces the handful of Tailwind utilities the original pages used (dark shell,
   cards, tabs, table, buttons, progress bar); part 2 is the original seating.css, verbatim
   apart from this header. The original's inline style= attributes (screen clip-path, chart
   heights) live here as .screen / .chart-box. */

/* ── Shell ─────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: #111827;            /* gray-900 */
  color: #e5e7eb;                       /* gray-200 */
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.wrap { width: 100%; max-width: 64rem; }

h1 { font-size: 1.875rem; font-weight: 700; color: #fff; text-align: center; margin: 0 0 1.5rem; }
h2 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; text-align: center; }
h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 1rem; }

.muted { color: #9ca3af; }
.center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }

.message { text-align: center; font-size: 1.25rem; margin-top: 1.5rem; color: #facc15; min-height: 1.5rem; }

/* The screen graphic — the original's inline clip-path/style, as a class. */
.screen {
  width: 100%;
  height: 2rem;
  background: #fff;
  margin: 0 0 2rem;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.3);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.screen p { text-align: center; color: #1f2937; font-weight: 700; margin: 0.25rem 0 0; }

.chart-scroll { overflow-x: auto; padding-bottom: 1rem; }

.legend { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; }
.legend-item { display: flex; align-items: center; gap: 0.75rem; font-size: 1.125rem; font-weight: 500; }
.legend-swatch { cursor: default !important; transform: none !important; }
.legend-item .seat-available.legend-swatch { color: transparent; }

/* ── Cards / forms / buttons ───────────────────────────────────────────────── */

.card {
  background: #1f2937;                  /* gray-800 */
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  margin-bottom: 2rem;
}
.card.narrow { max-width: 24rem; margin: 4rem auto; }

label.field { display: block; font-size: 0.875rem; font-weight: 500; color: #d1d5db; margin-bottom: 0.5rem; }

input[type='password'], input[type='text'] {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: #374151;                  /* gray-700 */
  color: #fff;
  border: 1px solid #4b5563;
  font-size: 1rem;
}
input[type='password']:focus, input[type='text']:focus {
  outline: 2px solid #6366f1;           /* indigo-500 */
  outline-offset: 0;
  border-color: transparent;
}

button, .btn {
  background: #4f46e5;                  /* indigo-600 */
  color: #fff;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s ease;
}
button:hover, .btn:hover { background: #4338ca; }
.btn.disabled { background: #374151; color: #6b7280; cursor: not-allowed; }
button.ghost { background: transparent; border: 1px solid #4b5563; color: #d1d5db; font-weight: 500; }
button.ghost:hover { background: #374151; }

.actions { margin-top: 1.5rem; }
.actions button { width: 100%; }

.err {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* ── Admin chrome ──────────────────────────────────────────────────────────── */

.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.admin-head h1 { margin: 0; text-align: left; }

.tabbar { display: flex; border-bottom: 1px solid #374151; margin-bottom: 1.5rem; }
.tab {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: #fff; border-bottom-color: #4b5563; }
.tab-active { color: #fff; border-bottom-color: #6366f1; }

.init-form { text-align: right; margin-bottom: 1rem; }
.init-form button { width: auto; }

/* ── Audit log table ───────────────────────────────────────────────────────── */

.log-controls { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.log-controls input[type='text'] { flex: 1; }
.log-controls button { width: auto; }

table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: #374151; color: #e5e7eb; }
th, td { padding: 0.75rem 1rem; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: #fff; }
tbody tr { border-top: 1px solid #374151; color: #d1d5db; }
tbody tr:hover { background: #374151; }
.act-reserved { color: #facc15; font-weight: 600; }
.act-freed { color: #4ade80; font-weight: 600; }

.pager { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.pager-page { padding: 0 1rem; color: #d1d5db; }

/* ── Statistics ────────────────────────────────────────────────────────────── */

.stat-card .stat-big { font-size: 1.875rem; font-weight: 700; color: #fff; margin: 0.5rem 0 0.75rem; }
.progress { width: 100%; background: #374151; border-radius: 9999px; height: 1.25rem; position: relative; }
.progress-bar {
  height: 1.25rem;
  border-radius: 9999px;
  width: 0%;
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-bar span { font-size: 0.75rem; font-weight: 600; color: #fff; }
.chart-box { position: relative; height: 400px; }

[hidden] { display: none !important; }

/* ── Part 2: original seating.css (verbatim) ───────────────────────────────── */

#seating-chart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#seating-chart .seat-row {
    width: max-content;
}

.seat {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: bold;
    cursor: default;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.seat-aisle {
    width: 40px;
    height: 40px;
    margin: 5px;
    display: inline-block;
    visibility: hidden;
    flex-shrink: 0;
}

.seat-invisible {
    width: 40px;
    height: 40px;
    margin: 5px;
    display: inline-block;
    visibility: hidden;
    flex-shrink: 0;
}

.aisle-overlay {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 13px;
    border: 1px dashed rgba(229, 231, 235, 0.25);
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(15, 23, 42, 0.05));
    color: #cbd5f5;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    padding: 8px 3px;
}

.aisle-overlay__label {
    transform: rotate(180deg);
}

.seat-available {
    background-color: #16a34a; /* Rich green */
    color: #ffffff;
}

.seat-reserved {
    background-color: #71757b; /* Dark grey */
    color: #4b5563; /* Dark grey text - washed out look */
}

.seat-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.row-label {
    width: 38px;
    text-align: center;
    margin-right: 13px;
    font-weight: bold;
    color: #d1d5db;
    flex-shrink: 0;
}

/* Responsive: Scaled for smaller screens and landscape mobile */
@media (max-width: 900px), (max-height: 600px) {
    body {
        align-items: flex-start !important;
    }

    #seating-chart {
        align-items: flex-start;
    }

    .seat, .seat-aisle, .seat-invisible {
        width: 30px;
        height: 30px;
        margin: 3px;
        font-size: 0.625rem;
    }

    .aisle-overlay {
        font-size: 0.65rem;
        border-radius: 10px;
        padding: 5px 3px;
    }

    .seat-row {
        justify-content: flex-start;
        margin-bottom: 3px;
    }

    .row-label {
        width: 25px;
        font-size: 0.9375rem;
        margin-right: 6px;
    }
}

/* Admin-specific styles: interactive hover effects */
.admin .seat {
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.admin .seat:hover {
    transform: scale(1.1);
}

.admin .seat-available:hover {
    background-color: #22c55e; /* Brighter green on hover */
}

.admin .seat-reserved:hover {
    background-color: #9ca3af; /* Lighter grey on hover */
}