/* ============================================================
   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; }
}