@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans/variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk/variable.ttf') format('truetype');
}

:root {
  color-scheme: light;
  --ink: #f8fbff;
  --text-dark: #17232c;
  --muted: #cbd5e1;
  --muted-dark: #6c7a89;
  --paper: #0f172a;
  --panel: rgba(30, 41, 59, 0.45);
  --panel-strong: rgba(15, 23, 42, 0.72);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(148, 163, 184, 0.24);
  --navy: #0f172a;
  --blue: #63b3ed;
  --blue-strong: #3182ce;
  --cyan: #38bdf8;
  --success: #34d399;
  --warning: #f59e0b;
  --coral: #f87171;
  --yellow: #f6c85f;
  --surface: rgba(255, 255, 255, 0.88);
  --shadow: 0 18px 55px rgb(0 0 0 / 0.28);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at top left, rgb(56 189 248 / 0.18), transparent 28%), radial-gradient(circle at 85% 12%, rgb(99 179 237 / 0.14), transparent 18%), linear-gradient(180deg, #0b1220 0%, #0f172a 100%); font-family: 'DM Sans', sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.login-panel { width: min(100%, 560px); padding: 40px; background: linear-gradient(180deg, rgb(30 41 59 / 0.56), rgb(15 23 42 / 0.66)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
h1, h2, strong { font-family: 'Space Grotesk', sans-serif; }
.login-brand { display: flex; align-items: center; gap: 18px; }
.brand-logo { width: 62px; height: 62px; flex: 0 0 auto; }
.brand-logo-small { width: 38px; height: 38px; }
.login-panel h1 { margin: 0; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 0.94; letter-spacing: -0.04em; }
.login-intro { max-width: 38ch; margin: 22px 0 26px; color: var(--muted); line-height: 1.6; }
.login-copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.copy-card { display: grid; gap: 4px; padding: 16px; background: rgb(255 255 255 / 0.05); border: 1px solid var(--line); border-radius: 16px; }
.copy-card strong { font-size: 1rem; }
.copy-card span:last-child { color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.copy-card-kicker { color: var(--cyan); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.login-options { display: grid; gap: 12px; }
.login-option { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.login-option h2 { margin: 0; font-size: 1rem; color: white; }
.login-option p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.login-form { display: grid; gap: 12px; }
.login-form label { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.login-form select,
.login-form input { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 0.08); color: white; }
.login-form select {
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(203 213 225 / 0.92) 50%),
    linear-gradient(135deg, rgb(203 213 225 / 0.92) 50%, transparent 50%),
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0));
  background-position:
    calc(100% - 19px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px),
    center;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}
.login-form select option,
.login-form select optgroup {
  color: var(--text-dark);
  background-color: #f8fafc;
}
.login-form select:hover,
.login-form input:hover {
  border-color: rgb(99 179 237 / 0.36);
  background-color: rgb(255 255 255 / 0.12);
}
.login-form select:focus-visible,
.login-form input:focus-visible { outline: 3px solid rgb(99 179 237 / 0.85); outline-offset: 2px; }
.login-form select:focus-visible {
  border-color: rgb(99 179 237 / 0.5);
  background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(180deg, rgb(99 179 237 / 0.14), rgb(255 255 255 / 0.02));
}
.button { border: 0; padding: 12px 16px; border-radius: 12px; color: white; background: linear-gradient(180deg, var(--blue) 0%, var(--blue-strong) 100%); font-weight: 700; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16); }
.button:hover, .button:focus-visible { background: linear-gradient(180deg, #79c3f2 0%, #3f8bd6 100%); }
.button-quiet { padding: 9px 12px; color: var(--text-dark); background: rgb(255 255 255 / 0.76); border: 1px solid rgb(255 255 255 / 0.6); border-radius: 12px; }
.button-quiet:hover, .button-quiet:focus-visible { background: white; }
.feedback { margin: 18px 0 0; padding: 12px; font-size: 0.86rem; line-height: 1.4; }
.feedback-error { color: #fef3c7; background: rgb(245 158 11 / 0.14); border: 1px solid rgb(245 158 11 / 0.28); border-left: 3px solid var(--yellow); border-radius: 12px; }

.workspace { display: grid; min-height: 100vh; grid-template-columns: 252px minmax(0, 1fr); transition: grid-template-columns 220ms ease; }
.workspace.is-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100vh; overflow-y: auto; padding: 28px 18px 20px; color: #e9f1ed; background: linear-gradient(180deg, rgb(15 23 42 / 0.88), rgb(15 23 42 / 0.96)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--line); transition: padding 220ms ease, opacity 180ms ease, visibility 180ms ease; }
.workspace.is-sidebar-collapsed .sidebar { overflow: hidden; padding-inline: 0; border-right: 0; opacity: 0; visibility: hidden; }
.sidebar-toggle { position: fixed; z-index: 40; top: 18px; left: 234px; display: grid; place-items: center; width: 36px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 0 9px 9px 0; color: white; background: #1e293b; font-size: 1.35rem; line-height: 1; box-shadow: 0 4px 14px rgb(0 0 0 / 0.22); transform: translateY(-50%); transition: top 160ms ease, left 220ms ease, background 160ms ease; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: #334155; }
.sidebar-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.workspace.is-sidebar-collapsed .sidebar-toggle { left: 12px; border-radius: 9px; }
.sidebar-backdrop { display: none; }
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 0 10px 42px; }
.brand-lockup strong, .brand-lockup span { display: block; }
.brand-lockup strong { font-size: 0.98rem; }
.brand-lockup div span { margin-top: 3px; color: #91a7a2; font-size: 0.72rem; }
.main-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 13px 12px; color: #a8b8b4; text-decoration: none; font-size: 0.9rem; }
.nav-item span { color: #617572; font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; }
.nav-item:hover, .nav-item:focus-visible, .nav-item.is-active { color: white; background: rgb(255 255 255 / 0.09); }
.nav-item.is-active { border-left: 3px solid var(--coral); padding-left: 9px; }
.sidebar-footer { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 16px 12px 0; color: #7d918d; border-top: 1px solid #27373b; font-size: 0.72rem; }
.status-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; }
.main-area { min-width: 0; }
.topbar { display: flex; flex-direction: column; gap: 12px; padding: 20px 32px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.84)); }
.topbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.topbar-controls-row { flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; }
.header-context-form { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 10px; }
.header-context-field { flex: 1 1 140px; min-width: 110px; display: grid; gap: 6px; color: var(--muted-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.header-context-field select { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid rgb(203 213 225 / 0.7); border-radius: 10px; background: rgb(255 255 255 / 0.92); color: var(--text-dark); }
.header-context-field select option,
.header-context-field select optgroup { color: var(--text-dark); background-color: #f8fafc; }
.header-context-field select:disabled { color: #94a3b8; background: rgb(241 245 249 / 0.9); }
.header-context-field select:focus-visible { outline: 3px solid rgb(99 179 237 / 0.72); outline-offset: 1px; }
.header-breadcrumb { display: block; width: 100%; margin: 0; color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-breadcrumb span:not(.breadcrumb-separator) { color: var(--muted-dark); font-weight: 500; }
.breadcrumb-separator { display: inline-block; margin: 0 6px; color: var(--muted); font-weight: 400; }
.user-tools { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 0 0 auto; }
.user-context { color: var(--muted-dark); font-size: 0.86rem; }
.content-area { max-width: 1380px; padding: 26px 32px 32px; }
.feedback-inline { margin-top: 16px; padding: 0; color: var(--muted-dark); background: transparent; border: 0; }
.feedback-inline[data-tone='error'] { color: #b45309; }
.content-feedback { margin: 0 0 12px; }
.metric-label { color: var(--blue-strong); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.seatmap-panel { padding: 18px 18px 20px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 18px; background: linear-gradient(180deg, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.78)); box-shadow: 0 12px 34px rgb(15 23 42 / 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.seatmap-panel-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.seatmap-panel h3 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; }
.seatmap-panel .eyebrow { color: var(--blue-strong); }
.seatmap-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: flex-end; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-dark); font-size: 0.82rem; font-weight: 700; }
.legend-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgb(15 23 42 / 0.15); }
.legend-dot-free { background: #22c55e; }
.legend-dot-occupied { background: #f59e0b; }
.legend-dot-selected { background: #ef4444; }
.legend-dot-vip { background: #8b5cf6; }
.seatmap-copy { margin: 14px 0 0; color: var(--muted-dark); line-height: 1.5; }
.seat-assignment-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid rgb(49 130 206 / 0.24); border-radius: 8px; background: rgb(99 179 237 / 0.12); color: var(--text-dark); }
.seat-assignment-banner p { margin: 0; line-height: 1.45; }
.seat-assignment-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.icon-button { display: inline-grid; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid rgb(71 85 105 / 0.3); border-radius: 8px; background: rgb(255 255 255 / 0.84); color: var(--text-dark); cursor: pointer; }
.icon-button svg { width: 20px; height: 20px; }
.icon-button:hover:not(:disabled), .icon-button:focus-visible { border-color: #3182ce; outline: 3px solid rgb(49 130 206 / 0.28); outline-offset: 1px; }
.icon-button:disabled { cursor: not-allowed; opacity: 0.45; }
.save-icon { display: block; width: 24px; height: 24px; }
.seat-pill.is-assignable { cursor: pointer; outline: 3px solid rgb(49 130 206 / 0.7); outline-offset: 1px; }
.seat-pill.is-assignable:hover, .seat-pill.is-assignable:focus-visible { outline-color: #1d6fb8; }
.area-assignment-dialog { width: min(620px, calc(100vw - 32px)); }
.area-assignment-dialog .master-dialog-form { gap: 14px; }
.area-assignment-dialog .master-dialog-header h2 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; }
.table-seats-remaining { margin: 0; color: var(--muted-dark); }
.table-seat-grid { padding: 4px; }
.area-assignment-feedback { margin: 0; }
.seat-pill.is-draft-selected { outline: 4px solid #1d6fb8; outline-offset: 2px; }
.standing-card.is-draft-selected { border-color: #3182ce; box-shadow: inset 0 0 0 2px rgb(49 130 206 / 0.2); }
.seatmap-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; margin-top: 18px; }
.seatmap-workspace.is-assignment-mode { grid-template-columns: minmax(0, 1fr); }
.dashboard-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dashboard-tools .content-feedback { min-width: 0; margin: 0; }
.standing-column { display: grid; gap: 12px; min-width: 0; }
.standing-assignment-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.assignment-save-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 12px; }
.assignment-save-button svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dashboard-layout.is-bookings-visible { grid-template-columns: 292px minmax(0, 1fr); }
.dashboard-layout > *, .dashboard-bookings-panel { min-width: 0; }
.dashboard-bookings-sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px; border: 1px solid rgb(203 213 225 / 0.8); border-radius: 12px; background: rgb(248 250 252 / 0.98); color: var(--text-dark); }
.dashboard-bookings-panel h2 { margin: 0; font: 700 1rem 'DM Sans', sans-serif; }
.sidebar-event-context { font-size: 0.82rem; color: var(--muted-dark); overflow-wrap: anywhere; }
.dashboard-booking-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-booking-filters > :first-child { grid-column: 1 / -1; }
.dashboard-booking-filters input, .dashboard-booking-filters select { min-width: 0; width: 100%; }
.dashboard-booking-cards { display: grid; gap: 8px; margin-top: 12px; font-size: 0.82rem; }
.dashboard-booking-card { border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; background: white; overflow-wrap: anywhere; }
.dashboard-booking-card h3 { margin: 0 0 8px; font-size: 0.94rem; }
.dashboard-booking-card p { margin: 4px 0; line-height: 1.4; }
.dashboard-booking-card.is-selected { border-color: #3182ce; box-shadow: inset 0 0 0 1px #3182ce; }
.dashboard-booking-card[data-vip='true'] h3 { color: #6d28d9; }
.dashboard-booking-card[data-status='unvollständig'] { border-left: 3px solid #ea580c; }
.dashboard-booking-card:focus-visible { outline: 3px solid #3182ce; outline-offset: 2px; }
.dashboard-booking-card .booking-row-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: flex-start; }
.seat-element-title .seat-element-trigger { margin-left: 8px; vertical-align: middle; width: 28px; height: 28px; padding: 4px; }
.seat-assignment-actions { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; flex-shrink: 0; }
.seat-element-title .seat-assignment-actions { margin-left: 8px; }
.seat-element-title .seat-assignment-actions .seat-element-trigger { margin-left: 0; }
/* The approved hall groups are not restyled. Standing sectors stay on the
   right on wide dashboard views, including while a sidebar draft is active. */
.dashboard-layout .seatmap-workspace.is-dashboard-assignment { grid-template-columns: minmax(0, 1fr) 250px; }
@media (max-width: 1280px) {
  .dashboard-layout.is-bookings-visible { grid-template-columns: 264px minmax(0, 1fr); }
  .dashboard-layout.is-bookings-visible .seatmap-workspace,
  .dashboard-layout.is-bookings-visible .seatmap-workspace.is-dashboard-assignment { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .dashboard-layout.is-bookings-visible { grid-template-columns: minmax(0, 1fr); }
  .dashboard-bookings-sidebar { position: static; max-height: 420px; }
}
@media (max-width: 780px) {
  .dashboard-layout .seatmap-workspace.is-dashboard-assignment { grid-template-columns: minmax(0, 1fr); }
}
.seatmap-grid { display: grid; gap: 12px; }
.seatmap-empty { display: grid; gap: 8px; padding: 24px; border: 1px dashed rgb(148 163 184 / 0.45); border-radius: 18px; background: rgb(248 250 252 / 0.7); color: var(--muted-dark); }
.seatmap-empty strong { color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
.area-card { display: grid; gap: 14px; padding: 14px 16px; border: 1px solid rgb(203 213 225 / 0.8); border-radius: 10px; background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.92)); }
.area-card-selectable { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.area-card-selectable:hover, .area-card-selectable:focus-visible { border-color: #3182ce; outline: 3px solid rgb(49 130 206 / 0.35); outline-offset: 1px; }
.area-card-selectable:disabled { cursor: not-allowed; opacity: 0.7; }
.area-card-selectable .area-card-header > span:first-child { display: grid; gap: 4px; }
.area-card-selectable strong { color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; }
.area-card-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.area-card h4 { margin: 0; color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; }
.area-meta { margin: 4px 0 0; color: var(--muted-dark); font-size: 0.8rem; }
.area-badges, .standing-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.area-badge { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 999px; background: rgb(219 234 254 / 0.8); color: var(--text-dark); font-size: 0.76rem; font-weight: 700; }
.area-badge.is-vip { background: rgb(139 92 246 / 0.12); color: #6d28d9; }
.area-badge.status-free { background: rgb(219 234 254 / 0.9); }
.area-badge.status-occupied { background: rgb(15 23 42 / 0.92); color: white; }
.area-badge.status-reserved { background: rgb(246 200 95 / 0.26); color: #92400e; }
.seat-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.seat-element-list { display: grid; gap: 16px; min-width: 0; }
.seat-element { display: grid; gap: 8px; min-width: 0; padding-left: 12px; border-left: 2px solid rgb(148 163 184 / 0.4); }
.seat-element-title { margin: 0; color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 700; overflow-wrap: anywhere; }
.seat-element .seat-pill { min-width: 68px; max-width: 100%; height: auto; min-height: 30px; overflow-wrap: anywhere; }
.seat-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; text-align: center; font-size: 0.85rem; font-weight: 700; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); }
.seat-pill:disabled { cursor: default; opacity: 1; }
.seat-pill.is-free { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: rgb(22 163 74 / 0.9); color: white; }
.seat-pill.is-occupied,
.seat-pill.is-reserved { background: linear-gradient(180deg, #f59e0b, #d97706); border-color: rgb(180 83 9 / 0.9); color: white; }
.seat-pill.is-selected-booking,
.seat-pill.is-selected-booking:hover,
.seat-pill.is-selected-booking:focus-visible { background: linear-gradient(180deg, #ef4444, #dc2626); border-color: rgb(185 28 28 / 0.9); color: white; }
.seat-pill[data-vip='true'] { border: 2px solid #8b5cf6; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }
.area-empty-copy { margin: 0; color: var(--muted-dark); font-size: 0.88rem; }
.standing-sidebar { display: grid; gap: 12px; }
.standing-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgb(203 213 225 / 0.82); border-radius: 10px; background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.94)); }
.area-card-vip, .standing-card-vip { border-color: rgb(202 138 4 / 0.58); background: linear-gradient(180deg, rgb(255 251 235 / 0.98), rgb(254 249 195 / 0.82)); }
.standing-card strong { color: var(--text-dark); font-size: 0.94rem; font-family: 'DM Sans', sans-serif; }
.standing-card-meta { color: var(--muted-dark); font-size: 0.8rem; }
.standing-card-empty span { color: var(--muted-dark); font-size: 0.84rem; line-height: 1.5; }
.standing-progress { height: 9px; border-radius: 999px; background: rgb(226 232 240 / 0.92); overflow: hidden; }
.standing-progress-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f172a, #475569); }

.master-data-panel { display: grid; gap: 18px; padding: 18px 18px 22px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 18px; background: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.8)); box-shadow: 0 12px 34px rgb(15 23 42 / 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.master-data-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.master-data-toolbar h2 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; }
.master-data-lead { margin: 10px 0 0; max-width: 72ch; color: var(--muted-dark); line-height: 1.5; }
.master-data-toolbar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.toggle-field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-dark); font-size: 0.85rem; font-weight: 600; }
.toggle-field input { inline-size: 16px; block-size: 16px; }
.master-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.master-card { display: grid; gap: 14px; padding: 16px; border: 1px solid rgb(203 213 225 / 0.8); border-radius: 14px; background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.96)); box-shadow: 0 10px 24px rgb(15 23 42 / 0.06); }
.master-card-vip { border-color: rgb(250 204 21 / 0.48); background: linear-gradient(180deg, rgb(255 251 235 / 0.98), rgb(254 249 195 / 0.82)); }
.master-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.master-card-kicker { margin: 0 0 8px; color: var(--blue-strong); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.master-card h3 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
.master-card-meta, .master-card-note { margin: 8px 0 0; color: var(--muted-dark); font-size: 0.85rem; line-height: 1.5; }
.master-card-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.master-card-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.master-card-footer > .master-card-note { flex-basis: 100%; }
.master-card-footer .plan-card-actions { margin: 0; flex-shrink: 0; }
.master-card-statistics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; padding: 10px 12px; border: 1px solid rgb(203 213 225 / 0.72); border-radius: 8px; color: var(--text-dark); }
.master-card-stat-item { min-width: 0; font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; }
.master-stats-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.master-stat-chip { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: rgb(226 232 240 / 0.9); color: var(--text-dark); font-size: 0.76rem; font-weight: 700; }
.master-tabs { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 0 6px; }
.master-tabs label { display: inline-flex; gap: 8px; align-items: center; color: var(--muted-dark); font-size: 0.88rem; font-weight: 700; }
.master-list-panel { display: grid; gap: 10px; }
.package-catalog-overview { color: #000; }
.master-list-item, .master-seat-row, .master-seat-summary-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid rgb(203 213 225 / 0.76); border-radius: 12px; background: rgb(255 255 255 / 0.92); }
.master-list-item strong, .master-seat-row strong, .master-seat-summary-row strong { display: block; color: var(--text-dark); }
.master-list-item span, .master-seat-row span, .master-seat-summary-row span { color: var(--muted-dark); font-size: 0.84rem; }
.master-seat-summary-list { display: grid; gap: 10px; }
.master-seat-summary-row-vip { background: rgb(254 249 195 / 0.72); border-color: rgb(250 204 21 / 0.45); }
.master-seat-summary-meta { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.master-seat-summary-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.master-seat-summary-count { min-width: 78px; text-align: right; font-weight: 700; color: var(--text-dark); }
.master-seat-summary-row span:nth-of-type(2) { text-align: right; min-width: 88px; }
.master-seat-row-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.button-danger { color: rgb(153 27 27); }
.master-empty-state { margin: 0; padding: 24px; border: 1px dashed rgb(148 163 184 / 0.45); border-radius: 14px; background: rgb(248 250 252 / 0.7); color: var(--muted-dark); }
.master-dialog { width: min(960px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 20px; padding: 0; background: rgb(255 255 255 / 0.96); box-shadow: 0 30px 60px rgb(15 23 42 / 0.28); }
.master-dialog::backdrop { background: rgb(15 23 42 / 0.58); backdrop-filter: blur(3px); }
.master-dialog .feedback-error { color: #7c2d12; background: rgb(245 158 11 / 0.12); }
.package-management-dialog .feedback:empty { display: none; }
.master-dialog-form { display: grid; gap: 16px; padding: 22px; }
.master-dialog-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.master-dialog-header h3 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; }
.dialog-close-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgb(203 213 225 / 0.85); border-radius: 999px; background: white; color: var(--text-dark); font-size: 1.4rem; line-height: 1; }
.dialog-close-button:hover, .dialog-close-button:focus-visible { background: rgb(248 250 252); outline: 3px solid rgb(99 179 237 / 0.72); outline-offset: 1px; }
.master-dialog-body { display: grid; gap: 14px; }
.master-dialog-footer { display: flex; justify-content: flex-end; }
.hall-plans-dialog, .hall-plan-preview { padding: 22px; color: var(--text-dark); }
.hall-plans-dialog > .master-dialog-body { margin-top: 18px; }
.hall-plan-list, .hall-plan-editor { display: grid; gap: 14px; }
.hall-plan-editor { border-top: 1px solid var(--line); padding-top: 16px; }
.hall-plan-editor label { display: grid; gap: 6px; }
.hall-plan-editor label.toggle-field { display: flex; }
.hall-plan-editor input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
.hall-plan-editor h4, .hall-plan-row p { margin: 0; }
.hall-plan-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.hall-plan-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.hall-plan-actions { display: flex; gap: 8px; }
.plan-card-actions { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; }
.hall-plans-dialog .module-feedback:empty { display: none; }
.hall-plans-dialog .is-error, .hall-plan-preview .is-error { color: #9f1239; }
.hall-plan-preview { width: min(1200px, calc(100vw - 32px)); }
.hall-plan-preview-body { margin-top: 14px; }
.hall-plan-preview-body img { display: block; max-width: 100%; max-height: 75vh; margin: auto; }
.hall-plan-preview-body iframe { display: block; border: 0; width: 100%; height: 75vh; }
.master-form-field { display: grid; gap: 6px; color: var(--muted-dark); font-size: 0.82rem; font-weight: 700; }
.master-form-field input,
.master-form-field select,
.master-form-field textarea { width: 100%; padding: 10px 12px; border: 1px solid rgb(203 213 225 / 0.85); border-radius: 10px; background: white; color: var(--text-dark); }
.master-form-field input:disabled,
.master-form-field select:disabled,
.master-form-field textarea:disabled { background: rgb(241 245 249 / 0.95); color: rgb(100 116 139); border-color: rgb(203 213 225 / 0.95); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6); cursor: not-allowed; }
.master-form-field input:focus-visible,
.master-form-field select:focus-visible,
.master-form-field textarea:focus-visible { outline: 3px solid rgb(99 179 237 / 0.72); outline-offset: 1px; }
.master-inline-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid rgb(203 213 225 / 0.7); border-radius: 12px; background: rgb(248 250 252 / 0.84); }
.master-form-hint { margin: 0; color: var(--muted-dark); font-size: 0.84rem; line-height: 1.5; }
.master-dialog-tools { display: flex; gap: 10px; flex-wrap: wrap; }

.tenants-panel { display: grid; gap: 18px; }
.tenants-toolbar { align-items: center; }
.tenants-toolbar .eyebrow { margin-bottom: 6px; }
.tenants-heading { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; }
.tenants-lead { margin: 8px 0 0; color: var(--muted-dark); }
.tenants-filters { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 14px; align-items: end; padding: 14px 0; border-block: 1px solid rgb(203 213 225 / 0.68); }
.tenants-search { display: grid; gap: 6px; color: var(--muted-dark); font-size: 0.82rem; font-weight: 700; }
.tenants-search input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid rgb(203 213 225 / 0.85); border-radius: 8px; background: white; color: var(--text-dark); }
.tenants-search input:focus-visible { outline: 3px solid rgb(99 179 237 / 0.72); outline-offset: 1px; }
.tenants-list { display: grid; gap: 10px; }
.tenant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 14px 16px; border: 1px solid rgb(203 213 225 / 0.76); border-radius: 8px; background: rgb(255 255 255 / 0.94); }
.tenant-row.is-inactive { background: rgb(241 245 249 / 0.88); }
.tenant-row-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.tenant-row-heading h3 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1rem; overflow-wrap: anywhere; }
.tenant-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgb(139 92 246 / 0.12); color: #6d28d9; font-size: 0.74rem; font-weight: 700; }
.tenant-badge.is-inactive { background: rgb(226 232 240 / 0.9); color: #475569; }
.tenant-updated { margin: 6px 0 0; color: var(--muted-dark); font-size: 0.8rem; }
.tenant-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tenants-dialog { width: min(640px, calc(100vw - 32px)); }
.tenants-dialog .master-dialog-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tenants-dialog .tenants-notes-field { grid-column: 1 / -1; }
.tenants-feedback { margin: 0; }
.tenants-loading { padding: 20px 0; color: var(--muted-dark); }
.tenants-empty { margin: 0; padding: 22px; border: 1px dashed rgb(148 163 184 / 0.45); border-radius: 8px; color: var(--muted-dark); }
.bookings-panel { display: grid; gap: 18px; }
.bookings-toolbar .eyebrow { margin-bottom: 6px; }
.bookings-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 14px; padding: 14px 0; border-block: 1px solid rgb(203 213 225 / 0.68); }
.bookings-filters select, .bookings-filters input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid rgb(203 213 225 / 0.85); border-radius: 8px; background: white; color: var(--text-dark); }
.bookings-list { min-width: 0; }
.bookings-table { display: grid; }
.booking-row { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1fr) minmax(220px, 1.2fr) minmax(100px, 0.5fr) auto; gap: 12px; align-items: center; padding: 14px 12px; border-bottom: 1px solid rgb(203 213 225 / 0.72); color: var(--text-dark); }
.booking-row > div { min-width: 0; display: grid; gap: 4px; }
.booking-row > .booking-row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.booking-row strong { overflow-wrap: anywhere; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; }
.booking-row span { color: var(--muted-dark); font-size: 0.82rem; line-height: 1.4; }
.booking-package-summary { overflow-wrap: anywhere; }
.booking-table-header { color: var(--muted-dark); font-size: 0.72rem; font-weight: 700; }
.booking-table-header span { color: inherit; }
.booking-status { width: fit-content; padding: 5px 9px; border-radius: 6px; background: rgb(219 234 254 / 0.9); color: #1e3a8a !important; font-weight: 700; }
.booking-dialog-form .master-dialog-header h2 { margin: 0; color: var(--text-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; }
.booking-dialog-form .master-dialog-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-placement-note, .booking-edit-context { margin: 0; padding: 10px 12px; border-left: 3px solid var(--blue-strong); background: rgb(219 234 254 / 0.58); color: #1e3a8a; font-size: 0.86rem; line-height: 1.45; }
.booking-notes-field { grid-column: 1 / -1; }
.booking-notes-field textarea { resize: vertical; }
.bookings-filters :focus-visible, .booking-dialog-form :focus-visible { outline: 3px solid rgb(99 179 237 / 0.78); outline-offset: 2px; }

@media (max-width: 1200px) {
  .topbar { gap: 8px; padding: 16px 24px; }
  .header-context-field { flex-basis: 110px; }
}

@media (max-width: 920px) {
  .header-context-field { font-size: 0.66rem; }
  .header-context-field select { padding: 7px 9px; font-size: 0.85rem; }
  .booking-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.5fr) auto; }
}

@media (max-width: 780px) {
  .workspace, .workspace.is-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 31; inset: 0 auto 0 0; width: min(280px, calc(100vw - 48px)); height: 100vh; height: 100dvh; padding: 18px; transform: translateX(0); transition: transform 220ms ease, visibility 220ms ease; }
  .workspace.is-sidebar-collapsed .sidebar { width: min(280px, calc(100vw - 48px)); padding: 18px; border-right: 1px solid var(--line); opacity: 1; transform: translateX(-100%); }
  .sidebar-toggle { z-index: 33; left: min(244px, calc(100vw - 48px)); }
  .workspace.is-sidebar-collapsed .sidebar-toggle { left: 12px; }
  .sidebar-backdrop { position: fixed; z-index: 30; inset: 0; display: block; border: 0; background: rgb(7 12 20 / 0.58); }
  .workspace.is-sidebar-collapsed .sidebar-backdrop { display: none; }
  .brand-lockup { padding-bottom: 20px; }.main-nav { grid-template-columns: repeat(2, 1fr); }.sidebar-footer { display: none; }
  .topbar { padding: 14px 20px; }
  .content-area { padding: 20px 24px 24px; }
  .seatmap-workspace { grid-template-columns: 1fr; }
  .seatmap-panel-header { flex-direction: column; }
  .login-copy-grid { grid-template-columns: 1fr; }
  .master-data-toolbar, .master-card-head, .master-list-item, .master-seat-row, .master-seat-summary-row { flex-direction: column; align-items: stretch; }
  .master-card-actions, .master-dialog-tools, .master-data-toolbar-actions { justify-content: flex-start; }
  .master-seat-summary-meta { justify-content: flex-start; }
  .tenants-toolbar { align-items: stretch; }
  .bookings-toolbar { align-items: stretch; }
  .bookings-filters { grid-template-columns: 1fr; }
  .booking-row { grid-template-columns: 1fr; align-items: start; }
  .booking-table-header { display: none; }
  .booking-dialog-form .master-dialog-body { grid-template-columns: 1fr; }
  .booking-notes-field { grid-column: auto; }
  .tenants-filters { grid-template-columns: 1fr; align-items: start; }
  .tenant-row { grid-template-columns: 1fr; }
  .tenant-actions { justify-content: flex-start; }
  .tenants-dialog .master-dialog-body { grid-template-columns: 1fr; }
  .tenants-dialog .tenants-notes-field { grid-column: auto; }
  .master-seat-summary-count { text-align: left; min-width: 0; }
  .master-seat-summary-row span:nth-of-type(2) { text-align: left; min-width: 0; }
}
@media (max-width: 480px) {
  .login-view { padding: 16px; }.login-panel { padding: 28px 20px; }.login-brand { align-items: flex-start; flex-direction: column; }.main-nav { grid-template-columns: 1fr; }
}

.sidebar-toggle svg, .dialog-close-button svg { display: block; width: 20px; height: 20px; }

/* Shared dense package controls; retain the existing neutral material surfaces. */
.package-editor { grid-column: 1 / -1; min-width: 0; padding-block: 16px; border-top: 1px solid rgb(203 213 225 / 0.72); }
.package-editor h3 { margin: 0 0 8px; }
.package-editor > p { font-size: 0.86rem; color: var(--muted-dark); }
.package-memberships { display: grid; gap: 16px; min-width: 0; }
.package-membership { padding: 16px; border: 1px solid rgb(203 213 225 / 0.72); border-radius: 8px; background: white; overflow-wrap: anywhere; }
.package-membership p { margin: 8px 0; }
.package-choice { display: flex; gap: 8px; align-items: center; }
.package-choice input { flex: none; width: auto; }
.package-membership .master-form-field { margin-top: 8px; max-width: 240px; }
.package-features { margin: 8px 0 0; padding-left: 24px; font-size: 0.86rem; color: var(--muted-dark); }
.package-editor :focus-visible { outline: 3px solid var(--blue-strong); outline-offset: 2px; }
.booking-row > .booking-row-actions { flex-wrap: wrap; max-width: 224px; }
.settings-list { display: grid; gap: 12px; margin-top: 16px; }
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--border, #cbd5e1); border-radius: 12px; background: white; color: var(--text-dark); }
.settings-row strong, .settings-row p { overflow-wrap: anywhere; }
.settings-row p { margin: 6px 0; white-space: pre-wrap; }
.settings-row[draggable="true"] { cursor: grab; }
.settings-row label, .settings-dialog label { display: grid; gap: 6px; }
.settings-row input, .settings-dialog input:not([type="checkbox"]), .settings-dialog select, .settings-dialog textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; color: var(--text-dark); background: white; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.settings-inactive { display: flex; gap: 8px; align-items: center; }
.settings-dialog { max-width: 540px; }
.settings-dialog .master-form { display: grid; gap: 16px; }
.settings-dialog .master-dialog-header h2 { margin: 0; font-size: 1.2rem; }
.settings-dialog textarea { min-height: 100px; resize: vertical; }
.settings-dialog label:has(input[type="checkbox"]) { display: flex; gap: 8px; align-items: center; }
@media (max-width: 650px) {
  .settings-row { grid-template-columns: minmax(0, 1fr) 100px; }
  .settings-actions { grid-column: 1 / -1; }
}