/* =============================================================================
   main.css – SET Tool
   =============================================================================

   Use inline CSS ONLY for:
   - Values computed at runtime by JavaScript (e.g. setStatus() colors)

   Use the CSS file for:
   - All reusable components and utilities
   - Pseudo-classes (:hover, :focus) — cannot be defined inline
   - Animations (@keyframes)
   - Media Queries
   - Conditional classes instead of {% if %}style="..."{% endif %}

   JS placement:
   - External .js file when the script is shared across multiple pages
   - Inline <script> at the end of the template for page-specific, non-reusable JS

   App-scoped CSS:
   - A large, single-feature block used by only one app's templates can live
     in that app's own static/ dir instead, loaded via {% block extra_head %}
     — see rally/static/rally/css/description_editor.css.

   Structure:
   1.  Reset & CSS Variables
   2.  Base / Body
   3.  Navigation
   4.  Layout & Footer
   5.  Buttons
   6.  Cards
   7.  Badges & Status
   8.  Forms
   9.  Table
   10. Messages & Errors
   11. Empty State
   12. Dashboard
   13. Detail Page
   14. Score Entry
   15. Scoreboard
   16. Login
   17. Utilities
   18. Home
   19. Map
   20. Animations
   21. Media Queries
   ============================================================================= */


/* 1. Reset & CSS Variables
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #ffffff;
  --surface:  #f9fafb;
  --border:   #e5e7eb;
  --muted:    #9ca3af;
  --subtle:   #6b7280;
  --text:     #111827;
  --accent:   #2563eb;
  --accent2:  #1d4ed8;
  --green:    #16a34a;
  --red:      #dc2626;
  --amber:    #d97706;
  --radius:   8px;
  --sans:     system-ui, sans-serif;
}


/* 2. Base / Body
   ============================================================================= */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  /* Column layout lets .container grow so the footer sits at the bottom of short pages */
  display: flex;
  flex-direction: column;
}


/* 3. Navigation
   ============================================================================= */

nav {
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 52px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}

.nav-logo {
  height: 50px;
  width: auto;
  display: block;
}

.nav-brand {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-links { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }

.nav-links a {
  color: var(--subtle);
  text-decoration: none;
  font-size: 13px;
  transition: color .15s;
}

.nav-links a:hover { color: var(--text); }


/* 4. Layout & Footer
   ============================================================================= */

.container { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 2.5rem 2rem; }

/* Opt-in for pages whose content should fill the remaining viewport height (e.g. login, home) */
.container-fill { display: flex; flex-direction: column; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 12px;
}

.site-footer a { color: var(--muted); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--text); }

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.page-title span { color: var(--accent); }

/* Context label above page-title (e.g. Rally name as breadcrumb) */
.page-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: .25rem;
}

/* Row group for buttons in page-header */
.btn-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}


/* 5. Buttons
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }

.btn-ghost {
  background: transparent;
  color: var(--subtle);
  border-color: var(--border);
}

.btn-ghost:hover { color: var(--text); border-color: #9ca3af; background: var(--surface); }

/* Positive, non-default confirming action (e.g. Approve) — distinct from
   btn-primary so it doesn't compete with the page's main action */
.btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-success:hover { background: #15803d; border-color: #15803d; }

/* Negative counterpart to btn-success (e.g. Reject) — same solid weight,
   opposite verdict. Deliberately distinct from the outlined btn-danger
   below, which is for a different, more severe action (permanent removal). */
.btn-reject {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-reject:hover { background: #b91c1c; border-color: #b91c1c; }

/* Neutral verdict between btn-success and btn-reject (e.g. Reviewed) */
.btn-review {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
.btn-review:hover { background: #b45309; border-color: #b45309; }

/* Joins adjacent buttons into one segmented control (e.g. review verdicts) */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* Destructive action (e.g. Remove/Delete) — never the same weight as a
   neutral navigation button like "Back" */
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: #fecaca;
}
.btn-danger:hover { background: #fef2f2; border-color: var(--red); }

.btn-sm { padding: 4px 10px; font-size: 12px; }


/* 6. Cards
   ============================================================================= */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}


.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-link:hover .rally-name,
.card-link:hover .station-name {
  text-decoration: underline;
}

/* Flex header of a card (badge + title left, button right) */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}

/* Metadata row (number of stations, groups, etc.) */
.card-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--subtle);
  font-size: 12px;
}

/* Reduced padding for empty state inside a card */
.card-empty-sm { padding: 2rem 1rem; }

/* Card with bottom margin (for lists of cards) */
.card-mb { margin-bottom: .75rem; }

/* Station card: name + status header, location/contact meta */
.station-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Location + contact together, so contact isn't left dangling on its own */
.station-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.station-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.meta-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-map-pin {
  -webkit-mask-image: url("../rally/icons/map-pin.svg");
  mask-image: url("../rally/icons/map-pin.svg");
}

.icon-user {
  -webkit-mask-image: url("../rally/icons/user.svg");
  mask-image: url("../rally/icons/user.svg");
}


/* 7. Badges & Status
   ============================================================================= */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
  margin-bottom: .5rem;
}

/* Semantic badge intents — shared by every status/type field via the
   status_intent/type_intent template filters (rally_extras.py), instead of
   one dedicated class per model value. */
.badge-neutral { background: #f3f4f6; color: #4b5563; }
.badge-warning { background: #fffbeb; color: #92400e; }
.badge-success { background: #f0fdf4; color: #15803d; }
.badge-danger  { background: #fef2f2; color: #b91c1c; }
.badge-info    { background: #eff6ff; color: #1d4ed8; }
.badge-muted   { background: #f3f4f6; color: #1f2937; }


/* 8. Forms
   ============================================================================= */

.form-grid { display: grid; gap: 1.25rem; }

.form-group { display: flex; flex-direction: column; gap: 5px; }

/* Without this, a badge inside a flex-column .form-group stretches to the
   full row width instead of staying a compact pill. */
.form-group .badge { align-self: flex-start; }

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--subtle);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 12px;
  transition: border-color .15s;
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.form-group select { appearance: none; cursor: pointer; }
.form-group textarea { resize: vertical; }

.form-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.form-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.form-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.5rem; }

/* Maximum widths for form containers */
.form-narrow  { max-width: 420px; margin: 0 auto; }
.form-medium  { max-width: 520px; margin: 0 auto; }
.form-wide    { max-width: 960px; margin: 0 auto; }

/* Checkbox row: label and input side by side */
.form-group-inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Small hint text below a field */
.hint { font-size: 12px; color: var(--muted); }

/* Django's default field.html renders Field(help_text=...) as this class */
.helptext { font-size: 12px; color: var(--muted); }

/* Info box (tip, hint) below a card */
.hint-box {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

/* "or" divider between two form options */
.divider-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--muted);
  font-size: 12px;
}

.divider-or-line { flex: 1; height: 1px; background: var(--border); }

/* Two-column layout inside a form */
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Narrow input (e.g. points field) */
.input-narrow { width: 140px !important; }


/* 9. Table
   ============================================================================= */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #f9fafb; }

.th-left { text-align: left; }
.th-center { text-align: center; }
.th-right  { text-align: right; }
.th-rank   { width: 48px; }

.td-muted  { color: var(--muted); }
.td-right  { text-align: right; }
.td-points { text-align: right; font-weight: 500; }


/* 10. Messages & Errors
   ============================================================================= */

.divider { height: 1px; background: var(--border); margin: 2rem 0; }

.messages { list-style: none; margin-bottom: 1.5rem; }
.messages li {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: .5rem;
}

.messages .success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.messages .warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.messages .error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.errorlist { list-style: none; }
.errorlist li { color: var(--red); font-size: 12px; margin-top: 4px; }
/* Django gives whole-form errors ("non_field_errors") the extra "nonfield"
   class automatically, so it doubles as our hook for the top margin. */
.errorlist.nonfield { margin-top: .75rem; }

.form-warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 1rem;
}


/* 11. Empty State
   ============================================================================= */

.empty       { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-icon  { font-size: 32px; margin-bottom: 1rem; }
.empty p     { margin-bottom: 1rem; }
.empty .btn  { margin-top: .75rem; }
.empty-locked { margin-top: 4rem; }
.empty-title  { font-size: 16px; font-weight: 500; margin-bottom: .5rem; color: var(--text); }


/* 12. Dashboard
   ============================================================================= */

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

/* Rally name in the dashboard card */
.rally-name {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -.02em;
}


/* 13. Detail Page
   ============================================================================= */

/* Section header (title + button) */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Section title (small, uppercase) */
.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Collapsible group of cards, e.g. rallies by status on the dashboard */
.dashboard-section { margin-bottom: 2rem; }
.dashboard-section > summary { cursor: pointer; margin-bottom: 1rem; }

/* Small select next to a section's action buttons (e.g. a sort control) */
.sort-select {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.station-label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }

/* Field heading that sits on a full-width rule, e.g. Description /
   Requirements — distinguishes itself from the markdown body below by
   structure (a line), not by size or color, so it still reads in B/W print */
.field-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: .75rem;
}
.field-heading::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--text);
}


/* 14. Score Entry
   ============================================================================= */

.score-input { width: 64px; text-align: center; padding: 5px 8px !important; }

/* Wrapper for the dropdown (needs position:relative as anchor) */
.group-search-wrap { position: relative; }

/* Autocomplete dropdown */
.group-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 50;
  overflow-y: auto;
  max-height: 220px;
}

.dropdown-item {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dropdown-item:hover { background: var(--border); }

.dropdown-item-num { color: var(--muted); font-size: 12px; min-width: 20px; }

.dropdown-empty { padding: 10px 14px; font-size: 13px; color: var(--muted); }

.dropdown-item-create { border-top: 1px solid var(--border); color: var(--accent); }
.dropdown-item-create .dropdown-item-num { color: var(--accent); font-weight: 600; }

/* Selected group as chip */
.group-chip {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: var(--accent);
  align-items: center;
  gap: 8px;
}

.group-chip-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* Input with icon button inside (e.g. group search + refresh) */
.input-icon-wrap { position: relative; }

.input-icon-wrap input { padding-right: 2rem; }

/* Refresh button inside the search input */
.refresh-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  line-height: 1;
  transition: color .15s, opacity .15s;
}

.refresh-btn:hover { color: var(--text); }
.refresh-btn:disabled { opacity: .4; cursor: default; }
.refresh-btn.spinning { animation: spin .6s linear infinite; }

/* Save row */
.save-row { display: flex; align-items: center; gap: 1rem; }

/* Inline field validation errors — hidden by default, shown via JS
   (showFieldError/clearFieldError in score_entry.html) same as
   .group-dropdown/.group-chip above. */
.field-error { display: none; font-size: 12px; color: var(--red); margin-top: 4px; }

/* Status message (fade in/out via JS) */
.save-status { font-size: 13px; opacity: 0; transition: opacity .3s; }

/* Log heading */
.log-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .75rem;
}

.log-list { display: flex; flex-direction: column; gap: .5rem; }

.log-empty { font-size: 13px; color: var(--muted); }

/* Individual log entry (created by JS) */
.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  animation: fadeIn .2s ease;
}

.log-item-group  { color: var(--accent); font-weight: 500; }
.log-item-sep    { color: var(--muted); margin: 0 6px; }
.log-item-right  { display: flex; gap: 12px; align-items: center; }
.log-item-points { font-weight: 500; }
.log-item-time   { color: var(--muted); font-size: 11px; }


/* 15. Scoreboard
   ============================================================================= */

/* Podium container */
.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

/* Positions: 1st center, 2nd left, 3rd right */
.podium-1st { order: 2; text-align: center; }
.podium-2nd { order: 1; text-align: center; }
.podium-3rd { order: 3; text-align: center; }

.podium-emoji-1st { font-size: 28px; margin-bottom: .25rem; }
.podium-emoji     { font-size: 24px; margin-bottom: .25rem; }

/* Podium card */
.podium-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.podium-card-1st { padding: 1.25rem 1.5rem; min-width: 140px; }
.podium-card-sm  { padding: 1rem 1.25rem;   min-width: 120px; }

.podium-score { font-weight: 700; margin-bottom: .25rem; }
.podium-score-1st { font-size: 22px; color: #b45309; }
.podium-score-2nd { font-size: 18px; color: #4b5563; }
.podium-score-3rd { font-size: 18px; color: #92400e; }

.podium-name  { font-size: 13px; font-weight: 600; }

/* Table styling for scoreboard */
.row-leader { background: #fffbeb; }

.rank-1-num   { color: #b45309; font-weight: 700; }
.rank-2-num   { color: #6b7280; font-weight: 700; }
.rank-3-num   { color: #92400e; font-weight: 700; }
.rank-other   { color: var(--muted); }

.group-cell { white-space: nowrap; overflow: hidden; padding-right: 4px; }
.group-cell-name {
  display: inline-block;
  max-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-weight: 500;
}

/* Rank/Group/Total stay pinned while the station columns scroll horizontally */
.sticky-col {
  position: sticky;
  z-index: 1;
  background: var(--bg);
}
th.sticky-col { background: var(--surface); }
tr.row-leader .sticky-col { background: #fffbeb; }
tr:hover td.sticky-col { background: #f9fafb; }

.sticky-rank  { left: 0; width: 48px; min-width: 48px; max-width: 48px; }
.sticky-group { left: 48px; width: 160px; min-width: 160px; max-width: 160px; }
.sticky-total {
  left: 208px;
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, .12);
}

/* Station score cell */
.cell-center { text-align: center; }
.cell-empty  { text-align: center; color: var(--border); }
.cell-muted  { text-align: center; color: var(--muted); }

/* Total column */
.total-cell     { text-align: center; font-weight: 600; font-size: 15px; }
.total-cell-1st { color: #b45309; }


/* 16. Login
   ============================================================================= */

.login-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-card  { width: 100%; max-width: 380px; }
.login-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.login-option       { display: flex; flex-direction: column; gap: .5rem; }
.login-option-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.btn-full   { width: 100%; justify-content: center; }
.link-back  { font-size: 13px; color: var(--subtle); text-decoration: none; margin-top: 1.25rem; }


/* 17. Utilities
   ============================================================================= */

.mt-sm { margin-top: .75rem; }

/* Lets a <form> wrap a single button without affecting its parent's layout
   (e.g. a flex nav-links row) — the form itself renders no box. */
.display-contents { display: contents; }


/* 18. Home
   ============================================================================= */

.home-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-logo { height: 160px; width: auto; }


/* 19. Map
   ============================================================================= */

.map-canvas { height: 520px; border-radius: var(--radius); border: 1px solid var(--border); }

#rally-map { margin-bottom: 1.5rem; }

.map-field .hint { margin-bottom: .5rem; }

/* Map marker element (created via JS); background color is set inline since
   it's computed at runtime from the station's marker_color. */
.map-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  border: 3px solid rgba(255,255,255,.8);
  cursor: pointer;
}

.map-marker-draggable { cursor: grab; }
.map-marker-icon { font-size: 16px; }
.map-marker-fallback { font-weight: 700; font-size: 15px; font-family: inherit; }

/* Border color signals the station's review status; reuses the same
   variables as the status badges instead of a second color definition. */
.map-marker-status-draft     { border-color: var(--muted); }
.map-marker-status-submitted { border-color: var(--accent); }
.map-marker-status-approved  { border-color: var(--green); }
.map-marker-status-reviewed  { border-color: var(--amber); }
.map-marker-status-rejected  { border-color: var(--red); }

/* Popup content (built via JS DOM APIs) */
.maplibregl-popup-content {
  padding: .8rem .95rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(17,24,39,.18), 0 2px 6px rgba(17,24,39,.08);
  font-family: var(--sans);
}

.maplibregl-popup-tip { border-top-color: #fff; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #fff; }

.maplibregl-popup-close-button {
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  color: var(--subtle);
  font-size: 16px;
}

.maplibregl-popup-close-button:hover {
  background: var(--surface);
  color: var(--text);
}

.map-popup {
  min-width: 160px;
  max-width: 240px;
}

.map-popup-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  padding-right: 1rem;
}

.popup-location {
  margin-top: .25rem;
  color: var(--subtle);
  font-size: .8rem;
}

.popup-link-line { margin-top: .6rem; }

.popup-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.popup-link:hover { background: var(--accent); color: #fff; }
.popup-link i { font-size: .7rem; }

/* Icon (Tom Select) + color picker row */
.icon-color-row { display: flex; align-items: center; gap: .75rem; }

.icon-color-row input[type=color] {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 2px;
  background: none;
}

/* Icon-only dropdown: lay options out as a wrapping grid instead of a tall
   single column of icon-sized rows. */
.ts-dropdown-content { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; }
.ts-dropdown .option { padding: 0; }

.icon-option {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
/* Tom Select theme overrides to match the app's form-control look
   (see rally_station_form.html's icon picker). The control only ever shows
   a single icon glyph now, so it stays compact instead of stretching full
   width, and the selected icon sits inline with the search input instead
   of wrapping onto its own line above it. */
.ts-wrapper .ts-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  padding: 7px 10px;
}
.ts-wrapper .ts-control > input { min-width: 3rem !important; }
.ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.ts-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  width: auto !important;
  min-width: 220px;
}
.ts-dropdown .active { background: #eff6ff; color: var(--text); }


/* 20. Animations
   ============================================================================= */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* 21. Media Queries
   ============================================================================= */

@media (max-width: 640px) {
  nav { padding: 0 1rem; }
  .site-footer { padding: 1rem; }
  .container { padding: 1.25rem .75rem; }
  .page-title { font-size: 18px; }
  .col-2 { grid-template-columns: 1fr; }
  .card { padding: 1rem; }

  /* Shrink sticky Rank/Group/Total columns so Total is visible without scrolling first */
  .table-wrap th, .table-wrap td { padding: 8px 8px; }
  .sticky-rank  { width: 32px; min-width: 32px; max-width: 32px; }
  .sticky-group { left: 32px; width: 104px; min-width: 104px; max-width: 104px; }
  .sticky-total { left: 136px; width: 64px; min-width: 64px; max-width: 64px; }
  .group-cell-name { max-width: 88px; }

  /* Stack the podium vertically in rank order instead of the desktop
     1st-centered/flex-end layout, which wraps awkwardly on narrow screens */
  .podium {
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
  }
  .podium-1st { order: 1; }
  .podium-2nd { order: 2; }
  .podium-3rd { order: 3; }
  .podium-card-1st, .podium-card-sm {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
  }
}

@media print {
  /* Page-box margin at 0 drops the browser's default header/footer
     (date, URL, page number); the readable margin moves to body padding */
  @page { margin: 0; }
  nav, .site-footer, .btn-row, .messages, .form-warning, .no-print,
  .page-subtitle, .form-section-title { display: none !important; }
  body { background: #fff; padding: 1.5cm; }
  .container { max-width: none; padding: 0; margin: 0; }
  .form-section { border: none; padding: 0; }
  a[href]::after { content: none !important; }
}