/* Copyright (c) 2026, Cognosys (Pty) Ltd */

/* ---------- Layout & tokens ---------- */
.bd-portal-container {
	--bd-primary: #2563eb;
	--bd-primary-hover: #1d4ed8;
	--bd-danger: #ef4444;
	--bd-danger-hover: #dc2626;
	--bd-muted: #6b7280;
	--bd-muted-hover: #4b5563;
	--bd-surface: #f9fafb;
	--bd-surface-border: #e5e7eb;
	--bd-radius: 6px;
	--bd-radius-lg: 8px;
	font-size: 1.0em;
	max-width: 500px;
	margin: 0 auto;
	padding: 5px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--text-color, #1f2937);
}

.bd-header { margin-bottom: 20px; }
.bd-header__title { font-size: 1.3em; margin: 0; }
.bd-header__subtitle { color: var(--text-muted, #666); font-size: 0.9em; }

.text-muted { color: var(--text-muted, #666); }
.text-danger { color: var(--bd-danger, #ef4444); }

/* ---------- Form ---------- */
.bd-form {
	background: var(--card-bg, #fff);
	padding: 10px;
	border: 1px solid var(--border-color, #ddd);
	border-radius: var(--bd-radius-lg);
	margin-bottom: 20px;
}
.bd-form-group { margin-bottom: 15px; }
.bd-form-label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--text-color, #374151);
}
.bd-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.bd-label-row .bd-form-label { margin-bottom: 10px; }
.bd-form-input,
.bd-form-textarea,
.bd-form-file {
	width: 100%;
	padding: 8px 0 8px 5px;
	border: 1px solid var(--border-color, #ccc);
	border-radius: 4px;
	background: var(--card-bg, #fff);
	color: var(--text-color, #1f2937);
	font: inherit;
}
.bd-form-textarea { min-height: 80px; resize: vertical; }
.bd-form-input,
.bd-form-textarea,
.bd-form-file,
.bd-attachment-type,
.bd-attachment-comm,
.db-report-date,
.bd-file-name {
	font-size: 0.85em;
}
.bd-media-type,
.bd-form-input::placeholder,
.bd-form-textarea::placeholder {
	font-size: 0.8em;
	color: var(--text-muted, #999);
}

/* ---------- Collapsible sections ---------- */
/* Both sections share this wrapper, so their headings and their content align by construction, no per-section padding to keep in sync */
.bd-section { margin-bottom: 20px; }
.bd-section .bd-form { margin-bottom: 0; }   /* the section owns the spacing */

.bd-section-header {
	display: flex;
	align-items: center;
	margin: 0 0 10px 0;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-color, #1f2937);
}

/* The toggle fills the heading so the whole bar is the click target*/
/* Site Progress has no toggle, the absence of a chevron is the signal that it doesn't collapse */
.bd-section-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.bd-section-toggle__label { flex: 1 1 auto; }

.bd-section-count {
	flex: none;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
}
.bd-section-count:empty { display: none; }					/* no stray gap when the list is empty */

.bd-section-chevron {
	flex: none;
	font-size: 0.8em;
	color: var(--text-muted, #6b7280);
	transition: transform 0.15s ease;   /* same speed as the filter chevron */
}
.bd-section-toggle[aria-expanded="false"] .bd-section-chevron {
	transform: rotate(-90deg);
}

.bd-section-body[hidden] { display: none; }

/* Mirrors .bd-form: one bordered card per section, holding that section's controls
	The flex column + gap keeps toolbar / chips / panel evenly spaced and collapses cleanly when any one of them is absent */
.bd-controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #ddd);
	border-radius: var(--bd-radius-lg);
	padding: 10px;
	margin-bottom: 10px;
}

/* ---------- Buttons (one system for every button on the page) ---------- */
.bd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: var(--bd-radius);
	font-size: 1em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.bd-btn:active { transform: scale(0.98); }
.bd-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bd-btn--primary { background: var(--bd-primary); color: #fff; }
.bd-btn--primary:hover { background: var(--bd-primary-hover); }
.bd-btn--muted { background: var(--bd-muted); color: #fff; }
.bd-btn--muted:hover { background: var(--bd-muted-hover); }
.bd-btn--danger { background: var(--bd-danger); color: #fff; }
.bd-btn--danger:hover { background: var(--bd-danger-hover); }

/* Fixed-size icon-only buttons — mic / add / remove all match this box */
.bd-btn.bd-icon-btn,
.bd-icon-btn {
	width: 32px;
	height: 32px;
	flex: none;
	padding: 0;
}
.bd-icon-btn i { font-size: 14px; line-height: 1; }

/* ---------- Voice input ---------- */
/* .bd-voice-input-wrap { position: relative; display: block; } */
/* .bd-voice-input-wrap .bd-form-textarea { padding-right: 40px; } */

.bd-voice-btn {
	/* position: absolute; */
	/* right: 8px; */
	/* bottom: 8px; */
	/* border-radius: 50%; */
	/* circle overrides the square from .bd-icon-btn */
	/* background: var(--bd-surface); */
	background: var(--bd-muted);
	color: #fff;
	/* color: var(--bd-muted); */
	transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
/* .bd-voice-btn:hover { background: var(--bd-surface-border); color: #374151; } */
.bd-voice-btn:hover { background: var(--bd-muted-hover); }
.bd-voice-btn:active { transform: scale(0.95); }
.bd-voice-btn--recording {
	background: var(--bd-danger-hover);
	color: #fff;
	animation: bd-pulse 1.2s infinite;
}
.bd-voice-btn--recording:hover { background: #b91c1c; }
@keyframes bd-pulse {
	0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
	70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.bd-voice-progress { display: block; margin-top: 4px; font-size: 0.8em; min-height: 1.2em; }

/* ---------- Attachments uploader ---------- */
.bd-attachments-section { margin-bottom: 10px; }
.bd-attachment-row {
	display: flex;
	gap: 3px;
	align-items: flex-start;
	margin-bottom: 3px;
	background: var(--bd-surface);
	padding: 10px 0 5px 0;
	border-radius: var(--bd-radius);
	border: 1px solid var(--bd-surface-border);
}
.bd-attachment-row .bd-attachment-type { flex: 0 1 20%; min-width: 0; }
.bd-attachment-row .bd-attachment-file { flex: 0 1 35%; min-width: 0; }
/* now it won't grow beyond 70px */
/* .bd-attachment-row .bd-attachment-file { flex: 0 1 70px; min-width: 50px; width: auto; } */
.bd-attachment-row .bd-attachment-comm { flex: 0 1 45%; min-width: 0; }
/* File upload wrapper, aligns icon and filename */
.bd-file-upload-wrapper {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}
.bd-file-name {
	font-size: 0.8em;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;  /* adjust to your liking */
}

.bd-file-name--selected {
	color: var(--text-color, #1f2937);
	font-weight: 500;
}

/* ---------- Report cards ---------- */
.bd-card {
	background: var(--card-bg, #fff);
	padding: 15px;
	border: 1px solid var(--border-color, #ddd);
	border-radius: var(--bd-radius-lg);
	margin-bottom: 10px;
}
.bd-card__header { display: flex; justify-content: space-between; margin-bottom: 5px; }

/* Uniform thumbnails — every photo is exactly the same box */
/* width + height + object-fit: cover is what makes them all identical regardless of the source aspect ratio */
/* 80px is a good default for a 500px-wide container */
/* If you want slightly larger, 100px still fits 4 across in a row; if you want them tiny, 64px */
/* Just keep width and height equal */
/* ---------- Attachment thumbnails ---------- */
.bd-attachments-list {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bd-thumb-link {
	display: inline-flex;
	text-decoration: none;
	line-height: 0;
}

/* Fixed box — every thumbnail is exactly the same size */
.bd-thumb {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--bd-surface-border);
	background: var(--bd-surface);
}

.bd-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* crops instead of squashing */
	display: block;
	transition: transform 0.15s ease;
}

.bd-thumb-link:hover .bd-card__img {
	transform: scale(1.06);
}

/* Category badge (Photo / Invoice / Document / Other) overlaid on the thumbnail */
.bd-thumb__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 0.65em;
	font-weight: 500;
	line-height: 1.4;
	padding: 1px 5px;
	border-top-right-radius: 4px;
	pointer-events: none;
}

/* Non-image attachments: same box as a thumbnail, with a centred icon */
.bd-thumb--file {
	display: flex;						/* overrides inline-block from .bd-thumb */
	align-items: center;
	justify-content: center;
	color: var(--bd-muted);
}
.bd-thumb--file i {
	font-size: 28px;
	line-height: 1;
	transition: transform 0.15s ease, color 0.15s ease;
}
.bd-thumb-link:hover .bd-thumb--file i {
	transform: scale(1.06);      /* matches the image zoom */
	color: var(--bd-primary);
}

.bd-card__img:hover {
	transform: scale(1.05);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bd-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.bd-badge {
	display: inline-block;
	background: var(--bd-surface-border);
	color: #374151;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.75em;
	font-weight: 500;
}

.bd-attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	margin-right: 10px;
	color: var(--bd-primary);
	text-decoration: none;
	font-size: 0.9em;
	background: #eff6ff;
	padding: 4px 8px;
	border-radius: 4px;
}
.bd-attachment-link:hover { text-decoration: underline; }
.bd-attachment-link i { font-size: 0.9em; }

/* ---------- Search / Filter toolbar ---------- */
.bd-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	/* margin-bottom removed — .bd-controls gap handles it */
}
.bd-toolbar .bd-form-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;						/* overrides .bd-form-input's width: 100% */
}

/* Chips row only takes vertical space when there's something to show */
.bd-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-active-chips:empty { display: none; }   /* drops out of the flex column entirely */

/* Clear-all sits on the chips row, chip-sized but visually distinct, dashed outline so it reads as an action, not another filter */
.bd-clear-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 1px dashed var(--bd-surface-border);
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 0.75em;
	color: var(--bd-muted);
	cursor: pointer;
}
.bd-clear-all:hover {
	border-color: var(--bd-danger);
	color: var(--bd-danger);
}

/* Active state for the toolbar buttons — same box, primary fill */
.bd-btn.bd-icon-btn.bd-icon-btn--active {
	background: var(--bd-primary);
	color: #fff;
}

/* Active filter chips (visible when the panel is collapsed) */
.bd-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #eff6ff;
	color: var(--bd-primary);
	border: none;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 0.75em;
	cursor: pointer;
}
.bd-active-chip:hover { background: #dbeafe; }
.bd-active-chip i { font-size: 0.8em; }

/* ---------- Filter panel ---------- */
/* Expands inside .bd-controls, separated by a rule rather than a second border
	The 8px gap above plus 8px padding below centres the divider. */
.bd-filter-panel {
	padding-top: 8px;
	border-top: 1px solid var(--bd-surface-border);
}
.bd-filter-panel .bd-form-group:last-child { margin-bottom: 0; }

/* Date preset chips */
.bd-date-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-chip {
	background: var(--card-bg, #fff);
	border: 1px solid var(--bd-surface-border);
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 0.78em;
	color: var(--text-color, #374151);
	cursor: pointer;
}
.bd-chip:hover { border-color: var(--bd-muted); }
.bd-chip--active {
	background: var(--bd-primary);
	border-color: var(--bd-primary);
	color: #fff;
}

/* Custom date range */
.bd-custom-range {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}
.bd-custom-range .bd-form-input { flex: 1 1 auto; min-width: 0; }
.bd-custom-range .text-muted { font-size: 0.8em; flex: none; }