:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --brand: #201559;
  --brand-hover: #2c1d7a;
  /* Same colors as space-separated RGB, for Tailwind's bg-brand/10 etc. */
  --brand-rgb: 32 21 89;
  --brand-hover-rgb: 44 29 122;
}

.theme-switching,
.theme-switching * {
  transition: none !important;
}

/* Dark theme: `dark` class on <html>, set in base.html from the user's
   choice (or the OS setting when it's "System"). */
:root.dark {
  --background: #0b0f19;
  --foreground: #e2e8f0;
  --brand: #4a3aa8;
  --brand-hover: #5c48c4;
  --brand-rgb: 74 58 168;
  --brand-hover-rgb: 92 72 196;
}

html {
  overflow-x: hidden;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  font-size: 1.125rem;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

/* badges.py's icon filters always add a trailing margin for the icon+label
   layout they're normally used in; a standalone icon centered in its own
   circular badge doesn't want that margin pulling it off-center. */
.icon-chip > .material-symbols-outlined {
  margin-right: 0;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

dialog#app-modal {
  padding: 0;
  border: none;
  border-radius: 0.75rem;
  width: min(32rem, calc(100vw - 2rem));
  background: transparent;
  color: inherit;
  /* The UA default is `overflow: auto`, which clips any absolutely
     positioned content (like .dropdown-panel below) that extends past the
     dialog's own box — e.g. the rating dropdown in the complete-task modal. */
  overflow: visible;
}

dialog#app-modal::backdrop {
  background: rgb(15 23 42 / 0.5);
}

dialog#app-modal:not([open]) {
  display: none;
}

/* Base styling for plain Django-rendered form widgets, so templates don't
   need to hand-add Tailwind classes to every input/select/textarea. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background: var(--background);
  color: var(--foreground);
  /* !important: Tailwind's preflight zeroes out padding and resets font-size
     to 100% (of the parent) for these elements, and its Play-CDN stylesheet
     can land after this one in the DOM, letting that reset silently win the
     tie otherwise. */
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem;
  font-family: inherit !important;
}

/* Some browsers render the native <option> popup at the UA default size
   instead of inheriting the <select>'s font-size, so it needs setting explicitly. */
select option {
  font-size: 0.875rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select:not([multiple]) {
  height: 2.375rem;
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="date"],
.dark input[type="number"],
.dark input[type="file"],
.dark select,
.dark textarea {
  border-color: #334155;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Swap native dropdown/calendar affordances for the Material Symbols glyphs
   used everywhere else in the UI, so form controls look consistent. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%2364748b' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}

input[type="date"] {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%2364748b' d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.dark select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%2394a3b8' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}

.dark input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%2394a3b8' d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
}

textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Task description: shorter by default, still resizable within a capped range. */
textarea.textarea-compact {
  min-height: 2.5rem;
  max-height: 10rem;
}

/* Custom dropdown: JS (app.js) wraps every single-select in a <details> and
   visually hides the real <select> (kept for form submission, keyboard focus,
   and screen readers), replacing its native popup with this styled panel so
   the option list isn't at the mercy of the OS's native menu font size. */
.sr-only-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dropdown-select {
  position: relative;
}

.dropdown-select > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 2.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dropdown-select > summary::-webkit-details-marker {
  display: none;
}

.dropdown-select .dropdown-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-select .dropdown-panel {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 0.25rem;
  max-height: 16rem;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background: var(--background);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}

.dropdown-select .dropdown-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
}

.dropdown-select .dropdown-option,
.dropdown-select .dropdown-select-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-select .dropdown-option-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-select .dropdown-option-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  object-fit: contain;
}

.dropdown-select .dropdown-option-icon-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #94a3b8;
}

.dropdown-select .dropdown-option-icon-empty .material-symbols-outlined {
  font-size: 0.75rem;
}

.dropdown-select .dropdown-option:hover,
.dropdown-select .dropdown-option.is-active {
  background: rgb(100 116 139 / 0.08);
}

.dropdown-select .dropdown-option:disabled {
  cursor: default;
  color: #94a3b8;
}

.dark .dropdown-select > summary,
.dark .dropdown-select .dropdown-panel {
  border-color: #334155;
}

.dark .dropdown-select .dropdown-option-icon-empty {
  background: #1e293b;
  color: #64748b;
}

.field-errors {
  color: #dc2626;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Multi-select dropdown for a task's owners (form.owners): the same
   .dropdown-select/.dropdown-panel shell as a single-select, but each row is
   a label+checkbox that keeps the panel open across multiple picks. */
.dropdown-select .dropdown-panel label.owners-dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-select .dropdown-panel .owners-dropdown-option input[type="checkbox"] {
  width: auto;
  height: auto;
}

/* flatpickr's `static: true` mode (used so the calendar renders correctly
   inside a <dialog>, see app.js) always pins the calendar below the input
   by default. Always open it above instead. !important: flatpickr's own
   stylesheet loads after this one with the same specificity otherwise. */
.flatpickr-calendar.static {
  top: auto !important;
  bottom: calc(100% + 2px) !important;
}

/* The calendar being pinned above the field means its little pointer arrow
   should always point down at it, regardless of which arrow class flatpickr
   applied based on its own (now-overridden) above/below decision. */
.flatpickr-calendar.static:before,
.flatpickr-calendar.static:after {
  top: 100% !important;
  bottom: auto !important;
}

.flatpickr-calendar.static:before {
  border-top-color: #e6e6e6 !important;
  border-bottom-color: transparent !important;
}

.flatpickr-calendar.static:after {
  border-top-color: #fff !important;
  border-bottom-color: transparent !important;
}

/* flatpickr wraps every .date-picker input in this element; it's
   inline-block with no width set, so it shrinks to content instead of
   filling its grid/flex cell like a plain input does. */
.flatpickr-wrapper {
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary {
  background: var(--brand);
  color: white;
}
.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-outline {
  border: 1px solid #cbd5e1;
  color: inherit;
}
.btn-outline:hover {
  background: rgb(100 116 139 / 0.08);
}

.btn-danger {
  border: 1px solid #fca5a5;
  color: #dc2626;
}
.btn-danger:hover {
  background: rgb(220 38 38 / 0.08);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-primary:disabled:hover {
  background: var(--brand);
}

summary.btn {
  list-style: none;
}
summary.btn::-webkit-details-marker {
  display: none;
}

/* A required enhanced dropdown submitted empty (see app.js enhanceSelect). */
.dropdown-select.is-invalid > summary {
  border-color: #dc2626;
}