/* =========================================================================
   WBL Interactive Map v3 — iOS "night glass" layer
   Custom styles for what Tailwind can't express cleanly (glass, blur,
   sheet motion, marker glow). Design tokens mirror the Stitch design system
   "Liquid Oceanic Navigation".
   ========================================================================= */

:root {
	--v3-bg: #0b1015;
	--v3-surface: #0f1419;
	--v3-glass: rgba(20, 26, 33, 0.6);
	--v3-glass-strong: rgba(17, 22, 28, 0.82);
	--v3-stroke: rgba(255, 255, 255, 0.10);
	--v3-stroke-soft: rgba(255, 255, 255, 0.06);
	--v3-accent: #00e39a;   /* neon green — operating / live / active */
	--v3-cyan: #00d1ff;     /* discharge / focus / data */
	--v3-amber: #ffb800;    /* waiting time / at anchor */
	--v3-ink: #ffffff;
	--v3-ink-soft: #a0aec0;
	--v3-blur: 22px;
	--v3-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
	--v3-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

html, body {
	margin: 0;
	height: 100%;
	background: var(--v3-bg);
	color: var(--v3-ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

#app, #v3-map { position: absolute; inset: 0; }

/* --- Glass primitive --- */
.v3-glass {
	background: var(--v3-glass);
	-webkit-backdrop-filter: blur(var(--v3-blur)) saturate(150%);
	backdrop-filter: blur(var(--v3-blur)) saturate(150%);
	border: 1px solid var(--v3-stroke);
	box-shadow: var(--v3-shadow);
}
.v3-glass-strong {
	background: var(--v3-glass-strong);
	-webkit-backdrop-filter: blur(var(--v3-blur)) saturate(150%);
	backdrop-filter: blur(var(--v3-blur)) saturate(150%);
	border: 1px solid var(--v3-stroke);
	box-shadow: var(--v3-shadow);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.v3-glass { background: rgba(17, 22, 28, 0.95); }
	.v3-glass-strong { background: rgba(15, 20, 25, 0.97); }
}

.v3-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* --- Live pulse dot --- */
.v3-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.v3-pulse { position: relative; }
.v3-pulse::after {
	content: ""; position: absolute; inset: -4px; border-radius: 999px;
	background: currentColor; opacity: 0.45; animation: v3pulse 1.8s var(--v3-ease) infinite;
}
@keyframes v3pulse {
	0%   { transform: scale(0.6); opacity: 0.5; }
	70%  { transform: scale(2.2); opacity: 0; }
	100% { opacity: 0; }
}

/* --- Bottom sheet motion --- */
.v3-sheet {
	transition: transform 0.45s var(--v3-ease), opacity 0.3s var(--v3-ease);
	will-change: transform;
}
.v3-sheet.is-hidden { transform: translateY(115%); opacity: 0; pointer-events: none; }
/* animate min<->normal<->max height changes */
.v3-sheet-panel { transition: max-height 0.4s var(--v3-ease); overflow: hidden; }
/* queue collapse (minimize) animation. flex-1 + min-h-0 bound it to the panel so the inner
   .v3-scroll actually scrolls at 50%; max-height caps only for the collapse transition. */
.v3-queue-wrap {
	max-height: 80vh; opacity: 1; overflow: hidden;
	transition: max-height 0.4s var(--v3-ease), opacity 0.28s var(--v3-ease);
}
.v3-queue-wrap.is-min { max-height: 0 !important; opacity: 0; }
/* drag handle — bigger touch target, no browser panning while dragging */
.v3-handle { padding: 5px 20px 9px; touch-action: none; }
.v3-handle:active { cursor: grabbing; }

/* --- Queue timeline spine --- */
.v3-queue-item { position: relative; }
/* spine runs through the number badge centre: pl-3 (12px) + w-7/2 (14px) = 26px -> left 25 for a 2px line */
.v3-queue-item::before {
	content: ""; position: absolute; left: 25px; top: -3px; bottom: -3px;
	width: 2px; background: var(--v3-stroke); z-index: 0;
}
.v3-queue-item:first-child::before { top: 22px; }              /* start at the first badge centre */
.v3-queue-item:last-child::before  { bottom: auto; height: 25px; }  /* stop at the last badge centre */
/* the number badge sits above the spine and masks it, leaving clean connectors */
.v3-qnum { position: relative; z-index: 1; }

/* --- Scrollbars --- */
.v3-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.v3-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
.v3-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* --- Autocomplete list --- */
.v3-suggest-item { transition: background 0.15s var(--v3-ease); }
.v3-suggest-item:hover, .v3-suggest-item.is-active { background: rgba(0, 227, 154, 0.14); }
.v3-suggest-item mark { background: rgba(0, 227, 154, 0.28); color: inherit; border-radius: 4px; padding: 0 2px; }

/* --- Advanced-marker pins (DOM content) --- */
.v3-pin {
	position: relative;
	transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.v3-pin-ship {
	width: 15px; height: 15px; border-radius: 999px;
	border: 2px solid rgba(255,255,255,0.85);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 12px 2px currentColor;
	transition: transform 0.2s var(--v3-ease);
}
.v3-pin-ship.is-waiting   { color: var(--v3-amber);  background: var(--v3-amber); }
.v3-pin-ship.is-operating { color: var(--v3-accent); background: var(--v3-accent); }
.v3-pin-ship.is-selected  { transform: scale(1.5); box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 16px 4px currentColor; }
.v3-pin-berth-dot {
	min-width: 16px; height: 16px; padding: 0 2px; border-radius: 999px;
	background: var(--c, #dfe7ee); border: 2px solid rgba(255,255,255,0.9);
	box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 10px 1px var(--c, #dfe7ee);
	display: flex; align-items: center; justify-content: center;
	font-size: 9px; line-height: 1; color: #05221a;
	transition: transform 0.2s var(--v3-ease);
}
.v3-pin-berth-dot.is-active { transform: scale(1.35); }
.v3-pin-label {
	position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
	background: rgba(17,22,28,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid var(--v3-stroke); color: #fff; font-size: 11px; font-weight: 600;
	padding: 3px 9px; border-radius: 999px; white-space: nowrap; box-shadow: var(--v3-shadow);
}

/* Hide Google's default UI chrome we don't want; keep zoom */
.gm-style-cc, .gmnoprint a, .gm-style a[href^="https://maps.google"] { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
	.v3-sheet, .v3-suggest-item { transition: none; }
	.v3-pulse::after { animation: none; }
	.v3-spin { animation: none; }
}

/* --- filter chips --- */
.v3-chip {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
	white-space: nowrap; border: 1px solid var(--v3-stroke);
	-webkit-backdrop-filter: blur(var(--v3-blur)); backdrop-filter: blur(var(--v3-blur));
	transition: color .15s var(--v3-ease), background .15s var(--v3-ease), border-color .15s var(--v3-ease);
}
.v3-chip.is-on  { background: var(--v3-glass-strong); color: #fff; }
.v3-chip.is-off { background: rgba(20, 26, 33, 0.45); color: rgba(255,255,255,0.42); }
.v3-chip.is-off .v3-dot { filter: grayscale(1); opacity: 0.5; }
.v3-chip:hover { border-color: rgba(255,255,255,0.28); }
/* clear-all button */
.v3-chip-clear { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.v3-chip-clear:hover { color: #fff; background: rgba(255,80,80,0.16); border-color: rgba(255,120,120,0.5); }

/* GPS / center-on-map buttons (ship card + queue rows) */
.v3-gps {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 999px; flex: none;
	color: #04241b; background: var(--v3-accent); border: none; cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 0 10px 1px rgba(0,227,154,0.35);
	transition: transform 0.12s var(--v3-ease), filter 0.12s var(--v3-ease);
}
.v3-gps:hover { filter: brightness(1.12); transform: scale(1.08); }
.v3-gps-sm { width: 26px; height: 26px; }

/* --- loading spinner --- */
.v3-spin {
	width: 13px; height: 13px; border-radius: 999px; display: inline-block;
	border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--v3-accent);
	animation: v3spin 0.7s linear infinite;
}
@keyframes v3spin { to { transform: rotate(360deg); } }

/* --- header: use map2's Bootstrap structure + map.css, but keep the v3 dark theme ---
   The header text is Roboto (like map2); the v3 body stays Inter. These rules load AFTER
   Bootstrap's reboot so the dark app is never repainted white and stray reboot margins
   inside the Vue app are neutralised. */
header, header * { font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; }
html, body { background: var(--v3-bg) !important; overflow: hidden; }
/* keep the Vue app in Inter and free of Bootstrap/map.css reboot margins */
#app, #app h1, #app h2, #app h3, #app h4, #app h5, #app p, #app ul, #app li {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 0;
}
#app ul { padding: 0; list-style: none; }

/* Bootstrap header vs Tailwind-CDN utility clashes (same class names / preflight):
   - Tailwind's `.collapse` utility = visibility:collapse, which hides the navbar menu
   - Tailwind preflight sets svg{display:block}, stacking the inline contact icon + text */
#header .navbar-collapse { visibility: visible !important; }
#header .icon-text { display: inline-flex; align-items: center; gap: 8px; }
#header svg { display: inline-block; vertical-align: middle; }
/* match map2's container widths (Tailwind also defines .container with different maxes) */
@media (min-width: 1200px) { #header .container { max-width: 1140px; } }
@media (min-width: 1400px) { #header .container { max-width: 1320px; } }