/**
 * Campsite Booking System — Owner Panel (Mobile-First)
 * Section 10 — Milestone 11/12
 */

/* ─── Source colour tokens ────────────────────────────────────────────────────── */

:root {
	--tpcbs-source-website-bg:    #d4edda;
	--tpcbs-source-website-fg:    #155724;
	--tpcbs-source-website-bdr:   #c3e6cb;
	--tpcbs-source-pitchup-bg:    #fff3cd;
	--tpcbs-source-pitchup-fg:    #7a4f00;
	--tpcbs-source-pitchup-bdr:   #ffe69c;
	--tpcbs-source-campsites-bg:  #dbeafe;
	--tpcbs-source-campsites-fg:  #1d4ed8;
	--tpcbs-source-campsites-bdr: #bfdbfe;
	--tpcbs-source-hipcamp-bg:    #ffe8d9;
	--tpcbs-source-hipcamp-fg:    #b03a00;
	--tpcbs-source-hipcamp-bdr:   #ffcfb0;
}

/* ─── Base / Mobile ─────────────────────────────────────────────────────────── */

.tpcbs-owner-panel {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
	color: #333;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */

.tpcbs-owner-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 2px solid #eee;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 8px;
}

.tpcbs-owner-header__user {
	font-size: 15px;
	color: #50575e;
}

/* ─── Quick stats strip ─────────────────────────────────────────────────────── */

.tpcbs-owner-stats {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 20px;
	-webkit-overflow-scrolling: touch;
}

.tpcbs-owner-stat-card {
	flex: 0 0 140px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 16px 12px;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.15s;
	min-height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tpcbs-owner-stat-card:hover,
.tpcbs-owner-stat-card:focus,
.tpcbs-owner-stat-card.tpcbs-active {
	box-shadow: 0 0 0 2px #2271b1;
	outline: none;
}

.tpcbs-owner-stat-card__number {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: #2271b1;
}

.tpcbs-owner-stat-card__label {
	font-size: 12px;
	color: #50575e;
	margin-top: 4px;
}

.tpcbs-owner-stat-card--outstanding .tpcbs-owner-stat-card__number {
	color: #d63638;
}

/* ─── Search bar ─────────────────────────────────────────────────────────────── */

.tpcbs-owner-search {
	margin-bottom: 16px;
}

.tpcbs-owner-search input[type="search"],
.tpcbs-owner-search input[type="text"] {
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
	border: 1px solid #8c8f94;
	border-radius: 6px;
	box-sizing: border-box;
}

/* ─── Filters accordion ─────────────────────────────────────────────────────── */

.tpcbs-owner-filters {
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	margin-bottom: 20px;
	background: #fafafa;
}

.tpcbs-owner-filters__toggle {
	width: 100%;
	background: none;
	border: none;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #333;
	min-height: 44px;
}

.tpcbs-owner-filters__toggle::after {
	content: "▼";
	font-size: 11px;
	color: #666;
	transition: transform 0.2s;
}

.tpcbs-owner-filters.tpcbs-open .tpcbs-owner-filters__toggle::after {
	transform: rotate(180deg);
}

.tpcbs-owner-filters__body {
	display: none;
	padding: 16px;
	border-top: 1px solid #c3c4c7;
}

.tpcbs-owner-filters.tpcbs-open .tpcbs-owner-filters__body {
	display: block;
}

.tpcbs-owner-filters__row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}

.tpcbs-owner-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tpcbs-owner-filters__field label {
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
}

.tpcbs-owner-filters__field select,
.tpcbs-owner-filters__field input[type="date"] {
	padding: 8px 10px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 14px;
	min-height: 44px;
}

.tpcbs-owner-filters__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tpcbs-owner-filters__actions button {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 14px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid;
}

.tpcbs-btn-apply {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

.tpcbs-btn-clear {
	background: #fff;
	color: #2271b1;
	border-color: #2271b1;
}

/* ─── Booking cards ─────────────────────────────────────────────────────────── */

.tpcbs-owner-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
}

@media (max-width: 640px) {
	.tpcbs-owner-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tpcbs-owner-empty {
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.5;
	padding: 24px 16px;
	margin: 0;
	background: #f9fafb;
	border: 1px dashed #e5e7eb;
	border-radius: 8px;
}

.tpcbs-owner-card {
	background: #fff;
	border: 1px solid #d6dce1;
	border-radius: 15px;
	padding: 14px;
	cursor: pointer;
	transition: box-shadow 0.15s;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.tpcbs-owner-card:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.tpcbs-owner-card--confirmed { border-left: 4px solid #00a32a; }
.tpcbs-owner-card--hold      { border-left: 4px solid #f0ad4e; }
.tpcbs-owner-card--completed { border-left: 4px solid #0073aa; }
.tpcbs-owner-card--cancelled { border-left: 4px solid #d63638; }
.tpcbs-owner-card--expired   { border-left: 4px solid #999; }

.tpcbs-owner-card__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 0;
}
.tpcbs-owner-card__header > * { min-width: 0; }

.tpcbs-owner-card__ref {
	font-weight: 700;
	font-size: 15px;
	color: #2271b1;
}

.tpcbs-owner-card__source {
	display: inline-flex;
	align-items: center;
}

.tpcbs-owner-card__status-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tpcbs-pill-confirmed { background: #d4edda; color: #155724; }
.tpcbs-pill-hold      { background: #fff3cd; color: #856404; }
.tpcbs-pill-completed { background: #d1ecf1; color: #0c5460; }
.tpcbs-pill-cancelled { background: #f8d7da; color: #721c24; }
.tpcbs-pill-expired   { background: #e2e3e5; color: #383d41; }

.tpcbs-owner-card__name {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: #1d2327;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tpcbs-owner-card__contact {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.tpcbs-owner-card__contact a {
	color: #2271b1;
	text-decoration: none;
}

.tpcbs-owner-card__dates {
	font-size: 13px;
	color: #50575e;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tpcbs-owner-card__reg {
	font-family: monospace;
	font-size: 14px;
	background: #f0f0f1;
	padding: 2px 6px;
	border-radius: 3px;
	margin-bottom: 8px;
	display: inline-block;
}

.tpcbs-owner-card__financials {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	color: #1d2327;
}

.tpcbs-owner-card__outstanding,
.tpcbs-owner-card__due {
	color: #d63638;
	font-weight: 700;
}

.tpcbs-owner-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tpcbs-owner-card__actions button,
.tpcbs-owner-card__actions a.button {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.tpcbs-btn-view-details {
	background: #f0f0f1;
	color: #1d2327;
	border-color: #c3c4c7;
}

.tpcbs-btn-print {
	background: #f0f0f1;
	color: #1d2327;
	border-color: #c3c4c7;
}

.tpcbs-btn-mark-paid {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

/* ─── Detail overlay ─────────────────────────────────────────────────────────── */

.tpcbs-owner-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10000;
	background: rgba(0,0,0,0.55);
}

.tpcbs-owner-overlay.tpcbs-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	overflow-y: auto;
}

.tpcbs-owner-overlay__inner {
	background: #fff;
	width: 100%;
	min-height: 100vh;
	padding: 20px 16px;
	box-sizing: border-box;
}

.tpcbs-owner-overlay__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 8px;
}

.tpcbs-owner-overlay__title {
	font-size: 20px;
	font-weight: 700;
	color: #1d2327;
}

.tpcbs-owner-overlay__close {
	min-height: 44px;
	min-width: 44px;
	padding: 8px 16px;
	font-size: 15px;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	cursor: pointer;
}

.tpcbs-owner-detail-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.tpcbs-owner-detail-table th {
	text-align: left;
	padding: 8px 12px 8px 0;
	vertical-align: top;
	font-weight: 600;
	color: #50575e;
	width: 180px;
	border-bottom: 1px solid #eee;
}

.tpcbs-owner-detail-table td {
	padding: 8px 0;
	vertical-align: top;
	border-bottom: 1px solid #eee;
}

.tpcbs-owner-overlay__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.tpcbs-owner-overlay__actions button {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid;
}

/* ─── Add-to-Home-Screen hint ─────────────────────────────────────────────────── */

.tpcbs-aths-hint {
	background: #2271b1;
	color: #fff;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tpcbs-aths-hint__dismiss {
	background: none;
	border: 1px solid rgba(255,255,255,0.5);
	color: #fff;
	padding: 4px 10px;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	min-height: 32px;
}

/* ─── Window filter card ─────────────────────────────────────────────────────── */

.tpcbs-warden-window-card {
	background: #ffffff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 20px 0;
}

.tpcbs-warden-window-card form {
	margin: 0;
	padding: 0;
}

.tpcbs-warden-window-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.tpcbs-warden-window-label {
	font-weight: 600;
	font-size: 15px;
	color: #1d2327;
	margin: 0;
	white-space: nowrap;
}

.tpcbs-warden-window-select {
	padding: 8px 14px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	font-size: 14px;
	background: #ffffff;
	color: #1d2327;
	cursor: pointer;
	min-width: 220px;
	min-height: 44px;
}

.tpcbs-warden-window-select:hover {
	border-color: #2271b1;
}

.tpcbs-warden-window-select:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
	border-color: #2271b1;
}

/* Custom date pickers */

.tpcbs-warden-custom-range {
	display: none;
	gap: 8px;
	margin-top: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.tpcbs-warden-custom-range.tpcbs-visible {
	display: flex;
}

.tpcbs-warden-custom-range label {
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
}

.tpcbs-warden-custom-range input[type="date"] {
	padding: 7px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	font-size: 14px;
	background: #ffffff;
	min-height: 44px;
}

.tpcbs-warden-custom-range button {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	background: #2271b1;
	color: #ffffff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	min-height: 44px;
}

.tpcbs-warden-custom-range button:hover {
	background: #135e96;
}

/* Summary bar */

.tpcbs-warden-window-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f1;
	font-size: 14px;
	color: #50575e;
}

.tpcbs-warden-summary-count strong {
	color: #1d2327;
}

.tpcbs-warden-summary-range {
	color: #50575e;
}

.tpcbs-warden-summary-sources {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-left: auto;
}

/* Source pills */

.tpcbs-source-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.tpcbs-source-website {
	background: var(--tpcbs-source-website-bg);
	color: var(--tpcbs-source-website-fg);
	border: 1px solid var(--tpcbs-source-website-bdr);
}

.tpcbs-source-pitchup {
	background: var(--tpcbs-source-pitchup-bg);
	color: var(--tpcbs-source-pitchup-fg);
	border: 1px solid var(--tpcbs-source-pitchup-bdr);
}

.tpcbs-source-campsites {
	background: var(--tpcbs-source-campsites-bg);
	color: var(--tpcbs-source-campsites-fg);
	border: 1px solid var(--tpcbs-source-campsites-bdr);
}

.tpcbs-source-hipcamp {
	background: var(--tpcbs-source-hipcamp-bg);
	color: var(--tpcbs-source-hipcamp-fg);
	border: 1px solid var(--tpcbs-source-hipcamp-bdr);
}

/* ─── Mobile — window card overrides (max 599px) ─────────────────────────────── */

@media (max-width: 599px) {

	.tpcbs-warden-window-row {
		flex-direction: column;
		align-items: stretch;
	}

	.tpcbs-warden-window-select {
		width: 100%;
		min-width: 0;
	}

	.tpcbs-warden-window-summary {
		flex-direction: column;
		align-items: flex-start;
	}

	.tpcbs-warden-summary-sources {
		margin-left: 0;
	}
}

/* ─── Tablet ──────────────────────────────────────────────────────────────────── */

@media (min-width: 600px) {

	.tpcbs-owner-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.tpcbs-owner-overlay__inner {
		min-height: auto;
		max-width: 640px;
		border-radius: 8px;
		margin: 40px auto;
	}

	.tpcbs-owner-overlay {
		padding: 0 16px;
	}

	.tpcbs-owner-filters__row {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tpcbs-owner-filters__field {
		flex: 1 1 160px;
	}

	.tpcbs-owner-overlay__actions button {
		flex: 0 0 auto;
	}
}

/* ─── Desktop ─────────────────────────────────────────────────────────────────── */

@media (min-width: 960px) {

	.tpcbs-owner-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.tpcbs-owner-overlay__inner {
		max-width: 820px;
	}
}

/* ─── Shared collapsible card system (.tpcbs-pcard) ──────────────────────────
   Mirrors the warden frontend so both read as one product. Fixed slots that
   always render keep cards the same height; the detail slot is hidden until the
   card (or its chevron) is tapped. */
.tpcbs-pcard__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.tpcbs-pcard__top > * { min-width: 0; }
.tpcbs-pcard__spacer { flex: 1 1 auto; }
.tpcbs-pcard__name {
	font-size: 15px;
	font-weight: 700;
	color: #1d2327;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}
.tpcbs-pcard__sub {
	font-size: 13px;
	color: #50575e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpcbs-pcard__total {
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpcbs-pcard__detail {
	border-top: 1px solid #eef0f2;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: #50575e;
}
.tpcbs-pcard__detail[hidden] { display: none; }
.tpcbs-pcard__actions {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 8px;
	border-top: 1px solid #eef0f2;
}

/* Pills + chips — never wrap, sit in fixed slots */
.tpcbs-pill {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpcbs-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #eef2f6;
	color: #33414f;
	border: 1px solid #d3dde6;
}
.tpcbs-chip--ref {
	background: #eaf1f8;
	color: #1c5a93;
	border-color: #cfe0f0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
}

/* Manager card detail slot */
.tpcbs-owner-card__detail .tpcbs-owner-card__contact { margin: 0; }
.tpcbs-owner-card__detail .tpcbs-owner-card__reg { margin: 0; }
.tpcbs-owner-card__detail-line { font-size: 13px; color: #50575e; }
.tpcbs-owner-card__onsite { color: #1f7a3d; font-weight: 600; }

/* The status pill keeps its colour set (.tpcbs-pill-*) but adopts the shared
   pill shape; the base .tpcbs-pill sets radius/padding so no extra rule needed. */