/* ============================================================
   public.css — Canguru Matemático results area
   Same design tokens as teacher portal (new.css)
   ============================================================ */

:root {
  --cang-orange:       #E8650A;
  --cang-orange-dark:  #c4520a;
  --cang-orange-pale:  #FFF4EC;
  --cang-orange-light: #fde8d4;

  --bg-card:    #ffffff;
  --bg-subtle:  #faf9f7;
  --bg-inset:   #f5f2ef;

  --border:       #e4dbd2;
  --border-light: #ede8e2;

  --text-main:  #1e1710;
  --text-body:  #3a322a;
  --text-muted: #6b6259;
  --text-light: #9b9088;

  --radius-xs:  6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 8px rgba(40,20,0,.08);
  --shadow-md: 0 6px 20px rgba(40,20,0,.10);

  --ease: 0.17s ease;
}

/* ── Reset old style.css header rules ──────────────────────── */
/* style.css defines #header, .logo.fixed-top, .main-nav etc.
   Override them so pub-nav can render cleanly */
#header                        { background: none !important; padding: 0 !important;
                                  position: static !important; height: auto !important; }
#header .logo,
#header .logo.fixed-top        { position: static !important; background: none !important;
                                  height: auto !important; padding: 0 !important; }
#header .main-nav              { display: none !important; }
#topbar                        { display: none !important; }
body                           { padding-top: 0 !important; }


/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;     /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;      /* Firefox on macOS */
}
h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', 'Open Sans', sans-serif; font-weight: 700; }
::selection { background: rgba(232,101,10,.18); }

/* ── Public navbar ──────────────────────────────────────────── */
.pub-nav {
  background: #fff;
  border-bottom: 3px solid var(--cang-orange);
  box-shadow: 0 2px 8px rgba(40,20,0,.06);
  padding: 0.55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pub-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-main);
  text-decoration: none;
}
.pub-nav-brand img { height: 30px; border-radius: 7px; }
.pub-nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.pub-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-subtle);
  transition: all var(--ease);
}
.pub-nav-link:hover, .pub-nav-link.active {
  border-color: var(--cang-orange);
  color: var(--cang-orange);
  background: var(--cang-orange-pale);
  text-decoration: none;
}
.pub-nav-dropdown { position: relative; }

/* Trigger chevron rotates when open */
.pub-nav-chevron {
  font-size: 0.55rem;
  margin-left: 1px;
  transition: transform 0.18s ease;
}
.pub-nav-dropdown.is-open .pub-nav-chevron { transform: rotate(180deg); }
.pub-nav-dropdown.is-open > .pub-nav-link  {
  border-color: var(--cang-orange);
  color: var(--cang-orange);
  background: var(--cang-orange-pale);
}

/* Menu — hidden by default, animated in */
.pub-nav-dropdown-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  width: 360px;
  z-index: 1000;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.pub-nav-dropdown.is-open .pub-nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

/* Category card */
.pub-nav-dropdown-menu a.cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-subtle);
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.pub-nav-dropdown-menu a.cat-card:hover {
  background: var(--cang-orange-pale);
  border-color: var(--cang-orange-light);
  transform: translateY(-1px);
}
.pub-nav-dropdown-menu a.cat-card .cat-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}
.pub-nav-dropdown-menu a.cat-card:hover .cat-name { color: var(--cang-orange); }
.pub-nav-dropdown-menu a.cat-card .cat-year {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1;
}

/* ── Category nav pills (used on listing pages) ─────────────── */
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.cat-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-card);
  transition: all var(--ease);
}
.cat-nav a:hover, .cat-nav a.active {
  background: var(--cang-orange);
  border-color: var(--cang-orange);
  color: #fff;
}

/* ── Category listing cards (index.php) ─────────────────────── */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.listing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(40,20,0,.05);
  transition: box-shadow var(--ease), transform var(--ease);
}
.listing-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.listing-card a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text-body);
  font-weight: 600;
  font-size: 0.875rem;
}
.listing-card a:hover { color: var(--cang-orange); }
.listing-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--cang-orange-pale);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--cang-orange);
  font-size: 1rem;
}
.listing-card-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.filter-group label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  margin: 0;
}
.filter-select {
  font-size: 0.82rem;
  padding: 0.3rem 1.8rem 0.3rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6259'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 8px;
  color: var(--text-body);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
  max-width: 200px;
}
.filter-select:focus { border-color: var(--cang-orange); box-shadow: 0 0 0 3px rgba(232,101,10,.12); }
.filter-select:hover { border-color: var(--cang-orange-dark); }
.btn-filter-clear {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
}
.btn-filter-clear:hover { border-color: var(--cang-orange); color: var(--cang-orange); }
.filter-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.filter-count strong { color: var(--cang-orange); font-weight: 700; }

/* ── Results table ──────────────────────────────────────────── */
.results-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.results-table {
  font-size: 0.875rem;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}
.results-table thead th {
  background: var(--cang-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.8rem;
  border: none;
  white-space: nowrap;
}
.results-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s ease;
}
.results-table tbody tr:hover           { background: var(--cang-orange-pale) !important; }
.results-table td {
  padding: 0.45rem 0.8rem;
  vertical-align: middle;
  border: none;
}

/* Prize rows — same colours as .prize-tier.tier-1 / tier-2 cards */
.results-table tr.row-prize-1 { background: #edfaed; }   /* green  */
.results-table tr.row-prize-2 { background: #edf4fa; }   /* blue   */
.results-table tr.row-prize-1:hover,
.results-table tr.row-prize-2:hover { background: var(--cang-orange-pale) !important; }
/* Left border accent mirrors the prize-tier card border */
.results-table tr.row-prize-1 > td:first-child { border-left: 3px solid #6abf7b; }
.results-table tr.row-prize-2 > td:first-child { border-left: 3px solid #6aaabf; }

/* Left accent on top-3 */
.results-table tr.rank-top1 > td:first-child { border-left: 3px solid #F5C518; }
.results-table tr.rank-top2 > td:first-child { border-left: 3px solid #ADADAD; }
.results-table tr.rank-top3 > td:first-child { border-left: 3px solid #B87333; }

/* Rank medal badge */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 0.74rem; font-weight: 700; line-height: 1;
}
.rank-badge.gold   { background: #FFF3B0; color: #7a5500; border: 1.5px solid #F5C518; }
.rank-badge.silver { background: #F0F0F0; color: #4a4a4a; border: 1.5px solid #ADADAD; }
.rank-badge.bronze { background: #FAE8D4; color: #6b3010; border: 1.5px solid #B87333; }
.rank-badge.other  { background: var(--bg-inset); color: var(--text-muted); border: 1.5px solid var(--border); }

/* Prize badge */
.prize-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.69rem; font-weight: 600;
  background: var(--cang-orange);
  color: #fff;
  white-space: normal; line-height: 1.35;
}

/* Column widths */
.col-rank  { width: 3%; }
.col-ano   { width: 4%; }
.col-nome  { width: 18%; }
.col-class { width: 7%; }
.col-escola{ width: 27%; font-size: 0.82rem; color: var(--text-muted); }
.col-dist  { width: 16%; }
.col-conc  { width: 14%; }
.col-premio{ width: 11%; }

/* Mobile */
@media (max-width: 540px) {
  .col-escola { display: none; }
  .filter-select { max-width: 140px; }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn { border-radius: 20px !important; font-weight: 600; font-size: 0.84rem; transition: all var(--ease); }
.btn-orange, .btn-primary {
  background: linear-gradient(135deg, var(--cang-orange) 0%, #f58340 100%) !important;
  border-color: var(--cang-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(232,101,10,.28);
}
.btn-orange:hover, .btn-primary:hover {
  background: linear-gradient(135deg, var(--cang-orange-dark) 0%, var(--cang-orange) 100%) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── Footer ─────────────────────────────────────────────────── */
.pub-footer {
  background: #fff;
  border-top: 1px solid var(--border-light);
  padding: 1.25rem 0 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2rem;
}
.pub-footer a { color: var(--cang-orange); font-weight: 600; text-decoration: none; }
.pub-footer a:hover { text-decoration: underline; }
.pub-footer img { height: 26px; margin-top: 8px; border-radius: 4px; opacity: 0.82; }

/* ── Section titles ─────────────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.5rem 0 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--cang-orange-light);
  border-radius: 2px;
}

/* ── Prize section (infopremios.php) ────────────────────────── */
.prize-section {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--cang-orange);
  border-radius: var(--radius-sm);
}
.prize-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  color: var(--cang-orange);
  font-size: 0.95rem;
}
.prize-section-head i { font-size: 0.9rem; }
.prize-dispatch {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.25rem;
}
.prize-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.prize-tier {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  flex-wrap: wrap;
}
.prize-tier.tier-1 { background: #edfaed; border: 1px solid #b8e0c0; }
.prize-tier.tier-2 { background: #edf4fa; border: 1px solid #b0d0e8; }
.prize-tier.tier-3 { background: #fef9e7; border: 1px solid #f0d890; }
.prize-tier.tier-4 { background: #f5f0fb; border: 1px solid #c8b8e8; }
.tier-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 160px;
}
.tier-range {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tier-name {
  font-size: 0.85rem;
  color: var(--text-main);
  font-weight: 700;
}
.tier-images {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.tier-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}
.tier-img-wrap img {
  height: 64px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  transition: transform var(--ease);
}
.tier-img-wrap:hover img { transform: scale(1.06); }
.tier-img-wrap span {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 90px;
  line-height: 1.2;
}
.prize-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.legend-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1.5px solid;
  flex-shrink: 0;
}

/* ── Escola / Agrupamento result table (listar.php, listarag.php) ─────── */
.escola-table tbody { background: #ede8e2; }
.escola-table tbody tr { border-bottom: 2px solid var(--border); }
.escola-table tbody tr:hover { background: var(--cang-orange-pale) !important; }
.escola-table td { vertical-align: middle; padding: 0.5rem 0.75rem; }
.escola-table td:first-child { width: 200px; min-width: 180px; }
.escola-table .form-control-sm {
  border-radius: 20px;
  border: 1.5px solid var(--border);
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
}
.escola-table .form-control-sm:focus { border-color: var(--cang-orange); outline: none; box-shadow: 0 0 0 3px rgba(232,101,10,.12); }
.escola-table .btn-sm { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 20px !important; font-weight: 600; }
.escola-table .btn-success  { background: #198754 !important; border-color: #198754 !important; }
.escola-table .btn-warning  { background: #ffc107 !important; border-color: #ffc107 !important; color: #000 !important; }
.escola-table .btn-danger   { background: #dc3545 !important; border-color: #dc3545 !important; }
/* Participants toggle table */
#otherpart { width: 100%; font-size: 0.85rem; }
#otherpart td { padding: 0.35rem 0.75rem; vertical-align: middle; border-bottom: 1px solid var(--border-light); }

/* ── Deprecated overrides ───────────────────────────────────── */
font { font-family: inherit !important; }  /* neutralise <font> tags */

/* ── Flex gap fallback — Safari ≤ 14.0 (pre-April 2021) ────────
   CSS gap on flex containers requires Safari 14.1+ / Chrome 84+.
   Older browsers silently ignore gap, so we add margin as a base
   fallback. In gap-capable browsers we zero those margins out via
   @supports (gap: revert) — "gap: revert" is only parsed by
   browsers that fully support the gap property in flex contexts,
   so the reset never fires in Safari ≤ 14.0.
   ──────────────────────────────────────────────────────────── */

/* Fallback margins (active when gap is NOT supported in flex) */
.pub-nav > * + *        { margin-left: 1rem; }
.pub-nav-brand > * + *  { margin-left: 0.65rem; }
.pub-nav-links > * + *  { margin-left: 0.35rem; }
.pub-nav-link > * + *   { margin-left: 0.3rem; }
.cat-nav > * + *        { margin-bottom: 0.4rem; margin-right: 0.4rem; }
.filter-bar > * + *     { margin-left: 0.6rem; }
.filter-group > * + *   { margin-left: 0.4rem; }
.section-title > * + *  { margin-left: 0.65rem; }

/* Reset fallback margins where flex gap is properly supported */
@supports (gap: revert) {
  .pub-nav > * + *,
  .pub-nav-brand > * + *,
  .pub-nav-links > * + *,
  .pub-nav-link > * + *,
  .cat-nav > * + *,
  .filter-bar > * + *,
  .filter-group > * + *,
  .section-title > * + * {
    margin: 0;
  }
}