/* ============================================================
   Industry — Self-hosted web font (@font-face)
   Files live in: public/assets/fonts/industry/
   Weight map: Book=400, Medium=500, Demi=600, Bold=700, Black=800
   ============================================================ */

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-Book.woff2') format('woff2'),
       url('../fonts/industry/Industry-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-Medium.woff2') format('woff2'),
       url('../fonts/industry/Industry-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-Demi.woff2') format('woff2'),
       url('../fonts/industry/Industry-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-Bold.woff2') format('woff2'),
       url('../fonts/industry/Industry-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-BoldItalic.woff2') format('woff2'),
       url('../fonts/industry/Industry-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-Black.woff2') format('woff2'),
       url('../fonts/industry/Industry-Black.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Industry';
  src: url('../fonts/industry/Industry-BlackItalic.woff2') format('woff2'),
       url('../fonts/industry/Industry-BlackItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {
  --font-display: 'Industry', 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --font-size-xl: 2.5rem;
  --font-size-lg: 1.45rem;
  --font-size-md: 1.25rem;
  --font-size-sm: 1.02rem;
  --font-weight-bold: 700;
  --font-weight-normal: 400;
  --text-high: hsl(0, 0%, 100%);
  --text-med: hsl(220, 20%, 85%);
  --text-low: hsl(220, 20%, 70%);
  --text-accent: hsl(220, 100%, 75%);
  --space-xs: 0.4rem;
  --space-sm: 0.7rem;
  --space-md: 1.2rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;
}

/* Font Awesome 6 Icon Fix */
.fa-solid,
.fa-regular,
.fa-brands {
  font-family: "Font Awesome 6 Free", "FontAwesome", Arial, sans-serif !important;
  font-weight: 900 !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-regular {
  font-weight: 400 !important;
}

.fa-brands {
  font-family: "Font Awesome 6 Brands", "FontAwesome", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Navigation — display font applied globally so inline styles aren't needed */
nav a,
nav button,
nav span,
nav p {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

/* Racing Title Shadow */
.racing-title-shadow {
  text-shadow: 3px 3px 0px rgba(37, 99, 235, 0.1);
}

/* Modal Utility Classes */
.modal-hidden {
  display: none !important;
}

.modal-visible {
  display: flex !important;
}

.modal-fade {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal-visible.modal-fade {
  opacity: 1;
}

/* Checkbox Utility Class - Ensures proper display after CSS cleanup */
.checkbox-native {
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  cursor: pointer;
}

/* Form Element Fixes - Override aggressive Tailwind resets */
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* Square radio buttons for roster draft tier picker */
input[type="radio"].roster-pick-radio {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 1rem !important;
  height: 1rem !important;
  padding: 0 !important;
  border: 2px solid #6b7280;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

input[type="radio"].roster-pick-radio:checked {
  background-color: #FFD700;
  border-color: #FFD700;
}

input[type="radio"].roster-pick-radio:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Race Results Table - Force left padding on position column */
#results-container .pl-6 {
  padding-left: 1.5rem !important;
}

/* ============================================
   GRADIENT BACKGROUND & CARD DESIGN SYSTEM
   ============================================ */

/* Dark gradient background with light source from top left */
.dark-gradient-bg {
  /* Mobile: More dramatic gradient for smaller screens */
  background: radial-gradient(ellipse at top left, #2a3441 0%, #1f2937 30%, #111827 60%, #0a0e14 100%);
  min-height: 100vh;
}

/* Desktop: Subtler gradient with less light spread */
@media (min-width: 768px) {
  .dark-gradient-bg {
    /* Darker starting color (#1f2937 instead of #374151) */
    /* Slower transition with adjusted color stops */
    /* Top left is now darker, bottom right stays same darkness */
    background: radial-gradient(ellipse at top left, #1a2332 0%, #181f2e 25%, #111827 50%, #0d1117 75%, #0a0e14 100%);
  }
}

/* Card with dotted pattern background and 3D shadow effects */
.dotted-card {
  position: relative;
  background-color: #1a2332;
  /* Tighter dots - 12px spacing for subtle texture */
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* Dark metallic gradient overlay - darker towards bottom */
.dotted-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(45, 62, 80, 0.15) 0%,
    rgba(26, 35, 50, 0.25) 40%,
    rgba(15, 23, 35, 0.35) 70%,
    rgba(10, 14, 20, 0.45) 100%
  );
  border-radius: 1.5rem;
  pointer-events: none;
  z-index: 1;
}

/* Glass-like shine effect on top edge */
.dotted-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%
  );
  border-radius: 1.5rem 1.5rem 0 0;
  pointer-events: none;
  z-index: 2;
}

/* Content wrapper to sit above gradient overlays */
.card-content {
  position: relative;
  z-index: 3;
}

/* Enhanced 3D shadow effect with metallic glow */
.card-glow {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.3),
    0 16px 32px rgba(0, 0, 0, 0.4),
    0 32px 64px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(59, 130, 246, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Styled card without dots - Same styling as dotted-card but no background pattern */
.styled-card {
  position: relative;
  background-color: #1a2332;
  border-radius: 1.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden !important;
}

/* Dark metallic gradient overlay - darker towards bottom */
.styled-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(45, 62, 80, 0.15) 0%,
    rgba(26, 35, 50, 0.25) 40%,
    rgba(15, 23, 35, 0.35) 70%,
    rgba(10, 14, 20, 0.45) 100%
  );
  border-radius: 1.5rem !important;
  pointer-events: none;
  z-index: 1;
}

/* Glass-like shine effect on top edge */
.styled-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%
  );
  border-radius: 1.5rem 1.5rem 0 0 !important;
  pointer-events: none;
  z-index: 2;
}

/* Card variant: border only, no background fill */
.styled-card.card-transparent,
.styled-card.card-transparent::before,
.styled-card.card-transparent::after {
  background: transparent !important;
}

/* Save Success Checkmark Animation */
@keyframes save-success-show {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes check-circle-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes draw-check {
    from { stroke-dashoffset: 40; }
    to   { stroke-dashoffset: 0; }
}