/**
 * Shared across every Event Seating admin screen that isn't the Chart
 * Builder canvas (which has its own scoped dark theme in builder.css).
 * One shared localStorage key ('seatt_admin_dark') means toggling dark
 * mode on any Event Seating page keeps it dark on the others too.
 */

.esm-dark-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	font-size: 13px;
	color: #444;
}
.esm-dark-toggle-btn:hover { background: #f3f3f3; }
.esm-dark-toggle-btn svg { flex: 0 0 auto; }

.esm-shared-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.esm-shared-header h1 { margin: 0; }

/* The wrap itself no longer needs its own boxed background — the <body>
   class below now darkens the whole wp-admin content area behind it, so
   this blends seamlessly instead of floating as a dark card on a light
   page (which is what "not thorough" looked like). */
.esm-shared-dark {
	color: #e4e4e8;
}
.esm-shared-dark h1,
.esm-shared-dark h2,
.esm-shared-dark h3 { color: #f2f2f5; }
.esm-shared-dark p { color: #c7c7cf; }
.esm-shared-dark a { color: #6cb4f0; }

.esm-shared-dark .esm-dark-toggle-btn {
	background: #2c2c34;
	color: #f5d949;
	border-color: #3a3a42;
}
.esm-shared-dark .esm-dark-toggle-btn:hover { background: #35353f; }

/* Darkens the actual page chrome behind our content — WordPress's own
   content wrapper elements — so the whole screen goes dark, not just
   our own markup floating on the default light background. */
body.esm-admin-dark-active #wpcontent,
body.esm-admin-dark-active #wpbody,
body.esm-admin-dark-active #wpbody-content,
body.esm-admin-dark-active .wrap {
	background: #1e1e24;
}
body.esm-admin-dark-active #wpcontent { min-height: 100vh; }

/* Instant-paint version of the block above, keyed off the <html> class
   the inline preload script in admin_head adds SYNCHRONOUSLY before the
   page has rendered anything — see SEATT_Admin::preload_dark_mode(). Just
   the background colors, not the full dark theme (text/borders/etc. —
   those still come from the body.esm-admin-dark-active rules above,
   moments later via JS): the goal here is only killing the white flash
   on first paint, not duplicating the whole stylesheet. */
html.esm-dark-preload,
html.esm-dark-preload body,
html.esm-dark-preload #wpcontent,
html.esm-dark-preload #wpbody,
html.esm-dark-preload #wpbody-content,
html.esm-dark-preload .wrap {
	background: #1e1e24;
	/* Without this, the DARK background above painted instantly, but
	   ordinary text (the page's own <h1>, <label>, <p> — anything not
	   specifically listed in the more targeted rules below) kept
	   whatever dark, light-mode-appropriate color WordPress admin
	   normally gives it, since only a handful of specific selectors
	   (.esm-summary-card etc.) got an explicit light `color` override.
	   Barely noticeable before, when the Chart Builder canvas/toolbar
	   always rendered immediately below and visually dominated the
	   screen — but once THIS page could show nothing BUT a bare title
	   and an event-picker dropdown (see render_builder_page()'s new
	   "select an event first" state), it was dark text on a dark
	   background with nothing else on screen to distract from it. */
	color: #e4e4e8;
}
/* WordPress core's own admin CSS styles a .wrap page's <h1> with its
   own explicit color (needed for normal light-mode admin screens) —
   that rule's selector is just as, or more, specific than the general
   one right above, so it kept winning and left the title dark-on-dark
   even with that fix in place. Targeting the h1 directly, with
   !important, is what actually guarantees this wins regardless of
   WordPress core's own CSS load order or specificity — confirmed by
   reproducing the exact conflict (a real .wrap h1 rule alongside this
   one) and checking the h1's actual COMPUTED color before shipping,
   not just assuming the general rule would cascade down to it. */
html.esm-dark-preload .wrap h1 {
	color: #e4e4e8 !important;
}
/* The wrap-level rule above only paints the page's outer/background
   area — without this, the actual content boxes (summary cards, the
   bookings table, the confirmation/payment-settings cards) stayed
   white for the extra moment it took the FULL JS-driven dark styling
   to catch up, which read as an inconsistent half-dark/half-light
   flash — arguably more jarring than the original single light flash
   this preload was built to prevent. Same values as the real
   .esm-shared-dark rules further down, just triggered instantly. */
html.esm-dark-preload .esm-summary-card,
html.esm-dark-preload .esm-bookings-table,
html.esm-dark-preload .postbox,
html.esm-dark-preload .form-table,
html.esm-dark-preload .widefat,
html.esm-dark-preload .wp-list-table {
	background: #26262e;
	border-color: #38383f;
	color: #e4e4e8;
}
html.esm-dark-preload .wp-list-table thead th,
html.esm-dark-preload .wp-list-table tfoot th { background: #2a2a33; }
html.esm-dark-preload .wp-list-table tbody tr:nth-child(odd) { background: #29292f; }
html.esm-dark-preload input,
html.esm-dark-preload select,
html.esm-dark-preload textarea {
	background: #2a2a33 !important;
	border-color: #46464f !important;
	color: #e4e4e8 !important;
}
/* Extra-specific + !important belt-and-suspenders on top of the rule
   above, the same way the earlier h1 fix needed to be — a computed-
   style check in a real render (not just reading the CSS) already
   confirmed this rule alone produces the right color, but WordPress
   core or a theme's own form-field styling is exactly the kind of
   thing that can still differ between environments in ways a local
   reproduction can't fully rule out, so this makes doubly sure. */
html.esm-dark-preload .esm-event-switcher select {
	background: #2a2a33 !important;
	color: #e4e4e8 !important;
}

/* Generic coverage for native WordPress screens (Events list/edit) where
   we don't control the markup ourselves — targets WP's own list table,
   postboxes, and form fields broadly rather than our own component
   classes. */
body.esm-admin-dark-active h1,
body.esm-admin-dark-active h2,
body.esm-admin-dark-active h3,
body.esm-admin-dark-active .subsubsub li,
body.esm-admin-dark-active label,
body.esm-admin-dark-active p { color: #e4e4e8; }
body.esm-admin-dark-active a { color: #6cb4f0; }
body.esm-admin-dark-active .subsubsub a.current { color: #f2f2f5; }

body.esm-admin-dark-active .wp-list-table,
body.esm-admin-dark-active .wp-list-table th,
body.esm-admin-dark-active .wp-list-table td {
	background: #26262e;
	color: #e4e4e8;
	border-color: #38383f;
}
body.esm-admin-dark-active .wp-list-table thead th { color: #b7b7c0; }
body.esm-admin-dark-active .wp-list-table tbody tr:hover { background: #2d2d36; }
body.esm-admin-dark-active .wp-list-table .row-title { color: #6cb4f0; }

body.esm-admin-dark-active select,
body.esm-admin-dark-active input[type="text"],
body.esm-admin-dark-active input[type="search"],
body.esm-admin-dark-active input[type="date"],
body.esm-admin-dark-active input[type="number"],
body.esm-admin-dark-active input[type="email"],
body.esm-admin-dark-active input[type="tel"],
body.esm-admin-dark-active textarea {
	background: #2a2a33;
	color: #e4e4e8;
	border-color: #46464f;
}

body.esm-admin-dark-active .postbox,
body.esm-admin-dark-active #titlediv #title {
	background: #26262e;
	color: #e4e4e8;
	border-color: #38383f;
}
body.esm-admin-dark-active .postbox .hndle,
body.esm-admin-dark-active .postbox .postbox-header { background: #2a2a33; color: #f2f2f5; border-color: #38383f; }
body.esm-admin-dark-active .esm-price-grid div { background: #2a2a33; border-color: #46464f; }
body.esm-admin-dark-active #seatt_currency,
body.esm-admin-dark-active #seatt_booking_type,
body.esm-admin-dark-active #seatt_event_date {
	background: #2a2a33 !important;
	color: #f2f2f5 !important;
	border-color: #46464f !important;
}
body.esm-admin-dark-active .esm-price-cat-label,
body.esm-admin-dark-active .esm-booking-type-note,
body.esm-admin-dark-active .esm-payment-note { color: #b7b7c0; }

/* Gutenberg's own chrome (title field, top toolbar) lives OUTSIDE the
   iframe the post content canvas renders in, so — unlike that iframed
   canvas — it's reachable from here. Class names below are WordPress's
   own (stable across recent 5.9–6.x releases), targeted broadly since
   we don't control this markup the way we do our own plugin pages. */
body.esm-admin-dark-active .interface-interface-skeleton__header,
body.esm-admin-dark-active .interface-interface-skeleton__body,
body.esm-admin-dark-active .interface-interface-skeleton__content,
body.esm-admin-dark-active .interface-interface-skeleton__sidebar,
body.esm-admin-dark-active .edit-post-header,
body.esm-admin-dark-active .editor-header,
body.esm-admin-dark-active .edit-post-visual-editor,
body.esm-admin-dark-active .editor-styles-wrapper,
body.esm-admin-dark-active .editor-post-title,
body.esm-admin-dark-active .block-editor-writing-flow {
	background: #1e1e24;
	color: #e4e4e8;
}
body.esm-admin-dark-active .editor-post-title__input {
	background: #1e1e24;
	color: #f2f2f5;
}
body.esm-admin-dark-active .edit-post-header,
body.esm-admin-dark-active .editor-header {
	border-color: #38383f;
}
body.esm-admin-dark-active .components-button:not(.is-primary) {
	color: #e4e4e8;
}

/* The right-hand "Document" sidebar (Status, Publish, Slug, Template…)
   and the "Meta Boxes" collapsible bar above our own Event Settings box
   stayed stubbornly white — the outer sidebar container above WAS
   getting a dark background, but WP core CSS sets an explicit white
   background further inside it (on the actual panel/row elements) at
   higher specificity, which quietly won. Broader selectors + !important
   here specifically to overcome that, since we don't control this
   markup and can't just raise our own selector's specificity to match. */
body.esm-admin-dark-active .interface-interface-skeleton__sidebar,
body.esm-admin-dark-active .interface-interface-skeleton__sidebar *,
body.esm-admin-dark-active .components-panel,
body.esm-admin-dark-active .components-panel__body,
body.esm-admin-dark-active .components-panel__header,
body.esm-admin-dark-active .edit-post-post-status,
body.esm-admin-dark-active .edit-post-postbox-header,
body.esm-admin-dark-active .edit-post-meta-boxes-area,
body.esm-admin-dark-active .edit-post-layout__metaboxes {
	background: #1e1e24 !important;
	color: #e4e4e8 !important;
	border-color: #38383f !important;
}
/* ...except form controls inside that sidebar, which the very generic
   `* { color }` above would otherwise wash out to unreadable dark-on-dark
   — give them the same treatment as our own plugin's inputs. */
body.esm-admin-dark-active .interface-interface-skeleton__sidebar input,
body.esm-admin-dark-active .interface-interface-skeleton__sidebar select,
body.esm-admin-dark-active .interface-interface-skeleton__sidebar textarea {
	background: #2a2a33 !important;
	border-color: #46464f !important;
}
body.esm-admin-dark-active .interface-interface-skeleton__sidebar a {
	color: #6cb4f0 !important;
}
/* Buttons in that sidebar (e.g. "Move to trash") keep their own
   meaningful colors rather than being forced to the same grey text. */
body.esm-admin-dark-active .interface-interface-skeleton__sidebar .components-button.is-destructive {
	color: #ff8a8a !important;
}
body.esm-admin-dark-active .interface-interface-skeleton__sidebar .components-button.is-primary {
	color: #fff !important;
}

.esm-events-toggle-row { display: flex; justify-content: flex-end; margin: 10px 20px 0 2px; }
.esm-shared-dark table.widefat,
.esm-shared-dark table.widefat th,
.esm-shared-dark table.widefat td {
	background: #26262e;
	color: #e4e4e8;
	border-color: #38383f;
}
.esm-shared-dark table.widefat th { color: #b7b7c0; }
.esm-shared-dark table.widefat tbody tr:hover td { background: #2d2d36; }

.esm-shared-dark code {
	background: #303038;
	color: #e4e4e8;
}

/* Payment Settings uses plain WP form-table markup rather than the
   card-based layout Bookings/Confirmation use, so it needs its own
   coverage here — nothing above touches a bare .form-table/input pair. */
.esm-shared-dark .form-table th,
.esm-shared-dark .form-table td,
.esm-shared-dark .esm-shared-wrap h2 {
	color: #e4e4e8;
	border-color: #38383f;
}
.esm-shared-dark .form-table input[type="text"],
.esm-shared-dark .form-table input[type="password"],
.esm-shared-dark .form-table select {
	background: #2a2a33;
	border-color: #46464f;
	color: #e4e4e8;
}
.esm-shared-dark .form-table .description { color: #9a9aa4; }

/* Sell Seats uses WordPress's own plain .widefat table class (not the
   plugin's own .esm-bookings-table) — nothing above touches it, so it
   stayed stubbornly white even with everything else on the page dark. */
.esm-shared-dark .widefat {
	background: #26262e;
	color: #e4e4e8;
	border-color: #38383f;
}
.esm-shared-dark .widefat th,
.esm-shared-dark .widefat td {
	border-color: #38383f;
	color: #e4e4e8;
}
.esm-shared-dark .widefat thead th { background: #2a2a33; }
.esm-shared-dark .widefat tbody tr:nth-child(odd) { background: #29292f; }
.esm-shared-dark .widefat code {
	background: #303038;
	color: #e4e4e8;
}

.esm-shared-dark .esm-bookings-filter select,
.esm-shared-dark #esm-bookings-search {
	background: #2a2a33;
	color: #e4e4e8;
	border-color: #46464f;
}
.esm-shared-dark .esm-summary-card {
	background: #26262e;
	border-color: #38383f;
}
.esm-shared-dark .esm-summary-num { color: #f2f2f5; }
.esm-shared-dark .esm-summary-label { color: #9a9aa4; }
.esm-shared-dark .esm-event-group-title { border-bottom-color: #4a9ee0; }
.esm-shared-dark .esm-relative-time { color: #8a8a93; }
.esm-shared-dark .esm-detail-panel {
	background: #26262e;
	border-color: #38383f;
	color: #d4d4da;
}
.esm-shared-dark .esm-detail-panel strong { color: #f2f2f5; }
.esm-shared-dark .esm-detail-seat-list li { color: #d4d4da; }
.esm-shared-dark .esm-no-bookings {
	background: #26262e;
	border-color: #38383f;
	color: #a3a3ac;
}
.esm-shared-dark .esm-expand-toggle {
	background: #2a2a33;
	border-color: #46464f;
	color: #d6d6db;
}
.esm-shared-dark .esm-delete-booking {
	background: #3a2626;
	border-color: #5a3838;
	color: #ff9d9d;
}
.esm-shared-dark .esm-delete-booking:hover { background: #472e2e; }
.esm-shared-dark .esm-view-qr-link {
	background: #1f2e3d;
	border-color: #2c4258;
	color: #6cb4f0;
}
.esm-shared-dark .esm-view-qr-link:hover { background: #263a4d; }
.esm-shared-dark .esm-delete-disabled { color: #55555f; }
.esm-shared-dark .esm-badge-paid { background: #163a24; color: #7bdb9c; }
.esm-shared-dark .esm-badge-pending { background: #3a2e0a; color: #f0c96b; }
.esm-shared-dark .esm-badge-cancelled { background: #333338; color: #b3b3ba; }
.esm-shared-dark .esm-confirmation-page-note { color: #a3a3ac; }
.esm-shared-dark .esm-not-arrived { color: #8a8a93; }
.esm-shared-dark .esm-checked-in-badge { background: #163a24; color: #7bdb9c; }
.esm-shared-dark .esm-scanner-box {
	background: #26262e;
	color: #e4e4e8;
}
.esm-shared-dark .esm-scanner-close { color: #b7b7c0; }
.esm-shared-dark .esm-scanner-status { color: #a3a3ac; }
.esm-shared-dark .esm-portal-notice {
	background: #1f2e3d;
	border-color: #2c4258;
}
.esm-shared-dark .esm-portal-notice code {
	background: #26262e;
	border-color: #2c4258;
	color: #e4e4e8;
}
.esm-shared-dark .esm-portal-notice-sub { color: #9a9aa4; }
.esm-shared-dark .esm-portal-notice a { color: #6cb4f0; }
.esm-shared-dark .esm-checkin-success {
	background: #163a24;
	border-color: #2f8b52;
}
.esm-shared-dark .esm-checkin-success-name { color: #7bdb9c; }
.esm-shared-dark .esm-checkin-seat-list { background: #1a2e22; }
.esm-shared-dark .esm-checkin-seat-row { border-bottom-color: #244a33; }
.esm-shared-dark .esm-checkin-seat-label { color: #7bdb9c; }
.esm-shared-dark .esm-checkin-seat-category { background: #244a33; color: #7bdb9c; }
.esm-shared-dark .esm-checkin-seat-attendee { color: #d6d6db; }
.esm-shared-dark .esm-checkin-success-seats { color: #6ec98e; }
.esm-shared-dark .esm-checkin-success-label { color: #5cad7c; }
.esm-shared-dark .esm-checkin-invalid {
	background: #3a1f1f;
	border-color: #a53a3a;
}
.esm-shared-dark .esm-checkin-invalid-label { color: #ff8a8a; }
.esm-shared-dark .esm-checkin-already {
	background: #3a3319;
	border-color: #a5810f;
}
.esm-shared-dark .esm-checkin-already-name { color: #e8c765; }
.esm-shared-dark .esm-checkin-already-label { color: #cfa53a; }

/* Card-style section headers within the Email settings tab — visually
   separates "Client Order Placed", "Admin Order Placed", etc. from
   each other, similar to how a dedicated card-based settings UI would,
   without needing a full custom layout for what's still just one
   long form-table underneath. */
.esm-email-card-title {
	margin: 28px 0 4px;
	padding-top: 20px;
	border-top: 1px solid #e2e2e2;
	font-size: 15px;
}
.esm-email-card-title:first-of-type { border-top: none; padding-top: 0; }

/* ============================================================
   Phones and small tablets.

   WordPress's own admin is only partly responsive, and none of
   these screens were adapted at all: wide tables simply ran off
   the right edge. That hides whichever column sits last, which
   on the Confirmation and Activity screens is the one people
   opened the page for.

   Rows become cards and each cell carries its column name,
   filled in by labelTableCells() in esm-shared.js from the
   table's own headers.
   ============================================================ */
@media screen and (max-width: 782px) {

	#esm-shared-wrap { padding: 0 4px; }

	/* Event pickers, search boxes and toolbars: one per line and
	   full width, rather than squeezed side by side. */
	.esm-event-switcher,
	.esm-bookings-filter,
	.esm-confirm-filter {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.esm-event-switcher select,
	.esm-bookings-filter select,
	.esm-bookings-filter input[type="search"],
	.esm-confirm-filter input[type="search"],
	#esm-bookings-search,
	#esm-confirm-search {
		width: 100%;
		max-width: none;
		/* Anything under 16px makes iOS zoom the page on focus, which
		   leaves the layout scrolled sideways after every search. */
		font-size: 16px;
	}

	/* Summary cards stack two-up instead of shrinking to nothing. */
	.esm-summary-cards { grid-template-columns: 1fr 1fr; }
	.esm-summary-num { font-size: 22px; }

	/* ---- tables become cards ---- */
	.esm-table-scroll { overflow-x: visible; }

	#esm-shared-wrap table.widefat thead,
	.esm-bookings-table thead { display: none; }

	#esm-shared-wrap table.widefat,
	#esm-shared-wrap table.widefat tbody,
	#esm-shared-wrap table.widefat tr,
	#esm-shared-wrap table.widefat td,
	.esm-bookings-table,
	.esm-bookings-table tbody,
	.esm-bookings-table tr,
	.esm-bookings-table td { display: block; width: 100%; }

	#esm-shared-wrap table.widefat tr,
	.esm-bookings-table tr {
		border: 1px solid #dcdcde;
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 4px 0;
		background: #fff;
	}

	#esm-shared-wrap table.widefat td,
	.esm-bookings-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		text-align: right;
		border-bottom: none;
		padding: 7px 12px;
	}

	#esm-shared-wrap table.widefat td::before,
	.esm-bookings-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: #646970;
	}

	/* Cells with no column name — expand chevrons, delete buttons —
	   have nothing to align against, so let them fill the row. */
	#esm-shared-wrap table.widefat td:not([data-label]),
	.esm-bookings-table td:not([data-label]) { justify-content: flex-end; }
	#esm-shared-wrap table.widefat td:empty,
	.esm-bookings-table td:empty { display: none; }

	/* A detail panel is one wide cell; it keeps its own layout. */
	.esm-bookings-table tr.esm-row-wide td,
	#esm-shared-wrap table.widefat tr.esm-row-wide td {
		display: block;
		text-align: left;
	}
	.esm-bookings-table tr.esm-row-wide td::before,
	#esm-shared-wrap table.widefat tr.esm-row-wide td::before { content: none; }

	/* Charts and canvases must not force the page sideways. */
	#esm-shared-wrap canvas,
	#esm-shared-wrap svg { max-width: 100%; height: auto; }
}

/* Very narrow phones: labels above values reads better than a
   cramped two-column split. */
@media screen and (max-width: 400px) {
	#esm-shared-wrap table.widefat td,
	.esm-bookings-table td {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 2px;
	}
	.esm-summary-cards { grid-template-columns: 1fr; }
}

/* An IPv6 address is 39 characters. Left alone it forces the Activity
   Log's IP column wide enough to squash every other column, so it is
   allowed to wrap mid-address instead. Never shortened: half an address
   tells you nothing in an audit trail. */
.esm-log-ip {
	font-size: 11px;
	line-height: 1.35;
	word-break: break-all;
	display: inline-block;
	max-width: 22ch;
	background: #f0f0f1;
	padding: 2px 5px;
	border-radius: 3px;
}


/* ============================================================
   Tablet (783-1024px).

   WordPress switches its own admin out of mobile layout at 783px,
   but these tables are far wider than core's and still overflow a
   tablet. The cards stay tabular here — there is room for that —
   while the toolbars and summary cards reflow.
   ============================================================ */
@media screen and (min-width: 783px) and (max-width: 1024px) {
	.esm-summary-cards { grid-template-columns: repeat(2, 1fr); }

	/* Wide tables keep a horizontal scroller at this size rather than
	   stacking; a tablet can show most columns, and stacking 500 rows
	   into cards would make the page enormous. */
	.esm-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#esm-shared-wrap table.widefat,
	.esm-bookings-table { min-width: 720px; }

	/* The Display tab's live preview sits beside its controls on a
	   desktop; there is no room for both here. */
	.esm-display-grid { grid-template-columns: 1fr; }

	.esm-bookings-filter,
	.esm-confirm-filter { flex-wrap: wrap; gap: 8px; }
}

/* WordPress admin notices (license reminder, setup offer, errors) keep a
   white background while dark mode turns all text light — which left
   them unreadable (light grey on white) on the Chart Builder. Give them
   a dark surface in dark mode. */
body.esm-admin-dark-active .notice,
.esm-shared-dark .notice,
.esm-builder-scope.esm-dark .notice,
html.esm-dark-preload .notice {
	background: #26262e;
	color: #e6e6ea;
	border-top-color: #3a3a44;
	border-right-color: #3a3a44;
	border-bottom-color: #3a3a44;
	box-shadow: none;
}
body.esm-admin-dark-active .notice p,
.esm-shared-dark .notice p,
.esm-builder-scope.esm-dark .notice p,
html.esm-dark-preload .notice p { color: #e6e6ea; }
body.esm-admin-dark-active .notice a,
.esm-shared-dark .notice a,
.esm-builder-scope.esm-dark .notice a,
html.esm-dark-preload .notice a { color: #6cb4f0; }
body.esm-admin-dark-active .notice .notice-dismiss:before,
.esm-builder-scope.esm-dark .notice .notice-dismiss:before { color: #9a9aa4; }