/**
 * Files & photos — the in-record panel.
 *
 * ⚠️ EVERY THEME VARIABLE CARRIES A FALLBACK. The --pbjcrm-* tokens are
 * painted at runtime by PBJ_CRM_Theme, and this stylesheet can load on a
 * request where they have not been emitted (a module mounting the panel
 * outside the portal). A var() with no fallback resolves to nothing at all,
 * which is how a panel ends up with black text on a black card — the exact
 * defect that shipped once already on the dark preset.
 *
 * @package PBJ_CRM
 */

.pbjcrm-files {
	position: relative;
	display: block;
}

/* ------------------------------------------------------------- Toolbar */

.pbjcrm-files-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pbjcrm-space-sm, 8px );
	margin-bottom: var( --pbjcrm-space, 16px );
}

.pbjcrm-files-input {
	display: none;
}

.pbjcrm-files-hint {
	color: var( --pbjcrm-text-soft, #6b7280 );
	font-size: 0.9em;
}

/* --------------------------------------------------------- Drag target */

.pbjcrm-files-drophint {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	border: 2px dashed var( --pbjcrm-accent, #2271b1 );
	border-radius: var( --pbjcrm-radius, 6px );
	background: var( --pbjcrm-accent-soft, rgba( 34, 113, 177, 0.12 ) );
	color: var( --pbjcrm-text, #1f2328 );
	font-weight: 600;
	pointer-events: none;
	z-index: 5;
}

/* The whole panel is the drop target, not a small dashed square. A small
   square is the single most common complaint about file uploaders. */
.pbjcrm-files.is-dropping .pbjcrm-files-drophint {
	display: flex;
}

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

.pbjcrm-files-progress:empty {
	display: none;
}

.pbjcrm-files-progress-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 120px auto;
	align-items: center;
	gap: var( --pbjcrm-space-sm, 8px );
	padding: 6px 0;
	font-size: 0.9em;
}

.pbjcrm-files-progress-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --pbjcrm-text, #1f2328 );
}

.pbjcrm-files-progress-bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var( --pbjcrm-surface-alt, #eef1f5 );
	overflow: hidden;
}

.pbjcrm-files-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var( --pbjcrm-accent, #2271b1 );
	transition: width 0.2s ease;
}

.pbjcrm-files-progress-note {
	color: var( --pbjcrm-text-soft, #6b7280 );
	white-space: nowrap;
}

.pbjcrm-files-progress-row.is-failed .pbjcrm-files-progress-note {
	color: var( --pbjcrm-danger, #b91c1c );
	white-space: normal;
}

.pbjcrm-files-progress-row.is-failed .pbjcrm-files-progress-fill {
	background: var( --pbjcrm-danger, #b91c1c );
}

/* --------------------------------------------------------------- Groups */

.pbjcrm-files-group {
	margin-bottom: var( --pbjcrm-space, 16px );
	border: 1px solid var( --pbjcrm-border, #d8dde3 );
	border-radius: var( --pbjcrm-radius, 6px );
	background: var( --pbjcrm-surface, #ffffff );
	overflow: hidden;
}

.pbjcrm-files-group-head {
	display: flex;
	align-items: center;
	gap: var( --pbjcrm-space-sm, 8px );
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-left: 4px solid var( --pbjcrm-border-strong, #b9c1cb );
	background: var( --pbjcrm-surface-alt, #f6f7f9 );
	color: var( --pbjcrm-text, #1f2328 );
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-files-group-head:hover {
	background: var( --pbjcrm-surface-hover, #eceff3 );
}

.pbjcrm-files-group-head:focus-visible {
	outline: 2px solid var( --pbjcrm-focus-ring, #2271b1 );
	outline-offset: -2px;
}

.pbjcrm-files-caret {
	color: var( --pbjcrm-text-soft, #6b7280 );
}

.pbjcrm-files-group-count {
	color: var( --pbjcrm-text-soft, #6b7280 );
	font-weight: 400;
}

/* ----------------------------------------------------------- The grid */

.pbjcrm-files-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 132px, 1fr ) );
	gap: var( --pbjcrm-space-sm, 8px );
	padding: var( --pbjcrm-space-sm, 8px );
}

.pbjcrm-files-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 6px;
	border: 1px solid var( --pbjcrm-border, #d8dde3 );
	border-radius: var( --pbjcrm-radius-sm, 4px );
	background: var( --pbjcrm-surface, #ffffff );
	color: var( --pbjcrm-text, #1f2328 );
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-files-tile:hover {
	border-color: var( --pbjcrm-accent, #2271b1 );
}

.pbjcrm-files-tile:focus-visible {
	outline: 2px solid var( --pbjcrm-focus-ring, #2271b1 );
	outline-offset: 1px;
}

.pbjcrm-files-thumb {
	display: block;
	width: 100%;
	height: 108px;
	object-fit: cover;
	border-radius: var( --pbjcrm-radius-sm, 4px );
	background: var( --pbjcrm-surface-alt, #eef1f5 );
}

.pbjcrm-files-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 108px;
	border-radius: var( --pbjcrm-radius-sm, 4px );
	background: var( --pbjcrm-surface-alt, #eef1f5 );
	color: var( --pbjcrm-text-soft, #6b7280 );
	font-weight: 700;
	letter-spacing: 0.05em;
}

.pbjcrm-files-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.85em;
}

.pbjcrm-files-size {
	color: var( --pbjcrm-text-soft, #6b7280 );
	font-size: 0.78em;
}

.pbjcrm-files-shared {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 1px 6px;
	border-radius: var( --pbjcrm-radius-pill, 999px );
	background: var( --pbjcrm-success, #15803d );
	color: #ffffff;
	font-size: 0.7em;
	font-weight: 600;
}

.pbjcrm-files-empty {
	padding: var( --pbjcrm-space, 16px );
	color: var( --pbjcrm-text-soft, #6b7280 );
}

/* File preview shell, focus, navigation and phone transform are owned by the
   CRM suiteDialog media mode. This bundle styles only file content. */

.pbjcrm-files-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	max-height: 90vh;
	background: #111111;
	overflow: hidden;
}

.pbjcrm-files-full {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
}

.pbjcrm-files-pdf {
	width: 100%;
	height: 90vh;
	border: 0;
	background: #ffffff;
}

.pbjcrm-files-noplay {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px;
	color: #f3f4f6;
	text-align: center;
}

.pbjcrm-files-side {
	padding: var( --pbjcrm-space, 16px );
	overflow-y: auto;
	background: var( --pbjcrm-surface, #ffffff );
}

.pbjcrm-files-title {
	margin: 0 0 8px;
	font-size: 1.05em;
	word-break: break-word;
	color: var( --pbjcrm-text, #1f2328 );
}

.pbjcrm-files-facts {
	margin: 0 0 var( --pbjcrm-space, 16px );
	padding: 0;
	list-style: none;
	color: var( --pbjcrm-text-soft, #6b7280 );
	font-size: 0.88em;
}

.pbjcrm-files-facts li {
	padding: 2px 0;
}

/* Pinned rather than inherited: two links in one list rendered different
   colours once because one of them was :visited, and nobody could see why. */
.pbjcrm-files-map,
.pbjcrm-files-map:visited {
	color: var( --pbjcrm-link, #2271b1 );
}

/* ---------------------------------------------------------- Label chips */

.pbjcrm-files-tags h4 {
	margin: 0 0 6px;
	font-size: 0.9em;
	color: var( --pbjcrm-text, #1f2328 );
}

.pbjcrm-files-tags.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.pbjcrm-files-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.pbjcrm-files-chip {
	padding: 3px 10px;
	border: 1px solid var( --pbjcrm-pill-border, #d8dde3 );
	border-radius: var( --pbjcrm-radius-pill, 999px );
	background: var( --pbjcrm-pill-bg, #f2f4f7 );
	color: var( --pbjcrm-pill-text, #1f2328 );
	font: inherit;
	font-size: 0.82em;
	cursor: pointer;
}

.pbjcrm-files-chip.is-on {
	border-color: var( --pbjcrm-pill-on-border, #2271b1 );
	background: var( --pbjcrm-pill-on-bg, #2271b1 );
	color: var( --pbjcrm-pill-on-text, #ffffff );
}

.pbjcrm-files-newtag {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var( --pbjcrm-border, #d8dde3 );
	border-radius: var( --pbjcrm-radius-sm, 4px );
	background: var( --pbjcrm-surface, #ffffff );
	color: var( --pbjcrm-text, #1f2328 );
	font: inherit;
}

/* ------------------------------------------------------- Sharing switch */

.pbjcrm-files-share {
	margin: var( --pbjcrm-space, 16px ) 0;
	padding: 10px;
	border: 1px solid var( --pbjcrm-border, #d8dde3 );
	border-radius: var( --pbjcrm-radius-sm, 4px );
	background: var( --pbjcrm-surface-alt, #f6f7f9 );
}

.pbjcrm-files-share-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --pbjcrm-text, #1f2328 );
	font-weight: 600;
	cursor: pointer;
}

.pbjcrm-files-share-note {
	margin: 6px 0 0;
	color: var( --pbjcrm-text-soft, #6b7280 );
	font-size: 0.82em;
}

/* -------------------------------------------------------------- Actions */

.pbjcrm-files-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pbjcrm-files-remove {
	border-color: var( --pbjcrm-danger, #b91c1c );
	color: var( --pbjcrm-danger, #b91c1c );
}

/* ------------------------------------------------------------- Phones */

@media ( max-width: 782px ) {
	.pbjcrm-files-stage {
		max-height: 50vh;
	}

	.pbjcrm-files-full {
		max-height: 50vh;
	}

	.pbjcrm-files-pdf {
		height: 50vh;
	}

	.pbjcrm-files-grid {
		grid-template-columns: repeat( auto-fill, minmax( 108px, 1fr ) );
	}

	.pbjcrm-files-thumb,
	.pbjcrm-files-icon {
		height: 88px;
	}
}