/* Flowva Desk stylesheet 5 of 5: Calendar, offline bar, date pickers, tasks, favorites, shipments, greeting, celebration, row colours. The 5 files load one after the other (hooks.py: app_include_css and web_include_css, in this order) and work as one file. */
/* =========================================================================
   Flowva Calendar: right-edge dock under the Activity Center + calendar panel
   ========================================================================= */
.flowva-calendar-dock-trigger,
.flowva-cal-panel,
.flowva-datepop {
	--cal-accent: var(--flowva-accent, var(--primary, #3b82f6));
	--cal-on-accent: var(--flowva-on-accent, #ffffff);
	--cal-glow: var(--flowva-glow-color, rgba(59, 130, 246, 0.35));
	--cal-accent-deep: color-mix(in srgb, var(--cal-accent) 72%, #000000);
}
.flowva-calendar-dock-trigger {
	position: fixed !important;
	right: 0 !important;
	top: calc(69% - 24.5px) !important; /* halfway between #flowva-activity-dock and the Personal Workspace button */
	transform: translateY(-50%) !important;
	z-index: 1040 !important;
	display: flex !important;
	align-items: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 0 0 7px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
	backdrop-filter: blur(16px) saturate(180%) !important;
	border: 1px solid rgba(226, 232, 240, 0.95) !important;
	border-right: none !important;
	border-radius: 22px 0 0 22px !important;
	box-shadow: -4px 0 18px rgba(0, 0, 0, 0.08), 0 2px 6px color-mix(in srgb, var(--cal-accent) 18%, transparent) !important;
	cursor: pointer !important;
	user-select: none !important;
	transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.flowva-calendar-dock-trigger:hover,
.flowva-calendar-dock-trigger.flowva-dock-expanded,
.flowva-calendar-dock-trigger:focus-visible {
	width: 48px !important;
	transform: translateY(-50%) scale(1.08) !important;
	border-color: var(--cal-accent) !important;
	box-shadow: -6px 0 24px var(--cal-glow), 0 0 12px var(--cal-glow) !important;
	outline: none !important;
}
.flowva-calendar-dock-icon-wrap {
	width: 28px;
	height: 30px;
	border-radius: 7px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--cal-accent) 35%, transparent);
	border: 1px solid color-mix(in srgb, var(--cal-accent) 35%, transparent);
	flex-shrink: 0;
}
.flowva-calendar-dock-month {
	display: block;
	background: linear-gradient(135deg, var(--cal-accent) 0%, var(--cal-accent-deep) 100%);
	color: var(--cal-on-accent);
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	line-height: 10px;
	height: 10px;
}
.flowva-calendar-dock-day {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	font-size: 13px;
	font-weight: 800;
	color: #1e293b;
	line-height: 1;
}
html[data-theme="dark"] .flowva-calendar-dock-trigger {
	background: rgba(30, 41, 59, 0.95) !important;
	border-color: rgba(51, 65, 85, 0.85) !important;
	box-shadow: -4px 0 22px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .flowva-calendar-dock-icon-wrap { background: #0f172a; }
html[data-theme="dark"] .flowva-calendar-dock-day { color: #f1f5f9; }
@media (max-width: 991.98px) {
	.flowva-calendar-dock-trigger { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Panel */
.flowva-cal-panel {
	position: fixed;
	inset: 0;
	z-index: 1055;
	pointer-events: none;
	visibility: hidden;
}
.flowva-cal-panel.open {
	pointer-events: auto;
	visibility: visible;
}
.flowva-cal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.38);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.flowva-cal-panel.open .flowva-cal-backdrop { opacity: 1; }
.flowva-cal-sheet {
	--cal-border: var(--border-color, #e2e8f0);
	--cal-muted: var(--text-muted, #64748b);
	--cal-text: var(--text-color, #0f172a);
	--cal-bg: var(--card-bg, #ffffff);
	--cal-soft: var(--subtle-fg, #f8fafc);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(1100px, calc(100vw - 24px));
	background: var(--cal-bg);
	color: var(--cal-text);
	box-shadow: -18px 0 48px rgba(15, 23, 42, 0.22);
	border-radius: 18px 0 0 18px;
	display: flex;
	flex-direction: column;
	transform: translateX(104%);
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}
.flowva-cal-panel.open .flowva-cal-sheet { transform: translateX(0); }

.flowva-cal-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--cal-border);
	flex-wrap: wrap;
}
.flowva-cal-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.flowva-cal-title h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--cal-text); }
.flowva-cal-subtitle { font-size: 12px; color: var(--cal-muted); }
.flowva-cal-title-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cal-on-accent);
	background: linear-gradient(135deg, var(--cal-accent) 0%, var(--cal-accent-deep) 100%);
	box-shadow: 0 6px 16px var(--cal-glow);
	font-size: 16px;
	flex-shrink: 0;
}
.flowva-cal-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.flowva-cal-month-label { min-width: 150px; text-align: center; font-size: 15px; font-weight: 700; color: var(--cal-text); }
.flowva-cal-actions { display: flex; align-items: center; gap: 6px; }
.flowva-cal-btn,
.flowva-cal-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--cal-border);
	background: var(--cal-bg);
	color: var(--cal-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.flowva-cal-btn { padding: 0 12px; }
.flowva-cal-icon-btn { width: 34px; padding: 0; }
.flowva-cal-btn:hover,
.flowva-cal-icon-btn:hover { border-color: var(--cal-accent); color: var(--cal-accent); }
.flowva-cal-btn-primary { background: var(--cal-accent); border-color: var(--cal-accent); color: var(--cal-on-accent); }
.flowva-cal-btn-primary:hover { background: var(--cal-accent-deep); border-color: var(--cal-accent-deep); color: var(--cal-on-accent); }

.flowva-cal-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-bottom: 1px solid var(--cal-border);
	flex-wrap: wrap;
}
.flowva-cal-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px;
	border-radius: 9999px;
	border: 1px solid var(--cal-border);
	background: transparent;
	color: var(--cal-muted);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.flowva-cal-filter.active { opacity: 1; color: var(--cal-text); }
.flowva-cal-filter .count {
	font-size: 11px;
	padding: 0 7px;
	border-radius: 9999px;
	background: var(--cal-soft);
	color: var(--cal-muted);
}
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.swatch-event { background: #3b82f6; }
.swatch-task { background: #f97316; }
.swatch-maint { background: #d97706; }
.swatch-report { background: #0d9488; }
.swatch-follow { background: #7c3aed; }
.swatch-sales { background: #16a34a; }
.swatch-invoice { background: #db2777; }
.flowva-cal-filter[hidden] { display: none !important; }
.flowva-cal-status { margin-left: auto; font-size: 12px; color: var(--cal-muted); }

.flowva-cal-body {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
}
.flowva-cal-month {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 10px 14px 14px 20px;
}
.flowva-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 6px;
}
.flowva-cal-weekdays div {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cal-muted);
	text-align: center;
}
.flowva-cal-grid {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: repeat(6, minmax(96px, 1fr));
	gap: 6px;
	overflow-y: auto;
}
.flowva-cal-day {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 6px;
	border-radius: 12px;
	border: 1px solid var(--cal-border);
	background: var(--cal-bg);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.flowva-cal-day:hover { border-color: color-mix(in srgb, var(--cal-accent) 55%, transparent); }
.flowva-cal-day.weekend { background: var(--cal-soft); }
.flowva-cal-weekdays div.weekend { opacity: 0.6; }
.flowva-cal-day.other-month { opacity: 0.45; }
.flowva-cal-day.selected {
	border-color: var(--cal-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cal-accent) 25%, transparent);
}
.flowva-cal-day-num { display: flex; justify-content: flex-end; }
.flowva-cal-day-num span {
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cal-text);
}
.flowva-cal-day.today .flowva-cal-day-num span {
	background: linear-gradient(135deg, var(--cal-accent) 0%, var(--cal-accent-deep) 100%);
	color: var(--cal-on-accent);
	box-shadow: 0 3px 8px var(--cal-glow);
}
.flowva-cal-day-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flowva-cal-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
	overflow: hidden;
}
.flowva-cal-chip .s { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flowva-cal-chip .t { font-weight: 700; opacity: 0.8; flex-shrink: 0; }
.chip-event {
	--chip-color: #3b82f6;
	background: color-mix(in srgb, var(--chip-color) 13%, transparent);
	color: var(--cal-text);
}
.chip-event .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-color); flex-shrink: 0; }
.chip-task { background: rgba(249, 115, 22, 0.1); color: var(--cal-text); }
.chip-task i { font-size: 11px; color: #ea580c; flex-shrink: 0; }
.chip-task.prio-urgent { background: rgba(220, 38, 38, 0.1); }
.chip-task.prio-urgent i { color: #dc2626; }
.chip-task.prio-low { background: rgba(148, 163, 184, 0.14); }
.chip-task.prio-low i { color: #64748b; }
.chip-task.done .s { text-decoration: line-through; opacity: 0.6; }
.chip-report { background: rgba(13, 148, 136, 0.12); color: var(--cal-text); }
.chip-report i { font-size: 10px; color: #0d9488; flex-shrink: 0; }
.chip-report.draft { background: rgba(148, 163, 184, 0.16); }
.chip-report.draft i { color: #64748b; }
.chip-maint { background: rgba(217, 119, 6, 0.12); color: var(--cal-text); }
.chip-maint i { font-size: 10px; color: #d97706; flex-shrink: 0; }
.chip-follow { background: rgba(124, 58, 237, 0.12); color: var(--cal-text); }
.chip-follow i { font-size: 10px; color: #7c3aed; flex-shrink: 0; }
html[data-theme="dark"] .chip-follow i { color: #a78bfa; }
.chip-sales { background: rgba(22, 163, 74, 0.12); color: var(--cal-text); }
.chip-sales i { font-size: 10px; color: #16a34a; flex-shrink: 0; }
.chip-invoice { background: rgba(219, 39, 119, 0.11); color: var(--cal-text); }
.chip-invoice i { font-size: 10px; color: #db2777; flex-shrink: 0; }
html[data-theme="dark"] .chip-sales i { color: #4ade80; }
html[data-theme="dark"] .chip-invoice i { color: #f472b6; }
.flowva-cal-more { font-size: 10.5px; font-weight: 700; color: var(--cal-accent); padding: 0 6px; }
.flowva-cal-day-dots { display: none; }

/* Agenda */
.flowva-cal-agenda {
	border-left: 1px solid var(--cal-border);
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--cal-soft);
}
.flowva-cal-agenda-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--cal-border); }
.flowva-cal-agenda-date { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--cal-text); }
.flowva-cal-agenda-sub { font-size: 12px; color: var(--cal-muted); }
.flowva-cal-agenda-list { flex: 1; overflow-y: auto; padding: 12px 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.flowva-cal-section-title {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cal-muted);
	margin: 6px 4px 0;
}
.flowva-cal-card {
	--chip-color: #3b82f6;
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--cal-bg);
	border: 1px solid var(--cal-border);
	box-shadow: inset 3px 0 0 var(--chip-color), 0 1px 3px rgba(15, 23, 42, 0.04);
}
.flowva-cal-card.card-task { --chip-color: #f97316; }
.flowva-cal-card.card-task.prio-urgent { --chip-color: #dc2626; }
.flowva-cal-card.card-task.prio-medium { --chip-color: #3b82f6; }
.flowva-cal-card.card-task.prio-low { --chip-color: #94a3b8; }
.flowva-cal-card.card-report { --chip-color: #0d9488; }
.flowva-cal-card.card-report.draft { --chip-color: #94a3b8; }
.flowva-cal-card.card-maint { --chip-color: #d97706; }
.flowva-cal-card.card-follow { --chip-color: #7c3aed; }
.flowva-cal-card.card-sales { --chip-color: #16a34a; }
.flowva-cal-card.card-invoice { --chip-color: #db2777; }
.flowva-cal-card.card-docs { grid-template-columns: 54px minmax(0, 1fr); }
.flowva-cal-tag.tag-total { color: var(--cal-text); font-weight: 700; }
.flowva-cal-doc-lines { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.flowva-cal-doc-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "nm am" "cu st";
	column-gap: 8px;
	align-items: baseline;
	padding: 5px 8px;
	border-radius: 8px;
	border: 1px solid var(--cal-border);
	background: var(--cal-soft);
	color: var(--cal-text) !important;
	text-decoration: none !important;
	font-size: 11.5px;
}
.flowva-cal-doc-line:hover { border-color: var(--chip-color); }
.flowva-cal-doc-line .nm { grid-area: nm; font-weight: 700; white-space: nowrap; }
.flowva-cal-doc-line .cu { grid-area: cu; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cal-muted); }
.flowva-cal-doc-line .am { grid-area: am; font-weight: 700; white-space: nowrap; }
.flowva-cal-doc-line .st { grid-area: st; font-size: 10.5px; color: var(--cal-muted); text-align: right; white-space: nowrap; }
.flowva-cal-doc-line.draft { border-style: dashed; }
.flowva-cal-card.done { opacity: 0.65; }
.flowva-cal-card-time { font-size: 12px; font-weight: 700; color: var(--cal-text); padding-top: 1px; }
.flowva-cal-card-title { font-size: 13px; font-weight: 700; color: var(--cal-text); margin-bottom: 4px; overflow-wrap: anywhere; }
.flowva-cal-card.done .flowva-cal-card-title { text-decoration: line-through; }
.flowva-cal-card-desc {
	margin-top: 5px;
	font-size: 12px;
	color: var(--cal-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.flowva-cal-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 4px 2px 0;
	padding: 1px 8px;
	border-radius: 9999px;
	font-size: 10.5px;
	font-weight: 600;
	background: var(--cal-soft);
	color: var(--cal-muted);
	border: 1px solid var(--cal-border);
}
.flowva-cal-open {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cal-muted);
	border: 1px solid var(--cal-border);
	text-decoration: none !important;
}
.flowva-cal-open:hover { color: var(--cal-accent); border-color: var(--cal-accent); }
.flowva-cal-empty { text-align: center; padding: 36px 16px; color: var(--cal-muted); font-size: 13px; }
.flowva-cal-empty small { display: block; margin-top: 4px; font-size: 12px; }
.flowva-cal-empty-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cal-accent) 10%, transparent);
	color: var(--cal-accent);
	font-size: 18px;
	margin-bottom: 8px;
}
.flowva-cal-panel.loading .flowva-cal-grid { opacity: 0.6; }

html[data-theme="dark"] .flowva-cal-sheet { --cal-soft: rgba(148, 163, 184, 0.07); }
html[data-theme="dark"] .flowva-calendar-dock-trigger:hover,
html[data-theme="dark"] .flowva-calendar-dock-trigger.flowva-dock-expanded { border-color: var(--cal-accent) !important; }

/* Tablets & phones: full-screen sheet, compact month grid with dots, agenda under the grid */
@media (max-width: 991.98px) {
	.flowva-cal-sheet {
		width: 100vw;
		border-radius: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.flowva-cal-header { padding: 12px 14px 10px; gap: 10px; }
	.flowva-cal-nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
	.flowva-cal-month-label { min-width: 0; flex: 1; }
	.flowva-cal-actions { margin-left: auto; }
	.flowva-cal-new span { display: none; }
	.flowva-cal-new { width: 34px; padding: 0; }
	.flowva-cal-filters { padding: 8px 14px; }
	.flowva-cal-body { display: block; }
	.flowva-cal-month { padding: 8px 10px; }
	.flowva-cal-grid {
		grid-template-rows: repeat(6, 54px);
		gap: 4px;
		overflow: visible;
	}
	.flowva-cal-day { padding: 4px 2px; border-radius: 10px; align-items: center; gap: 2px; }
	.flowva-cal-day-num { justify-content: center; }
	.flowva-cal-day-num span { min-width: 26px; height: 26px; font-size: 13px; }
	.flowva-cal-day-items { display: none; }
	.flowva-cal-day-dots { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
	.flowva-cal-day-dots span { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; }
	.flowva-cal-day-dots .d-task { background: #f97316; }
	.flowva-cal-day-dots .d-task.prio-urgent { background: #dc2626; }
	.flowva-cal-day-dots .d-task.prio-low { background: #94a3b8; }
	.flowva-cal-day-dots .d-report { background: #0d9488; }
	.flowva-cal-day-dots .d-maint { background: #d97706; }
	.flowva-cal-day-dots .d-follow { background: #7c3aed; }
	.flowva-cal-day-dots .d-sales { background: #16a34a; }
	.flowva-cal-day-dots .d-invoice { background: #db2777; }
	.flowva-cal-agenda { border-left: none; border-top: 1px solid var(--cal-border); min-height: 320px; }
	.flowva-cal-agenda-list { overflow: visible; }
	.flowva-cal-card { grid-template-columns: 64px minmax(0, 1fr) auto; }
}

/* Sidebar customizer: "Section Header" custom items render as small headings, not links */
.flowva-sidebar-section-header .flowva-sidebar-item {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--text-muted, #64748b) !important;
	background: transparent !important;
	cursor: default !important;
	margin-top: 8px !important;
}
.flowva-sidebar-section-header .flowva-sidebar-item .sidebar-item-icon {
	display: none !important;
}

/* =========================================================================
   Offline mode bar (flowva_offline_vault.render_offline_bar)
   ========================================================================= */
#flowva-offline-bar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 1046;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(760px, calc(100vw - 24px));
	padding: 8px 10px 8px 14px;
	border-radius: 14px;
	background: #1e293b;
	color: #f8fafc;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
	font-size: 13px;
	line-height: 1.35;
	animation: flowva-offline-bar-in 0.25s ease-out;
}
#flowva-offline-bar.is-online { background: #065f46; }
@keyframes flowva-offline-bar-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}
.flowva-offline-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #f59e0b;
	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
	flex-shrink: 0;
}
.flowva-offline-dot.online { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25); }
.flowva-offline-text { min-width: 0; }
.flowva-offline-sub { color: #cbd5e1; }
.flowva-offline-count {
	flex-shrink: 0;
	padding: 2px 9px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.flowva-offline-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.flowva-offline-btn.primary { background: #f97316; border-color: #f97316; }
#flowva-offline-bar.is-online .flowva-offline-btn.primary { background: #10b981; border-color: #10b981; }
.flowva-wizard-fleet-note { display: block; margin-top: 4px; opacity: 0.85; }
@media (max-width: 767.98px) {
	#flowva-offline-bar {
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		transform: none;
		max-width: none;
		padding: 8px 8px 8px 12px;
		gap: 8px;
	}
	@keyframes flowva-offline-bar-in { from { opacity: 0; } to { opacity: 1; } }
	.flowva-offline-sub { display: none; }
	.flowva-offline-btn span { display: none; }
	.flowva-offline-btn { padding: 0 10px; }
	.flowva-offline-btn.primary span { display: inline; }
}
@media (max-width: 991.98px) {
	/* Keep the personal widget button above the bar */
	body:has(#flowva-offline-bar) #flowva-personal-widget-trigger { bottom: 72px !important; }
	/* ...and keep the Calendar button halfway to it (the button moved up by 48px) */
	body:has(#flowva-offline-bar) .flowva-calendar-dock-trigger { top: calc(69% - 48.5px) !important; }
}

/* =========================================================================
   Flowva v3.2.3.8 - date pickers, icon picker, machine log, offline wizard extras
   ========================================================================= */

/* Task form: date button + themed month popover (replaces the browser's own date picker) */
.flowva-pw-date-btn {
	text-align: left !important;
	cursor: pointer;
	color: var(--text-color, #0f172a);
}
.flowva-pw-date-btn.is-empty { color: var(--text-muted, #94a3b8); }
.flowva-datepop {
	position: fixed;
	z-index: 1090;
	width: 264px;
	padding: 10px;
	border-radius: 14px;
	background: var(--card-bg, #ffffff);
	border: 1px solid var(--border-color, #e2e8f0);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
	color: var(--text-color, #0f172a);
	animation: flowva-datepop-in 0.12s ease-out;
}
@keyframes flowva-datepop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.flowva-datepop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.flowva-datepop-title { font-size: 13px; font-weight: 700; }
.flowva-datepop-nav {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-muted, #64748b);
	cursor: pointer;
}
.flowva-datepop-nav:hover { border-color: var(--cal-accent); color: var(--cal-accent); }
.flowva-datepop-week,
.flowva-datepop-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.flowva-datepop-week span {
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-muted, #64748b);
	padding: 2px 0 4px;
}
.flowva-datepop-week span.weekend { opacity: 0.6; }
.flowva-datepop-day {
	height: 32px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.flowva-datepop-day.weekend { background: color-mix(in srgb, var(--text-muted, #64748b) 9%, transparent); }
.flowva-datepop-day.other { opacity: 0.4; }
.flowva-datepop-day.past:not(.selected) { color: var(--text-muted, #64748b); }
.flowva-datepop-day:hover,
.flowva-datepop-day:focus-visible { border-color: var(--cal-accent); outline: none; }
.flowva-datepop-day.today { border-color: color-mix(in srgb, var(--cal-accent) 60%, transparent); color: var(--cal-accent); }
.flowva-datepop-day.selected {
	background: var(--cal-accent);
	border-color: var(--cal-accent);
	color: var(--cal-on-accent);
	box-shadow: 0 3px 8px var(--cal-glow);
}
.flowva-datepop-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color, #e2e8f0); }
.flowva-datepop-link {
	border: none;
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	color: var(--cal-accent);
	cursor: pointer;
	padding: 3px 6px;
	border-radius: 6px;
}
.flowva-datepop-link.muted { color: var(--text-muted, #64748b); }
.flowva-datepop-link:hover { background: color-mix(in srgb, var(--cal-accent) 10%, transparent); }
html[data-theme="dark"] .flowva-datepop {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .flowva-datepop-day.weekend { background: rgba(148, 163, 184, 0.08); }
html[data-theme="dark"] .flowva-datepop-foot { border-color: #334155; }
html[data-theme="dark"] .flowva-pw-date-btn { color: #e2e8f0; }

/* Frappe date picker (every Date field): theme accent, Friday / Saturday weekend, readable dark mode */
[data-flowva-theme="1"] .datepicker { border-radius: 12px; }
[data-flowva-theme="1"] .datepicker--cell.-selected-,
[data-flowva-theme="1"] .datepicker--cell.-selected-.-current-,
[data-flowva-theme="1"] .datepicker--cell.-selected-.-focus- {
	background: var(--flowva-accent, var(--primary)) !important;
	color: var(--flowva-on-accent, #ffffff) !important;
}
[data-flowva-theme="1"] .datepicker--cell.-current-:not(.-selected-) { color: var(--flowva-accent, var(--primary)) !important; font-weight: 700; }
[data-flowva-theme="1"] .datepicker--cell-day.-weekend-:not(.-selected-) { background: color-mix(in srgb, var(--text-muted, #64748b) 9%, transparent); }
html[data-theme="dark"] .datepicker {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e2e8f0 !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .datepicker--pointer { background: #1e293b !important; border-color: #334155 !important; }
html[data-theme="dark"] .datepicker--nav,
html[data-theme="dark"] .datepicker--buttons,
html[data-theme="dark"] .datepicker--time { border-color: #334155 !important; }
html[data-theme="dark"] .datepicker--nav-title,
html[data-theme="dark"] .datepicker--nav-title i,
html[data-theme="dark"] .datepicker--cell,
html[data-theme="dark"] .datepicker--time-current,
html[data-theme="dark"] .datepicker--time-sliders { color: #e2e8f0 !important; }
html[data-theme="dark"] .datepicker--nav-action path { stroke: #cbd5e1 !important; }
html[data-theme="dark"] .datepicker--nav-action:hover,
html[data-theme="dark"] .datepicker--nav-title:hover,
html[data-theme="dark"] .datepicker--button:hover,
html[data-theme="dark"] .datepicker--cell.-focus-:not(.-selected-) { background: #334155 !important; }
html[data-theme="dark"] .datepicker--day-name { color: var(--flowva-accent, #fdba74) !important; }
html[data-theme="dark"] .datepicker--cell.-other-month-,
html[data-theme="dark"] .datepicker--cell.-other-decade-,
html[data-theme="dark"] .datepicker--cell.-disabled- { color: #64748b !important; }
html[data-theme="dark"] .datepicker--cell-day.-weekend-:not(.-selected-) { background: rgba(148, 163, 184, 0.08); }
html[data-theme="dark"] .datepicker--button { color: var(--flowva-accent, #fdba74) !important; }

/* Sidebar Customizer: icon per row + icon picker */
.flowva-row-icon-btn {
	width: 30px;
	height: 30px;
	margin-right: 8px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--border-color, #e2e8f0);
	background: var(--card-bg, #ffffff);
	color: var(--flowva-accent, var(--primary, #f97316));
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.flowva-row-icon-btn:hover { border-color: var(--flowva-accent, var(--primary)); box-shadow: 0 0 0 3px var(--flowva-sidebar-hover-bg, rgba(249, 115, 22, 0.12)); }
.flowva-row-icon-btn.is-auto { color: var(--text-muted, #94a3b8); border-style: dashed; }
.flowva-row-icon-btn svg { width: 14px; height: 14px; }
.flowva-new-tab-icon-btn { display: inline-flex; align-items: center; gap: 8px; }
.flowva-new-tab-icon-btn i,
.flowva-new-tab-icon-btn svg { color: var(--flowva-accent, var(--primary)); }
.flowva-icon-picker-top { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.flowva-icon-picker-search { position: relative; flex: 1; }
.flowva-icon-picker-search > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #94a3b8); font-size: 12px; pointer-events: none; z-index: 2; }
.flowva-icon-picker-search input { padding-left: 32px !important; }
.flowva-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 6px;
	max-height: 380px;
	overflow-y: auto;
	padding: 2px;
}
.flowva-icon-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px 8px;
	border-radius: 10px;
	border: 1px solid var(--border-color, #e2e8f0);
	background: var(--card-bg, #ffffff);
	color: var(--text-color, #1e293b);
	cursor: pointer;
	min-width: 0;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.flowva-icon-opt i { font-size: 18px; color: var(--flowva-accent, var(--primary, #f97316)); }
.flowva-icon-opt span { font-size: 10.5px; color: var(--text-muted, #64748b); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-icon-opt:hover { border-color: var(--flowva-accent, var(--primary)); background: var(--flowva-sidebar-hover-bg, rgba(249, 115, 22, 0.06)); }
.flowva-icon-opt.selected { border-color: var(--flowva-accent, var(--primary)); box-shadow: 0 0 0 2px var(--flowva-sidebar-hover-bg, rgba(249, 115, 22, 0.15)); }
.flowva-icon-empty { padding: 24px; text-align: center; color: var(--text-muted, #64748b); }
html[data-theme="dark"] .flowva-row-icon-btn,
html[data-theme="dark"] .flowva-icon-opt { background: #0f172a; border-color: #334155; }
html[data-theme="dark"] .flowva-icon-opt span { color: #94a3b8; }
html[data-theme="dark"] .flowva-icon-opt { color: #e2e8f0; }

/* Activity Center: empty state title readable on dark themes */
html[data-theme="dark"] .flowva-drawer-empty-title { color: #f1f5f9 !important; }

/* Field Service wizard: last known running hours of the chosen machine */
.flowva-wizard-last-reading {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: -6px 0 10px;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 11.5px;
	color: var(--text-muted, #475569);
	background: color-mix(in srgb, var(--flowva-accent, #3b82f6) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--flowva-accent, #3b82f6) 22%, transparent);
}
.flowva-wizard-last-reading i { color: var(--flowva-accent, var(--primary)); margin-top: 2px; }
html[data-theme="dark"] .flowva-wizard-last-reading { color: #cbd5e1; }

/* Compressor 360: machine log entries + last reading in the hours dialog */
.flowva-c360-log-item .badge i { margin-right: 3px; }
.flowva-c360-last-reading {
	padding: 6px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--flowva-accent, #3b82f6) 8%, transparent);
	color: var(--text-color, #1e293b);
}
.flowva-c360-last-reading i { color: var(--flowva-accent, var(--primary)); margin-right: 4px; }
html[data-theme="dark"] .flowva-c360-last-reading { color: #e2e8f0; }
/* Contract coverage notice (Field Service wizard + compressor 360 view) */
.flowva-contract-banner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 2px 0 12px;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.45;
	border: 1px solid transparent;
}
.flowva-contract-banner i { margin-top: 2px; font-size: 13px; flex-shrink: 0; }
.flowva-contract-banner.covered { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flowva-contract-banner.covered.ending { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.flowva-contract-banner.partial { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.flowva-contract-banner.expired { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flowva-contract-banner.none { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
html[data-theme="dark"] .flowva-contract-banner.covered { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; }
html[data-theme="dark"] .flowva-contract-banner.covered.ending,
html[data-theme="dark"] .flowva-contract-banner.partial { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; }
html[data-theme="dark"] .flowva-contract-banner.expired { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
html[data-theme="dark"] .flowva-contract-banner.none { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.3); color: #cbd5e1; }
.flowva-c360-grid > .flowva-contract-banner { margin: 0 0 12px; }

/* Sales Order net profit card (managers only) */
.flowva-profit-card { width: 100%; }
.flowva-profit-section { padding: 14px 15px; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.flowva-profit-title { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--text-base, 14px); font-weight: 600; color: var(--heading-color, var(--text-color)); }
.flowva-profit-title i { color: var(--text-muted, #64748b); }
.flowva-profit-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.flowva-profit-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: 10px;
	background: var(--card-bg, #ffffff);
}
.flowva-profit-tile span { font-size: 11.5px; color: var(--text-muted, #64748b); }
.flowva-profit-tile b { font-size: 16px; font-weight: 700; color: var(--text-color, #0f172a); overflow-wrap: anywhere; }
.flowva-profit-tile small { font-size: 11px; color: var(--text-muted, #64748b); }
.flowva-profit-tile.pos b { color: #15803d; }
.flowva-profit-tile.neg b { color: #dc2626; }
.flowva-profit-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.flowva-profit-warn { font-size: 12px; color: #b45309; }
.flowva-profit-table td { padding: 7px 8px; vertical-align: top; }
.flowva-profit-table tr.total td { font-weight: 700; border-top: 2px solid var(--border-color, #e2e8f0); }
.flowva-profit-table tr.pos td:last-child { color: #15803d; }
.flowva-profit-table tr.neg td:last-child { color: #dc2626; }
.flowva-profit-hint { font-size: 11.5px; color: var(--text-muted, #64748b); margin-top: 2px; }
p.flowva-profit-hint { margin: 8px 0 0; line-height: 1.5; }
.flowva-profit-subtitle { margin: 4px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--heading-color, var(--text-color)); }
.flowva-profit-je-list { display: flex; flex-direction: column; gap: 4px; }
.flowva-profit-je {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: 8px;
	font-size: 12.5px;
}
.flowva-profit-je .flowva-profit-hint { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-profit-je-unlink { padding: 0 4px; color: var(--text-muted, #64748b); }
.flowva-profit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
html[data-theme="dark"] .flowva-profit-tile.pos b,
html[data-theme="dark"] .flowva-profit-table tr.pos td:last-child { color: #4ade80; }
html[data-theme="dark"] .flowva-profit-tile.neg b,
html[data-theme="dark"] .flowva-profit-table tr.neg td:last-child { color: #f87171; }
html[data-theme="dark"] .flowva-profit-warn { color: #fcd34d; }
@media (max-width: 767px) {
	.flowva-profit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Activity Center: dialogs opened from the drawer go above it; card buttons stay on one line */
body.flowva-activity-open .modal-backdrop { z-index: 1065 !important; }
body.flowva-activity-open .modal { z-index: 1070 !important; }
body.flowva-activity-open .datepickers-container { z-index: 1080 !important; }
body.flowva-activity-open #alert-container { z-index: 1085 !important; }
.flowva-notification-card .flowva-notification-foot { flex-wrap: wrap; gap: 6px; }
.flowva-notification-card .flowva-notification-actions { margin-left: auto; }
.flowva-notification-card .flowva-notification-actions .btn { white-space: nowrap; }

/* Quotation expected margin (card, approval status, lines) */
.flowva-margin-notes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.flowva-margin-status { font-size: 12px; font-weight: 500; }
.flowva-margin-status i { margin-right: 4px; }
.flowva-margin-status.ok { color: #15803d; }
.flowva-margin-status.warn { color: #b45309; }
html[data-theme="dark"] .flowva-margin-status.ok { color: #4ade80; }
html[data-theme="dark"] .flowva-margin-status.warn { color: #fcd34d; }
.flowva-profit-table + .flowva-margin-notes { margin: -6px 0 10px; }
.flowva-margin-lines-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; }
.flowva-margin-lines { margin: 0; font-size: 12.5px; }
.flowva-margin-lines th { position: sticky; top: 0; background: var(--card-bg, #ffffff); font-size: 11.5px; color: var(--text-muted, #64748b); font-weight: 600; }
.flowva-margin-lines td, .flowva-margin-lines th { padding: 6px 8px; vertical-align: top; }
.flowva-margin-lines tr.low td:last-child { color: #dc2626; font-weight: 600; }
html[data-theme="dark"] .flowva-margin-lines tr.low td:last-child { color: #f87171; }

/* Net Profit: linked orders */
.flowva-profit-group { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; background: var(--subtle-fg, rgba(148, 163, 184, 0.12)); }
.flowva-profit-group i { margin-right: 4px; color: var(--text-muted, #64748b); }
.flowva-profit-group.neg b { color: #dc2626; }
html[data-theme="dark"] .flowva-profit-group.neg b { color: #f87171; }
.flowva-profit-tag { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10.5px; background: var(--subtle-fg, rgba(148, 163, 184, 0.18)); color: var(--text-muted, #64748b); }
.flowva-margin-lines tr.current td { background: var(--subtle-fg, rgba(148, 163, 184, 0.08)); }
.flowva-margin-lines tr.total td { font-weight: 700; border-top: 2px solid var(--border-color, #e2e8f0); }

/* Rental service note on the profit card */
.flowva-profit-group.rental { background: rgba(245, 158, 11, 0.12); }
.flowva-profit-group.rental i { color: #d97706; }

/* Rental Fleet page */
.flowva-fleet { padding: 4px 0 24px; }
/* The pages' own content keeps the gutter of their filter row (.page-form: 15px) instead of starting on the sidebar's
   line: Cheque Wallet, Collections Board, My Approvals, Stock Shelf, Import Shipments, the fleets, Service Planner */
.layout-main-section > .flowva-fleet, .layout-main-section > .flowva-coll, .layout-main-section > .fcw { padding-left: 15px; padding-right: 15px; }
.flowva-fleet-empty { padding: 32px 16px; text-align: center; color: var(--text-muted, #64748b); }
.flowva-fleet-empty p { max-width: 520px; margin: 0 auto 12px; }
.flowva-fleet-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-bottom: 16px; }
.flowva-fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.flowva-fleet-grid.muted { opacity: 0.75; margin-top: 10px; }
.flowva-fleet-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--border-color, #e2e8f0);
	border-left: 4px solid #22c55e;
	border-radius: 10px;
	background: var(--card-bg, #ffffff);
}
.flowva-fleet-card.rented { border-left-color: #3b82f6; }
.flowva-fleet-card.overdue { border-left-color: #dc2626; }
.flowva-fleet-card.notstock, .flowva-fleet-card.retired { border-left-color: #94a3b8; }
.flowva-fleet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.flowva-fleet-title { display: flex; flex-direction: column; min-width: 0; }
.flowva-fleet-title a { font-weight: 600; color: var(--heading-color, var(--text-color)); overflow-wrap: anywhere; }
.flowva-fleet-title small { font-size: 11.5px; color: var(--text-muted, #64748b); overflow-wrap: anywhere; }
.flowva-fleet-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.flowva-fleet-pill { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: rgba(34, 197, 94, 0.14); color: #15803d; }
.flowva-fleet-pill.rented { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.flowva-fleet-pill.overdue { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.flowva-fleet-pill.soon { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.flowva-fleet-pill.notstock, .flowva-fleet-pill.retired { background: rgba(148, 163, 184, 0.2); color: var(--text-muted, #64748b); }
.flowva-fleet-where { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.flowva-fleet-where i { margin-top: 3px; color: var(--text-muted, #64748b); }
.flowva-fleet-where small { color: var(--text-muted, #64748b); }
.flowva-fleet-late { color: #dc2626; }
.flowva-fleet-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted, #64748b); }
.flowva-fleet-stats b { color: var(--text-color, #0f172a); }
.flowva-fleet-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border-color, #e2e8f0); font-size: 11px; color: var(--text-muted, #64748b); }
.flowva-fleet-money span { display: flex; flex-direction: column; min-width: 0; }
.flowva-fleet-money b { font-size: 13px; color: var(--text-color, #0f172a); overflow-wrap: anywhere; }
.flowva-fleet-money .pos b { color: #15803d; }
.flowva-fleet-money .neg b { color: #dc2626; }
.flowva-fleet-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.flowva-fleet-others-head { margin-top: 18px; }

/* List view: the column titles stay at the top while the rows scroll. ".result" scrolled sideways, which kept
   Frappe's sticky header row from sticking; the list box around it scrolls both ways instead. */
.frappe-list .result {
	overflow: visible !important;
}
.frappe-list .result > .list-row-container:first-child,
.frappe-list .list-row-container:has(> .list-row-head) {
	position: sticky !important;
	top: 0 !important;
	z-index: 4 !important;
	background: var(--fg-color, var(--card-bg, #ffffff)) !important;
}

/* Machine Fleet page */
.flowva-mf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.flowva-mf-tabs .btn { border-radius: 999px; }
.flowva-mf-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; font-size: 11px; background: rgba(148, 163, 184, 0.25); }
.flowva-mf-name { font-weight: 600; color: var(--heading-color, var(--text-color)); overflow-wrap: anywhere; }

/* WhatsApp Settings: webhook help */
.flowva-wa-help { font-size: 12.5px; }
.flowva-wa-url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.flowva-wa-url code { padding: 4px 8px; border-radius: 6px; background: var(--subtle-fg, rgba(148, 163, 184, 0.14)); overflow-wrap: anywhere; word-break: break-all; }
.flowva-wa-steps { margin: 0; padding-left: 18px; color: var(--text-muted, #64748b); }
.flowva-wa-steps li { margin-bottom: 4px; }
html[data-theme="dark"] .flowva-fleet-pill { color: #86efac; }
html[data-theme="dark"] .flowva-fleet-pill.rented { color: #93c5fd; }
html[data-theme="dark"] .flowva-fleet-pill.overdue, html[data-theme="dark"] .flowva-fleet-late { color: #fca5a5; }
html[data-theme="dark"] .flowva-fleet-pill.soon { color: #fcd34d; }
html[data-theme="dark"] .flowva-fleet-money .pos b { color: #86efac; }
html[data-theme="dark"] .flowva-fleet-money .neg b { color: #f87171; }

/* Quotation follow-up dialog: quick dates */
.flowva-followup-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 12px; }
.flowva-followup-quick .btn { border-radius: 999px; }

/* Service Planner (3.12.1): due services by week, one card per customer and site */
.flowva-planner-week { margin-bottom: 18px; }
.flowva-planner-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.flowva-planner-week-head small { color: var(--text-muted, #64748b); }
.flowva-planner-week.overdue .flowva-planner-week-head b { color: #dc2626; }
.flowva-planner-machine { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--border-color, #e2e8f0); font-size: 12.5px; }
.flowva-planner-machine-main { display: flex; flex-direction: column; min-width: 0; }
.flowva-planner-machine-main a { font-weight: 600; overflow-wrap: anywhere; }
.flowva-planner-machine-main small { color: var(--text-muted, #64748b); }
.flowva-planner-machine-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.flowva-planner-date { font-weight: 600; white-space: nowrap; }
.flowva-planner-need { margin-top: 12px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 8px 12px; background: var(--card-bg, #fff); }
.flowva-planner-need summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.flowva-planner-need table { margin: 8px 0 0; font-size: 12.5px; }
.flowva-planner-need .table-sm td, .flowva-planner-need .table-sm th { padding: 4px 6px; }

/* Customer timeline: one row per machine, the past and the next services on a line of months */
.flowva-tl { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; background: var(--card-bg, #fff); padding: 12px; }
.flowva-tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.flowva-tl-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-muted, #64748b); }
.flowva-tl-legend span { display: inline-flex; align-items: center; gap: 4px; }
.flowva-tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flowva-tl-body { min-width: 720px; }
.flowva-tl-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-color, #e2e8f0); }
.flowva-tl-row.axis { border-top: 0; padding: 0 0 4px; }
.flowva-tl-label { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.4; }
.flowva-tl-label a { font-weight: 600; overflow-wrap: anywhere; }
.flowva-tl-label small { color: var(--text-muted, #64748b); }
.flowva-tl-label .flowva-fleet-pill { font-size: 10px; padding: 0 6px; }
.flowva-tl-track { position: relative; height: 34px; border-radius: 8px; background: var(--subtle-fg, rgba(148, 163, 184, 0.08)); }
.flowva-tl-row.axis .flowva-tl-track { height: 18px; background: none; }
.flowva-tl-month { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--text-muted, #64748b); white-space: nowrap; }
.flowva-tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-color, #e2e8f0); }
.flowva-tl-today { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #f59e0b; z-index: 1; }
.flowva-tl-mark { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #16a34a; border: 2px solid var(--card-bg, #fff); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); z-index: 2; }
a.flowva-tl-mark:hover { transform: scale(1.35); z-index: 3; }
.flowva-tl-mark.visit { background: #3b82f6; }
.flowva-tl-mark.emergency { background: #dc2626; }
.flowva-tl-mark.reading { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #94a3b8; border-width: 1px; }
.flowva-tl-mark.work { border-radius: 2px; transform: rotate(45deg); background: #f97316; }
.flowva-tl-mark.future { background: var(--card-bg, #fff); border: 2px dashed #7c3aed; box-shadow: none; }
.flowva-tl-mark.future.late { border-color: #dc2626; border-style: solid; }
.flowva-tl-mark.static { position: relative; display: inline-block; top: auto; margin: 0; }
html[data-theme="dark"] .flowva-planner-week.overdue .flowva-planner-week-head b { color: #fca5a5; }
@media (max-width: 767px) {
	.flowva-tl-row { grid-template-columns: 150px minmax(0, 1fr); }
	.flowva-tl-body { min-width: 600px; }
}

/* 360 Machine Twin and service cycle clock (3.12.1): a dark display panel in every theme */
.flowva-twin { position: relative; margin: 0 0 14px; padding: 14px 14px 12px; border-radius: 18px; color: #e2e8f0; overflow: hidden; container-type: inline-size;
	background: radial-gradient(120% 140% at 15% 0%, #15254a 0%, #0b1426 52%, #060b17 100%);
	box-shadow: 0 14px 34px -12px rgba(2, 6, 23, 0.55), inset 0 0 0 1px rgba(148, 163, 184, 0.14); }
.flowva-twin::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
	background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse at 40% 40%, #000 35%, transparent 80%); }
.flowva-twin::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tw-brand); box-shadow: 0 0 14px rgba(56, 189, 248, 0.6); }
.flowva-twin-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.flowva-twin-title { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f8fafc; }
.flowva-twin-title i { color: #38bdf8; margin-right: 4px; }
.flowva-twin-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #86efac; }
.flowva-twin-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: tw-live 1.8s ease-out infinite; }
.flowva-twin-live.idle { color: #94a3b8; }
.flowva-twin-live.idle i { background: #64748b; animation: none; }
@keyframes tw-live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
.flowva-twin-health { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.flowva-twin-health.ok { color: #86efac; background: rgba(34, 197, 94, 0.14); }
.flowva-twin-health.soon { color: #fcd34d; background: rgba(245, 158, 11, 0.16); }
.flowva-twin-health.due { color: #fca5a5; background: rgba(239, 68, 68, 0.18); }
.flowva-twin-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #94a3b8; }
.flowva-twin-legend span { display: inline-flex; align-items: center; gap: 4px; }
.flowva-twin-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--tw-c); box-shadow: 0 0 6px var(--tw-c); }
.flowva-twin-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: center; }
@container (max-width: 720px) { .flowva-twin-grid { grid-template-columns: minmax(0, 1fr); } .flowva-twin-cycle { max-width: 320px; margin: 0 auto; width: 100%; } }
@media (max-width: 767px) { .flowva-twin-grid { grid-template-columns: minmax(0, 1fr); } }
.flowva-twin-info { min-height: 18px; margin-top: 4px; font-size: 12px; color: #cbd5e1; text-align: center; }

/* status colours (parts, chips, legend) */
.tw-ok { --tw-c: #22c55e; }
.tw-soon { --tw-c: #f59e0b; }
.tw-due { --tw-c: #ef4444; }
.tw-info { --tw-c: #38bdf8; }
.tw-run { --tw-c: #a78bfa; }
.tw-unknown { --tw-c: #64748b; }
.tw-plain { --tw-c: #475569; }
.tw-part.tw-plain { cursor: default; }
.tw-part.tw-plain .tw-shape, .tw-part.tw-plain:hover .tw-shape { stroke-width: 1.5; filter: none; }

/* the machine */
.tw-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tw-frame { fill: rgba(15, 23, 42, 0.55); stroke: rgba(148, 163, 184, 0.3); stroke-width: 1.5; }
.tw-louver { fill: none; stroke: rgba(148, 163, 184, 0.28); stroke-width: 2.5; stroke-linecap: round; }
.tw-pipe { fill: none; stroke: rgba(148, 163, 184, 0.2); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.tw-flow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 10; animation: tw-flow 1s linear infinite; }
.tw-flow.air { stroke: #38bdf8; filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.9)); }
.tw-flow.oil { stroke: #f59e0b; filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.8)); animation-duration: 1.7s; }
.tw-arrow { fill: none; stroke: #7dd3fc; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tw-flow { to { stroke-dashoffset: -24; } }
.tw-part { cursor: pointer; }
.tw-part .tw-shape { fill: rgba(30, 41, 59, 0.96); stroke: var(--tw-c); stroke-width: 2; transition: stroke-width 0.2s, filter 0.2s; }
.tw-part .tw-detail { fill: none; stroke: var(--tw-c); stroke-width: 1.4; opacity: 0.5; }
.tw-part .tw-dot { fill: var(--tw-c); }
.tw-part .tw-halo { fill: none; stroke: var(--tw-c); stroke-width: 2; opacity: 0; }
.tw-part.tw-due .tw-halo { animation: tw-pulse 1.6s ease-out infinite; }
.tw-part.tw-soon .tw-halo { animation: tw-pulse 2.6s ease-out infinite; }
@keyframes tw-pulse { 0% { opacity: 0.75; stroke-width: 2; } 100% { opacity: 0; stroke-width: 16; } }
.tw-part:hover .tw-shape, .tw-part.tw-focus .tw-shape { stroke-width: 3; filter: drop-shadow(0 0 7px var(--tw-c)); }
.tw-part .tw-fan { fill: rgba(148, 163, 184, 0.35); stroke: var(--tw-c); stroke-width: 1; }
.tw-label { fill: #cbd5e1; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; paint-order: stroke; stroke: #0b1426; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.tw-rotor { fill: rgba(56, 189, 248, 0.14); stroke: #7dd3fc; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: tw-spin var(--tw-speed, 2s) linear infinite; }
.tw-rotor.rev { fill: rgba(167, 139, 250, 0.14); stroke: #c4b5fd; animation-name: tw-spin-rev; animation-duration: calc(var(--tw-speed, 2s) * 1.5); }
.tw-fan { transform-box: fill-box; transform-origin: center; animation: tw-spin calc(var(--tw-speed, 2s) * 0.5) linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@keyframes tw-spin-rev { to { transform: rotate(-360deg); } }
.flowva-twin.idle .tw-rotor, .flowva-twin.idle .tw-fan, .flowva-twin.idle .tw-flow { animation-play-state: paused; opacity: 0.45; }

/* the cycle clock */
.tw-clock { display: block; width: 100%; height: auto; }
.tw-clock-bg { fill: rgba(15, 23, 42, 0.6); stroke: rgba(148, 163, 184, 0.16); }
.tw-seg { stroke: #0b1426; stroke-width: 1.5; opacity: 0.25; transition: opacity 0.3s; }
.tw-seg.s2k { fill: #38bdf8; }
.tw-seg.s4k { fill: #2dd4bf; }
.tw-seg.s8k { fill: #818cf8; }
.tw-seg.s16k { fill: #c084fc; }
.tw-seg.s24k { fill: #fb7185; }
.tw-seg.past { opacity: 0.55; }
.tw-seg.done { opacity: 1; filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.7)); }
.tw-seg.missed { fill: #ef4444; opacity: 0.9; }
.tw-seg.next { opacity: 1; animation: tw-next 1.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)); }
@keyframes tw-next { 50% { opacity: 0.45; } }
.tw-tick { fill: none; stroke: rgba(148, 163, 184, 0.4); stroke-width: 1.2; }
.tw-track { fill: none; stroke: rgba(148, 163, 184, 0.14); stroke-width: 4; }
.tw-progress { fill: none; stroke: #38bdf8; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.8)); transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tw-mark.done circle { fill: #22c55e; }
.tw-mark.done path { fill: none; stroke: #052e16; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tw-mark.next { fill: #f8fafc; filter: drop-shadow(0 0 6px #f8fafc); }
.tw-step-label { fill: #64748b; font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.tw-step-label.done, .tw-step-label.next { fill: #f8fafc; }
.tw-step-label.missed { fill: #fca5a5; }
.tw-needle { transform-origin: 160px 160px; transform: rotate(0deg); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tw-needle line { stroke: #f8fafc; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(248, 250, 252, 0.8)); }
.tw-needle circle { fill: #f8fafc; }
.tw-center-hours { fill: #f8fafc; font-size: 30px; font-weight: 800; text-anchor: middle; letter-spacing: -0.02em; }
.tw-center-sub { fill: #94a3b8; font-size: 10.5px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.06em; }
.tw-center-next { fill: #e2e8f0; font-size: 12.5px; font-weight: 700; text-anchor: middle; }
.tw-center-date { fill: #7dd3fc; font-size: 11px; font-weight: 600; text-anchor: middle; }
.tw-center-date .late { fill: #fca5a5; }
.tw-center-date .muted { fill: #94a3b8; }
.tw-center-cycle { fill: #64748b; font-size: 10px; text-anchor: middle; }

/* part chips */
.flowva-twin-parts { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: 8px; margin-top: 10px; }
.flowva-twin-chip { display: block; width: 100%; padding: 7px 9px; border-radius: 11px; text-align: left; color: #e2e8f0; cursor: pointer;
	background: rgba(15, 23, 42, 0.62); border: 1px solid rgba(148, 163, 184, 0.18); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.flowva-twin-chip:hover, .flowva-twin-chip.tw-focus { border-color: var(--tw-c); box-shadow: 0 0 0 1px var(--tw-c), 0 0 16px -4px var(--tw-c); transform: translateY(-1px); }
.flowva-twin-chip b { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.flowva-twin-chip b span:last-child { color: var(--tw-c); }
.flowva-twin-chip small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.35; color: #94a3b8; }
.flowva-twin-bar { height: 5px; margin-top: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.flowva-twin-bar span { display: block; width: 0; height: 100%; background: var(--tw-c); box-shadow: 0 0 8px var(--tw-c); transition: width 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
	.flowva-twin *, .flowva-twin *::before { animation: none !important; transition: none !important; }
}

/* override dialog: the saved override; Machine Fleet hint */
.flowva-c360-override-current { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: rgba(245, 158, 11, 0.12); color: var(--text-color, #0f172a); border-left: 3px solid #f59e0b; }
.flowva-fleet-hint { margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25); }

/* My Columns (3.12.1): the dialog rows and the header button */
.flowva-col-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.flowva-col-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 118px auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; background: var(--card-bg, #fff); }
.flowva-col-row.fixed { background: var(--subtle-fg, #f8fafc); }
.flowva-col-row.is-id { border-style: dashed; }
.flowva-col-row.dragging { opacity: 0.5; }
.flowva-col-handle { cursor: grab; color: var(--text-muted, #64748b); text-align: center; user-select: none; }
.flowva-col-row.fixed .flowva-col-handle { cursor: default; }
.flowva-col-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-col-row .flowva-col-width { height: 26px; padding: 2px 6px; font-size: 12px; }
.flowva-col-move { display: inline-flex; gap: 3px; }
.flowva-col-move .btn { min-width: 26px; padding: 1px 6px; }
@media (max-width: 480px) { .flowva-col-row { grid-template-columns: 18px minmax(0, 1fr) 96px; } .flowva-col-move { grid-column: 2 / -1; justify-content: flex-end; } }
.list-row-head .flowva-my-columns-btn { margin-left: 6px; padding: 2px 6px; line-height: 1; color: var(--text-muted, #64748b); background: transparent; border: 1px solid transparent; }
.list-row-head .flowva-my-columns-btn:hover { color: var(--text-color, #0f172a); border-color: var(--border-color, #e2e8f0); }

/* Machine Fleet (3.12.1): a header before each kind of machine */
.flowva-fleet-kind { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 6px 0 -2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.flowva-fleet-kind:first-child { margin-top: 0; }
.flowva-fleet-kind b { color: var(--heading-color, var(--text-color, #0f172a)); }
.flowva-fleet-kind span { padding: 0 7px; border-radius: 999px; background: var(--subtle-fg, rgba(148, 163, 184, .18)); font-weight: 700; }
.flowva-fleet-kind::after { content: ""; flex: 1; height: 1px; background: var(--border-color, #e2e8f0); }

/* Machine Twin (3.12.1): the corrected flow - two-section cooler, oil level, scavenge line, condensate drain */
.tw-pipe.thin { stroke-width: 4; }
.tw-flow.oil.thin { stroke-width: 1.6; stroke-dasharray: 2 6; }
.tw-flow.oil.slow { stroke-width: 2; opacity: .55; animation-duration: 3.4s; }
.tw-oil-level { fill: #f59e0b; opacity: .35; animation: c3-level 3s ease-in-out infinite; }
.tw-fins { fill: none; stroke-width: 1.4; opacity: .7; }
.tw-fins.air { stroke: #38bdf8; }
.tw-fins.oil { stroke: #f59e0b; }
.tw-fan-ring { fill: none; stroke: rgba(148, 163, 184, .35); stroke-width: 1.2; }
.tw-part .tw-fan-ring + .tw-fan { opacity: .55; }
.tw-label.small { font-size: 9.5px; font-weight: 600; fill: #94a3b8; }
.tw-drip { fill: #7dd3fc; animation: tw-drip 1.8s ease-in infinite; }
@keyframes tw-drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes c3-level { 50% { transform: translateY(2px); } }
.flowva-twin.idle .tw-drip, .flowva-twin.idle .tw-oil-level { animation: none; }

/* Item list (3.12.1): the selling price column, edited in place */
.flowva-price-col { flex: 0 0 130px !important; min-width: 130px; max-width: 130px; justify-content: flex-end; text-align: right; }
.flowva-price-col.editable { cursor: text; border-radius: 6px; transition: background .15s; }
.flowva-price-col.editable:hover { background: var(--subtle-fg, rgba(148, 163, 184, .14)); }
.flowva-price-col.editable:hover .flowva-price-value::after, .flowva-price-col.editable:hover .flowva-price-empty::after { content: " \270E"; color: var(--text-muted, #64748b); font-size: 11px; }
.flowva-price-empty { color: var(--text-muted, #94a3b8); font-size: 11.5px; font-style: italic; }
.flowva-price-input { height: 26px; padding: 2px 6px; text-align: right; }
.flowva-price-col.saved { background: rgba(34, 197, 94, .18); }


/* ---------------------------------------------------------------- Tasks: who gave the task / who it was given to */
.flowva-pw-who { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 10px; background: rgba(99, 102, 241, .1); color: #4f46e5; font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .flowva-pw-who { background: rgba(129, 140, 248, .18); color: #c7d2fe; }

/* ---------------------------------------------------------------- Sidebar favorites (top of every workspace) */
.flowva-fav-section { margin: 2px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-color, #e2e8f0); }
.flowva-fav-head { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; }
.flowva-fav-toggle { flex: 1; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 3px 0; cursor: pointer; color: var(--text-muted, #64748b); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.flowva-fav-head-star { color: #f59e0b; font-size: 11px; }
.flowva-fav-chev { margin-left: auto; font-size: 9px; transition: transform .15s ease; }
.flowva-fav-section.collapsed .flowva-fav-chev { transform: rotate(-90deg); }
.flowva-fav-section.collapsed .flowva-fav-items { display: none; }
.flowva-fav-manage { border: 0; background: transparent; color: var(--text-muted, #94a3b8); padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 11px; opacity: .7; }
.flowva-fav-manage:hover { opacity: 1; background: var(--flowva-sidebar-hover-bg, rgba(0, 0, 0, .05)); color: var(--flowva-sidebar-hover-color, var(--primary)); }
.flowva-fav-link { position: relative; }
.flowva-fav-link .sidebar-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-fav-web { font-size: 9px; opacity: .45; margin-left: 4px; }
.flowva-fav-remove { margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 11px; color: var(--text-muted, #94a3b8); opacity: 0; transition: opacity .12s ease; }
.flowva-fav-item:hover .flowva-fav-remove { opacity: .8; }
.flowva-fav-remove:hover { opacity: 1 !important; color: #dc2626; background: rgba(220, 38, 38, .1); }

/* The star next to each sidebar tab: on hover, filled when the tab is a favorite */
.flowva-fav-star { margin-left: auto; padding: 0 4px; font-size: 11px; line-height: 1; color: var(--text-muted, #94a3b8); opacity: 0; transition: opacity .12s ease, color .12s ease; cursor: pointer; flex-shrink: 0; }
.sidebar-item-container:hover > a > .flowva-fav-star, a:hover > .flowva-fav-star, a:focus-visible > .flowva-fav-star { opacity: .75; }
.flowva-fav-star[data-on="true"] { color: #f59e0b; }
.flowva-fav-star:hover { opacity: 1 !important; color: #f59e0b; transform: scale(1.15); }
@media (hover: none) {
	.flowva-fav-star { display: none; }
	.flowva-fav-remove { opacity: .6; }
}

/* My Favorites dialog */
.flowva-fav-manage-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.flowva-fav-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; background: var(--control-bg, #f8fafc); }
.flowva-fav-row-icon { width: 30px; flex-shrink: 0; }
.flowva-fav-row-label { flex: 1 1 160px; min-width: 120px; }
.flowva-fav-row-route { flex: 1 1 140px; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-fav-empty { padding: 14px; border: 1px dashed var(--border-color, #e2e8f0); border-radius: 8px; text-align: center; font-size: 12.5px; }

/* ---------------------------------------------------------------- Sidebar groups (Sidebar Customizer) */
.flowva-sidebar-group > a { cursor: pointer; }
.flowva-group-chev { margin-left: auto; font-size: 9px; opacity: .6; transition: transform .15s ease; }
.flowva-sidebar-group.collapsed .flowva-group-chev { transform: rotate(-90deg); }
.flowva-sidebar-group.collapsed > .flowva-group-children { display: none; }
.flowva-group-children { margin: 2px 0 4px 14px; padding-left: 6px; border-left: 1px solid var(--border-color, #e2e8f0); }
.flowva-sidebar-group.flowva-group-empty > .flowva-group-children { display: none; }
.flowva-row-group { width: auto; max-width: 150px; height: 24px; padding: 0 6px; font-size: 11px; margin-left: 8px; flex-shrink: 0; }
.flowva-reorder-row.flowva-row-in-group { margin-left: 22px; border-left: 3px solid var(--primary, #f97316) !important; }
.flowva-reorder-row.flowva-row-group-head { background: var(--flowva-sidebar-hover-bg, rgba(249, 115, 22, .08)) !important; }


/* ---------------------------------------------------------------- Import shipments (board, form, orders) */
.flowva-imp-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.flowva-imp-banner a { font-weight: 600; }
.flowva-imp-banner.flowva-imp-form { background: var(--card-bg, #fff); border-color: var(--border-color, #e2e8f0); color: var(--text-color, #1e293b); }
.flowva-imp-banner-title { font-weight: 700; }
.flowva-imp-late { color: #b91c1c; }
.flowva-imp-journey { display: flex; align-items: flex-start; margin: 4px 0 2px; }
.flowva-imp-step { flex: 1 1 0; position: relative; text-align: center; font-size: 11px; color: var(--text-muted, #64748b); min-width: 0; }
.flowva-imp-step::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 4px; background: #cbd5e1; position: relative; z-index: 1; }
.flowva-imp-step::after { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: #cbd5e1; z-index: 0; }
.flowva-imp-step:first-child::after { display: none; }
.flowva-imp-step.done::before, .flowva-imp-step.done::after, .flowva-imp-step.current::after { background: #f97316; }
.flowva-imp-step.current::before { background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .22); }
.flowva-imp-step.current span { color: var(--text-color, #0f172a); font-weight: 700; }
.flowva-imp-step span, .flowva-imp-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.flowva-imp-step small { font-size: 10.5px; opacity: .8; }
.flowva-imp-journey.mini { margin: 2px 0 6px; }
.flowva-imp-journey.mini .flowva-imp-step::before { width: 9px; height: 9px; margin-bottom: 0; }
.flowva-imp-journey.mini .flowva-imp-step::after { top: 3.5px; }
.flowva-imp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.flowva-imp-flag { padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: #fef3c7; color: #92400e; }
.flowva-imp-flag.late, .flowva-imp-flag.held { background: #fee2e2; color: #b91c1c; }
.flowva-imp-flag.acid { background: #ffedd5; color: #c2410c; }
.flowva-imp-note { font-size: 12px; color: var(--text-muted, #64748b); }
.flowva-imp-missing { font-size: 11.5px; color: var(--text-muted, #64748b); margin-top: 4px; }
.flowva-imp-waiting { padding: 8px 10px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.flowva-imp-waiting-title { font-weight: 700; margin-bottom: 2px; }
@media (max-width: 600px) {
	.flowva-imp-step span { font-size: 10px; }
	.flowva-imp-step small { display: none; }
}

/* ---------------------------------------------------------------- Desktop greeting (Flowva Theme Settings) */
/* Between the Desktop's top bar and its icons: the icons come up closer while it is shown; hidden in Edit mode */
.flowva-desktop-greeting { max-width: 880px; margin: 28px auto 0; padding: 0 16px; text-align: center; animation: flowva-greeting-in .45s ease-out both; }
.flowva-greeting-title { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--heading-color, var(--text-color, #0f172a)); }
.flowva-greeting-name { color: var(--flowva-accent, #f97316); }
.flowva-greeting-date { margin-top: 4px; font-size: 13px; color: var(--text-muted, #64748b); }
.flowva-greeting-wave { display: inline-block; transform-origin: 70% 75%; animation: flowva-greeting-wave 1.8s ease-in-out .5s 1; }
.desktop-wrapper:not([data-mode="Edit"]) > .flowva-desktop-greeting + .desktop-container .icons-container { margin-top: 12px; }
.desktop-wrapper[data-mode="Edit"] > .flowva-desktop-greeting { display: none; }
@keyframes flowva-greeting-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes flowva-greeting-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
@media (max-width: 570px) {
	.flowva-desktop-greeting { margin-top: 18px; }
	.flowva-greeting-title { font-size: 19px; }
	.flowva-greeting-date { font-size: 12px; }
}

/* ---------------------------------------------------------------- Sales Order celebration (Flowva Theme Settings) */
/* Over everything for a few seconds (the card above the balloons and confetti); clicks go through */
.flowva-celebration { position: fixed; inset: 0; z-index: 1100; pointer-events: none; overflow: hidden; }
.flowva-celebration canvas { position: absolute; inset: 0; }
.flowva-balloon { position: absolute; bottom: calc(var(--size) * -2.8); width: var(--size); opacity: 0; animation: flowva-balloon-rise var(--rise) cubic-bezier(.35, 0, .6, 1) var(--delay) forwards; }
.flowva-balloon-body { position: relative; display: block; width: var(--size); height: calc(var(--size) * 1.2); border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 6%, rgba(255, 255, 255, 0) 24%), var(--color);
	box-shadow: inset -6px -10px 18px rgba(0, 0, 0, .16); animation: flowva-balloon-sway 2.4s ease-in-out infinite alternate; }
.flowva-balloon-body::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 8px; margin-left: -5px; background: var(--color); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: brightness(.85); }
.flowva-balloon-body::after { content: ""; position: absolute; left: 50%; top: calc(100% + 6px); width: 1.5px; height: calc(var(--size) * 1.3); background: linear-gradient(rgba(100, 116, 139, .75), rgba(100, 116, 139, 0)); }
.flowva-celebration-card { position: absolute; z-index: 2; left: 50%; top: 38%; min-width: 240px; max-width: calc(100vw - 32px); padding: 18px 28px 16px; border-radius: 18px; text-align: center;
	background: var(--card-bg, #fff); color: var(--text-color, #0f172a); border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 24px 60px rgba(15, 23, 42, .2);
	transform: translate(-50%, -50%); animation: flowva-card-pop .5s cubic-bezier(.2, 1.4, .4, 1) both, flowva-card-out .5s ease-in 3.4s forwards; }
.flowva-celebration-emoji { font-size: 40px; line-height: 1; }
.flowva-celebration-title { margin-top: 6px; font-size: 20px; font-weight: 800; color: var(--heading-color, #0f172a); }
.flowva-celebration-sub { margin-top: 4px; font-size: 13px; color: var(--text-muted, #64748b); overflow-wrap: anywhere; }
.flowva-celebration-amount { margin-top: 2px; font-size: 16px; font-weight: 700; color: #16a34a; }
.flowva-celebration.reduced .flowva-celebration-card { animation: flowva-card-out .4s ease-in 3.2s forwards; }
@keyframes flowva-balloon-rise { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 100% { opacity: 1; transform: translateY(calc(-100vh - var(--size) * 4)); } }
@keyframes flowva-balloon-sway { from { transform: translateX(calc(var(--sway) * -1)) rotate(-4deg); } to { transform: translateX(var(--sway)) rotate(4deg); } }
@keyframes flowva-card-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes flowva-card-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
	.flowva-desktop-greeting, .flowva-greeting-wave { animation: none; }
}

/* ---------------------------------------------------------------- Greeting designs (Toggle Theme > Greeting & Celebration) */
/* Banner: a card tinted with the theme's colour, the sky of the hour beside the words */
.flowva-desktop-greeting[data-style="banner"] { max-width: 720px; text-align: left; }
.flowva-greeting-card { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 18px;
	background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.flowva-greeting-card { background: linear-gradient(120deg, color-mix(in srgb, var(--flowva-accent, #f97316) 14%, var(--card-bg, #fff)), var(--card-bg, #fff) 72%);
	border-color: color-mix(in srgb, var(--flowva-accent, #f97316) 24%, var(--border-color, #e2e8f0)); }
.flowva-greeting-sky { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--card-bg, #fff); box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.flowva-greeting-text { min-width: 0; }
.flowva-desktop-greeting[data-style="banner"] .flowva-greeting-title { font-size: 20px; }
/* Spotlight: the date small above, a big headline, the name in the theme's colours, a soft glow behind */
.flowva-desktop-greeting[data-style="spotlight"] { position: relative; isolation: isolate; display: flex; flex-direction: column-reverse; align-items: center; }
.flowva-desktop-greeting[data-style="spotlight"]::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(460px, 90%); height: 120px; transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--flowva-accent, #f97316) 22%, transparent), transparent); pointer-events: none; }
.flowva-desktop-greeting[data-style="spotlight"] .flowva-greeting-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.flowva-desktop-greeting[data-style="spotlight"] .flowva-greeting-name { background: linear-gradient(90deg, var(--flowva-accent, #f97316), #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flowva-desktop-greeting[data-style="spotlight"] .flowva-greeting-date { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--flowva-accent, #f97316); }
@media (max-width: 570px) {
	.flowva-greeting-card { padding: 12px 14px; gap: 12px; }
	.flowva-greeting-sky { width: 40px; height: 40px; font-size: 22px; }
	.flowva-desktop-greeting[data-style="banner"] .flowva-greeting-title { font-size: 17px; }
	.flowva-desktop-greeting[data-style="spotlight"] .flowva-greeting-title { font-size: 23px; }
}
/* The choices in Toggle Theme: each greeting shown smaller, as it is */
.flowva-style-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
.flowva-style-off { margin-left: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #b45309; }
.flowva-style-sample { height: 64px; overflow: hidden; margin-bottom: 8px; border-radius: 8px; background: var(--bg-color, #f8fafc); display: flex; align-items: center; justify-content: center; }
.flowva-style-sample .flowva-desktop-greeting { flex: 0 0 auto; width: 240%; margin: 0; padding: 0 8px; transform: scale(.42); animation: none; }
.flowva-style-sample .flowva-greeting-wave { animation: none; }
.flowva-greeting-style-option:hover, .flowva-celebration-style-option:hover { border-color: var(--primary) !important; }

/* ---------------------------------------------------------------- Sales Order rows: green delivered, yellow in stock, red short */
.flowva-row-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 0; font-size: 11.5px; color: var(--text-muted, #64748b); }
.flowva-row-legend .indicator { font-size: 11.5px; font-weight: 500; }

/* Sales Order rows: the three colours clearly apart (Frappe's own dots are small and dark: its yellow is an amber close to
   its red) - only in the Sales Order items and their legend */
.flowva-row-colours [data-fieldname="item_code"] .indicator::before,
.flowva-row-legend .indicator::before { width: 10px !important; height: 10px !important; border-radius: 50% !important; }
.flowva-row-colours [data-fieldname="item_code"] .indicator.green::before,
.flowva-row-legend .indicator.green::before { background: #16a34a !important; }
.flowva-row-colours [data-fieldname="item_code"] .indicator.yellow::before,
.flowva-row-legend .indicator.yellow::before { background: #facc15 !important; box-shadow: 0 0 0 1px rgba(15, 23, 42, .28); }
.flowva-row-colours [data-fieldname="item_code"] .indicator.red::before,
.flowva-row-legend .indicator.red::before { background: #dc2626 !important; }
html[data-theme="dark"] .flowva-row-colours [data-fieldname="item_code"] .indicator.yellow::before,
html[data-theme="dark"] .flowva-row-legend .indicator.yellow::before { box-shadow: none; }

/* Service Contract: the Visit Planner (also on the contract's Sales Order) */
.flowva-vp { font-size: 12.5px; }
.flowva-vp-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 4px 16px;
	padding: 10px 12px;
	margin-bottom: 10px;
	border-radius: 10px;
	background: var(--subtle-fg, #f8fafc);
	border: 1px solid var(--border-color, #e2e8f0);
}
.flowva-vp-list { display: flex; flex-direction: column; gap: 6px; }
.flowva-vp-row {
	display: grid;
	grid-template-columns: 34px 150px 110px minmax(0, 1fr) 150px 34px;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 10px;
	border: 1px solid var(--border-color, #e2e8f0);
}
.flowva-vp-no {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	background: rgba(79, 157, 217, 0.15);
	color: #1d6fa5;
}
.flowva-vp-people { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.flowva-vp-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	background: rgba(15, 23, 42, 0.06);
	white-space: nowrap;
}
.flowva-vp-chip .fa-times { cursor: pointer; opacity: 0.6; }
.flowva-vp-chip .fa-times:hover { opacity: 1; color: #dc2626; }
.flowva-vp-state { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.flowva-vp-state.state-done { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.flowva-vp-state.state-planned { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; }
.flowva-vp-state.state-missed { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }
.flowva-vp-reports { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-vp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.flowva-vp-empty { padding: 16px; text-align: center; }
@media (max-width: 767px) {
	.flowva-vp-row { grid-template-columns: 30px 1fr 1fr 30px; }
	.flowva-vp-people, .flowva-vp-status { grid-column: 2 / span 2; }
}
html[data-theme="dark"] .flowva-vp-head { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.2); }
html[data-theme="dark"] .flowva-vp-row { border-color: rgba(148, 163, 184, 0.2); }
html[data-theme="dark"] .flowva-vp-chip { background: rgba(148, 163, 184, 0.15); }
html[data-theme="dark"] .flowva-vp-state.state-done { color: #6ee7b7; background: rgba(52, 211, 153, 0.15); }
html[data-theme="dark"] .flowva-vp-state.state-planned { color: #93c5fd; background: rgba(96, 165, 250, 0.15); }
html[data-theme="dark"] .flowva-vp-state.state-missed { color: #fca5a5; background: rgba(248, 113, 113, 0.15); }

/* Governorate / City: each choice with its Arabic name on the right (flowva_sites.picker) */
.flowva-site-wrap { position: relative; }
.flowva-site-wrap select { padding-right: 46% !important; }
.flowva-site-ar {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	max-width: 42%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	font-size: 12.5px;
	color: var(--text-muted, #64748b);
	font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}
.flowva-site-menu {
	position: fixed;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	padding: 6px;
	border-radius: 10px;
	background: var(--card-bg, #ffffff);
	border: 1px solid var(--border-color, #e2e8f0);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.flowva-site-search { margin-bottom: 6px; flex: 0 0 auto; }
.flowva-site-options { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.flowva-site-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	direction: ltr;
	border: none;
	background: transparent;
	color: var(--text-color, #1e293b);
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 13px;
	cursor: pointer;
}
.flowva-site-opt .en { text-align: left; }
.flowva-site-opt .ar { text-align: right; color: var(--text-muted, #64748b); font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; }
.flowva-site-opt:hover, .flowva-site-opt:focus { background: rgba(249, 115, 22, 0.08); outline: none; }
.flowva-site-opt.selected { background: rgba(249, 115, 22, 0.14); font-weight: 600; }
html[data-theme="dark"] .flowva-site-menu { background: #1e293b; border-color: rgba(148, 163, 184, 0.25); }
html[data-theme="dark"] .flowva-site-opt { color: #e2e8f0; }
html[data-theme="dark"] .flowva-site-opt .ar, html[data-theme="dark"] .flowva-site-ar { color: #94a3b8; }