/**
 * UpperMatch Create-Post Navigator + Color Overrides
 *
 * 1. CSS Custom Properties (brand tokens)
 * 2. Desktop Layout Shift
 * 3. Desktop Navigator Sidebar
 * 4. Step Items & Progress
 * 5. Expanded Field List
 * 6. Mobile FAB & Drawer
 * 7. UI-HTML Inline Style Color Overrides
 * 8. Admin Bar Offset
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
	--um-primary: #252634;
	--um-accent: #0071E3;
	--um-green: #00E23A;
	--um-text: #313135;
	--um-grey: #797A88;
	--um-border: #D4D6DD;
	--um-shade-1: #F8F8F8;
	--um-shade-0: #FCFCFC;
	--um-nav-width: 280px;
	--um-nav-bg: #ffffff;
	--um-nav-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   2. Getting Started Gate — hide navigator until full form is active
   ========================================================================== */

/*
 * The create-asset page has a "Getting Started" form (#gs-form-asset) shown first.
 * The full Voxel form lives inside #full-form-asset and gets class .um-form-visible
 * only after GS is complete. The navigator uses body.um-nav-ready (set by JS)
 * to gate all visibility.
 */
.um-step-nav--desktop,
.um-nav-fab {
	display: none !important;
}

body.um-nav-ready .um-step-nav--desktop {
	display: flex !important;
}

body.um-nav-ready .um-nav-fab {
	display: flex !important;
}

/* Still hide desktop nav on mobile even when ready */
@media (max-width: 1199px) {
	body.um-nav-ready .um-step-nav--desktop {
		display: none !important;
	}
}

/* Still hide mobile FAB on desktop even when ready */
@media (min-width: 1200px) {
	body.um-nav-ready .um-nav-fab {
		display: none !important;
	}
}

/* ==========================================================================
   2b. Desktop Layout Shift (only when nav is ready)
   ========================================================================== */

@media (min-width: 1200px) {
	body.um-nav-ready.page-id-649 .elementor-widget-ts-create-post,
	body.um-nav-ready.page-id-61266 .elementor-widget-ts-create-post {
		margin-left: var(--um-nav-width) !important;
		transition: margin-left 0.3s ease;
	}
}

/* ==========================================================================
   3. Desktop Navigator Sidebar
   ========================================================================== */

.um-step-nav {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.um-step-nav *,
.um-step-nav *::before,
.um-step-nav *::after {
	box-sizing: border-box;
}

.um-step-nav--desktop {
	position: fixed;
	top: var(--um-nav-top, 0px);
	left: 0;
	bottom: 0;
	width: var(--um-nav-width);
	background: var(--um-nav-bg);
	border-right: 1px solid var(--um-border);
	box-shadow: var(--um-nav-shadow);
	z-index: 100;  /* Below site header (z-index: 999999) and asset preview sidebar (z-index: 1000) */
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: var(--um-border) transparent;
}

@media (max-width: 1199px) {
	.um-step-nav--desktop {
		display: none !important;
	}
}

/* Navigator header */
.um-step-nav__header {
	padding: 20px 16px 16px;
	border-bottom: 1px solid var(--um-border);
	flex-shrink: 0;
}

.um-step-nav__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--um-primary);
	margin: 0;
	letter-spacing: -0.01em;
}

.um-step-nav__subtitle {
	font-size: 12px;
	color: var(--um-grey);
	margin: 4px 0 0;
	font-variant-numeric: tabular-nums;
}

/* Overall progress bar */
.um-step-nav__overall {
	height: 4px;
	background: var(--um-border);
	border-radius: 2px;
	margin-top: 10px;
	overflow: hidden;
}

.um-step-nav__overall-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--um-accent), #3b82f6);
	border-radius: 2px;
	transition: width 0.4s ease;
	width: 0%;
}

/* Steps container */
.um-step-nav__steps {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

/* ==========================================================================
   4. Step Items & Progress
   ========================================================================== */

.um-step-item {
	padding: 10px 16px;
	cursor: pointer;
	transition: background 0.15s ease;
	border-left: 3px solid transparent;
	user-select: none;
}

.um-step-item:hover {
	background: var(--um-shade-1);
}

.um-step-item--active {
	background: var(--um-shade-1);
	border-left-color: var(--um-accent);
}

/* Step header row */
.um-step-item__header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.um-step-item__number {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	background: var(--um-shade-1);
	color: var(--um-grey);
	transition: background 0.2s, color 0.2s;
}

.um-step-item--active .um-step-item__number {
	background: var(--um-accent);
	color: #fff;
}

.um-step-item--complete .um-step-item__number {
	background: var(--um-green);
	color: #fff;
}

.um-step-item__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--um-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	line-height: 1.3;
}

.um-step-item--active .um-step-item__label {
	color: var(--um-accent);
	font-weight: 600;
}

.um-step-item__count {
	font-size: 11px;
	color: var(--um-grey);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* Checkmark SVG for complete steps */
.um-step-item__check {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: none;
	color: var(--um-green);
}

.um-step-item--complete .um-step-item__check {
	display: block;
}

/* Mini progress bar under each step */
.um-step-item__progress {
	height: 3px;
	background: var(--um-border);
	border-radius: 2px;
	margin-top: 8px;
	overflow: hidden;
}

.um-step-item__progress-fill {
	height: 100%;
	background: var(--um-accent);
	border-radius: 2px;
	transition: width 0.3s ease;
}

.um-step-item--complete .um-step-item__progress-fill {
	background: var(--um-green);
}

/* ==========================================================================
   5. Expanded Field List (active step only)
   ========================================================================== */

.um-step-fields {
	display: none;
	padding: 6px 0 2px;
}

.um-step-item--active .um-step-fields {
	display: block;
}

.um-field-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px 5px 30px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.1s ease;
}

.um-field-item:hover {
	background: rgba(0, 113, 227, 0.06);
}

.um-field-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--um-border);
	transition: background 0.2s ease;
}

.um-field-item--filled .um-field-dot {
	background: var(--um-green);
}

.um-field-item__label {
	font-size: 12px;
	color: var(--um-grey);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.um-field-item--filled .um-field-item__label {
	color: var(--um-text);
}

/* ==========================================================================
   6. Mobile FAB & Drawer
   ========================================================================== */

/* FAB Button — base styles (visibility gated by body.um-nav-ready above) */

@media (max-width: 1199px) {
	body.um-nav-ready .um-nav-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
		width: 56px;
		height: 56px;
		background: var(--um-accent);
		color: white;
		border-radius: 50%;
		box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
		cursor: pointer;
		z-index: 1001;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		border: none;
		-webkit-tap-highlight-color: transparent;
	}

	.um-nav-fab:active {
		transform: translateX(-50%) scale(0.92);
	}

	.um-nav-fab svg {
		width: 24px;
		height: 24px;
		fill: none;
		stroke: white;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* FAB badge (progress %) */
	.um-nav-fab__badge {
		position: absolute;
		top: -4px;
		right: -4px;
		min-width: 22px;
		height: 22px;
		background: var(--um-primary);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		border-radius: 11px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}
}

/* Overlay backdrop */
.um-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1002;
	opacity: 0;
	transition: opacity 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.um-nav-overlay--open {
	display: block;
	opacity: 1;
}

/* Mobile drawer */
.um-step-nav--mobile {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 80vh;
	background: var(--um-nav-bg);
	border-radius: 16px 16px 0 0;
	z-index: 1003;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
	overflow-y: auto;
	padding: 0 0 env(safe-area-inset-bottom, 16px);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
	width: auto !important;
	border-right: none !important;
}

.um-step-nav--mobile.um-step-nav--open {
	transform: translateY(0);
}

/* Drawer handle */
.um-step-nav__handle {
	width: 36px;
	height: 4px;
	background: var(--um-border);
	border-radius: 2px;
	margin: 10px auto 6px;
}

/* Close button */
.um-step-nav__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--um-shade-1);
	border: none;
	cursor: pointer;
	color: var(--um-grey);
	-webkit-tap-highlight-color: transparent;
}

.um-step-nav__close:hover {
	background: var(--um-border);
}

/* Hide mobile elements on desktop */
@media (min-width: 1200px) {
	.um-nav-overlay,
	.um-step-nav--mobile {
		display: none !important;
	}
}

/* ==========================================================================
   7. UI-HTML Inline Style Color Overrides
   ========================================================================== */

/*
 * Override Apple.com inline styles in .ui-html-content elements.
 * Uses [style*="..."] attribute selectors + !important to beat inline specificity.
 */

/* --- Text color: #1d1d1f -> brand primary #252634 --- */
.ui-html-content [style*="color: #1d1d1f"],
.ui-html-content [style*="color:#1d1d1f"] {
	color: #252634 !important;
}

/* --- Text color: #86868b -> brand grey #797A88 --- */
.ui-html-content [style*="color: #86868b"],
.ui-html-content [style*="color:#86868b"] {
	color: #797A88 !important;
}

/* --- Text color: #64748b (Tailwind slate) -> brand grey #797A88 --- */
.ui-html-content [style*="color: #64748b"],
.ui-html-content [style*="color:#64748b"] {
	color: #797A88 !important;
}

/* --- Heading color: #1e3a5f -> brand primary #252634 --- */
.ui-html-content [style*="color: #1e3a5f"],
.ui-html-content [style*="color:#1e3a5f"] {
	color: #252634 !important;
}

/* --- Background: #fbfbfd -> brand shade #F8F8F8 --- */
.ui-html-content [style*="background: #fbfbfd"],
.ui-html-content [style*="background:#fbfbfd"] {
	background: #F8F8F8 !important;
}

/* --- Background: #f5f5f7 -> brand shade #F8F8F8 --- */
.ui-html-content [style*="background: #f5f5f7"],
.ui-html-content [style*="background:#f5f5f7"] {
	background: #F8F8F8 !important;
}

/* --- Background: #1e3a5f (icon bg) -> brand primary #252634 --- */
.ui-html-content [style*="background: #1e3a5f"],
.ui-html-content [style*="background:#1e3a5f"] {
	background: #252634 !important;
}

/* --- Background: #f8fafc -> brand shade #F8F8F8 --- */
.ui-html-content [style*="background: #f8fafc"],
.ui-html-content [style*="background:#f8fafc"] {
	background: #F8F8F8 !important;
}

/* --- Background: #f1f5f9 -> brand shade #F8F8F8 --- */
.ui-html-content [style*="background: #f1f5f9"],
.ui-html-content [style*="background:#f1f5f9"] {
	background: #F8F8F8 !important;
}

/* --- Border: #e8e8ed -> brand border #D4D6DD --- */
.ui-html-content [style*="solid #e8e8ed"] {
	border-color: #D4D6DD !important;
}

/* --- Border: #e5e7eb -> brand border #D4D6DD --- */
.ui-html-content [style*="solid #e5e7eb"] {
	border-color: #D4D6DD !important;
}

/* --- Border: #d2d2d7 -> brand border #D4D6DD --- */
.ui-html-content [style*="solid #d2d2d7"] {
	border-color: #D4D6DD !important;
}

/* --- Apple pill border-radius: 980px -> brand 8px --- */
.ui-html-content [style*="border-radius: 980px"],
.ui-html-content [style*="border-radius:980px"] {
	border-radius: 8px !important;
}

/* --- Details/summary left-border accent unify --- */
.ui-html-content [style*="border-left: 4px solid #1e73eb"] {
	border-left-color: #0071E3 !important;
}

/* --- Green backgrounds keep but unify shade --- */
.ui-html-content [style*="background: #ecfdf5"] {
	background: #ecfdf5 !important;
}

/* ==========================================================================
   8. Hide asset preview completion tracker (replaced by sidebar navigator)
   ========================================================================== */

.alp-completion {
	display: none !important;
}

/* ==========================================================================
   9. Admin Bar Offset
   ========================================================================== */

/*
 * The --um-nav-top variable is set dynamically by JS based on the actual
 * header height. The admin bar adds extra offset on top of that.
 * Fallback values here in case JS hasn't set the variable yet.
 */
body.admin-bar .um-step-nav--desktop {
	top: calc(var(--um-nav-top, 0px) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .um-step-nav--desktop {
		top: calc(var(--um-nav-top, 0px) + 46px);
	}
}

/* ==========================================================================
   10. Field Highlight Animation (when clicking from navigator)
   ========================================================================== */

@keyframes um-field-highlight {
	0% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.3); }
	50% { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); }
	100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
}

.um-field-highlight {
	animation: um-field-highlight 1.5s ease-out;
}

/* ==========================================================================
   11. Expandable Help Blocks — Minimal Restyle
   ========================================================================== */

/*
 * Strips all color from the 66 expandable <details>/<summary> help blocks
 * inside .ui-html-content. Makes them compact, colorless, and light with
 * a smooth expand animation. Overrides inline styles from the post type config.
 *
 * Two color variants exist in the original:
 *   Blue:   summary bg #f0f7ff, border #1e73eb, text #1e3a5f
 *   Orange: summary bg #fff7ed, border #f97316, text #c2410c
 * Both get neutralized to the same minimal gray treatment.
 *
 * Structure:
 *   <details>
 *     <summary>  [chevron SVG] [info SVG] <span>Title</span>  </summary>
 *     <div>  ← margin wrapper
 *       <div>  ← content box (had colored bg + border-left)
 *         <div>  ← flex container
 *           <svg/>  ← icon
 *           <div>text content</div>
 *         </div>
 *       </div>
 *     </div>
 *   </details>
 */

/* --- Details wrapper: tighten spacing --- */
.ui-html-content details {
	margin: 4px 0 8px !important;
}

/* --- Summary: strip all color, make compact --- */
.ui-html-content details > summary {
	background: transparent !important;
	border: 1px solid #E2E2E7 !important;
	border-radius: 8px !important;
	padding: 7px 11px !important;
	gap: 6px !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ui-html-content details > summary::-webkit-details-marker {
	display: none;
}

.ui-html-content details > summary:hover {
	background: #F5F5F7 !important;
	border-color: #CCCCD2 !important;
}

/* Open state: visually connect summary to content */
.ui-html-content details[open] > summary {
	background: #F7F7F8 !important;
	border-color: #E2E2E7 !important;
	border-bottom-color: transparent !important;
	border-radius: 8px 8px 0 0 !important;
}

/* --- Summary title text: neutral gray --- */
.ui-html-content details > summary > span {
	color: #6E6E78 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}

.ui-html-content details > summary:hover > span,
.ui-html-content details[open] > summary > span {
	color: #555560 !important;
}

/* --- Summary SVG icons: neutral light gray --- */
.ui-html-content details > summary > svg {
	stroke: #C0C0C8 !important;
	flex-shrink: 0;
}

/* Chevron (first SVG) — smaller, rotates smoothly on open */
.ui-html-content details > summary > svg:first-child {
	width: 10px !important;
	height: 10px !important;
	transition: transform 0.2s ease;
}

.ui-html-content details[open] > summary > svg:first-child {
	transform: rotate(90deg);
}

/* Info icon (second SVG) — slightly smaller */
.ui-html-content details > summary > svg:nth-child(2) {
	width: 13px !important;
	height: 13px !important;
}

/* --- Content wrapper: remove gap between summary and content --- */
.ui-html-content details > summary + div {
	margin-top: 0 !important;
}

/*
 * --- Content box: strip color, seamlessly connect to summary ---
 * [style] attribute selector boosts specificity (0,2,4) above existing
 * color-override rules (0,2,0) so the neutral border wins.
 */
.ui-html-content details > summary + div > div[style] {
	background: #F7F7F8 !important;
	border: 1px solid #E2E2E7 !important;
	border-top: none !important;
	border-radius: 0 0 8px 8px !important;
	padding: 10px 14px !important;
}

/* --- Content SVG icons: neutral --- */
.ui-html-content details > summary + div svg {
	stroke: #B8B8C0 !important;
}

/* --- Content text: neutral dark (readable but not bold/colored) --- */
.ui-html-content details > summary + div [style*="color: #1e3a5f"],
.ui-html-content details > summary + div [style*="color:#1e3a5f"],
.ui-html-content details > summary + div [style*="color: #c2410c"],
.ui-html-content details > summary + div [style*="color:#c2410c"] {
	color: #494950 !important;
	font-size: 12.5px !important;
	line-height: 1.55 !important;
}

/* --- Smooth expand animation --- */
.ui-html-content details[open] > summary + div {
	animation: um-details-expand 0.2s ease-out;
}

@keyframes um-details-expand {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   12. Graph/Chart Dark Fills → UpperMatch Blue
   ========================================================================== */

/*
 * Certain UI-HTML fields contain bar charts, stacked bars, SVG line charts,
 * legend indicators, and timeline dots that use #1d1d1f (Apple system dark)
 * as the primary visual fill. This section changes those graphic fills to
 * UpperMatch blue (#0071E3) while leaving text color: #1d1d1f untouched
 * (already mapped to #252634 by section 7).
 *
 * Affected: ui-help-expense-breakdown (bar chart), ui-help-revenue-breakdown
 * (stacked bar + legend), ui-help-monthly-breakdown (SVG line chart + legend).
 */

/* --- Bar fills, legend dots/lines, timeline dots: dark bg → blue --- */
.ui-html-content [style*="background: #1d1d1f"],
.ui-html-content [style*="background:#1d1d1f"] {
	background: #0071E3 !important;
}

/* --- SVG line/path strokes: dark → blue --- */
.ui-html-content svg *[stroke="#1d1d1f"] {
	stroke: #0071E3;
}

/* --- SVG gradient stops: dark → white (preserves opacity for subtle wash) --- */
.ui-html-content [style*="stop-color:#1d1d1f"] {
	stop-color: #ffffff !important;
}

/* --- SVG fill attributes (if any): dark → blue --- */
.ui-html-content svg *[fill="#1d1d1f"] {
	fill: #0071E3;
}