/* ============================================================
   TrailsIQ Cloud — Dashboard SPA
   Sidebar-left layout. Dark green sidebar, light content area.
   Design tokens match the core TrailsIQ admin.
   ============================================================ */

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
	--tiq-green:        #1b2e1a;
	--tiq-green-mid:    #243823;
	--tiq-green-soft:   #2f4a2e;
	--tiq-orange:       #dd9b36;
	--tiq-orange-dark:  #b87c20;
	--tiq-orange-soft:  rgba(221,155,54,.12);
	--tiq-bg:           #f4f6f8;
	--tiq-surface:      #ffffff;
	--tiq-border:       #e5e9f0;
	--tiq-border-soft:  rgba(0,0,0,.06);
	--tiq-text:         #1c1917;
	--tiq-text-2:       #44403c;
	--tiq-text-3:       #78716c;
	--tiq-radius:       12px;
	--sidebar-width:    230px;

	/* Sidebar palette — kept in lockstep with the Laravel core
	   AuthenticatedLayout (Tailwind emerald + primary scales).
	   Updating one side without the other makes the dashboard
	   feel like two different apps glued together. */
	--tiq-side-bg:        #022c22; /* emerald-950 */
	--tiq-side-active-bg: #064e3b; /* emerald-900 */
	--tiq-side-hover-bg:  rgba(6, 78, 59, 0.6); /* emerald-900/60 */
	--tiq-side-text:      #d1fae5; /* emerald-100 */
	--tiq-side-text-soft: #a7f3d0; /* emerald-200 */
	--tiq-side-text-mute: rgba(209, 250, 229, 0.5); /* emerald-100/50 */
	--tiq-side-active-fg: #ebc486; /* primary-300 */
	--tiq-side-border:    rgba(6, 78, 59, 0.6); /* emerald-900/60 */
}

.tiqc-dashboard-body {
	margin: 0;
	padding: 0;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	color: var(--tiq-text);
	background: var(--tiq-bg);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

/* ── App shell ────────────────────────────────────────────── */
.tiqc-app {
	display: flex;
	min-height: 100dvh;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.tiqc-sidebar {
	width: var(--sidebar-width);
	flex-shrink: 0;
	background: var(--tiq-side-bg);
	color: var(--tiq-side-text);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 100;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Brand */
.tiqc-sidebar__brand {
	padding: 20px 18px 16px;
	border-bottom: 1px solid var(--tiq-side-border);
	flex-shrink: 0;
}

.tiqc-sidebar__logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.tiqc-sidebar__logo-icon {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
}

.tiqc-sidebar__logo-img {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	object-fit: cover;
}

.tiqc-sidebar__logo-text {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.2px;
}

.tiqc-sidebar__logo-text em {
	color: var(--tiq-orange);
	font-style: normal;
}

/* Org name / switcher */
.tiqc-org-switcher {
	padding: 10px 14px;
	border-bottom: 1px solid var(--tiq-side-border);
	flex-shrink: 0;
}

.tiqc-org-switcher select {
	width: 100%;
	background: rgba(6, 78, 59, 0.4); /* emerald-900/40 — matches Laravel org card */
	border: 1px solid rgba(6, 95, 70, 0.6); /* emerald-800/60 */
	border-radius: 7px;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 10px;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.tiqc-org-switcher select option {
	background: var(--tiq-side-bg);
	color: #fff;
}

.tiqc-sidebar__org-name {
	padding: 10px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tiq-side-text-soft);
	border-bottom: 1px solid var(--tiq-side-border);
}

/* Nav */
.tiqc-nav {
	list-style: none;
	margin: 0;
	padding: 10px 10px;
	flex: 1;
}

.tiqc-nav__section-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tiq-side-text-mute);
	padding: 14px 10px 4px;
}

.tiqc-nav__separator {
	height: 1px;
	background: var(--tiq-side-border);
	margin: 8px 6px;
}

.tiqc-nav__item {
	margin-bottom: 2px;
}

.tiqc-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--tiq-side-text);
	font-size: 13px;
	font-weight: 500;
	transition: background 0.12s, color 0.12s;
	cursor: pointer;
}

.tiqc-nav__link:hover {
	background: var(--tiq-side-hover-bg);
	color: #fff;
}

.tiqc-nav__link.is-active {
	background: var(--tiq-side-active-bg);
	color: var(--tiq-side-active-fg);
	font-weight: 600;
}

.tiqc-nav__icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0.75;
}

.tiqc-nav__link.is-active .tiqc-nav__icon {
	opacity: 1;
}

.tiqc-nav__icon svg {
	width: 16px;
	height: 16px;
}

/* Lifts nav glyph — the source SVG isn't a single-path stroked icon
   like the others, so we drive it as a CSS mask on a coloured span.
   Inherits currentColor the same way an inline <svg stroke="currentColor">
   would, so the active/inactive colour transitions match every other
   sidebar icon. */
.tiqc-nav__lift-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--tiqc-lift-icon-url, none) center / contain no-repeat;
	        mask: var(--tiqc-lift-icon-url, none) center / contain no-repeat;
}

.tiqc-nav__badge {
	margin-left: auto;
	background: #dc2626;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	min-width: 18px;
	text-align: center;
}

/* Nav link + chevron wrapper for items with submenus */
.tiqc-nav__link-row {
	display: flex;
	align-items: center;
}

.tiqc-nav__link-row > .tiqc-nav__link {
	flex: 1;
	min-width: 0;
}

.tiqc-nav__chevron-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--tiq-side-text);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.12s, color 0.12s;
}

.tiqc-nav__chevron-btn:hover {
	background: var(--tiq-side-hover-bg);
}

.tiqc-nav__chevron-btn:active {
	background: var(--tiq-side-active-bg);
}

/* Chevron arrow on parent nav links with submenus */
.tiqc-nav__chevron {
	width: 14px;
	height: 14px;
	opacity: 0.45;
	flex-shrink: 0;
	transition: transform 0.2s ease, opacity 0.15s;
}

/* Rotate chevron when submenu is visible */
.tiqc-nav__item--has-sub.is-sub-open .tiqc-nav__chevron {
	transform: rotate(180deg);
	opacity: 0.75;
}

.tiqc-nav__item--has-sub:has(.tiqc-nav__link.is-active) .tiqc-nav__chevron {
	opacity: 0.85;
}

/* Nested submenu (e.g. Infrastructure > Settings) */
.tiqc-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease, margin 0.2s ease;
}

/* Show submenu: on click toggle or when parent/sub is active */
.tiqc-nav__item--has-sub.is-sub-open > .tiqc-nav__sub,
.tiqc-nav__item--has-sub:has(.tiqc-nav__link.is-active) > .tiqc-nav__sub,
.tiqc-nav__item--has-sub:has(.tiqc-nav__sublink.is-active) > .tiqc-nav__sub {
	max-height: 120px;
	margin: 2px 0 4px;
}

.tiqc-nav__sub-item {
	margin: 1px 0;
	position: relative;
	padding-left: 16px;
}

/* L-shape connector line */
.tiqc-nav__sub-item::before {
	content: '';
	position: absolute;
	left: 2px;
	top: -3px;
	bottom: 50%;
	width: 12px;
	border-left:   1px solid var(--tiq-side-border);
	border-bottom: 1px solid var(--tiq-side-border);
	border-bottom-left-radius: 6px;
	pointer-events: none;
	transition: border-color 0.15s ease;
}

/* Active sub-link → tint the L connector */
.tiqc-nav__sub-item:has(.tiqc-nav__sublink.is-active)::before {
	border-left-color:   var(--tiq-side-active-fg);
	border-bottom-color: var(--tiq-side-active-fg);
}

.tiqc-nav__sublink {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--tiq-side-text-soft);
	font-size: 12.5px;
	font-weight: 500;
	transition: background 0.12s, color 0.12s;
}

.tiqc-nav__sublink:hover {
	background: var(--tiq-side-hover-bg);
	color: #fff;
}

.tiqc-nav__sublink.is-active {
	color: var(--tiq-side-active-fg);
	font-weight: 600;
}

.tiqc-nav__item--super .tiqc-nav__link {
	color: rgba(235, 196, 134, 0.7); /* primary-300 @ 70% — softens the platform-admin row without losing the gold tint */
}

.tiqc-nav__item--super .tiqc-nav__link:hover,
.tiqc-nav__item--super .tiqc-nav__link.is-active {
	color: var(--tiq-side-active-fg);
	background: var(--tiq-side-active-bg);
}

/* Sidebar footer */
.tiqc-sidebar__footer {
	padding: 12px 14px;
	border-top: 1px solid var(--tiq-side-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-shrink: 0;
}

.tiqc-sidebar__user {
	font-size: 12px;
	font-weight: 600;
	color: var(--tiq-side-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.tiqc-sidebar__logout {
	font-size: 11px;
	color: var(--tiq-side-text-mute);
	text-decoration: none;
	flex-shrink: 0;
	white-space: nowrap;
	transition: color 0.12s;
}

.tiqc-sidebar__logout:hover {
	color: rgba(255,255,255,.7);
}

/* ── Main content ─────────────────────────────────────────── */
.tiqc-main {
	flex: 1;
	margin-left: var(--sidebar-width);
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* Notices (full-width, above content) */
.tiqc-notice {
	padding: 12px 24px;
	font-size: 13px;
	font-weight: 500;
	border-bottom: 1px solid transparent;
}

.tiqc-notice--success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.tiqc-notice--error   { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.tiqc-notice--info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

.tiqc-page-content {
	flex: 1;
	padding: 28px 28px 48px;
}

/* ── Page header ──────────────────────────────────────────── */
.tiqc-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.tiqc-page-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--tiq-text);
	letter-spacing: -0.4px;
	margin: 0;
	line-height: 1.2;
}
.tiqc-page-title--trail {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tiqc-page-title__prefix {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tiqc-text-3, #9ca3af);
}
.tiqc-diff-icon {
	display: block;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.tiqc-page-sub {
	font-size: 13px;
	color: var(--tiq-text-3);
	margin-top: 3px;
}

.tiqc-page-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

/* ── Loading spinner ──────────────────────────────────────── */
.tiqc-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: var(--tiq-text-3);
	gap: 10px;
	font-size: 13px;
}

.tiqc-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--tiq-border);
	border-top-color: var(--tiq-orange);
	border-radius: 50%;
	animation: tiqc-spin 0.65s linear infinite;
	flex-shrink: 0;
}

@keyframes tiqc-spin { to { transform: rotate(360deg); } }

/* ── Buttons ──────────────────────────────────────────────── */
.tiqc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: 1.5px solid var(--tiq-border);
	background: var(--tiq-surface);
	color: var(--tiq-text);
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	white-space: nowrap;
	line-height: 1;
}

.tiqc-btn:hover {
	background: var(--tiq-bg);
	border-color: #ccc;
}

.tiqc-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.tiqc-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.tiqc-btn--primary {
	background: var(--tiq-orange);
	border-color: var(--tiq-orange);
	color: #fff;
}

.tiqc-btn--primary:hover {
	background: var(--tiq-orange-dark);
	border-color: var(--tiq-orange-dark);
	color: #fff;
}

.tiqc-btn--danger {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #dc2626;
}

.tiqc-btn--danger:hover {
	background: #fee2e2;
	color: #b91c1c;
}

.tiqc-btn--sm {
	padding: 5px 12px;
	font-size: 12px;
	border-radius: 7px;
}

/* ── Metric cards ─────────────────────────────────────────── */
.tiqc-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

@media (max-width: 900px) {
	.tiqc-metrics { grid-template-columns: repeat(2, 1fr); }
}

.tiqc-metric {
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: var(--tiq-radius);
	padding: 18px 20px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tiqc-metric__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tiqc-metric__icon svg { width: 20px; height: 20px; }

.tiqc-metric__icon--green  { background: #f0fdf4; color: #16a34a; }
.tiqc-metric__icon--blue   { background: #eff6ff; color: #2563eb; }
.tiqc-metric__icon--orange { background: #fff7ed; color: #ea580c; }
.tiqc-metric__icon--purple { background: #f5f3ff; color: #7c3aed; }
.tiqc-metric__icon--red    { background: #fef2f2; color: #dc2626; }

.tiqc-metric--link {
	text-decoration: none;
	color: inherit;
	transition: transform .15s, box-shadow .15s;
	cursor: pointer;
}
.tiqc-metric--link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* ── Pending Reviews page ──────────────────────────────────── */
.tiqc-pr-card {
	padding: 18px 20px;
	border-bottom: 1px solid var(--tiq-border);
	cursor: pointer;
	transition: background 0.15s;
}
.tiqc-pr-card:last-child { border-bottom: 0; }
.tiqc-pr-card:hover { background: rgba(0,0,0,.02); }
.tiqc-pr-card--focus {
	background: #fef3c7 !important;
}
.tiqc-pr-marker:hover { transform: scale(1.1); transition: transform 0.15s; }
.tiqc-pr-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}
.tiqc-pr-card__trail {
	font-size: 15px;
	font-weight: 700;
	color: var(--tiq-text);
}
.tiqc-pr-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.tiqc-pr-card__time {
	font-size: 12px;
	color: var(--tiq-text-3);
}
.tiqc-pr-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--tiq-text);
	margin-bottom: 4px;
}
.tiqc-pr-card__desc {
	font-size: 13px;
	color: var(--tiq-text-2, #4b5563);
	margin-bottom: 6px;
	line-height: 1.45;
}
.tiqc-pr-card__reporter {
	font-size: 12px;
	color: var(--tiq-text-3);
	margin-bottom: 8px;
}
.tiqc-pr-photos {
	display: flex;
	gap: 6px;
	margin: 8px 0 12px;
	flex-wrap: wrap;
}
.tiqc-pr-photo {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid var(--tiq-border);
}
.tiqc-pr-card__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 8px;
}
.tiqc-btn--danger {
	background: #fff;
	color: #dc2626;
	border: 1px solid #fca5a5;
}
.tiqc-btn--danger:hover { background: #fef2f2; }

.tiqc-metric__body { flex: 1; min-width: 0; }

.tiqc-metric__num {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--tiq-text);
	margin-bottom: 4px;
}

.tiqc-metric__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tiq-text-3);
}

/* ── Panel (card) ─────────────────────────────────────────── */
.tiqc-panel {
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: var(--tiq-radius);
	overflow: hidden;
	margin-bottom: 20px;
}

.tiqc-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px 13px;
	border-bottom: 1px solid var(--tiq-border-soft);
	background: #fafbfd;
}

.tiqc-panel__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--tiq-text);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.tiqc-panel__title svg {
	width: 15px;
	height: 15px;
	color: var(--tiq-text-3);
}

.tiqc-panel__link {
	font-size: 12px;
	color: var(--tiq-orange);
	text-decoration: none;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 3px;
}

.tiqc-panel__link:hover { text-decoration: underline; }

.tiqc-panel__body {
	padding: 0;
}

.tiqc-panel__footer {
	padding: 12px 20px;
	border-top: 1px solid var(--tiq-border-soft);
	background: #fafbfd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* ── Two-column layout ────────────────────────────────────── */
.tiqc-cols {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 1024px) {
	.tiqc-cols { grid-template-columns: 1fr; }
}

/* ── Table ────────────────────────────────────────────────── */
.tiqc-table {
	width: 100%;
	border-collapse: collapse;
}

.tiqc-table th {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tiq-text-3);
	padding: 10px 20px;
	text-align: left;
	background: #fafbfd;
	border-bottom: 1px solid var(--tiq-border);
}

.tiqc-table td {
	padding: 12px 20px;
	border-bottom: 1px solid var(--tiq-border-soft);
	font-size: 13px;
	vertical-align: middle;
}

.tiqc-table tbody tr:last-child td { border-bottom: none; }
.tiqc-table tbody tr:hover td { background: #fafbfd; }

.tiqc-table__name {
	font-weight: 600;
	color: var(--tiq-text);
	text-decoration: none;
}

.tiqc-table__name:hover { color: var(--tiq-orange); }

.tiqc-table__sub {
	font-size: 11px;
	color: var(--tiq-text-3);
	margin-top: 2px;
}

.tiqc-table__muted { color: var(--tiq-text-3); }

/* Responsive table columns — on mobile show Trail + Condition, hide the rest */
@media (max-width: 640px) {
	.tiqc-col-status,
	.tiqc-col-length,
	.tiqc-col-network,
	.tiqc-col-diff { display: none; }
}

@media (min-width: 641px) and (max-width: 860px) {
	.tiqc-col-status,
	.tiqc-col-network { display: none; }
}

/* ── Empty state ──────────────────────────────────────────── */
.tiqc-empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--tiq-text-3);
	font-size: 13px;
}

.tiqc-empty svg {
	width: 36px;
	height: 36px;
	display: block;
	margin: 0 auto 10px;
	opacity: 0.3;
}

/* ── Badges ───────────────────────────────────────────────── */
.tiqc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 3px 9px;
	border-radius: 99px;
	white-space: nowrap;
}

/* Status */
.tiqc-badge--open         { background: #f0fdf4; color: #16a34a; }
.tiqc-badge--closed       { background: #fef2f2; color: #dc2626; }
.tiqc-badge--caution      { background: #fffbeb; color: #d97706; }
.tiqc-badge--pending      { background: #f5f3ff; color: #7c3aed; }
.tiqc-badge--planned      { background: #f5f3ff; color: #7c3aed; }
.tiqc-badge--hidden       { background: #f3f4f6; color: #6b7280; }
.tiqc-badge--construction { background: #fff7ed; color: #c2410c; }

/* Difficulty */
.tiqc-badge--easy     { background: #f0fdf4; color: #16a34a; }
.tiqc-badge--moderate { background: #eff6ff; color: #2563eb; }
.tiqc-badge--hard     { background: #1f2937; color: #fff; }
.tiqc-badge--expert   { background: #fff4ed; color: #c2410c; }

/* Priority (short form for overview cards) */
.tiqc-badge--critical { background: #fee2e2; color: #dc2626; }
.tiqc-badge--high     { background: #ffedd5; color: #ea580c; }
.tiqc-badge--medium   { background: #fef9c3; color: #ca8a04; }
.tiqc-badge--low      { background: #f3f4f6; color: #6b7280; }
/* Priority (full form used in maintenance rows: priority--critical etc.) */
.tiqc-badge--priority--critical { background: #fee2e2; color: #dc2626; }
.tiqc-badge--priority--high     { background: #ffedd5; color: #ea580c; }
.tiqc-badge--priority--medium   { background: #fef9c3; color: #ca8a04; }
.tiqc-badge--priority--low      { background: #f3f4f6; color: #6b7280; }

/* Trail condition dot */
.tiqc-cond-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	flex-shrink: 0;
}

.tiqc-cond-dot--open    { background: #16a34a; }
.tiqc-cond-dot--caution { background: #d97706; }
.tiqc-cond-dot--closed  { background: #dc2626; }

/* ── Form elements (settings / members) ───────────────────── */
.tiqc-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.tiqc-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tiqc-field-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tiq-text);
}

.tiqc-field-desc {
	font-size: 12px;
	color: var(--tiq-text-3);
}

.tiqc-input {
	font-size: 13px;
	font-family: inherit;
	color: var(--tiq-text);
	background: var(--tiq-surface);
	border: 1.5px solid var(--tiq-border);
	border-radius: 8px;
	padding: 9px 12px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
	box-sizing: border-box;
}

.tiqc-input:focus {
	border-color: var(--tiq-orange);
	box-shadow: 0 0 0 3px var(--tiq-orange-soft);
}

.tiqc-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.tiqc-form-footer {
	padding: 16px 20px;
	border-top: 1px solid var(--tiq-border-soft);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* ── Network / weather cards ──────────────────────────────── */
.tiqc-net-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	padding: 20px;
}

.tiqc-net-card {
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: var(--tiq-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tiqc-net-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.tiqc-net-card__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--tiq-text);
}

.tiqc-net-hidden-note {
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #9ca3af;
	background: #f3f4f6;
	border-radius: 3px;
	padding: 1px 5px;
	vertical-align: middle;
	margin-left: 4px;
}

.tiqc-net-card__meta {
	font-size: 11px;
	color: var(--tiq-text-3);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.tiqc-net-card__stat {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ── Issue row (maintenance) ──────────────────────────────── */
.tiqc-issue-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--tiq-border-soft);
	text-decoration: none;
	color: inherit;
	transition: background 0.1s;
}

.tiqc-issue-row:last-child { border-bottom: none; }
.tiqc-issue-row:hover { background: #fafbfd; }
.tiqc-issue-row--link { cursor: pointer; }
.tiqc-issue-row--link:hover { background: var(--tiq-orange-soft); }
.tiqc-issue-row--link:focus-visible { outline: 2px solid var(--tiq-orange); outline-offset: -2px; }

.tiqc-issue-row__icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--tiq-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tiqc-issue-row__icon svg { width: 16px; height: 16px; color: var(--tiq-text-3); }

.tiqc-issue-row__body { flex: 1; min-width: 0; }

.tiqc-issue-row__top {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 2px;
	flex-wrap: wrap;
}

.tiqc-issue-row__trail {
	font-size: 13px;
	font-weight: 600;
	color: var(--tiq-text);
}

.tiqc-issue-row__desc {
	font-size: 12px;
	color: var(--tiq-text-3);
	margin-top: 2px;
	word-break: break-word;
}

.tiqc-issue-row__meta {
	font-size: 11px;
	color: var(--tiq-text-3);
	margin-top: 3px;
}

.tiqc-issue-row__time {
	font-size: 11px;
	color: var(--tiq-text-3);
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 3px;
}

/* ── Member rows ──────────────────────────────────────────── */
.tiqc-member-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--tiq-border-soft);
}

.tiqc-member-row:last-child { border-bottom: none; }

.tiqc-member-row__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tiq-bg);
	border: 1px solid var(--tiq-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--tiq-text-3);
	flex-shrink: 0;
	text-transform: uppercase;
}

.tiqc-member-row__body { flex: 1; min-width: 0; }

.tiqc-member-row__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--tiq-text);
}

.tiqc-member-row__email {
	font-size: 11px;
	color: var(--tiq-text-3);
}

/* Role badge */
.tiqc-role {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 99px;
}

.tiqc-role--owner        { background: #fef9c3; color: #713f12; }
.tiqc-role--manager      { background: #eff6ff; color: #1d4ed8; }
.tiqc-role--field_worker { background: #f3f4f6; color: #374151; }

/* ── Invite form ──────────────────────────────────────────── */
.tiqc-invite-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.tiqc-invite-row .tiqc-field {
	flex: 1;
	min-width: 180px;
}

.tiqc-invite-row select {
	width: 140px;
}

/* ── Filter bar ───────────────────────────────────────────── */
.tiqc-filter-bar {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--tiq-border-soft);
}

/* Horizontal row for search + network dropdown on the Trails page. */
.tiqc-trail-filters-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
/* Inside this row, each control grows to fill available space rather than
   stretching to 100% individually (which would force them onto separate rows). */
.tiqc-trail-filters-row > .tiqc-input {
	flex: 1 1 160px;
	min-width: 140px;
}

.tiqc-filter-bar .tiqc-input {
	width: 200px;
}

/* First row: scrollable filters + pinned toggle button */
.tiqc-filter-bar__top {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tiqc-filter-bar__row {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tiqc-filter-bar__row::-webkit-scrollbar { display: none; }

.tiqc-filter-bar > .tiqc-filter-toggle,
.tiqc-filter-bar__top > .tiqc-filter-toggle {
	flex-shrink: 0;
}

.tiqc-filter-tabs {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

/* ── Filter toggle button ────────────────────────────────── */
.tiqc-filter-toggle {
	flex-shrink: 0;
	position: relative;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	color: #6b7280;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tiqc-filter-toggle.active {
	background: var(--tiq-green);
	border-color: var(--tiq-green);
	color: #fff;
}

/* Badge dot on toggle when filters are active */
.tiqc-filter-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 8px;
	height: 8px;
	background: var(--tiq-orange);
	border: 1.5px solid #fff;
	border-radius: 50%;
}

/* ── Filter drawer ───────────────────────────────────────── */
/* Mobile: hidden by default, shown below tabs when toggle pressed */
.tiqc-filter-drawer {
	display: none;
	gap: 6px;
	width: 100%;
	padding: 0 0 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.tiqc-filter-drawer::-webkit-scrollbar { display: none; }
.tiqc-filter-drawer.open { display: flex; }

/* Desktop: always show inline, hide toggle button */
@media (min-width: 769px) {
	.tiqc-filter-toggle { display: none; }
	.tiqc-filter-drawer {
		display: flex;
		width: auto;
		padding: 0;
		flex-shrink: 0;
	}
}

.tiqc-overdue-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	white-space: nowrap;
	cursor: pointer;
}
.tiqc-overdue-toggle input:checked + span,
.tiqc-overdue-toggle:has(input:checked) {
	color: #dc2626;
	font-weight: 600;
}

/* ── Filter select ───────────────────────────────────────── */
.tiqc-filter-select {
	flex-shrink: 0;
	padding: 5px 26px 5px 10px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	color: #6b7280;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
}
.tiqc-filter-select.active {
	border-color: var(--tiq-green);
	color: var(--tiq-green);
	font-weight: 700;
}
.tiqc-filter-select:focus {
	border-color: var(--tiq-green);
	outline: none;
}

#tiqc-struct-filter-trail {
	max-width: 160px;
}

.tiqc-filter-search {
	flex: 1;
	min-width: 120px;
	padding: 5px 10px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	color: #374151;
	outline: none;
}
.tiqc-filter-search:focus {
	border-color: var(--tiq-green);
}
.tiqc-filter-search::placeholder {
	color: #9ca3af;
}

.tiqc-filter-tab {
	padding: 5px 12px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	border: 1.5px solid transparent;
	cursor: pointer;
	background: transparent;
	color: var(--tiq-text-3);
	font-family: inherit;
	transition: all 0.12s;
}

.tiqc-filter-tab:hover {
	background: var(--tiq-bg);
	color: var(--tiq-text);
}

.tiqc-filter-tab.is-active {
	background: var(--tiq-orange-soft);
	color: var(--tiq-orange);
	border-color: rgba(221,155,54,.25);
}

/* ── Weather condition card ───────────────────────────────── */
.tiqc-weather-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	max-width: 1280px;
}

.tiqc-weather-card {
	border-radius: var(--tiq-radius);
	border: 1px solid;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.tiqc-weather-card--open    { background: #f0fdf4; border-color: #bbf7d0; }
.tiqc-weather-card--caution { background: #fffbeb; border-color: #fde68a; }
.tiqc-weather-card--closed  { background: #fef2f2; border-color: #fecaca; }
.tiqc-weather-card--unknown { background: var(--tiq-bg); border-color: var(--tiq-border); }

/* Two-column body inside each card: control side (left) / data side (right).
   Stacks to a single column below 900px for readable widths on tablet. */
.tiqc-wx-body {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 0;
}
.tiqc-wx-body__main {
	border-right: 1px solid rgba(0,0,0,.06);
	min-width: 0;
}
.tiqc-wx-body__side {
	min-width: 0;
	background: rgba(255,255,255,.4);
}
@media (max-width: 900px) {
	.tiqc-wx-body {
		grid-template-columns: 1fr;
	}
	.tiqc-wx-body__main {
		border-right: none;
		border-bottom: 1px solid rgba(0,0,0,.06);
	}
}

/* Live filter bar above the card list */
.tiqc-wx-filter-bar {
	padding: 0 20px 12px;
	max-width: 1280px;
}
.tiqc-wx-filter-input {
	width: 100%;
	max-width: 420px;
	padding: 8px 14px;
	border: 1px solid var(--tiq-border);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}
.tiqc-wx-filter-input:focus {
	outline: none;
	border-color: var(--tiq-orange, #e45419);
	box-shadow: 0 0 0 3px rgba(228,84,25,.15);
}

/* ── Card header ── */
.tiqc-wx-head {
	padding: 14px 16px 10px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}
.tiqc-wx-head__name {
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 7px;
}
.tiqc-wx-head__meta {
	font-size: 11px;
	color: var(--tiq-text-3);
	white-space: nowrap;
	padding-top: 2px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.tiqc-wx-manual-badge {
	font-size: 10px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 99px;
	background: #e0e7ff;
	color: #3730a3;
	letter-spacing: .02em;
}

/* ── Warning / opportunity banner ── */
.tiqc-wx-banner {
	margin: 0 12px 4px;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}
.tiqc-wx-banner--warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.tiqc-wx-banner--good { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

/* ── Forecast prediction strip ── */
.tiqc-wx-prediction {
	margin: 0 12px 6px;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,.5);
}
.tiqc-wx-prediction__icon {
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Sections ── */
.tiqc-wx-section {
	padding: 8px 16px;
	border-top: 1px solid rgba(0,0,0,.06);
}
.tiqc-wx-section__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tiq-text-3);
	margin-bottom: 6px;
}

/* ── Soil moisture bar ── */
.tiqc-wx-moisture {
	display: flex;
	align-items: center;
	gap: 10px;
}
.tiqc-wx-moisture__bar {
	flex: 1;
	height: 8px;
	background: #e5e7eb;
	border-radius: 99px;
	overflow: hidden;
}
.tiqc-wx-moisture__fill {
	height: 100%;
	border-radius: 99px;
	transition: width .3s ease;
}
.tiqc-wx-moisture__val {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.tiqc-wx-soil-temp {
	font-size: 11px;
	color: var(--tiq-text-3);
	margin-top: 4px;
}

/* ── Rain stats row ── */
.tiqc-wx-stats {
	display: flex;
	gap: 0;
}
.tiqc-wx-stat {
	flex: 1;
	text-align: center;
}
.tiqc-wx-stat + .tiqc-wx-stat {
	border-left: 1px solid rgba(0,0,0,.07);
}
.tiqc-wx-stat__val {
	font-size: 15px;
	font-weight: 700;
	color: var(--tiq-text);
	line-height: 1.2;
}
.tiqc-wx-stat__lbl {
	font-size: 10px;
	color: var(--tiq-text-3);
	margin-top: 2px;
}

/* ── Day-by-day forecast strip ── */
.tiqc-wx-forecast {
	display: flex;
	gap: 0;
}
.tiqc-wx-day {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0 2px;
	min-width: 0;
}
.tiqc-wx-day + .tiqc-wx-day { border-left: 1px solid rgba(0,0,0,.06); }
.tiqc-wx-day__name { font-size: 10px; font-weight: 700; color: var(--tiq-text-3); }
.tiqc-wx-day__icon { font-size: 16px; line-height: 1; }
.tiqc-wx-day__bar-wrap {
	width: 8px;
	height: 32px;
	display: flex;
	align-items: flex-end;
}
.tiqc-wx-day__bar {
	width: 100%;
	background: #3b82f6;
	border-radius: 3px 3px 0 0;
	min-height: 2px;
	max-height: 32px;
}
.tiqc-wx-day__bar--dry { background: #e5e7eb; height: 2px !important; }
.tiqc-wx-day__rain { font-size: 10px; font-weight: 600; color: #3b82f6; }
.tiqc-wx-day__temp { font-size: 10px; color: var(--tiq-text-3); }

/* ── No data state ── */
.tiqc-wx-nodata {
	padding: 12px 16px;
	font-size: 12px;
	color: var(--tiq-text-3);
	font-style: italic;
}

/* AI recommendation block in weather card */
.tiqc-wx-ai-rec {
	border-top: 1px solid var(--tiq-border-soft);
}

.tiqc-wx-rec-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tiqc-wx-reasoning {
	font-size: 12px;
	color: var(--tiq-text-3);
	font-style: italic;
	line-height: 1.5;
	margin-bottom: 10px;
}

.tiqc-wx-readiness {
	margin-top: 10px;
	padding: 10px 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.tiqc-wx-readiness__title {
	font-size: 12px;
	font-weight: 700;
	color: #166534;
	margin-bottom: 4px;
}

.tiqc-wx-readiness__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #166534;
}

.tiqc-wx-readiness__list li {
	padding: 2px 0;
}

.tiqc-wx-readiness__waiting {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 6px;
}

.tiqc-wx-readiness__hint {
	font-size: 11px;
	color: #6b7280;
	margin-top: 6px;
}

.tiqc-wx-readiness--warn {
	background: #fef2f2;
	border-color: #fecaca;
}

.tiqc-wx-readiness__title--warn {
	color: #991b1b;
}

.tiqc-wx-readiness__title--caution {
	color: #92400e;
}

.tiqc-wx-readiness--warn .tiqc-wx-readiness__list {
	color: #374151;
}

.tiqc-wx-trail-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 99px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
	margin-left: 4px;
}

.tiqc-wx-trail-badge--open    { background: #dcfce7; color: #166534; }
.tiqc-wx-trail-badge--caution { background: #fef3c7; color: #92400e; }
.tiqc-wx-trail-badge--closed  { background: #fee2e2; color: #991b1b; }

/* ── Trail Conditions page header (title + refresh button) ──── */
.tiqc-wx-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.tiqc-wx-page-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 4px;
}
.tiqc-wx-stale-note {
	font-size: 12px;
	color: #92400e;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 4px 10px;
	font-weight: 500;
}

/* ── Summary block (Status / Why / When) ────────────────────── */
.tiqc-wx-summary { padding-top: 12px; padding-bottom: 12px; }
.tiqc-wx-summary__why {
	font-size: 13px;
	line-height: 1.5;
	color: var(--tiq-text);
}
.tiqc-wx-summary__why strong { font-weight: 700; }
.tiqc-wx-summary__when {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed rgba(0,0,0,.08);
	font-size: 12px;
	color: var(--tiq-text-3);
	line-height: 1.45;
}
.tiqc-wx-summary__when strong {
	font-weight: 700;
	color: var(--tiq-text);
}
.tiqc-wx-summary__details {
	margin-top: 8px;
	font-size: 12px;
}
.tiqc-wx-summary__details > summary {
	cursor: pointer;
	color: var(--tiq-accent, #2d6a4f);
	font-weight: 600;
	list-style: revert;
	padding: 2px 0;
}
.tiqc-wx-summary__details > summary:hover { text-decoration: underline; }
.tiqc-wx-summary__list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	max-height: 180px;
	overflow-y: auto;
	font-size: 12px;
	color: var(--tiq-text);
}
.tiqc-wx-summary__list li { padding: 2px 0; }
.tiqc-wx-summary__moisture {
	font-size: 11px;
	color: var(--tiq-text-3);
	font-variant-numeric: tabular-nums;
	margin-left: 4px;
}

/* ── Options block (status controls + scenarios + reopen) ───── */
.tiqc-wx-options { background: #fff; border-top: 1px solid #e5e7eb; }
.tiqc-wx-options .tiqc-wx-scenario + .tiqc-wx-scenario { margin-top: 8px; }

.tiqc-wx-scenario {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
}
.tiqc-wx-scenario--reopen { border-color: #bbf7d0; background: #f0fdf4; }
.tiqc-wx-scenario__body { flex: 1; min-width: 0; }
.tiqc-wx-scenario__title {
	font-size: 13px;
	font-weight: 500;
	color: var(--tiq-text);
	line-height: 1.35;
	margin-bottom: 2px;
}
.tiqc-wx-scenario__detail {
	font-size: 11px;
	color: var(--tiq-text-3);
}
.tiqc-wx-scenario__apply,
.tiqc-wx-scenario__reopen {
	white-space: nowrap;
	flex-shrink: 0;
	font-size: 12px;
	padding: 6px 12px;
}

/* ── Per-area rows (expandable blocks with status controls) ─── */
.tiqc-wx-area-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tiqc-wx-area-block {
	border-top: 1px solid rgba(0,0,0,.06);
}
.tiqc-wx-area-block:first-child {
	border-top: none;
}
.tiqc-wx-area-block[open] > summary .tiqc-wx-area-row__badge { opacity: .6; }

.tiqc-wx-area-row {
	display: grid;
	grid-template-columns: 8px 1fr auto auto;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.5;
	padding: 8px 0;
	cursor: pointer;
	list-style: none;
}
.tiqc-wx-area-row::-webkit-details-marker { display: none; }
.tiqc-wx-area-row:hover { background: rgba(0,0,0,.02); }
.tiqc-wx-area-row__dot {
	width: 8px;
	height: 8px;
	border-radius: 99px;
}
.tiqc-wx-area-row__name {
	font-weight: 600;
	color: var(--tiq-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tiqc-wx-area-row__ratio {
	color: var(--tiq-text-3);
	font-size: 11px;
}
.tiqc-wx-area-row__badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Expanded area body — manager controls + trail list */
.tiqc-wx-area-body {
	padding: 8px 0 12px 16px;
	font-size: 12px;
}
.tiqc-wx-area-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 6px 0 10px;
}
.tiqc-wx-area-meta__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--tiq-text-3);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.tiqc-wx-area-meta__algo {
	font-size: 11px;
	color: var(--tiq-text-3);
	margin-left: auto;
}

/* Trail list inside an expanded area / unassigned block */
.tiqc-wx-trail-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tiqc-wx-trail-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px dashed rgba(0,0,0,.06);
}
.tiqc-wx-trail-row:first-child { border-top: none; }
.tiqc-wx-trail-row__main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
}
.tiqc-wx-trail-row__name {
	font-weight: 600;
	color: var(--tiq-text);
	flex: 0 1 auto;
	min-width: 120px;
}
.tiqc-wx-trail-row__effective {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.tiqc-wx-trail-row__source {
	font-size: 10px;
	color: var(--tiq-text-3);
	font-style: italic;
}
.tiqc-wx-trail-row__rec {
	font-size: 10px;
	font-style: italic;
}

/* ── Shared status picker (segmented pills) ─────────────────── */
.tiqc-wx-status-picker {
	display: inline-flex;
	gap: 0;
	background: #fff;
	padding: 2px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	align-items: center;
}
.tiqc-wx-status-pill {
	border: none;
	background: transparent;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	color: var(--tiq-text-3);
	transition: background .15s, color .15s;
}
.tiqc-wx-status-pill:hover:not([disabled]):not(.tiqc-wx-status-pill--active) {
	background: #f3f4f6;
	color: var(--tiq-text);
}
.tiqc-wx-status-pill[disabled] { opacity: .5; cursor: wait; }
.tiqc-wx-status-pill--active { background: #f3f4f6; }

/* ── Mobile tuning for the Areas block (≤ 700px) ─────────────────
   At narrow widths the original grid+flex layout cramps trail rows
   (name + 3 badges + 4 pills on one line). These rules break each
   row into stacked, tap-friendly blocks. */
@media (max-width: 700px) {
	/* Area summary row: name + ratio stack; badge + chevron sit at right */
	.tiqc-wx-area-row {
		grid-template-columns: 8px 1fr auto;
		grid-template-rows: auto auto;
		grid-auto-flow: row;
		gap: 2px 8px;
		padding: 10px 2px;
		align-items: center;
	}
	.tiqc-wx-area-row__dot {
		grid-row: 1 / span 2;
		align-self: center;
	}
	.tiqc-wx-area-row__name {
		grid-column: 2;
		grid-row: 1;
		font-size: 13px;
	}
	.tiqc-wx-area-row__ratio {
		grid-column: 2;
		grid-row: 2;
		white-space: normal;
		line-height: 1.35;
	}
	.tiqc-wx-area-row__badge {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: center;
		font-size: 10px;
	}

	/* Expanded area body: drop the big left indent, give rows room. */
	.tiqc-wx-area-body {
		padding: 6px 0 12px 0;
	}

	/* Area meta (status pills + algo note) stacks into its own rows. */
	.tiqc-wx-area-meta {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 8px 0 12px;
	}
	.tiqc-wx-area-meta__label { font-size: 10px; }
	.tiqc-wx-area-meta__algo {
		margin-left: 0;
		font-size: 11px;
		line-height: 1.4;
	}

	/* Trail row: top-line = name + effective badge; meta line below;
	   pills get their own full-width row so they never cramp. */
	.tiqc-wx-trail-row {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 10px 0;
	}
	.tiqc-wx-trail-row__main {
		width: 100%;
		gap: 6px 10px;
	}
	.tiqc-wx-trail-row__name {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
	}
	.tiqc-wx-trail-row__effective {
		margin-left: auto;
	}
	.tiqc-wx-trail-row__source,
	.tiqc-wx-trail-row__rec {
		flex-basis: 100%;
	}

	/* Status picker — let it span full width and allow wrapping inside
	   so 4 pills don't force horizontal scrolling on a 320px screen. */
	.tiqc-wx-status-picker {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}
	.tiqc-wx-status-pill {
		flex: 1 1 0;
		padding: 7px 10px;
		font-size: 12px;
		text-align: center;
	}

	/* Scenario + status-control boxes (Options block): stack vertically so
	   the title/detail gets its own line and the picker / action button
	   sits full-width below it — otherwise a 4-pill picker gets crammed
	   against a 2-line title on narrow screens. */
	.tiqc-wx-scenario {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
	}
	.tiqc-wx-scenario__body { min-width: 0; }
	.tiqc-wx-scenario__title { font-size: 14px; }
	.tiqc-wx-scenario__apply,
	.tiqc-wx-scenario__reopen {
		width: 100%;
		padding: 10px 14px;
		font-size: 13px;
	}
}
.tiqc-wx-status-pill--active.tiqc-wx-status-pill--open    { color: #16a34a; }
.tiqc-wx-status-pill--active.tiqc-wx-status-pill--caution { color: #d97706; }
.tiqc-wx-status-pill--active.tiqc-wx-status-pill--closed  { color: #dc2626; }
.tiqc-wx-status-pill--active.tiqc-wx-status-pill--inherit { color: var(--tiq-text); }

/* ── Forecast trajectory dots (under the forecast day grid) ── */
.tiqc-wx-forecast-traj {
	display: flex;
	margin-top: 4px;
	padding: 0 2px;
}
.tiqc-wx-forecast-traj__cell {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 10px;
}
.tiqc-wx-forecast-traj__dot {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	cursor: help;
}

/* ── Page header actions ──────────────────────────────────── */
.tiqc-page-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ── Additional button variants ───────────────────────────── */
.tiqc-btn--outline {
	background: transparent;
	border-color: var(--tiq-border);
	color: var(--tiq-text-2);
}
.tiqc-btn--outline:hover {
	background: var(--tiq-bg);
	border-color: #bbb;
	color: var(--tiq-text);
}

.tiqc-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--tiq-text-3);
	padding-left: 6px;
}
.tiqc-btn--ghost:hover {
	background: var(--tiq-bg);
	border-color: var(--tiq-border);
	color: var(--tiq-text);
}

.tiqc-btn--full {
	width: 100%;
	justify-content: center;
}

/* ── Icon-only action buttons ─────────────────────────────── */
.tiqc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	border: 1.5px solid transparent;
	background: transparent;
	color: var(--tiq-text-3);
	cursor: pointer;
	transition: all 0.12s;
	flex-shrink: 0;
	padding: 0;
}
.tiqc-icon-btn:hover {
	background: var(--tiq-bg);
	border-color: var(--tiq-border);
	color: var(--tiq-text);
}
.tiqc-icon-btn--danger { color: #dc2626; }
.tiqc-icon-btn--danger:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #b91c1c;
}

/* ── Clickable table rows ─────────────────────────────────── */
.tiqc-table__row--clickable { cursor: pointer; }

.tiqc-table__actions {
	text-align: right;
	white-space: nowrap;
}

/* ── Form feedback messages ───────────────────────────────── */
.tiqc-form-msg {
	font-size: 13px;
	flex: 1;
}
.tiqc-form-msg--success { color: #16a34a; }
.tiqc-form-msg--error   { color: #dc2626; }
.tiqc-form-msg--ok      { color: #16a34a; }

/* ── Infrastructure Types settings page ───────────────────── */
.tiqc-types-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 1100px) {
	.tiqc-types-layout {
		grid-template-columns: 1fr;
	}
}

.tiqc-types-layout__main  { min-width: 0; }
.tiqc-types-layout__aside { min-width: 0; }

.tiqc-overview-panel {
	position: sticky;
	top: 20px;
}

.tiqc-overview-group + .tiqc-overview-group {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tiq-border-soft);
}

.tiqc-overview-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.tiqc-overview-group__name {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tiq-text-muted);
}

.tiqc-overview-group__count {
	font-size: 11px;
	font-weight: 700;
	color: var(--tiq-text-muted);
	background: var(--tiq-border-soft);
	border-radius: 99px;
	padding: 1px 8px;
}

.tiqc-overview-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tiqc-overview-item__link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 8px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--tiq-text);
	transition: background 0.12s;
}

.tiqc-overview-item__link:hover {
	background: var(--tiq-border-soft);
}

.tiqc-overview-item__prefix code {
	display: inline-block;
	min-width: 34px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	background: var(--tiq-orange-soft);
	color: var(--tiq-orange);
	padding: 2px 6px;
	border-radius: 5px;
	letter-spacing: 0.03em;
}

.tiqc-overview-item__name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tiqc-overview-item__fields {
	font-size: 11px;
	color: var(--tiq-text-muted);
	white-space: nowrap;
}

/* Brief highlight when jumping to a row from the overview */
.tiqc-type-row.is-flash {
	animation: tiqc-type-flash 1.2s ease-out;
}
@keyframes tiqc-type-flash {
	0%   { background: var(--tiq-orange-soft); }
	100% { background: transparent; }
}

.tiqc-type-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tiqc-type-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--tiq-border-soft);
}

.tiqc-type-row:last-child {
	border-bottom: none;
}

.tiqc-type-row__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tiqc-type-row__prefix code {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	background: var(--tiq-orange-soft);
	color: var(--tiq-orange);
	padding: 5px 8px;
	border-radius: 6px;
	letter-spacing: 0.03em;
}

.tiqc-type-row__info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.tiqc-type-row__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--tiq-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tiqc-type-row__origin {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 99px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.tiqc-type-row__origin--builtin { background: #e0e7ff; color: #3730a3; }
.tiqc-type-row__origin--custom  { background: #dcfce7; color: #166534; }

.tiqc-type-row__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.tiqc-type-row__control {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
	flex: 1;
}

.tiqc-type-row__control--interval {
	max-width: 220px;
}

.tiqc-interval-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tiqc-interval-wrap .tiqc-input {
	max-width: 100px;
}

.tiqc-interval-unit {
	font-size: 13px;
	color: var(--tiq-text-muted);
}

.tiqc-type-row__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	align-self: flex-end;
	margin-left: auto;
}

/* "Edit fields" button — show it's clickable & expandable */
.tiqc-edit-schema {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.tiqc-edit-schema svg {
	flex-shrink: 0;
}

.tiqc-edit-schema__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.tiqc-edit-schema__chev {
	transition: transform 0.2s ease;
	opacity: 0.85;
}

.tiqc-edit-schema.is-open .tiqc-edit-schema__chev {
	transform: rotate(180deg);
}

/* Inline schema editor nested under a type row */
.tiqc-schema-row {
	background: var(--tiq-surface-muted, #f9fafb);
	border-radius: 10px;
	border: 1px solid var(--tiq-border-soft);
	margin-top: 6px;
}

.tiqc-schema-row[hidden] { display: none; }

.tiqc-schema-editor__inner {
	padding: 16px 18px;
}

.tiqc-schema-editor__hint {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--tiq-text-muted);
}

.tiqc-schema-editor__empty {
	padding: 14px;
	background: var(--tiq-surface, #fff);
	border: 1px dashed var(--tiq-border);
	border-radius: 8px;
	color: var(--tiq-text-muted);
	font-size: 13px;
}

.tiqc-schema-editor__footer {
	margin-top: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.tiqc-schema-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tiqc-schema-field {
	background: var(--tiq-surface, #fff);
	border: 1px solid var(--tiq-border);
	border-radius: 8px;
	padding: 12px 14px;
}

.tiqc-schema-field__req {
	align-self: center;
	flex: 0 0 auto;
	min-width: 0;
}

.tiqc-schema-required {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--tiq-text);
	padding-top: 20px;
}

.tiqc-schema-field__actions {
	margin-top: 10px;
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.tiqc-schema-field-action--remove {
	color: #b91c1c;
}

/* Infrastructure inspection block inside the structure detail panel */
.tiqc-maint-detail__insp {
	padding: 12px 0;
	border-top: 1px solid #f3f4f6;
	margin-top: 10px;
}
.tiqc-maint-detail__insp-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin-bottom: 8px;
}
.tiqc-maint-detail__insp-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	padding: 4px 0;
}
.tiqc-maint-detail__insp-row > span:first-child { color: #6b7280; }
.tiqc-maint-detail__insp-row > span:last-child  { color: #1b2e1a; font-weight: 600; text-align: right; }
.tiqc-overdue { color: #dc2626 !important; }

.tiqc-cond-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.tiqc-cond-badge--good   { background: #dcfce7; color: #166534; }
.tiqc-cond-badge--fair   { background: #fef9c3; color: #854d0e; }
.tiqc-cond-badge--poor   { background: #fed7aa; color: #9a3412; }
.tiqc-cond-badge--failed { background: #fee2e2; color: #991b1b; }

.tiqc-maint-row--overdue { background: linear-gradient(to right, rgba(220,38,38,.06), transparent 40%); }

.tiq-ma-pin--overdue {
	--tiq-marker-pin:    #dc2626;
	--tiq-marker-circle: #fee2e2;
	--tiq-marker-icon:   #dc2626;
}

/* ── Logo upload widget ───────────────────────────────────── */
.tiqc-logo-upload {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}
.tiqc-logo-preview {
	width: 80px;
	height: 80px;
	object-fit: contain;
	border-radius: 8px;
	border: 1px solid var(--tiq-border);
	background: #f9fafb;
	flex-shrink: 0;
}
.tiqc-logo-preview--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--tiq-text-3);
}
.tiqc-logo-upload__actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Textarea ─────────────────────────────────────────────── */
.tiqc-textarea {
	resize: vertical;
	min-height: 80px;
}

/* ── Color input ──────────────────────────────────────────── */
.tiqc-input--color {
	padding: 4px 6px;
	height: 38px;
	cursor: pointer;
}

/* ── Readonly display field ───────────────────────────────── */
.tiqc-input--readonly {
	background: var(--tiq-bg);
	color: var(--tiq-text-2);
	border-color: var(--tiq-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	border: 1.5px solid var(--tiq-border);
}

/* ── Field hints & required marker ───────────────────────── */
.tiqc-field-hint {
	font-size: 11px;
	color: var(--tiq-text-3);
	margin-top: 2px;
}

.tiqc-field-required {
	color: #dc2626;
	margin-left: 2px;
}

/* ── Trail usage chip row + e-bike block ──────────────────── */
.tiq-usage-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.tiq-usage-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 11px;
	border: 1.5px solid var(--tiq-border);
	border-radius: 99px;
	background: #fff;
	font-size: 12px;
	font-weight: 500;
	color: var(--tiq-text-2);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tiq-usage-chip:hover { background: #f9fafb; }
.tiq-usage-chip.is-allowed,
.tiq-usage-chip.is-primary {
	border-color: var(--tiq-primary, #dd9b36);
	background: rgba(221, 155, 54, 0.10);
	color: var(--tiq-primary, #dd9b36);
}
.tiq-usage-chip.is-primary {
	cursor: default;
	opacity: 0.95;
}
.tiq-usage-chip__tag {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	opacity: 0.7;
}
.tiq-usage-chip__check { font-weight: 700; }
.tiq-usage-checkbox {
	display: flex;
	align-items: center;
	margin-top: 4px;
}
.tiq-usage-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--tiq-text-2);
	cursor: pointer;
}

/* ── Stat rows (trail sidebar) ────────────────────────────── */
.tiqc-stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	padding: 5px 0;
	border-bottom: 1px solid var(--tiq-border-soft);
	color: var(--tiq-text-2);
}
.tiqc-stat-row:last-child { border-bottom: none; }
.tiqc-stat-row span { color: var(--tiq-text-3); }
.tiqc-stat-row strong { font-weight: 600; }

/* ── Checkbox rows (trail assignment) ─────────────────────── */
.tiqc-check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--tiq-border-soft);
	cursor: pointer;
	font-size: 13px;
}
.tiqc-check-row:last-child { border-bottom: none; }
.tiqc-check-row input[type=checkbox] { flex-shrink: 0; accent-color: var(--tiq-orange); }
.tiqc-check-row__label { flex: 1; color: var(--tiq-text); }

/* ── Trail search dropdown ────────────────────────────────── */
.tiqc-search-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	z-index: 100;
	max-height: 220px;
	overflow-y: auto;
}
.tiqc-search-dropdown__item {
	padding: 9px 14px;
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px solid var(--tiq-border-soft);
	color: var(--tiq-text);
}
.tiqc-search-dropdown__item:last-child { border-bottom: none; }
.tiqc-search-dropdown__item:hover { background: var(--tiq-surface-2); }
.tiqc-search-dropdown__item--empty { color: var(--tiq-text-3); cursor: default; }
.tiqc-search-dropdown__item--empty:hover { background: none; }

/* ── Assigned trail rows ──────────────────────────────────── */
.tiqc-assigned-trail-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--tiq-border-soft);
	font-size: 13px;
}
.tiqc-assigned-trail-row:last-child { border-bottom: none; }
.tiqc-assigned-trail-row__name { flex: 1; color: var(--tiq-text); }
.tiqc-trail-remove {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 2px 6px;
	font-size: 16px;
	line-height: 1;
	color: var(--tiq-text-3);
	cursor: pointer;
	border-radius: 4px;
}
.tiqc-trail-remove:hover { color: var(--tiq-red, #e53e3e); background: rgba(229,62,62,.08); }

/* ── Network card cursor ──────────────────────────────────── */
.tiqc-net-card { cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; }
.tiqc-net-card:hover { border-color: var(--tiq-orange); box-shadow: 0 2px 12px rgba(0,0,0,.07); }

/* ── Tab bar (edit pages) ─────────────────────────────────── */
.tiqc-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--tiq-border);
	margin-bottom: 20px;
}
.tiqc-tab {
	background: none;
	border: none;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tiq-text-3);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.12s, border-color 0.12s;
}
.tiqc-tab:hover { color: var(--tiq-text); }
.tiqc-tab.is-active {
	color: var(--tiq-orange);
	border-bottom-color: var(--tiq-orange);
}

/* ── Areas list (Network edit > Areas tab) ───────────────── */
.tiqc-area-list {
	display: flex;
	flex-direction: column;
}
.tiqc-area-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--tiq-border-soft);
}
.tiqc-area-row:last-child { border-bottom: 0; }
.tiqc-area-row__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1px solid rgba(0,0,0,.08);
}
.tiqc-area-row__body { flex: 1; min-width: 0; }
.tiqc-area-row__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--tiq-text);
}
.tiqc-area-row__count {
	font-size: 12px;
	color: var(--tiq-text-3);
}

/* ── Modal dialog ─────────────────────────────────────────── */
.tiqc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}
.tiqc-modal {
	background: var(--tiq-surface);
	border-radius: 12px;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.tiqc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--tiq-border-soft);
}
.tiqc-modal__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: var(--tiq-text);
}
.tiqc-modal__close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: var(--tiq-text-3);
	cursor: pointer;
	padding: 0 4px;
	border-radius: 4px;
}
.tiqc-modal__close:hover { color: var(--tiq-text); background: rgba(0,0,0,.05); }
.tiqc-modal__body {
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tiqc-modal__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-top: 1px solid var(--tiq-border-soft);
}

/* ── Check-list (used in Area trail picker) ──────────────── */
.tiqc-check-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 260px;
	overflow-y: auto;
	border: 1px solid var(--tiq-border);
	border-radius: 8px;
	padding: 4px;
	background: var(--tiq-bg);
}
.tiqc-check-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	font-size: 13px;
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
}
.tiqc-check-row:hover { background: rgba(0,0,0,.04); }
.tiqc-check-row input { margin: 0; }

/* ── Edit page two-column grid (trail / network / etc) ───── */
.tiqc-edit-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}
@media (max-width: 900px) {
	.tiqc-edit-grid { grid-template-columns: 1fr; gap: 12px; }
	/* On mobile, multi-column field rows stack — avoids squished selects. */
	.tiqc-field-row { grid-template-columns: 1fr; }
	/* Page header: stack title + actions on narrow screens. */
	.tiqc-page-header {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.tiqc-page-title { font-size: 20px; }
	/* Form footer: let the button go full-width. */
	.tiqc-form-footer {
		flex-wrap: wrap;
		justify-content: stretch;
	}
	.tiqc-form-footer .tiqc-btn { flex: 1; }
	/* Inputs & selects: iOS needs ≥16px to skip zoom-on-focus. */
	.tiqc-input,
	.tiqc-input.tiqc-textarea { font-size: 16px; }
	/* Reduce horizontal padding in panels so inputs don't get cramped. */
	.tiqc-form { padding: 16px; gap: 14px; }
	.tiqc-form-footer { padding: 12px 16px; }
	.tiqc-panel__head { padding: 12px 16px; }
}

/* ── Mobile header ────────────────────────────────────────── */
.tiqc-mobile-header {
	display: none;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	height: 54px;
	background: #1b2e1a;
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 200;
}

.tiqc-mobile-header__logo {
	flex-shrink: 0;
	display: block;
	width: 32px;
	height: auto;
}

.tiqc-mobile-header__title {
	flex: 1;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tiqc-menu-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.20);
	border-radius: 8px;
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s;
}
.tiqc-menu-btn:active { background: rgba(255,255,255,.22); }
.tiqc-menu-btn span {
	display: block;
	width: 16px;
	height: 2px;
	background: rgba(255,255,255,.90);
	border-radius: 2px;
}

/* ── Sidebar overlay ──────────────────────────────────────── */
.tiqc-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 149;
}
.tiqc-sidebar-overlay.is-visible { display: block; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	:root { --sidebar-width: 0px; }

	.tiqc-mobile-header { display: flex; }

	.tiqc-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 250;
		transform: translateX(-230px);
		transition: transform 0.25s;
		width: 230px;
	}

	.tiqc-sidebar.is-open {
		transform: translateX(0);
	}

	.tiqc-main { margin-left: 0; }

	.tiqc-page-content { padding: 16px; }

	.tiqc-metrics { grid-template-columns: repeat(2, 1fr); }

	.tiqc-cols { grid-template-columns: 1fr; }

	/* Trails table: hide less critical columns, keep Trail/Difficulty/Status/Actions */
	#trails-table th:nth-child(3),
	#trails-table td:nth-child(3),
	#trails-table th:nth-child(4),
	#trails-table td:nth-child(4) { display: none; }

	/* Tighten up table padding on mobile */
	#trails-table th,
	#trails-table td { padding: 10px 12px; }

	/* Filter bar stacks on mobile — only the drawer stacks, row stays horizontal */
	.tiqc-filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.tiqc-filter-bar__row {
		flex-wrap: nowrap;
		align-items: center;
	}
	.tiqc-filter-bar .tiqc-input { width: 100% !important; }
	/* Inside the trail filters row, search + network share the row instead of
	   being forced to 100% each (which would stack them to two lines). */
	.tiqc-filter-bar .tiqc-trail-filters-row > .tiqc-input {
		width: auto !important;
		flex: 1 1 140px;
		min-width: 0;
	}
	.tiqc-filter-tabs { flex-wrap: wrap; }
}

/* ── Structures page ──────────────────────────────────────── */
.tiqc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.tiqc-table th {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 2px solid #e5e7eb;
	color: #6b7280;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}
.tiqc-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
}
.tiqc-table tr:last-child td { border-bottom: none; }
.tiqc-table tr:hover td { background: #fafafa; }

.tiqc-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	background: #e5e7eb;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	margin-left: 6px;
}

.tiqc-search-row {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.tiqc-unlinked-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 320px;
	overflow-y: auto;
}

.tiqc-unlinked-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.tiqc-unlinked-row__info { flex: 1; font-size: 14px; }
.tiqc-muted { color: #9ca3af; font-size: 13px; }
.tiqc-empty-inline { color: #9ca3af; font-size: 14px; margin: 8px 0 0; }
.tiqc-error { color: #ef4444 !important; }

.tiqc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 7px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s; text-decoration: none; }
.tiqc-btn--sm { padding: 5px 11px; font-size: 13px; }
.tiqc-btn--primary { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }
.tiqc-btn--primary:hover { background: #1b4332; border-color: #1b4332; }
.tiqc-btn--primary:disabled { opacity: .55; cursor: not-allowed; }

/* ── Field app embed iframe ──────────────────────────────────────── */

/* ── Maintenance map + list layout ───────────────────────────────── */
.tiqc-maint-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

.tiqc-maint-map {
	flex: 0 0 42%;
	min-height: 240px;
	overflow: hidden;
}

.tiqc-maint-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tiqc-surface, #fff);
	border-top: 1px solid var(--tiqc-border, #e5e7eb);
}

.tiqc-maint-list {
	flex: 1;
	overflow-y: auto;
}

/* ── Swipe row wrapper ───────────────────────────────────────────── */
/* Row styles — shared-components.css provides .tiq-fa-issue-row / .tiq-fa-struct-row base styles.
   Dashboard JS also adds .tiqc-maint-row for JS selectors (.is-active, swipe). */
.tiqc-maint-row-wrap { position: relative; overflow: hidden; border-bottom: 1px solid #f3f4f6; }
.tiqc-maint-row:hover,
.tiqc-maint-row.is-active { background: #f8fdf9; }
.tiqc-maint-detail__desc--auto { color: var(--tiqc-text-2, #4b5563); font-style: italic; }

/* ── Detail panel ────────────────────────────────────────────────── */

/* Desktop: slides in from the right, full height (map + list) */
.tiqc-maint-detail {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	overflow: hidden;       /* panel itself doesn't scroll */
	display: flex;
	flex-direction: column;
	background: #fff;
	border-left: 1px solid var(--tiqc-border, #e5e7eb);
	box-shadow: -6px 0 32px rgba(0,0,0,.10);
	z-index: 20;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.tiqc-maint-detail.is-open {
	transform: translateX(0);
}

/* Mobile: fixed position so iOS keyboard doesn't push the parent */
@media (max-width: 768px) {
	.tiqc-maint-detail {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		height: 58%;
		width: 100%;
		border-left: none;
		border-top: 1px solid var(--tiqc-border, #e5e7eb);
		box-shadow: 0 -6px 24px rgba(0,0,0,.08);
		transform: translateY(100%);
		overflow: hidden;
	}
	.maplibregl-ctrl-top-right .maplibregl-ctrl-group {
		display: none;
	}
	.tiqc-maint-detail.is-open {
		transform: translateY(0);
	}
}
.tiqc-maint-detail__head {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tiqc-border, #e5e7eb);
	font-size: 14px;
	flex-shrink: 0;
}
.tiqc-maint-detail__close {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--tiqc-text-3, #9ca3af);
	line-height: 1;
	padding: 0 2px;
}
.tiqc-maint-detail__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; }
.tiqc-maint-detail__desc { font-size: 13px; color: var(--tiqc-text, #111); margin: 0 0 8px; white-space: pre-line; }
.tiqc-maint-detail__fields { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.tiqc-maint-detail__label { font-size: 12px; font-weight: 600; color: var(--tiqc-text-2, #4b5563); display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.tiqc-maint-select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--tiqc-border, #e5e7eb); border-radius: 6px; background: #fff; font-family: inherit; }
.tiqc-maint-save-btn { background: #2d6a4f; color: #fff; border: none; border-radius: 7px; padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.tiqc-maint-save-btn:disabled { opacity: .55; cursor: not-allowed; }
.tiqc-maint-detail__msg { font-size: 12px; margin-left: 10px; }

/* Override padding so the maintenance wrap fills edge-to-edge. */

/* When showing the maintenance page, lock the whole column chain to a fixed
   viewport height so the inner flex items can fill it with flex:1.         */
.tiqc-main:has(.tiqc-maint-wrap) {
	height: 100dvh;
	overflow: hidden;
}
.tiqc-page-content:has(.tiqc-maint-wrap) {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 0;   /* flex:1 + height:0 = fill remaining space in parent */
}

/* ── Detail panel — title group (diff icon + name, left-aligned) ─ */
.tiqc-maint-detail__title {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1;
}
.tiqc-maint-detail__title strong {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tiqc-maint-detail__diff-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* ── Reporter block ───────────────────────────────────────────── */
.tiqc-maint-detail__reporter-block {
	margin: 8px 0 0;
}
.tiqc-maint-detail__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--tiqc-text-3, #9ca3af);
	margin: 2px 0 12px;
}

/* ── Section dividers ─────────────────────────────────────────── */
.tiqc-maint-detail__div {
	border: none;
	border-top: 1px solid var(--tiqc-border, #e5e7eb);
	margin: 14px 0;
}

/* Structures page */
.tiqc-struct-row__diff-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	align-self: center;
}
.tiqc-struct-detail__diff-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-right: 6px;
	vertical-align: middle;
}
.tiqc-struct-detail__trail-chip {
	color: #6b7280;
	background: #f3f4f6;
}
.tiqc-struct-heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--tiqc-text, #111);
	padding: 0 4px;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.tiqc-struct-heading { display: none; }
}

/* ── POI markers + list dot ───────────────────────────────────── */
.tiqc-poi-marker {
	cursor: pointer;
}

.tiqc-poi-row-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background: #dc2626;
	border-radius: 50%;
	align-self: center;
}

/* ── Trail map editor vertices ────────────────────────────────── */
.tiqc-edit-vertex {
	width: 14px;
	height: 14px;
	background: #fff;
	border: 3px solid var(--tiq-orange);
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
	touch-action: none;
}
.tiqc-edit-vertex:active { cursor: grabbing; }
.tiqc-edit-vertex--end {
	width: 18px;
	height: 18px;
	border-width: 4px;
	background: var(--tiq-orange);
	border-color: #fff;
}
.tiqc-vertex-delete {
	display: block;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: #dc2626;
	background: #fff;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.tiqc-vertex-delete:hover { background: #fef2f2; }

/* Chips, photo thumbs, worklog, timelog, save, lightbox — shared component styles are in shared-components.css */

/* ── Trail import: drop zone ────────────────────────────────────────────── */
.tiqc-drop-zone {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 32px 24px; border: 2px dashed var(--tiqc-border, #e2e8f0);
	border-radius: 10px; cursor: pointer; text-align: center;
	color: var(--tiqc-text-muted, #64748b);
	transition: border-color .15s, background .15s;
}
.tiqc-drop-zone:hover,
.tiqc-drop-zone--over {
	border-color: var(--tiqc-accent, #2d6a4f);
	background: rgba(45,106,79,.04);
}
.tiqc-drop-zone__label { font-size: 14px; line-height: 1.5; }
.tiqc-drop-zone__label span { font-size: 12px; color: var(--tiqc-text-muted, #94a3b8); }

/* ── Trail import: queue ─────────────────────────────────────────────────── */
.tiqc-queue-item {
	padding: 12px 0; border-bottom: 1px solid var(--tiqc-border, #e2e8f0);
}
.tiqc-queue-item:last-child { border-bottom: none; }
.tiqc-queue-item__fields {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.tiqc-queue-item__fields .tiqc-input--sm {
	font-size: 13px; padding: 5px 8px; height: auto;
}
.tiqc-queue-item__fields .tiq-q-name { flex: 1; min-width: 140px; }
.tiqc-queue-item__fields .tiq-q-diff { width: 110px; }
.tiqc-queue-item__fields .tiq-q-net  { width: 140px; }
.tiqc-queue-item__stats {
	margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.tiqc-stat-pill {
	font-size: 12px; color: var(--tiqc-text-muted, #64748b);
	background: var(--tiqc-bg-subtle, #f8fafc);
	padding: 2px 8px; border-radius: 20px;
}
.tiqc-queue-item--uploading { opacity: .7; }
.tiqc-queue-item--done .tiqc-queue-item__fields { opacity: .6; }
.tiqc-queue-item--failed .tiqc-queue-item__fields .tiq-q-name { color: #c00; }

.tiqc-import-footer {
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 16px; gap: 12px; flex-wrap: wrap;
}

/* ============================================================
   WP Admin overrides
   When embedded inside the WP admin, the SPA renders inside
   .tiqc-dashboard-wrap (no sidebar shell). These rules ensure
   the content area fills properly and inherits the dashboard
   design tokens without conflicting with WP admin chrome.
   ============================================================ */
.tiqc-dashboard-wrap {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	color: var(--tiq-text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	max-width: none;
	margin: 0;
	padding: 20px 20px 0;
}

.tiqc-dashboard-wrap #tiqc-page-content {
	padding: 0 0 48px;
}

/* Override WP admin's default link color inside the SPA */
.tiqc-dashboard-wrap a { color: inherit; }
.tiqc-dashboard-wrap a:focus { box-shadow: none; outline: none; }

/* Map-based pages (maintenance, infrastructure, POIs) — fill viewport.
   Lock page scroll, make sidebar scroll independently, fill content area. */
html:has(.tiqc-maint-wrap),
html:has(.tiqc-maint-wrap) body {
	overflow: hidden !important;
	height: 100vh !important;
}
html:has(.tiqc-maint-wrap) #adminmenumain,
html:has(.tiqc-maint-wrap) #adminmenuwrap {
	position: fixed;
	top: 32px;
	bottom: 0;
	left: 0;
	overflow-y: auto;
}
@media screen and (max-width: 782px) {
	html:has(.tiqc-maint-wrap) #adminmenumain,
	html:has(.tiqc-maint-wrap) #adminmenuwrap {
		top: 46px;
	}
}
#wpcontent:has(.tiqc-maint-wrap) {
	padding-left: 0;
}
.tiqc-dashboard-wrap:has(.tiqc-maint-wrap) {
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
	height: calc(100vh - 32px);
	overflow: hidden;
}
@media screen and (max-width: 782px) {
	.tiqc-dashboard-wrap:has(.tiqc-maint-wrap) {
		height: calc(100vh - 46px);
	}
}
.tiqc-dashboard-wrap:has(.tiqc-maint-wrap) #tiqc-page-content {
	padding: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Hide WP admin footer when map pages are active */
#wpbody-content:has(.tiqc-maint-wrap) #wpfooter { display: none; }

/* ── Trail Counters ──────────────────────────────────────── */

/* Counter cards */
.tiqc-counter-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.15s; background: var(--tiq-surface); }
.tiqc-counter-card:hover { border-color: #2d6a4f; }
.tiqc-counter-card__name { font-size: 15px; font-weight: 600; color: #1b2e1a; }
.tiqc-counter-card__serial { font-size: 12px; color: #6b7280; font-weight: 400; }
.tiqc-counter-card__meta { font-size: 12px; color: #6b7280; margin-top: 4px; }
.tiqc-counter-card__stats { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; }
.tiqc-counter-card__stat { display: flex; flex-direction: column; }
.tiqc-counter-card__stat-val { font-weight: 700; color: #1b2e1a; }
.tiqc-counter-card__stat-label { font-size: 11px; color: #9ca3af; }

.tiqc-counter-card__link-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; }
.tiqc-counter-card__link-label span { font-weight: 500; }

.tiqc-counter-select {
	font-size: 12px;
	padding: 3px 6px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: var(--tiq-text);
	cursor: pointer;
	max-width: 160px;
}
.tiqc-counter-select:focus { outline: none; border-color: #2d6a4f; box-shadow: 0 0 0 2px rgba(45,106,79,.15); }

/* Counter detail filter bar */
.tiqc-counter-filter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.tiqc-counter-filter label {
	font-size: 13px;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tiqc-counter-filter .tiqc-input {
	width: auto;
	font-size: 13px;
	padding: 5px 8px;
}

/* Counter detail summary */
.tiqc-counter-summary {
	display: flex;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	padding: 16px;
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: 10px;
}
.tiqc-counter-summary__item { display: flex; flex-direction: column; }
.tiqc-counter-summary__val { font-size: 18px; font-weight: 700; color: #1b2e1a; }
.tiqc-counter-summary__label { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* Charts */
.tiqc-chart {
	margin: 16px 0;
	padding: 16px;
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: 10px;
}
.tiqc-chart__title { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 10px; }

/* Vertical bar chart */
.tiqc-chart__bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.tiqc-chart__bar { flex: 1; background: #2d6a4f; border-radius: 2px 2px 0 0; min-width: 2px; transition: height 0.2s; }
.tiqc-chart__bar--peak { background: #dd9b36; }
.tiqc-chart__labels { display: flex; justify-content: space-between; font-size: 10px; color: #9ca3af; margin-top: 4px; }

/* Horizontal bar chart */
.tiqc-chart__hbars { display: flex; flex-direction: column; gap: 6px; }
.tiqc-chart__hbar-row { display: flex; align-items: center; gap: 8px; }
.tiqc-chart__hbar-label { width: 32px; flex-shrink: 0; font-size: 11px; color: #6b7280; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiqc-chart__hbar-wrap { flex: 1; min-width: 0; }
.tiqc-chart__hbar { height: 20px; background: #2d6a4f; border-radius: 3px; transition: width 0.2s; min-width: 2px; }
.tiqc-chart__hbar--peak { background: #dd9b36; }
.tiqc-chart__hbar-val { flex-shrink: 0; font-size: 11px; color: #6b7280; white-space: nowrap; min-width: 70px; text-align: right; }

/* ── Work Report ──────────────────────────────────────── */

.tiq-wr-summary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}
.tiq-wr-summary__card {
	background: var(--tiq-surface);
	border: 1px solid var(--tiq-border);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
}
.tiq-wr-summary__val {
	font-size: 22px;
	font-weight: 700;
	color: #1b2e1a;
}
.tiq-wr-summary__label {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 2px;
}
.tiqc-chart__hbar-val em { font-style: normal; color: #c4c9cf; }

@media (max-width: 600px) {
	.tiq-wr-summary { grid-template-columns: repeat(2, 1fr); }
	.tiq-wr-summary__val { font-size: 18px; }
	.tiqc-counter-summary { gap: 16px; }
	.tiqc-counter-summary__val { font-size: 15px; }
	.tiqc-counter-filter { flex-direction: column; align-items: flex-start; }
	.tiqc-chart__hbar-label { width: 80px !important; font-size: 10px; }
}

/* ── Plan-status banner ──────────────────────────────────────────────────
 * Rendered by initPlanGuard() when the active org is approaching or over
 * a plan limit. Sits between the mobile header and #tiqc-page-content.
 */
.tiqc-plan-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	font-size: 13px;
	line-height: 1.4;
	border-bottom: 1px solid transparent;
}
.tiqc-plan-banner--warn     { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.tiqc-plan-banner--critical { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.tiqc-plan-banner__icon { font-size: 16px; flex: 0 0 auto; }
.tiqc-plan-banner__msg  { flex: 1 1 auto; }
.tiqc-plan-banner__msg strong { font-weight: 700; }
.tiqc-plan-banner__cta {
	flex: 0 0 auto;
	background: #065f46;
	color: #fff;
	padding: 5px 12px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	text-decoration: none;
}
.tiqc-plan-banner__cta:hover { background: #047857; color: #fff; }
.tiqc-plan-banner--critical .tiqc-plan-banner__cta { background: #b91c1c; }
.tiqc-plan-banner--critical .tiqc-plan-banner__cta:hover { background: #991b1b; }
.tiqc-plan-banner__close {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.55;
}
.tiqc-plan-banner__close:hover { opacity: 1; }

/* 402-error upgrade CTA, appended inline next to a form error message. */
.tiqc-form-msg__upgrade {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 10px;
	background: #065f46;
	color: #fff;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.tiqc-form-msg__upgrade:hover { background: #047857; color: #fff; }