/* ARBS unified Django Administration theme.
   This deliberately restyles Django's native admin structure rather than
   replacing its behaviour, permissions, forms, filters, or actions. */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --arbs-font: "Outfit", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --arbs-brand: #0f8a78;
  --arbs-brand-hover: #0b7163;
  --arbs-brand-deep: #11584d;
  --arbs-brand-soft: #e8f7f3;
  --arbs-canvas: #f4f7f6;
  --arbs-surface: #ffffff;
  --arbs-surface-2: #f8faf9;
  --arbs-surface-3: #eef3f1;
  --arbs-text: #17211e;
  --arbs-text-strong: #0e1714;
  --arbs-muted: #66756f;
  --arbs-muted-2: #87948f;
  --arbs-border: #dce6e2;
  --arbs-border-strong: #cbd9d4;
  --arbs-sidebar: #173e34;
  --arbs-sidebar-hover: #225247;
  --arbs-sidebar-text: #e8f1ee;
  --arbs-sidebar-muted: #9db5ad;
  --arbs-danger: #b42318;
  --arbs-danger-soft: #fdebea;
  --arbs-success: #15825b;
  --arbs-success-soft: #e8f7ef;
  --arbs-warning: #a7500b;
  --arbs-warning-soft: #fff4e5;
  --arbs-shadow-sm: 0 1px 2px rgba(16, 38, 31, .04);
  --arbs-shadow-md: 0 8px 28px rgba(16, 38, 31, .08);
  --arbs-shadow-lg: 0 20px 50px rgba(16, 38, 31, .14);
  --arbs-radius-sm: 8px;
  --arbs-radius: 12px;
  --arbs-radius-lg: 18px;
  --arbs-sidebar-width: 280px;
  --arbs-topbar-height: 76px;

  /* Map Django admin variables to the ARBS design system. */
  --primary: var(--arbs-sidebar);
  --secondary: var(--arbs-brand);
  --accent: #f5fbf9;
  --primary-fg: #fff;
  --body-fg: var(--arbs-text);
  --body-bg: var(--arbs-canvas);
  --body-quiet-color: var(--arbs-muted);
  --body-loud-color: var(--arbs-text-strong);
  --header-color: var(--arbs-text);
  --header-branding-color: #fff;
  --header-bg: var(--arbs-surface);
  --header-link-color: var(--arbs-text);
  --breadcrumbs-fg: var(--arbs-muted);
  --breadcrumbs-link-fg: var(--arbs-brand);
  --breadcrumbs-bg: transparent;
  --link-fg: var(--arbs-brand-deep);
  --link-hover-color: var(--arbs-brand-hover);
  --link-selected-fg: var(--arbs-brand);
  --hairline-color: var(--arbs-border);
  --border-color: var(--arbs-border);
  --error-fg: var(--arbs-danger);
  --message-success-bg: var(--arbs-success-soft);
  --message-warning-bg: var(--arbs-warning-soft);
  --message-error-bg: var(--arbs-danger-soft);
  --darkened-bg: var(--arbs-surface-2);
  --selected-bg: var(--arbs-brand-soft);
  --selected-row: #f0faf7;
  --button-fg: #fff;
  --button-bg: var(--arbs-brand);
  --button-hover-bg: var(--arbs-brand-hover);
  --default-button-bg: var(--arbs-brand);
  --default-button-hover-bg: var(--arbs-brand-hover);
  --close-button-bg: #64736e;
  --close-button-hover-bg: #4c5a55;
  --delete-button-bg: var(--arbs-danger);
  --delete-button-hover-bg: #912018;
  --object-tools-fg: #fff;
  --object-tools-bg: var(--arbs-brand);
  --object-tools-hover-bg: var(--arbs-brand-hover);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --arbs-canvas: #0d1725;
  --arbs-surface: #111c2d;
  --arbs-surface-2: #152235;
  --arbs-surface-3: #1b2a3f;
  --arbs-text: #e6edf5;
  --arbs-text-strong: #ffffff;
  --arbs-muted: #aab7c8;
  --arbs-muted-2: #7e8da1;
  --arbs-border: #26364b;
  --arbs-border-strong: #34465f;
  --arbs-brand-soft: #123d39;
  --arbs-danger-soft: #421f24;
  --arbs-success-soft: #123a2d;
  --arbs-warning-soft: #422b16;
  --arbs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .18);
  --arbs-shadow-md: 0 10px 30px rgba(0, 0, 0, .22);
  --arbs-shadow-lg: 0 22px 60px rgba(0, 0, 0, .34);
  --header-bg: var(--arbs-surface);
  --header-color: var(--arbs-text);
  --header-link-color: var(--arbs-text);
  --body-fg: var(--arbs-text);
  --body-bg: var(--arbs-canvas);
  --body-quiet-color: var(--arbs-muted);
  --body-loud-color: var(--arbs-text-strong);
  --darkened-bg: var(--arbs-surface-2);
  --selected-bg: var(--arbs-brand-soft);
  --selected-row: #15302f;
  --hairline-color: var(--arbs-border);
  --border-color: var(--arbs-border);
  --breadcrumbs-bg: transparent;
  --breadcrumbs-fg: var(--arbs-muted);
  --breadcrumbs-link-fg: #61d3c4;
  --link-fg: #61d3c4;
  --link-hover-color: #8ce6db;
  --link-selected-fg: #61d3c4;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--arbs-canvas); font-size: 16px; }
body,
input,
textarea,
select,
button,
.button {
  font-family: var(--arbs-font) !important;
}
body {
  min-height: 100vh;
  margin: 0;
  background: var(--arbs-canvas) !important;
  color: var(--arbs-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { transition: color .15s ease, background .15s ease, border-color .15s ease; }

/* Main application shell, matching the ARBS portal. */
#container { min-height: 100vh; background: var(--arbs-canvas); }
#header {
  position: sticky;
  top: 0;
  z-index: 900;
  min-height: var(--arbs-topbar-height);
  margin-left: var(--arbs-sidebar-width);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  background: color-mix(in srgb, var(--arbs-surface) 95%, transparent) !important;
  color: var(--arbs-text) !important;
  border-bottom: 1px solid var(--arbs-border);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
#branding {
  position: fixed;
  z-index: 1100;
  top: 0;
  left: 0;
  width: var(--arbs-sidebar-width);
  height: var(--arbs-topbar-height);
  padding: 15px 18px;
  background: var(--arbs-sidebar);
  border-right: 1px solid rgba(255,255,255,.07);
}
.arbs-admin-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.arbs-admin-brand-mark {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #18b6a4, #0f8a78);
  color: #fff !important;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(5, 30, 25, .22);
}
.arbs-admin-brand-copy { min-width: 0; display: grid; line-height: 1.22; text-decoration: none; }
.arbs-admin-brand-copy strong { color: #fff; font-size: 16px; white-space: nowrap; }
.arbs-admin-brand-copy small { color: var(--arbs-sidebar-muted); font-size: 12px; white-space: nowrap; }
.arbs-admin-brand-copy em { margin-top: 2px; color: var(--arbs-sidebar-muted); font-size: 11px; font-style: italic; white-space: nowrap; }

#user-tools {
  margin: 0;
  padding: 0;
  color: var(--arbs-muted);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
#user-tools a { color: var(--arbs-text); font-weight: 600; }
#user-tools a:hover { color: var(--arbs-brand); }
#user-tools strong { color: var(--arbs-text-strong); }
.arbs-admin-global { display: flex; align-items: center; }
.arbs-admin-global a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--arbs-border);
  border-radius: 9px;
  background: var(--arbs-surface);
  color: var(--arbs-text) !important;
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
}
.arbs-admin-global a:hover { border-color: var(--arbs-brand); color: var(--arbs-brand) !important; background: var(--arbs-brand-soft); }
.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--arbs-border) !important;
  border-radius: 10px !important;
  background: var(--arbs-surface) !important;
  color: var(--arbs-text) !important;
}
.theme-toggle:hover { border-color: var(--arbs-brand) !important; color: var(--arbs-brand) !important; background: var(--arbs-brand-soft) !important; }

/* Django's native navigation sidebar becomes the ARBS navigation rail. */
#nav-sidebar {
  position: fixed;
  z-index: 1000;
  inset: var(--arbs-topbar-height) auto 0 0;
  width: var(--arbs-sidebar-width);
  min-width: var(--arbs-sidebar-width);
  height: calc(100vh - var(--arbs-topbar-height));
  overflow-y: auto;
  padding: 14px 12px 24px;
  background: var(--arbs-sidebar) !important;
  color: var(--arbs-sidebar-text);
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  scrollbar-width: thin;
}
#nav-sidebar .module { margin: 0 0 14px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#nav-sidebar .module caption,
#nav-sidebar .module h2 {
  margin: 18px 10px 7px;
  padding: 0;
  background: transparent !important;
  color: #78968c !important;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
#nav-sidebar table { width: 100%; }
#nav-sidebar tr { background: transparent !important; border: 0 !important; }
#nav-sidebar th,
#nav-sidebar td { padding: 0 !important; border: 0 !important; background: transparent !important; }
#nav-sidebar a {
  min-height: 42px;
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding: 9px 11px;
  border-radius: 10px;
  color: #cbdcd6 !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
#nav-sidebar a:hover { background: var(--arbs-sidebar-hover); color: #fff !important; }
#nav-sidebar .current-model a,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited { background: var(--arbs-brand); color: #fff !important; }
#nav-sidebar .addlink,
#nav-sidebar .changelink { display: none; }
#nav-filter {
  width: calc(100% - 8px) !important;
  min-height: 42px;
  margin: 2px 4px 14px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
#nav-filter::placeholder { color: #91aaa2; opacity: 1; }
#nav-filter:focus { border-color: #31c7b4 !important; box-shadow: 0 0 0 3px rgba(20,184,166,.15) !important; }
.toggle-nav-sidebar {
  position: fixed !important;
  z-index: 1101;
  left: 236px;
  top: 21px;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.06) !important;
  color: #dbe9e4 !important;
}

#main {
  min-height: calc(100vh - var(--arbs-topbar-height));
  margin-left: var(--arbs-sidebar-width);
  display: block !important;
  background: var(--arbs-canvas);
}
#main.shifted > #nav-sidebar + .content,
#main > .content { max-width: none !important; }
.main > .content { width: 100%; min-width: 0; }

/* Breadcrumbs and content canvas. */
div.breadcrumbs {
  margin: 0;
  padding: 15px 28px 0;
  background: transparent !important;
  color: var(--arbs-muted);
  font-size: 13px;
}
div.breadcrumbs a { color: var(--arbs-brand); font-weight: 650; }
#content {
  width: 100%;
  max-width: 1760px;
  padding: 20px 28px 42px;
}
#content h1 {
  margin: 0 0 20px;
  color: var(--arbs-text-strong);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 700;
}
#content h2 { color: var(--arbs-text-strong); font-size: 18px; }
#content h3 { color: var(--arbs-text-strong); font-size: 16px; }
#content-subtitle { color: var(--arbs-muted); }

/* Cards, dashboard modules, and related panels. */
.module,
.inline-group,
#changelist-filter,
#content-related .module,
.submit-row,
#toolbar,
.paginator,
.selector,
.calendarbox,
.clockbox {
  border: 1px solid var(--arbs-border) !important;
  border-radius: var(--arbs-radius) !important;
  background: var(--arbs-surface) !important;
  box-shadow: var(--arbs-shadow-sm);
  overflow: hidden;
}
.module caption,
.module h2,
.inline-group h2,
#content-related .module h2 {
  padding: 15px 18px !important;
  background: var(--arbs-surface-2) !important;
  color: var(--arbs-text-strong) !important;
  border-bottom: 1px solid var(--arbs-border);
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.dashboard #content { max-width: 1760px; }
.dashboard #content-main { width: min(100%, 1040px); }
.dashboard #content-related { width: 350px; margin-right: 0; }
.dashboard .module { margin-bottom: 18px; }
.dashboard .module table { width: 100%; }
.dashboard .module th,
.dashboard .module td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--arbs-border);
  background: var(--arbs-surface);
  color: var(--arbs-text);
  font-size: 14px;
  line-height: 1.35;
  vertical-align: middle;
}
.dashboard .module tr:last-child th,
.dashboard .module tr:last-child td { border-bottom: 0; }
.dashboard .module th { min-width: 320px; font-weight: 600; }
.dashboard .module td { white-space: nowrap; }
.dashboard .module a { color: var(--arbs-brand-deep); font-weight: 650; }
html[data-theme="dark"] .dashboard .module a { color: #61d3c4; }
#content-related .module { margin-bottom: 18px; }
#content-related .module h3 { padding: 0 18px; font-size: 14px; }
#content-related .module p,
#content-related .actionlist { color: var(--arbs-muted); font-size: 13px; line-height: 1.5; }
#content-related .actionlist { padding: 0 18px 18px; }

/* Messages */
ul.messagelist { margin: 0 28px 4px; padding: 16px 0 0; }
ul.messagelist li {
  margin: 0 0 10px;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--arbs-border);
  border-radius: 10px;
  background-color: var(--arbs-surface);
  color: var(--arbs-text);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--arbs-shadow-sm);
}

/* Tables and change lists. */
#changelist { display: grid; gap: 14px; }
#changelist .changelist-form-container { min-width: 0; }
#changelist .results {
  overflow: auto;
  border: 1px solid var(--arbs-border);
  border-radius: var(--arbs-radius);
  background: var(--arbs-surface);
  box-shadow: var(--arbs-shadow-sm);
}
#changelist table { width: 100%; border-collapse: collapse; }
#changelist table thead th {
  padding: 12px 14px;
  background: var(--arbs-surface-2);
  color: var(--arbs-muted);
  border-bottom: 1px solid var(--arbs-border);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
#changelist table tbody td,
#changelist table tbody th {
  padding: 13px 14px;
  background: var(--arbs-surface);
  color: var(--arbs-text);
  border-bottom: 1px solid var(--arbs-border);
  font-size: 14px;
  line-height: 1.4;
  vertical-align: middle;
}
#changelist table tbody tr:hover td,
#changelist table tbody tr:hover th { background: var(--arbs-brand-soft); }
#changelist table tbody tr:last-child td,
#changelist table tbody tr:last-child th { border-bottom: 0; }
#changelist table a { color: var(--arbs-brand-deep); font-weight: 650; }
html[data-theme="dark"] #changelist table a { color: #61d3c4; }
#changelist .actions {
  padding: 12px 14px;
  border: 1px solid var(--arbs-border);
  border-radius: var(--arbs-radius);
  background: var(--arbs-surface);
  color: var(--arbs-text);
  font-size: 13px;
}
#changelist .actions select { width: auto; min-width: 190px; }
#toolbar { padding: 13px 14px !important; }
#toolbar form { display: flex; align-items: center; gap: 8px; }
#toolbar form input[type="text"] { min-width: min(420px, 70vw); }
#changelist-filter { padding-bottom: 12px; }
#changelist-filter h2 { margin: 0; }
#changelist-filter h3 { margin: 14px 14px 7px; color: var(--arbs-text-strong); font-size: 13px; }
#changelist-filter ul { margin: 0; padding: 0 14px; }
#changelist-filter li { margin: 3px 0; }
#changelist-filter a { display: block; padding: 6px 8px; border-radius: 7px; color: var(--arbs-text); }
#changelist-filter li.selected a { background: var(--arbs-brand-soft); color: var(--arbs-brand-deep); font-weight: 700; }
.paginator { padding: 12px 14px !important; color: var(--arbs-muted); font-size: 13px; }

/* Forms */
.form-row { padding: 15px 18px !important; border-bottom: 1px solid var(--arbs-border) !important; }
.form-row:last-child { border-bottom: 0 !important; }
.form-row label,
.aligned label {
  color: var(--arbs-text-strong);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}
.help,
p.help,
form .help,
div.help,
.helptext { color: var(--arbs-muted) !important; font-size: 12px !important; line-height: 1.45 !important; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  min-height: 45px;
  padding: 9px 12px !important;
  border: 1px solid var(--arbs-border-strong) !important;
  border-radius: 9px !important;
  outline: none;
  background: var(--arbs-surface) !important;
  color: var(--arbs-text) !important;
  font-size: 14px !important;
  line-height: 1.4;
  box-shadow: inset 0 1px 1px rgba(16,38,31,.025) !important;
}
textarea { min-height: 130px; resize: vertical; }
select[multiple] { min-height: 180px; }
input::placeholder,
textarea::placeholder { color: var(--arbs-muted-2); opacity: 1; }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--arbs-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arbs-brand) 15%, transparent) !important;
}
input:disabled,
select:disabled,
textarea:disabled { background: var(--arbs-surface-3) !important; color: var(--arbs-muted) !important; opacity: 1; }
input[type="checkbox"],
input[type="radio"] { width: 18px; height: 18px; accent-color: var(--arbs-brand); }
.selector { padding: 12px; }
.selector h2 { border-radius: 8px 8px 0 0; }

/* Buttons and object tools */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
.object-tools a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: var(--arbs-brand) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--arbs-shadow-sm);
}
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover,
.object-tools a:hover { background: var(--arbs-brand-hover) !important; }
.button.default,
input[type="submit"].default,
.submit-row input.default { background: var(--arbs-brand) !important; }
.deletelink,
.deletelink-box a { background: var(--arbs-danger) !important; color: #fff !important; }
.submit-row {
  padding: 14px 16px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.object-tools { margin-top: -52px; }
.object-tools a { min-height: 40px; }

/* Login page keeps the same design language. */
body.login { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--arbs-canvas) !important; }
body.login #container {
  width: min(100%, 470px);
  min-height: 0;
  border: 1px solid var(--arbs-border);
  border-radius: var(--arbs-radius-lg);
  background: var(--arbs-surface);
  box-shadow: var(--arbs-shadow-lg);
  overflow: hidden;
}
body.login #header { position: static; min-height: auto; margin: 0; padding: 26px; justify-content: center; background: var(--arbs-sidebar) !important; border: 0; }
body.login #branding { position: static; width: auto; height: auto; padding: 0; background: transparent; border: 0; }
body.login .arbs-admin-brand { justify-content: center; }
body.login .arbs-admin-brand-copy strong { font-size: 18px; }
body.login #main { min-height: 0; margin: 0; }
body.login #content { padding: 28px; }
body.login #content h1 { font-size: 23px; }
body.login .submit-row { padding: 14px 0 0 !important; border: 0 !important; box-shadow: none; }
body.login .submit-row input { width: 100%; }
body.login #footer { margin-left: 0; }

/* Footer */
#footer {
  margin-left: var(--arbs-sidebar-width);
  padding: 20px 28px 28px;
  color: var(--arbs-muted);
  text-align: center;
  font-size: 12px;
}
.developer-credit { color: inherit; text-decoration: none; }
.developer-credit:hover { color: var(--arbs-brand); text-decoration: underline; }
.developer-heart { color: #ef5964; }

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--arbs-brand) 65%, white 35%);
  outline-offset: 2px;
}

/* Responsive behaviour */
@media (max-width: 1024px) {
  :root { --arbs-sidebar-width: 250px; }
  #header { padding-inline: 20px; }
  #content { padding-inline: 20px; }
  div.breadcrumbs { padding-inline: 20px; }
  .dashboard #content-main,
  .dashboard #content-related { width: 100%; float: none; }
  .dashboard #content-related { margin-top: 18px; }
  .toggle-nav-sidebar { left: 207px; }
}

@media (max-width: 767px) {
  html { font-size: 15px; }
  #branding {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .arbs-admin-brand-copy small,
  .arbs-admin-brand-copy em { display: none; }
  .arbs-admin-brand-copy strong { color: var(--arbs-text-strong); font-size: 15px; }
  .arbs-admin-brand-mark { width: 38px; height: 38px; border-radius: 10px; }
  #header {
    margin-left: 0;
    min-height: 68px;
    padding: 10px 14px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #user-tools { width: 100%; order: 3; padding-top: 8px; border-top: 1px solid var(--arbs-border); }
  .arbs-admin-global { margin-left: auto; }
  #nav-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: 44vh;
    padding-top: 10px;
    border-right: 0 !important;
  }
  .toggle-nav-sidebar { display: none !important; }
  #main,
  #footer { margin-left: 0; }
  #content { padding: 18px 14px 32px; }
  div.breadcrumbs { padding: 12px 14px 0; }
  #content h1 { font-size: 22px; }
  .object-tools { margin: 0 0 14px; float: none; }
  #changelist .actions { display: grid; gap: 8px; }
  #toolbar form { align-items: stretch; flex-direction: column; }
  #toolbar form input[type="text"] { min-width: 0; width: 100%; }
  .dashboard .module th { min-width: 0; }
  .dashboard .module th,
  .dashboard .module td { padding: 12px 10px; font-size: 13px; white-space: normal; }
  .form-row { padding: 13px 12px !important; }
  .submit-row { align-items: stretch; flex-direction: column; }
  .submit-row input,
  .submit-row a { width: 100%; }
  body.login #header { justify-content: center; }
  body.login .arbs-admin-brand-copy strong { color: #fff; }
}