/**
 * TrailsIQ Field Lite — chromeless mobile shell.
 *
 * Wraps the dashboard SPA without its sidebar/header chrome:
 *   - Top bar with logo + section title + sign-out.
 *   - Bottom tab bar (3 tabs: Maintenance / Infrastructure / POIs).
 *   - Floating "+ at my location" button at the bottom-right.
 *   - Full-bleed content area in between.
 *
 * The .tiqc-* page contents (map + sliding panel + list + detail)
 * still come from admin-dashboard.css; we only override layout
 * here, never the look of individual rows / pins / panels.
 */

html, body {
	height: 100%;
}

body.tiq-fl-body {
	margin: 0;
	background: #f7f7f6;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

.tiq-fl-app {
	/* dvh, not vh — on iOS Safari with the URL bar showing, 100vh
	   is the LARGEST possible viewport (URL bar hidden), so the
	   app would always be ~80px taller than what's visible and the
	   bottom of every page would sit below the fold. dvh tracks
	   the actual visible viewport. */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
/* Reuses the dashboard sidebar palette (--tiq-side-bg etc.) defined
   in admin-dashboard.css so both surfaces share the emerald-950 chrome
   and amber accent. The dashboard's CSS is enqueued before this file
   so the variables are available here. */
.tiq-fl-topbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: env(safe-area-inset-top, 0) 12px 0;
	height: calc(52px + env(safe-area-inset-top, 0));
	background: var(--tiq-side-bg, #022c22);
	color: var(--tiq-side-text, #d1fae5);
	border-bottom: 1px solid var(--tiq-side-border, rgba(6, 78, 59, 0.6));
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	z-index: 35;
	position: sticky;
	top: 0;
}

.tiq-fl-menu-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 8px;
	color: var(--tiq-side-text, #d1fae5);
}
.tiq-fl-menu-btn:active { background: var(--tiq-side-hover-bg, rgba(6, 78, 59, 0.6)); }
.tiq-fl-menu-btn span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.tiq-fl-menu-btn.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tiq-fl-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.tiq-fl-menu-btn.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.tiq-fl-topbar__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	flex: 1;
	min-width: 0;
}
.tiq-fl-topbar__logo { display: block; flex-shrink: 0; }
.tiq-fl-topbar__title {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Slide-in drawer (hamburger menu, slides in from the right) ────── */
.tiq-fl-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(280px, 80vw);
	background: var(--tiq-side-bg, #022c22);
	color: var(--tiq-side-text, #d1fae5);
	display: flex;
	flex-direction: column;
	z-index: 60;
	transform: translateX(100%);
	transition: transform 0.22s ease;
	-webkit-overflow-scrolling: touch;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
}
.tiq-fl-drawer[hidden] { display: flex; visibility: hidden; }
.tiq-fl-drawer.is-open { transform: translateX(0); visibility: visible; }
.tiq-fl-drawer:not(.is-open) { visibility: hidden; }
.tiq-fl-drawer.is-open { visibility: visible; }

.tiq-fl-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 55;
	opacity: 0;
	transition: opacity 0.22s ease;
}
.tiq-fl-drawer-overlay[hidden] { display: none; }
.tiq-fl-drawer-overlay.is-open { opacity: 1; }

.tiq-fl-drawer__head {
	flex: 0 0 auto;
	padding: env(safe-area-inset-top, 0) 18px 16px;
	border-bottom: 1px solid var(--tiq-side-border, rgba(6, 78, 59, 0.6));
}
.tiq-fl-drawer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	padding: 18px 0 0;
}
.tiq-fl-drawer__logo {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
}
.tiq-fl-drawer__brand-text {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: #fff;
}
.tiq-fl-drawer__brand-text em {
	color: var(--tiq-orange, #dd9b36);
	font-style: normal;
}

.tiq-fl-drawer__nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px;
	gap: 2px;
	overflow-y: auto;
}
.tiq-fl-drawer__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tiq-side-text, #d1fae5);
	text-decoration: none;
	transition: background 0.12s, color 0.12s;
}
.tiq-fl-drawer__link svg {
	opacity: 0.75;
	flex-shrink: 0;
}
.tiq-fl-drawer__link:hover {
	background: var(--tiq-side-hover-bg, rgba(6, 78, 59, 0.6));
	color: #fff;
}
.tiq-fl-drawer__link.is-active {
	background: var(--tiq-side-active-bg, #064e3b);
	color: var(--tiq-side-active-fg, #ebc486);
	font-weight: 600;
}
.tiq-fl-drawer__link.is-active svg { opacity: 1; }

.tiq-fl-drawer__foot {
	flex: 0 0 auto;
	padding: 14px 18px env(safe-area-inset-bottom, 14px);
	border-top: 1px solid var(--tiq-side-border, rgba(6, 78, 59, 0.6));
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tiq-fl-drawer__user {
	font-size: 12px;
	font-weight: 600;
	color: var(--tiq-side-text-soft, #a7f3d0);
}
.tiq-fl-drawer__logout {
	font-size: 13px;
	color: var(--tiq-side-text-mute, rgba(209, 250, 229, 0.5));
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.12s;
}
.tiq-fl-drawer__logout:hover { color: #fff; }

/* ── Main content area ───────────────────────────────────────────────── */
.tiq-fl-main {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
}
.tiq-fl-main #tiqc-page-content {
	flex: 1;
	min-height: 0;
}

/* The dashboard SPA's existing wraps and panels — let them fill
   the available height without imposing a desktop-style max width.
   Use dvh so iOS Safari's collapsing address bar doesn't push the
   bottom of the page off-screen. */
.tiq-fl-main .tiqc-maint-wrap {
	min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0));
}
.tiq-fl-main .tiqc-maint-map {
	height: 42vh;
	min-height: 220px;
}

/* Override the dashboard CSS rule (admin-dashboard.css line 3270)
   that locks .tiqc-main to height:100dvh when a maint-wrap is
   present. In the field-lite shell our 52px topbar sits above
   .tiqc-main, so 100dvh on .tiqc-main pushes the bottom of the
   page (last list item, slide-up detail panel) off the viewport.
   Subtract the topbar so the wrap fits inside what's visible. */
.tiq-fl-body .tiqc-main:has(.tiqc-maint-wrap) {
	height: calc(100dvh - 52px - env(safe-area-inset-top, 0));
}

/* Bottom padding on the list scroll container so the last row
   can scroll above the floating + button (which sits 20px from
   the viewport bottom and is 60px tall, so 100px of pad keeps
   the last name fully visible). Also primes scroll-padding-bottom
   so any programmatic scrollIntoView() respects the same offset. */
.tiq-fl-body .tiq-fa-list {
	padding-bottom: calc(100px + env(safe-area-inset-bottom, 0));
	scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0));
}

/* ── Floating action button ─────────────────────────────────────────── */
.tiq-fl-fab {
	position: fixed;
	right: 16px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0));
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 999px;
	background: #dd9b36;
	color: #1b2e1a;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 40;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.tiq-fl-fab[hidden] { display: none; }
.tiq-fl-fab:active   { transform: scale(0.95); }

/* ── Hide any dashboard chrome that bleeds through ──────────────────── */
.tiq-fl-body .tiqc-sidebar,
.tiq-fl-body .tiqc-mobile-header,
.tiq-fl-body .tiqc-sidebar-overlay {
	display: none !important;
}

/* The dashboard's grid layout assumes a sidebar; without one the
   main pane needs full width and zero left padding. */
.tiq-fl-body .tiqc-app {
	display: block;
}
.tiq-fl-body .tiqc-main {
	margin-left: 0;
	padding: 0;
}

/* Add-form pages use the dashboard's standard tiqc-edit-grid which
   was sized for desktop two-column. Collapse to a single column so
   the form is comfortable on a phone. */
.tiq-fl-main .tiqc-edit-grid {
	display: block;
	padding: 12px;
}
.tiq-fl-main .tiqc-panel {
	border-radius: 10px;
}
.tiq-fl-main .tiqc-form-footer {
	padding: 12px 16px env(safe-area-inset-bottom, 12px);
	position: sticky;
	bottom: 0;
	background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
}

/* ─────────────────────────────────────────────────────────────────────
   Add wizard (3-step: type → location → details + photos)
   Used by Pages.maintenanceAdd / structureAdd / poiAdd in dashboard.js.
   ───────────────────────────────────────────────────────────────────── */

/* Single scroll container — the parent #tiqc-page-content already
   handles overflow-y, and on mobile a nested overflow:auto inside
   another overflow:auto traps the touch-drag (the inner scroll
   "wins" then has no remaining content to scroll once the map
   takes the visible area, so the page can't reach the action row
   or footer). Header and footer below are sticky on the outer
   scroll instead. */
.tiqc-fl-wiz {
	display: block;
	background: #fff;
}

.tiqc-fl-wiz__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #e5e7eb;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 5;
}
.tiqc-fl-wiz__back  { flex-shrink: 0; }
.tiqc-fl-wiz__title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; color: #1b2e1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiqc-fl-wiz__steps { display: flex; gap: 6px; flex-shrink: 0; }
.tiqc-fl-wiz__dot {
	width: 8px; height: 8px; border-radius: 999px;
	background: #d1d5db;
	transition: background 0.15s ease, transform 0.15s ease;
}
.tiqc-fl-wiz__dot.is-active { background: #dd9b36; transform: scale(1.25); }
.tiqc-fl-wiz__dot.is-done   { background: #1b2e1a; }

.tiqc-fl-wiz__body { padding: 12px; }

.tiqc-fl-wiz__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px env(safe-area-inset-bottom, 12px);
	border-top: 1px solid #e5e7eb;
	background: #fff;
	position: sticky;
	bottom: 0;
	z-index: 5;
}
.tiqc-fl-wiz__foot .tiqc-form-msg { flex: 1; margin: 0; font-size: 13px; }
.tiqc-fl-wiz__foot .tiqc-btn--primary { min-width: 96px; }

/* ── Step 1 — type grid ───────────────────────────────────────────── */
.tiqc-fl-wiz__step1 { padding: 0; }
.tiqc-fl-wiz__cat {
	margin: 14px 4px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7280;
}
.tiqc-fl-wiz__cat:first-child { margin-top: 4px; }
.tiqc-fl-wiz__type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.tiqc-fl-wiz__type-tile {
	background: #f9fafb;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.tiqc-fl-wiz__type-tile:active   { transform: scale(0.97); }
.tiqc-fl-wiz__type-tile:hover    { border-color: #d1d5db; background: #fff; }
.tiqc-fl-wiz__type-tile.is-picked { border-color: #dd9b36; background: #fff7e8; }
.tiqc-fl-wiz__type-icon {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	color: #1b2e1a;
}
.tiqc-fl-wiz__type-icon svg { width: 100%; height: 100%; }
.tiqc-fl-wiz__type-name {
	font-size: 12px;
	font-weight: 500;
	color: #1b2e1a;
	text-align: center;
	line-height: 1.3;
}

/* ── Step 2 — location ────────────────────────────────────────────── */
.tiqc-fl-wiz__step2 { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.tiqc-fl-wiz__map {
	width: 100%;
	height: 56vh;
	min-height: 280px;
	border-radius: 10px;
	overflow: hidden;
	background: #e5e7eb;
	position: relative;
}
.tiqc-fl-wiz__loc-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tiqc-fl-wiz__loc-actions .tiqc-btn {
	flex: 1;
	min-width: 140px;
	justify-content: center;
}
.tiqc-fl-wiz__loc-hint {
	margin: 0;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}
.tiqc-fl-wiz__loc-coords {
	font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: #1b2e1a;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 8px 10px;
	min-height: 18px;
}
.tiqc-fl-wiz__loc-trail {
	display: inline-block;
	margin-left: 4px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--tiq-orange, #dd9b36);
}

/* ── Step 3 — details + photos ───────────────────────────────────── */
.tiqc-fl-wiz__photos {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #e5e7eb;
}
.tiqc-fl-wiz__photo-rows {
	list-style: none;
	margin: 8px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tiqc-fl-wiz__photo-rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	font-size: 13px;
}
.tiqc-fl-wiz__photo-rows li span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tiqc-fl-wiz__photo-rm { padding: 2px 8px; font-size: 12px; }