/* ==========================================================================
   Gear list — the Gear tab on a booking and on a program cohort.
   "What do I pull off the shelf for this, and from where?"

   Namespaced .gl-* so it can't collide. Tokens are inherited from
   product-detail.css (--pd-*), which the base layout already loads, so this
   file only adds the list chrome — it never redefines a color.
   ========================================================================== */

.gl-wrap {
	padding: 4px 0 8px;
}

/* ----- Filter row: pills left, dropdown + column gear right ----- */
.gl-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

/* Search/filter controls and the pills share the standard 40px height so the
   row never looks half-built. */
.gl-filters .dropdown-filter .btn { height: 40px; }
.gl-filters .dropdown-filter .dropdown-menu { max-height: 322px; }

/* ----- Column manager panel -----
   .pd-card sets overflow:hidden, which clips the absolutely-positioned panel.
   Let this one card overflow, and open the panel UPWARD: the filter row sits
   near the top of a short card, so a downward panel runs off the bottom. */
.pd-card.gl-wrap { overflow: visible; }

.gl-filters .cm-panel {
	top: auto;
	bottom: calc(100% + 6px);
}

/* ----- Date pills (mirrors .pos-pill*) ----- */
.gl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gl-pill {
	height: 32px;
	padding: 0 14px;
	border-radius: var(--pd-radius-pill);
	border: 1px solid var(--pd-line-strong);
	background: #fff;
	color: var(--pd-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.gl-pill:hover {
	border-color: var(--pd-mute-2);
}

.gl-pill.active {
	background: var(--pd-navy);
	border-color: var(--pd-navy);
	color: #fff;
}

/* WCAG 2.5.5 — a comfortable target on handhelds. */
@media (max-width: 575px) {
	.gl-pill { min-height: 44px; }
}

/* ----- Shortfall banner ----- */
.gl-banner {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--pd-warn-soft);
	border: 1px solid #f5d9a8;
	border-radius: var(--pd-radius-sm);
	padding: 10px 13px;
	font-size: 13px;
	margin-bottom: 16px;
	color: var(--pd-ink);
}

.gl-banner b { color: #a35c04; }

/* ----- Location group ----- */
.gl-loc {
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-sm);
	overflow: hidden;
	margin-bottom: 14px;
	background: #fff;
}

.gl-loc:last-child { margin-bottom: 0; }

.gl-loc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--pd-soft-bg);
	border-bottom: 1px solid var(--pd-line);
}

.gl-loc-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pd-ink);
}

.gl-loc-meta {
	font-size: 12px;
	color: var(--pd-mute);
	font-weight: 600;
	white-space: nowrap;
}

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

.gl-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--pd-mute);
	padding: 9px 14px;
	border-bottom: 1px solid var(--pd-line);
	white-space: nowrap;
}

.gl-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--pd-line);
	vertical-align: top;
	font-size: 13.5px;
	color: var(--pd-ink);
}

.gl-table tr:last-child td { border-bottom: 0; }

.gl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.gl-item-name { font-weight: 600; }

.gl-kit {
	margin-top: 5px;
	padding-left: 12px;
	border-left: 2px solid var(--pd-line-strong);
	font-size: 12px;
	color: var(--pd-mute);
	line-height: 1.5;
}

.gl-when { font-size: 12px; color: var(--pd-mute); }

/* One date per line — a term's worth of dates as a run-on list wraps into an
   unreadable paragraph. */
.gl-date-line { display: block; white-space: nowrap; }
.gl-date-line + .gl-date-line { margin-top: 2px; }

.gl-units {
	margin-top: 3px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gl-unit {
	font-size: 10.5px;
	font-weight: 600;
	background: var(--pd-soft-bg);
	border: 1px solid var(--pd-line-strong);
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--pd-ink-2);
	font-family: "SF Mono", Menlo, monospace;
}

.gl-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--pd-radius-pill);
	padding: 2px 9px;
}

.gl-chip.ok { background: var(--pd-success-soft); color: #0f7a3d; }
.gl-chip.warn { background: var(--pd-warn-soft); color: #a35c04; }
.gl-chip.bad { background: var(--pd-danger-soft); color: #b02318; }

.gl-note {
	font-size: 12.5px;
	color: var(--pd-mute);
	margin-top: 10px;
}

/* ----- Empty state ----- */
.gl-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--pd-mute);
	font-size: 13.5px;
}

/* Same 84px illustration slot the app-wide empty state uses, so the gear tab
   reads as part of the same family without inheriting that component's card. */
.gl-empty-icon {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: contain;
	margin: 0 auto 12px;
}

.gl-empty-title {
	font-weight: 700;
	color: var(--pd-ink);
	font-size: 15px;
	margin-bottom: 4px;
}

/* ----- Narrow screens: the table scrolls, the page never does ----- */
@media (max-width: 767px) {
	.gl-scroll { overflow-x: auto; }
	.gl-table { min-width: 520px; }
}