/* ==============================================
   forms.css - Form Enhancements, Inputs
   ============================================== */

/* Form Enhancements */
.form-label {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.form-control,
.form-select {
  background-color: var(--card);
  border-color: var(--stroke);
  color: var(--text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--card);
  border-color: #2563eb;
  color: var(--text);
}

/* Placeholder styles for dark theme */
.form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-control::-webkit-input-placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Dark theme specific placeholder enhancement */
:root[data-theme="dark"] .form-control::placeholder {
  color: #9ca3af;
  opacity: 0.8;
}

:root[data-theme="dark"] .form-control::-webkit-input-placeholder {
  color: #9ca3af;
  opacity: 0.8;
}

:root[data-theme="dark"] .form-control::-moz-placeholder {
  color: #9ca3af;
  opacity: 0.8;
}

:root[data-theme="dark"] .form-control:-ms-input-placeholder {
  color: #9ca3af;
  opacity: 0.8;
}

/* Number input spinner arrows - remove for both themes */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Form Section Styling */
.glass {
  transition: all 0.3s ease;
}

.glass:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Input Groups */
.input-group-text {
  background-color: var(--card);
  border-color: var(--stroke);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

:root[data-theme="dark"] .input-group-text {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Time input helpers */
.input-group .form-control[pattern*="[0-9]"],
.input-group .time-input {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.05em;
}

/* Clock icon styling in time inputs */
.input-group .input-group-text .bi-clock {
  color: var(--muted);
  font-size: 1rem;
}

:root[data-theme="dark"] .input-group .input-group-text .bi-clock {
  color: #9ca3af;
}

/* Time and Date Input Styling */
input[type="time"],
input[type="date"] {
  position: relative;
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--stroke);
  padding: 0.5rem 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  padding: 0.25rem;
  border-radius: 4px;
}

input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: rgba(79, 70, 229, 0.1);
}

/* Dark theme time/date input fixes */
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Time input text styling */
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="time"]::-webkit-datetime-edit-text {
  color: var(--muted);
  padding: 0 0.25rem;
}

input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  color: var(--text);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  background-color: transparent;
}

input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
  background-color: rgba(79, 70, 229, 0.15);
  outline: none;
  color: var(--text);
}

:root[data-theme="dark"] input[type="time"]::-webkit-datetime-edit-hour-field:focus,
:root[data-theme="dark"] input[type="time"]::-webkit-datetime-edit-minute-field:focus,
:root[data-theme="dark"] input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
  background-color: rgba(124, 58, 237, 0.25);
}

/* Date input text styling */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="date"]::-webkit-datetime-edit-text {
  color: var(--muted);
  padding: 0 0.125rem;
}

input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--text);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  background-color: transparent;
}

input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background-color: rgba(79, 70, 229, 0.15);
  outline: none;
  color: var(--text);
}

:root[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-day-field:focus,
:root[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-month-field:focus,
:root[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background-color: rgba(124, 58, 237, 0.25);
}

/* Dark theme badge fixes */
:root[data-theme="dark"] .badge.bg-light {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text) !important;
  border: 1px solid var(--stroke);
}

:root[data-theme="dark"] .badge.text-dark {
  color: var(--text) !important;
}

/* Searchable Select Dropdown Theming */
.searchable-select-menu {
  background-color: var(--card) !important;
  border-color: var(--stroke) !important;
}

.searchable-select-search {
  background-color: var(--bg) !important;
  border-color: var(--stroke) !important;
}

.searchable-select-search .input-group-text {
  background-color: var(--card) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}

.searchable-select-search .form-control {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}

.searchable-select-option {
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}

.searchable-select-option:not(.active):hover {
  background-color: rgba(79, 70, 229, 0.08) !important;
}

:root[data-theme="dark"] .searchable-select-option:not(.active):hover {
  background-color: rgba(99, 102, 241, 0.15) !important;
}

:root[data-theme="dark"] .searchable-select-menu {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* AD search dropdown items */
.ad-search-result-item {
  transition: background-color 0.15s ease;
}

.ad-search-result-item:hover {
  background-color: rgba(79, 70, 229, 0.08) !important;
}

:root[data-theme="dark"] .ad-search-result-item:hover {
  background-color: rgba(99, 102, 241, 0.12) !important;
}

/* AD search dropdown user name - ensure visibility in dark theme on hover */
:root[data-theme="dark"] .ad-search-result-item:hover .ad-user-name {
  color: rgba(255, 255, 255, 0.95) !important;
}

:root[data-theme="dark"] .ad-search-result-item:hover .ad-user-title {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Form help text - ensure visibility in dark theme */
:root[data-theme="dark"] .form-text {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* View mode toggle buttons - light theme */
.btn-group .btn-check:checked + label.btn-outline-secondary,
.btn-group .btn-check:active + label.btn-outline-secondary,
.btn-group .btn-check:checked + label.btn.btn-outline-secondary,
.btn-group .btn-check:active + label.btn.btn-outline-secondary {
  background-color: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}

/* View mode toggle buttons - dark theme adaptation */
:root[data-theme="dark"] .btn-group label.btn-outline-secondary {
  --bs-btn-color: rgba(255, 255, 255, 0.75);
  --bs-btn-border-color: rgba(255, 255, 255, 0.25);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.1);
  --bs-gradient: none;
  background-color: transparent !important;
}

:root[data-theme="dark"] .btn-group .btn-check:not(:checked) + label.btn-outline-secondary {
  background-color: transparent !important;
}

:root[data-theme="dark"] .btn-group .btn-check:checked + label.btn-outline-secondary,
:root[data-theme="dark"] .btn-group .btn-check:active + label.btn-outline-secondary {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

:root[data-theme="dark"] .btn-group label.btn-outline-secondary:active,
:root[data-theme="dark"] .btn-group label.btn-outline-secondary.active,
:root[data-theme="dark"] .btn-group label.btn-outline-secondary:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Form switch toggle styling - dark theme adaptation */
:root[data-theme="dark"] .form-switch .form-check-input {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  /* Temporary: bright white circle indicator */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .form-switch .form-check-input:checked {
  background-color: #6366f1;
  border-color: #6366f1;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .form-switch .form-check-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Regular checkbox styling - dark theme adaptation */
:root[data-theme="dark"] .form-check-input[type="checkbox"]:not(.form-switch .form-check-input) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

:root[data-theme="dark"] .form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked {
  background-color: #6366f1;
  border-color: #6366f1;
}

:root[data-theme="dark"] .form-check-input[type="checkbox"]:not(.form-switch .form-check-input):focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

/* Border styling for dark theme */
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end,
:root[data-theme="dark"] .border {
  border-color: var(--stroke) !important;
}

/* Search field styles */
.search-field-wrapper {
  position: relative;
  min-width: 250px;
  flex-grow: 1;
}

.search-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.9rem;
}

.search-field-input {
  padding: 8px 12px 8px 36px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  border: 0 !important;
  color: var(--text) !important;
}

.search-field-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: none !important;
  border: none !important;
  color: var(--muted) !important;
}

:root[data-theme="dark"] .search-field-input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .search-field-input::placeholder {
  color: var(--muted) !important;
  opacity: 0.6;
}