/**
 * CasteoHub Design System
 * SINGLE SOURCE OF TRUTH for all design tokens and base styles
 *
 * Structure:
 * 1. :root { ... }              CSS custom properties (variables) — colors, typography, spacing, shadows
 * 2. Base elements (h1-body)    Default styles using variables
 * 3. Component classes (.btn, .card, .badge-*)  Base component styles using variables
 *
 * Philosophy:
 * - All design decisions live in :root variables
 * - Base CSS classes reference variables, NOT hardcoded values
 * - Other CSS files (styles.css, admin.css, etc.) ONLY contain overrides & customizations
 * - One change to a variable = global update across entire app
 *
 * Example: Change favorite registered icon color
 * BEFORE (scattered): Search all files for #ab30ab, change 3+ places
 * NOW: Change --color-fav-registered: #ab30ab in :root → done!
 */

:root {
  /* ============================================
     COLOR PALETTE — Gray-Blue Theme
     ============================================ */

  /* Primary colors */
  --color-primary: #3498db;
  /* Bright blue for main actions */
  --color-primary-dark: #2980b9;
  /* Darker blue for hover states */
  --color-primary-light: #ebf5fb;
  /* Light blue for backgrounds */

  /* Secondary colors */
  --color-secondary: #5a6c7d;
  /* Slate gray for secondary content */
  --color-secondary-dark: #34495e;
  /* Dark slate for text */
  --color-secondary-light: #bdc3c7;
  /* Light gray for borders/separators */

  /* Status colors (used for buttons, badges, alerts) */
  --color-success: #27ae60;
  /* Green for positive actions, success badges, buttons */
  --color-success-dark: #1e7e34;
  /* Darker green for hover states */

  --color-danger: #e74c3c;
  /* Red for destructive actions, danger badges, buttons */
  --color-danger-dark: #d32f2f;
  /* Darker red for hover states */

  --color-warning: #f39c12;
  /* Orange for warnings, warning badges, buttons */
  --color-warning-dark: #e68900;
  /* Darker orange for hover states */

  --color-info: #3498db;
  /* Blue for informational messages, info badges, buttons */
  --color-info-dark: #2980b9;
  /* Darker blue for hover states */

  /* Background & Text colors */
  --color-light: #f8fafc;
  /* Off-white background */
  --color-off-white: #fdfdfd;
  /* Slightly warm off-white for panels/sections */
  --color-off-white-active: #dae0e578;
  /* Slightly warm off-white for panels/sections */
  --color-dark: #2c3e50;
  /* Very dark gray/blue for text */
  --color-text: #34495e;
  /* Main text color (dark slate) */
  --color-text-muted: #7f8c8d;
  /* Muted gray text */
  --color-white: #ffffff;
  /* Pure white for cards, modals, buttons */
  --color-near-white: rgba(255, 255, 255, 0.9);
  /* Semi-transparent white for hover states */

  /* Border & divider colors */
  --color-border-light: #e2e8f0;
  /* Light border color */
  --color-border: #dee2e6;
  /* Border color */
  --color-border-dark: #cbd5e0;
  /* Darker border for emphasis */
  --color-divider: #ecf0f1;
  /* Divider/separator color */

  /* Special status colors */
  --color-published: #27ae60;
  /* Green for published forms */
  --color-draft: #95a5a6;
  /* Gray for draft forms */
  --color-error: #e74c3c;
  /* Red for errors */
  --color-preview: #f39c12;
  /* Orange for preview state */

  /* ============================================================
     FAVORITE ICON COLORS (Profile Tagging System)
     ============================================================
     INDEPENDENT from Status colors — may evolve separately
     Used for: Profile detail buttons (#btn-star, #btn-question, etc.)
     + Dashboard favorite icon summary badges (.badge-fav-*)
     Strategy: Own color palette allows independent customization
     if tagging colors need to differ from button/badge colors
     ============================================================ */

  --color-fav-star-badge: #f39c12;
  --color-fav-question-badge: #27ae60;
  --color-fav-minus-badge: #e74c3c;
  --color-fav-registered-badge: #ab30ab;

  --color-fav-star: #ffd700;
  --color-fav-question: #90ee90;
  --color-fav-minus: #ff7f7f;
  --color-fav-registered: #9b59b6;

  /* Selection tiers (S1-S4): orange -> purple -> red -> dark red, for quick visual
     distinction between tiers. Edit these to restyle every tier indicator at once
     (profile list text, active tier buttons, active tier filter badges). */
  --color-tier-s1: #f39c12;
  --color-tier-s2: #9b59b6;
  --color-tier-s3: #e74c3c;
  --color-tier-s4: #8b1a1a;

  /* Workflow phase colors: Selection = green, Production = blue. Assigned once here so
     every Selection/Production button (dashboard, list creator switcher, ...) stays
     consistent — edit these to restyle the whole app's phase color-coding at once. */
  --color-stage-selection: var(--color-success);
  --color-stage-selection-dark: var(--color-success-dark);
  --color-stage-production: var(--color-primary);
  --color-stage-production-dark: var(--color-primary-dark);

  /* Selection Lists color — same purple as the "Hide Empty" dashboard filter button. */
  --color-stage-list: var(--color-fav-registered-badge);
  --color-stage-list-dark: var(--color-fav-registered);

  /* Favorite Icon Text Colors (inverse for badges) */
  --color-fav-text-light: #000;
  /* Dark text on light fav backgrounds (star, question) */
  --color-fav-text-dark: var(--color-light);
  /* White text on dark fav backgrounds (minus, registered) */

  /* ============================================
     TYPOGRAPHY SCALE
     ============================================ */

  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Monaco', 'Courier New', monospace;

  /* Font sizes */
  --font-size-h1: 2rem;
  /* 32px */
  --font-size-h2: 1.75rem;
  /* 28px */
  --font-size-h3: 1.5rem;
  /* 24px */
  --font-size-h4: 1.25rem;
  /* 20px */
  --font-size-h5: 1.125rem;
  /* 18px */
  --font-size-h6: 1rem;
  /* 16px */
  --font-size-body: 0.875rem;
  /* 14px (standard body text) */
  --font-size-small: 0.75rem;
  /* 12px (small labels, hints) */
  --font-size-code: 0.8125rem;
  /* 13px (code blocks) */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ============================================
     SPACING SCALE (multiples of 4px)
     ============================================ */

  --spacing-0: 0;
  --spacing-1: 0.25rem;
  /* 4px */
  --spacing-2: 0.5rem;
  /* 8px */
  --spacing-3: 0.75rem;
  /* 12px */
  --spacing-4: 1rem;
  /* 16px */
  --spacing-5: 1.25rem;
  /* 20px */
  --spacing-6: 1.5rem;
  /* 24px */
  --spacing-8: 2rem;
  /* 32px */
  --spacing-10: 2.5rem;
  /* 40px */

  /* ============================================
     SHADOW TOKENS
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ============================================
     BORDER-RADIUS TOKENS
     ============================================ */

  --radius-sm: 0.25rem;
  /* 4px (small pills, tight borders) */
  --radius-md: 0.5rem;
  /* 8px (standard border radius) */
  --radius-lg: 0.75rem;
  /* 12px (larger cards, modals) */
  --radius-xl: 1rem;
  /* 16px (extra large rounded elements) */
  --radius-full: 9999px;
  /* Fully rounded (pills, circles) */

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================
   TYPOGRAPHY — Heading & Text Styles
   ============================================ */

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin-bottom: var(--spacing-4);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin-bottom: var(--spacing-3);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin-bottom: var(--spacing-3);
}

/* .text-white on an ancestor (e.g. a colored .modal-header) can't override this: a color set
   directly on the h4/h5/h6 itself always wins over an inherited value from a parent,
   regardless of the parent class's specificity — inheritance loses to any direct rule on the
   element. Explicitly re-inherit here so e.g. <div class="modal-header bg-danger text-white">
   <h5 class="modal-title"> actually renders white instead of falling back to --color-dark. */
h4.text-white,
h5.text-white,
h6.text-white,
.text-white h4,
.text-white h5,
.text-white h6 {
  color: inherit;
}

h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  margin-bottom: var(--spacing-2);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-normal);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-normal);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-normal);
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-light);
}

p {
  margin-bottom: var(--spacing-4);
}

small {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  background-color: var(--color-divider);
  color: var(--color-dark);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

/* ============================================
   COMPONENTS — Button Styles
   ============================================ */

/* Only apply design tokens to explicitly scoped buttons — do NOT override Bootstrap btn sizing globally */
.btn {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

/* Button color variants using design system variables */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

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

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.btn-success:hover {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: var(--color-white);
}

/* Workflow phase buttons: Selection = green, Production = blue, Lists = purple
   (see --color-stage-* tokens above) */
.btn-stage-selection,
.btn-stage-selection:hover,
.btn-stage-selection:focus {
  background-color: var(--color-stage-selection);
  color: var(--color-white);
}

.btn-stage-production,
.btn-stage-production:hover,
.btn-stage-production:focus {
  background-color: var(--color-stage-production);
  color: var(--color-white);
}

.btn-stage-list,
.btn-stage-list:hover,
.btn-stage-list:focus {
  background-color: var(--color-stage-list);
  color: var(--color-white);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

.btn-danger:hover {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  color: var(--color-white);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-white);
}

.btn-warning:hover {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
  color: var(--color-white);
}

.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-white);
}

.btn-info:hover {
  background-color: var(--color-info-dark);
  border-color: var(--color-info-dark);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

.btn-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: #1a252f;
  border-color: #1a252f;
  color: var(--color-white);
}

.btn-light {
  background-color: var(--color-light);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-light:hover {
  background-color: var(--color-divider);
  border-color: var(--color-border);
  color: var(--color-dark);
}

/* Button hover & active states */
.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active {
  transform: translateY(1px);
}

/* ============================================
   COMPONENTS — Card Styles
   ============================================ */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: var(--spacing-4);
  background-color: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold);
}

.card-body {
  padding: var(--spacing-4);
}

.card-footer {
  padding: var(--spacing-4);
  background-color: var(--color-light);
  border-top: 1px solid var(--color-border);
}

/* ============================================
   COMPONENTS — Modal Styles
   ============================================ */

.modal-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body {
  padding: var(--spacing-4);
}

.modal-footer {
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-end;
}

/* ============================================
   COMPONENTS — Form Styles
   ============================================ */

.form-group {
  margin-bottom: var(--spacing-4);
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  /* Bootstrap's own .form-control sets a fixed height (calc(1.5em + 0.75rem + 2px)) sized
     for ITS padding/line-height. We override padding/font-size/line-height here but not
     that height, so the box stayed pinned to Bootstrap's original (smaller) box while the
     padding inside it grew — text got pushed down/clipped instead of the box growing to fit.
     height: auto lets the box size itself from padding + line-height instead. */
  height: auto;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* select gets its own rule: the equal left/right padding above leaves no room for the
   native dropdown arrow, so long option text (e.g. "User Admin (castings & users, ...)")
   reads as clipped/hidden behind it. Reserve extra right padding and draw one consistent
   arrow ourselves (appearance: none) instead of relying on each browser's own arrow. */
select,
select.form-control {
  padding-right: calc(var(--spacing-3) + 1.25rem);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-3) center;
  background-size: 0.7rem;
}

/* Chrome/Edge on Windows render the native <option> list using the <select>'s own
   padding-box, so the extra padding-right reserved above for the arrow also shrinks
   the width available to long option text in the dropdown list, clipping it. Reset
   the option's own padding so the list itself isn't squeezed by the closed select's
   arrow spacing. */
select option {
  padding-right: var(--spacing-3);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* ============================================
   COMPONENTS — Badge Styles
   ============================================ */

.badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.badge-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.badge-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.badge-info {
  background-color: var(--color-info);
  color: var(--color-white);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.badge-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.badge-light {
  background-color: var(--color-divider);
  color: var(--color-text);
}

/* badge-purple used on fav registered icon */
.badge-purple {
  background-color: var(--color-fav-registered);
  color: var(--color-white);
}

.badge-pill {
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-3);
}

/* ============================================
   COMPONENTS — Table Styles
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
}

thead {
  background-color: var(--color-light);
  border-bottom: 2px solid var(--color-border-dark);
}

th {
  padding: var(--spacing-3);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-dark);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

tbody tr:hover {
  background-color: var(--color-light);
  transition: background-color var(--transition-fast);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing utilities */
.m-0 {
  margin: var(--spacing-0);
}

.m-1 {
  margin: var(--spacing-1);
}

.m-2 {
  margin: var(--spacing-2);
}

.m-3 {
  margin: var(--spacing-3);
}

.m-4 {
  margin: var(--spacing-4);
}

.m-5 {
  margin: var(--spacing-5);
}

.m-6 {
  margin: var(--spacing-6);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-10 {
  margin: var(--spacing-10);
}

.mt-1 {
  margin-top: var(--spacing-1);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mb-1 {
  margin-bottom: var(--spacing-1);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.mb-3 {
  margin-bottom: var(--spacing-3);
}

.mb-4 {
  margin-bottom: var(--spacing-4);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}

.ml-1 {
  margin-left: var(--spacing-1);
}

.ml-2 {
  margin-left: var(--spacing-2);
}

.ml-4 {
  margin-left: var(--spacing-4);
}

.mr-1 {
  margin-right: var(--spacing-1);
}

.mr-2 {
  margin-right: var(--spacing-2);
}

.mr-4 {
  margin-right: var(--spacing-4);
}

.p-0 {
  padding: var(--spacing-0);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-8 {
  padding: var(--spacing-8);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

/* Flexbox utilities */
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.align-items-center {
  align-items: center;
}

.gap-1 {
  gap: var(--spacing-1);
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-3 {
  gap: var(--spacing-3);
}

.gap-4 {
  gap: var(--spacing-4);
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.text-warning {
  color: var(--color-warning);
}

.text-primary {
  color: var(--color-primary);
}

.fw-bold {
  font-weight: var(--font-weight-bold);
}

.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

.fw-normal {
  font-weight: var(--font-weight-normal);
}

.text-sm {
  font-size: var(--font-size-small);
}

.text-base {
  font-size: var(--font-size-body);
}

/* Border utilities */
.border {
  border: 1px solid var(--color-border);
}

.border-top {
  border-top: 1px solid var(--color-border);
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

.rounded {
  border-radius: var(--radius-md);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

/* Display utilities */
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

/* Opacity utilities */
.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ============================================
   COMPONENTS — Favorite Icon Styles
   ============================================ */

/* Profile tagging buttons (star, question, minus, registered) */
#btn-star.active .fa-star,
#btn-star:hover .fa-star {
  color: var(--color-fav-star);
  transition: color var(--transition-fast);
}

#btn-question.active .fa-question,
#btn-question:hover .fa-question {
  color: var(--color-fav-question);
  transition: color var(--transition-fast);
}

#btn-minus.active .fa-minus,
#btn-minus:hover .fa-minus {
  color: var(--color-fav-minus);
  transition: color var(--transition-fast);
}

#btn-registered.active .fa-registered,
#btn-registered:hover .fa-registered {
  color: var(--color-fav-registered);
  transition: color var(--transition-fast);
}

/* Badge styles for favorite icons (dashboard summary) — uses -badge suffix variables */
.badge-fav-star {
  background-color: var(--color-fav-star-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-question {
  background-color: var(--color-fav-question-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-minus {
  background-color: var(--color-fav-minus-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-registered {
  background-color: var(--color-fav-registered-badge);
  color: var(--color-fav-text-dark);
}

.badge-tier {
  background-color: var(--color-fav-star);
  color: var(--color-fav-text-dark);
}

/* Selection tier summary badges (dashboard) — reuse --color-tier-s1..s4 so every S1-S4
   indicator across the app (profile list, filter buttons, dashboard badges) stays in sync. */
.badge-tier-1 {
  background-color: var(--color-tier-s1);
  color: var(--color-fav-text-dark);
}

.badge-tier-2 {
  background-color: var(--color-tier-s2);
  color: var(--color-fav-text-dark);
}

.badge-tier-3 {
  background-color: var(--color-tier-s3);
  color: var(--color-fav-text-dark);
}

.badge-tier-4 {
  background-color: var(--color-tier-s4);
  color: var(--color-fav-text-dark);
}

/* The "Sn" label inside a tier badge — a small white circle behind the text so it reads
   as an icon glyph (contrasting shape), the same way .badge-fav-registered's fa-registered
   icon stands out against its badge background instead of blending into it. */
.badge-tier-1 .badge-tier-label,
.badge-tier-2 .badge-tier-label,
.badge-tier-3 .badge-tier-label,
.badge-tier-4 .badge-tier-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  font-size: 0.65em;
  font-weight: 700;
}

.badge-tier-1 .badge-tier-label {
  color: var(--color-tier-s1);
}

.badge-tier-2 .badge-tier-label {
  color: var(--color-tier-s2);
}

.badge-tier-3 .badge-tier-label {
  color: var(--color-tier-s3);
}

.badge-tier-4 .badge-tier-label {
  color: var(--color-tier-s4);
}

.badge-tier-none {
  background-color: var(--color-light);
  color: var(--color-text);
}

.badge-fav-none {
  background-color: var(--color-light);
  color: var(--color-text);
}

/* ============================================
   FILE LINK STYLES
   ============================================ */

.file-link {
  display: inline-flex !important;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: 0.85rem;
  text-decoration: none !important;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.file-link:hover {
  background-color: var(--color-divider);
  border-color: var(--color-border);
  text-decoration: none !important;
}

.file-link i {
  display: inline;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-right: 0;
}