/*!
 * BitForgeNet Guest Tickets — admin styles
 */

.bfnet-admin {
	--bfnet-brand: #6423e2;
	--bfnet-dark: #012254;
	--bfnet-ink: #1d2327;
	--bfnet-muted: #646970;
	--bfnet-line: #dcdcde;
	--bfnet-bg: #f6f7f7;
	--bfnet-radius: 10px;
	margin: 0 20px 0 2px;
	color: var(--bfnet-ink);
}

.bfnet-admin *, .bfnet-admin *::before, .bfnet-admin *::after { box-sizing: border-box; }

/* ---------- Masthead ---------- */

/* The wp-header-end marker makes core drop every notice here, above the band. */
.bfnet-admin > .wp-header-end { display: block; margin: 0; padding: 0; border: 0; height: 0; visibility: hidden; }
.bfnet-admin .notice,
.bfnet-admin div.updated,
.bfnet-admin div.error { margin: 14px 0 6px; }

.bfnet-masthead {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(120deg, var(--bfnet-dark) 0%, #0a2f70 58%, #3a1f8c 130%);
	border-radius: var(--bfnet-radius);
	padding: 18px 22px;
	margin: 16px 0 20px;
	color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
	position: relative;
	z-index: 0;
}
.bfnet-masthead__logo { width: 62px; flex: 0 0 62px; }
.bfnet-masthead__logo img { width: 100%; height: auto; display: block; }
.bfnet-masthead__text { flex: 1; min-width: 0; }
.bfnet-masthead__title { margin: 0; font-size: 20px; line-height: 1.25; color: #fff; font-weight: 600; padding: 0; }
.bfnet-masthead p { margin: 3px 0 0; font-size: 13px; color: rgba(255,255,255,.66); }
.bfnet-masthead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* WordPress paints its buttons for a white page. On the dark band that leaves
   blue-on-black, which is unreadable — so every button living inside the band
   is restated in the plugin's own violet. */
.bfnet-masthead .button,
.bfnet-masthead .button-secondary,
.bfnet-masthead .button-primary {
	background: rgba(139, 92, 246, .18);
	border: 1px solid #8b5cf6;
	color: #c4b5fd;
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
	border-radius: 7px;
}
.bfnet-masthead .button:hover,
.bfnet-masthead .button:focus,
.bfnet-masthead .button-primary:hover {
	background: #8b5cf6;
	border-color: #8b5cf6;
	color: #ffffff;
}
.bfnet-masthead .button:focus { box-shadow: 0 0 0 2px rgba(139, 92, 246, .5); }
.bfnet-masthead .button-bfnet { background: var(--bfnet-brand); color: #ffffff; }
.bfnet-masthead .button-bfnet:hover { background: #7b3df0; color: #ffffff; }

/* On a phone the band was shouting: a 20px title and full-size buttons in a
   column. Everything here shrinks, and the actions become one tidy row. */
@media (max-width: 782px) {
	.bfnet-admin { margin: 0 10px 0 0; }
	.bfnet-masthead {
		flex-wrap: wrap;
		gap: 10px;
		padding: 13px 14px;
		border-radius: 8px;
		margin: 10px 0 14px;
	}
	.bfnet-masthead__logo { width: 42px; flex: 0 0 42px; }
	.bfnet-masthead__text { flex: 1 1 auto; min-width: 0; }
	.bfnet-masthead__title { font-size: 15px; line-height: 1.3; }
	.bfnet-masthead p { font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
	.bfnet-masthead__actions { flex: 1 0 100%; gap: 6px; }
	.bfnet-masthead__actions .button {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 36px;
		line-height: 1.25;
		padding: 6px 11px;
		font-size: 12.5px;
		text-align: center;
		white-space: nowrap;
	}
}

.bfnet-admin .button-bfnet {
	background: var(--bfnet-brand);
	border-color: #a9871a;
	color: #ffffff;
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
}
.bfnet-admin .button-bfnet:hover { background: #7b3df0; border-color: #4d17b8; color: #ffffff; }

/* ---------- Tabs ---------- */

.bfnet-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--bfnet-line); margin-bottom: 18px; }
.bfnet-tabs a {
	padding: 9px 15px;
	text-decoration: none;
	color: var(--bfnet-muted);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	font-weight: 500;
	margin-bottom: -1px;
}
.bfnet-tabs a:hover { color: var(--bfnet-ink); background: #fff; }
.bfnet-tabs a.is-active { background: #fff; border-color: var(--bfnet-line); color: var(--bfnet-ink); font-weight: 600; }

/* ---------- Stat tiles ---------- */

.bfnet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 22px; }
.bfnet-stat {
	background: #fff;
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius);
	padding: 15px 17px;
	position: relative;
	overflow: hidden;
}
.bfnet-stat::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--bfnet-brand); opacity: .85; }
.bfnet-stat__label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bfnet-muted); margin-bottom: 5px; }
.bfnet-stat__value { font-size: 25px; font-weight: 700; line-height: 1.15; }
.bfnet-stat__meta { font-size: 12px; color: var(--bfnet-muted); margin-top: 3px; }
.bfnet-stat--good::after { background: #1e8e3e; }
.bfnet-stat--warn::after { background: #b26b00; }
.bfnet-stat--bad::after { background: #c5221f; }

/* ---------- Panels ---------- */

.bfnet-panel {
	background: #fff;
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius);
	margin-bottom: 20px;
}
.bfnet-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 1px solid var(--bfnet-line);
}
.bfnet-panel__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.bfnet-panel__body { padding: 18px; }
.bfnet-panel__body--flush { padding: 0; }

.bfnet-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.bfnet-cols--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .bfnet-cols, .bfnet-cols--even { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */

.bfnet-field { margin-bottom: 16px; }
.bfnet-field > label,
.bfnet-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.bfnet-field .description { margin: 5px 0 0; font-size: 12.5px; color: var(--bfnet-muted); }

.bfnet-admin input[type="text"],
.bfnet-admin input[type="email"],
.bfnet-admin input[type="url"],
.bfnet-admin input[type="tel"],
.bfnet-admin input[type="number"],
.bfnet-admin input[type="datetime-local"],
.bfnet-admin input[type="date"],
.bfnet-admin input[type="search"],
.bfnet-admin select,
.bfnet-admin textarea { width: 100%; max-width: 100%; }
.bfnet-admin input[type="number"].bfnet-narrow { max-width: 130px; }

.bfnet-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bfnet-row--3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.bfnet-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Repeaters */

.bfnet-repeat { display: grid; gap: 10px; }
.bfnet-repeat__row {
	display: grid;
	grid-template-columns: 150px 1fr 1fr 40px;
	gap: 10px;
	align-items: center;
	background: var(--bfnet-bg);
	border: 1px solid var(--bfnet-line);
	border-radius: 8px;
	padding: 10px;
}
.bfnet-repeat__row--types { grid-template-columns: 1.4fr .8fr .7fr .7fr 40px; }
@media (max-width: 782px) { .bfnet-repeat__row, .bfnet-repeat__row--types { grid-template-columns: 1fr; } }
.bfnet-remove {
	border: 0; background: transparent; color: #c5221f; cursor: pointer;
	font-size: 18px; line-height: 1; padding: 6px; border-radius: 6px;
}
.bfnet-remove:hover { background: #fdeaea; }

/* Media picker */

.bfnet-media { display: flex; gap: 12px; align-items: flex-start; }
.bfnet-media__preview {
	width: 108px; height: 108px; flex: 0 0 108px;
	border: 1px dashed var(--bfnet-line); border-radius: 8px;
	background: var(--bfnet-bg) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	color: var(--bfnet-muted); font-size: 11px; text-align: center; overflow: hidden;
}
.bfnet-media__preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tables ---------- */

.bfnet-table { width: 100%; border-collapse: collapse; }
.bfnet-table th {
	text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--bfnet-muted); padding: 11px 14px; border-bottom: 1px solid var(--bfnet-line); font-weight: 600; white-space: nowrap;
}
.bfnet-table td { padding: 12px 14px; border-bottom: 1px solid #f0f0f1; font-size: 13.5px; vertical-align: middle; }
.bfnet-table tbody tr:hover { background: #fbfbfc; }
.bfnet-table tbody tr:last-child td { border-bottom: 0; }
.bfnet-table .bfnet-num { text-align: right; font-variant-numeric: tabular-nums; }
.bfnet-table__title { font-weight: 600; font-size: 14px; }
.bfnet-table__sub { color: var(--bfnet-muted); font-size: 12px; margin-top: 2px; }
.bfnet-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.bfnet-badge {
	display: inline-block; padding: 3px 9px; border-radius: 999px;
	font-size: 11.5px; font-weight: 600; line-height: 1.6; color: #fff; white-space: nowrap;
}

.bfnet-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bfnet-actions .button { padding: 0 8px; }

.bfnet-empty-state { padding: 44px 22px; text-align: center; color: var(--bfnet-muted); }
.bfnet-empty-state h3 { margin: 0 0 6px; font-size: 16px; color: var(--bfnet-ink); }
.bfnet-empty-state p { margin: 0 0 14px; }

/* ---------- Filters ---------- */

.bfnet-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.bfnet-filters .bfnet-field { margin-bottom: 0; }
.bfnet-filters select, .bfnet-filters input[type="search"] { min-width: 170px; }

/* ---------- Progress ---------- */

.bfnet-progress { height: 8px; border-radius: 999px; background: #e9e9ea; overflow: hidden; margin-top: 8px; }
.bfnet-progress span { display: block; height: 100%; background: var(--bfnet-brand); border-radius: 999px; transition: width .3s; }
.bfnet-progress--good span { background: #1e8e3e; }

/* ---------- Scanner ---------- */

.bfnet-scanner { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .bfnet-scanner { grid-template-columns: 1fr; } }

.bfnet-scanner__stage {
	position: relative; background: #000; border-radius: var(--bfnet-radius);
	overflow: hidden; aspect-ratio: 3 / 4;
}
.bfnet-scanner__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bfnet-scanner__reticle {
	position: absolute; inset: 16%; border: 3px solid rgba(255,255,255,.72);
	border-radius: 16px; pointer-events: none;
	box-shadow: 0 0 0 9999px rgba(0,0,0,.32);
}
.bfnet-scanner__hint {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
	background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; font-size: 13px; text-align: center;
}

.bfnet-verdict { border-radius: var(--bfnet-radius); padding: 22px; color: #fff; min-height: 168px; background: #5f6368; transition: background .2s; }
.bfnet-verdict--ok { background: linear-gradient(150deg, #0f7b3f, #12a050); }
.bfnet-verdict--warn { background: linear-gradient(150deg, #8a5a00, #c58a12); }
.bfnet-verdict--bad { background: linear-gradient(150deg, #8c1d18, #c5221f); }
.bfnet-verdict__title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.bfnet-verdict__msg { margin: 0 0 14px; opacity: .92; font-size: 14.5px; }
.bfnet-verdict__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.bfnet-verdict__cell { background: rgba(0,0,0,.2); border-radius: 8px; padding: 9px 11px; }
.bfnet-verdict__cell b { display: block; font-size: 15px; }
.bfnet-verdict__cell span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .74; }

.bfnet-feed { max-height: 320px; overflow: auto; }
.bfnet-feed__item { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #f0f0f1; font-size: 13px; }
.bfnet-feed__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: #5f6368; }
.bfnet-feed__dot--ok { background: #1e8e3e; }
.bfnet-feed__dot--bad { background: #c5221f; }
.bfnet-feed__dot--warn { background: #b26b00; }

/* ---------- Templates ---------- */

.bfnet-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.bfnet-design { border: 1px solid var(--bfnet-line); border-radius: var(--bfnet-radius); overflow: hidden; background: #fff; }
.bfnet-design.is-default { border-color: var(--bfnet-brand); box-shadow: 0 0 0 2px rgba(201,162,39,.22); }
.bfnet-design__thumb { background: #0b0b0b; aspect-ratio: 1181 / 2953; display: block; }
.bfnet-design__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bfnet-design__body { padding: 12px 13px; }
.bfnet-design__name { font-weight: 600; font-size: 13.5px; margin: 0 0 3px; }
.bfnet-design__meta { font-size: 11.5px; color: var(--bfnet-muted); margin: 0 0 10px; }

.bfnet-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
.bfnet-palette { position: relative; }
.bfnet-palette input { position: absolute; opacity: 0; pointer-events: none; }
.bfnet-palette__swatch {
	display: block; border: 2px solid var(--bfnet-line); border-radius: 9px; padding: 9px;
	cursor: pointer; text-align: center; font-size: 12px; font-weight: 600; transition: border-color .15s;
}
.bfnet-palette input:checked + .bfnet-palette__swatch { border-color: var(--bfnet-brand); box-shadow: 0 0 0 2px rgba(201,162,39,.2); }
.bfnet-palette__bars { display: flex; height: 30px; border-radius: 6px; overflow: hidden; margin-bottom: 7px; }
.bfnet-palette__bars i { flex: 1; }

/* ---------- Misc ---------- */

.bfnet-note-box { background: #fbf7ea; border-left: 3px solid var(--bfnet-brand); padding: 12px 15px; border-radius: 0 8px 8px 0; font-size: 13px; }
.bfnet-code {
	display: block; background: var(--bfnet-dark); color: #e6e6e6; padding: 11px 14px;
	border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
	overflow-x: auto; user-select: all;
}
.bfnet-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13.5px; }
.bfnet-kv dt { color: var(--bfnet-muted); }
.bfnet-kv dd { margin: 0; font-weight: 500; }

.bfnet-pager { display: flex; gap: 6px; justify-content: flex-end; align-items: center; padding: 12px 16px; font-size: 13px; }

.bfnet-scanner__diag {
	margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
	background: #f1f2f4; border: 1px solid #e2e4e8;
	color: #50575e; font-size: 12px; line-height: 1.45;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-word;
}

/* ---------- The door code ---------- */

.bfnet-pin {
	background: linear-gradient(120deg, #12141a, #23262f 70%, #3a3320 150%);
	border-radius: var(--bfnet-radius);
	padding: 20px 22px;
	color: #fff;
	text-align: center;
}
.bfnet-pin__label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.bfnet-pin__value {
	font-size: 40px; font-weight: 700; letter-spacing: .12em; margin: 8px 0 6px;
	color: var(--bfnet-brand); font-variant-numeric: tabular-nums;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bfnet-pin .description { color: rgba(255,255,255,.62); margin: 0; }

.bfnet-steps { margin: 0; padding-left: 20px; }
.bfnet-steps li { margin-bottom: 12px; line-height: 1.6; }
.bfnet-steps code { display: inline-block; margin: 4px 6px 4px 0; padding: 3px 8px; background: var(--bfnet-bg); border-radius: 6px; }

/* ---------- Seating ---------- */

.bfnet-seating {
	border: 1px solid var(--bfnet-line);
	border-left: 4px solid var(--bfnet-brand);
	border-radius: var(--bfnet-radius);
	padding: 16px 18px;
	margin-bottom: 18px;
	background: var(--bfnet-bg);
}
.bfnet-seating.is-todo { border-left-color: #b26b00; background: #fff8ec; }
.bfnet-seating.is-done { border-left-color: #1e8e3e; }
.bfnet-seating__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bfnet-seating__head span { font-size: 12.5px; color: var(--bfnet-muted); }
.bfnet-seating__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.bfnet-seating__seat label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.bfnet-seating__seat input {
	width: 100%; text-align: center; font-weight: 700; font-size: 17px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-transform: uppercase;
}

.bfnet-floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bfnet-floor__table {
	border: 1px solid var(--bfnet-line); border-radius: 9px; padding: 9px 10px; background: #fff; text-align: center;
}
.bfnet-floor__table b { display: block; font-size: 16px; font-weight: 700; }
.bfnet-floor__table span { font-size: 11px; color: var(--bfnet-muted); }
.bfnet-floor__table.is-full { background: #fdeaea; border-color: #f3c3c1; }
.bfnet-floor__table.is-part { background: #fff8ec; border-color: #f0dcb6; }

/* ---------- Event editor: one column, one save bar ---------- */

.bfnet-stack { display: block; }
.bfnet-stack > div { display: block; }
.bfnet-stack .bfnet-panel { max-width: 100%; }

/* Room for the bar so it never covers the last field. */
.bfnet-admin form[data-bfnet-event-form] { padding-bottom: 78px; }

.bfnet-savebar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin: 0 -2px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	border-top: 1px solid var(--bfnet-line);
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .07);
}
.bfnet-savebar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 12px 16px;
}
.bfnet-savebar__state { font-size: 13px; color: var(--bfnet-muted); }
.bfnet-savebar__state.is-dirty { color: #b26b00; font-weight: 600; }
.bfnet-savebar__state.is-saving { color: var(--bfnet-muted); }
.bfnet-savebar__state.is-saved { color: #1e8e3e; font-weight: 600; }
.bfnet-savebar__state.is-error { color: #c5221f; font-weight: 600; }

/* The main action, in the plugin's own colour. Scoped to .bfnet-admin so
   WordPress keeps its blue everywhere else on the site. */
.bfnet-admin .button-primary {
	background: var(--bfnet-brand);
	border-color: #4d17b8;
	color: #fff;
	text-shadow: none;
	box-shadow: none;
}
.bfnet-admin .button-primary:hover,
.bfnet-admin .button-primary:focus {
	background: #7b3df0;
	border-color: #4d17b8;
	color: #fff;
}
.bfnet-admin .button-primary:focus { box-shadow: 0 0 0 2px rgba(139, 92, 246, .5); }
.bfnet-admin .button-primary:disabled,
.bfnet-admin .button-primary[disabled] {
	background: #c9c3d8 !important;
	border-color: #c9c3d8 !important;
	color: #fff !important;
}

/* ---------- Collapsible advanced blocks ---------- */

.bfnet-more { border: 1px solid var(--bfnet-line); border-radius: 9px; background: #fff; margin-top: 12px; }
.bfnet-more > summary {
	cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13.5px;
	list-style: none; display: flex; align-items: center; gap: 8px;
}
.bfnet-more > summary::-webkit-details-marker { display: none; }
.bfnet-more > summary::before { content: '▸'; color: var(--bfnet-brand); }
.bfnet-more[open] > summary::before { content: '▾'; }
.bfnet-more > summary span { font-weight: 400; color: var(--bfnet-muted); font-size: 12.5px; }
.bfnet-more__body { padding: 0 14px 14px; border-top: 1px solid var(--bfnet-line); padding-top: 14px; }

/* --------------------------------------------------------------------------
   Big tables on small screens
   --------------------------------------------------------------------------
   A booking row carries a guest, an event, two contact routes, a count, a
   table, a total, a status, a date and an action. There is no honest way to
   fit ten columns into 360 pixels, and squeezing them is what made the
   subscribers list spill out of its panel and read like a spreadsheet
   accident.

   So below the WordPress admin's own breakpoint the table stops being a table
   and becomes a stack of cards: one card per booking, one line per field, each
   line labelled with its column heading. Nothing is dropped and nothing is
   hidden behind a sideways scroll — the same data, read down instead of
   across. The labels come from the headings themselves (admin.js copies them
   into data-label), so every table in the plugin gets this for free and a new
   column can never arrive unlabelled.

   Between the phone and the desktop the table stays a table but scrolls
   sideways inside its panel rather than pushing the panel wider than the
   screen. -------------------------------------------------------------- */

.bfnet-seat { font-variant-numeric: tabular-nums; font-size: 14px; }
.bfnet-nowrap { white-space: nowrap; }

.bfnet-panel__body--flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 782px) {
	.bfnet-admin { margin-right: 0; }

	.bfnet-panel__body--flush { overflow-x: visible; }

	.bfnet-table,
	.bfnet-table tbody,
	.bfnet-table tr,
	.bfnet-table td { display: block; width: 100%; }

	.bfnet-table thead { display: none; }

	.bfnet-table tr {
		background: #fff;
		border: 1px solid var(--bfnet-line);
		border-radius: 12px;
		margin: 12px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
		overflow: hidden;
	}
	.bfnet-table tbody tr:hover { background: #fff; }

	/* The label is positioned rather than laid out as a flex item, so that a
	   cell holding two lines — a name above a reference, a badge above "tickets
	   sent" — still stacks them instead of standing them side by side and
	   squeezing both into a third of the card. */
	.bfnet-table td {
		position: relative;
		padding: 10px 13px 10px 39%;
		border-bottom: 1px solid #f2f2f4;
		font-size: 13.5px;
		text-align: right;
		min-height: 20px;
	}
	.bfnet-table tbody tr:last-child td { border-bottom: 1px solid #f2f2f4; }
	.bfnet-table td:last-child { border-bottom: 0; }

	.bfnet-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 13px;
		top: 11px;
		width: calc(39% - 26px);
		text-align: left;
		font-size: 11px;
		letter-spacing: .06em;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--bfnet-muted);
		line-height: 1.5;
	}

	/* Cells whose column has no heading — the select box and the row actions —
	   have nothing to announce, so they take the whole width instead. */
	.bfnet-table td[data-label=""]::before,
	.bfnet-table td:not([data-label])::before { content: none; }
	.bfnet-table td[data-label=""],
	.bfnet-table td:not([data-label]) {
		padding-left: 13px;
		text-align: left;
		background: #fafafb;
	}

	/* The first cell of a card is its header: bigger, and never a bare tick
	   box floating alone above a name. */
	.bfnet-table td:first-child { padding-top: 12px; }
	.bfnet-table td:last-child { padding-bottom: 12px; }

	.bfnet-table .bfnet-num { text-align: right; }
	.bfnet-table__title { font-size: 14.5px; }
	.bfnet-table__sub { margin-top: 1px; }

	.bfnet-table .bfnet-actions { justify-content: flex-start; }
	.bfnet-table .bfnet-actions .button { padding: 0 12px; }

	/* A long email or a booking reference must wrap rather than widen the card. */
	.bfnet-table td > div,
	.bfnet-table td > a,
	.bfnet-table td > span { min-width: 0; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Suggested map link
   -------------------------------------------------------------------------- */

.bfnet-maplink {
	margin-top: 10px;
	padding: 12px 13px;
	border: 1px dashed var(--bfnet-line);
	border-radius: 10px;
	background: #fafafb;
}
.bfnet-maplink[hidden] { display: none; }
.bfnet-maplink__head {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	font-size: 12px; margin-bottom: 7px;
}
.bfnet-maplink__head strong { font-size: 12px; }
.bfnet-maplink__head span { color: var(--bfnet-muted); }
.bfnet-maplink code {
	display: block;
	background: #fff;
	border: 1px solid var(--bfnet-line);
	border-radius: 7px;
	padding: 8px 10px;
	font-size: 11.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
	color: var(--bfnet-ink);
}
.bfnet-maplink__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* --------------------------------------------------------------------------
   Column picker
   -------------------------------------------------------------------------- */

.bfnet-fields__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-top: 16px;
	padding-top: 14px; border-top: 1px solid var(--bfnet-line);
}
.bfnet-fields__bar .description { margin: 0; font-variant-numeric: tabular-nums; }

.bfnet-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2px 14px;
}
.bfnet-fields__item {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.bfnet-fields__item:hover { background: #f6f7f8; }
.bfnet-fields__item input { margin: 2px 0 0; flex: 0 0 auto; }
.bfnet-fields__item span { display: block; min-width: 0; line-height: 1.35; }
/* The machine name sits under the readable one: whoever opens the CSV in a
   script needs to know which header they are asking for. */
.bfnet-fields__item em {
	display: block; font-style: normal; font-size: 11px; color: var(--bfnet-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

@media (max-width: 782px) {
	.bfnet-fields { grid-template-columns: 1fr; }
	.bfnet-fields__bar { align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Callouts — what the site is really going to do
   -------------------------------------------------------------------------- */

.bfnet-callout {
	margin: 14px 0;
	padding: 13px 15px;
	border: 1px solid var(--bfnet-line);
	border-left: 4px solid var(--bfnet-brand);
	border-radius: 9px;
	background: #fafafb;
	font-size: 13px;
	line-height: 1.6;
}
.bfnet-callout strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.bfnet-callout p { margin: 6px 0 0; color: var(--bfnet-muted); }
.bfnet-callout code {
	background: #fff; border: 1px solid var(--bfnet-line); border-radius: 5px;
	padding: 1px 6px; font-size: 12px; overflow-wrap: anywhere;
}
.bfnet-callout--warn { border-left-color: #c58a12; background: #fffaf0; }
.bfnet-callout--bad { border-left-color: #c5221f; background: #fff6f5; }
.bfnet-callout--bad strong { color: #8c1d18; }
.bfnet-callout--good { border-left-color: #12a050; background: #f4fbf6; }
.bfnet-callout--good strong { color: #0f7b3f; }
.bfnet-callout code + code { margin-left: 5px; }

/* Forms that exist only to carry a nonce for a button rendered elsewhere. */
.bfnet-hidden-form { display: none; }

/* --------------------------------------------------------------------------
   Settings tabs
   --------------------------------------------------------------------------
   Nine subjects, one at a time. The row wraps rather than scrolls, so on a
   phone it becomes a block of labels instead of a strip that hides its own
   end. -------------------------------------------------------------------- */

.bfnet-tabs--settings { gap: 2px; margin-bottom: 20px; }
.bfnet-tabs--settings a { font-size: 13.5px; padding: 9px 13px; }

.bfnet-savebar {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	/* Full shorthand on purpose: the dashboard save bar above sets a negative
	   side margin, and inheriting it here pushed the editor 2px off screen. */
	margin: 18px 0 0; padding: 14px 16px;
	background: #fff; border: 1px solid var(--bfnet-line); border-radius: 10px;
	position: sticky; bottom: 12px; z-index: 5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.bfnet-savebar__note { color: var(--bfnet-muted); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   The map of the plugin
   -------------------------------------------------------------------------- */

.bfnet-map__group {
	margin: 20px 0 10px; font-size: 11.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--bfnet-muted); font-weight: 700;
}
.bfnet-map__group:first-child { margin-top: 0; }

.bfnet-map__grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.bfnet-map__card {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 13px 14px; text-decoration: none;
	border: 1px solid var(--bfnet-line); border-radius: 10px;
	background: #fff; color: var(--bfnet-ink);
	transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.bfnet-map__card:hover {
	border-color: var(--bfnet-brand);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	transform: translateY(-1px);
	color: var(--bfnet-ink);
}
.bfnet-map__icon {
	flex: 0 0 34px; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9px; background: #f6f2e2; color: #8a6d12;
	font-size: 18px; line-height: 1;
}
.bfnet-map__text { min-width: 0; line-height: 1.4; }
.bfnet-map__text strong { display: block; font-size: 14px; }
.bfnet-map__text em {
	display: block; font-style: normal; font-size: 12.5px;
	color: var(--bfnet-muted); margin-top: 2px;
}

@media (max-width: 782px) {
	.bfnet-tabs--settings { border-bottom: 0; }
	.bfnet-tabs--settings a {
		border: 1px solid var(--bfnet-line); border-radius: 8px;
		margin-bottom: 0; background: #fff;
	}
	.bfnet-savebar { position: static; }
	.bfnet-map__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Section bar
   --------------------------------------------------------------------------
   The plugin's own navigation, on every one of its screens. It does not replace
   the WordPress sidebar — both work, and this one is simply closer to the hand
   while you are reading a page.

   It is deliberately a different shape from the settings tabs below it: pills
   on a rail here, an underline there. Two navigations that look alike are two
   navigations nobody can tell apart. ------------------------------------- */

.bfnet-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0 0 20px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--bfnet-line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.bfnet-sections__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--bfnet-muted);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}
.bfnet-sections__link:hover,
.bfnet-sections__link:focus {
	background: #f6f7f8;
	color: var(--bfnet-ink);
	box-shadow: none;
}
.bfnet-sections__link.is-here {
	background: var(--bfnet-ink);
	color: #fff;
	font-weight: 600;
}
.bfnet-sections__link.is-here .dashicons { color: var(--bfnet-brand); }

.bfnet-sections .dashicons {
	font-size: 17px;
	width: 17px;
	height: 17px;
	line-height: 1;
	opacity: .85;
}

/* Below the WordPress breakpoint the labels would wrap into a wall of words,
   so the bar becomes a scrollable rail of icons with the current screen still
   spelled out — you always know where you are, and everywhere else is one
   thumb-swipe away. */
@media (max-width: 782px) {
	.bfnet-sections {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border-radius: 10px;
	}
	.bfnet-sections::-webkit-scrollbar { display: none; }
	.bfnet-sections__link { padding: 9px 11px; }
	.bfnet-sections__link span:not(.dashicons) { display: none; }
	.bfnet-sections__link.is-here span:not(.dashicons) { display: inline; }
}

/* The status control sits in the save bar rather than in a tab of its own:
   publishing is not a subject, it is the decision you take when you are done. */
.bfnet-savebar__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.bfnet-savebar__status > span { color: var(--bfnet-muted); font-weight: 600; }
.bfnet-savebar__status select { margin: 0; }

/* --------------------------------------------------------------------------
   The new-event wizard
   -------------------------------------------------------------------------- */

.bfnet-steps {
	display: flex; flex-wrap: wrap; gap: 6px;
	list-style: none; margin: 0 0 20px; padding: 0; counter-reset: none;
}
.bfnet-steps__item {
	/* margin reset on purpose: the setup-instruction list above styles bare
	   <li> children of .bfnet-steps, and these are <li> too. */
	margin: 0;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 15px 9px 10px;
	background: #fff; border: 1px solid var(--bfnet-line); border-radius: 999px;
	font-size: 13.5px; color: var(--bfnet-muted);
}
.bfnet-steps__dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: #f0f0f1; color: var(--bfnet-muted);
	font-size: 12.5px; font-weight: 700; line-height: 1;
}
.bfnet-steps__item.is-here { border-color: var(--bfnet-ink); color: var(--bfnet-ink); font-weight: 600; }
.bfnet-steps__item.is-here .bfnet-steps__dot { background: var(--bfnet-ink); color: var(--bfnet-brand); }
.bfnet-steps__item.is-done .bfnet-steps__dot { background: #12a050; color: #fff; }

/* A wizard step is one question at a time, so the panel stays narrow: a form
   field three columns wide is a form field nobody reads to the end of. */
.bfnet-panel--wizard { max-width: 720px; }
.bfnet-panel--wizard .bfnet-field label { font-size: 14.5px; }

.bfnet-wizard__done { margin: 0 0 14px; font-size: 21px; }

/* The wizard save bar sits under a narrow panel, so it stays as narrow. */
.bfnet-savebar--wizard { max-width: 720px; }

.bfnet-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 20px; }
.bfnet-summary dt { color: var(--bfnet-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-top: 2px; }
.bfnet-summary dd { margin: 0; font-size: 14px; }

@media (max-width: 782px) {
	.bfnet-steps { gap: 4px; }
	.bfnet-steps__item { padding: 7px 11px 7px 8px; font-size: 12.5px; }
	.bfnet-steps__item:not(.is-here) .bfnet-steps__label { display: none; }
	.bfnet-summary { grid-template-columns: 1fr; gap: 2px 0; }
	.bfnet-summary dd { margin-bottom: 10px; }
}
