/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Handsontable custom styles */
.htBold {
  font-weight: bold;
  background-color: #f0f0f0;
}


/* Warning box for purchase order adjustments */
.warning-box {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
}

/* ============================================
   Semantic Theme Color Classes
   Use these instead of hardcoded color names
   ============================================ */

/* Primary color backgrounds */
.bg-primary-600 {
  background-color: var(--primary-color);
}
.bg-primary-500 {
  background-color: var(--primary-color);
}
.bg-primary-100 {
  background-color: var(--primary-color-light);
}

/* Primary color text */
.text-primary-600 {
  color: var(--primary-color);
}
.text-primary-500 {
  color: var(--primary-color);
}
.text-primary-100 {
  color: var(--primary-color-light);
}

/* Primary color borders */
.border-primary-500 {
  border-color: var(--primary-color);
}
.border-primary-300 {
  border-color: var(--primary-color-light);
}

/* Primary hover states */
.hover\:bg-primary-700:hover {
  background-color: var(--primary-color-hover);
}
.hover\:bg-primary-500:hover {
  background-color: var(--primary-color-hover);
}
.hover\:text-primary-900:hover {
  color: var(--primary-color-hover);
}
.hover\:text-primary-700:hover {
  color: var(--primary-color-hover);
}
.hover\:text-primary-500:hover {
  color: var(--primary-color);
}
.hover\:text-primary-100:hover {
  color: var(--primary-color-light);
}

/* Primary focus states */
.focus\:border-primary-500:focus {
  border-color: var(--primary-color);
}
.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-color);
}

/* Primary ring colors */
.ring-primary-500 {
  --tw-ring-color: var(--primary-color);
}
.focus-within\:ring-primary-500:focus-within {
  --tw-ring-color: var(--primary-color);
}
.focus-visible\:outline-primary-600:focus-visible {
  outline-color: var(--primary-color);
}

/* Primary gradients */
.from-primary-600 {
  --tw-gradient-from: var(--primary-color) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-500 {
  --tw-gradient-from: var(--primary-color) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary-700 {
  --tw-gradient-to: var(--primary-color-hover) var(--tw-gradient-to-position);
}

/* Group hover states */
.group-hover\:ring-primary-300:hover,
.group:hover .group-hover\:ring-primary-300 {
  --tw-ring-color: var(--primary-color-light);
}
.group-hover\:text-primary-500:hover,
.group:hover .group-hover\:text-primary-500 {
  color: var(--primary-color);
}

/* Accent color classes */
.bg-accent-600 {
  background-color: var(--accent-color);
}
.bg-accent-500 {
  background-color: var(--accent-color);
}
.bg-accent-100 {
  background-color: var(--accent-color-light);
}
.bg-accent-50 {
  background-color: var(--accent-color-light);
}
.text-accent-700 {
  color: var(--accent-color);
}
.text-accent-600 {
  color: var(--accent-color);
}
.text-accent-500 {
  color: var(--accent-color);
}

/* Accent gradients */
.to-accent-700 {
  --tw-gradient-to: var(--accent-color) var(--tw-gradient-to-position);
}
.to-accent-600 {
  --tw-gradient-to: var(--accent-color) var(--tw-gradient-to-position);
}

/* Theme gradient utilities */
.bg-gradient-primary-accent {
  background-image: linear-gradient(to right, var(--primary-color), var(--accent-color));
}
.bg-gradient-primary-accent-br {
  background-image: linear-gradient(to bottom right, var(--primary-color), var(--accent-color));
}

/* Accent hover states */
.hover\:text-accent-700:hover {
  color: var(--accent-color);
}

/* Accent ring colors */
.ring-accent-600\/20 {
  --tw-ring-color: rgb(from var(--accent-color) r g b / 0.2);
}

/* ============================================
   Custom Select Dropdown Styling
   All selects use a custom chevron for consistency
   ============================================ */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.125em 1.125em;
  padding-right: 2.5rem !important;
}

/* ============================================
   Standardized Form Element Heights
   Buttons: 38px, Inputs/Dropdowns: 38px
   ============================================ */

/* Standard button height: 38px
   Using h-[38px] for explicit height control */
.btn-standard {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* Standard input height: 38px
   Input text: 20px (text-sm = 14px line-height ~20px)
   Padding: 8px top + 8px bottom = 16px
   Border: 1px top + 1px bottom = 2px
   Total: 20 + 16 + 2 = 38px */
.input-standard {
  height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* ~20px */
}

/* Tailwind override for consistent button/input heights */
/* Buttons with py-2 should be 38px */
button.inline-flex,
a.inline-flex[class*="rounded-md"],
[type="submit"].inline-flex {
  min-height: 38px;
}

/* Standard inputs and selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
button[data-form-dropdown-target="button"] {
  height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Textarea should not have fixed height */
textarea {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}