/* Reusable branded admin components. */

.module,
.inline-group,
.submit-row,
#changelist-filter,
#toolbar,
.calendarbox,
.clockbox,
.selector-available,
.selector-chosen {
  overflow: hidden;
  border: var(--admin-border-width) solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface-panel);
}

.module caption,
.module h2,
.inline-group h2,
.selector-available h2,
.selector-chosen h2,
#changelist-filter h2 {
  padding: var(--admin-space-3) var(--admin-space-4);
  border: 0;
  background: var(--admin-strong-bg);
  color: var(--admin-on-strong);
  font-family: var(--admin-font-heading);
  font-size: var(--admin-size-lead);
  font-weight: var(--admin-weight-semibold);
  letter-spacing: 0.025em;
}

.module caption a,
.module caption a:link,
.module caption a:visited,
.module h2 a,
.inline-group h2 a {
  color: var(--admin-on-strong);
}

.module table,
.calendar table {
  background: var(--admin-surface-panel);
}

thead th,
tfoot td,
tfoot th {
  border-color: var(--admin-border);
  background: var(--admin-surface-strong);
  color: var(--admin-text);
}

tbody tr,
.row-form-errors {
  border-color: var(--admin-divider);
  background: var(--admin-surface-panel);
}

tbody tr:nth-child(even),
.form-row:nth-child(even) {
  background: var(--admin-surface-alt);
}

tbody tr:hover {
  background: var(--admin-hover-bg);
  color: var(--admin-hover-fg);
}

td,
th,
.form-row,
.inline-related,
.inline-group .tabular tr.add-row td {
  border-color: var(--admin-divider);
}

input,
textarea,
select,
.vTextField,
.vURLField,
.vIntegerField,
.vBigIntegerField,
.vForeignKeyRawIdAdminField,
.select2-container--admin-autocomplete .select2-selection--single,
.select2-container--admin-autocomplete .select2-selection--multiple {
  min-height: var(--admin-control-height);
  padding: var(--admin-space-2) var(--admin-space-3);
  border: var(--admin-border-width) solid var(--admin-border) !important;
  border-radius: var(--admin-radius-sm) !important;
  background: var(--admin-control-bg) !important;
  color: var(--admin-control-fg) !important;
  font-family: var(--admin-font-body);
  font-size: var(--admin-size-sm);
}

textarea {
  min-height: 9rem;
  line-height: var(--admin-line-body);
}

input:hover,
textarea:hover,
select:hover,
.select2-container--admin-autocomplete .select2-selection:hover {
  border-color: var(--admin-link-hover) !important;
}

input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--admin-accent-bg) !important;
  box-shadow: 0 0 0 2px var(--admin-accent-bg) !important;
}

input:disabled,
textarea:disabled,
select:disabled,
.readonly {
  background: var(--admin-disabled-bg) !important;
  color: var(--admin-disabled-fg) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--admin-control-fg);
  box-shadow: 0 0 0 1000px var(--admin-control-bg) inset !important;
}

/*
 * Native browser controls need explicit styling; generic input backgrounds do
 * not reach their internal checkbox, radio, file-button, or spinner surfaces.
 */
input[type="checkbox"],
input[type="radio"] {
  display: inline-grid;
  place-content: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  min-height: 1.35rem;
  margin: 0 var(--admin-space-2) 0 0;
  padding: 0 !important;
  appearance: none;
  border: 2px solid var(--admin-border) !important;
  background: var(--admin-control-bg) !important;
  vertical-align: middle;
  cursor: pointer;
}

input[type="checkbox"] {
  border-radius: var(--admin-radius-xs) !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]::before {
  content: "";
  inline-size: 0.4rem;
  block-size: 0.7rem;
  border: solid var(--admin-on-strong);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.05rem) rotate(45deg) scale(0);
  transition: transform var(--admin-transition);
}

input[type="radio"]::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--admin-on-strong);
  transform: scale(0);
  transition: transform var(--admin-transition);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--admin-strong-bg) !important;
  background: var(--admin-strong-bg) !important;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  transform: translateY(-0.05rem) rotate(45deg) scale(1);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-color: var(--admin-disabled-bg) !important;
  background: var(--admin-disabled-bg) !important;
  cursor: not-allowed;
  opacity: 1;
}

input[type="file"] {
  max-width: 100%;
  padding: var(--admin-space-1) !important;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  min-height: calc(var(--admin-control-height) - 0.5rem);
  margin-inline-end: var(--admin-space-3);
  padding: var(--admin-space-1) var(--admin-space-3);
  border: var(--admin-border-width) solid var(--admin-button-bg);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-button-bg);
  color: var(--admin-button-fg);
  font: inherit;
  font-weight: var(--admin-weight-semibold);
  cursor: pointer;
  transition: background var(--admin-transition), color var(--admin-transition);
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:focus::file-selector-button {
  border-color: var(--admin-border);
  background: var(--admin-button-hover-bg);
}

input[type="file"]::-webkit-file-upload-button {
  min-height: calc(var(--admin-control-height) - 0.5rem);
  margin-inline-end: var(--admin-space-3);
  padding: var(--admin-space-1) var(--admin-space-3);
  border: var(--admin-border-width) solid var(--admin-button-bg);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-button-bg);
  color: var(--admin-button-fg);
  font: inherit;
  font-weight: var(--admin-weight-semibold);
  cursor: pointer;
}

/* Native spinner panels cannot reliably inherit theme colors across browsers. */
input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

select option,
select optgroup {
  background: var(--admin-control-bg);
  color: var(--admin-control-fg);
}

::placeholder {
  color: var(--admin-text-muted);
  opacity: 1;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
.object-tools a,
.actions .button {
  min-height: var(--admin-control-height);
  padding: var(--admin-space-2) var(--admin-space-4);
  border: var(--admin-border-width) solid var(--admin-button-bg) !important;
  border-radius: var(--admin-radius-sm) !important;
  background: var(--button-bg) !important;
  box-shadow: none !important;
  color: var(--button-fg) !important;
  font-family: var(--admin-font-body);
  font-size: var(--admin-size-sm);
  font-weight: var(--admin-weight-semibold);
  transition: background var(--admin-transition), color var(--admin-transition);
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover,
.object-tools a:hover,
.actions .button:hover {
  border-color: var(--admin-border) !important;
  background: var(--button-hover-bg) !important;
  color: var(--admin-button-fg) !important;
}

input[type="submit"].default,
.submit-row input.default {
  border-color: var(--admin-default-button-bg) !important;
  background: var(--default-button-bg) !important;
  color: var(--admin-accent-fg) !important;
}

input[type="submit"].default:hover,
.submit-row input.default:hover {
  border-color: var(--admin-accent-bg) !important;
  background: var(--default-button-hover-bg) !important;
  color: var(--admin-accent-fg) !important;
}

.deletelink,
.submit-row a.deletelink {
  color: var(--ritual-fire-glow) !important;
}

.submit-row a.deletelink:hover {
  color: var(--admin-link-hover) !important;
}

.addlink,
.changelink,
.inlinechangelink,
.viewlink,
.inlineviewlink,
.deletelink,
.hidelink {
  padding-inline-start: 0 !important;
  background-image: none !important;
}

.addlink::before {
  content: "+ ";
  color: var(--admin-border);
  font-weight: var(--admin-weight-bold);
}

.changelink::before,
.inlinechangelink::before {
  content: "↗ ";
  color: var(--admin-default-button-bg);
}

.viewlink::before,
.inlineviewlink::before {
  content: "→ ";
  color: var(--admin-link);
}

#changelist-search label img,
.related-widget-wrapper-link img,
.help-tooltip[src*="/admin/img/"] {
  display: none;
}

.related-widget-wrapper-link::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  color: var(--admin-link);
  font-weight: var(--admin-weight-bold);
}

.related-widget-wrapper-link.add-related::before {
  content: "+";
}

.related-widget-wrapper-link.change-related::before,
.related-widget-wrapper-link.view-related::before {
  content: "↗";
}

.related-widget-wrapper-link.delete-related::before {
  content: "×";
  color: var(--ritual-fire-glow);
}

.selector-add,
.selector-remove,
.datetimeshortcuts .clock-icon,
.datetimeshortcuts .date-icon,
.inline-deletelink,
table thead th.sorted .sortoptions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-surface-strong) !important;
  color: var(--admin-text);
  text-indent: 0;
}

.datetimeshortcuts button {
  background: transparent;
  color: var(--admin-link);
}

.selector-add::before,
.stacked .selector-add::before {
  content: "→";
}

.selector-remove::before,
.stacked .selector-remove::before {
  content: "←";
}

.datetimeshortcuts .clock-icon::before {
  content: "◷";
}

.datetimeshortcuts .date-icon::before {
  content: "▦";
}

.inline-deletelink::before {
  content: "×";
  color: var(--ritual-fire-glow);
  font-size: 1.25rem;
  font-weight: var(--admin-weight-bold);
}

table thead th.sorted .sortoptions a::before {
  content: "↕";
}

.selector .help-icon,
.selector .search-label-icon {
  background: var(--admin-surface-strong);
}

ul.messagelist li {
  border: var(--admin-border-width) solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background-color: var(--message-info-bg);
  background-image: none !important;
  color: var(--admin-text);
}

ul.messagelist li.success {
  background-color: var(--message-success-bg);
  color: var(--admin-message-fg);
}

ul.messagelist li.warning {
  background-color: var(--message-warning-bg);
  color: var(--admin-message-fg);
}

ul.messagelist li.error {
  background-color: var(--message-error-bg);
  color: var(--admin-message-fg);
}

.errornote,
.errorlist {
  border-color: var(--ritual-fire-glow) !important;
  background: var(--admin-surface-panel) !important;
  color: var(--ritual-fire-glow) !important;
}

.help,
p.help,
form p.help,
div.help,
form div.help,
div.help li,
.quiet,
.small,
.mini {
  color: var(--admin-text-muted);
}

.paginator a:not(.showall),
.paginator a:not([aria-current="page"], .showall):hover {
  background: var(--admin-button-bg);
  color: var(--admin-button-fg);
}

.actions,
#toolbar,
.submit-row {
  background: var(--admin-surface-panel);
}

/*
 * Django renders date and time shortcuts as modal dialogs. Centering them keeps
 * the controls predictable on long forms and avoids relying on inline offsets.
 */
.calendarbox,
.clockbox {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: 0;
  transform: translate(-50%, -50%);
  border-width: 2px;
  box-shadow: 0 0.35rem 0 var(--admin-shadow-color);
}

.calendarbox::backdrop,
.clockbox::backdrop {
  background: var(--admin-surface-strong);
  opacity: 0.62;
}

.calendar,
.calendar table {
  width: 100%;
}

.calendar table,
.calendar caption,
.calendarbox h2,
.clockbox h2,
.calendar th {
  background: var(--admin-surface-panel);
  color: var(--admin-text);
}

.calendar caption,
.calendarbox h2,
.clockbox h2 {
  min-height: 3.25rem;
  padding: var(--admin-space-3) 3.5rem;
  font-size: var(--admin-size-lead);
  line-height: 1.5;
}

.calendar th,
.calendar td a {
  padding: var(--admin-space-3);
  font-size: var(--admin-size-sm);
}

.calendar td a,
.timelist a {
  color: var(--admin-text);
}

.calendar td.selected a,
.calendar td.today a {
  background: var(--admin-selected-bg);
  color: var(--admin-selected-fg);
  font-weight: var(--admin-weight-bold);
}

.calendar td a:focus,
.calendar td a:hover,
.timelist a:focus,
.timelist a:hover {
  background: var(--admin-button-bg);
  color: var(--admin-button-fg);
}

.calendar td a:active,
.timelist a:active {
  background: var(--admin-accent-bg);
  color: var(--admin-accent-fg);
}

/* The global theme removes image backgrounds, so navigation uses text arrows. */
.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
  top: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-link);
  font-size: 0;
  line-height: 2.5rem;
  text-align: center;
  text-indent: 0;
}

.calendarnav {
  color: var(--admin-text-muted);
}

.calendarbox .calendarnav-previous {
  left: var(--admin-space-2);
}

.calendarbox .calendarnav-next {
  right: var(--admin-space-2);
}

.calendarbox .calendarnav-previous::before,
.calendarbox .calendarnav-next::before {
  font-size: 1.75rem;
  font-weight: var(--admin-weight-bold);
}

.calendarbox .calendarnav-previous::before {
  content: "\2039";
}

.calendarbox .calendarnav-next::before {
  content: "\203A";
}

.calendarbox .calendarnav-previous:focus,
.calendarbox .calendarnav-previous:hover,
.calendarbox .calendarnav-next:focus,
.calendarbox .calendarnav-next:hover {
  background: var(--admin-button-bg) !important;
  color: var(--admin-button-fg);
}

.calendar-shortcuts,
.calendar-cancel {
  padding: var(--admin-space-3);
  font-size: var(--admin-size-sm);
  line-height: var(--admin-line-body);
}

.calendar-cancel,
.calendar-cancel:hover,
.calendar-cancel:focus {
  background: var(--burnt-clay);
}

.calendar-cancel a {
  color: var(--admin-message-fg);
  font-weight: var(--admin-weight-semibold);
}

.clockbox .timelist a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--admin-space-1);
  padding: var(--admin-space-3) var(--admin-space-4);
  font-size: var(--admin-size-body);
}

.journal-clock-context {
  margin: 0;
  padding: var(--admin-space-2) var(--admin-space-4);
  border-block: var(--admin-border-width) solid var(--admin-divider);
  background: var(--admin-surface-strong);
  color: var(--admin-text-muted);
  font-size: var(--admin-size-xs);
  text-align: center;
}

.clockbox .journal-time-option__state {
  color: var(--admin-text-muted);
  font-size: var(--admin-size-xs);
  font-weight: var(--admin-weight-semibold);
}

.clockbox .timelist li.journal-time-option--past {
  background: var(--admin-surface-row-alt);
  opacity: 0.58;
}

.calendarbox td.journal-date-unavailable,
.clockbox .journal-datetime-unavailable,
.datetimeshortcuts .journal-datetime-unavailable {
  background: var(--admin-disabled-bg) !important;
  color: var(--admin-disabled-fg) !important;
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  text-decoration: none;
}

.clockbox .timelist li.journal-time-option--current {
  background: var(--admin-selected-bg);
}

.clockbox .timelist li.journal-time-option--current a,
.clockbox .timelist li.journal-time-option--current .journal-time-option__state {
  color: var(--admin-selected-fg);
  font-weight: var(--admin-weight-bold);
}

.clockbox .timelist li.journal-time-option--future {
  background: var(--admin-surface-row);
}

.clockbox .timelist li.journal-time-option--now a {
  background: var(--admin-strong-bg);
  color: var(--admin-on-strong);
  font-weight: var(--admin-weight-semibold);
}


/* Present the full-day hourly list compactly while preserving touch targets. */
.clockbox .timelist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: calc(100dvh - 10rem);
  overflow-y: auto;
  background: var(--admin-surface-panel);
}

.clockbox .timelist li:first-child {
  grid-column: 1 / -1;
}

.clockbox .timelist li {
  border-block-end: var(--admin-border-width) solid var(--admin-divider);
}

.clockbox .timelist li:nth-child(even) {
  border-inline-end: var(--admin-border-width) solid var(--admin-divider);
}

@media (max-width: 480px) {
  .calendar th,
  .calendar td a {
    padding: var(--admin-space-2);
  }
}

.selector-chooser,
.stacked ul.selector-chooser {
  background: var(--admin-surface-strong) !important;
}

.select2-container--admin-autocomplete .select2-dropdown,
.select2-results,
.select2-search--dropdown,
.select2-container--default .select2-results__option,
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--admin-border) !important;
  background: var(--admin-control-bg) !important;
  color: var(--admin-control-fg) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--admin-selected-bg) !important;
  color: var(--admin-selected-fg) !important;
}

.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: var(--admin-link) transparent transparent !important;
}

.select2-container--admin-autocomplete.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent var(--admin-link) !important;
}

@media (max-width: 767px) {
  .module,
  .inline-group,
  .submit-row,
  #changelist-filter,
  #toolbar {
    border-radius: var(--admin-radius-sm);
  }
}