/* Form Styles */

/* v1.07d: Improved select readability */
select, option {
  background-color: #0b1226 !important;
  color: #e5e7eb !important;
  border-color: #2a3d63 !important;
}
select:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

/* Light theme form fixes */
[data-theme="light"] select, 
[data-theme="light"] option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #d1d5db !important;
}

[data-theme="light"] select:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6 !important;
}

/* Datetime input calendar icon visibility */
.datetime-input {
  /* Make the calendar icon more visible on dark backgrounds */
  filter: brightness(1.2) contrast(1.1);
  border: 2px solid var(--br) !important;
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  padding: 0.75rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.datetime-input:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  background: var(--input-bg) !important;
  transform: translateY(-1px);
}

.datetime-input::-webkit-calendar-picker-indicator {
  /* Specifically target the calendar icon */
  filter: invert(1) brightness(1.5);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.datetime-input::-webkit-calendar-picker-indicator:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.datetime-input::-webkit-datetime-edit {
  color: var(--ink) !important;
  font-weight: 500;
}

.datetime-input::-webkit-datetime-edit-fields-wrapper {
  color: var(--ink) !important;
}

.datetime-input::-webkit-datetime-edit-text {
  color: var(--ink) !important;
}

.datetime-input::-webkit-datetime-edit-month-field,
.datetime-input::-webkit-datetime-edit-day-field,
.datetime-input::-webkit-datetime-edit-year-field,
.datetime-input::-webkit-datetime-edit-hour-field,
.datetime-input::-webkit-datetime-edit-minute-field {
  color: var(--ink) !important;
  background: transparent !important;
}

/* Light theme datetime input fixes */
[data-theme="light"] .datetime-input {
  border: 2px solid var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .datetime-input:focus {
  border-color: var(--input-focus) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .datetime-input::-webkit-calendar-picker-indicator {
  filter: none;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .datetime-input::-webkit-calendar-picker-indicator:hover {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .datetime-input::-webkit-datetime-edit,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-fields-wrapper,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-text,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-month-field,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-day-field,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-year-field,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-hour-field,
[data-theme="light"] .datetime-input::-webkit-datetime-edit-minute-field {
  color: var(--ink) !important;
  background: transparent !important;
}

/* Specific targeting for edit punch modal datetime inputs */
input[type="datetime-local"]#editPunchStart,
input[type="datetime-local"]#editPunchEnd {
  width: 100% !important;
  padding: 0.75rem !important;
  border: 2px solid var(--input-border) !important;
  border-radius: 8px !important;
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

input[type="datetime-local"]#editPunchStart:focus,
input[type="datetime-local"]#editPunchEnd:focus {
  border-color: var(--input-focus) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  background: var(--input-bg) !important;
  transform: translateY(-1px) !important;
}

input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator,
input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.5) !important;
  cursor: pointer !important;
  padding: 4px !important;
  margin-left: 8px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
}

input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.1) !important;
}

input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-text,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-month-field,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-day-field,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-year-field,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]#editPunchStart::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-text,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-month-field,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-day-field,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-year-field,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]#editPunchEnd::-webkit-datetime-edit-minute-field {
  color: var(--ink) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

/* Light theme specific fixes for edit punch modal */
[data-theme="light"] input[type="datetime-local"]#editPunchStart,
[data-theme="light"] input[type="datetime-local"]#editPunchEnd {
  border: 2px solid var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] input[type="datetime-local"]#editPunchStart:focus,
[data-theme="light"] input[type="datetime-local"]#editPunchEnd:focus {
  border-color: var(--input-focus) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator {
  filter: none !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator:hover,
[data-theme="light"] input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Force calendar icon visibility - maximum specificity */
.modal input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator,
.modal input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  filter: none !important;
  padding: 4px !important;
  margin-left: 8px !important;
  transition: all 0.2s ease !important;
}

.modal input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator:hover,
.modal input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.1) !important;
}

/* Light theme calendar icon */
[data-theme="light"] .modal input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator,
[data-theme="light"] .modal input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .modal input[type="datetime-local"]#editPunchStart::-webkit-calendar-picker-indicator:hover,
[data-theme="light"] .modal input[type="datetime-local"]#editPunchEnd::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}