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

@layer components {
  .number-input-no-arrows {
      @apply appearance-none w-10 h-10 text-center border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50;
    -moz-appearance: textfield;
  }
  
  .number-input-no-arrows::-webkit-outer-spin-button,
  .number-input-no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

@layer components {
  .sudoku-grid {
    @apply grid grid-cols-9 gap-0 bg-black w-full max-w-md mx-auto;
    @apply aspect-square; /* Fix aspect ratio to ensure square grid */
  }
  
  .sudoku-grid-num-selector {
      @apply grid grid-cols-9 gap-0 bg-black w-full max-w-md mx-auto;
  }
  
  .sudoku-cell-num {
      @apply bg-white flex items-center justify-center relative;
      @apply border border-black/30; /* Light border for all cells */
      @apply text-base sm:text-lg md:text-xl font-bold; /* responsive text size */
  }
  
  .sudoku-cell-num.highlighted {
      @apply bg-blue-200;
  }

  .sudoku-cell {
    @apply bg-white flex items-center justify-center relative;
    @apply border border-black/30; /* Light border for all cells */
    @apply text-base sm:text-lg md:text-xl font-bold; /* Responsive text size */
  }
  
  .sudoku-cell.user-input {
    @apply bg-blue-200;
  }
  
  .sudoku-cell.user-input.highlighted {
      @apply bg-blue-200;
  }

  .sudoku-cell.user-input.highlighted.errored {
      @apply bg-red-100;
  }

  .sudoku-cell.user-input.errored {
      @apply bg-red-100;
  }
  
  /* 3x3 Section Borders - Right borders (simplified) */
  .sudoku-cell:nth-child(3n) {
    @apply !border-r-2 !border-r-black;
  }
  
  /* 3x3 Section Borders - Bottom borders (combined) */
  .sudoku-cell:nth-child(n+19):nth-child(-n+27),
  .sudoku-cell:nth-child(n+46):nth-child(-n+54),
  .sudoku-cell:nth-child(n+73):nth-child(-n+81) {
    @apply !border-b-2 !border-b-black;
  }
  
  /* Left edge of the grid */
  .sudoku-cell:nth-child(9n+1) {
    @apply !border-l-2 !border-l-black;
  }

  /* Top edge of the grid */
  .sudoku-cell:nth-child(-n+9) {
    @apply !border-t-2 !border-t-black;
  }

  .highlighted {
    @apply bg-yellow-200;
  }

  .tooltip {
    display: none;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
  }

  .tooltip[data-show] {
    display: block;
  }

}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */