/* TALFAN UI components (dashboard + auth pages).
   Purpose: consistent form controls (textfields, selects, textarea, checkboxes)
   and optional calendar picker styling (flatpickr) without a build step. */

:root {
  --ui-ink: rgb(15 23 42); /* slate-900 */
  --ui-muted: rgb(100 116 139); /* slate-500 */
  --ui-border: rgb(226 232 240); /* slate-200 */
  --ui-border-strong: rgb(203 213 225); /* slate-300 */
  --ui-surface: #ffffff;
  --ui-surface-muted: rgb(248 250 252); /* slate-50 */

  --ui-radius: 16px; /* matches rounded-2xl */
  --ui-radius-sm: 12px; /* matches rounded-xl */

  --ui-shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ui-ring: 0 0 0 4px rgba(15, 23, 42, 0.10);
}

/* Django default form rendering helpers */
form p { margin: 0; }
form p + p { margin-top: 12px; }

label,
.ui-label {
  display: block;
  font-weight: 800;
  font-size: 13px;
  color: var(--ui-ink);
  margin-bottom: 6px;
}

.helptext {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-muted);
}

ul.errorlist {
  margin: 10px 0 0;
  padding: 10px 12px;
  list-style: none;
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 14px;
  background: rgba(185, 28, 28, 0.04);
  color: rgb(153 27 27);
  font-weight: 700;
  font-size: 13px;
}

/* Core control
   Also applied to plain inputs/selects/textarea so legacy templates keep working.
   Use :where(...) to keep specificity low so Tailwind utility classes can override safely. */
:where(.ui-control),
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-ink);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
  transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

:where(.ui-control)::placeholder,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])::placeholder,
textarea::placeholder {
  color: rgb(148 163 184); /* slate-400 */
}

:where(.ui-control):focus,
:where(.ui-control):focus-visible,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none;
  border-color: rgba(15, 23, 42, 0.25);
  box-shadow: var(--ui-ring), var(--ui-shadow-soft);
}

:where(.ui-control):disabled,
:where(.ui-control)[aria-disabled="true"],
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: var(--ui-surface-muted);
}

:where(.ui-control--sm) {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: var(--ui-radius-sm);
}

:where(.ui-control--pill) { border-radius: 999px; }

textarea { resize: vertical; }

:where(.ui-control--tall) { min-height: 96px; }

/* Select: keep native, but make it feel like the other controls */
select,
select.ui-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Checkbox + radio should not inherit textfield sizing */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 4px;
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface);
  accent-color: rgb(15 23 42);
}

/* Switch (optional): apply class ui-switch to a checkbox input */
input[type="checkbox"].ui-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--ui-border-strong);
  background: rgb(241 245 249); /* slate-100 */
  position: relative;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

input[type="checkbox"].ui-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
  transition: transform 140ms ease;
}

input[type="checkbox"].ui-switch:checked {
  background: rgb(15 23 42); /* slate-900 */
  border-color: rgba(15, 23, 42, 0.35);
}

input[type="checkbox"].ui-switch:checked::after { transform: translateX(18px); }

input[type="checkbox"].ui-switch:focus-visible {
  outline: none;
  box-shadow: var(--ui-ring);
}

/* Flatpickr theme tweaks (only applies if flatpickr is present). */
.flatpickr-calendar {
  border-radius: 18px;
  border: 1px solid var(--ui-border);
  box-shadow: 0 18px 55px rgba(16, 24, 40, 0.10);
  font-family: inherit;
}

.flatpickr-months .flatpickr-month { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.flatpickr-day {
  border-radius: 12px;
  font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: rgb(15 23 42);
  border-color: rgb(15 23 42);
}

.flatpickr-day.today {
  border-color: rgba(15, 23, 42, 0.35);
}