/* Bienkie Fishing — Boat & Skipper Logbook
   Design: a chart-room / instrument-panel feel. Fraunces for the wordmark
   and headings, Source Sans 3 for reading text, JetBrains Mono wherever
   digits line up (hours, dates, coordinates, catch counts). */

.bf-app {
	--bf-bg: #eef1ea;
	--bf-surface: #ffffff;
	--bf-surface-2: #e3e9de;
	--bf-surface-3: #f6f8f2;
	--bf-ink: #16282a;
	--bf-ink-dim: #55686a;
	--bf-border: #cdd6c8;
	--bf-accent: #b8542a;
	--bf-accent-ink: #fff8f2;
	--bf-depth: #1c4d5c;
	--bf-depth-ink: #eef6f5;
	--bf-good: #3f7d52;
	--bf-good-bg: #e4efe2;
	--bf-warn: #a8752a;
	--bf-warn-bg: #f4ecd9;
	--bf-critical: #b23a3a;
	--bf-critical-bg: #f4e0de;
	--bf-focus: #2f7d8c;
	--bf-shadow: 0 1px 2px rgba(22, 40, 42, 0.06), 0 6px 20px -8px rgba(22, 40, 42, 0.18);

	background: var(--bf-bg);
	color: var(--bf-ink);
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 14px;
	padding: 0 0 2.5rem;
	max-width: 980px;
	margin: 0 auto;
	box-shadow: var(--bf-shadow);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
	.bf-app {
		--bf-bg: #0d1b1d;
		--bf-surface: #142628;
		--bf-surface-2: #1a3336;
		--bf-surface-3: #102022;
		--bf-ink: #e7efe9;
		--bf-ink-dim: #96aead;
		--bf-border: #26454a;
		--bf-accent: #e2854f;
		--bf-accent-ink: #21120a;
		--bf-depth: #5fa7b5;
		--bf-depth-ink: #08191c;
		--bf-good: #63b17e;
		--bf-good-bg: #16302199;
		--bf-warn: #d9a94a;
		--bf-warn-bg: #2f27129b;
		--bf-critical: #e2685f;
		--bf-critical-bg: #341a1998;
		--bf-focus: #6fc2d1;
	}
}

.bf-app * { box-sizing: border-box; }
.bf-app h1, .bf-app h2, .bf-app h3 { font-family: "Fraunces", Georgia, serif; text-wrap: balance; margin: 0; }
.bf-app p { margin: 0 0 0.5rem; }
.bf-app a { color: inherit; }
.bf-app :focus-visible { outline: 2px solid var(--bf-focus); outline-offset: 2px; }
.bf-app select, .bf-app input, .bf-app textarea, .bf-app button { font-family: inherit; font-size: 0.95rem; color: var(--bf-ink); }
.bf-app .bf-tabular { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ---------- Gate / login ---------- */
.bf-gate {
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--bf-depth) 0%, var(--bf-bg) 62%);
	padding: 3rem 1.5rem;
}
.bf-gate-card {
	background: var(--bf-surface);
	border-radius: 12px;
	padding: 2.25rem 2rem;
	max-width: 380px;
	width: 100%;
	box-shadow: var(--bf-shadow);
	text-align: center;
}
.bf-gate-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--bf-ink-dim); margin-bottom: 0.4rem; }
.bf-wordmark { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 2rem; margin: 0 0 0.35rem; }
.bf-wordmark-sm { font-size: 1.15rem; text-decoration: none; }
.bf-gate-sub { color: var(--bf-ink-dim); margin-bottom: 1.5rem; }
.bf-gate-note { font-size: 0.82rem; color: var(--bf-ink-dim); margin-top: 1.25rem; }

.bf-gate-error {
	background: var(--bf-critical-bg);
	color: var(--bf-critical);
	border-radius: 8px;
	padding: 0.55rem 0.8rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: left;
	margin-bottom: 1rem;
}

.bf-login-form { text-align: left; display: flex; flex-direction: column; gap: 0.9rem; }
.bf-login-form label { display: block; font-size: 0.82rem; font-weight: 600; }
.bf-login-form label span { display: block; margin-bottom: 0.3rem; }
.bf-login-form input[type="text"],
.bf-login-form input[type="password"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--bf-border);
	border-radius: 8px;
	background: var(--bf-surface-3);
	font-weight: 400;
}
.bf-login-remember { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 400 !important; flex-direction: row !important; }
.bf-login-remember input[type="checkbox"] { width: auto; }
.bf-login-submit {
	width: 100%;
	justify-content: center;
	margin-top: 0.25rem;
	padding: 0.7rem 1rem;
}

/* ---------- Header / nav ---------- */
.bf-header {
	background: var(--bf-depth);
	color: var(--bf-depth-ink);
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.9rem 1.5rem;
	flex-wrap: wrap;
}
.bf-header .bf-wordmark-sm { color: var(--bf-depth-ink); }
.bf-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-right: auto; }
.bf-nav a { text-decoration: none; font-size: 0.9rem; opacity: 0.78; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.bf-nav a:hover { opacity: 1; }
.bf-nav a.is-active { opacity: 1; border-bottom-color: var(--bf-accent); }
.bf-header-right { display: flex; align-items: center; gap: 0.9rem; }
.bf-me { font-size: 0.85rem; opacity: 0.8; }
.bf-logout { text-decoration: none; opacity: 0.7; font-size: 0.85rem; }
.bf-logout:hover { opacity: 1; }

.bf-flash {
	margin: 1rem 1.5rem -0.5rem;
	background: var(--bf-good-bg);
	color: var(--bf-good);
	border-radius: 8px;
	padding: 0.6rem 0.9rem;
	font-size: 0.88rem;
	font-weight: 600;
}

/* ---------- Buttons ---------- */
.bf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.88rem;
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1.2;
}
.bf-btn-accent { background: var(--bf-accent); color: var(--bf-accent-ink); }
.bf-btn-accent:hover { filter: brightness(1.05); }
.bf-btn-ghost { background: transparent; border-color: var(--bf-border); color: var(--bf-ink); }
.bf-btn-ghost:hover { background: var(--bf-surface-2); }
.bf-btn-danger { background: transparent; border-color: var(--bf-critical); color: var(--bf-critical); }
.bf-btn-danger:hover { background: var(--bf-critical-bg); }
.bf-inline-form { display: inline; }

/* ---------- Stats ---------- */
.bf-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--bf-border);
	margin: 0 1.5rem 1.25rem;
	margin-top: 1.25rem;
	border-radius: 10px;
	overflow: hidden;
}
.bf-stat { background: var(--bf-surface); padding: 1rem 0.75rem; text-align: center; }
.bf-stat-num { display: block; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 600; color: var(--bf-depth); }
.bf-stat-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bf-ink-dim); margin-top: 0.2rem; }

/* ---------- Filters ---------- */
.bf-filters { padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.bf-filter-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.bf-filter-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bf-ink-dim); margin-right: 0.3rem; }
.bf-chip {
	text-decoration: none;
	font-size: 0.82rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--bf-border);
	color: var(--bf-ink-dim);
}
.bf-chip.is-active { background: var(--bf-depth); border-color: var(--bf-depth); color: var(--bf-depth-ink); }

/* ---------- Trip list ---------- */
.bf-triplist { padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.bf-triprow {
	display: flex;
	gap: 0.9rem;
	background: var(--bf-surface);
	border: 1px solid var(--bf-border);
	border-radius: 10px;
	padding: 0.7rem;
	text-decoration: none;
	color: var(--bf-ink);
	align-items: center;
}
.bf-triprow:hover { border-color: var(--bf-depth); }
.bf-triprow-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex: none; background: var(--bf-surface-2); display: flex; align-items: center; justify-content: center; }
.bf-triprow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-triprow-thumb-empty { color: var(--bf-ink-dim); font-size: 1.4rem; }
.bf-triprow-main { min-width: 0; flex: 1; }
.bf-triprow-top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.bf-triprow-boat { font-weight: 700; font-family: "Fraunces", serif; }
.bf-triprow-date { font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--bf-ink-dim); white-space: nowrap; }
.bf-triprow-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.82rem; color: var(--bf-ink-dim); margin-top: 0.15rem; }
.bf-dot { opacity: 0.5; }

.bf-pill { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.bf-pill-calm, .bf-pill-slight { background: var(--bf-good-bg); color: var(--bf-good); }
.bf-pill-moderate { background: var(--bf-warn-bg); color: var(--bf-warn); }
.bf-pill-rough, .bf-pill-very_rough { background: var(--bf-critical-bg); color: var(--bf-critical); }

.bf-empty { text-align: center; padding: 3rem 1rem; color: var(--bf-ink-dim); }
.bf-empty .bf-btn { margin-top: 0.75rem; }

/* ---------- Cards / detail ---------- */
.bf-trip-detail, .bf-report-head, .bf-table-wrap, .bf-progress, .bf-print-note, .bf-note-muted.bf-fleet-note { padding-left: 1.5rem; padding-right: 1.5rem; }
.bf-trip-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem 0.5rem; }
.bf-trip-title { font-size: 1.6rem; font-weight: 600; }
.bf-trip-sub { color: var(--bf-ink-dim); }
.bf-trip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; padding: 0.5rem 1.5rem; }
.bf-card { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 10px; padding: 1.1rem; margin: 0.5rem 1.5rem; }
.bf-trip-grid .bf-card { margin: 0; }
.bf-card h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.bf-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0; font-size: 0.9rem; }
.bf-dl dt { color: var(--bf-ink-dim); }
.bf-dl dd { margin: 0; }
.bf-note { font-size: 0.9rem; margin-top: 0.5rem; }
.bf-note-muted { color: var(--bf-ink-dim); }
.bf-crewlist, .bf-catchlist, .bf-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.bf-list { margin-bottom: 1rem; }

/* ---------- Gallery ---------- */
.bf-gallery-head { display: flex; justify-content: space-between; align-items: center; }
.bf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin: 0.75rem 0; }
.bf-gallery-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.bf-gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.bf-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-gallery-remove { position: absolute; top: 4px; right: 4px; margin: 0; }
.bf-gallery-remove-btn { width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(20, 20, 20, 0.6); color: #fff; cursor: pointer; line-height: 1; font-size: 0.9rem; }
.bf-upload-form { margin-top: 0.5rem; }

.bf-lightbox {
	position: fixed; inset: 0; background: rgba(10, 16, 17, 0.92);
	display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 2rem;
}
.bf-lightbox[hidden] { display: none; }
.bf-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.bf-lightbox-close { position: absolute; top: 1.2rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }

/* ---------- Forms ---------- */
.bf-form { padding: 0.5rem 1.5rem 1.5rem; }
.bf-form-compact { padding: 0; margin-top: 0.75rem; }
.bf-form-title { font-size: 1.5rem; margin-bottom: 1rem; }
.bf-fieldset { border: 1px solid var(--bf-border); border-radius: 10px; padding: 1rem 1.1rem 1.1rem; margin-bottom: 1rem; background: var(--bf-surface); }
.bf-fieldset legend { font-family: "Fraunces", serif; font-weight: 600; padding: 0 0.4rem; color: var(--bf-depth); }
.bf-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.bf-field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 160px; }
.bf-field-full { flex-basis: 100%; }
.bf-field span, .bf-field-label { font-size: 0.78rem; font-weight: 600; color: var(--bf-ink-dim); }
.bf-field input, .bf-field select, .bf-field textarea,
.bf-fieldset > textarea {
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--bf-border);
	border-radius: 7px;
	background: var(--bf-surface-3);
	width: 100%;
}
.bf-fieldset > textarea { margin-top: 0.3rem; }

.bf-repeat { margin-bottom: 0.5rem; }
.bf-repeat-rows { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; }
.bf-repeat-row { display: flex; gap: 0.5rem; align-items: center; }
.bf-repeat-row input { padding: 0.5rem 0.6rem; border: 1px solid var(--bf-border); border-radius: 7px; background: var(--bf-surface-3); flex: 1; }
.bf-repeat-remove { border: none; background: var(--bf-surface-2); color: var(--bf-ink-dim); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 1rem; flex: none; }
.bf-repeat-add { border: 1px dashed var(--bf-border); background: none; color: var(--bf-ink-dim); padding: 0.4rem 0.8rem; border-radius: 7px; cursor: pointer; font-size: 0.82rem; }
.bf-repeat-template { display: none; }

.bf-form-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bf-form-actions .bf-inline-form { margin-left: auto; }

/* The delete-trip / delete-service forms are deliberately rendered as
   their own block AFTER the main form's closing tag (see class-bf-
   shortcode.php) rather than nested inside .bf-form-actions — nesting
   <form> elements is invalid HTML and browsers merge them together. */
.bf-form-danger { padding: 0 1.5rem 1.5rem; margin-top: -0.5rem; }

.bf-field input[readonly] { background: var(--bf-surface-2); color: var(--bf-ink-dim); cursor: not-allowed; }
.bf-field input:disabled { background: var(--bf-surface-2); color: var(--bf-ink-dim); }

/* ---------- Choice fields (select existing / add new) ---------- */
.bf-choice-field { position: relative; }
.bf-choice-field-inline { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.bf-choice-new-input { margin-top: 0.3rem; }
.bf-choice-new-input[hidden] { display: none; }

/* ---------- Roster picker (crew on board) ---------- */
.bf-roster-picker { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.bf-roster-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; font-weight: 400; flex-wrap: wrap; }
.bf-roster-row input[type="checkbox"] { width: auto; flex: none; }
.bf-roster-row > span { flex: 1 1 160px; }
.bf-roster-role { flex: 1 1 160px; max-width: 220px; padding: 0.4rem 0.6rem; border: 1px solid var(--bf-border); border-radius: 6px; background: var(--bf-surface-3); }

.bf-badge-junior { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--bf-warn-bg); color: var(--bf-warn); vertical-align: middle; }

/* ---------- Boats & crew ---------- */
.bf-boat-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.bf-boat-card-actions { display: flex; gap: 0.5rem; align-items: center; }
.bf-btn-sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.bf-pill-inactive { background: var(--bf-critical-bg); color: var(--bf-critical); }
.bf-pill-skipper { background: var(--bf-depth); color: var(--bf-depth-ink); }
.bf-pill-crew { background: var(--bf-surface-2); color: var(--bf-ink-dim); }
.bf-person-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bf-person-actions { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; white-space: nowrap; }
.bf-person-actions a { text-decoration: underline; }
.bf-link-btn { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }

/* ---------- Boat service checklist ---------- */
.bf-service-checklist-items { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.bf-checklist-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; font-weight: 400; }
.bf-checklist-item input[type="checkbox"] { width: auto; margin-top: 0.2rem; flex: none; }

/* ---------- Reports ---------- */
.bf-report-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; padding-bottom: 0.75rem; }
.bf-report-controls { display: flex; gap: 0.6rem; align-items: center; }
.bf-report-controls select { padding: 0.5rem 0.7rem; border-radius: 7px; border: 1px solid var(--bf-border); background: var(--bf-surface); }

.bf-progress { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.bf-progress-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--bf-surface-2); overflow: hidden; }
.bf-progress-fill { height: 100%; background: var(--bf-accent); }

.bf-table-wrap { overflow-x: auto; margin-bottom: 0.75rem; }
.bf-table { width: 100%; border-collapse: collapse; background: var(--bf-surface); border-radius: 10px; overflow: hidden; font-size: 0.85rem; }
.bf-table th, .bf-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--bf-border); text-align: left; white-space: nowrap; }
.bf-table thead th { background: var(--bf-surface-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-ink-dim); }
.bf-table tfoot td { background: var(--bf-surface-3); }
.bf-print-only { display: none; }
.bf-print-note { color: var(--bf-ink-dim); font-size: 0.82rem; padding-bottom: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.bf-stats { grid-template-columns: repeat(2, 1fr); }
	.bf-trip-grid { grid-template-columns: 1fr; }
	.bf-header { padding: 0.8rem 1rem; }
	.bf-triplist, .bf-filters, .bf-form, .bf-trip-detail-head, .bf-report-head { padding-left: 1rem; padding-right: 1rem; }
	.bf-card { margin-left: 1rem; margin-right: 1rem; }
}

/* ---------- Print (SAMSA sheets) ---------- */
@media print {
	.bf-header, .bf-flash, .bf-report-controls .bf-print-btn, .bf-print-note { display: none !important; }
	.bf-app { box-shadow: none; max-width: none; }
	.bf-print-only { display: table-cell; min-width: 110px; }
	.bf-table { font-size: 11px; }
}