/* WGC Program at a Glance — self-contained styling.
   No Bootstrap/jQuery dependency: the legacy paag-script.js was lost, and
   we don't know for certain the conference site theme still uses
   Bootstrap 4, so this is built to work standalone. If the site does
   use Bootstrap already, these can be trimmed down later. */

.wgc-paag {
	max-width: 90%;
	margin: 1em auto;
}

.wgc-paag-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid #e3e3e3;
	margin-bottom: 1em;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 3;
	padding-top: 8px;
}

.wgc-paag-tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 8px 16px;
	font-size: 1em;
	cursor: pointer;
	color: #333;
	flex: 1 1 140px;
	text-align: center;
}

.wgc-paag-tab:hover {
	color: #17407B;
}

.wgc-paag-tab.is-active {
	color: #17407B;
	border-bottom-color: #17407B;
	font-weight: 600;
}

.wgc-paag-panel {
	display: none;
}

.wgc-paag-panel.is-active {
	display: block;
}

.wgc-paag-table-wrap {
	max-height: 70vh;
	overflow: auto; /* both axes, contained in this one element — this is
	                    what fixes the "double scrollbar" issue: previously
	                    only overflow-y was set, so horizontal overflow was
	                    left to the browser/page instead of this container */
	border: 1px solid #e3e3e3;
	position: relative;
}

.wgc-paag-table {
	border-collapse: collapse;
	table-layout: fixed;
	/* Deliberately no width: 100% here. With table-layout: fixed, column
	   widths come from the widths set below instead of being divided
	   evenly across the container — so with many rooms (e.g. WGC-2025's
	   20+), the table grows wider than its container and the wrap div's
	   horizontal scroll kicks in, rather than every column being
	   squeezed thin enough to force text out of its cell. */
}

.wgc-paag-table th,
.wgc-paag-table td {
	border: 1px solid #e3e3e3;
	padding: 6px 8px;
	vertical-align: top;
	font-size: 0.9em;
	width: 150px;
	min-width: 150px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.wgc-paag-table thead th {
	position: sticky;
	top: 0; /* sticky relative to .wgc-paag-table-wrap's own scroll, not the page */
	background: #fff;
	text-align: center;
	z-index: 2;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.15);
}

.wgc-paag-table td.wgc-paag-time-col,
.wgc-paag-table th.wgc-paag-time-col {
	width: 90px;
	min-width: 90px;
	white-space: nowrap;
	font-weight: 600;
	text-align: center;
	background: #fafafa;
}

.wgc-paag-cell-empty {
	background: #fff;
}

.wgc-paag-cell-session,
.wgc-paag-cell-horizontal {
	line-height: 1.3;
	cursor: pointer;
}

.wgc-paag-cell-horizontal {
	text-align: center;
}

.wgc-paag-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.wgc-paag-search {
	flex: 1 1 220px;
	padding: 8px 10px;
	font-size: 0.95em;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.wgc-paag-filter {
	position: relative;
}

.wgc-paag-filter summary {
	cursor: pointer;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	list-style: none;
	font-size: 0.95em;
	background: #fff;
}

.wgc-paag-filter summary::-webkit-details-marker {
	display: none;
}

.wgc-paag-filter-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 10;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 8px 12px;
	min-width: 220px;
	max-height: 300px;
	overflow-y: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wgc-paag-filter-option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-size: 0.9em;
	cursor: pointer;
	white-space: nowrap;
}

.wgc-paag-filter-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

.wgc-paag-view-toggle {
	display: flex;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
}

.wgc-paag-view-btn {
	background: #fff;
	border: none;
	padding: 8px 14px;
	font-size: 0.9em;
	cursor: pointer;
	color: #333;
}

.wgc-paag-view-btn + .wgc-paag-view-btn {
	border-left: 1px solid #ccc;
}

.wgc-paag-view-btn.is-active {
	background: #17407B;
	color: #fff;
}

/* Day nav: tabs by default (desktop), dropdown hidden — flipped in the
   mobile media query below. Both stay in the DOM and wired up via JS
   regardless of which is visible, so a mid-session resize never
   desyncs them. */
.wgc-paag-day-select {
	display: none;
	width: 100%;
	padding: 10px;
	font-size: 1em;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 1em;
}

/* View toggle: table shown, list hidden, by default — flipped by the
   .wgc-paag-view-is-list class JS applies to the root element. */
.wgc-paag-view-list {
	display: none;
}

.wgc-paag-view-is-list .wgc-paag-view-table {
	display: none;
}

.wgc-paag-view-is-list .wgc-paag-view-list {
	display: block;
}

/* List view — mobile-friendly chronological agenda, one item per
   session, colored left border matching the type's Color_inPAAG. */
.wgc-paag-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wgc-paag-list-item {
	display: flex;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	border-left: 4px solid #ccc;
	cursor: pointer;
}

.wgc-paag-list-time {
	flex: 0 0 auto;
	width: 90px;
	font-weight: 600;
	color: #17407B;
	white-space: nowrap;
}

.wgc-paag-list-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wgc-paag-list-type {
	font-size: 0.95em;
}

.wgc-paag-list-title {
	font-size: 0.9em;
	color: #333;
}

.wgc-paag-list-room {
	font-size: 0.85em;
	color: #777;
	font-style: italic;
}

/* Search/filter dimming for table cells — see paag.js: cells stay in
   the DOM (removing them would break rowspan/colspan), just dimmed. */
.wgc-paag-cell-dim {
	opacity: 0.25;
}

.wgc-paag-cell-abstract {
	margin-top: 4px;
	font-size: 0.85em;
	font-weight: normal;
	color: #444;
	line-height: 1.3;
}

.wgc-paag-list-abstract {
	font-size: 0.85em;
	color: #555;
	line-height: 1.4;
	margin-top: 2px;
}

.wgc-paag-empty,
.wgc-paag-message {
	padding: 1em;
	background: #f5f5f5;
	border-radius: 4px;
	color: #555;
}

.wgc-paag-error {
	padding: 1em;
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: 4px;
	color: #7a1f1f;
}

/* Session detail modal */
body.wgc-paag-modal-open {
	overflow: hidden;
}

.wgc-paag-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 20px;
	overflow-y: auto;
}

.wgc-paag-modal-overlay[hidden] {
	display: none;
}

.wgc-paag-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 6px;
	max-width: 650px;
	width: 100%;
	padding: 24px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.wgc-paag-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: #777;
	padding: 4px 8px;
}

.wgc-paag-modal-close:hover {
	color: #222;
}

.wgc-paag-modal-header {
	border-left: 4px solid #ccc;
	padding-left: 14px;
	margin-bottom: 16px;
	margin-right: 30px; /* clear the close button */
}

.wgc-paag-modal-type {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #777;
}

.wgc-paag-modal-title {
	margin: 4px 0;
	font-size: 1.3em;
	color: #17407B;
}

.wgc-paag-modal-meta {
	font-size: 0.9em;
	color: #555;
}

.wgc-paag-modal-meta i {
	color: #17407B;
	width: 14px;
	text-align: center;
}

.wgc-paag-modal-topic {
	margin-top: 16px;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 600;
	color: #222;
}

.wgc-paag-modal-abstract {
	margin-bottom: 16px;
	font-size: 0.95em;
	line-height: 1.5;
	color: #333;
}

.wgc-paag-modal-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.wgc-paag-modal-section h4 {
	margin: 0 0 8px 0;
	color: #17407B;
	font-size: 1em;
}

.wgc-paag-modal-section h4 i {
	width: 16px;
	text-align: center;
}

.wgc-paag-modal-presentation-time i {
	color: #17407B;
}

.wgc-paag-modal-presentations {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wgc-paag-modal-presentations li {
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.92em;
}

.wgc-paag-modal-presentations li:last-child {
	border-bottom: none;
}

.wgc-paag-modal-presentation-time {
	font-weight: 600;
	color: #17407B;
	flex: 0 0 auto;
}

.wgc-paag-modal-presentation-title {
	flex: 1 1 200px;
}

.wgc-paag-modal-presenter {
	flex: 0 0 auto;
	color: #555;
	font-style: italic;
}

.wgc-paag-modal-presenter-tba {
	color: #999;
}

.wgc-paag-modal-loading,
.wgc-paag-modal-error {
	color: #777;
	text-align: center;
	padding: 20px 0;
}

.wgc-paag-debug {
	margin-top: 1em;
	padding: 0.75em 1em;
	background: #fffbe6;
	border: 1px solid #f0dd8a;
	border-radius: 4px;
	font-size: 0.85em;
	font-family: monospace;
}

.wgc-paag-debug summary {
	cursor: pointer;
	font-weight: 600;
	font-family: -apple-system, sans-serif;
}

.wgc-paag-debug table {
	margin-top: 0.5em;
	border-collapse: collapse;
	width: 100%;
}

.wgc-paag-debug th,
.wgc-paag-debug td {
	border: 1px solid #e3d9a0;
	padding: 4px 8px;
	text-align: left;
}

@media (max-width: 782px) {
	.wgc-paag {
		max-width: 100%;
	}
	.wgc-paag-tabs {
		display: none;
	}
	.wgc-paag-day-select {
		display: block;
	}
	.wgc-paag-table {
		font-size: 0.8em;
	}
	.wgc-paag-table td.wgc-paag-time-col,
	.wgc-paag-table th.wgc-paag-time-col {
		width: 60px;
		min-width: 60px;
	}
}