/* CME@SEA palette (same values as cwaNCME / cme.cumuluspower.ca) on the JPOD title-bar shell. */
:root {
  --surface-1: #ffffff;
  --page: #faf6ee;
  --text-primary: #23343f;
  --text-secondary: #4a5a66;
  --text-muted: #6b7782;
  --border: rgba(0, 70, 119, 0.16);
  --gridline: #e6dfd0;
  --brand: #004677;
  --brand-dark: #002952;
  --cme-gold: #a26f1d;
  --cme-gold-btn: #9b7045;
  --cme-yellow: #f2b34e;
  --cme-yellow-light: #fbd79d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Maven Pro', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  line-height: 1.5;
}

header.site {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--brand-dark);
  color: #fff;
  padding: 14px 20px;
  min-height: 36px;
}

header.site .brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
header.site .brand-logo { height: 44px; width: 44px; border-radius: 50%; flex-shrink: 0; }
header.site h1 { margin: 0; font-size: 1.5rem; }
header.site p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }

/* ── Standard title-bar icon buttons (Home / Back / Settings / Profile) ──────
   Matches cwaJPODdash — reuse this exact icon set/markup everywhere instead
   of inventing new button styles per app. */
.title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

.title-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.icon-btn:hover { background: rgba(0, 0, 0, 0.35); }
.icon-btn svg { width: 18px; height: 18px; fill: #ffffff; }

/* Profile icon turns green once signed in - a visible confirmation the PIN
   was accepted, distinct from the neutral dark circle every other icon uses. */
.icon-btn.signed-in { background: #2f9e52; }
.icon-btn.signed-in:hover { background: #29873f; }

.dropdown-menu-custom {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  padding: 0.4rem;
  z-index: 30;
}

.dropdown-menu-custom.show { display: block; }

.dropdown-menu-custom .label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.4rem 0.7rem 0.2rem;
}

.dropdown-menu-custom .item {
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.87rem;
  cursor: pointer;
}

.dropdown-menu-custom .item:hover { background: var(--page); }

.dropdown-menu-custom a.item {
  display: block;
  text-decoration: none;
  color: inherit;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.breadcrumb a { color: var(--brand-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.site-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: -2px 0 18px;
}

/* ── Phone + PIN sign-in modal ───────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.open { display: flex; }

.modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.modal-header {
  background: var(--brand-dark);
  color: #fff;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover { opacity: 0.7; }
.modal-body { padding: 18px 20px 20px; }

.form-field { margin-bottom: 14px; }
.form-field:last-of-type { margin-bottom: 0; }

.form-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.text-input {
  width: 100%;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.text-input:focus { outline: none; border-color: var(--brand); }

.btn {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--brand-dark);
  color: #fff;
  margin-top: 16px;
}

.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -2px;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0;
}

.btn-secondary:hover { background: var(--page); }

.form-error { margin-top: 10px; font-size: 0.78rem; color: #e5484d; }
.form-error:empty { display: none; }

/* ── New-IP verification info block (auth.js) ───────────────────────────── */
.verify-info { margin-bottom: 14px; font-size: 0.82rem; }
.verify-info__row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.verify-info__row:last-child { border-bottom: none; }
.verify-info__row span { color: var(--text-muted); }
.verify-info__row b { text-align: right; font-weight: 700; }

/* ── Users table ─────────────────────────────────────────────────────── */
.toolbar-actions {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* flex-end (a prior attempt) aligns box EDGES, which is thrown off by the button's own padding
   and the differing font-size/line-height between the button label and this text - the two boxes
   are different heights for reasons that have nothing to do with where the text itself sits.
   baseline (above) aligns the actual text baselines directly, which is what "make this line up
   with the button label" really means; .site-count's own -2px/18px margin (meant for its usual
   job as a standalone subtitle under a heading) is zeroed out here since it's not relevant to
   baseline alignment either and only adds unwanted vertical drift. */
.toolbar-actions .site-count {
  margin: 0;
}

/* ── Recording summary tiles (month / YTD) ───────────────────────────────── */
.summary-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.summary-tile {
  flex: 1 1 220px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

.summary-tile__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.summary-tile__counts {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-tile__counts .n { color: var(--brand); }

.summary-tile__asof {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── Action tiles (links to full-page sections) ──────────────────────────── */
.action-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.action-tile {
  flex: 1 1 220px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  text-decoration: none;
  color: var(--text-primary);
  display: block;
  transition: border-color 0.15s, background 0.15s;
}

.action-tile:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}

.action-tile__label {
  font-size: 0.95rem;
  font-weight: 700;
}

.action-tile__desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── Date-step (±1 day) buttons next to a date input ─────────────────────── */
.date-nav-btn {
  padding: 8px 12px;
  font-size: 0.9rem;
}

/* ── Archive filter panel ─────────────────────────────────────────────────── */
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

.filter-panel .form-field { flex: 1 1 180px; min-width: 160px; }

.filter-panel__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.data-table th, .data-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}

.data-table th {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 800;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--page); }

.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text-primary); }
.data-table th.sortable .sort-arrow { margin-left: 0.3em; display: inline-block; width: 0.7em; }
.data-table th.sortable.sort-active { color: var(--text-primary); }

.empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Pager (datatables.net-style: info + first/prev/page-numbers/next/last + page size) ──── */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.pager__controls { display: flex; align-items: center; gap: 4px; }

.pager__nav, .pager__page {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 30px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.pager__nav:hover, .pager__page:hover { background: var(--page); }
.pager__nav:disabled { opacity: 0.35; cursor: default; }
.pager__nav:disabled:hover { background: transparent; }

.pager__page.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.pager__pages { display: flex; align-items: center; gap: 4px; }
.pager__ellipsis { padding: 0 4px; color: var(--text-muted); }

.pager__size { display: flex; align-items: center; gap: 6px; }
.pager__size select { width: auto; padding: 5px 8px; }

.row-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.row-action:hover { background: var(--page); }

/* ── Archive table links — default browser link-blue reads poorly on the dark
   surface here, so use the same teal accent as the log-list "ok" state instead. ── */
.archive-link, .archive-files-toggle {
  color: #5eead4;
  text-decoration: none;
}
.archive-link:visited, .archive-files-toggle:visited { color: #5eead4; }
.archive-link:hover, .archive-files-toggle:hover { text-decoration: underline; }

/* ── Oldest-month download/verify progress log ──────────────────────────────── */
.log-list {
  margin-top: 14px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  padding: 8px 12px;
}

.log-line {
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--gridline);
}

.log-line:last-child { border-bottom: none; }
.log-line.ok      { color: #2f9e52; }
.log-line.warn    { color: #d9a441; }
.log-line.fail    { color: #e5484d; }
.log-line.pending { color: var(--text-muted); }

/* ── CME@SEA look + speaker decks (cwaJPODrop) ──────────────────────────── */
header.site { border-bottom: 3px solid var(--cme-gold); }
header.site .brand-logo.cme-logo { width: auto; height: 40px; border-radius: 0; }
header.site h1 { font-weight: 600; color: var(--cme-yellow-light); }
[hidden] { display: none !important; }
.admin-only { display: none !important; }
body.is-admin .admin-only { display: block !important; }
body.is-admin button.admin-only { display: inline-block !important; }

main { max-width: 1180px; }
.crumbs { font-size: 0.9rem; margin-bottom: 6px; min-height: 1.2em; color: var(--text-muted); }
.crumbs a { color: var(--brand); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 4px; }

.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.view-head h2 { margin: 0; color: var(--brand); font-size: 1.45rem; }
.view-head .btn { margin-top: 0; }
.btn-gold { background: var(--cme-gold-btn); }
.btn-gold:hover { background: #7f5c38; filter: none; }
.btn:disabled { opacity: 0.45; cursor: default; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 41, 82, 0.08); transition: transform .12s, box-shadow .12s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 41, 82, 0.18); border-color: var(--cme-gold); }
/* Every tile the same 16:9 box whatever the deck's shape (Leyland's are 4:3): the image is taken out
   of the flow so it can't stretch the box, and shown whole - a 4:3 slide gets side bars, not a crop. */
.card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-dark); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity .2s; }
.card-img img.loaded { opacity: 1; }
.card-num {
  position: absolute; top: 8px; left: 8px; background: var(--brand-dark); color: var(--cme-yellow-light);
  font-weight: 700; font-size: 0.78rem; padding: 2px 8px; border-radius: 10px;
}
.card-body { padding: 10px 12px 12px; border-top: 3px solid var(--cme-gold); }
.card-title { font-weight: 600; color: var(--brand-dark); line-height: 1.3; }
.card-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.downloads { list-style: none; padding: 0; margin: 0; columns: 2 320px; }
.downloads li { padding: 4px 0; break-inside: avoid; }
.downloads a { color: var(--brand); font-weight: 600; text-decoration: none; }
.downloads a:hover { text-decoration: underline; }
.downloads .muted { color: var(--text-muted); font-size: 0.8rem; }

.slide-frame {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: min(calc(100vh - 260px), calc((100vw - 40px) * 9 / 16), 664px); min-height: 180px;
  box-shadow: 0 4px 16px rgba(0, 41, 82, 0.12);
}
.slide-frame img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.slide-frame.loading img { opacity: 0.4; }
.slide-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.slide-nav .btn { margin-top: 0; min-width: 110px; }
.slide-count { color: var(--text-secondary); font-weight: 600; min-width: 120px; text-align: center; }
.slide-frame canvas { display: block; }

/* Deck cards: the picture + title link to the viewer; the Download button sits below, outside it. */
.card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.card-foot { padding: 0 12px 10px; display: flex; justify-content: flex-end; }
.btn-link {
  background: none; border: 1px solid var(--cme-gold-btn); color: var(--cme-gold-btn); font-weight: 600;
  font-size: 0.78rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit;
}
.btn-link:hover { background: var(--cme-gold-btn); color: #fff; }
.btn-link:disabled { opacity: 0.6; cursor: default; }