/**
 * @file
 * CC Soccer Base Component Styles — MODULE COPY (admin pages)
 *
 * !! KEEP IN SYNC WITH: web/themes/custom/ccsoccer_theme/css/base.css !!
 *
 * WHY TWO FILES: Drupal loads ccsoccer_theme only on public pages. Admin pages
 * use the Claro theme, so this module copy ensures admin pages (roster builder,
 * schedule builder, etc.) get the same button/card/form styles.
 *
 * When adding new button variants, card styles, or shared components, update
 * BOTH this file and the theme's base.css.
 *
 * The theme's base.css may also contain public-page-only rules (e.g. status
 * messages) that do not need to be mirrored here.
 */

/* ============================================
   TYPOGRAPHY - Load Inter font
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================
   GLOBAL TRANSITIONS
   ============================================ */

/* Smooth transitions for common interactive properties */
a,
button,
input,
select,
textarea,
.button {
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
}

/* ============================================
   BUTTON SYSTEM
   ============================================

   Unified button styles. All existing .button classes
   continue to work, but now with consistent sizing,
   spacing, and color.

   Variants:
   - .button (default / secondary)
   - .button--primary
   - .button--danger
   - .button--small
   - .button--ghost
   ============================================ */

.button,
button.button,
a.button,
input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.25rem;
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-decoration: none;
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.button:hover,
button.button:hover,
a.button:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-500);
  color: var(--color-text);
  text-decoration: none;
}

.button:active,
button.button:active,
a.button:active {
  transform: scale(0.98);
}

.button:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

/* Primary button - main CTA */
.button--primary,
button.button--primary,
a.button--primary,
input.button--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.button--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-primary);
}

/* Action button - secondary CTA (blue) */
.button--action,
.save-snapshot-btn {
  background: var(--color-action-alt);
  border-color: var(--color-action-alt);
  color: var(--color-text-inverse);
}

.button--action:hover,
.save-snapshot-btn:hover {
  background: var(--color-action-alt-dark);
  border-color: var(--color-action-alt-dark);
  color: var(--color-text-inverse);
}

/* Danger button */
.button--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.button--danger:hover {
  background: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-danger);
}

/* Small button */
.button--small {
  padding: 0.35rem 0.75rem;
  font-size: var(--text-sm);
}

/* Primary-soft button — light red tint, red text/border (back links, secondary nav) */
.button--primary-soft,
button.button--primary-soft,
a.button--primary-soft {
  background: #fff0f0;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.button--primary-soft:hover,
button.button--primary-soft:hover,
a.button--primary-soft:hover {
  background: #ffe0e0;
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/* Ghost button (transparent) */
.button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.button--ghost:hover {
  background: var(--color-gray-100);
  border-color: transparent;
  color: var(--color-text);
}

/* Pulsing animation for unsaved changes */
.button.has-changes {
  animation: pulse 1.5s infinite;
  box-shadow: var(--shadow-primary);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============================================
   CARD SYSTEM
   ============================================

   Unified card styles for team cards, league cards,
   season cards, and other card-like containers.
   ============================================ */

.league-card,
.season-card,
.team-card,
.team-column,
.stat-card {
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base),
              border-color var(--transition-base);
}

.league-card:hover,
.season-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-gray-300);
}

/* Team columns in roster builder - subtler hover since they're interactive */
.team-column:hover {
  box-shadow: var(--shadow-md);
}

/* ============================================
   STATUS BADGES
   ============================================

   Compact pill badges for registration status,
   player status, and other state indicators.
   ============================================ */

.status-box,
.status-registered,
.status-closed,
.status-not-open,
.status-open,
.status-waitlist,
.status-full {
  border-radius: var(--radius-xl);
}

.captain-badge,
.goalie-badge,
.pool-badge,
.you-badge,
.manager-badge,
.team-status-badge {
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.3px;
}

/* ============================================
   FORM INPUTS
   ============================================

   Enhanced form input styling with better
   focus states and consistent sizing.
   ============================================ */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="url"],
select,
textarea {
  font-family: var(--font-family);
  font-size: var(--text-base);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  color: var(--color-text);
  background: var(--color-white);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.12);
  outline: none;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================

   Slide-in notifications for save/error/info feedback.
   ============================================ */

.schedule-toast {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family);
}

/* ============================================
   TABLES
   ============================================

   Improved table styling with better header
   contrast and row hover states.
   ============================================ */

.roster-table th,
.invitations-table th,
.snapshots-table th,
.distribution-table thead th,
.jersey-variations-table th {
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.3px;
  text-transform: none;
}

/* ============================================
   PILL TABS (Season/Tournament switchers)
   ============================================ */

.season-tab,
.tournament-tab {
  transition: all var(--transition-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   DRAG AND DROP ENHANCEMENTS
   ============================================

   Improved visual feedback for drag operations.
   These enhance, not replace, existing drag states.
   ============================================ */

.player-card,
.tournament-player-card {
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.player-card:hover,
.tournament-player-card:hover {
  box-shadow: var(--shadow-md);
}

/* Dragging state - lifted appearance */
.player-card.dragging,
.tournament-player-card.dragging {
  box-shadow: var(--shadow-lg);
}

/* Drop target states */
.droppable.drag-over,
.player-list.drag-over {
  border-radius: var(--radius-lg);
}

/* ============================================
   KEYBOARD SHORTCUT BADGES (kbd)
   ============================================ */

kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: 0.85em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* ============================================
   WORKBENCH PANELS
   ============================================

   Shared styles for sidebar workbench panels
   used in roster and schedule builders.
   ============================================ */

.workbench-panel {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.workbench-panel .panel-header {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.workbench-panel .panel-footer {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ============================================
   VISIBILITY / STATUS INDICATORS
   ============================================ */

.visibility-status,
.capacity-info,
.bye-week-warning {
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

/* ============================================
   SECTION HEADERS
   ============================================

   Consistent section heading style used across
   season-view, tournament-view, and admin pages.
   ============================================ */

.season-summary h2,
.season-stats h2,
.season-flags h2,
.tournament-summary h2,
.tournament-stats h2,
.tournament-flags h2 {
  font-family: var(--font-family);
  letter-spacing: -0.01em;
}

/* ============================================
   PAGE CONTENT FADE-IN
   ============================================

   Subtle entrance animation for page content.
   Applied to main content containers.
   ============================================ */

.roster-builder-content,
.tournament-roster-builder-content,
.schedule-grid-container,
.leagues-container,
.season-cards,
.teams-grid {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   STAGGERED CARD ENTRANCE (Phase 2)
   ============================================

   Cards within grid containers animate in with
   a slight delay between each card.
   ============================================ */

.teams-grid .team-card,
.leagues-container .league-card,
.season-cards .season-card {
  animation: fadeInUp 0.35s ease-out both;
}

.teams-grid .team-card:nth-child(1),
.leagues-container .league-card:nth-child(1),
.season-cards .season-card:nth-child(1) { animation-delay: 0s; }

.teams-grid .team-card:nth-child(2),
.leagues-container .league-card:nth-child(2),
.season-cards .season-card:nth-child(2) { animation-delay: 0.05s; }

.teams-grid .team-card:nth-child(3),
.leagues-container .league-card:nth-child(3),
.season-cards .season-card:nth-child(3) { animation-delay: 0.1s; }

.teams-grid .team-card:nth-child(4),
.leagues-container .league-card:nth-child(4),
.season-cards .season-card:nth-child(4) { animation-delay: 0.15s; }

.teams-grid .team-card:nth-child(5) { animation-delay: 0.2s; }
.teams-grid .team-card:nth-child(6) { animation-delay: 0.25s; }
.teams-grid .team-card:nth-child(7) { animation-delay: 0.3s; }
.teams-grid .team-card:nth-child(8) { animation-delay: 0.35s; }
.teams-grid .team-card:nth-child(n+9) { animation-delay: 0.4s; }

/* ============================================
   TOAST SLIDE-IN REFINEMENT (Phase 2)
   ============================================

   Spring-like easing for toast notifications.
   ============================================ */

.schedule-toast {
  transition: opacity 0.3s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.schedule-toast.visible {
  transform: translateX(0);
}

/* ============================================
   BUTTON PRESS FEEDBACK (Phase 2)
   ============================================

   Extended active states for all button variants.
   ============================================ */

.button--primary:active,
.button--action:active,
.button--danger:active,
.save-snapshot-btn:active,
.nav-btn:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

/* ============================================
   DRAG-DROP HOVER PULSE (Phase 2)
   ============================================

   Subtle pulse on valid drop targets during drag.
   ============================================ */

@keyframes dropTargetPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.15);
  }
}

.droppable.drag-over,
.player-list.drag-over,
.pool-player-list.drag-over {
  animation: dropTargetPulse 1.2s ease-in-out infinite;
}

.tournament-player-card.drop-target,
.player-card.drop-target {
  animation: dropTargetPulse 1.2s ease-in-out infinite;
}

/* ============================================
   ENHANCED FORM INPUTS (Phase 2)
   ============================================

   Modern form styling with better touch targets,
   custom checkboxes/radios, and validation states.
   ============================================ */

/* Animated focus ring transition */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="url"],
select,
textarea {
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-fast);
}

/* Form field spacing */
.form-item,
.js-form-item {
  margin-bottom: var(--space-4);
}

/* Form labels */
.form-item label,
.js-form-item label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-base);
  color: var(--color-text);
}

/* Custom select arrow */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 8.825L0.375 3.2l0.85-0.85L6 7.125l4.775-4.775 0.85 0.85z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.25rem;
}

/* Checkboxes and radios — use native browser defaults.
   Olivero theme already provides good styling for these. */

/* Validation states */
input.error,
select.error,
textarea.error {
  border-color: var(--color-danger);
  background-color: #fff5f5;
}

input.error:focus,
select.error:focus,
textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

/* Mobile touch targets */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="url"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

}

/* ============================================
   STATUS BADGE SYSTEM (Phase 2)
   ============================================

   Enhanced pill badges with left-border accents,
   subtle gradients, and consistent styling.
   ============================================ */

/* Status box refresh — left border accents */
.status-box {
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  transition: box-shadow var(--transition-base);
}

.status-registered {
  border-left-color: var(--color-success);
}

.status-open {
  border-left-color: var(--color-success);
}

.status-closed {
  border-left-color: var(--color-danger);
}

.status-not-open {
  border-left-color: var(--color-gray-500);
}

.status-waitlist {
  border-left-color: var(--color-warning);
}

.status-full {
  border-left-color: #ff8c00;
}

/* Badge pill base — unified small badge styling */
.captain-badge,
.goalie-badge,
.pool-badge,
.you-badge,
.manager-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.75em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

/* Team status badges — polished */
.team-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.7em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tournament status indicators — improved layout */
.tournament-status {
  border-radius: var(--radius-xl);
  transition: box-shadow var(--transition-base);
}

.tournament-status:hover {
  box-shadow: var(--shadow-sm);
}

/* ============================================
   BREADCRUMB NAVIGATION (Phase 2)
   ============================================

   Style Drupal's default breadcrumb output for
   better visual hierarchy and brand consistency.
   ============================================ */

.breadcrumb {
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-1);
  color: var(--color-gray-400);
  font-size: 0.85em;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ============================================
   STICKY WEEK NAVIGATION (Phase 2)
   ============================================

   Make schedule week-navigation sticky on scroll.
   ============================================ */

.week-navigation {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Tournament checkout - deposit acknowledgment checkbox label inline */
.form-item-ccsoccer-tournament-team-deposit-acknowledgment .form-item__label {
  display: inline;
  font-weight: normal;
}