/* ============================================================
   WCGTC Proposal Portal — global styles
   Layered on Bootstrap 5. Palette drawn from the Ljubljana
   2027 identity family: deep teal + warm gold accents.
   ============================================================ */

:root {
  --wc-blue:      #0065a4;   /* WCGTC primary blue */
  --wc-blue-dark: #004e7c;   /* hover / gradient */
  --wc-blue-deep: #013a5c;   /* topbar / login header */
  --wc-green:     #6aa84f;   /* logo folk-figure green (accent) */
  --wc-ink:       #1f2a2b;
  --wc-paper:     #f4f7fa;
  --wc-line:      #d5e0ea;

  /* Back-compat aliases so existing rules pick up the new palette */
  --wc-teal:      var(--wc-blue);
  --wc-teal-dark: var(--wc-blue-dark);
  --wc-gold:      var(--wc-green);
}

body {
  background: var(--wc-paper);
  color: var(--wc-ink);
}

/* ── Layout shell ────────────────────────────────────────── */
.portal-topbar {
  background: var(--wc-blue-deep);
  color: #fff;
  flex-wrap: nowrap;
}
.portal-topbar .brand-logo {
  height: 30px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 3px 7px;
  margin-right: 10px;
  flex-shrink: 0;
}
.portal-topbar .brand {
  font-weight: 700;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On a phone-width screen there isn't room for logo + full portal name +
   "Sign out" without everything cramming together (the name ellipsizing
   down to a couple of characters, "Sign out" wrapping to two lines). The
   logo already carries the branding, so drop the text name here rather
   than let it fight for space. 480px (not 420px) so this actually covers
   real phones in portrait — confirmed on a real device with a 420px cutoff
   that some current iPhones report a CSS viewport just past 420px, which
   let the truncated brand text and a wrapped "Sign out" back in. */
@media (max-width: 480px) {
  .portal-topbar .brand {
    display: none;
  }
}
.portal-topbar a { color: #e8eeee; text-decoration: none; white-space: nowrap; }
.portal-topbar a:hover { color: var(--wc-gold); }
.portal-topbar .navbar-toggler {
  border-color: rgba(255,255,255,.5);
  padding: .25rem .5rem;
}
.portal-topbar .navbar-toggler-icon {
  width: 1.25em;
  height: 1.25em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.portal-sidebar {
  background: #fff;
  border-right: 1px solid var(--wc-line);
}
@media (min-width: 992px) {
  .portal-sidebar {
    min-height: calc(100vh - 56px);
  }
}
@media (max-width: 991.98px) {
  .portal-sidebar.offcanvas-lg {
    width: 260px !important;
  }
}

/* Flex items default to min-width:auto, so a child wider than its column
   (a long <select> option, an unwrapped table, ...) can force the whole
   row to overflow and wrap the main column below the sidebar instead of
   beside it. Letting it shrink below its content's natural size — and
   scroll internally instead — keeps the sidebar+content layout intact. */
main.col {
  min-width: 0;
}
.portal-sidebar .nav-link {
  color: var(--wc-ink);
  border-radius: .375rem;
  margin: 2px 8px;
}
.portal-sidebar .nav-link.active {
  background: var(--wc-teal);
  color: #fff;
}
.portal-sidebar .nav-link:hover:not(.active) {
  background: #eef3f3;
}
.portal-sidebar .nav-section {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7c8a8b;
  padding: .75rem 1rem .25rem;
}
.sidebar-welcome {
  font-weight: 600;
  color: var(--wc-ink);
  border-bottom: 1px solid var(--wc-line);
}

/* ── Cards / headers ─────────────────────────────────────── */
.card { border-color: var(--wc-line); }
.card-header { background: #fff; border-bottom: 1px solid var(--wc-line); font-weight: 600; }
.btn-primary { background: var(--wc-teal); border-color: var(--wc-teal); }
.btn-primary:hover { background: var(--wc-teal-dark); border-color: var(--wc-teal-dark); }
a { color: var(--wc-teal); }

/* ── Status badges ───────────────────────────────────────── */
.badge-status-draft         { background: #adb5bd; }
.badge-status-submitted     { background: #0d6efd; }
.badge-status-under_review  { background: #e0a800; color: #3d2c05; }
.badge-status-decision_made { background: var(--wc-teal); }
.badge-status-withdrawn     { background: #6c757d; }

/* ── Score color coding (chair dashboard, review lists) ──── */
.score-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  border-radius: .375rem;
  padding: .15rem .5rem;
  display: inline-block;
  min-width: 4.5rem;
  text-align: center;
}
.score-high { background: #d4edda; color: #14532d; }  /* ≥85% */
.score-good { background: #e6f4d9; color: #3f6212; }  /* 70–84% */
.score-mid  { background: #fff3cd; color: #713f12; }  /* 50–69% */
.score-low  { background: #f8d7da; color: #7f1d1d; }  /* <50% */
.score-none { background: #e9ecef; color: #6c757d; }  /* incomplete */
.score-complete { background: #d4edda; color: #14532d; }  /* review done, no scored fields to average */
.score-pending   { background: #f8d7da; color: #7f1d1d; }  /* not yet started */

.divergence-flag {
  color: #b02a37;
  font-weight: 700;
  cursor: help;
}

/* ── Wide tables — scroll shadows ────────────────────────────
   A table wider than its .table-responsive box scrolls, but that's easy
   to miss with no visual cue. Fading edges (visible only while there's
   more content in that direction) signal it without JS — the classic
   "scroll shadows" trick: two gradients scroll with the content (masking
   the shadow once you've reached that edge) and two stay fixed to paint
   the shadow itself. */
.table-responsive {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.25), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.25), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ── Chair dashboard grid ────────────────────────────────── */
.dash-grid { font-size: .9rem; }
.dash-grid th {
  position: sticky;
  top: 0;
  background: var(--wc-teal-dark);
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  padding: .4rem .6rem;
}
.dash-grid td { vertical-align: middle; padding: .35rem .6rem; }
.dash-grid tr:hover td { background: #f0f5f5; }
.dash-grid .title-cell {
  max-width: 340px;
  min-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Same column role as .title-cell, but for narrower-column tables (e.g. My
   Submissions) where wrapping onto a second line reads better than a
   truncated ellipsis. min-width matters on narrow (mobile) viewports: with
   only max-width set, a table wider than the screen would rather shrink
   this column down to whatever fits — wrapping every single word onto its
   own line — than let the table overflow. Forcing a floor means the table
   overflows instead, which .table-responsive turns into a normal
   horizontal scroll (with the scroll-shadow cue above) — far more
   readable than a one-word-per-line column. */
.dash-grid .title-cell-wrap {
  max-width: 420px;
  min-width: 200px;
  white-space: normal;
}
/* Narrower truncated column for secondary/reference text (abstract preview,
   topic lists) — keeps wide tables like Program Topics closer to fitting
   without horizontal scroll on a typical laptop window. Full text is still
   in the title attribute. */
.dash-grid .text-cell-sm {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Reviewer form live tally ────────────────────────────── */
.tally-box {
  position: sticky;
  bottom: 0;
  background: var(--wc-teal-dark);
  color: #fff;
  border-radius: .5rem;
  padding: .6rem 1rem;
  font-weight: 700;
  box-shadow: 0 -2px 8px rgba(0,0,0,.15);
}
.tally-box .tally-value { color: var(--wc-gold); font-size: 1.2rem; }

/* ── Login page ──────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--wc-teal-dark) 0%, var(--wc-teal) 100%);
}
.login-card {
  width: 100%;
  max-width: 420px;
  border: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
}
.login-logo {
  background: #fff;
  text-align: center;
  padding: 1.5rem 1rem .75rem;
}
.login-logo img {
  height: 56px;
  width: auto;
}
.login-card .card-header {
  background: var(--wc-blue-deep);
  color: #fff;
  border-bottom: 3px solid var(--wc-green);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Small screens ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .card-body { padding: 1rem; }
  /* Checkbox/radio groups of topics etc. render as inline chips on desktop;
     on a narrow screen that wraps into a hard-to-scan grid, so stack them
     one per line for readable labels and bigger tap targets. */
  .form-check-inline {
    display: block;
    margin-right: 0;
  }
  .tally-box { font-size: .95rem; }
}

/* ── Mobile bottom tab bar (partials/bottom_nav.php) ────────
   Quick access to the few things attendees reach for constantly during
   the conference itself. Only rendered for signed-in users, and only
   ever visible below the lg breakpoint — the sidebar is the primary nav
   everywhere it fits. */
.portal-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1800;
  display: flex;
  background: var(--wc-blue-deep);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  /* iOS Safari can visually detach a plain position:fixed element during
     momentum/elastic scrolling — it floats at its last on-screen position
     instead of staying pinned to the viewport edge, then snaps back once
     scrolling settles. Promoting this to its own GPU compositing layer is
     the standard fix; harmless everywhere else this renders the same. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px 6px;
  color: #cfe3ee;
  text-decoration: none;
  font-size: .7rem;
  line-height: 1.1;
  text-align: center;
}
.bottom-nav-item .bottom-nav-icon { font-size: 1.25rem; line-height: 1; }
.bottom-nav-item.active { color: #fff; }
.bottom-nav-item.active .bottom-nav-icon { filter: drop-shadow(0 0 4px rgba(255,255,255,0.5)); }

@media (max-width: 991.98px) {
  /* Room for the fixed bar so it never covers the last bit of real content. */
  body.has-bottom-nav { padding-bottom: 58px; }
  /* Both of these set their own `bottom` inline via JS (cookie-consent.js,
     zoom-control.js), which otherwise sit at/near the same bottom:0 the
     tab bar now occupies — shift them up above it instead of colliding.
     !important is required here: a plain stylesheet rule, however
     specific its selector, can never win against an inline style. */
  body.has-bottom-nav #cookie-consent-banner { bottom: 58px !important; }
  body.has-bottom-nav #zoom-control { bottom: 70px !important; }
}

/* ── Stacked table on narrow screens (opt-in via .stack-on-mobile) ──
   Most tables in this app deliberately just horizontal-scroll on mobile
   (see .table-responsive above) rather than reflow — cell content here
   tends to be short labels/badges that read fine in a scrolling row. This
   is the one exception: admin/submission.php's Presenters table has 9
   dense columns (name, org, position, email, phone, status, agreement,
   actions) that overflow the whole page, not just the table, since it
   isn't even wrapped in .table-responsive — a horizontal scroll wouldn't
   help much here since almost every column would still be off-screen.
   Each <td> needs a data-label="Column Name" attribute for this to work. */
@media (max-width: 767.98px) {
  table.stack-on-mobile thead { display: none; }
  table.stack-on-mobile, table.stack-on-mobile tbody, table.stack-on-mobile tr, table.stack-on-mobile td {
    display: block; width: 100%;
  }
  table.stack-on-mobile tr {
    margin-bottom: 1rem; border: 1px solid var(--wc-line); border-radius: .5rem; padding: .5rem .75rem;
  }
  table.stack-on-mobile tr:last-child { margin-bottom: 0; }
  table.stack-on-mobile td {
    border: none; padding: .35rem 0;
  }
  table.stack-on-mobile td:empty { display: none; }
  table.stack-on-mobile td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    font-weight: 600;
  }
}