/* Route Manager public theme overrides
   Recolors public UI components to inherit from theme variables defined in theme-vars.css
*/

/* Base text and background */
.rm-container {
  color: var(--rm-color-text);
  background: transparent;
}

.rm-card,
.rm-form,
.rm-checkpoint-card,
.rm-route-card,
.rm-table,
.rm-results-table {
  background: var(--rm-color-bg);
  border-color: var(--rm-color-border);
  box-shadow: var(--rm-shadow-md);
}

.rm-checkpoint-description,
.rm-details-list li,
.rm-results-table th,
.rm-results-table tbody tr:hover,
.rm-table th {
  background: var(--rm-color-surface);
  border-color: var(--rm-color-border);
}

/* Header wrapper: default to transparent (previous look), opt-in to surface style via modifier */
.rm-header {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.rm-header--surface {
  background: var(--rm-color-surface);
  border-bottom: 1px solid var(--rm-color-border);
}

/* Headings */
.rm-container .rm-details-title,
.rm-container h1,
.rm-container h2,
.rm-container h3,
.rm-container h4,
.rm-container h5,
.rm-container h6 {
  color: var(--rm-color-text);
  /* Neutralize theme-imposed backgrounds/underlines while keeping palette */
  background: transparent;
  border: 0;
  border-bottom: none;
  text-decoration: none;
  box-shadow: none;
  padding: 0;
}

/* Links */
.rm-container a {
  color: var(--rm-color-link);
}
.rm-container a:hover {
  opacity: .9;
}

/* Primary actions */
.rm-btn-primary,
.rm-btn.rm-btn-primary,
#new-checkin-btn {
  background-color: var(--rm-color-primary);
  color: #fff;
}
.rm-btn-primary:hover,
.rm-btn.rm-btn-primary:hover,
#new-checkin-btn:hover {
  filter: brightness(.92);
}

/* Secondary and split */
.rm-split .rm-split-toggle.rm-btn {
  background-color: var(--rm-color-primary);
}

/* Accents and borders on cards */
.rm-checkpoint-card {
  border-left-color: var(--rm-color-accent);
}

.rm-success-card,
#success-container .rm-checkpoint-card,
#next-checkpoint-success {
  border-left-color: var(--rm-color-accent);
  background-color: var(--rm-color-surface);
}

/* Pills */
.rm-pill.start { background: color-mix(in oklab, var(--rm-color-primary) 12%, #fff); color: var(--rm-color-primary); }
.rm-pill.finish { background: color-mix(in oklab, var(--rm-color-accent) 12%, #fff); color: var(--rm-color-accent); }
.rm-pill.both { background: color-mix(in oklab, var(--rm-color-secondary) 12%, #fff); color: var(--rm-color-secondary); }

/* Messages */
.rm-message.success {
  background-color: var(--rm-color-success-bg);
  color: var(--rm-color-success);
  border-left-color: var(--rm-color-accent);
}
.rm-message.error {
  background-color: var(--rm-color-error-bg);
  color: var(--rm-color-error);
  border-left-color: #f44336;
}

/* Tables */
.rm-table th,
.rm-results-table th { color: var(--rm-color-text); }
.rm-results-table tbody tr:nth-child(even) { background-color: color-mix(in oklab, var(--rm-color-surface) 85%, #fff); }

/* Form controls */
.rm-col-input input:not([type="checkbox"]):not([type="radio"]),
.rm-col-input select,
.rm-col-input textarea,
.rm-form-group input,
.rm-form-group select,
.rm-form-group textarea {
  border-color: var(--rm-color-border);
}
.rm-form-group input:focus,
.rm-form-group select:focus,
.rm-form-group textarea:focus {
  border-color: var(--rm-color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rm-color-primary) 20%, transparent);
}

/* Results badges */
.rm-badge-public {
  background: color-mix(in oklab, var(--rm-color-accent) 14%, #fff);
  color: var(--rm-color-success);
  border-color: color-mix(in oklab, var(--rm-color-accent) 40%, #fff);
}
.rm-badge-private {
  background: color-mix(in oklab, #f44336 14%, #fff);
  color: var(--rm-color-error);
  border-color: color-mix(in oklab, #f44336 40%, #fff);
}

/* Route cards CTA/link */
.rm-route-card .rm-card-cta { color: var(--rm-color-link); }

/* Container typography harmony */
.rm-container { font-family: var(--rm-typography-text); }
.rm-container .rm-card-title,
.rm-container .rm-details-title { font-family: var(--rm-typography-primary); }
