/* stylelint-disable at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for consistency */
body {
  font-family: 'Sofia Sans Semi Condensed', sans-serif !important;
}

html {
  font-family: 'Sofia Sans Semi Condensed', sans-serif !important;
}

/* Icon Button component removed in favor of inline Tailwind utilities in views */

/* Tooltip styles removed; implemented via Stimulus controller (tooltip_controller.js) */

/* Keep monospace for code elements but ensure it's readable */
.font-mono, code, pre, kbd, samp {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.recaptcha-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* .btn component removed in favor of inline Tailwind utilities in views */

/* Alert styles removed; flash uses Tailwind utilities directly */

.active {
  @apply text-primary border-b-primary;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #161616 inset !important; /* Adjust the color to match your background */
  -webkit-text-fill-color: #fff !important; /* Adjust the text color to match your design */
}

/* Force all form inputs to have light text regardless of browser/system theme */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="file"],
input[type="color"],
textarea,
select {
  color: #ffffff !important;
  background-color: #262626 !important;
  border-color: #707070 !important;
  border-width: 1px !important;
}

/* Special styling for floating label inputs - target the specific container and input pattern */
.group {
  margin-bottom: 2rem !important;
}

.group input.peer {
  padding-top: 1.25rem !important;
  padding-bottom: 0.5rem !important;
}

/* Ensure floating labels have enough space and are properly positioned */
.group label {
  top: 0.875rem !important;
  z-index: 10 !important;
}

/* When input is focused or has content, move label up with more space */
.group input.peer:focus ~ label,
.group input.peer:not(:placeholder-shown) ~ label {
  transform: translateY(-1.5rem) scale(0.75) !important;
  color: #6F92BF !important;
  background-color: transparent !important;
  padding: 0 0.25rem !important;
}

/* Ensure the label doesn't get cut off by giving it more negative transform */
.group label.peer-focus\:-translate-y-6 {
  transform: translateY(-1.5rem) scale(0.75) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="file"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
  color: #ffffff !important;
  background-color: #262626 !important;
  border-color: #6F92BF !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #6F92BF !important;
}

/* Ensure form labels are always visible */
label {
  color: #ffffff !important;
}

/* Style select dropdowns */
select option {
  background-color: #262626 !important;
  color: #ffffff !important;
}

/* Style checkboxes and radio buttons - normal sized */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #6F92BF !important;
  background-color: #262626 !important;
  border-color: #707070 !important;
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 0.25rem !important;
  border-width: 1px !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
}

input[type="radio"] {
  border-radius: 50% !important;
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #6F92BF !important;
  border-color: #6F92BF !important;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid #6F92BF !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* File input styling */
input[type="file"]::file-selector-button {
  background-color: #3C4973 !important;
  color: #ffffff !important;
  border: 1px solid #707070 !important;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background-color: #6F92BF !important;
}

/* Placeholder text */
::placeholder {
  color: #a1a1aa !important;
  opacity: 1;
  font-family: 'Sofia Sans Semi Condensed', sans-serif !important;
}

::-moz-placeholder {
  color: #a1a1aa !important;
  opacity: 1;
  font-family: 'Sofia Sans Semi Condensed', sans-serif !important;
}

::-webkit-input-placeholder {
  color: #a1a1aa !important;
  opacity: 1;
  font-family: 'Sofia Sans Semi Condensed', sans-serif !important;
}

::-ms-input-placeholder {
  color: #a1a1aa !important;
  opacity: 1;
  font-family: 'Sofia Sans Semi Condensed', sans-serif !important;
}

/* Form validation styles */
input:invalid {
  border-color: #B56576 !important;
}

input:valid {
  border-color: #707070 !important;
}

/* Force overrides for any remaining light theme elements */
.text-gray-900 {
  color: #ffffff !important;
}

.bg-gray-50,
.bg-white {
  background-color: #262626 !important;
}

.border-gray-300 {
  border-color: #707070 !important;
}

/* Force all text to be light colored in elements that might default to dark */
.text-gray-700 {
  color: #e5e5e5 !important;
}

.text-gray-500 {
  color: #a1a1aa !important;
}

/* Force light text on elements that might inherit dark text */
th, td {
  color: #ffffff !important;
}

/* Table headers with light backgrounds should have proper contrast */
.bg-gray-50 th,
.bg-white th,
th.bg-gray-50,
th.bg-white {
  background-color: #374151 !important;
  color: #ffffff !important;
}

/* Custom form classes */
/* Legacy .form-input/.form-select classes removed; forms now use Tailwind utilities via helpers */

/* Kaminari Pagination Styles */
/* Pagination styles removed; using Kaminari Tailwind partials in app/views/kaminari */

/* SVG Image Styling */
img[src*=".svg"] {
  max-width: 100%;
  height: auto;
}

/* Global button box override removed; buttons are styled via Tailwind utilities */

/* Force consistent styling for any remaining system elements */
input, select, textarea, button {
  /* Font family is now handled by universal selector above */
}

/* Override system color scheme preferences */
* {
  color-scheme: dark !important;
}

/* Additional overrides for any remaining light theme elements */
.bg-white,
.bg-gray-50,
.bg-gray-100 {
  background-color: #262626 !important;
}

.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700 {
  color: #ffffff !important;
}

.border-white,
.border-gray-50,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: #707070 !important;
}

/* Force dark mode styles regardless of system preference */
.dark\:bg-gray-800,
.bg-white {
  background-color: #1f2937 !important;
}

.dark\:border-gray-700,
.border-b {
  border-color: #374151 !important;
}

.dark\:text-white,
.text-gray-900 {
  color: #ffffff !important;
}

/* Override any table row background that might be light */
tr.bg-white,
tbody tr {
  background-color: #1f2937 !important;
}

tr.bg-white:hover,
tbody tr:hover {
  background-color: #374151 !important;
}

/* Ensure form field borders are always visible */
input:not([type="hidden"]),
select,
textarea {
  border: 1px solid #707070 !important;
  min-height: 2.5rem !important;
}

/* Fix any remaining webkit appearance issues */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  background-color: #6F92BF !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* Ensure error messages and validation states are visible */
#error_explanation {
  background-color: #7f1d1d !important;
  color: #fecaca !important;
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #dc2626 !important;
  margin-bottom: 1rem !important;
}

#error_explanation h2 {
  color: #fecaca !important;
  font-weight: bold !important;
  margin-bottom: 0.5rem !important;
}

#error_explanation ul {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
}

#error_explanation li {
  color: #fecaca !important;
  margin-bottom: 0.25rem !important;
}

/* Ensure any remaining generic elements follow dark theme */
div, span, p, h1, h2, h3, h4, h5, h6, label, li, td, th, a {
  color: inherit;
  /* Font family is now handled by universal selector above */
}

/* Body/background colors now handled via Tailwind classes on <body> */

/* stylelint-enable at-rule-no-unknown */

/* Tournament show page now uses Tailwind utilities directly in views */
/*
 * 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.
 *


 */