/*
 * Application-wide styles
 */

/* vanillajs-datepicker — Flowbite style */
.datepicker {
  font-family: inherit;
}

.datepicker-picker {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  padding: 1rem;
  background: #fff;
  display: inline-block;
}

/* --- Header: month/year navigation --- */
.datepicker-header {
  padding-bottom: 0;
}

.datepicker-header .datepicker-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Arrow buttons — override base flex: 0 0 14.28% */
.datepicker-controls .prev-button,
.datepicker-controls .next-button {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: #6b7280;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.datepicker-controls .prev-button:hover,
.datepicker-controls .next-button:hover {
  background: #f3f4f6;
  color: #111827;
}

/* Month/year button (centered) */
.datepicker-controls .view-switch {
  display: flex;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  flex: auto;
}

.datepicker-controls .view-switch:hover {
  background: #f3f4f6;
}

/* --- Weekday labels --- */
.datepicker-grid .datepicker-cell.day-of-week {
  display: none;
}

.datepicker-view .dow {
  text-align: center;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

.datepicker-view .days-of-week {
  margin-bottom: 0.25rem;
}

/* --- Day cells --- */
.datepicker-cell {
  border-radius: 0.5rem;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  line-height: 2.25rem;
  height: 2.25rem;
  border: 0;
  cursor: pointer;
}

.datepicker-cell:not(.disabled):not(.selected):hover {
  background: #f3f4f6;
}

.datepicker-cell.today:not(.selected) {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 600;
  border: none;
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
}

/* Show prev/next month days as disabled gray (Flowbite style) */
.datepicker-cell.prev,
.datepicker-cell.next {
  color: #d1d5db;
  visibility: visible;
}

.datepicker-cell.disabled {
  color: #d1d5db;
}

.datepicker-cell.focused:not(.selected) {
  background: #eef2ff;
  outline: none;
}

/* --- Grid --- */
.datepicker-grid {
  width: 16rem;
}

/* --- Month/Year picker grid views --- */
.datepicker-view.months .datepicker-cell,
.datepicker-view.years .datepicker-cell {
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.5rem;
  line-height: 2.5rem;
  visibility: visible;
}

.datepicker-view.months .datepicker-cell:not(.disabled):not(.selected):hover,
.datepicker-view.years .datepicker-cell:not(.disabled):not(.selected):hover {
  background: #f3f4f6;
  color: #111827;
}

.datepicker-view.months .datepicker-cell.selected,
.datepicker-view.years .datepicker-cell.selected {
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
}

.datepicker-view.months .datepicker-cell.focused:not(.selected),
.datepicker-view.years .datepicker-cell.focused:not(.selected) {
  background: #eef2ff;
  outline: none;
}

/* --- Today / Clear footer buttons --- */
.datepicker-footer {
  background: transparent;
  box-shadow: none;
}

.datepicker-footer .datepicker-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.datepicker-footer .button {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
  text-align: center;
  width: 50%;
}

.datepicker-footer .today-button {
  background: #4f46e5;
  color: #fff;
  font-weight: 500;
}

.datepicker-footer .today-button:hover {
  background: #4338ca;
}

.datepicker-footer .clear-button {
  background: #f9fafb;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.datepicker-footer .clear-button:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Tom Select — styled to match tailwind-select */
.ts-wrapper {
  font-family: inherit;
}

/* --- Trigger / control --- */
.ts-wrapper.single .ts-control {
  background: #fff;
  border: none;
  border-radius: 0.375rem;               /* rounded-md */
  box-shadow: inset 0 0 0 1px #d1d5db;   /* ring-1 ring-gray-300 */
  padding: 0.375rem 2.5rem 0.375rem 0.75rem; /* py-1.5 pl-3 pr-10 */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;                          /* text-gray-900 */
  cursor: pointer;
}

.ts-wrapper.single .ts-control:hover {
  box-shadow: inset 0 0 0 1px #d1d5db;
}

.ts-wrapper.single.focus .ts-control {
  box-shadow: inset 0 0 0 2px #4f46e5;    /* ring-2 ring-indigo-600 */
  outline: none;
}

/* Chevron caret */
.ts-wrapper.single .ts-control::after {
  border: none;
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
}

/* Selected item text */
.ts-wrapper.single .ts-control .item {
  color: #111827;
}

/* Placeholder text */
.ts-wrapper.single .ts-control input::placeholder {
  color: #9ca3af;                          /* text-gray-400 */
}

.ts-wrapper .ts-control input {
  font-size: 0.875rem;
  color: #111827;
}

/* --- Dropdown panel --- */
.ts-dropdown {
  border: none;
  border-radius: 0.375rem;                /* rounded-md */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
              0 4px 6px -4px rgba(0,0,0,0.1),
              0 0 0 1px rgba(0,0,0,0.05); /* shadow-lg ring-1 ring-black/5 */
  margin-top: 0.25rem;                    /* mt-1 */
  background: #fff;
  overflow: hidden;
  padding: 0.25rem 0;                     /* py-1 */
}

.ts-dropdown .ts-dropdown-content {
  max-height: 15rem;                       /* max-h-60 */
  padding: 0;
}

/* --- Options --- */
.ts-dropdown .option {
  padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* py-2 pl-3 pr-9 */
  border-radius: 0;
  font-size: 0.875rem;
  color: #111827;                          /* text-gray-900 */
  cursor: pointer;
  position: relative;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: #4f46e5;                     /* bg-indigo-600 */
  color: #fff;                             /* text-white */
}

/* Check mark on selected option */
.ts-dropdown .option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234f46e5'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* When hovered/active, check mark turns white */
.ts-dropdown .option[aria-selected="true"]:hover::after,
.ts-dropdown .option[aria-selected="true"].active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Selected option text is semibold */
.ts-dropdown .option[aria-selected="true"] {
  font-weight: 600;
}

/* Optgroup headers */
.ts-dropdown .optgroup-header {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* --- Multi-select tags --- */
.ts-wrapper.multi .ts-control {
  background: #fff;
  border: none;
  border-radius: 0.375rem;
  box-shadow: inset 0 0 0 1px #d1d5db;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  min-height: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.ts-wrapper.multi.focus .ts-control {
  box-shadow: inset 0 0 0 2px #4f46e5;
  outline: none;
}

.ts-wrapper.multi .ts-control > div {
  background: #eef2ff;                    /* bg-indigo-50 */
  color: #4338ca;                          /* text-indigo-700 */
  border: none;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #c7d2fe;                    /* bg-indigo-200 */
  color: #3730a3;
}

/* Remove button in multi-select tags */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #c7d2fe;
  margin-left: 0.375rem;
  padding: 0 0.375rem;
  color: #6366f1;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}

/* Search input inside multi-select */
.ts-wrapper.multi .ts-control input {
  font-size: 0.875rem;
  color: #111827;
}

.ts-wrapper.multi .ts-control input::placeholder {
  color: #9ca3af;
}