/*
 * Jackrabbit – Application Stylesheet Manifest
 *
 * Consolidated CSS architecture:
 *   1. variables.css  – Design tokens (colors, spacing, radii, shadows)
 *   2. layout.css     – Top bar, hamburger nav, page shells, grid
 *   3. components.css – Buttons, cards, forms, modals, alerts, utilities
 *   4. widgets.css    – Play card, game card, selectors, menu tiles
 *   5. video.css      – Video player, clips, play-by-play, presentation
 *   6. play_editor.css – SVG play/formation editor
 *
 * Additional feature CSS is imported below.
 */

/* NOTE: Propshaft does not process CSS @import. Each sub-file is loaded
   via stylesheet_link_tag in the application layout instead. */

/* Legacy overrides – color-picker & custom-player elements not yet migrated */

#custom-main-player span,
#custom-main-player label,
#custom-main-player input,
#custom-main-player select {
  color: inherit !important;
}
#main-time, #in-out-display {
  color: inherit !important;
}

/* Modal extra styles */
.modal-center { display: flex; flex-direction: column; align-items: center; }
.modal-icon { font-size: 2.2em; margin-bottom: 0.5em; }
.modal h2 { margin-top: 0; font-size: 1.3em; }
.modal h2.primary { color: var(--primary); }
.modal h2.danger { color: var(--danger); }
.modal p { margin-bottom: var(--spacing-lg); color: var(--text-muted); text-align: center; }

.modal-form-group { margin-bottom: var(--spacing-md); }
.modal-form-group label { font-weight: 600; color: var(--text-color); display: block; margin-bottom: var(--spacing-xs); }
.modal-textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 1em;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}
.modal-textarea:focus { outline: none; border-color: var(--input-focus); box-shadow: 0 0 0 3px var(--primary-transparent); }
.modal-input { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-color); font-family: inherit; font-size: 0.95rem; }
.modal-input:focus { outline: none; border-color: var(--primary); }

/* Video timeline slider (browser-specific) */
.video-timeline::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); cursor: pointer; box-shadow: var(--shadow-sm); border: none;
}
.video-timeline::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); cursor: pointer; border: none;
}
.video-timeline::-webkit-slider-track { width: 100%; height: 4px; background: var(--bg-tertiary); border-radius: var(--radius-sm); border: none; }
.video-timeline::-moz-range-track { width: 100%; height: 4px; background: var(--bg-tertiary); border-radius: var(--radius-sm); border: none; }

/* Color picker (team creation modal) */
.color-picker-wrapper { display: flex; gap: 10px; margin-top: 10px; }
.color-picker-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.color-picker-swatch.selected { border-color: var(--primary); }
.close-button { color: var(--text-muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-button:hover { color: var(--text-color); }