/* STILI v22.1. Django keeps ownership of layout, widgets and theme selection. */
:root,
html[data-theme="light"] {
  --primary: var(--stili-brand);
  --secondary: var(--stili-ink);
  --accent: var(--stili-brand);
  --primary-fg: var(--stili-on-brand);
  --body-fg: var(--stili-ink);
  --body-bg: var(--stili-base);
  --body-quiet-color: var(--stili-muted);
  --body-medium-color: #47484b;
  --body-loud-color: var(--stili-ink);
  --header-color: var(--stili-ink);
  --header-branding-color: var(--stili-ink);
  --header-bg: var(--stili-base);
  --header-link-color: var(--stili-ink);
  --breadcrumbs-fg: var(--stili-muted);
  --breadcrumbs-link-fg: var(--stili-ink);
  --breadcrumbs-bg: #f2f0eb;
  --link-fg: var(--stili-action);
  --link-hover-color: var(--stili-action-hover);
  --link-selected-fg: var(--stili-action);
  --hairline-color: var(--stili-line);
  --border-color: var(--stili-line);
  /* Keep small muted text and action-colour links above 4.5:1 on panels. */
  --darkened-bg: #f2f0eb;
  --selected-bg: #e9e7df;
  --selected-row: #fbe9e2;
  --error-fg: var(--stili-error);
  --message-success-bg: var(--stili-success-surface);
  --message-warning-bg: var(--stili-warning-surface);
  --message-error-bg: var(--stili-error-surface);
  --button-fg: var(--stili-on-action);
  --button-bg: var(--stili-action);
  --button-hover-bg: var(--stili-action-hover);
  --default-button-bg: var(--stili-action);
  --default-button-hover-bg: var(--stili-action-hover);
  --close-button-bg: #525357;
  --close-button-hover-bg: var(--stili-ink);
  --delete-button-bg: #b32632;
  --delete-button-hover-bg: #8f1e28;
  --object-tools-fg: var(--stili-on-action);
  --object-tools-bg: #525357;
  --object-tools-hover-bg: var(--stili-ink);
  --font-family-primary: var(--stili-font-ui);
  --admin-surface: var(--stili-surface);
  --admin-focus: var(--stili-focus);
  --admin-success: var(--stili-success);
  --admin-exclusion: var(--stili-error);
  color-scheme: light;
}

html[data-theme="dark"] {
  --primary: #ff9d82;
  --accent: #ff9d82;
  --body-fg: var(--stili-base);
  --body-bg: var(--stili-ink);
  --body-quiet-color: #b9b9b5;
  --body-medium-color: #ddddd8;
  --body-loud-color: #fff;
  --header-color: var(--stili-base);
  --header-branding-color: var(--stili-base);
  --header-bg: var(--stili-ink);
  --header-link-color: var(--stili-base);
  --breadcrumbs-fg: #b9b9b5;
  --breadcrumbs-link-fg: var(--stili-base);
  --breadcrumbs-bg: #292a2d;
  --link-fg: #ff9d82;
  --link-hover-color: #ffc2ae;
  --link-selected-fg: #ffc2ae;
  --hairline-color: #48494c;
  --border-color: #636467;
  --darkened-bg: #292a2d;
  --selected-bg: #38393c;
  --selected-row: #493027;
  --error-fg: #ff8b94;
  --message-success-bg: #193d27;
  --message-warning-bg: #483a1c;
  --message-error-bg: #4b252a;
  --admin-surface: #26272a;
  --admin-focus: #ff9d82;
  --admin-success: #8ad7a2;
  --admin-exclusion: #ff8b94;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --primary: #ff9d82;
    --accent: #ff9d82;
    --body-fg: var(--stili-base);
    --body-bg: var(--stili-ink);
    --body-quiet-color: #b9b9b5;
    --body-medium-color: #ddddd8;
    --body-loud-color: #fff;
    --header-color: var(--stili-base);
    --header-branding-color: var(--stili-base);
    --header-bg: var(--stili-ink);
    --header-link-color: var(--stili-base);
    --breadcrumbs-fg: #b9b9b5;
    --breadcrumbs-link-fg: var(--stili-base);
    --breadcrumbs-bg: #292a2d;
    --link-fg: #ff9d82;
    --link-hover-color: #ffc2ae;
    --link-selected-fg: #ffc2ae;
    --hairline-color: #48494c;
    --border-color: #636467;
    --darkened-bg: #292a2d;
    --selected-bg: #38393c;
    --selected-row: #493027;
    --error-fg: #ff8b94;
    --message-success-bg: #193d27;
    --message-warning-bg: #483a1c;
    --message-error-bg: #4b252a;
    --admin-surface: #26272a;
    --admin-focus: #ff9d82;
    --admin-success: #8ad7a2;
    --admin-exclusion: #ff8b94;
    color-scheme: dark;
  }
}

.stili-admin { font-weight: 400; }
.stili-admin h1 { font-weight: 400; }
.stili-admin h2, .stili-admin h3, .stili-admin th,
.stili-admin strong, .stili-admin b, .stili-admin label.required { font-weight: 600; }
.stili-admin #header { border-bottom: 1px solid var(--hairline-color); gap: 12px; }
.stili-admin #branding { align-items: center; min-width: 0; }
.stili-admin #site-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; }
.stili-admin-home { display: inline-flex; align-items: center; flex: none; }
.stili-admin-label { font-size: 14px; font-weight: 500; color: var(--body-quiet-color); }
.stili-admin #user-tools, .stili-admin #logout-form button { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.stili-admin #user-tools a, .stili-admin #logout-form button { border-bottom-color: var(--hairline-color); }
.stili-admin .theme-toggle { min-width: 36px; min-height: 36px; }
.stili-admin .theme-toggle svg { margin: auto; }
.stili-admin div.breadcrumbs { border-bottom: 1px solid var(--hairline-color); }
.stili-admin .module h2, .stili-admin .module caption, .stili-admin .inline-group h2 {
  background: var(--darkened-bg); color: var(--body-fg); font-weight: 600;
}
.stili-admin .module { border-radius: var(--stili-radius-control); }
.stili-admin .module a.section:link, .stili-admin .module a.section:visited { color: var(--body-fg); }
.stili-admin input, .stili-admin select, .stili-admin textarea, .stili-admin button { font-family: var(--stili-font-ui); }
.stili-admin input::placeholder, .stili-admin textarea::placeholder { color: var(--body-quiet-color); opacity: 1; }
.stili-admin input[type=checkbox], .stili-admin input[type=radio] { accent-color: var(--primary); }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField { border-radius: var(--stili-radius-control); }
.button, input[type=submit], input[type=button], .submit-row input, a.button, button[type=submit] {
  border-radius: var(--stili-radius-control); font-weight: 500;
}
/* Django's custom STILI tools use native submit buttons, outside ModelAdmin. */
button[type=submit] { background: var(--button-bg); color: var(--button-fg); border: 0; padding: 10px 16px; cursor: pointer; }
button[type=submit]:hover { background: var(--button-hover-bg); }
button[type=submit]:disabled { opacity: .5; cursor: not-allowed; }
.stili-admin .button.default, .stili-admin input[type=submit].default { font-weight: 600; }
.stili-admin :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--admin-focus); outline-offset: 3px; }
.stili-admin .errornote { border-color: var(--error-fg); color: var(--error-fg); }
.stili-admin ul.messagelist li.success { color: var(--admin-success); }
.stili-admin ul.messagelist li.error { color: var(--error-fg); }
/* Django widgets also reuse header colours; keep their selected states legible. */
.stili-admin .selector-chosen-title { background: var(--darkened-bg); color: var(--body-fg); }
.stili-admin .selector-chosen-title label { color: var(--body-fg); }
.stili-admin .selector-chosen .list-footer-display,
.stili-admin .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected],
.stili-admin .calendar td a:is(:focus, :hover, :active),
.stili-admin .timelist a:is(:focus, :hover, :active) { background: var(--button-bg); color: var(--button-fg); }
.stili-admin .selector-chosen .list-footer-display__clear { color: var(--button-fg); }

body.stili-admin.login { background: var(--body-bg); }
.stili-admin.login #container { background: var(--admin-surface); border-radius: 16px; }
.stili-admin.login #header { padding: 20px; }
.stili-admin.login #site-name { gap: 0; flex-direction: column; align-items: flex-start; }
.stili-admin.login .stili-admin-label { margin-left: 8px; }
.stili-admin.login .form-row input { min-height: 44px; font-size: 16px; }
.stili-admin.login .submit-row input { min-height: 44px; width: 100%; text-transform: none; }

@media (max-width: 600px) {
  .stili-admin #site-name { gap: 4px 12px; }
  .stili-admin #user-tools { overflow-wrap: anywhere; }
  .stili-admin-label { font-size: 13px; }
}