/*
 * sw-production.css
 * Path: wp-content/plugins/showwhisper/assets/css/sw-production.css
 *
 * Styles for ShowWhisper front-end templates:
 *   [showwhisper_dashboard]  — production grid
 *   [showwhisper_signup]     — registration form
 *   [showwhisper_landing]    — plugin about / donate page
 *
 * Mobile-first: base styles target phones, media queries expand upward.
 */

/* ======================================================================
   DESIGN TOKENS
   ====================================================================== */

:root {
	--fp-bg:          #f5f5f2;
	--fp-surface:     #ffffff;
	--fp-border:      #e2e2de;
	--fp-text:        #1a1a1a;
	--fp-text-muted:  #777;
	--fp-primary:     #2563eb;
	--fp-primary-dk:  #1d4ed8;
	--fp-success:     #16a34a;
	--fp-error:       #dc2626;
	--fp-radius:      10px;
	--fp-shadow:      0 2px 16px rgba(0,0,0,.10);
}

/* ======================================================================
   SHARED BUTTONS
   ====================================================================== */

.fp-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.2rem;
	font: 600 0.9rem/1 system-ui, sans-serif;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, opacity 0.15s;
	white-space: nowrap;
}

.fp-btn--primary {
	background: var(--fp-primary);
	color: #fff;
}
.fp-btn--primary:hover { background: var(--fp-primary-dk); color: #fff; }

.fp-btn--secondary {
	background: var(--fp-surface);
	color: var(--fp-text);
	border: 1px solid var(--fp-border);
}
.fp-btn--secondary:hover { background: #f0f0ec; }

.fp-btn--donate {
	background: #ff5e5b;
	color: #fff;
	font-size: 1.05rem;
	padding: 0.8rem 1.6rem;
}
.fp-btn--donate:hover { background: #e04e4b; color: #fff; }

.fp-btn--full  { width: 100%; justify-content: center; }
.fp-btn--lg    { font-size: 1rem; padding: 0.8rem 1.8rem; }

/* ======================================================================
   NOTICES
   ====================================================================== */

.fp-notice {
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font: 0.9rem/1.4 system-ui, sans-serif;
	margin-bottom: 1rem;
}
.fp-notice--error   { background: #fef2f2; border: 1px solid #fca5a5; color: var(--fp-error); }
.fp-notice--success { background: #f0fdf4; border: 1px solid #86efac; color: var(--fp-success); }

/* ======================================================================
   SUITE NAVIGATION BAR  (between editor / dashboard / production pages)
   ====================================================================== */

.fe-suite-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 2rem;
	margin-bottom: 0.75rem;
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 0.875rem;
}

.fe-suite-nav__link {
	color: #4a5568;
	text-decoration: none;
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s;
}

.fe-suite-nav__link:hover {
	background: #e2e8f0;
	color: #1a202c;
	text-decoration: none;
}

.fe-suite-nav__link--right {
	margin-left: auto;
}

@media (max-width: 600px) {
	.fe-suite-nav { padding: 0.4rem 0.75rem; }
}

/* ======================================================================
   DASHBOARD
   ====================================================================== */

.fp-dashboard {
	padding: 0.25rem 0;
}

.fp-dash-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.fp-dash-title {
	margin: 0;
	font: 700 1.4rem/1 system-ui, sans-serif;
	color: var(--fp-text);
}

/* Empty state */
.fp-empty-state {
	text-align: center;
	padding: 3rem 1.5rem;
	background: var(--fp-surface);
	border: 1px dashed var(--fp-border);
	border-radius: var(--fp-radius);
}
.fp-empty-icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 1rem;
}
.fp-empty-state h3 {
	margin: 0 0 0.5rem;
	font: 700 1.1rem/1 system-ui, sans-serif;
}
.fp-empty-state p {
	color: var(--fp-text-muted);
	max-width: 420px;
	margin: 0 auto;
}

/* Production card grid */
.fp-prod-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 540px) {
	.fp-prod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.fp-prod-grid { grid-template-columns: repeat(3, 1fr); }
}

.fp-prod-card {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	box-shadow: var(--fp-shadow);
	transition: box-shadow 0.15s;
}
.fp-prod-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.14); }
.fp-prod-card--archived { opacity: 0.65; }

.fp-prod-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.fp-prod-card__title {
	margin: 0;
	font: 700 1rem/1.3 system-ui, sans-serif;
	color: var(--fp-text);
}

.fp-prod-card__desc {
	margin: 0;
	font: 0.86rem/1.45 system-ui, sans-serif;
	color: var(--fp-text-muted);
	flex: 1;
}

.fp-prod-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font: 0.8rem/1 system-ui, sans-serif;
	color: var(--fp-text-muted);
}
.fp-meta-icon { margin-right: 0.2rem; }
.fp-meta-status--active   { color: #16a34a; font-weight: 600; }
.fp-meta-status--archived { color: #94a3b8; }
.fp-meta-status--draft    { color: #d97706; font-weight: 600; }

.fp-prod-card__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

/* Mode / status badges */
.fp-badge {
	display: inline-block;
	padding: 0.18rem 0.55rem;
	border-radius: 20px;
	font: 600 0.75rem/1 system-ui, sans-serif;
	white-space: nowrap;
	flex-shrink: 0;
}
.fp-badge--single_user  { background: #f0f0ec; color: #555; }
.fp-badge--multi_user   { background: #dbeafe; color: #1e40af; }

/* ======================================================================
   SIGNUP FORM
   ====================================================================== */

.fp-signup-wrap {
	display: flex;
	justify-content: center;
	padding: 2rem 1rem;
}

.fp-signup-card {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 2rem 1.75rem;
	width: min(460px, 100%);
	box-shadow: var(--fp-shadow);
	text-align: center;
}

.fp-signup-icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

.fp-signup-title {
	margin: 0 0 0.4rem;
	font: 700 1.4rem/1 system-ui, sans-serif;
}

.fp-signup-subtitle {
	color: var(--fp-text-muted);
	font: 0.9rem/1.4 system-ui, sans-serif;
	margin: 0 0 1.5rem;
}

.fp-form { text-align: left; }

.fp-form-group {
	margin-bottom: 1rem;
}

.fp-form-label {
	display: block;
	font: 600 0.83rem/1 system-ui, sans-serif;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.35rem;
}

.fp-required { color: var(--fp-error); }

.fp-form-input {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: 0.97rem/1 system-ui, sans-serif;
	border: 1px solid var(--fp-border);
	border-radius: 6px;
	background: #fafaf8;
	outline: none;
	transition: border-color 0.12s, background 0.12s;
	box-sizing: border-box;
}
.fp-form-input:focus {
	border-color: var(--fp-primary);
	background: #fff;
}

.fp-form-footer {
	text-align: center;
	font: 0.84rem/1 system-ui, sans-serif;
	color: var(--fp-text-muted);
	margin-top: 1rem;
}
.fp-form-footer a { color: var(--fp-primary); }

/* ======================================================================
   LANDING PAGE
   ====================================================================== */

.fp-landing {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem 4rem;
}

/* Hero */
.fp-hero {
	text-align: center;
	padding: 4rem 1rem 3rem;
}
.fp-hero__icon {
	font-size: 4rem;
	line-height: 1;
	margin-bottom: 1rem;
}
.fp-hero__title {
	font: 800 2.2rem/1.1 system-ui, sans-serif;
	color: var(--fp-text);
	margin: 0 0 0.75rem;
}
.fp-hero__tagline {
	font: 1.05rem/1.55 system-ui, sans-serif;
	color: var(--fp-text-muted);
	max-width: 580px;
	margin: 0 auto 2rem;
}
.fp-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

@media (min-width: 640px) {
	.fp-hero__title { font-size: 2.8rem; }
}

/* Features */
.fp-features {
	padding: 2.5rem 0;
}
.fp-features__title {
	text-align: center;
	font: 700 1.5rem/1 system-ui, sans-serif;
	margin-bottom: 1.75rem;
}
.fp-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 540px) {
	.fp-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.fp-features__grid { grid-template-columns: repeat(4, 1fr); }
}

.fp-feature-card {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 1.25rem;
	box-shadow: var(--fp-shadow);
}
.fp-feature-card__icon { font-size: 1.8rem; margin-bottom: 0.6rem; }
.fp-feature-card h3 {
	margin: 0 0 0.5rem;
	font: 700 0.97rem/1 system-ui, sans-serif;
}
.fp-feature-card p {
	margin: 0;
	font: 0.85rem/1.5 system-ui, sans-serif;
	color: var(--fp-text-muted);
}

/* Formats + Cloud sections */
.fp-formats,
.fp-cloud {
	padding: 2rem 0;
	border-top: 1px solid var(--fp-border);
}
.fp-formats h2,
.fp-cloud h2 {
	font: 700 1.25rem/1 system-ui, sans-serif;
	margin-bottom: 0.5rem;
}
.fp-formats p,
.fp-cloud p {
	color: var(--fp-text-muted);
	max-width: 680px;
	line-height: 1.55;
}

/* Donate section */
.fp-donate {
	padding: 3rem 0;
	border-top: 1px solid var(--fp-border);
}
.fp-donate__inner {
	text-align: center;
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 2.5rem 1.5rem;
	box-shadow: var(--fp-shadow);
}
.fp-donate__title {
	font: 700 1.5rem/1 system-ui, sans-serif;
	margin-bottom: 0.75rem;
}
.fp-donate__body {
	color: var(--fp-text-muted);
	max-width: 480px;
	margin: 0 auto 1.5rem;
	line-height: 1.55;
}
.fp-donate__also {
	margin-top: 1.25rem;
	font: 0.85rem/1.4 system-ui, sans-serif;
	color: var(--fp-text-muted);
}
.fp-donate__also a { color: var(--fp-primary); }

/* ============================================================
   PRODUCTION MANAGEMENT VIEW  ([showwhisper_production])
   ============================================================ */

.fp-prod-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem 3rem;
	/* Ensure any theme overflow:hidden on an ancestor doesn't clip the editor.
	   overflow:visible on a child cannot un-clip a parent, but setting it here
	   documents intent and prevents accidental clipping added inside this plugin. */
	overflow: visible;
}

/* ======================================================================
   SUITE DESIGN ALIGNMENT (2026-07-07)
   The manager tabs rendered their content directly on the flat theme
   background with the THEME's serif headings, so they read as "plain
   WordPress" next to the dashboard/editor. Fix: (1) force the suite's
   sans-serif everywhere in the manager so no theme serif leaks in, and
   (2) put each tab's content on a white "page" card using the existing
   design tokens — mirroring the dashboard's card look.
   ====================================================================== */

/* (1) Typography — override the theme's heading/body fonts inside the manager. */
.fp-prod-wrap,
.fp-prod-wrap h1, .fp-prod-wrap h2, .fp-prod-wrap h3, .fp-prod-wrap h4,
.fp-prod-wrap p, .fp-prod-wrap span, .fp-prod-wrap label,
.fp-prod-wrap input, .fp-prod-wrap select, .fp-prod-wrap textarea,
.fp-prod-wrap button, .fp-prod-wrap a {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.fp-prod-wrap h1, .fp-prod-wrap h2, .fp-prod-wrap h3, .fp-prod-wrap h4 {
	color: var(--fp-text);
	letter-spacing: -0.01em;
}

/* (2) Each tab's content on a contained white card, not floating on grey. */
.fp-tab-panel {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	box-shadow: var(--fp-shadow);
	padding: 1.5rem 1.75rem 2rem;
	margin-top: 1.25rem;
}
@media (max-width: 820px) {
	.fp-tab-panel { padding: 1.1rem 1rem 1.5rem; }
}

/* Header reads as a page header above the card. */
.fp-prod-header { border-bottom: none; }
.fp-tabs { margin-bottom: 0; }

/* Header */
.fp-prod-header {
	padding: 1.5rem 0 1rem;
	border-bottom: 1px solid var(--fp-border);
	margin-bottom: 0;
}

.fp-prod-header__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}

.fp-prod-title {
	font: 700 1.75rem/1.2 system-ui, sans-serif;
	margin: 0;
}

/* Script tab: links to editor and reader pages */
.fp-script-links {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

/* Convert to Database — subtle link in Script tab */
.fp-convert-db-hint {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	color: var(--fp-text-muted, #64748b);
	text-align: right;
}
.fp-convert-db-btn {
	color: var(--fp-text-muted, #64748b);
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}
.fp-convert-db-btn:hover { color: var(--fp-primary, #2271b1); }

/* Header inline search bar */
.fp-header-search {
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: auto;
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: 6px;
	overflow: hidden;
}
.fp-header-search__input {
	border: none;
	outline: none;
	padding: 0.45rem 0.75rem;
	font: 0.9rem/1.4 system-ui, sans-serif;
	background: transparent;
	width: 220px;
	color: var(--fp-text);
}
.fp-header-search__input::placeholder { color: var(--fp-text-muted); }
.fp-header-search__btn {
	border: none;
	background: transparent;
	padding: 0.45rem 0.7rem;
	cursor: pointer;
	color: var(--fp-text-muted);
	font-size: 1rem;
	line-height: 1;
}
.fp-header-search__btn:hover { color: var(--fp-primary); }

/* Search results (now below the header) */
.fp-search-results {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 1rem;
	margin-bottom: 1rem;
}

.fp-convert-db-link {
	font-size: 0.85rem;
	color: #6366f1;
}
.fp-prod-description {
	color: var(--fp-text-muted);
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
}

/* Tabs */
.fp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 2px solid var(--fp-border);
	margin-bottom: 1.5rem;
}
.fp-tab {
	display: inline-block;
	padding: 0.65rem 1.1rem;
	font: 600 0.9rem/1 system-ui, sans-serif;
	color: var(--fp-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
}
.fp-tab:hover { color: var(--fp-primary); }
.fp-tab--active {
	color: var(--fp-primary);
	border-bottom-color: var(--fp-primary);
}

/* Departments dropdown tab */
.fp-tab-dropdown {
	position: relative;
}
.fp-tab-dropdown__btn {
	background: none;
	cursor: pointer;
}
.fp-tab-dropdown__menu {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	z-index: 200;
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	box-shadow: var(--fp-shadow);
	min-width: 160px;
	padding: 0.4rem 0;
}
.fp-tab-dropdown__item {
	display: block;
	padding: 0.55rem 1rem;
	font: 600 0.9rem/1 system-ui, sans-serif;
	color: var(--fp-text-muted);
	text-decoration: none;
	white-space: nowrap;
}
.fp-tab-dropdown__item:hover,
.fp-tab-dropdown__item--active {
	color: var(--fp-primary);
	background: #f0f4ff;
}

/* Panel toolbar */
.fp-panel-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.fp-panel-toolbar h2 {
	font: 700 1.2rem/1 system-ui, sans-serif;
	margin: 0;
}

/* Inline form */
.fp-inline-form {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 1.25rem 1.5rem 1rem;
	margin-bottom: 1.5rem;
}
.fp-hidden { display: none !important; }
.fp-form-row { margin-bottom: 0.85rem; }
.fp-form-row--cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.fp-form-row--checkboxes .fp-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 0.3rem;
}
.fp-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	cursor: pointer;
}
.fp-form-actions {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
}

/* Cards */
.fp-card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.fp-card {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 1rem 1.25rem;
}
.fp-person-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.fp-card__avatar {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--fp-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 1rem/1 system-ui, sans-serif;
	flex-shrink: 0;
}
.fp-card__body { flex: 1; min-width: 0; }
.fp-card__name { display: block; font-weight: 600; margin-bottom: 0.15rem; }
.fp-card__sub  { display: block; font-size: 0.85rem; color: var(--fp-text-muted); margin-bottom: 0.3rem; }
.fp-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.3rem; }
.fp-card__contact { font-size: 0.85rem; color: var(--fp-primary); text-decoration: none; }
.fp-card__contact:hover { text-decoration: underline; }
.fp-card__actions { display: flex; gap: 0.4rem; flex-shrink: 0; align-items: flex-start; }

/* Tags / badges */
.fp-tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--fp-border);
	color: var(--fp-text);
}
.fp-tag--leader  { background: var(--fp-primary); color: #fff; }
.fp-tag--linked  { background: #dcfce7; color: #166534; }
.fp-tag--pending { background: #fef9c3; color: #713f12; }

/* Invite button */
.fp-btn--invite {
	border-color: #f59e0b;
	color: #92400e;
	background: #fffbeb;
}
.fp-btn--invite:hover {
	background: #fef3c7;
	border-color: #d97706;
}

/* Status badges */
.fp-status-badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
}
.fp-status--needed,  .fp-status--planned  { background: #fef9c3; color: #854d0e; }
.fp-status--sourcing { background: #dbeafe; color: #1e40af; }
.fp-status--acquired,.fp-status--building { background: #fce7f3; color: #9d174d; }
.fp-status--fitting  { background: #ede9fe; color: #5b21b6; }
.fp-status--ready    { background: #dcfce7; color: #166534; }

/* Item table */
.fp-item-table-wrap { overflow-x: auto; }
.fp-item-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.fp-item-table th {
	text-align: left;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fp-text-muted);
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--fp-border);
}
.fp-item-table td {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid var(--fp-border);
	vertical-align: middle;
}
.fp-item-table .fp-row-actions { text-align: right; white-space: nowrap; }
.fp-sub { font-size: 0.82rem; color: var(--fp-text-muted); }

/* Button sizes */
.fp-btn--sm  { padding: 0.3rem 0.75rem; font-size: 0.83rem; }
.fp-btn--xs  { padding: 0.15rem 0.5rem; font-size: 0.78rem; line-height: 1.4; }
.fp-btn--danger {
	background: #fee2e2;
	color: #b91c1c;
	border-color: #fecaca;
}
.fp-btn--danger:hover { background: #fecaca; }

/* Departments */
.fp-dept-card + .fp-dept-card { margin-top: 0.75rem; }
.fp-dept-card__header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}
.fp-dept-card__header strong { font-size: 1rem; }
.fp-dept-desc { font-size: 0.88rem; color: var(--fp-text-muted); margin: 0 0 0.6rem; }
.fp-dept-members { display: flex; flex-direction: column; gap: 0.3rem; }
.fp-member-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
}
.fp-member-name { flex: 1; }
.fp-add-member-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}
.fp-form-input--sm {
	padding: 0.3rem 0.6rem;
	font-size: 0.85rem;
	height: auto;
}

/* Schedule */
.fp-event-card + .fp-event-card { margin-top: 0.75rem; }
.fp-event-card__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}
.fp-event-title  { font-weight: 600; font-size: 1rem; flex: 1; min-width: 8rem; }
.fp-event-date   { font-size: 0.85rem; color: var(--fp-text-muted); }
.fp-event-location { font-size: 0.85rem; color: var(--fp-text-muted); margin-bottom: 0.3rem; }
.fp-event-notes  { font-size: 0.88rem; margin-bottom: 0.5rem; }

.fp-event-attendees {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
}
.fp-attendees-label { font-weight: 600; color: var(--fp-text-muted); }
.fp-att-chip {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.8rem;
	background: var(--fp-border);
	color: var(--fp-text);
}
.fp-att--attending { background: #dcfce7; color: #166534; }
.fp-att--absent    { background: #fee2e2; color: #b91c1c; }
.fp-att--unknown   { background: var(--fp-border); color: var(--fp-text-muted); }

.fp-add-attendee-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	flex-wrap: wrap;
}

.fp-event-type { flex-shrink: 0; }
.fp-tag--rehearsal  { background: #ede9fe; color: #5b21b6; }
.fp-tag--meeting    { background: #dbeafe; color: #1e40af; }
.fp-tag--deadline   { background: #fee2e2; color: #b91c1c; }
.fp-tag--performance { background: #fce7f3; color: #9d174d; }
.fp-tag--other      { background: var(--fp-border); color: var(--fp-text); }

/* Empty states */
.fp-empty     { color: var(--fp-text-muted); font-size: 0.95rem; padding: 1.5rem 0; }
.fp-empty--sm { padding: 0.5rem 0; font-size: 0.88rem; }

/* ============================================================
   PHASE 4 ADDITIONS
   ============================================================ */

/* Sub-tab filter row (Plans type filter, Gallery category filter) */
.fp-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 1.25rem;
}
.fp-subtab {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--fp-text-muted);
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	text-decoration: none;
	transition: background 0.12s, color 0.12s;
}
.fp-subtab:hover { background: var(--fp-border); color: var(--fp-text); }
.fp-subtab--active {
	background: var(--fp-primary);
	color: #fff;
	border-color: var(--fp-primary);
}

/* Plan type tags */
.fp-tag--plan-sound  { background: #dbeafe; color: #1e40af; }
.fp-tag--plan-music  { background: #fce7f3; color: #9d174d; }
.fp-tag--plan-light  { background: #fef9c3; color: #854d0e; }
.fp-tag--plan-other  { background: var(--fp-border); color: var(--fp-text); }

.fp-plans-table .fp-plan-cue {
	font-family: monospace;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* Marketing status badges */
.fp-mkt-status--planned { background: #fef9c3; color: #854d0e; }
.fp-mkt-status--ready   { background: #dbeafe; color: #1e40af; }
.fp-mkt-status--posted  { background: #dcfce7; color: #166534; }

/* Form hint */
.fp-form-hint {
	font-size: 0.85rem;
	color: var(--fp-text-muted);
	margin-bottom: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: #f8fafc;
	border-left: 3px solid var(--fp-primary);
	border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
}

/* Document cards */
.fp-doc-card {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}
.fp-doc-card + .fp-doc-card { margin-top: 0.6rem; }
.fp-doc-icon {
	font-size: 1.75rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.fp-doc-desc {
	font-size: 0.88rem;
	color: var(--fp-text-muted);
	margin: 0.25rem 0 0.35rem;
}
.fp-tag--vis { background: #f1f5f9; color: #475569; font-size: 0.75rem; }

/* Gallery grid */
.fp-gallery-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 0.85rem;
	margin-top: 0.5rem;
}
.fp-gallery-item {
	position: relative;
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	overflow: hidden;
}
.fp-gallery-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--fp-border);
}
.fp-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s;
}
.fp-gallery-thumb:hover img { transform: scale( 1.04 ); }
.fp-gallery-meta {
	padding: 0.4rem 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}
.fp-gallery-title {
	font-size: 0.82rem;
	font-weight: 600;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fp-gallery-item .fp-btn--xs {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	background: rgba(255,255,255,0.85);
	border: none;
	border-radius: 50%;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: #b91c1c;
}
.fp-gallery-item .fp-btn--xs:hover { background: #fee2e2; }

/* Mobile + tablet tab overflow.
   Raised 600 → 820 so iPad portrait (768) gets the stacked layout instead of
   the desktop one that overflowed the screen. */
@media (max-width: 820px) {
	.fp-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
	.fp-tab  { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
	.fp-form-row--cols { grid-template-columns: 1fr; }
	.fp-person-card { flex-wrap: wrap; }
	.fp-card__actions { width: 100%; justify-content: flex-end; }
	.fp-event-card__header { flex-direction: column; align-items: flex-start; }
	.fp-panel-toolbar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ============================================================
   MANAGER VIEW — mobile polish (2026-07-06)
   Brings the production manager (Cast/Props/Rooster/… tabs)
   closer to the script editor's phone friendliness. CSS-only,
   conservative: reclaim width, full-width search, usable tab
   dropdowns, stacked cards, no iOS zoom on inputs.
   ============================================================ */
@media (max-width: 820px) {
	/* Reclaim horizontal space eaten by the 2rem desktop gutter. */
	.fp-prod-wrap { padding-left: 0.85rem; padding-right: 0.85rem; }

	/* Header: title fits, search bar drops to its own full-width row. */
	.fp-prod-title { font-size: 1.3rem; }
	.fp-prod-header__top { flex-wrap: wrap; }
	.fp-header-search { margin-left: 0; flex-basis: 100%; width: 100%; }
	.fp-header-search__input { width: 100%; }

	/* Tab bar: momentum scroll + snap, no visible scrollbar. */
	.fp-tabs { scroll-snap-type: x proximity; scrollbar-width: none; }
	.fp-tabs::-webkit-scrollbar { display: none; }
	.fp-tab { scroll-snap-align: start; }
	/* Bigger tap area inside the (already-relative) tab dropdown menu. */
	.fp-tab-dropdown__menu { max-height: 60vh; overflow-y: auto; }
	.fp-tab-dropdown__item { padding: 0.7rem 1rem; }

	/* Stack card bodies and action rows so nothing is squeezed. */
	.fp-card { padding: 0.9rem; }
	.fp-card__actions { flex-wrap: wrap; gap: 0.4rem; }

	/* Inputs at 16px prevent iOS Safari from auto-zooming on focus. */
	.fp-prod-wrap input,
	.fp-prod-wrap select,
	.fp-prod-wrap textarea { font-size: 16px; }
}

/* ============================================================
   MANAGER VIEW — table/overflow containment (phones + tablets)
   Every management table (props, decor, costumes, plans, marketing,
   availability, scripts) must scroll INSIDE its own box so the page
   itself never scrolls sideways. Applied up to 1024px so iPad in
   both orientations is covered — the old rules stopped at 600px, so
   tablets/narrow-desktop windows overflowed the screen.
   ============================================================ */
@media (max-width: 1024px) {
	/* Wrapped tables (props/decor/costumes use .fp-item-table-wrap). */
	.fp-item-table-wrap {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Bare tables that are NOT inside a wrap (plans, marketing,
	   availability, scripts) become their own scroll container. */
	.fp-prod-wrap table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Keep columns readable while scrolling instead of crushing them. */
	.fp-prod-wrap table thead,
	.fp-prod-wrap table tbody { min-width: max-content; }
}

/* ============================================================
   MANAGER VIEW — tables become cards on phones (2026-07-09)
   On phones the props/decor/costumes/plans/marketing/availability/
   scripts tables no longer scroll sideways as a squeezed grid.
   Each row turns into a card and each cell into a labelled line
   (the label comes from the cell's data-label), matching the
   card-based "weergave" pages. Selectors are scoped with
   .fp-prod-wrap so they out-specify the max-width:1024px
   horizontal-scroll rules above. Uses the same 820px breakpoint
   as the other manager mobile-polish rules so iPad portrait
   (768px) gets cards too.
   ============================================================ */
@media (max-width: 820px) {
	.fp-prod-wrap .fp-item-table,
	.fp-prod-wrap .fp-avail-table,
	.fp-prod-wrap .fp-scripts-table,
	.fp-prod-wrap .fp-item-table tbody,
	.fp-prod-wrap .fp-avail-table tbody,
	.fp-prod-wrap .fp-scripts-table tbody {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
	}

	/* The wrap around item tables must not clip card shadows or scroll. */
	.fp-prod-wrap .fp-item-table-wrap { overflow: visible; }

	/* Hide the column headers — each cell now carries its own label.
	   Visually-hidden (not display:none) keeps them for screen readers. */
	.fp-prod-wrap .fp-item-table thead,
	.fp-prod-wrap .fp-avail-table thead,
	.fp-prod-wrap .fp-scripts-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* Each row is a card. */
	.fp-prod-wrap .fp-item-table tr,
	.fp-prod-wrap .fp-avail-table tr,
	.fp-prod-wrap .fp-scripts-table tr {
		display: block;
		background: var(--fp-surface);
		border: 1px solid var(--fp-border);
		border-radius: var(--fp-radius);
		padding: 0.85rem 1rem;
		margin-bottom: 0.75rem;
		box-shadow: 0 1px 3px rgba(0,0,0,.05);
	}

	/* Each cell is a labelled line: LABEL on the left, value on the right. */
	.fp-prod-wrap .fp-item-table td,
	.fp-prod-wrap .fp-avail-table td,
	.fp-prod-wrap .fp-scripts-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: 0.3rem 0;
		border: 0;
		text-align: right;
		min-width: 0;
	}
	.fp-prod-wrap .fp-item-table td::before,
	.fp-prod-wrap .fp-avail-table td::before,
	.fp-prod-wrap .fp-scripts-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 0.72rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--fp-text-muted);
		text-align: left;
	}

	/* The primary cell becomes the card title: full width, no label. */
	.fp-prod-wrap .fp-item-table td.fp-cell-title,
	.fp-prod-wrap .fp-avail-table td.fp-cell-title,
	.fp-prod-wrap .fp-scripts-table td.fp-cell-title {
		display: block;
		text-align: left;
		font-size: 1.02rem;
		padding-bottom: 0.5rem;
		margin-bottom: 0.4rem;
		border-bottom: 1px solid var(--fp-border);
	}
	.fp-prod-wrap .fp-item-table td.fp-cell-title::before,
	.fp-prod-wrap .fp-avail-table td.fp-cell-title::before,
	.fp-prod-wrap .fp-scripts-table td.fp-cell-title::before { content: none; }
	.fp-prod-wrap .fp-cell-title .fp-sub { text-align: left; }

	/* Budget cell keeps its two figures readable on the value side. */
	.fp-prod-wrap .fp-item-table td.fp-budget-cell {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.25rem 0.6rem;
	}

	/* Action buttons: full-width row, no label, wrap freely. */
	.fp-prod-wrap .fp-item-table td.fp-row-actions,
	.fp-prod-wrap .fp-avail-table td.fp-row-actions,
	.fp-prod-wrap .fp-scripts-table td:last-child {
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 0.4rem;
		padding-top: 0.6rem;
		margin-top: 0.4rem;
		border-top: 1px solid var(--fp-border);
	}
	.fp-prod-wrap .fp-item-table td.fp-row-actions::before,
	.fp-prod-wrap .fp-avail-table td.fp-row-actions::before,
	.fp-prod-wrap .fp-scripts-table td:last-child::before { content: none; }
}

/* Touch devices: enforce ≥44px tap targets on the manager's controls
   (matches the editor's coarse-pointer rules). Placed after the width
   query so it wins on phones/tablets with a coarse pointer. */
@media (pointer: coarse) {
	.fp-prod-wrap .fp-btn,
	.fp-prod-wrap .fp-tab,
	.fp-prod-wrap .fp-tab-dropdown__item,
	.fp-prod-wrap input:not([type="checkbox"]):not([type="radio"]),
	.fp-prod-wrap select,
	.fp-prod-wrap .fp-header-search__btn { min-height: 44px; }
	.fp-prod-wrap .fp-btn { align-items: center; }
}

/* ============================================================
   CSV IMPORT PANEL
   ============================================================ */
.fp-csv-import {
	margin-bottom: 1rem;
}
.fp-csv-panel {
	margin-top: 0.5rem;
	padding: 1rem 1.25rem;
	background: var(--fp-surface-alt, #f8fafc);
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: 0.5rem;
}
.fp-csv-panel__title {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--fp-text, #1e293b);
}
.fp-csv-panel__help {
	font-size: 0.82rem;
	color: var(--fp-text-muted, #64748b);
	line-height: 1.6;
	margin-bottom: 0.75rem;
}
.fp-csv-panel__help code {
	background: var(--fp-border, #e2e8f0);
	padding: 0.1em 0.3em;
	border-radius: 0.2em;
	font-size: 0.9em;
}
.fp-csv-file-input {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
}
.fp-csv-result {
	padding: 0.5rem 0.75rem;
	border-radius: 0.35rem;
	font-size: 0.85rem;
	margin-bottom: 0.75rem;
	line-height: 1.5;
}
.fp-csv-result--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.fp-csv-result--warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.fp-csv-result--error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ============================================================
   COMMENTS TAB
   ============================================================ */
.fp-comment-group {
	margin-bottom: 1.25rem;
	border: 1px solid var(--fp-border, #e2e8f0);
	border-radius: 0.5rem;
	overflow: hidden;
}
.fp-comment-group__heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 1rem;
	background: var(--fp-surface-alt, #f8fafc);
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
	flex-wrap: wrap;
}
.fp-comment-group__type { background: #ede9fe; color: #6d28d9; }
.fp-comment-group__excerpt {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 400;
	color: var(--fp-text, #1e293b);
}
.fp-comment-group__link {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--fp-primary, #2563eb);
	text-decoration: none;
	white-space: nowrap;
}
.fp-comment-group__link:hover { text-decoration: underline; }
.fp-comment-group__count {
	font-size: 0.72rem;
	background: var(--fp-primary, #2563eb);
	color: #fff;
	border-radius: 999px;
	padding: 0.1rem 0.45rem;
	font-weight: 600;
	margin-left: auto;
}
.fp-comment-group__list { padding: 0.25rem 1rem 0.75rem; }
.fp-comment-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--fp-border, #e2e8f0);
}
.fp-comment-item:last-child { border-bottom: none; }
.fp-comment-item--reply { padding-left: 2.5rem; }
.fp-comment-item__avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--fp-primary-muted, #eff6ff);
	color: var(--fp-primary, #2563eb);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}
.fp-comment-item__body { flex: 1; min-width: 0; }
.fp-comment-item__meta {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.2rem;
	flex-wrap: wrap;
	font-size: 0.8rem;
}
.fp-comment-item__meta strong { color: var(--fp-text, #1e293b); font-size: 0.82rem; }
.fp-comment-item__meta time { color: var(--fp-text-muted, #64748b); margin-left: auto; }
.fp-comment-item__content {
	margin: 0;
	font-size: 0.88rem;
	color: var(--fp-text, #1e293b);
	line-height: 1.5;
	word-break: break-word;
}
.fp-tag--xs { font-size: 0.65rem; padding: 0.05rem 0.3rem; }

/* ======================================================================
   BUDGET COLUMNS
   ====================================================================== */

.fp-budget-cell { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; }
.fp-budget-est  { color: var(--fp-text-muted, #64748b); }
.fp-budget-act  { color: var(--fp-text, #1e293b); font-weight: 600; }
.fp-budget-over { color: #dc2626; }

/* ======================================================================
   RESOLVED COMMENTS
   ====================================================================== */

.fp-tag--resolved { background: #d1fae5; color: #065f46; }
.fp-comment-item--resolved { opacity: 0.6; }
.fp-btn--xs { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 4px; margin-top: 0.3rem; }
.fp-resolve-comment { background: none; border: 1px solid var(--fp-border, #e2e2de); color: var(--fp-text-muted, #64748b); cursor: pointer; }
.fp-resolve-comment:hover { border-color: #10b981; color: #065f46; }

/* ======================================================================
   AVAILABILITY
   ====================================================================== */

.fp-availability-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--fp-border, #e2e2de); }
.fp-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.fp-avail-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.fp-avail-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fp-avail-table th, .fp-avail-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--fp-border, #e2e2de); }
.fp-avail-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.fp-avail-badge--yes { background: #d1fae5; color: #065f46; }
.fp-avail-badge--no  { background: #fee2e2; color: #991b1b; }

/* ======================================================================
   ANNOUNCEMENTS
   ====================================================================== */

.fp-announcement-card { padding: 1rem 1.25rem; margin-bottom: 0.75rem; border-radius: 8px; border: 1px solid var(--fp-border, #e2e2de); background: var(--fp-surface, #fff); }
.fp-announcement-card--pinned { border-left: 3px solid #f59e0b; background: #fffbeb; }
.fp-pin-badge { display: inline-block; font-size: 0.75rem; color: #92400e; margin-bottom: 0.4rem; }
.fp-announcement__title { margin: 0 0 0.5rem; font-size: 1rem; }
.fp-announcement__body { font-size: 0.875rem; margin-bottom: 0.5rem; line-height: 1.6; }
.fp-announcement__meta { font-size: 0.75rem; color: var(--fp-text-muted, #64748b); margin: 0 0 0.5rem; }

/* ======================================================================
   VERSION SNAPSHOTS
   ====================================================================== */

.fp-snapshot-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border: 1px solid var(--fp-border, #e2e2de); border-radius: 8px; background: var(--fp-surface, #fff); }
.fp-snapshot-card .fp-card__body { flex: 1; min-width: 0; }
.fp-snapshot-card .fp-card__name { display: block; font-weight: 600; }
.fp-snapshot-card .fp-card__sub { display: block; font-size: 0.8rem; color: var(--fp-text-muted, #64748b); margin-top: 0.15rem; }

/* ======================================================================
   SEARCH
   ====================================================================== */

.fp-search-form { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.fp-search-input { flex: 1; }
.fp-search-results { }
.fp-search-result-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--fp-border, #e2e2de); font-size: 0.875rem; }
.fp-search-result-item:last-child { border-bottom: none; }
.fp-search-result-type { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fp-text-muted, #64748b); white-space: nowrap; min-width: 80px; }
.fp-search-result-title { font-weight: 500; flex: 1; }
.fp-search-result-sub { font-size: 0.8rem; color: var(--fp-text-muted, #64748b); }
.fp-search-empty { padding: 1rem 0.75rem; color: var(--fp-text-muted, #64748b); font-size: 0.875rem; }

/* ======================================================================
   IMPORT CONFIRMATION MODAL
   ====================================================================== */

.fp-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.fp-modal-overlay[hidden] { display: none; }

.fp-modal {
	background: #fff;
	border-radius: var(--fp-radius, 10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
	padding: 1.75rem 2rem;
	width: 100%;
	max-width: 440px;
}

.fp-modal__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--fp-text, #1a1a1a);
}

.fp-modal__file {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: var(--fp-text, #1a1a1a);
	word-break: break-all;
}

.fp-modal__warn {
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	background: #fef9ec;
	border: 1px solid #f5d876;
	border-radius: 6px;
	font-size: 0.85rem;
	color: #78530a;
	line-height: 1.5;
}

.fp-modal__field {
	margin-bottom: 1.25rem;
}

.fp-modal__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fp-text, #1a1a1a);
	margin-bottom: 0.35rem;
}

.fp-modal__input {
	width: 100%;
	padding: 0.55rem 0.75rem;
	font-size: 0.9rem;
	border: 1px solid var(--fp-border, #e2e2de);
	border-radius: 6px;
	box-sizing: border-box;
	outline: none;
}
.fp-modal__input:focus { border-color: var(--fp-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }

.fp-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.65rem;
	margin-top: 0.25rem;
}

/* ======================================================================
   PRINT — CALL SHEET
   ====================================================================== */

@media print {
	.fp-prod-nav, .fp-panel-toolbar button, .fp-card__actions, .fp-avail-form,
	.fp-announcement-form, #fp-bottom-nav, .fe-toolbar, .fe-sidebar,
	.fp-btn, .fp-csv-import, .fp-csv-panel { display: none !important; }

	.fp-prod-wrap { padding: 0 !important; }
	.fp-tab-panel { display: block !important; border: none !important; box-shadow: none !important; }

	.fp-event-card { page-break-inside: avoid; border: 1px solid #ccc; margin-bottom: 0.5cm; }
	.fp-item-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
	.fp-item-table th, .fp-item-table td { border: 1px solid #ccc; padding: 4pt 6pt; }
	body { font-size: 11pt; color: #000; background: #fff !important; }
	a { color: #000 !important; text-decoration: none !important; }
}

/* ======================================================================
   CONFLICT-AWARE SCHEDULING — availability hint + "Beste datum" helper
   ====================================================================== */

.fp-availability-wrap {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.35rem;
}

.fp-availability-hint {
	font-size: 0.85rem;
}
.fp-availability-hint:empty { display: none; }
.fp-availability-hint--ok   { color: #1a7a2e; }
.fp-availability-hint--warn { color: #b26200; font-weight: 600; }

.fp-best-dates {
	flex-basis: 100%;
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.fp-best-date-option {
	padding: 0.35rem 0.65rem;
	min-height: 2.25rem;
	background: #fff;
	border: 1px solid #c0c0c0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
	-webkit-tap-highlight-color: transparent;
}
.fp-best-date-option:hover { border-color: #2271b1; }
.fp-best-date-option--full {
	border-color: #1a7a2e;
	color: #1a7a2e;
	font-weight: 600;
}

/* ======================================================================
   SNAPSHOT DIFF — "Wat is er veranderd?"
   ====================================================================== */
.fp-snapshot-diff {
	flex-basis: 100%;
	margin-top: 0.75rem;
	border-top: 1px solid #e5e7eb;
	padding-top: 0.6rem;
}
.fp-diff-summary { font-size: 0.9rem; margin: 0 0 0.5rem; }
.fp-diff-add-count { color: #1a7a2e; font-weight: 600; }
.fp-diff-del-count { color: #c0392b; font-weight: 600; }

.fp-diff-lines {
	font-family: ui-monospace, "Courier New", monospace;
	font-size: 0.85rem;
	line-height: 1.5;
	max-height: 22rem;
	overflow: auto;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fbfbfa;
}
.fp-diff-line {
	display: flex;
	gap: 0.5rem;
	padding: 0.1rem 0.6rem;
	white-space: pre-wrap;
	word-break: break-word;
}
.fp-diff-sign { flex-shrink: 0; width: 1ch; text-align: center; opacity: 0.7; }
.fp-diff-line--add { background: #e7f6ec; }
.fp-diff-line--add .fp-diff-sign { color: #1a7a2e; }
.fp-diff-line--del { background: #fdecea; color: #7a2c23; }
.fp-diff-line--del .fp-diff-text { text-decoration: line-through; opacity: 0.8; }
.fp-diff-line--del .fp-diff-sign { color: #c0392b; }
.fp-diff-line--same { color: #6b7280; }

/* ======================================================================
   CALL SHEET / OPROEP + ATTENDANCE — Tier 3b
   ====================================================================== */
.fp-event-oproep-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.6rem;
}

.fp-att-self {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.6rem;
	padding: 0.5rem 0.65rem;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}
.fp-att-self-label { font-weight: 600; font-size: 0.9rem; }
.fp-att-respond { border: 1px solid #cbd5e1; background: #fff; }
.fp-att-respond.is-active[data-status="attending"] {
	background: #1a7a2e; border-color: #1a7a2e; color: #fff;
}
.fp-att-respond.is-active[data-status="absent"] {
	background: #c0392b; border-color: #c0392b; color: #fff;
}
.fp-att-reden { flex: 1; min-width: 8rem; }

/* Attendee chips coloured by response status */
.fp-att-chip { cursor: default; }
.fp-att-chip.fp-att--attending { background: #e7f6ec; color: #14622a; }
.fp-att-chip.fp-att--absent    { background: #fdecea; color: #7a2c23; }
.fp-att-chip.fp-att--unknown   { background: #eef1f5; color: #55606e; }

@media (max-width: 600px) {
	.fp-att-respond { min-height: 44px; }
	.fp-att-reden   { min-height: 44px; width: 100%; flex-basis: 100%; }
}

/* ======================================================================
   DASHBOARD SPLASH  (templates/dashboard.php, v3.7.0)
   Personal greeting, preferences popover, enriched production cards.
   Mobile-first; motion disabled under prefers-reduced-motion.
   ====================================================================== */

.fp-dash-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #1e1b4b;
	background: linear-gradient(115deg, #24205c 0%, #3b2a68 60%, #4c2a5e 100%);
	border-radius: 16px;
	padding: 1.3rem 1.3rem;
	margin-bottom: 1.4rem;
	color: #fff;
}

.fp-dash-hero__id {
	display: flex;
	align-items: center;
	gap: 0.95rem;
	min-width: 0;
}

.fp-dash-hero .fp-dash-title {
	margin: 0;
	font-size: 1.28rem;
	font-weight: 750;
	color: #fff;
	line-height: 1.3;
}
.fp-dash-sub {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: #beb9e4;
}

.fp-dash-avatar {
	position: relative;
	width: 54px; height: 54px;
	flex: 0 0 54px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(115deg, #4338ca, #9d3f8c);
	display: grid;
	place-items: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.fp-dash-avatar::before {
	content: attr(data-initial);
	color: #fff;
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: uppercase;
}
.fp-dash-avatar img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

.fp-dash-hero__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* Preferences popover */
.fp-dash-prefs { position: relative; }
.fp-dash-prefs__btn { padding: 0.55rem 0.75rem; font-size: 1rem; line-height: 1; }

.fp-dash-prefs__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
	width: min(290px, 86vw);
	background: var(--fp-surface, #fff);
	color: var(--fp-text, #1a1a1a);
	border: 1px solid var(--fp-border, #e2e2de);
	border-radius: 12px;
	box-shadow: 0 14px 38px rgba(30, 27, 75, 0.20);
	padding: 0.9rem 1rem;
}
.fp-dash-prefs__menu h4 {
	margin: 0 0 0.7rem;
	font-size: 0.92rem;
	color: var(--fp-text, #1a1a1a);
}
.fp-dash-prefs__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.83rem;
	color: var(--fp-text-muted, #777);
	margin-bottom: 0.75rem;
}
.fp-dash-prefs__field select {
	width: 100%;
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--fp-border, #e2e2de);
	border-radius: 8px;
	font-size: 0.88rem;
	background: #fff;
	color: var(--fp-text, #1a1a1a);
}
.fp-dash-prefs__check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.45;
	margin-bottom: 0.75rem;
	cursor: pointer;
	color: var(--fp-text, #1a1a1a);
}
.fp-dash-prefs__check input { margin-top: 0.15rem; accent-color: #4f46e5; }
.fp-dash-prefs__link {
	display: block;
	padding: 0.45rem 0;
	font-size: 0.88rem;
	color: var(--fp-text, #1a1a1a);
	text-decoration: none;
	border-top: 1px solid var(--fp-border, #e2e2de);
}
.fp-dash-prefs__link:hover { color: var(--fp-primary, #2563eb); }
.fp-dash-prefs__status {
	margin: 0.4rem 0 0;
	min-height: 1em;
	font-size: 0.78rem;
	color: var(--fp-success, #16a34a);
}

/* ---- Splash production cards ---------------------------------------- */

.fp-prod-card--splash {
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fp-prod-card--splash:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(30, 27, 75, 0.12);
}

.fp-prod-card__accent {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		hsl(var(--fp-card-hue, 245), 55%, 52%),
		hsl(calc(var(--fp-card-hue, 245) + 50), 55%, 60%)
	);
}

.fp-prod-card__admin { margin: 0.15rem 0 0.4rem; font-size: 0.83rem; }
.fp-badge--admin {
	background: #fdf6e7;
	color: #8a6d1f;
	border: 1px solid #f3e3bb;
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	font-size: 0.76rem;
	font-weight: 600;
}
.fp-prod-card__admin-names { color: var(--fp-text-muted, #777); }

.fp-prod-card__members {
	display: flex;
	align-items: center;
	margin: 0.3rem 0 0.5rem;
}
.fp-member-dot {
	position: relative;
	width: 30px; height: 30px;
	border-radius: 50%;
	overflow: hidden;
	background: hsl(var(--fp-member-hue, 245), 45%, 52%);
	display: grid;
	place-items: center;
	border: 2px solid var(--fp-surface, #fff);
	margin-right: -8px;
	flex: 0 0 30px;
}
.fp-member-dot::before {
	content: attr(data-initial);
	color: #fff;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
}
.fp-member-dot img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.fp-member-dot--more {
	background: var(--fp-border, #e2e2de);
}
.fp-member-dot--more::before { content: none; }
.fp-member-dot--more {
	color: var(--fp-text-muted, #777);
	font-size: 0.7rem;
	font-weight: 700;
}

.fp-prod-card__next {
	margin: 0.2rem 0 0.6rem;
	font-size: 0.82rem;
	color: var(--fp-text-muted, #777);
}

/* Quick links row */
.fp-prod-card__actions--links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 0.5rem;
}
.fp-quicklink {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--fp-border, #e2e2de);
	background: var(--fp-surface, #fff);
	font: 600 0.82rem/1 system-ui, sans-serif;
	color: var(--fp-text, #1a1a1a);
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.fp-quicklink:hover {
	border-color: #c7d2fe;
	background: #eef2ff;
	color: #3730a3;
	transform: translateY(-1px);
}
.fp-quicklink--ghost { opacity: 0.75; }

@media (max-width: 600px) {
	.fp-dash-hero { padding: 1.1rem 1rem; }
	.fp-dash-hero__actions { width: 100%; justify-content: flex-end; }
	.fp-quicklink { min-height: 44px; }
	.fp-dash-prefs__menu { right: -0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-prod-card--splash,
	.fp-quicklink { transition: none; }
	.fp-prod-card--splash:hover { transform: none; }
}

/* ======================================================================
   BEHEER TAB (admin: invites, members, settings)
   ====================================================================== */
.fp-invite-list, .fp-members-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }

.fp-invite-row {
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 0.75rem 0.9rem;
	background: #fafafa;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fp-invite-row__head { display: flex; align-items: center; gap: 0.6rem; }
.fp-invite-who { font-weight: 600; flex: 1; min-width: 0; }
.fp-invite-url { font-size: 0.8rem; background: #fff; }
.fp-invite-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.fp-member-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 0.6rem 0.9rem;
	background: #fff;
}
.fp-member-name { font-weight: 600; flex: 1; min-width: 0; }

/* On phones the beheer member/invite rows must wrap so the right-most
   action button (e.g. "Verwijderen") never slips off the screen edge.
   Long names/emails break instead of forcing the row wider than the
   viewport, and the button aligns right on its own line when wrapped. */
@media (max-width: 820px) {
	.fp-members-list .fp-member-row,
	.fp-invite-row__head { flex-wrap: wrap; }
	.fp-members-list .fp-member-name,
	.fp-invite-who { overflow-wrap: anywhere; }
	.fp-members-list .fp-member-row .fp-btn { margin-left: auto; }
}

/* ---- Rolverdeling (functies + casting + tijdelijke namen) ---------- */
.fp-rolverdeling { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 1.5rem; }
.fp-rv-section__title { font-size: 1rem; margin: 0 0 0.6rem; }
.fp-rv-role {
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 0.7rem 0.9rem;
	margin-bottom: 0.6rem;
	background: #fff;
}
.fp-rv-role__label { font-weight: 600; margin-bottom: 0.5rem; }
.fp-rv-count { font-weight: 400; font-size: 0.8rem; color: var(--fp-text-muted); }
.fp-rv-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.55rem; }
.fp-rv-none { color: var(--fp-text-muted); font-size: 0.88rem; font-style: italic; }
.fp-rv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--fp-bg);
	border: 1px solid var(--fp-border);
	border-radius: 999px;
	padding: 0.2rem 0.35rem 0.2rem 0.7rem;
	font-size: 0.85rem;
}
.fp-rv-chip__name { font-weight: 600; }
.fp-rv-remove {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--fp-text-muted);
	padding: 0 0.2rem;
	border-radius: 50%;
}
.fp-rv-remove:hover { color: var(--fp-error); }
.fp-rv-assign { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fp-rv-assign .fp-form-input { flex: 1 1 8rem; min-width: 0; }
.fp-rv-templink { flex-wrap: wrap; }
.fp-rv-templink .fp-rv-link-account { flex: 1 1 10rem; min-width: 0; }
@media (max-width: 820px) {
	.fp-rv-assign { flex-direction: column; align-items: stretch; }
	.fp-rv-assign .fp-rv-add { align-self: flex-end; }
}

/* ---- Custom team pages + wizard ----------------------------------- */
.fp-team-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fp-team-title { font-size: 1.4rem; margin: 0; }
.fp-team-head-right { display: flex; align-items: center; gap: 0.6rem; }
.fp-team-savepill { font-size: 0.8rem; color: var(--fp-text-muted); }
.fp-team-savepill--ok  { color: var(--fp-success); }
.fp-team-savepill--err { color: var(--fp-error); }
.fp-team-section { margin-bottom: 1rem; }
.fp-team-section__title { font-size: 1rem; margin: 0 0 0.7rem; }
.fp-team-members { margin-bottom: 0.6rem; }
.fp-team-make-leader { border: none; background: transparent; cursor: pointer; color: var(--fp-text-muted); padding: 0 0.15rem; font-size: 0.95rem; line-height: 1; }
.fp-team-make-leader:hover { color: #d97706; }
.fp-team-addmember { max-width: 20rem; }
.fp-team-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.6rem; }
.fp-team-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fp-team-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fp-text-muted); padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--fp-border); white-space: nowrap; }
.fp-team-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--fp-border); vertical-align: middle; }
.fp-team-table .fp-team-cell { width: 100%; min-width: 7rem; }
.fp-team-empty-cell { color: var(--fp-text-muted); font-style: italic; }
.fp-team-rowact { text-align: right; }
.fp-team-notes { width: 100%; }
.fp-team-notes-ro { white-space: pre-wrap; }
.fp-team-dates { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.fp-team-date-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.fp-team-date-row .fp-team-date-f { flex: 1 1 8rem; min-width: 0; }
.fp-team-media { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.6rem; }
.fp-team-media-item { margin: 0; position: relative; width: 150px; }
.fp-team-media-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--fp-border); display: block; }
.fp-team-media-item audio { width: 100%; }
.fp-team-media-item figcaption { font-size: 0.78rem; color: var(--fp-text-muted); margin-top: 0.25rem; word-break: break-word; }
.fp-team-media-item .fp-team-media-del { position: absolute; top: 4px; right: 4px; }
.fp-team-media-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fp-team-upload-status { font-size: 0.82rem; color: var(--fp-text-muted); }

.fp-tw-sections { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.fp-tw-section__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fp-tw-section__head .fp-tw-title { flex: 1 1 10rem; min-width: 0; }
.fp-tw-cols { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.fp-tw-col { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.fp-tw-col .fp-tw-col-label { flex: 1 1 8rem; min-width: 0; }
.fp-tw-add-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
@media (max-width: 820px) {
	.fp-team-title { font-size: 1.2rem; }
}

.fp-settings-form { display: block; margin-top: 0.75rem; max-width: 32rem; }
.fp-settings-form .fp-form-input { width: 100%; }
.fp-inline-status { margin-left: 0.6rem; font-size: 0.85rem; color: var(--fp-success); }

.fp-btn--danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.fp-btn--danger:hover { background: #fee2e2; color: #991b1b; }

.fp-danger-zone {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px dashed #e5b4b4;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.fp-danger-zone__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #b91c1c; font-weight: 700; }