/*
 * MKBB app layout CSS.
 *
 * Brand-neutral structural styles. All colour/typography values come from CSS custom properties
 * that the child theme's brand.css supplies; defaults below kick in if the theme's brand.css is
 * absent so the SPA always renders something legible.
 */

:root {
	--mkbb-color-bg: #1a1814;
	--mkbb-color-fg: #f5f1e8;
	--mkbb-color-muted: #9a8f7a;
	--mkbb-color-accent: #d97a47;
	--mkbb-color-card: #2a2520;
	--mkbb-color-border: #3a342e;
	--mkbb-color-error: #d94747;
	--mkbb-font-display: Georgia, serif;
	--mkbb-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
	--mkbb-space-1: 0.25rem;
	--mkbb-space-2: 0.5rem;
	--mkbb-space-3: 0.75rem;
	--mkbb-space-4: 1rem;
	--mkbb-space-6: 1.5rem;
	--mkbb-space-8: 2rem;
	--mkbb-radius: 8px;
}

[x-cloak] { display: none !important; }

body.mkbb-page {
	margin: 0;
	padding: 0;
	font-family: var(--mkbb-font-body);
	background: var(--mkbb-color-bg);
	color: var(--mkbb-color-fg);
	min-height: 100vh;
	line-height: 1.5;
}

body.mkbb-page a { color: var(--mkbb-color-accent); }

/* Headings — explicit colour so the active theme's `h1 { color: ... }` rules don't bleed in.
 * !important is justified here: any block theme's theme.json injects a heading colour into
 * the inline `global-styles-inline-css`, and we want our dark canvas to win unconditionally. */
body.mkbb-page h1,
body.mkbb-page h2,
body.mkbb-page h3,
body.mkbb-page h4,
body.mkbb-page h5,
body.mkbb-page h6 {
	color: var(--mkbb-color-fg) !important;
	font-family: var(--mkbb-font-display);
}

/* ============== Login / no-access shell ============== */

.mkbb-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--mkbb-space-4);
}

.mkbb-card {
	background: var(--mkbb-color-card);
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-8);
	max-width: 440px;
	width: 100%;
}

.mkbb-brand__title {
	font-family: var(--mkbb-font-display);
	font-size: 1.75rem;
	margin: 0;
}

.mkbb-brand__tagline {
	color: var(--mkbb-color-muted);
	margin: var(--mkbb-space-2) 0 var(--mkbb-space-6);
}

.mkbb-login-form__heading {
	font-family: var(--mkbb-font-display);
	font-size: 1.25rem;
	margin: 0 0 var(--mkbb-space-4);
}

.mkbb-login-form__intro {
	margin: 0 0 var(--mkbb-space-6);
	color: var(--mkbb-color-fg);
}

.mkbb-login-form__footnote {
	margin: var(--mkbb-space-6) 0 0;
	color: var(--mkbb-color-muted);
	font-size: 0.875rem;
}

.mkbb-error {
	color: var(--mkbb-color-error);
}

.mkbb-notice {
	background: var(--mkbb-color-bg);
	border: 1px solid var(--mkbb-color-border);
	border-left: 4px solid var(--mkbb-color-accent);
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-3) var(--mkbb-space-4);
	margin: 0 0 var(--mkbb-space-4);
}

.mkbb-notice p {
	margin: 0;
}

.mkbb-message h2 {
	font-family: var(--mkbb-font-display);
	margin-top: 0;
}

/* ============== Magic Login form overrides ==============
 *
 * Magic Login's stylesheet enqueues from inside its shortcode handler, so it loads in wp_footer
 * — *after* our app.css. That means we either need higher specificity or !important to beat its
 * baked-in WP-admin-white defaults. We use !important sparingly and only against properties
 * Magic Login hardcodes (background, colour, borders, box-shadow).
 */

/* Magic Login's own stylesheet hard-codes `#magic-login-shortcode { width: 320px; margin: auto }`
 * which leaves the form (and the success/error messages inside it) cramped and centered inside
 * our card. Override to full width so children fill the card properly. */
.mkbb-login-page #magic-login-shortcode,
#magic-login-shortcode {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

#magic-login-shortcode label,
.mkbb-login-page #magic-login-shortcode label {
	display: block;
	color: var(--mkbb-color-muted) !important;
	font-size: 0.875rem;
	margin: 0 0 var(--mkbb-space-2);
}

#magic-login-shortcode input[type="text"],
.mkbb-login-page #magic-login-shortcode input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	background: var(--mkbb-color-bg) !important;
	border: 1px solid var(--mkbb-color-border) !important;
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-3);
	color: var(--mkbb-color-fg) !important;
	font: inherit;
	margin: 0 0 var(--mkbb-space-4);
	box-shadow: none !important;
}

#magic-login-shortcode input[type="text"]:focus {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 1px;
}

#magic-login-shortcode input[type="text"]::placeholder {
	color: var(--mkbb-color-muted);
}

#magic-login-shortcode .magic-login-submit,
#magic-login-shortcode input[type="submit"],
.mkbb-login-page #magic-login-shortcode input[type="submit"] {
	display: inline-block;
	background: var(--mkbb-color-accent) !important;
	color: var(--mkbb-color-fg) !important;
	border: none !important;
	border-radius: var(--mkbb-radius) !important;
	padding: var(--mkbb-space-3) var(--mkbb-space-4) !important;
	font: inherit !important;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
	width: 100%;
	height: auto !important;
}

#magic-login-shortcode .magic-login-submit:hover,
#magic-login-shortcode input[type="submit"]:hover {
	filter: brightness(1.1);
}

/* Magic Login renders WP's default `.message` / `#login_error` boxes inside its form-header.
 * Those default to white. Theme them to fit the card by styling the container and resetting any
 * inline-styled children. */
.mkbb-login-page .magic-login-form-header {
	background: var(--mkbb-color-bg) !important;
	color: var(--mkbb-color-fg) !important;
	border: 1px solid var(--mkbb-color-border) !important;
	border-left: 4px solid var(--mkbb-color-accent) !important;
	border-radius: var(--mkbb-radius) !important;
	padding: var(--mkbb-space-3) var(--mkbb-space-4) !important;
	margin: 0 0 var(--mkbb-space-4) !important;
	box-shadow: none !important;
	font-size: 0.9375rem;
}

/* Magic Login's form-header div is never CSS-`:empty` because the shortcode leaves
 * whitespace inside it. `:not(:has(*))` hides it when there's no child element (which is the
 * case unless an actual error like #login_error is rendered). */
.mkbb-login-page .magic-login-form-header:empty,
.mkbb-login-page .magic-login-form-header:not(:has(*)) {
	display: none !important;
}

.mkbb-login-page .magic-login-form-header * {
	background: transparent !important;
	color: inherit !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.mkbb-login-page .magic-login-form-header #login_error {
	color: var(--mkbb-color-error) !important;
}

/* ============== Buttons ============== */

/* Base button. Single .mkbb-button selector keeps specificity (0,1,0) so modifier classes
 * declared after it can override on simple class selectors. */
.mkbb-button {
	display: inline-block;
	background: var(--mkbb-color-accent);
	color: var(--mkbb-color-fg);
	border: none;
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-3) var(--mkbb-space-4);
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.mkbb-button:hover { filter: brightness(1.1); }
.mkbb-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Secondary buttons (Remove me, Cancel, etc.) — outlined, muted text. */
.mkbb-button--secondary {
	background: transparent;
	border: 1px solid var(--mkbb-color-border);
	color: var(--mkbb-color-muted);
}

.mkbb-button--secondary:hover {
	background: var(--mkbb-color-bg);
	color: var(--mkbb-color-accent);
	border-color: var(--mkbb-color-accent);
	filter: none;
}

/* ============== App shell ============== */

.mkbb-nav {
	display: flex;
	align-items: center;
	gap: var(--mkbb-space-4);
	padding: var(--mkbb-space-3) var(--mkbb-space-6);
	background: var(--mkbb-color-card);
	border-bottom: 1px solid var(--mkbb-color-border);
	position: relative;
}

.mkbb-nav__brand {
	font-family: var(--mkbb-font-display);
	font-size: 1.125rem;
	margin: 0;
	flex: 0 0 auto;
}

/* Desktop nav: inline menu items between brand and the user name on the right. The mobile
 * media query farther down flips this to a popover anchored to the avatar. */
.mkbb-nav__menu {
	list-style: none;
	display: flex;
	flex-direction: row;
	gap: var(--mkbb-space-2);
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.mkbb-nav__item { display: inline-block; }

.mkbb-nav__link {
	display: inline-block;
	color: var(--mkbb-color-muted);
	text-decoration: none;
	padding: var(--mkbb-space-2) var(--mkbb-space-3);
	border-radius: var(--mkbb-radius);
}

.mkbb-nav__link:hover {
	color: var(--mkbb-color-fg);
	background: var(--mkbb-color-bg);
}

/* Avatar in the top-right corner: identity + profile-modal trigger. Explicit padding:0
 * + box-sizing:border-box because a <button>'s UA-default padding would otherwise inflate
 * the box past 36px horizontally and render the circle as an oval. */
.mkbb-nav__avatar {
	display: inline-flex;
	box-sizing: border-box;
	padding: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mkbb-color-accent);
	color: var(--mkbb-color-fg);
	border: none;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: auto;
}

.mkbb-nav__avatar:hover { filter: brightness(1.15); }

.mkbb-nav__avatar:focus-visible {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 2px;
}

.mkbb-main {
	padding: var(--mkbb-space-6);
	max-width: 960px;
	margin: 0 auto;
}

.mkbb-view__header {
	margin-bottom: var(--mkbb-space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mkbb-space-4);
	flex-wrap: wrap;
}

.mkbb-view__header h2 {
	font-family: var(--mkbb-font-display);
	font-size: 1.5rem;
	margin: 0;
}

/* The "Change date" button next to the Schedule heading. Anchors the flatpickr calendar — see
 * `positionElement` in app.js. */
.mkbb-change-date {
	display: inline-flex;
	align-items: center;
	gap: var(--mkbb-space-2);
	background: transparent;
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
	color: var(--mkbb-color-fg);
	padding: var(--mkbb-space-2) var(--mkbb-space-3);
	font: inherit;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.mkbb-change-date:hover {
	color: var(--mkbb-color-accent);
	border-color: var(--mkbb-color-accent);
	background: var(--mkbb-color-bg);
}

.mkbb-change-date:focus-visible {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 2px;
}

.mkbb-change-date svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Prev/next night navigation arrows flanking the Choose Date button. Hidden via x-show when
 * the user is on the first or last night in the window. */
.mkbb-view__header-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--mkbb-space-2);
}

.mkbb-nav-arrow {
	background: transparent;
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
	color: var(--mkbb-color-muted);
	padding: var(--mkbb-space-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.mkbb-nav-arrow:hover {
	color: var(--mkbb-color-accent);
	border-color: var(--mkbb-color-accent);
	background: var(--mkbb-color-bg);
}

.mkbb-nav-arrow:focus-visible {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 2px;
}

.mkbb-nav-arrow:disabled,
.mkbb-nav-arrow:disabled:hover {
	opacity: 0.3;
	color: var(--mkbb-color-muted);
	border-color: var(--mkbb-color-border);
	background: transparent;
	cursor: not-allowed;
}

.mkbb-nav-arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Flatpickr needs a real <input> to bind to, but we don't want the user to see it — the visible
 * date is the <h3> in the card header, and the only trigger is the Change date button. Push it
 * off-screen rather than display:none (which makes flatpickr quietly conjure an alt input back). */
.mkbb-picker-hidden {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ============== Forms ============== */

.mkbb-form {
	display: grid;
	gap: var(--mkbb-space-4);
	max-width: 420px;
}

.mkbb-field {
	display: grid;
	gap: var(--mkbb-space-2);
}

.mkbb-field__label {
	color: var(--mkbb-color-muted);
	font-size: 0.875rem;
}

.mkbb-field__input {
	background: var(--mkbb-color-card);
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-3);
	color: var(--mkbb-color-fg);
	font: inherit;
}

/* Selects: kill the OS-native dropdown chevron (varies wildly across browsers/themes) and
 * paint our own muted-tone SVG caret so it matches the input border. */
select.mkbb-field__input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b89a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--mkbb-space-3) center;
	background-size: 14px 14px;
	padding-right: var(--mkbb-space-8);
}

.mkbb-field__input:focus {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 1px;
}

.mkbb-form__message {
	color: var(--mkbb-color-muted);
	margin: 0;
}

.mkbb-form__message.is-error { color: var(--mkbb-color-error); }

.mkbb-divider {
	border: 0;
	border-top: 1px solid var(--mkbb-color-border);
	margin: var(--mkbb-space-8) 0;
}

.mkbb-placeholder {
	color: var(--mkbb-color-muted);
	font-style: italic;
}

/* ============== Slot action buttons ============== */

.mkbb-slot__actions {
	display: flex;
	gap: var(--mkbb-space-2);
	flex-wrap: wrap;
	justify-content: flex-end;
	flex-shrink: 0;
}

.mkbb-slot__own-actions {
	display: inline-flex;
	gap: var(--mkbb-space-2);
	flex-wrap: wrap;
}

.mkbb-button--small {
	padding: var(--mkbb-space-1) var(--mkbb-space-3);
	font-size: 0.875rem;
}

/* ============== Modal ============== */

.mkbb-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mkbb-space-4);
}

.mkbb-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
}

.mkbb-modal__panel {
	position: relative;
	background: var(--mkbb-color-card);
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-6);
	max-width: 32rem;
	width: 100%;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Flex layout so the modal header can host a secondary action (e.g. Sign out on the
 * profile modal) to the right of the title. Modals with only an <h3> render identically
 * because the h3 grows to fill on its own. */
.mkbb-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mkbb-space-3);
	margin-bottom: var(--mkbb-space-4);
}

.mkbb-modal__header h3 {
	font-family: var(--mkbb-font-display);
	font-size: 1.25rem;
	margin: 0;
	line-height: 1.25;
	overflow-wrap: anywhere;
	flex: 1 1 auto;
	min-width: 0;
}

.mkbb-modal__body {
	margin-bottom: var(--mkbb-space-6);
	display: grid;
	gap: var(--mkbb-space-4);
}

.mkbb-modal__detail {
	margin: 0;
	color: var(--mkbb-color-fg);
}

.mkbb-modal__actions {
	display: flex;
	gap: var(--mkbb-space-3);
	justify-content: flex-end;
}

/* Checkboxes are restyled as iOS-style toggle switches — far more touch-friendly on phones,
 * and the on/off state reads at a glance. The native checkbox stays in the DOM (so x-model and
 * form serialisation still work) but is restyled into a track with a thumb via ::before. */
.mkbb-checkbox {
	display: flex;
	align-items: center;
	gap: var(--mkbb-space-3);
	cursor: pointer;
}

.mkbb-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 44px;
	height: 24px;
	background: var(--mkbb-color-border);
	border: none;
	border-radius: 999px;
	position: relative;
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
	transition: background 0.2s ease;
}

.mkbb-checkbox input[type="checkbox"]::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: var(--mkbb-color-fg);
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.mkbb-checkbox input[type="checkbox"]:checked {
	background: var(--mkbb-color-accent);
}

.mkbb-checkbox input[type="checkbox"]:checked::before {
	transform: translateX(20px);
}

.mkbb-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 2px;
}

.mkbb-checkbox input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* The admin users table is dense — keep its checkboxes as native squares rather than wide
 * toggle switches that would force column resizing. */
.mkbb-checkbox--inline {
	justify-content: center;
}

.mkbb-checkbox--inline input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	width: auto;
	height: auto;
	background: initial;
	border-radius: 0;
	flex-shrink: initial;
}

.mkbb-checkbox--inline input[type="checkbox"]::before {
	display: none;
}

/* ============== Admin: ghost button (e.g. Manage on slot rows) ============== */

.mkbb-button--ghost {
	background: transparent;
	border: 1px solid var(--mkbb-color-border);
	color: var(--mkbb-color-muted);
}

.mkbb-button--ghost:hover {
	color: var(--mkbb-color-accent);
	border-color: var(--mkbb-color-accent);
	background: var(--mkbb-color-bg);
	filter: none;
}

/* Destructive variant — outlined in error red, fills on hover. Reserved for actions
 * the user really shouldn't trigger by accident (Remove user, etc.). */
.mkbb-button--danger {
	background: transparent;
	border: 1px solid var(--mkbb-color-error);
	color: var(--mkbb-color-error);
}

.mkbb-button--danger:hover {
	background: var(--mkbb-color-error);
	color: var(--mkbb-color-fg);
	filter: none;
}

/* Night meta — start time / "Canceled" — sits below the title row. */
.mkbb-night__meta {
	color: var(--mkbb-color-muted);
	font-size: 0.875rem;
	margin-top: var(--mkbb-space-1);
}

.mkbb-night-controls-btn {
	background: transparent;
	border: 0;
	padding: var(--mkbb-space-1) var(--mkbb-space-2);
	color: var(--mkbb-color-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mkbb-radius);
	transition: color 0.15s, background-color 0.15s;
}

.mkbb-night-controls-btn:hover {
	color: var(--mkbb-color-accent);
	background: var(--mkbb-color-bg);
}

.mkbb-night-controls-btn:focus-visible {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 2px;
}

.mkbb-night-controls-btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ============== Admin: users table ============== */

.mkbb-users {
	width: 100%;
	border-collapse: collapse;
}

.mkbb-users th,
.mkbb-users td {
	padding: var(--mkbb-space-3);
	border-bottom: 1px solid var(--mkbb-color-border);
	text-align: left;
	vertical-align: middle;
}

.mkbb-users th {
	color: var(--mkbb-color-muted);
	font-weight: 600;
	font-size: 0.875rem;
}

.mkbb-users td {
	color: var(--mkbb-color-fg);
}

.mkbb-users tr.is-inactive td {
	opacity: 0.55;
	font-style: italic;
}

textarea.mkbb-field__input {
	font: inherit;
	min-height: 4.5rem;
	resize: vertical;
}

/* ============== Mobile / small screens ==============
 *
 * Sub-640px (phone-portrait territory) — slot rows stack so the action buttons get a full line,
 * the nav reflows, the night-card header drops to two lines, and the admin table tightens.
 * Sub-420px gets a little extra squeeze on outer padding so content doesn't kiss the edges. */

@media (max-width: 640px) {

	.mkbb-main {
		padding: var(--mkbb-space-4);
	}

	/* Mobile nav: same shape as desktop — brand, the inline menu (admins-only Admin link),
	 * and the avatar. The brand is now short enough ("Max K's Barn") to fit alongside Admin
	 * + avatar even on small phones, so no popover needed. */
	.mkbb-nav {
		padding: var(--mkbb-space-3);
		gap: var(--mkbb-space-2);
	}
	.mkbb-nav__brand {
		font-size: 1rem;
	}
	.mkbb-nav__link {
		padding: var(--mkbb-space-2);
	}

	/* Slot rows stack: summary on one line, action buttons left-aligned on the next. */
	.mkbb-slot {
		flex-wrap: wrap;
	}
	.mkbb-slot__summary {
		flex: 1 1 100%;
	}
	.mkbb-slot__actions {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	.mkbb-view__header h2 {
		font-size: 1.25rem;
	}

	.mkbb-night {
		padding: var(--mkbb-space-4);
	}

	/* Modal: a bit less padding; action buttons go full-width if they can't fit side by side. */
	.mkbb-modal__panel {
		padding: var(--mkbb-space-4);
	}
	.mkbb-modal__actions {
		flex-wrap: wrap;
	}
	.mkbb-modal__actions .mkbb-button {
		flex: 1 1 auto;
		min-width: 8rem;
	}

	/* Admin users table — reflow into cards. The 5-column layout overflows on phones and
	 * was hiding the Remove/Restore button past the right edge. Each row becomes a bordered
	 * card; each cell is a label/value flex row; the action cell sits at the bottom. */
	.mkbb-users thead {
		display: none;
	}

	.mkbb-users tr {
		display: block;
		padding: var(--mkbb-space-3);
		border: 1px solid var(--mkbb-color-border);
		border-radius: var(--mkbb-radius);
		margin-bottom: var(--mkbb-space-3);
		background: var(--mkbb-color-card);
	}

	.mkbb-users td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--mkbb-space-3);
		padding: var(--mkbb-space-2) 0;
		border: none;
		font-size: 0.875rem;
	}

	.mkbb-users td[data-label]::before {
		content: attr(data-label);
		color: var(--mkbb-color-muted);
		font-weight: 600;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		flex: 0 0 auto;
	}

	.mkbb-users__action {
		justify-content: flex-end;
		padding-top: var(--mkbb-space-3);
		margin-top: var(--mkbb-space-1);
		border-top: 1px solid var(--mkbb-color-border);
	}

	.mkbb-form {
		max-width: 100%;
	}
}

@media (max-width: 420px) {

	.mkbb-main {
		padding: var(--mkbb-space-3);
	}

	.mkbb-card {
		padding: var(--mkbb-space-4);
	}

	.mkbb-brand__title {
		font-size: 1.5rem;
	}

	/* Hide the "Choose Date" label on the tightest screens so the icon-only button + arrows fit
	 * comfortably alongside the Schedule heading. */
	.mkbb-change-date span {
		display: none;
	}
	.mkbb-change-date {
		padding: var(--mkbb-space-2);
	}
}

.mkbb-view__intro {
	color: var(--mkbb-color-muted);
	margin: 0;
	max-width: 60ch;
}

.mkbb-section {
	margin-bottom: var(--mkbb-space-6);
}

.mkbb-section h3 {
	font-family: var(--mkbb-font-display);
	font-size: 1.1rem;
	margin: 0 0 var(--mkbb-space-4);
}

/* ============== Schedule ============== */

.mkbb-schedule {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--mkbb-space-4);
}

.mkbb-night {
	background: var(--mkbb-color-card);
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
	padding: var(--mkbb-space-4) var(--mkbb-space-6);
}

.mkbb-night.is-canceled {
	opacity: 0.55;
}

.mkbb-night__header {
	margin-bottom: var(--mkbb-space-4);
}

/* The title and the admin-only cog share a row; meta (start time) sits underneath. */
.mkbb-night__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mkbb-space-3);
}

.mkbb-night__title {
	font-size: 1.1rem;
	margin: 0;
}

.mkbb-night__time {
	color: var(--mkbb-color-muted);
	font-size: 0.875rem;
}

.mkbb-night__time--canceled {
	color: var(--mkbb-color-error);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mkbb-night__cancel {
	color: var(--mkbb-color-muted);
	font-style: italic;
	margin: 0 0 var(--mkbb-space-2);
}

.mkbb-slots {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Slot layout — desktop default: one row, summary on the left and actions on the right.
 * The mobile media query below wraps the row so the summary and actions stack with both
 * staying left-aligned. */
.mkbb-slot {
	display: flex;
	align-items: center;
	gap: var(--mkbb-space-3);
	padding: var(--mkbb-space-3) 0;
	border-top: 1px solid var(--mkbb-color-border);
}

.mkbb-slot:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Role on top, holder (or "Open") on the line below, so the role labels line up at the
 * same x across every slot regardless of holder name length. */
.mkbb-slot__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mkbb-space-1);
	flex: 1 1 auto;
	min-width: 0;
}

.mkbb-slot__role {
	color: var(--mkbb-color-fg);
	font-weight: 600;
}

.mkbb-slot__instrument {
	color: var(--mkbb-color-muted);
	font-size: 0.875rem;
	font-style: italic;
	font-weight: normal;
	margin-left: 0.25rem;
}

.mkbb-slot__holder {
	display: inline-flex;
	align-items: center;
	gap: var(--mkbb-space-2);
	color: var(--mkbb-color-fg);
}

.mkbb-slot__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mkbb-color-accent);
	color: var(--mkbb-color-fg);
	font-weight: 600;
	font-size: 0.75rem;
	flex-shrink: 0;
	overflow: hidden;
}

/* Shared rule for the <img> inside any avatar circle — nav button, slot row, profile
 * modal. Fills the circle, clips to round, and never letterboxes regardless of source
 * aspect ratio (the server already hard-crops to square but cover protects against
 * legacy or full-size fallbacks). */
.mkbb-avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Profile modal: big circular preview on the left, photo actions stacked on the right. */
.mkbb-profile-photo {
	display: flex;
	align-items: center;
	gap: var(--mkbb-space-4);
	margin: var(--mkbb-space-3) 0;
}

.mkbb-profile-photo__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--mkbb-color-accent);
	color: var(--mkbb-color-fg);
	font-weight: 600;
	font-size: 1.75rem;
	flex-shrink: 0;
	overflow: hidden;
}

.mkbb-profile-photo__actions {
	display: flex;
	flex-direction: column;
	gap: var(--mkbb-space-2);
	align-items: flex-start;
}

.mkbb-nav__avatar {
	overflow: hidden;
}

.mkbb-slot__open {
	color: var(--mkbb-color-muted);
	font-style: italic;
}

.mkbb-badge {
	display: inline-block;
	background: var(--mkbb-color-bg);
	border: 1px solid var(--mkbb-color-border);
	border-radius: 999px;
	padding: 0 var(--mkbb-space-2);
	margin-left: var(--mkbb-space-2);
	font-size: 0.75rem;
	color: var(--mkbb-color-muted);
	vertical-align: 0.1em;
}

/* ============== Defaults list ============== */

.mkbb-defaults__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--mkbb-space-2);
}

.mkbb-defaults__item {
	display: flex;
	align-items: center;
	gap: var(--mkbb-space-3);
	padding: var(--mkbb-space-3) var(--mkbb-space-4);
	background: var(--mkbb-color-card);
	border: 1px solid var(--mkbb-color-border);
	border-radius: var(--mkbb-radius);
}

.mkbb-defaults__day {
	font-weight: 600;
	min-width: 5rem;
}

.mkbb-defaults__role {
	flex: 1;
}

.mkbb-defaults__instrument {
	color: var(--mkbb-color-muted);
	font-style: italic;
	margin-right: var(--mkbb-space-3);
}

.mkbb-defaults__remove {
	padding: var(--mkbb-space-1) var(--mkbb-space-3) !important;
	font-size: 0.875rem;
}

/* ============== Night picker ============== */

/* Inline night picker — replaces the static <h3> title in the card header. The flatpickr alt
 * input is styled to look like the heading it stands in for; a calendar-icon button next to it
 * opens the picker explicitly. */
.mkbb-night__picker {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.mkbb-night__picker-input {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--mkbb-color-fg) !important;
	font-family: var(--mkbb-font-display) !important;
	font-size: 1.1rem !important;
	font-weight: bold !important;
	cursor: pointer !important;
	width: auto !important;
	min-width: 11rem;
	box-shadow: none !important;
	outline: none !important;
}

.mkbb-night__picker-input:hover,
.mkbb-night__picker:hover .mkbb-night__picker-input,
.mkbb-night__picker:hover .mkbb-night__picker-icon {
	color: var(--mkbb-color-accent) !important;
}

.mkbb-night__picker-input:focus {
	outline: 2px solid var(--mkbb-color-accent) !important;
	outline-offset: 4px !important;
	border-radius: 4px !important;
}

.mkbb-night__picker-icon {
	background: transparent;
	border: 0;
	padding: 0.25rem 0.375rem;
	color: var(--mkbb-color-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mkbb-radius);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.mkbb-night__picker-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.mkbb-night__picker-icon:hover {
	background: var(--mkbb-color-bg);
}

.mkbb-night__picker-icon:focus-visible {
	outline: 2px solid var(--mkbb-color-accent);
	outline-offset: 2px;
}

/* Flatpickr — re-skin the dark theme to our warm palette. The dark theme ships with purple
 * navigation rails and amber month/weekday accents; we replace both with our card/border
 * neutrals and our brand accent so the calendar looks like part of the app, not a bolted-on
 * widget. */

.flatpickr-calendar {
	background: var(--mkbb-color-card) !important;
	border: 1px solid var(--mkbb-color-border) !important;
	border-radius: var(--mkbb-radius) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
	font-family: var(--mkbb-font-body) !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
	border-bottom-color: var(--mkbb-color-border) !important;
}

.flatpickr-months,
.flatpickr-months .flatpickr-month {
	background: var(--mkbb-color-card) !important;
	color: var(--mkbb-color-fg) !important;
	fill: var(--mkbb-color-fg) !important;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-month {
	background: var(--mkbb-color-card) !important;
	color: var(--mkbb-color-fg) !important;
}

.flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .cur-month:hover {
	background: var(--mkbb-color-bg) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: var(--mkbb-color-muted) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: var(--mkbb-color-muted) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
	color: var(--mkbb-color-muted) !important;
	fill: var(--mkbb-color-muted) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg,
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
	color: var(--mkbb-color-accent) !important;
	fill: var(--mkbb-color-accent) !important;
}

.flatpickr-weekdays,
.flatpickr-weekdaycontainer,
span.flatpickr-weekday {
	background: var(--mkbb-color-card) !important;
	color: var(--mkbb-color-muted) !important;
	font-weight: 600;
}

.flatpickr-days,
.dayContainer {
	background: var(--mkbb-color-card) !important;
}

.flatpickr-day {
	color: var(--mkbb-color-fg);
	border-radius: var(--mkbb-radius);
}

.flatpickr-day.today {
	border-color: var(--mkbb-color-accent) !important;
	color: var(--mkbb-color-fg) !important;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--mkbb-color-accent) !important;
	border-color: var(--mkbb-color-accent) !important;
	color: var(--mkbb-color-fg) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange {
	background: var(--mkbb-color-accent) !important;
	border-color: var(--mkbb-color-accent) !important;
	color: var(--mkbb-color-fg) !important;
	box-shadow: none !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.today) {
	background: var(--mkbb-color-bg) !important;
	border-color: var(--mkbb-color-border) !important;
	color: var(--mkbb-color-fg) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--mkbb-color-muted) !important;
	background: transparent !important;
	opacity: 0.3;
	cursor: not-allowed;
}