/* Audit Search */
.audit-search-container {
  position: relative;
  flex: 1;
}

.audit-search-input {
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #18181B;
  background-color: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

html.dark .audit-search-input {
  color: #FAFAFA;
  background-color: #09090B;
  border-color: #27272A;
}

.audit-search-input:hover {
  border-color: #D4D4D8;
}

html.dark .audit-search-input:hover {
  border-color: #3F3F46;
}

.audit-search-input:focus {
  border-color: #18181B;
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1);
}

html.dark .audit-search-input:focus {
  border-color: #FAFAFA;
  box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.1);
}

.audit-search-input::placeholder {
  color: #A1A1AA;
}

html.dark .audit-search-input::placeholder {
  color: #71717A;
}

.audit-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #71717A;
  font-size: 16px;
  pointer-events: none;
}

html.dark .audit-search-icon {
  color: #A1A1AA;
}

/* Date Range Picker - Shadcn Style */
.date-range-picker {
  position: relative;
}

.date-apply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background-color: #0078d4;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.date-apply-button:hover {
  background-color: #2e87eb;
}

html.dark .date-apply-button {
  background-color: #0078d4;
}

html.dark .date-apply-button:hover {
  background-color: #2e87eb;
}

.date-range-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #18181B;
  background-color: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 260px;
}

html.dark .date-range-button {
  color: #FAFAFA;
  background-color: #09090B;
  border-color: #27272A;
}

.date-range-button:hover {
  background-color: #F9FAFB;
  border-color: #D4D4D8;
}

html.dark .date-range-button:hover {
  background-color: #18181B;
  border-color: #3F3F46;
}

.date-range-button i:first-child {
  color: #71717A;
  font-size: 16px;
}

html.dark .date-range-button i:first-child {
  color: #A1A1AA;
}

.date-range-button i:last-child {
  margin-left: auto;
  color: #71717A;
  font-size: 12px;
}

html.dark .date-range-button i:last-child {
  color: #A1A1AA;
}

.date-range-text {
  flex: 1;
  text-align: left;
  color: #18181B;
}

html.dark .date-range-text {
  color: #FAFAFA;
}

.date-range-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1000;
  min-width: 260px;
  padding: 16px;
  background-color: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: slideDown 0.15s ease-out;
}

html.dark .date-range-dropdown {
  background-color: #09090B;
  border-color: #27272A;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.date-range-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.date-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-input-group label {
  font-size: 13px;
  font-weight: 500;
  color: #18181B;
  margin-bottom: 0;
}

html.dark .date-input-group label {
  color: #FAFAFA;
}

.date-input-wrapper {
  position: relative;
  width: 100%;
}

.date-input {
  font-size: 14px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  background-color: #FFFFFF;
  color: #18181B;
  width: 100%;
  font-family: 'Inter', sans-serif;
}

.date-input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #71717A;
  font-size: 16px;
  pointer-events: none;
}

html.dark .date-input-icon {
  color: #A1A1AA;
}

html.dark .date-input {
  background-color: #18181B;
  border-color: #3F3F46;
  color: #FAFAFA;
  color-scheme: dark;
}

.date-input:hover {
  border-color: #D4D4D8;
}

html.dark .date-input:hover {
  border-color: #52525B;
}

.date-input:focus {
  border-color: #18181B;
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1);
}

html.dark .date-input:focus {
  border-color: #FAFAFA;
  box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.1);
}

/* Style the calendar picker icon */
.date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: invert(0.5);
}

html.dark .date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}

.date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Additional dark mode datetime picker styling */
html.dark .date-input::-webkit-datetime-edit-fields-wrapper {
  background-color: transparent;
}

html.dark .date-input::-webkit-datetime-edit-text {
  color: #A1A1AA;
}

html.dark .date-input::-webkit-datetime-edit-month-field,
html.dark .date-input::-webkit-datetime-edit-day-field,
html.dark .date-input::-webkit-datetime-edit-year-field,
html.dark .date-input::-webkit-datetime-edit-hour-field,
html.dark .date-input::-webkit-datetime-edit-minute-field {
  color: #FAFAFA;
  background-color: transparent;
}

html.dark .date-input::-webkit-datetime-edit-month-field:focus,
html.dark .date-input::-webkit-datetime-edit-day-field:focus,
html.dark .date-input::-webkit-datetime-edit-year-field:focus,
html.dark .date-input::-webkit-datetime-edit-hour-field:focus,
html.dark .date-input::-webkit-datetime-edit-minute-field:focus {
  background-color: #27272A;
  color: #FAFAFA;
}

.date-range-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.date-range-actions .btn {
  font-size: 13px;
  padding: 6px 12px;
}

/* Override all Bootstrap table borders */
.table tbody td {
  border-bottom: none !important;
  border-top: none !important;
  padding: 14px !important;
  vertical-align: middle !important;
}

/* Audit row specific styles */
.audit-row {
  cursor: default;
  border-top: 1px solid #E4E4E7 !important;
}

.audit-row:first-of-type {
  border-top: none !important;
}

html.dark .audit-row {
  border-top-color: #3F3F46 !important;
}

.audit-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #71717A;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

html.dark .audit-expand-btn {
  color: #A1A1AA;
}

.audit-expand-btn:hover {
  background-color: #F4F4F5;
  color: #18181B;
}

html.dark .audit-expand-btn:hover {
  background-color: #3F3F46;
  color: #FAFAFA;
}

.audit-expand-btn i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.audit-expand-btn.expanded i {
  transform: rotate(180deg);
}

.audit-detail-row {
  animation: slideDown 0.2s ease-out;
}

.audit-detail-row td {
  padding: 16px !important;
  background-color: #FAFAFA !important;
  border-top: none !important;
  border-bottom: none !important;
}

html.dark .audit-detail-row td {
  background-color: #18181B !important;
}

.audit-detail-content {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px;
}

.audit-detail-content textarea.form-control {
  margin: 0;
  border-radius: 6px;
  font-size: 12px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flatpickr-calendar {
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  font-family: 'Inter', sans-serif;
  width: 320px !important;
  padding: 16px;
}

html.dark .flatpickr-calendar {
  background: #09090B;
  border-color: #27272A;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.flatpickr-months {
  margin-bottom: 16px;
}

.flatpickr-month {
  background: transparent;
  color: #18181B;
  fill: #18181B;
  height: auto;
}

html.dark .flatpickr-month {
  color: #FAFAFA;
  fill: #FAFAFA;
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #18181B;
}

html.dark .flatpickr-current-month {
  color: #FAFAFA;
}

.flatpickr-monthDropdown-months {
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  font-size: 14px;
  color: #18181B;
  padding: 4px 8px;
  margin-right: 8px;
}

html.dark .flatpickr-monthDropdown-months {
  background: #18181B;
  border-color: #3F3F46;
  color: #FAFAFA;
}

.numInputWrapper {
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
}

html.dark .numInputWrapper {
  background: #18181B;
  border-color: #3F3F46;
}

.numInputWrapper input {
  background: transparent;
  color: #18181B;
  font-size: 14px;
  padding: 4px 8px;
}

html.dark .numInputWrapper input {
  color: #FAFAFA;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: #71717A;
  padding: 0;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

html.dark .flatpickr-prev-month,
html.dark .flatpickr-next-month {
  fill: #A1A1AA;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: #F4F4F5;
  fill: #18181B;
}

html.dark .flatpickr-prev-month:hover,
html.dark .flatpickr-next-month:hover {
  background: #27272A;
  fill: #FAFAFA;
}

.flatpickr-weekdays {
  background: transparent;
  margin-bottom: 8px;
  height: auto;
}

.flatpickr-weekday {
  background: transparent;
  color: #71717A;
  font-size: 13px;
  font-weight: 500;
  height: auto;
  line-height: 1;
}

html.dark .flatpickr-weekday {
  color: #A1A1AA;
}

.flatpickr-days {
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  gap: 0;
}

.flatpickr-day {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #18181B;
  font-size: 14px;
  font-weight: 400;
  height: 36px;
  line-height: 36px;
  margin: 0;
  max-width: 36px;
  flex-basis: 14.28%;
  transition: all 0.15s ease;
}

html.dark .flatpickr-day {
  color: #FAFAFA;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #A1A1AA;
}

html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay {
  color: #52525B;
}

.flatpickr-day:hover {
  background: #F4F4F5;
  border-color: transparent;
}

html.dark .flatpickr-day:hover {
  background: #27272A;
}

.flatpickr-day.today {
  border: 1px solid #E4E4E7;
  background: transparent;
}

html.dark .flatpickr-day.today {
  border-color: #3F3F46;
}

.flatpickr-day.today:hover {
  background: #F4F4F5;
  border-color: #E4E4E7;
}

html.dark .flatpickr-day.today:hover {
  background: #27272A;
  border-color: #3F3F46;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #18181B !important;
  border-color: #18181B !important;
  color: #FAFAFA !important;
}

html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.startRange,
html.dark .flatpickr-day.endRange {
  background: #FAFAFA !important;
  border-color: #FAFAFA !important;
  color: #18181B !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #18181B !important;
  border-color: #18181B !important;
  color: #FAFAFA !important;
}

html.dark .flatpickr-day.selected:hover,
html.dark .flatpickr-day.startRange:hover,
html.dark .flatpickr-day.endRange:hover {
  background: #FAFAFA !important;
  border-color: #FAFAFA !important;
  color: #18181B !important;
}

.flatpickr-time {
  border-top: 1px solid #E4E4E7;
  margin-top: 16px;
  padding-top: 16px;
}

html.dark .flatpickr-time {
  border-top-color: #27272A;
}

.flatpickr-time-separator,
.flatpickr-am-pm {
  color: #71717A;
}

html.dark .flatpickr-time-separator,
html.dark .flatpickr-am-pm {
  color: #A1A1AA;
}

.flatpickr-time input {
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  color: #18181B;
  font-size: 14px;
}

html.dark .flatpickr-time input {
  background: #18181B;
  border-color: #3F3F46;
  color: #FAFAFA;
}

.flatpickr-time input:hover {
  border-color: #D4D4D8;
  background: #F9FAFB;
}

html.dark .flatpickr-time input:hover {
  border-color: #52525B;
  background: #27272A;
}