@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary: 34 197 94; /* emerald-500 */
    --primary-dark: 22 163 74; /* emerald-600 */
    --secondary: 99 102 241; /* indigo-400 */
    --accent: 251 146 60; /* orange-400 */
    --success: 34 197 94;
    --danger: 239 68 68; /* red-500 */
    --warning: 251 191 36; /* amber-400 */
    --dark: 17 24 39; /* gray-900 */
    --light: 249 250 251; /* gray-50 */
  }

  body {
    @apply bg-gradient-to-br from-gray-50 to-gray-100 text-gray-900 antialiased min-h-screen;
  }

  /* Global cursor styles */
  a, button, [role="button"],
  input[type="submit"], input[type="button"],
  .cursor-pointer {
    cursor: pointer;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }
}

@layer components {
  /* Links */
  a.link {
    @apply text-emerald-600 hover:text-emerald-700 underline decoration-emerald-300 underline-offset-2 transition-colors;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    font-size: 0.875rem;
  }

  /* Login Animation */
  .login-page-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    animation: fadeIn 0.3s ease-in-out;
  }

  .spinning-logo {
    animation: spin 1s linear infinite;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .btn-primary {
    @apply btn bg-emerald-700 text-white hover:bg-emerald-800 focus:ring-emerald-700 shadow-sm hover:shadow;
  }

  .btn-secondary {
    @apply btn bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-indigo-500;
  }

  .btn-danger {
    @apply btn bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Old button class for compatibility */
  .button {
    @apply btn-primary;
  }

  /* Forms */
  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors;
    font-size: 0.875rem;
  }

  /* Prevent mobile zoom on inputs by ensuring 16px font size on mobile */
  @media (max-width: 768px) {
    .form-input {
      font-size: 16px !important;
    }
  }

  .form-select {
    @apply form-input pr-10;
  }

  .form-label {
    @apply block font-medium text-gray-700 mb-1;
    font-size: 0.875rem;
  }

  label.label {
    @apply form-label;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden transition-all hover:shadow-xl;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.9), rgba(255,255,255,1));
  }

  .card-body {
    @apply p-4 sm:p-5;
  }

  .card-header {
    @apply px-4 py-3 sm:px-5 sm:py-3 bg-gradient-to-r from-emerald-50 to-teal-50 border-b border-emerald-100;
  }

  /* Tables */
  .table-clean {
    @apply w-full divide-y divide-gray-200 shadow-sm rounded-lg overflow-hidden;
  }

  .table-clean thead {
    @apply bg-gradient-to-r from-gray-50 to-gray-100;
  }

  .table-clean th {
    @apply px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider;
  }

  .table-clean td {
    @apply px-3 py-2 text-gray-900;
    font-size: 0.875rem;
  }

  .table-clean tbody tr {
    @apply hover:bg-emerald-50/50 transition-all;
  }

  .table-clean tbody tr:nth-child(even) {
    @apply bg-gray-50/50;
  }

  /* Alerts */
  .alert {
    @apply p-4 rounded-lg flex items-start space-x-3;
  }

  .alert-info {
    @apply alert bg-blue-50 text-blue-800 border border-blue-200;
  }

  .alert-success {
    @apply alert bg-emerald-50 text-emerald-800 border border-emerald-200;
  }

  .alert-warning {
    @apply alert bg-amber-50 text-amber-800 border border-amber-200;
  }

  .alert-danger {
    @apply alert bg-red-50 text-red-800 border border-red-200;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-success {
    @apply badge bg-emerald-100 text-emerald-800;
  }

  .badge-danger {
    @apply badge bg-red-100 text-red-800;
  }

  .badge-warning {
    @apply badge bg-amber-100 text-amber-800;
  }

  .badge-info {
    @apply badge bg-blue-100 text-blue-800;
  }

  /* Real-time update animations */
  .game-updated {
    animation: highlightUpdate 3s ease-in-out;
  }

  @keyframes highlightUpdate {
    0% {
      @apply bg-amber-50 border-amber-300;
      transform: scale(1.02);
    }
    50% {
      @apply bg-amber-50 border-amber-300;
      transform: scale(1.02);
    }
    100% {
      @apply bg-white border-gray-200;
      transform: scale(1);
    }
  }

  /* Pick status classes */
  .pick-correct {
    @apply bg-emerald-50 border-emerald-300;
  }

  .pick-incorrect {
    @apply bg-red-50 border-red-300;
  }

  /* Team Theming Classes */
  
  .team-school-text {
    color: #111827;
    font-weight: 600;
  }
  
  .team-mascot-text {
    color: #1f2937;
    font-weight: 500;
  }
  
  .team-themed-home-selected .team-school-text,
  .team-themed-home-selected .team-mascot-text {
    color: var(--home-mixed-text, #000000) !important;
    font-weight: 600;
  }
  
  .team-themed-away-selected .team-school-text,
  .team-themed-away-selected .team-mascot-text {
    color: var(--away-mixed-text, #000000) !important;
    font-weight: 600;
  }
  
  .team-themed-home-unselected .team-school-text,
  .team-themed-away-unselected .team-school-text {
    color: #111827;
  }
  
  .team-themed-home-unselected .team-mascot-text,
  .team-themed-away-unselected .team-mascot-text {
    color: #374151;
  }
  
  .pick-option .team-school-text {
    color: #111827;
  }
  
  .pick-option .team-mascot-text {
    color: #4b5563;
  }
  
  .picked .team-school-text {
    color: #030712;
    font-weight: 700;
  }
  
  .picked .team-mascot-text {
    color: #1f2937;
    font-weight: 600;
  }
  .team-themed-home-selected {
    background: color-mix(in srgb, var(--home-primary, #6B7280) 20%, white 80%);
    border-color: var(--home-primary, #6B7280);
    border-width: 3px;
    color: var(--home-primary-text, #000000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-primary, #6B7280) 15%, white 85%);
    position: relative;
  }

  .team-themed-home-selected::after {
    content: "✓";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: var(--home-primary, #6B7280);
    color: var(--home-primary-text, #FFFFFF);
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.625rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }

  @media (min-width: 640px) {
    .team-themed-home-selected::after {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.875rem;
    }
  }

  .team-themed-home-unselected {
    background: color-mix(in srgb, var(--home-primary, #6B7280) 3%, white 97%);
    border-color: color-mix(in srgb, var(--home-primary, #6B7280) 20%, #E5E7EB 80%);
  }

  .team-themed-home-hover:hover {
    background: color-mix(in srgb, var(--home-primary, #6B7280) 12%, white 88%);
    border-color: var(--home-primary, #6B7280);
    transform: scale(1.02);
  }

  .team-themed-home-correct {
    background: color-mix(in srgb, var(--home-primary, #6B7280) 30%, white 70%);
    border-color: var(--home-primary, #6B7280);
    border-width: 3px;
    position: relative;
  }

  .team-themed-home-correct::after {
    content: "✓";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: #10B981; /* emerald-500 */
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
  }

  @media (min-width: 640px) {
    .team-themed-home-correct::after {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.875rem;
    }
  }

  /* Incorrect pick styling for home team */
  .team-themed-home-incorrect {
    background: color-mix(in srgb, var(--home-primary, #6B7280) 10%, white 90%);
    border-color: #EF4444; /* red-500 */
    border-width: 3px;
    position: relative;
  }

  .team-themed-home-incorrect::after {
    content: "✕";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: #EF4444; /* red-500 */
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
  }

  @media (min-width: 640px) {
    .team-themed-home-incorrect::after {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.875rem;
    }
  }

  /* Away team theming */
  .team-themed-away-selected {
    background: color-mix(in srgb, var(--away-primary, #6B7280) 20%, white 80%);
    border-color: var(--away-primary, #6B7280);
    border-width: 3px;
    color: var(--away-primary-text, #000000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--away-primary, #6B7280) 15%, white 85%);
    position: relative;
  }

  .team-themed-away-selected::after {
    content: "✓";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: var(--away-primary, #6B7280);
    color: var(--away-primary-text, #FFFFFF);
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.625rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }

  @media (min-width: 640px) {
    .team-themed-away-selected::after {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.875rem;
    }
  }

  .team-themed-away-unselected {
    background: color-mix(in srgb, var(--away-primary, #6B7280) 3%, white 97%);
    border-color: color-mix(in srgb, var(--away-primary, #6B7280) 20%, #E5E7EB 80%);
  }

  .team-themed-away-hover:hover {
    background: color-mix(in srgb, var(--away-primary, #6B7280) 12%, white 88%);
    border-color: var(--away-primary, #6B7280);
    transform: scale(1.02);
  }

  .team-themed-away-correct {
    background: color-mix(in srgb, var(--away-primary, #6B7280) 30%, white 70%);
    border-color: var(--away-primary, #6B7280);
    border-width: 3px;
    position: relative;
  }

  .team-themed-away-correct::after {
    content: "✓";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: #10B981; /* emerald-500 */
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
  }

  @media (min-width: 640px) {
    .team-themed-away-correct::after {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.875rem;
    }
  }

  /* Incorrect pick styling for away team */
  .team-themed-away-incorrect {
    background: color-mix(in srgb, var(--away-primary, #6B7280) 10%, white 90%);
    border-color: #EF4444; /* red-500 */
    border-width: 3px;
    position: relative;
  }

  .team-themed-away-incorrect::after {
    content: "✕";
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: #EF4444; /* red-500 */
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
  }

  @media (min-width: 640px) {
    .team-themed-away-incorrect::after {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.875rem;
    }
  }

  /* Game Preview Modal Animations */
  .game-preview-modal-enter {
    @apply opacity-0 scale-95;
  }

  .game-preview-modal-enter-active {
    @apply opacity-100 scale-100 transition-all duration-200 ease-out;
  }
  
  /* Game Preview Modal Scrolling */
  .game-preview-modal {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
  }
  
  .game-preview-modal::-webkit-scrollbar {
    width: 6px;
  }
  
  .game-preview-modal::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
  }
  
  .game-preview-modal::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded;
  }
  
  .game-preview-modal::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
  
  /* Ensure proper scrolling on mobile */
  @media (max-width: 640px) {
    .game-preview-modal {
      -webkit-overflow-scrolling: touch;
    }
  }

  .game-preview-modal-exit {
    @apply opacity-100 scale-100;
  }

  .game-preview-modal-exit-active {
    @apply opacity-0 scale-95 transition-all duration-200 ease-in;
  }

  .game-preview-overlay-enter {
    @apply opacity-0;
  }

  .game-preview-overlay-enter-active {
    @apply opacity-100 transition-opacity duration-200 ease-out;
  }

  .game-preview-overlay-exit {
    @apply opacity-100;
  }

  .game-preview-overlay-exit-active {
    @apply opacity-0 transition-opacity duration-200 ease-in;
  }

  /* Enhanced modal scrolling */
  .game-preview-modal {
    scroll-behavior: smooth;
  }

  .game-preview-modal::-webkit-scrollbar {
    @apply w-2;
  }

  .game-preview-modal::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
  }

  .game-preview-modal::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
  }

  .game-preview-modal::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }

}

/* Print Styles */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page {
    size: letter;
    margin: 0;
    padding: 0;
  }

  html {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body:before,
  body:after,
  html:before,
  html:after {
    content: none !important;
    border: none !important;
    display: none !important;
  }

  nav,
  .navbar,
  button,
  .alert,
  .alert-info,
  .alert-danger,
  .alert-warning,
  .badge,
  [onclick*="print"],
  .game-preview-modal,
  .flash,
  .flash-notice,
  .flash-alert,
  #score-override-form,
  #score-override-alert,
  header,
  .header,
  .page-header {
    display: none !important;
  }

  body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 9pt !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0.15in 0.3in !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .space-y-6, .space-y-3, .space-y-4, .space-y-8 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .space-y-6 > *, .space-y-3 > *, .space-y-4 > * {
    margin-top: 0 !important;
  }

  .max-w-6xl, .max-w-7xl, .max-w-5xl {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .mx-auto {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
  }

  main, .container {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .card {
    box-shadow: none !important;
    border: none !important;
    border-width: 0px !important;
    border-style: none !important;
    outline: none !important;
    background: white !important;
    margin: 0px !important;
    padding: 0px !important;
    border-radius: 0px !important;
    overflow: visible !important;
  }

  .card:before,
  .card:after {
    border: 0 !important;
    content: none !important;
  }

  .card-body {
    padding: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    border-width: 0px !important;
    border-style: none !important;
    outline: 0px !important;
    box-sizing: border-box !important;
  }

  .card-body:before,
  .card-body:after {
    border: 0 !important;
    content: none !important;
  }

  .space-y-6,
  .max-w-6xl,
  .mx-auto,
  div[data-controller*="picks"],
  main,
  article,
  section,
  .container,
  body > *,
  body > * > *,
  .card:before,
  .card:after,
  .card-body:before,
  .card-body:after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  *, *::before, *::after {
    border: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
  }

  div.card {
    border: 0px solid transparent !important;
    border-width: 0px !important;
  }

  #root, #app, #__next, .app-wrapper, .page-wrapper, .content-wrapper,
  main > *, body > div, body > div > div {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .pick-row {
    border: 0.5px solid #d1d5db !important;
    border-left: 0.5px solid #d1d5db !important;
    border-right: 0.5px solid #d1d5db !important;
    border-top: 0.5px solid #d1d5db !important;
    border-bottom: 0.5px solid #d1d5db !important;
  }

  .pick-option {
    border: 0.5px solid #d1d5db !important;
  }

  .card-body > .flex.items-center.justify-between {
    border-bottom: 1px solid #000 !important;
  }

  .picked,
  .team-themed-home-selected,
  .team-themed-away-selected {
    border: 1.5px solid #000 !important;
  }

  table, thead, tbody, tfoot, tr, th, td {
    border: 0 !important;
    border-style: none !important;
    outline: 0 !important;
  }

  [data-controller*="picks"],
  [data-controller*="pick-sheet-updates"] {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .card-body > .flex.items-center.justify-between {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.35rem !important;
    border-bottom: 1px solid #000 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .card-body > .flex.items-center.justify-between > div:has(.text-emerald-600) {
    display: none !important;
  }

  .card-body > .flex.items-center.justify-between > div:first-child {
    text-align: center !important;
    width: 100% !important;
  }

  .card-body h1 {
    font-size: 14pt !important;
    font-weight: bold !important;
    margin: 0 !important;
    color: black !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: block !important;
  }

  .card-body p {
    font-size: 8pt !important;
    margin: 0.1rem 0 0 0 !important;
    color: #4a5568 !important;
    line-height: 1 !important;
    text-align: center !important;
    display: block !important;
  }

  .text-3xl {
    font-size: 11pt !important;
    font-weight: bold !important;
  }

  .text-emerald-600 {
    color: #10b981 !important;
  }

  .text-red-600 {
    color: #ef4444 !important;
  }

  .text-xs.text-gray-500 {
    font-size: 6pt !important;
    color: #6b7280 !important;
  }

  .space-y-3 {
    margin: 0 !important;
  }

  .space-y-3 > * + * {
    margin-top: 0.65rem !important;
  }

  .pick-row {
    background: white !important;
    border: 0.5px solid #d1d5db !important;
    border-radius: 0 !important;
    padding: 0.3rem 0.4rem !important;
    margin: 0.35rem 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .pick-row .flex.items-center.justify-between {
    margin-bottom: 0 !important;
    display: none !important;
  }

  .grid.grid-cols-3 {
    display: grid !important;
    grid-template-columns: 1fr 30px 1fr !important;
    gap: 0.1rem !important;
    align-items: center !important;
  }

  .pick-option {
    padding: 0.15rem 0.2rem !important;
    border: 0.5px solid #d1d5db !important;
    border-radius: 2px !important;
    min-height: auto !important;
    transition: none !important;
  }

  .pick-option .flex.flex-col {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    gap: 0.2rem !important;
  }

  .pick-option .space-y-2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.2rem !important;
  }

  .pick-option .space-y-2 > * + * {
    margin-top: 0 !important;
  }

  .pick-option img,
  .h-12.w-12 {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }

  .pick-option .font-medium,
  .pick-option .text-xs {
    display: inline !important;
    margin: 0 !important;
  }

  .pick-option .font-medium {
    font-size: 7pt !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: #000 !important;
  }

  .pick-option .text-xs.text-gray-500.hidden.sm\\:block,
  .pick-option .text-xs.text-gray-500,
  .pick-option .text-xs:not(.text-blue-600) {
    display: none !important;
  }

  .pick-option .text-blue-600 {
    font-size: 6pt !important;
    font-weight: bold !important;
    color: #2563eb !important;
    margin-left: 0.2rem !important;
    display: inline !important;
  }

  .pick-option .min-h-\\[1rem\\] {
    min-height: 0 !important;
  }

  .text-2xl.font-black {
    font-size: 7pt !important;
    font-weight: bold !important;
    color: #4b5563 !important;
    margin: 0 !important;
  }

  [data-start-time] {
    font-size: 6pt !important;
    font-weight: normal !important;
    color: #6b7280 !important;
    position: absolute !important;
    top: 0.05rem !important;
    right: 0.1rem !important;
  }

  .pick-row {
    position: relative !important;
  }

  .picked,
  .team-themed-home-selected,
  .team-themed-away-selected {
    background: #e5e7eb !important;
    border: 1.5px solid #000 !important;
    font-weight: bold !important;
    position: relative !important;
  }

  .picked::after,
  .team-themed-home-selected::after,
  .team-themed-away-selected::after {
    content: "✓" !important;
    position: absolute !important;
    top: 0.05rem !important;
    right: 0.15rem !important;
    font-size: 6pt !important;
    font-weight: bold !important;
    color: #000 !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    z-index: 10 !important;
  }

  .team-themed-home-selected::before,
  .team-themed-away-selected::before,
  .team-themed-home-correct::after,
  .team-themed-away-correct::after,
  .team-themed-home-incorrect::after,
  .team-themed-away-incorrect::after,
  .picked::before {
    display: none !important;
  }

  .team-themed-home-unselected,
  .team-themed-away-unselected,
  .bg-gray-50 {
    background: white !important;
    border: 0.5px solid #d1d5db !important;
  }

  .home-score,
  .visiting-score {
    display: none !important;
  }

  #tiebreaker-form {
    margin-top: 0.1rem !important;
    padding-top: 0.1rem !important;
    border-top: 1px solid #000 !important;
    page-break-inside: avoid !important;
  }

  #tiebreaker-form .flex.flex-col {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
  }

  #tiebreaker-form .label {
    font-size: 7pt !important;
    font-weight: bold !important;
    margin: 0 !important;
  }

  #tiebreaker-form .italic,
  #tiebreaker-form .text-sm.label {
    display: none !important;
  }

  #tiebreaker-form .border.rounded {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #tiebreaker-form input[type="text"] {
    border: 1px solid #000 !important;
    background: white !important;
    text-align: center !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    width: 40px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #tiebreaker-form input[type="submit"],
  #tiebreaker-button,
  #tiebreaker-form > div > div:last-child {
    display: none !important;
  }

  .pick-correct {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
  }

  .pick-incorrect {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
  }

  .badge-success,
  .badge-danger,
  .badge-info,
  .badge-warning {
    display: none !important;
  }

  *:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .card-body > .space-y-3 {
    orphans: 3;
    widows: 3;
  }

  .pick-row:nth-child(n+12) {
    padding: 0.08rem 0.15rem !important;
    margin: 0.08rem 0 !important;
  }

  .pick-row:nth-child(n+12) .pick-option {
    padding: 0.1rem 0.15rem !important;
  }

  .pick-row:nth-child(n+12) img {
    width: 12px !important;
    height: 12px !important;
  }

  .pick-row:nth-child(n+12) .font-medium {
    font-size: 6.5pt !important;
  }

  .pick-row:nth-child(n+12) .text-blue-600 {
    font-size: 5.5pt !important;
  }

  .pick-row:nth-child(n+16) {
    padding: 0.06rem 0.1rem !important;
    margin: 0.06rem 0 !important;
  }

  .pick-row:nth-child(n+16) img {
    width: 11px !important;
    height: 11px !important;
  }

  .pick-row:nth-child(n+16) .font-medium {
    font-size: 6pt !important;
  }

  .text-center:has(button[onclick*="print"]) {
    display: none !important;
  }
}