/* NBA 2K Creator Program Styles */

html.nba-2k {
  &:root {
    /* NBA 2K27 Brand Colors (verified against nba.2k.com/2k27 --av-* tokens) */
    --nba2k-red: #FF0000;
    --nba2k-red-hover: #9B2016;  /* live site darkens on hover */
    --nba2k-red-active: #941E14;
    --nba2k-red-deep: #C8102E;
    --nba2k-red-muted: rgba(255, 0, 0, 0.15);
    --nba2k-blue: #1D428A;
    --nba2k-gold: #b8965a;
    --nba2k-black: #000000;
    --nba2k-dark: #1A1A1A;
    --nba2k-dark-elevated: #1F1F1F;
    --nba2k-gray: #333333;
    --nba2k-white: #ffffff;
    --nba2k-white-muted: #CDCDCD;
    --nba2k-btn-radius: 20px;
    /* Unchecked checkbox fill/border - light enough to see on the dark card */
    --nba2k-checkbox-bg: #4A4A4A;
    --nba2k-checkbox-bg-hover: #626262;
    --nba2k-checkbox-border: #D4D4D4;

    /* Variable Overrides */
    --color-palette-branding-normal: var(--nba2k-red);
    --color-palette-branding-lucent: var(--nba2k-dark);
    --app-styling-background: var(--nba2k-black);
    --app-styling-slate-level-1: var(--nba2k-dark);

    /* Cards */
    --card--background: var(--nba2k-dark-elevated);
    --card--color: var(--nba2k-white);
    --card--title-color: var(--nba2k-white);
    --card--subtitle-color: var(--nba2k-red);
    --card--content-color: var(--nba2k-white-muted);

    /* Links - brighter on hover for contrast (the dark #9B2016 is button-only) */
    --text-colors-link-default: var(--nba2k-red);
    --text-colors-link-hover: #FF3333;

    /* Buttons */
    --input-buttons-primary-bg-default: var(--nba2k-red);
    --input-buttons-primary-text-default: var(--nba2k-white);
    --input-buttons-primary-bg-hover: var(--nba2k-red-hover);
    --input-buttons-primary-text-hover: var(--nba2k-white);

    --input-buttons-secondary-bg-default: transparent;
    --input-buttons-secondary-text-default: var(--nba2k-white);
    --input-buttons-secondary-bg-hover: rgba(255, 255, 255, 0.2);
    --input-buttons-secondary-text-hover: var(--nba2k-white);
    --input-buttons-secondary-border: 2px solid var(--nba2k-white);

    --input-buttons-primary-bg-disabled: rgba(255, 0, 0, 0.25);
    --input-buttons-primary-text-disabled: rgba(255, 255, 255, 0.4);

    /* App COC PIPs */
    --ui-bg-inverted: var(--nba2k-red);
    --ui-border-accented: var(--nba2k-red);

    /* Nuxt UI primary (Add buttons, focus outlines) defaults to green */
    --ui-primary: var(--nba2k-red);

    /* Borders */
    --color-palette-border: var(--nba2k-gray);

    /* Override blue-grey palette used by cards (incl. the -trans variant used
       by activation/claim pages, which otherwise falls back to slate) */
    --color-palette-blue-greys-200: var(--nba2k-dark-elevated);
    --color-palette-blue-greys-300: var(--nba2k-gray);
    --color-palette-blue-greys-200-trans: rgba(26, 26, 26, 0.85);
    --app-styling-slate-level-1-trans: rgba(26, 26, 26, 0.85);

    /* Override any remaining blue accents */
    --color--accent: 255 0 0; /* RGB for red */
    --color-primary-500: var(--nba2k-red);
    --color-primary-600: var(--nba2k-red-deep);

    /* Fonts - live 2K27 site uses "Sharp Grotesk Variable" (N27 cut) for headings/body
       and "RecklessNeue" Medium Italic for buttons/nav labels. We have Sharp Grotesk Web
       Bold12/Medium15; the N27 italics and RecklessNeue need to come from the 2K team.
       Until then: synthesized italic Sharp Grotesk + system serif italic. */
    --primary-font-family: 'Sharp Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --n27-label-font-family: 'RecklessNeue', Georgia, 'Times New Roman', serif;

    & body {
      font-family: var(--primary-font-family);
      background-color: var(--nba2k-black);
      color: var(--nba2k-white);
      letter-spacing: 0.01em;
      /* body.dark redefines Nuxt UI's primary (green) - re-assert brand red */
      --ui-primary: var(--nba2k-red) !important;
    }
  }

  /* Global text refinements, matching the live 2K27 site: big display headings
     are uppercase italic, sub-headings are uppercase upright. The serif is
     reserved for top nav and CTA buttons (their RecklessNeue is an italic cut). */
  & h1, & h2 {
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  & h3, & h4 {
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* 2K27 section heading treatment - live site headings are Bold Italic, no glow
     (the neon-glow headlines there are pre-rendered art, not CSS) */
  & .n27-heading {
    font-family: var(--primary-font-family);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--nba2k-white);
  }

  /* Neon divider, as above the live site's section titles: a hot red bar with
     a brighter core and layered glow */
  & .n27-rule {
    width: min(600px, 70%);
    height: 2px;
    border: none;
    border-radius: 1px;
    margin-inline: auto;
    background: #FF1F1F;
    box-shadow:
      0 0 4px #FF0000,
      0 0 12px rgba(255, 0, 0, 0.95),
      0 0 28px rgba(255, 0, 0, 0.55);
  }

  & p {
    color: var(--nba2k-white-muted);
    line-height: 1.6;
  }

  /* ---- Neon accents ---- */

  /* primary CTAs glow, brighter on hover (checkboxes are nui buttons too - exclude) */
  & button.nui:not(.social-button):not([class*="social"]):not([role="checkbox"]):not(:disabled),
  & button.claimkey:not(:disabled),
  & .dashboard-link {
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.35);
  }

  & button.nui:not(.social-button):not([class*="social"]):not([role="checkbox"]):not(:disabled):hover,
  & button.claimkey:not(:disabled):hover,
  & .dashboard-link:hover {
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.95), 0 0 32px rgba(255, 0, 0, 0.55);
  }

  /* focused inputs get the neon edge */
  & input:focus, & textarea:focus, & select:focus,
  & .ui-select-trigger:focus, & .ui-select-trigger--open {
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.65) !important;
  }

  /* red-bordered dashboard cards read as neon frames */
  & .sidebar-nav-link, & .action-card.attention, & .testing-notice {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5), inset 0 0 14px rgba(255, 0, 0, 0.1);
  }

  & .sidebar-nav-link:hover, & .action-card.attention:hover {
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.85), inset 0 0 14px rgba(255, 0, 0, 0.15);
  }

  /* Form styling */
  & .UForm {
    & label, & label span {
      font-family: var(--primary-font-family);
      color: var(--nba2k-white);
      font-weight: 500;
    }

    & .UFormHeading h2 {
      color: var(--nba2k-red);
      font-family: var(--primary-font-family);
    }
  }

  /* Input styling */
  & input, & textarea, & select {
    background-color: var(--nba2k-dark) !important;
    border: 1px solid var(--nba2k-gray) !important;
    color: var(--nba2k-white) !important;
    transition: border-color 0.2s ease;

    &:focus {
      border-color: var(--nba2k-red) !important;
      outline: none;
    }

    &::placeholder {
      color: var(--nba2k-white-muted);
    }
  }

  /* UI Select component - dark theme (component defaults are light) */
  & .ui-select-trigger {
    background: var(--nba2k-dark) !important;
    border-color: var(--nba2k-gray) !important;
    color: var(--nba2k-white) !important;

    &:hover:not(.ui-select-trigger--disabled) {
      border-color: var(--nba2k-white-muted) !important;
    }

    &:focus, &.ui-select-trigger--open {
      border-color: var(--nba2k-red) !important;
    }
  }

  & .ui-select-placeholder { color: var(--nba2k-white-muted) !important; }
  & .ui-select-single-value, & .ui-select-comma-values { color: var(--nba2k-white) !important; }

  & .ui-select-dropdown {
    background: var(--nba2k-dark-elevated) !important;
    border-color: var(--nba2k-gray) !important;
  }

  & .ui-select-search-input {
    background: var(--nba2k-dark) !important;
    color: var(--nba2k-white) !important;
    border-color: var(--nba2k-gray) !important;
  }

  & .ui-select-option,
  & .virtual-select-option {
    color: var(--nba2k-white) !important;

    &:hover,
    &.ui-select-option--focused,
    &.virtual-select-option--focused {
      background: rgba(255, 255, 255, 0.12) !important;
      color: var(--nba2k-white) !important;
    }

    &.ui-select-option--selected,
    &.virtual-select-option--selected {
      background: var(--nba2k-red-muted) !important;
      color: var(--nba2k-white) !important;
    }
  }

  & .virtual-select-option-check {
    color: var(--nba2k-red) !important;
  }

  & .ui-select-tag {
    background: var(--nba2k-red-muted) !important;
    color: var(--nba2k-white) !important;
  }

  & .ui-select-no-results { color: var(--nba2k-white-muted) !important; }

  /* Light mode input styling (for forms with light="input-only") */
  & .UForm--light-input-only input,
  & .UForm--light-input-only textarea,
  & .UForm--light-input-only select,
  & .BaseForm[light="input-only"] input,
  & .BaseForm[light="input-only"] textarea,
  & .BaseForm[light="input-only"] select {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #e0e0e0 !important;

    &:focus {
      border-color: var(--nba2k-red) !important;
    }
  }

  /* Light mode inputs - override UI variables for proper placeholder colors */
  & .UForm--light-input-only input,
  & .UForm--light-input-only textarea,
  & .BaseForm[light="input-only"] input,
  & .BaseForm[light="input-only"] textarea {
    --ui-text-dimmed: #6b7280 !important;
  }

  /* Light mode placeholder colors - explicit selectors for better compatibility */
  & .UForm--light-input-only input::placeholder,
  & .UForm--light-input-only textarea::placeholder,
  & .BaseForm[light="input-only"] input::placeholder,
  & .BaseForm[light="input-only"] textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
  }

  /* Card refinements */
  & .BaseCard, & [class*="card"] {
    border: 1px solid var(--nba2k-gray);
    border-radius: 8px;
  }

  /* Button refinements - live 2K27 .av-button: 20px radius, italic serif label,
     background-color 0.2s transition */
  & button:not(.nui) {
    font-family: var(--n27-label-font-family);
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.02em;
    border-radius: var(--nba2k-btn-radius) !important;
    transition: background-color 0.2s, transform 0.1s;
  }

  & .UButton, & .BaseButton {
    border-radius: var(--nba2k-btn-radius) !important;
  }

  /* Primary CTA buttons (nui) get the 2K27 treatment, platform/social buttons keep
     their rounded-rect shape as in the 2K27 retail layout */
  & button.nui:not(.social-button):not([class*="social"]):not([role="checkbox"]) {
    border-radius: var(--nba2k-btn-radius) !important;
    font-family: var(--n27-label-font-family);
    font-style: italic;
  }

  /* Social buttons - keep platform colors, just style refinements */
  & .social-btn,
  & [class*="social-button"] {
    border-radius: 6px !important;

    /* Disabled buttons drop their brand background for a flat dark gray, so the
       per-network label color has to be overridden too - TikTok's black-on-Glint
       label is unreadable against it. */
    &:disabled {
      background-color: var(--nba2k-gray) !important;
      color: var(--nba2k-white-muted) !important;
    }
  }

  /* Application Modal styling */
  & .app-header {
    background-color: var(--nba2k-dark);
    color: var(--nba2k-white);

    & h2 {
      font-family: var(--primary-font-family);
      font-weight: 700;
    }
  }

  /* Mode selection styling */
  & .mode-selection-wrapper {
    --bg-dark: var(--nba2k-black);
    --bg: var(--nba2k-dark-elevated);
    --bg-light: var(--nba2k-gray);
    --text: var(--nba2k-white);
    --text-muted: var(--nba2k-white-muted);
    --primary: var(--nba2k-red);

    & .mode-option {
      border: 1px solid var(--nba2k-gray);

      &:hover {
        border-color: var(--nba2k-red);
      }
    }
  }

  /* Claim button - the shared ActivationPage hardcodes green; brand it red.
     Selector mirrors the component's nesting to out-rank its !important rule. */
  & .page .grant .header .claim-keys .actions button.claimkey,
  & button.claimkey {
    --_background: var(--nba2k-red) !important;
    --_focus: var(--nba2k-red-hover) !important;
    --_color: var(--nba2k-white) !important;

    &:disabled {
      --_background: var(--input-buttons-primary-bg-disabled) !important;
      --_focus: var(--input-buttons-primary-bg-disabled) !important;
      --_color: var(--input-buttons-primary-text-disabled) !important;
    }
  }

  /* Key list number input */
  & .number-btn {
    background-color: var(--nba2k-red) !important;
    color: var(--nba2k-white) !important;

    &:hover {
      background-color: var(--nba2k-red-hover) !important;
    }
  }

  /* Success state */
  & .success-icon {
    color: var(--nba2k-red) !important;
  }

  /* Dashboard Layout Overrides */
  & #layout .inner:has(.nba2k-dashboard-wrapper) {
    max-width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Custom Form Fields in Dashboard */
  & .custom-field-card {
    & label {
      font-family: var(--primary-font-family);
      color: var(--nba2k-white);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
    }

    & .field-description {
      color: var(--nba2k-white-muted);
      font-size: 0.875rem;
    }

    & input,
    & textarea,
    & select {
      background: rgba(0, 0, 0, 0.6) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: var(--nba2k-white) !important;
      border-radius: 8px;

      &:focus {
        border-color: var(--nba2k-red) !important;
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.2);
      }
    }

    & .multiselect {
      background: rgba(0, 0, 0, 0.6) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;

      &__tags {
        background: transparent !important;
        border: none !important;
      }

      &__input {
        background: transparent !important;
        color: var(--nba2k-white) !important;
      }

      &__content-wrapper {
        background: rgba(17, 17, 17, 0.95) !important;
        border: 1px solid rgba(255, 0, 0, 0.3) !important;
      }

      &__option--highlight {
        background: rgba(255, 0, 0, 0.2) !important;
        color: var(--nba2k-red) !important;
      }
    }

    & input[type="checkbox"] {
      accent-color: var(--nba2k-red);
    }
  }

  /* Status Badges */
  & .status-badge {
    &.approved,
    &.active,
    &.completed {
      background: rgba(34, 197, 94, 0.2) !important;
      color: rgb(34, 197, 94) !important;
      border: 1px solid rgba(34, 197, 94, 0.5) !important;
    }

    &.pending,
    &.under_review {
      background: rgba(184, 150, 90, 0.2) !important;
      color: var(--nba2k-gold) !important;
      border: 1px solid rgba(184, 150, 90, 0.5) !important;
    }

    &.rejected,
    &.declined {
      background: rgba(255, 0, 0, 0.2) !important;
      color: #ff6b6b !important;
      border: 1px solid rgba(255, 0, 0, 0.5) !important;
    }
  }

  /* Progress Bars */
  & .progress-bar {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;

    & .progress-fill {
      background: linear-gradient(90deg, var(--nba2k-red-deep) 0%, var(--nba2k-red) 100%);
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    }
  }

  /* Alert Boxes */
  & .alert-box {
    &.alert-success {
      background: rgba(255, 0, 0, 0.1);
      border: 1px solid rgba(255, 0, 0, 0.5);
      color: var(--nba2k-red);
    }

    &.alert-error {
      background: rgba(255, 0, 0, 0.1);
      border: 1px solid rgba(255, 0, 0, 0.5);
      color: #ff6b6b;
    }

    &.alert-warning {
      background: rgba(184, 150, 90, 0.1);
      border: 1px solid rgba(184, 150, 90, 0.5);
      color: var(--nba2k-gold);
    }
  }

  /* Loader Override */
  & .loader-spinner {
    border-top-color: var(--nba2k-red) !important;
  }

  /* Checkboxes - brand red instead of the component's green.
     NOTE: the ring (border) is a box-shadow, so never set `box-shadow: none` here. */
  & button[role="checkbox"] {
    border-radius: 4px !important;

    &[data-state="checked"], &[aria-checked="true"] {
      background: var(--nba2k-red) !important;
      color: var(--nba2k-white) !important;
      --ui-border-accented: var(--nba2k-red);
    }

    /* Unchecked boxes need to read clearly against the dark card (a11y) */
    &[data-state="unchecked"], &[aria-checked="false"] {
      background: var(--nba2k-checkbox-bg) !important;
      --ui-border-accented: var(--nba2k-checkbox-border);
    }

    &[data-state="unchecked"]:hover, &[aria-checked="false"]:hover {
      background: var(--nba2k-checkbox-bg-hover) !important;
    }
  }

  /* Form validation message - re-theme the yellow alert to brand red */
  & .bg-yellow-50 {
    background: rgba(255, 0, 0, 0.08) !important;
    border-color: var(--nba2k-red) !important;
    color: #FF9E97 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.35), inset 0 0 14px rgba(255, 0, 0, 0.08);
  }

  & .bg-yellow-50 p,
  & .bg-yellow-50 li {
    color: inherit;
  }

  /* Tooltip Styling */
  & [data-tooltip] {
    &::after {
      background: var(--nba2k-dark-elevated);
      border: 1px solid var(--nba2k-gray);
      color: var(--nba2k-white);
    }
  }

  /* Activation Page Mobile Fallbacks */
  @media (max-width: 744px) {
    & .page {
      gap: 32px;
      padding-block-end: 20px;
    }

    & .page .about {
      flex-direction: column;
      padding: 0 20px;
      gap: 16px;
    }

    & .page .about .info,
    & .page .about .managers {
      width: 100%;
    }

    & .page .grant {
      padding: 20px;
    }

    & .page .grant .header {
      flex-direction: column;
      gap: 16px;
    }

    & .page .grant .header .details {
      width: 100%;
    }

    & .page .grant .header .claim-keys .title {
      display: none;
    }

    & .page .grant .header .claim-keys .actions {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
    }

    & .page .grant .header .claim-keys .actions .select-wrapper {
      width: 100%;
    }

    & .page .grant .header .claim-keys .actions button {
      width: 100%;
    }

    & .page .grant .keys .key {
      grid-template-areas: "code" "platform" "status" "button";
      grid-template-columns: 1fr;
    }
  }
}

/* Sharp Grotesk Font Faces */
@font-face {
  font-family: 'Sharp Grotesk';
  src: url('/fonts/nba-2k/SharpGroteskWeb-Medium15.woff2') format('woff2'),
       url('/fonts/nba-2k/SharpGroteskWeb-Medium15.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Grotesk';
  src: url('/fonts/nba-2k/SharpGroteskWeb-Medium15.woff2') format('woff2'),
       url('/fonts/nba-2k/SharpGroteskWeb-Medium15.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* NOTE: SharpGroteskWeb-Bold12.woff2 is NOT a bold of the face above - its internal
   family name is "Sharp Grotesk Web UltCond 12" and its glyphs are ~32% narrower than
   Medium15. Mapping it to weight 700 made every <strong>/<h1> switch to an ultra-
   condensed face mid-sentence. Weight 700 is remapped to Medium15 below to
   keep a consistent width. Replace with a real "Sharp Grotesk Web Bold 15" from 2K. */
@font-face {
  font-family: 'Sharp Grotesk';
  src: url('/fonts/nba-2k/SharpGroteskWeb-Medium15.woff2') format('woff2'),
       url('/fonts/nba-2k/SharpGroteskWeb-Medium15.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Medium15 has no heavier companion, so weight 700 above resolves to the same
   outlines as body text - bold would read as no emphasis at all. Until 2K sends a
   real bold 15 cut, borrow Archivo's, tuned to sit continuously in a Sharp Grotesk
   line. Every number below is measured from the two font binaries, not eyeballed:
     wdth 70      - Archivo's default is 24% wider than Medium15; 70 lands at 103%,
                    the few percent a genuine bold runs wider than its regular
     font-size    - Archivo x-height 526 vs Medium15 564, so scale by 564/526
     word-spacing - Archivo's space is 147/1000em effective vs Medium15's 231
   Delete this whole block when a matching bold arrives. */
@font-face {
  font-family: 'Archivo Variable';
  src: url('/fonts/Archivo/Archivo-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

html.nba-2k strong,
html.nba-2k b {
  font-family: 'Archivo Variable', var(--primary-font-family);
  font-variation-settings: 'wght' 700, 'wdth' 70;
  font-size: 1.072em;
  word-spacing: 0.084em;
}

/* TikTok button: use Glint color (#2DCCD3) instead of default black */
html.nba-2k:root {
  --social-tiktok-bg: #2DCCD3;
  --social-tiktok-hover: #25b3b9;
  --social-tiktok-text: #000000;
}