:root {
  /* Match public site (Aroma) primary palette */
  --primary-color: #384aeb;
  --primary-color-dark: #2a3fb8;
  --primary-color-light: #8894ff;

  /* Supporting colors */
  --danger-color: #d32f2f;
  --warning-color: #f57c00;
  --info-color: #1976d2;
  --success-color: #388e3c;

  --gray-dark: #37474f;
  --gray-light: #eceff1;
  --border-color: #bdbdbd;

  /* For borders/accents in admin */
  --accent-color: var(--primary-color-light);
}

/* Keep admin background consistent with site */
body {
  background: #F1F6F7;
}

/* Typography */
html {
  font-size: 14px;
}

body {
  color: var(--gray-dark);
  line-height: 1.45;
}

/* Login page: keep it clean + branded without changing behavior */
body.login {
  background: #F1F6F7;
}

body.login #header {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body.login #header h1 a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body.login #header h1 img {
  height: 40px;
  width: 40px;
}

body.login #container {
  max-width: 520px;
}

body.login #content {
  padding: 28px 22px;
}

body.login #content-main {
  background: #fff;
  border: 1px solid rgba(55, 71, 79, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  padding: 18px 18px 10px;
}

body.login .submit-row {
  padding: 0;
}

body.login .submit-row input[type="submit"] {
  width: 100%;
  justify-content: center;
}

/* Links (clickable elements should be obvious) */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

/* Avoid underlines on admin navigation + widget buttons */
#nav-sidebar a:hover,
#sidebar a:hover,
.object-tools a:hover,
.button:hover,
.addlink:hover,
.changelink:hover,
.historylink:hover,
.viewsitelink:hover,
.selector-chooser a:hover {
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid rgba(56, 74, 235, 0.25);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons */
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.submit-row input[type="submit"],
.submit-row a.button {
  appearance: none;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  gap: 8px;
  line-height: 1.1;
  padding: 10px 14px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.submit-row input[type="submit"]:hover,
.submit-row a.button:hover {
  background: linear-gradient(135deg, var(--primary-color-dark), var(--primary-color));
  box-shadow: 0 6px 18px rgba(56, 74, 235, 0.22);
  transform: translateY(-1px);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.submit-row input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.submit-row input[type="submit"]:focus-visible,
.submit-row a.button:focus-visible {
  outline: 3px solid rgba(56, 74, 235, 0.28);
  outline-offset: 2px;
}

.button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled] {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}

/* Destructive action: keep clear */
.deletelink,
.submit-row a.deletelink {
  color: var(--danger-color) !important;
}

.submit-row a.deletelink {
  background: transparent;
  border: 1px solid rgba(211, 47, 47, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none;
}

.submit-row a.deletelink:hover {
  background: rgba(211, 47, 47, 0.08);
  text-decoration: none;
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  border: 1px solid rgba(55, 71, 79, 0.2);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  padding: 10px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(56, 74, 235, 0.8);
  box-shadow: 0 0 0 4px rgba(56, 74, 235, 0.12);
  outline: none;
}

textarea {
  min-height: 120px;
}

/* Help text + error text legibility */
.help,
.help-inline,
.form-row .help,
p.help {
  color: rgba(55, 71, 79, 0.8);
  font-size: 12px;
}

.errorlist,
.errornote {
  border-radius: 8px;
}

/* Tables: clearer hierarchy + rows */
table {
  border-radius: 10px;
}

table thead th {
  font-weight: 700;
}

table tbody tr:nth-child(even) {
  background: rgba(241, 246, 247, 0.6);
}

table tbody tr:hover {
  background: rgba(136, 148, 255, 0.10);
}

/* Don't let global table styling break date/calendar popups */
.calendarbox table,
.clockbox table {
  border-radius: 0;
}

.calendarbox table tbody tr:nth-child(even),
.clockbox table tbody tr:nth-child(even) {
  background: transparent;
}

.calendarbox table tbody tr:hover,
.clockbox table tbody tr:hover {
  background: transparent;
}

/* Changelist search bar */
#searchbar {
  border-radius: 10px;
}

/* Changelist search container alignment (Django uses #changelist-search) */
#changelist-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#changelist-search #searchbar {
  min-width: 280px;
}

/* Left navigation sidebar (Django 3.2/4.x uses #nav-sidebar; older uses #sidebar) */
#nav-sidebar,
#sidebar {
  background: #fff;
}

/* Widen Django nav sidebar so names don't get truncated */
/* Django default is 275px; we use 320px for better readability */
#nav-sidebar {
  flex: 0 0 320px;
  left: -321px;
  margin-left: -321px;
}

[dir="rtl"] #nav-sidebar {
  right: -321px;
  margin-right: -321px;
  left: 0;
  margin-left: 0;
}

.main.shifted > #nav-sidebar + .content {
  max-width: calc(100% - 343px);
}

/* Allow wrapping instead of cutting off long labels */
#nav-sidebar .module td {
  white-space: normal;
}

#nav-sidebar a {
  overflow-wrap: anywhere;
}

#nav-sidebar a,
#sidebar a {
  border-radius: 8px;
}

#nav-sidebar a:hover,
#sidebar a:hover {
  background: rgba(136, 148, 255, 0.12);
}

#nav-sidebar .current-model a,
#sidebar .current-model a {
  background: rgba(56, 74, 235, 0.12);
  border-left: 3px solid var(--primary-color);
}

/* Filter sidebar clickable items */
#changelist-filter a {
  border-radius: 6px;
}

/* Select2 (used by admin autocomplete widgets) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid rgba(55, 71, 79, 0.2);
  border-radius: 8px;
  min-height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: rgba(56, 74, 235, 0.8);
  box-shadow: 0 0 0 4px rgba(56, 74, 235, 0.12);
}

/* Many-to-many filter widget */
.selector {
  border-radius: 10px;
  overflow: hidden;
}

.selector .selector-available h2,
.selector .selector-chosen h2 {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
  color: #fff;
}

/* Many-to-many selector arrow buttons (group add/change) */
.selector-chooser a {
  background-color: #fff;
  border: 1px solid rgba(55, 71, 79, 0.2);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.selector-chooser a:focus-visible {
  outline: 3px solid rgba(56, 74, 235, 0.28);
  outline-offset: 2px;
}

.selector-chooser a:hover {
  background-color: rgba(136, 148, 255, 0.10);
  border-color: rgba(56, 74, 235, 0.35);
}

/* Date/time widgets (User change page uses AdminSplitDateTime) */
.form-row .datetime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.form-row .datetime input {
  width: auto;
}

.form-row .datetime input.vDateField {
  width: 10.5em;
  min-width: 10.5em;
}

.form-row .datetime input.vTimeField {
  width: 8em;
  min-width: 8em;
}

.datetimeshortcuts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  white-space: nowrap;
}

.datetimeshortcuts a {
  border: 1px solid rgba(55, 71, 79, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.datetimeshortcuts a:hover {
  background-color: rgba(136, 148, 255, 0.10);
  border-color: rgba(56, 74, 235, 0.35);
}

.calendarbox,
.clockbox {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(55, 71, 79, 0.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.calendarbox caption,
.clockbox caption {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
  color: #fff;
}

/* Improve tappable targets for action links */
.object-tools a,
.changelink,
.addlink,
.historylink,
.viewsitelink {
  border-radius: 8px;
}