/* ==========================================================================
   LPS Arts Calendar — app styles
   ========================================================================== */

/* The `.btn` class below has equal CSS specificity to the browser's own
   [hidden] rule and loads after it, so without this, a hidden .btn (like
   #ac-loadmore before there's anything to load) still renders. */
[hidden] { display: none !important; }

:root {
	--lps-blue: #0033A0;
	--lps-red: #C8102E;
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-500: #6b7280;
	--gray-700: #374151;
	--gray-900: #111827;
}

/* ==========================================================================
   Admin pages (uses shared header/footer) — same conventions as
   /studentvote/css/studentvote.css so the two admin tools feel consistent.
   ========================================================================== */

/* One grey-banded block holding both the toolbar row and the tabs, so
   they read as a single piece of page chrome instead of two separate
   bits of text floating on white. Tabs get an explicit white fill (they
   used to rely on the page's own white showing through) so they still
   stand out now that what's behind them isn't white anymore. */
.admin-chrome {
	background-color: var(--gray-100);
	border-radius: 10px;
	padding: 0.5rem 1rem 1rem;
	margin-bottom: 2rem;
}

.admin-toolbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.25rem;
	padding: 0.5rem 0;
	font-size: 0.85rem;
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: 0.75rem;
}

.admin-toolbar a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--lps-blue); text-decoration: none; }
.admin-toolbar a:hover { text-decoration: underline; }
.admin-toolbar-user { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gray-500); }

.admin-nav {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}

.admin-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--lps-blue);
	background-color: #fff;
	border: 1px solid var(--gray-200);
	transition: all 0.15s;
}

.admin-nav a i { width: 1em; text-align: center; color: var(--gray-500); }
.admin-nav a:hover { border-color: var(--lps-blue); }
.admin-nav a.active { background-color: var(--lps-blue); color: white; border-color: var(--lps-blue); }
.admin-nav a.active i { color: rgba(255, 255, 255, 0.85); }

.data-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.data-table th, .data-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.data-table th { background-color: var(--gray-50); font-weight: 600; font-size: 0.85rem; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.05em; }
.data-table tr:hover { background-color: var(--gray-50); }

/* Events list: every column but Title is meant to read as one line, same
   size as the header, so a wide row of columns fits without each cell
   fighting for its own line break. Title is the one field with genuinely
   open-ended length (a long musical/play name) and is left to wrap.
   table-layout:fixed + per-column widths, rather than plain nowrap, because
   an occasional multi-school event ("East, Lincoln High, North Star,
   Northeast...") or a long one-off venue name would otherwise balloon that
   column across all 200+ rows and squeeze Title down to nothing -- School
   and Venue truncate with an ellipsis instead (full text still on hover,
   and always visible via Edit). */
#event-table { table-layout: fixed; }
#event-table th, #event-table td { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#event-table td.ev-title { white-space: normal; overflow: visible; text-overflow: clip; }
/* Every column but Title (nth-child(2), left unset so it absorbs whatever
   width is left) is sized to its own content -- for Activity that's the
   column HEADER, not the data: every real activity name in this app is
   short, so "Activity" is the widest thing that column ever has to fit.
   No poster-thumbnail column: most events never have one, so it was
   mostly-empty space taken from every other column on every row. */
#event-table th:nth-child(1), #event-table td:nth-child(1) { width: 9.5rem; }
#event-table th:nth-child(3), #event-table td:nth-child(3) { width: 13.5rem; }
#event-table th:nth-child(4), #event-table td:nth-child(4) { width: 6.5rem; }
#event-table th:nth-child(5), #event-table td:nth-child(5) { width: 13.5rem; }
#event-table th:nth-child(6), #event-table td:nth-child(6) { width: 13rem; }

.form-card { background-color: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 1.75rem; margin-bottom: 2rem; max-width: 640px; }
.form-card h2 { margin-top: 0; }

/* Create/Edit/Duplicate as a modal over the list, not a form the list sits
   below -- the list is the reason anyone opens this page, so it's what's
   there by default; [hidden] (see top of file) collapses the overlay to
   nothing when it's not open, wherever it happens to sit in the DOM. */
.modal-overlay { position: fixed; inset: 0; background-color: rgba(17, 24, 39, 0.55); display: flex; justify-content: center; align-items: flex-start; padding: 3rem 1rem; overflow-y: auto; z-index: 1000; }
.modal-panel { position: relative; width: 100%; max-width: 640px; }
.modal-panel .form-card { margin-bottom: 0; }
.modal-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gray-500); text-decoration: none; font-size: 1.5rem; line-height: 1; z-index: 1; }
.modal-close:hover { background-color: var(--gray-100); color: var(--gray-900); }

.list-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* Simpler list pages (Venues, Departments, Activities, Schools, Users)
   don't need a full search+filter toolbar -- just the section heading and
   a Create button on the same row. */
.list-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.list-header h2 { margin: 0; }

.admin-form { max-width: 600px; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 200px; }
.form-group { margin-bottom: 1.25rem; }
.form-group label, .ac-field-label { display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; color: var(--gray-700); }

.form-group input[type="text"], .form-group input[type="password"], .form-group input[type="number"],
.form-group input[type="url"], .form-group input[type="email"], .form-group input[type="date"],
.form-group input[type="time"],
.form-group select, .form-group textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	border: 1px solid var(--gray-300);
	border-radius: 4px;
	font-family: inherit;
}

.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
	outline: 2px solid var(--lps-blue); outline-offset: 1px; border-color: var(--lps-blue);
}
.form-group .help-text, .help-text { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.25rem; }

.checkbox-line { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; margin-bottom: 0.35rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.25rem 1rem; }

.color-row { display: flex; align-items: center; gap: 0.6rem; }
.color-row input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--gray-300); border-radius: 6px; cursor: pointer; }
.color-row input[type="text"] { width: 9ch; font-family: ui-monospace, Menlo, monospace; }
.color-preview { padding: 0.3rem 0.7rem; border-radius: 4px; font-weight: 600; font-size: 0.78rem; color: #fff; }
.color-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.3rem; vertical-align: middle; }
.code-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--gray-100); font-family: ui-monospace, Menlo, monospace; font-weight: 700; }

.venue-mode-row { display: flex; gap: 1.5rem; margin-bottom: 0.5rem; }
.venue-mode-panel { margin-top: 0.4rem; }

/* Compact, collapsible school picker (~70 schools/programs) */
.school-picker { border: 1px solid var(--gray-300); border-radius: 6px; margin-top: 0.5rem; max-height: 360px; overflow-y: auto; }
.sp-group { border-bottom: 1px solid var(--gray-200); }
.sp-group:last-child { border-bottom: none; }
.sp-group > summary { list-style: none; cursor: pointer; padding: 0.55rem 0.75rem; font-weight: 600; font-size: 0.88rem; color: var(--gray-700); background: var(--gray-50); display: flex; align-items: center; gap: 0.4rem; }
.sp-group > summary::-webkit-details-marker { display: none; }
.sp-group > summary::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(-45deg); flex: none; }
.sp-group[open] > summary::before { transform: rotate(45deg); }
.sp-group-count { font-weight: 400; color: var(--gray-500); }
.sp-group .checkbox-grid { padding: 0.6rem 0.9rem; }
.sp-item { font-weight: 400; }

.poster-thumb { height: 80px; width: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gray-200); display: block; }
.poster-current { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }

.dash-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.dash-group-card { display: block; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--gray-200); border-top: 4px solid var(--lps-blue); border-radius: 8px; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.dash-group-name { display: block; font-weight: 700; color: var(--gray-900); }
.dash-group-count { display: block; font-size: 0.85rem; color: var(--gray-500); margin-top: 0.25rem; }

.log-changes { white-space: pre-wrap; font-size: 0.82rem; background: var(--gray-50); padding: 0.5rem; border-radius: 4px; margin: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; }

.btn { display: inline-block; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; transition: background-color 0.15s; font-family: inherit; }
.btn:focus-visible { outline: 2px solid var(--lps-blue); outline-offset: 2px; }
.btn-primary { background-color: var(--lps-blue); color: white; }
.btn-primary:hover { background-color: #002880; }
.btn-danger { background-color: var(--lps-red); color: white; }
.btn-danger:hover { background-color: #a00d24; }
.btn-secondary { background-color: var(--gray-200); color: var(--gray-700); }
.btn-secondary:hover { background-color: var(--gray-300); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-public { background-color: #cce5ff; color: #004085; }

.alert { padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background-color: #cce5ff; color: #004085; border: 1px solid #b8daff; }

.login-form-plain { max-width: 400px; }

/* A traditional list header: search on one side, filter pills on the
   other, in one row above the table instead of links crammed into the
   page heading. Wraps to its own line under the search box on narrow
   screens rather than squeezing pills unreadably thin. */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.list-toolbar-search { flex: 1 1 240px; max-width: 360px; padding: 0.5rem 0.75rem; font-size: 1rem; border: 1px solid var(--gray-300); border-radius: 4px; font-family: inherit; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-pill { padding: 0.35rem 0.85rem; border-radius: 999px; text-decoration: none; font-size: 0.85rem; color: var(--lps-blue); border: 1px solid var(--gray-200); transition: all 0.15s; }
.filter-pill:hover { background-color: var(--gray-100); }
.filter-pill.active { background-color: var(--lps-blue); color: white; border-color: var(--lps-blue); }

/* ==========================================================================
   Public calendar
   ========================================================================== */

/* The shared header only sets h1 color, leaving the browser's own generous
   default margins -- tighten those here since this stylesheet only loads on
   /artscal pages. */
h1 { margin-top: 0; margin-bottom: 0.35rem; }
.ac-subtitle { color: var(--gray-500); margin: 0 0 1.5rem; max-width: 60ch; }

.ac-page { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

.ac-sidebar { position: sticky; top: 1rem; }
.ac-field { margin-bottom: 1.5rem; }
.ac-field label, .ac-field-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; color: var(--gray-500); }
.ac-field input[type="search"], .ac-field select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.95rem; margin-top: 0.35rem; }

.ac-activity-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ac-act-btn { width: 100%; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 0.92rem; color: var(--gray-700); text-align: left; }
.ac-act-btn:hover { background: var(--gray-100); }
.ac-act-btn.is-active { background: var(--gray-900); color: #fff; font-weight: 600; }
.ac-act-count { color: inherit; opacity: 0.6; font-variant-numeric: tabular-nums; }

.ac-range-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.35rem; }
.ac-range-option { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: var(--gray-700); }

.ac-custom-dates { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0 1.4rem; }
.ac-date-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--gray-700); }
.ac-date-field input { padding: 0.4rem 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; }

.ac-subscribe-btn { display: block; text-align: center; margin-top: 0.5rem; }

.ac-main-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.ac-main-head h2 { margin: 0; }
.ac-count { color: var(--gray-500); font-size: 0.9rem; }

.ac-month-head { font-weight: 700; letter-spacing: 0.05em; color: var(--gray-500); font-size: 0.85rem; text-transform: uppercase; margin: 1.75rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--gray-200); }
.ac-month-head:first-child { margin-top: 0; }

.ac-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.ac-card { display: flex; gap: 0.9rem; background: #fff; border: 1px solid var(--gray-200); border-top: 4px solid var(--gray-300); border-radius: 8px; padding: 0.9rem; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.ac-card:hover, .ac-card:focus-visible { box-shadow: 0 4px 14px rgba(0,0,0,0.09); transform: translateY(-1px); outline: none; }

.ac-card-media { flex: none; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; width: 64px; }
.ac-card-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ac-card-date-mon { font-size: 0.7rem; text-transform: uppercase; color: var(--gray-500); font-weight: 700; }
.ac-card-date-day { font-size: 1.5rem; font-weight: 800; color: var(--gray-900); }
.ac-card-date-dow { font-size: 0.7rem; color: var(--gray-500); }
.ac-card-poster { width: 64px; height: 84px; object-fit: cover; border-radius: 4px; background: var(--gray-100); }

.ac-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ac-card-activity { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ac-card-also { font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--gray-500); }
.ac-card-title { margin: 0.1rem 0; font-size: 1.05rem; line-height: 1.25; color: var(--gray-900); }
.ac-card-schools, .ac-card-time, .ac-card-venue { font-size: 0.85rem; color: var(--gray-500); }

.ac-empty { color: var(--gray-500); padding: 2rem 0; }

/* ---- modal ---- */
.ac-modal { display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.6); z-index: 2000; align-items: center; justify-content: center; padding: 1rem; }
.ac-modal.is-open { display: flex; }
.ac-modal-dialog { background: #fff; border-radius: 10px; padding: 2rem; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.ac-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; border: none; background: var(--gray-100); border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--gray-700); }
.ac-modal-poster { width: 100%; max-height: 320px; object-fit: contain; background: var(--gray-100); border-radius: 6px; margin-bottom: 1rem; }
.ac-modal-activity { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ac-modal-dialog h2 { margin: 0.15rem 0 0.25rem; }
.ac-modal-schools { color: var(--gray-500); margin: 0 0 1rem; }
.ac-modal-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
.ac-modal-facts dt { font-weight: 700; color: var(--gray-700); }
.ac-modal-facts dd { margin: 0; }
.ac-modal-details { white-space: pre-wrap; color: var(--gray-700); }
.ac-modal-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }

@media (max-width: 860px) {
	.ac-page { grid-template-columns: 1fr; }
	.ac-sidebar { position: static; }
}