/* ===========================================
   ADMIN CUSTOM CSS
   Custom styling for Django admin interface
   =========================================== */

/* Prevent layout shift when scrollbar appears/disappears on main content */
:root {
  /* Admin colour tokens: keep these together so they are easy to inspect and edit.
     Compact admin header bar paints with --custodia-moss (#2a3d2a), not --admin-header-color.
     --admin-header-color (#2a3b2e) is for secondary UI, dark-mode mixes, and login primary. */
  --admin-accent-color: #eadfce;
  --admin-accent-text-color: #1a1a1a;
  --admin-accent-text-color-dark: #ffffff;
  --admin-accent-color-dark: color-mix(in srgb, var(--admin-accent-color) 12%, var(--darkened-bg, #212121) 1%);
  --admin-accent-active-color: var(--admin-accent-color);
  --admin-accent-text-active-color: var(--admin-accent-text-color);
  --admin-header-color: #2a3b2e;
  --admin-header-text-color: #ffffff;
  --admin-header-color-dark: color-mix(in srgb, var(--admin-header-color) 88%, black 12%);
  --admin-header-active-color: var(--admin-header-color);
  --admin-site-title-font-size-desktop: var(--cu-brand-wordmark-size);
  --admin-site-title-font-size-tablet: var(--cu-brand-wordmark-size-tablet);
  --admin-site-title-font-size-mobile: var(--cu-brand-wordmark-size-mobile);
  --admin-card-bg: var(--body-bg);
  --admin-form-card-bg: #fffdf9;
  --admin-form-label-bg: #f1e9de;
  --admin-form-input-bg: #fffaf4;
  --zebra-color: #00000005;
  --admin-object-tools-bg: #6e3a2d;
  --admin-object-tools-fg: #ffffff;
  /* Compact header + primary submit share moss (#2a3d2a); defined once below. */
  --custodia-moss: #2a3d2a;
  --admin-submit-primary-bg: var(--custodia-moss);
  --admin-submit-secondary-bg: color-mix(in srgb, var(--custodia-moss) 82%, #fff 18%);
  --admin-submit-tertiary-bg: color-mix(in srgb, var(--custodia-moss) 70%, #fff 30%);
  --admin-submit-danger-bg: color-mix(in srgb, var(--custodia-moss) 30%, #b22222 70%);
  --admin-submit-action-width: 5.25rem;

  /* Custodia brand tokens (--cu-brand-dark, --cu-brand-mid, --cu-brand-teal
     live in custodia-brand.css which loads before this file) */
}

body {
  scrollbar-gutter: stable;
  --header-bg: var(--admin-accent-active-color) !important;
  /* For elements on primary color backgrounds (inline headers, nav sections, breadcrumbs) */
  --header-link-color: var(--admin-accent-text-active-color) !important;
  /* Default font for all admin elements that don't have explicit font styling */
  font-family: 'DM Sans', sans-serif !important;
}

/* Header link color for page header only */
#header {
  --header-link-color: var(--admin-header-text-color) !important;
}

/* But keep theme toggle using header background */
.theme-toggle {
  --header-bg: var(--admin-header-active-color) !important;
}

/* Module captions and app module styling */
.module caption,
.app-module .model {
  background: var(--admin-accent-active-color) !important;
  color: var(--admin-accent-text-active-color) !important;
 
}

/* Breadcrumb navigation strip */
.breadcrumbs {
  background: var(--admin-accent-active-color) !important;
}

/* Breadcrumb text color - use auto-detected primary text color */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs a:link,
.breadcrumbs a:visited {
  color: var(--admin-accent-text-active-color) !important;
}

.breadcrumbs a,
.breadcrumbs a:link,
.breadcrumbs a:visited,
.breadcrumbs a:hover,
.breadcrumbs a:focus,
.breadcrumbs a:active {
  text-decoration: none !important;
}

/* Header chrome (texture overlays). Live admin bar fill is --custodia-moss on
   .custodia-admin-header below — do not set background here or --admin-header-color
   looks like it paints the bar when it does not. Login sets its own #header fill. */
#header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 8px);
  opacity: 0.65;
  pointer-events: none;
}

#header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.09));
  pointer-events: none;
}

#header > * {
  position: relative;
  z-index: 1;
}

.object-tools a.addlink {
  background: var(--admin-object-tools-bg) url("/static/admin/img/tooltag-add.e59d620a9742.svg") no-repeat right 7px center !important;
  color: var(--admin-object-tools-fg) !important;
  padding-right: 26px;
}

.object-tools a.manage-plan-action,
.object-tools a.invoice-download-action {
  background-color: var(--admin-object-tools-bg) !important;
  color: var(--admin-object-tools-fg) !important;
}

#site-name a,
#site-name a:link,
#site-name a:visited {
  color: var(--admin-header-text-color) !important;
}

/* Success/info messages - make background semi-transparent */
.messagelist .success {
  background-color: rgba(173, 233, 187, 0.2) !important;
}


/* Widen sidebar to accommodate bold active links */
#nav-sidebar {
  flex: 0 0 265px !important;
  left: 0 !important;
  margin-left: 0 !important;
  visibility: visible !important;
  border-right: none !important;
  border-inline-end: none !important;
}

.main > #nav-sidebar,
.main.shifted > #nav-sidebar {
  margin-left: 0 !important;
  visibility: visible !important;
}

.main > #nav-sidebar + .content,
.main.shifted > #nav-sidebar + .content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hide Django sidebar toggle everywhere */
#toggle-nav-sidebar,
.toggle-nav-sidebar {
  display: none !important;
}

/* Hide custom mobile hamburger on pages without a sidebar (upgrade, commit, portal gate) */
body:has(.plan-action-page) #custodia-mobile-hamburger {
  display: none !important;
}

/* Sticky admin chrome and responsive sidebar behavior */
body:not(.login) #header {
  top: 0;
  z-index: 1040;
}

/* Allow #container to grow to full content height so sticky breadcrumbs
   are not clipped by Django base.css height:100% constraint */
body:not(.login) #container {
  height: auto !important;
  min-height: 100vh;
}

/* Sticky breadcrumbs on mobile/tablet only -- applied to the outer nav
   wrapper, not the inner .breadcrumbs div. Desktop scrolls them away. */

body:not(.login) .breadcrumbs {
  position: relative;
  z-index: 1030;
}

@media (max-width: 1024px) {
  body:not(.login) #container > nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030;
  }
}

/* Keep sidebar open/closed transitions smooth on desktop. */
#nav-sidebar {
  transition: width 0.22s ease, flex-basis 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
}

@media (min-width: 1025px) {
  /* Sidebar always open on desktop */
  #main #nav-sidebar {
    width: 265px !important;
    flex-basis: 265px !important;
    opacity: 1 !important;
    overflow: visible !important;
    border-right: 1px solid #ddd5c0 !important;
    border-inline-end: 1px solid #ddd5c0 !important;
  }

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

  html[data-theme="dark"] #main #nav-sidebar {
    /* border-right-color: #bbc4d3 !important; */
    border-inline-end-color: #59534c !important;
  }

  @media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #main #nav-sidebar {
      /* border-right-color: #2e3033 !important; */
      border-inline-end-color: #59534c!important;
    }
  }
}

.admin-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1050;
}

#nav-sidebar a,
#nav-sidebar a:link,
#nav-sidebar a:visited,
#nav-sidebar a:hover,
#nav-sidebar a:focus,
#nav-sidebar a:active {
  text-decoration: none !important;
}

/* Override active sidebar section header text color */
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--admin-accent-text-active-color) !important;
}

/* Override selected sidebar item styling */
#nav-sidebar .current-model {
  background: #18334934 !important;
}

html[data-theme="dark"] #nav-sidebar .current-model {
  background: #a7c1dd6c !important;
}

html[data-theme="light"] {
  --body-bg: #f8f4ee;
  --darkened-bg: #f2ece3;
  --hairline-color: #e7ddd0;
  --admin-list-header-bg: #ede2d4;
  --admin-select-selected-bg: #f0d0aa;
  --admin-select-selected-fg: #121212;
}

html[data-theme="dark"] {
  --admin-card-bg: color-mix(in srgb, var(--body-bg) 82%, var(--admin-accent-color) 5%);
  --admin-form-card-bg: color-mix(in srgb, var(--body-bg) 88%, white 4%);
  --admin-form-label-bg: color-mix(in srgb, var(--body-bg) 78%, var(--admin-accent-color) 8%);
  --admin-form-input-bg: color-mix(in srgb, var(--body-bg) 82%, white 6%);
  --zebra-color: #212121;
  --admin-accent-active-color: var(--admin-accent-color-dark);
  --admin-accent-text-active-color: var(--admin-accent-text-color-dark);
  --admin-header-active-color: var(--admin-header-color-dark);
  --admin-list-header-bg: #2c3138;
  --admin-select-selected-bg: #f0d0aa;
  --admin-select-selected-fg: #121212;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --body-bg: #f8f4ee;
    --darkened-bg: #f2ece3;
    --hairline-color: #e7ddd0;
    --admin-list-header-bg: #ede2d4;
    --admin-select-selected-bg: #f0d0aa;
    --admin-select-selected-fg: #121212;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --admin-card-bg: color-mix(in srgb, var(--body-bg) 82%, var(--admin-accent-color) 5%);
    --admin-form-card-bg: color-mix(in srgb, var(--body-bg) 88%, white 4%);
    --admin-form-label-bg: color-mix(in srgb, var(--body-bg) 78%, var(--admin-accent-color) 8%);
    --admin-form-input-bg: color-mix(in srgb, var(--body-bg) 82%, white 6%);
    --zebra-color: #212121;
    --admin-accent-active-color: var(--admin-accent-color-dark);
    --admin-accent-text-active-color: var(--admin-accent-text-color-dark);
    --admin-header-active-color: var(--admin-header-color-dark);
    --admin-list-header-bg: #2c3138;
    --admin-select-selected-bg: #f0d0aa;
    --admin-select-selected-fg: #121212;
  }
}

/* Shared selected-option styling for admin dropdowns (single + multi-select). */
select option:checked,
select[multiple] option:checked,
select[size]:not([size="1"]) option:checked,
select.admin-select-themed option:checked {
  background: var(--admin-select-selected-bg, #f0d0aa) !important;
  color: var(--admin-select-selected-fg, #121212) !important;
}

/* Admin dashboard and page headings */
body.dashboard #content h1 {
  font-family: 'Fraunces',serif !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
}

body.change-list #content h1,
body.change-form #content h1 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
}

body.change-list #content > h2,
body.change-form #content > h2,
body.change-form #content .archive-item-page-subtitle > h2,
body.change-form #content .project-change-subtitle,
body.change-form #content .task-change-subtitle {
  font-family: 'Crimson Pro', serif !important;
  font-weight: 600 !important;
  font-size: 1.5rem;
}

body.change-form #content .project-change-subtitle,
body.change-form #content .task-change-subtitle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

#content h3,
body #content h3 {
  font-family: 'DM Sans', sans-serif !important;
}

/* Keep UTC server time without showing Django's browser/server offset note. */
.timezonewarning {
  display: none !important;
}

body.dashboard #content-related .module:last-child {
  margin-bottom: 0 !important;
}

body.dashboard #content-related {
  background: transparent !important;
}

body.dashboard #content-related .module {
  background: var(--darkened-bg) !important;
}

body.dashboard #content-related .module h2 {
  font-family: 'EB Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}

body.custodia-dashboard-home #content {
  width: 100% !important;
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 32px 56px !important;
  box-sizing: border-box;
}

body.custodia-dashboard-home #content-main {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}

.custodia-dashboard-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.custodia-dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 2px;
}

.custodia-dashboard-kicker,
.custodia-module-eyebrow {
  margin: 0 0 5px;
  color: color-mix(in srgb, var(--body-quiet-color, #666) 78%, var(--admin-header-active-color) 22%);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
}

body.dashboard .custodia-dashboard-hero h1 {
  margin: 0;
  color: var(--body-fg);
  font-family: 'Fraunces', serif !important;
  font-size: 3.2rem !important;
  font-weight: 500 !important;
  line-height: 0.95;
}

.custodia-dashboard-intro {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--body-quiet-color);
  font-size: 0.98rem;
  line-height: 1.55;
}

.custodia-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.custodia-module-card,
.custodia-activity-panel {
  border: 1px solid var(--hairline-color);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)),
    var(--admin-card-bg, var(--body-bg));
  box-shadow: 0 10px 24px rgba(40, 32, 22, 0.07), 0 1px 2px rgba(40, 32, 22, 0.05);
}

.custodia-module-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.custodia-module-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 19px 20px 9px;
}

.custodia-module-card h2,
.custodia-activity-panel h2 {
  margin: 0;
  color: var(--body-fg);
  font-family: 'Fraunces', serif !important;
  font-size: 2.05rem;
  font-weight: 300;
  line-height: 1.05;
}

.custodia-module-summary {
  min-height: 64px;
  margin: 0;
  padding: 0 20px 8px;
  color: var(--body-quiet-color);
  font-size: 0.9rem;
  line-height: 1.45;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

html.material-symbols-ready .material-symbols-outlined {
  opacity: 1;
}

.custodia-module-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
  padding: 0 14px 14px;
}

.custodia-module-tile,
.custodia-module-tile:link,
.custodia-module-tile:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 10px;
  border: 1px solid color-mix(in srgb, var(--hairline-color) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-bg) 88%, var(--darkened-bg) 12%);
  color: var(--body-fg) !important;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

a.custodia-module-tile:hover,
a.custodia-module-tile:focus {
  border-color: color-mix(in srgb, var(--admin-header-active-color) 45%, transparent);
  background: color-mix(in srgb, var(--admin-accent-active-color) 16%, var(--body-bg));
  box-shadow: 0 6px 14px rgba(40, 32, 22, 0.1);
  transform: translateY(-1px);
}

.custodia-tile-icon {
  color: color-mix(in srgb, var(--admin-header-active-color) 78%, var(--custodia-gold) 22%);
  font-size: 26px;
  line-height: 1;
}

a.custodia-module-tile:hover .custodia-tile-icon,
a.custodia-module-tile:focus .custodia-tile-icon {
  color: var(--admin-header-active-color);
}

.custodia-tile-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custodia-module-tile.is-disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Plan-curator: Restoration Project tile gets a greyed, upgrade-tier look ── */
.custodia-module-tile.plan-curator,
.custodia-module-tile.plan-curator:link,
.custodia-module-tile.plan-curator:visited {
  border-color: color-mix(in srgb, var(--custodia-gold) 35%, #bbb 65%);
  background: color-mix(in srgb, var(--custodia-gold) 8%, var(--body-bg));
  color: color-mix(in srgb, var(--body-fg) 60%, #999 40%) !important;
}
.custodia-module-tile.plan-curator .custodia-tile-icon {
  color: color-mix(in srgb, var(--custodia-gold) 55%, #888 45%);
}
a.custodia-module-tile.plan-curator:hover,
a.custodia-module-tile.plan-curator:focus {
  border-color: color-mix(in srgb, var(--custodia-gold) 55%, #bbb 45%);
  background: color-mix(in srgb, var(--custodia-gold) 14%, var(--body-bg));
  color: var(--body-fg) !important;
}
a.custodia-module-tile.plan-curator:hover .custodia-tile-icon,
a.custodia-module-tile.plan-curator:focus .custodia-tile-icon {
  color: var(--custodia-gold);
}
.custodia-module-tile.plan-curator::after {
  content: "Preview";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--custodia-gold) 45%, #bbb 55%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custodia-gold) 15%, var(--body-bg));
  color: color-mix(in srgb, var(--custodia-gold) 60%, #888 40%);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ── Curator preview badge in the sidebar nav (Conservator-plan features) ── */
body.custodia-plan-curator #nav-sidebar tr.model-restorationproject > th > a::after,
body.custodia-plan-curator #nav-sidebar tr.model-projecttask > th > a::after,
body.custodia-plan-curator #nav-sidebar tr.model-appearancesettings > th > a::after {
  content: "Preview";
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--custodia-gold) 45%, #bbb 55%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custodia-gold) 15%, var(--body-bg));
  color: color-mix(in srgb, var(--custodia-gold) 62%, #777 38%);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.6;
}
html[data-theme="dark"] body.custodia-plan-curator #nav-sidebar tr.model-restorationproject > th > a::after,
html[data-theme="dark"] body.custodia-plan-curator #nav-sidebar tr.model-projecttask > th > a::after,
html[data-theme="dark"] body.custodia-plan-curator #nav-sidebar tr.model-appearancesettings > th > a::after {
  border-color: color-mix(in srgb, var(--custodia-gold) 50%, #555 50%);
  color: color-mix(in srgb, var(--custodia-gold) 75%, #aaa 25%);
}

/* ── Plan-curator read-only project form ── */
.curator-readonly-banner {
  background: #fef9ed;
  border: 1px solid #e8d5a0;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.9rem;
  color: #6b5a30;
  font-weight: 500;
}
.curator-readonly-banner__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.curator-readonly-banner__message {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
}
.curator-readonly-banner__cta {
  flex: 0 0 auto;
  font-weight: 650;
  color: #8b6914;
  white-space: nowrap;
  align-self: center;
}
@media (min-width: 640px) {
  .curator-readonly-banner {
    align-items: center;
    flex-wrap: nowrap;
  }
}

/* Curator banner: tone down the bright cream background in dark modes */
html[data-theme="dark"] .curator-readonly-banner {
  background: color-mix(in srgb, var(--custodia-gold) 12%, var(--body-bg));
  border-color: color-mix(in srgb, var(--custodia-gold) 38%, transparent);
  color: #e6d6ad;
}
html[data-theme="dark"] .curator-readonly-banner__cta {
  color: color-mix(in srgb, var(--custodia-gold) 72%, #f0ead8 28%);
}
/* The SVG icon has a hard-coded near-black fill; recolour it to a warm light
   tone so it stays visible on the dark banner. */
html[data-theme="dark"] .curator-readonly-banner__icon {
  filter: brightness(0) invert(0.68) sepia(0.5) saturate(1.5) hue-rotate(2deg);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .curator-readonly-banner {
    background: color-mix(in srgb, var(--custodia-gold) 12%, var(--body-bg));
    border-color: color-mix(in srgb, var(--custodia-gold) 38%, transparent);
    color: #e6d6ad;
  }
  html[data-theme="auto"] .curator-readonly-banner__cta {
    color: color-mix(in srgb, var(--custodia-gold) 72%, #f0ead8 28%);
  }
  html[data-theme="auto"] .curator-readonly-banner__icon {
    filter: brightness(0) invert(0.68) sepia(0.5) saturate(1.5) hue-rotate(2deg);
  }
}

/* Colour picker inputs: keep at browser-default compact width instead of
   stretching to fill the grid column like text inputs. */
body.change-form fieldset.module.aligned > .form-row input[type="color"] {
  width: 53px !important;
  min-width: 44px;
  height: 29px;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
}

/* Read-only (disabled) form fields for curator preview — theme-aware, not washed out */
.curator-readonly-form input:disabled,
.curator-readonly-form select:disabled,
.curator-readonly-form textarea:disabled,
#automationsettings_form input[name^="notify_admin_"]:disabled {
  background: color-mix(in srgb, var(--body-bg) 70%, var(--darkened-bg) 30%) !important;
  color: var(--body-quiet-color) !important;
  -webkit-text-fill-color: var(--body-quiet-color);
  border-color: var(--border-color, var(--hairline-color)) !important;
  cursor: default;
  opacity: 1;
}
.curator-readonly-form .selector-available select,
.curator-readonly-form .selector-chosen select {
  background: color-mix(in srgb, var(--body-bg) 70%, var(--darkened-bg) 30%) !important;
  color: var(--body-quiet-color) !important;
  -webkit-text-fill-color: var(--body-quiet-color);
}
.curator-readonly-form .related-widget-wrapper a,
.curator-readonly-form .add-related,
.curator-readonly-form .change-related,
.curator-readonly-form .delete-related {
  pointer-events: none;
  opacity: 0.4;
}
.curator-readonly-form .inline-group .add-row a {
  pointer-events: none;
  opacity: 0.4;
}
.curator-readonly-form .inline-group td a,
.curator-readonly-form .inline-group .inline-deletelink {
  pointer-events: none;
  opacity: 0.4;
}
.curator-readonly-form .datetimeshortcuts,
.curator-readonly-form .datetimeshortcuts a {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.4;
}
body:has(.curator-readonly-form) .calendarbox,
body:has(.curator-readonly-form) .clockbox {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* History button repositioned below curator banner */
.object-tools.curator-history-tools {
  float: none;
  margin: 12px 0 0 0;
  padding: 0;
  overflow: hidden;
}
.object-tools.curator-history-tools li {
  float: none;
  display: inline-block;
}

.custodia-activity-panel {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 20px;
}

.custodia-activity-heading {
  display: flex;
  align-items: flex-start;
}

.custodia-activity-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.custodia-activity-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 10px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--hairline-color) 76%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--body-bg) 82%, var(--darkened-bg) 18%);
}

.custodia-activity-marker {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: #8b7d61;
}

.custodia-activity-item.is-addition .custodia-activity-marker {
  background: #4f8a38;
}

.custodia-activity-item.is-change .custodia-activity-marker {
  background: #b68422;
}

.custodia-activity-item.is-deletion .custodia-activity-marker {
  background: #a43f3f;
}

.custodia-activity-object,
.custodia-activity-meta,
.custodia-activity-empty,
.custodia-dashboard-empty {
  margin: 0;
}

.custodia-activity-object {
  overflow: hidden;
  color: var(--body-fg);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custodia-activity-object a,
.custodia-activity-object a:link,
.custodia-activity-object a:visited {
  color: var(--custodia-gold) !important;
}

html[data-theme="light"] .custodia-activity-object a,
html[data-theme="light"] .custodia-activity-object a:link,
html[data-theme="light"] .custodia-activity-object a:visited {
  color: var(--custodia-moss) !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .custodia-activity-object a,
  html[data-theme="auto"] .custodia-activity-object a:link,
  html[data-theme="auto"] .custodia-activity-object a:visited {
    color: var(--custodia-moss) !important;
  }
}

.custodia-activity-meta,
.custodia-activity-empty,
.custodia-dashboard-empty {
  color: var(--body-quiet-color);
  font-size: 0.74rem;
  line-height: 1.3;
}

.custodia-dashboard-empty {
  grid-column: 1 / -1;
  padding: 20px;
  border: 1px solid var(--hairline-color);
  border-radius: 8px;
  background: var(--admin-card-bg, var(--body-bg));
}

html[data-theme="dark"] .custodia-module-card,
html[data-theme="dark"] .custodia-activity-panel {
  background: color-mix(in srgb, var(--body-bg) 92%, white 4%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .custodia-activity-item {
  background: color-mix(in srgb, var(--body-bg) 86%, white 4%);
}

html[data-theme="dark"] .custodia-module-tile,
html[data-theme="dark"] .custodia-module-tile:link,
html[data-theme="dark"] .custodia-module-tile:visited {
  border-color: rgba(240, 234, 216, 0.18);
  background: rgba(240, 234, 216, 0.06);
  color: #f0ead8 !important;
}

html[data-theme="dark"] a.custodia-module-tile:hover,
html[data-theme="dark"] a.custodia-module-tile:focus {
  border-color: rgba(240, 234, 216, 0.5);
  background: rgba(240, 234, 216, 0.12);
}

html[data-theme="dark"] .custodia-tile-icon {
  color: color-mix(in srgb, var(--custodia-gold) 78%, #f0ead8 22%);
}

html[data-theme="dark"] a.custodia-module-tile:hover .custodia-tile-icon,
html[data-theme="dark"] a.custodia-module-tile:focus .custodia-tile-icon {
  color: #f4ecd4;
}

/* Plan-curator (preview) tile keeps its gold tint in dark mode */
html[data-theme="dark"] .custodia-module-tile.plan-curator,
html[data-theme="dark"] .custodia-module-tile.plan-curator:link,
html[data-theme="dark"] .custodia-module-tile.plan-curator:visited {
  border-color: color-mix(in srgb, var(--custodia-gold) 55%, transparent);
  background: color-mix(in srgb, var(--custodia-gold) 16%, transparent);
}
html[data-theme="dark"] .custodia-module-tile.plan-curator .custodia-tile-icon {
  color: color-mix(in srgb, var(--custodia-gold) 88%, #f0ead8 12%);
}
html[data-theme="dark"] a.custodia-module-tile.plan-curator:hover,
html[data-theme="dark"] a.custodia-module-tile.plan-curator:focus {
  border-color: color-mix(in srgb, var(--custodia-gold) 75%, transparent);
  background: color-mix(in srgb, var(--custodia-gold) 24%, transparent);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .custodia-module-card,
  html[data-theme="auto"] .custodia-activity-panel {
    background: color-mix(in srgb, var(--body-bg) 92%, white 4%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  html[data-theme="auto"] .custodia-activity-item {
    background: color-mix(in srgb, var(--body-bg) 86%, white 4%);
  }

  html[data-theme="auto"] .custodia-module-tile,
  html[data-theme="auto"] .custodia-module-tile:link,
  html[data-theme="auto"] .custodia-module-tile:visited {
    border-color: rgba(240, 234, 216, 0.18);
    background: rgba(240, 234, 216, 0.06);
    color: #f0ead8 !important;
  }

  html[data-theme="auto"] a.custodia-module-tile:hover,
  html[data-theme="auto"] a.custodia-module-tile:focus {
    border-color: rgba(240, 234, 216, 0.5);
    background: rgba(240, 234, 216, 0.12);
  }

  html[data-theme="auto"] .custodia-tile-icon {
    color: color-mix(in srgb, var(--custodia-gold) 78%, #f0ead8 22%);
  }

  html[data-theme="auto"] a.custodia-module-tile:hover .custodia-tile-icon,
  html[data-theme="auto"] a.custodia-module-tile:focus .custodia-tile-icon {
    color: #f4ecd4;
  }

  /* Plan-curator (preview) tile keeps its gold tint in dark-system mode */
  html[data-theme="auto"] .custodia-module-tile.plan-curator,
  html[data-theme="auto"] .custodia-module-tile.plan-curator:link,
  html[data-theme="auto"] .custodia-module-tile.plan-curator:visited {
    border-color: color-mix(in srgb, var(--custodia-gold) 55%, transparent);
    background: color-mix(in srgb, var(--custodia-gold) 16%, transparent);
  }
  html[data-theme="auto"] .custodia-module-tile.plan-curator .custodia-tile-icon {
    color: color-mix(in srgb, var(--custodia-gold) 88%, #f0ead8 12%);
  }
  html[data-theme="auto"] a.custodia-module-tile.plan-curator:hover,
  html[data-theme="auto"] a.custodia-module-tile.plan-curator:focus {
    border-color: color-mix(in srgb, var(--custodia-gold) 75%, transparent);
    background: color-mix(in srgb, var(--custodia-gold) 24%, transparent);
  }
}

@media (max-width: 1024px) {
  body.custodia-dashboard-home #content {
    padding: 36px 20px 44px !important;
  }

  .custodia-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.dashboard .custodia-dashboard-hero h1 {
    font-size: 2.65rem !important;
  }

  .custodia-module-card.app-auth {
    grid-column: 1 / -1;
  }

  .custodia-module-summary {
    min-height: 0;
  }

  .custodia-activity-panel {
    grid-template-columns: 1fr;
  }

  .custodia-activity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.custodia-dashboard-home #content {
    padding: 32px 14px 36px !important;
  }

  .custodia-dashboard-shell {
    gap: 16px;
  }

  .custodia-dashboard-hero {
    display: block;
  }

  body.dashboard .custodia-dashboard-hero h1 {
    font-size: 2.25rem !important;
  }

  .custodia-dashboard-intro {
    font-size: 0.9rem;
  }

  .custodia-module-grid,
  .custodia-activity-list {
    grid-template-columns: 1fr;
  }

  .custodia-module-card.app-auth {
    grid-column: auto;
  }

  .custodia-module-card-header {
    padding: 17px 16px 8px;
  }

  .custodia-module-summary {
    padding: 0 16px 15px;
  }

  .custodia-module-tiles {
    padding: 12px;
    gap: 8px;
  }

  .custodia-module-tile {
    min-height: 84px;
  }

  .custodia-activity-panel {
    padding: 16px;
  }
}

/* Group permissions summary: info note sits above the card; hide Django's empty
   readonly label cell so no orphaned colon remains. */
body.app-auth.model-group.change-form .custodia-card-section:has(> fieldset.permissions-summary-fieldset) > .description {
  margin-bottom: 10px;
}

body.app-auth.model-group.change-form .field-granted_permissions label,
body.app-auth.model-group.change-form .field-granted_permissions .flex-container > label,
body.app-auth.model-group.change-form .field-granted_permissions > div > label {
  display: none !important;
}

body.app-auth.model-group.change-form .field-granted_permissions {
  align-items: stretch;
  overflow: visible !important;
}

body.app-auth.model-group.change-form .field-granted_permissions > div,
body.app-auth.model-group.change-form .field-granted_permissions .flex-container {
  display: block !important;
  width: 100%;
}

body.app-auth.model-group.change-form .field-granted_permissions .readonly {
  margin-left: 0 !important;
  width: 100%;
}

body.app-auth.model-group.change-form .custodia-permissions-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-auth.model-group.change-form .custodia-permission-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(79, 100, 78, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--body-fg, #2b261f);
  font-weight: 650;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(31, 35, 26, 0.06);
}

body.app-auth.model-group.change-form .custodia-permission-chip-mark {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6d8060;
  box-shadow: 0 0 0 4px rgba(109, 128, 96, 0.14);
}

body.app-auth.model-group.change-form .custodia-permission-chip--edit .custodia-permission-chip-mark {
  background: #9b7045;
  box-shadow: 0 0 0 4px rgba(155, 112, 69, 0.14);
}

body.app-auth.model-group.change-form .custodia-permission-chip--full .custodia-permission-chip-mark {
  background: #7a382d;
  box-shadow: 0 0 0 4px rgba(122, 56, 45, 0.14);
}

body.app-auth.model-group.change-form .custodia-permission-chip-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.app-auth.model-group.change-form .custodia-permissions-panel--empty {
  display: block;
}

body.app-auth.model-group.change-form .custodia-permissions-panel--empty p {
  margin: 0;
  color: var(--body-quiet-color, #6f6258);
  font-weight: 600;
}

@media (max-width: 520px) {
  body.app-auth.model-group.change-form .custodia-permissions-panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

body.dashboard #content-main a,
body.dashboard #content-main a:link,
body.dashboard #content-main a:visited,
body.dashboard #content-main a:hover,
body.dashboard #content-main a:focus,
body.dashboard #content-main a:active,
body.app-index #content-main a,
body.app-index #content-main a:link,
body.app-index #content-main a:visited,
body.app-index #content-main a:hover,
body.app-index #content-main a:focus,
body.app-index #content-main a:active {
  text-decoration: none !important;
}

/* User tools styling - apply auto-detected text color with dotted underline */
#user-tools,
#user-tools a,
#user-tools a:link,
#user-tools a:visited,
#user-tools form,
#user-tools button,
#user-tools input[type="submit"] {
  color: var(--admin-header-text-color) !important;
}

#user-tools a,
#user-tools a:link,
#user-tools a:visited {
  border-bottom: 1px dotted var(--admin-header-text-color) !important;
  text-decoration: none !important;
}

#user-tools a:hover,
#user-tools input[type="submit"]:hover {
  color: var(--admin-header-text-color) !important;
  border-bottom: 1px dotted var(--admin-header-text-color) !important;
}

/* Logout button styling */
#user-tools form input[type="submit"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: inherit !important;
}

/* ===========================================
   Admin branding responsiveness
   =========================================== */


@media (max-width: 1024px) {
  body:not(.login) #header {
    position: static;
    top: auto;
  }

  /* Once past the header, pin it fixed but hide above viewport */
  body:not(.login) #header.custodia-header-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1041;
    transform: translateY(-110%);
    transition: transform 0.22s ease;
  }

  /* Peek: slide down smoothly into view */
  body:not(.login) #header.custodia-header-scrolled.custodia-header-peek {
    transform: translateY(0);
  }

  /* Breadcrumb nav drops below the peeking header */
  body:not(.login) #container > nav.custodia-nav-peeking {
    top: var(--custodia-header-height, var(--custodia-header-height-base)) !important;
    transition: top 0.22s ease;
  }

  /* Allow changelist filter to scroll vertically on mobile */
  #changelist-filter {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.login) #header.custodia-admin-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body:not(.login) #site-branding.custodia-header-identity {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    text-align: left !important;
  }

  body:not(.login) .custodia-header-copy {
    align-items: flex-start !important;
    text-align: left !important;
  }

 
  body:not(.login) .custodia-header-actions,
  body:not(.login) #user-tools {
    margin-left: auto !important;
    text-align: left !important;
  }

  #main #nav-sidebar {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(82vw, 300px) !important;
    max-width: 300px;
    transform: translateX(-100%) !important;
    opacity: 1;
    z-index: 1060;
    border-right: 1px solid var(--hairline-color) !important;
    border-inline-end: 1px solid var(--hairline-color) !important;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.2);
    background: var(--body-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-top: 0;
    visibility: visible !important;
  }

  body.admin-mobile-nav-open #main #nav-sidebar {
    transform: translateX(0) !important;
  }

  body.admin-mobile-nav-open {
    overflow: hidden;
  }

  body.admin-mobile-nav-open .admin-nav-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #main {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
  }

  .main > #nav-sidebar + .content,
  .main.shifted > #nav-sidebar + .content {
    max-width: 100% !important;
  }

  .colMS,
  .colSM {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #content-related,
  .colSM #content-related {
    width: 100% !important;
    margin: 0 !important;
  }

  body.change-form .aligned .form-row {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.change-form .aligned .form-row > div,
  body.change-form .aligned .form-row .flex-container,
  body.change-form .aligned .form-row .related-widget-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.change-form .related-widget-wrapper {
    display: flex;
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }

  body.change-form .related-widget-wrapper select,
  body.change-form .related-widget-wrapper input,
  body.change-form .related-widget-wrapper .vTextField {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  body.change-form .related-widget-wrapper-link {
    flex: 0 0 auto;
  }

  body.change-form .aligned .help,
  body.change-form .aligned .helptext {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }

}

/* Mobile-only: release inputs/selects/textareas to fill the row. The
   .vTextField 20em (~320px) cap is kept above 600px, dropped below. */
@media (max-width: 600px) {
  body.change-form fieldset.module.aligned > .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  body.change-form fieldset.module.aligned > .form-row textarea,
  body.change-form fieldset.module.aligned > .form-row select:not(.filtered):not(.selector-available-target):not(.selector-chosen-target),
  body.change-form fieldset.module.aligned > .form-row .vTextField {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 0;
    box-sizing: border-box;
  }

  /* Restore intrinsic sizing on SelectFilter inner <select>s -- the rule
     above would set flex-basis: 0 and collapse them to a single row. */
  body.change-form fieldset.module.aligned > .form-row .selector select {
    flex: 0 1 auto !important;
  }

  /* Shrink cols=40 textareas to fit (minus 24px side margin) so they don't
     overhang. Extra selectors catch rows admin_project.js relocates. */
  body.change-form fieldset.module.aligned > .form-row textarea,
  body.change-form .form-row.aligned textarea,
  body.change-form .form-row.field-project_notes textarea {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* (Phone-width stacking for .flex-container lives further down so it
   appears after the display:contents rules and wins on source order.) */

/* Keep related-object widgets (FK selects + edit/add/delete/view icons)
   responsive at all widths, including laptop (outside the media query). */
body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper {
  display: flex !important;
  align-items: center;
  column-gap: 6px;
  row-gap: 8px;
  flex-wrap: wrap;
  float: none !important;
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0;
  box-sizing: border-box;
}

body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper > select,
body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper > input,
body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper > .vTextField {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 320px !important;
  box-sizing: border-box;
}

body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper-link {
  flex: 0 0 auto;
}

/* Phone only: give the select a full row so icon links wrap beneath it.
   Above 600px the 320px cap keeps FK selects aligned with other inputs. */
@media (max-width: 600px) {
  body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper > select,
  body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper > input,
  body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper > .vTextField {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* filter_horizontal / filter_vertical pick-list (Groups, User permissions):
   force it shrinkable so it fills the column instead of overflowing. */
body.change-form fieldset.module.aligned > .form-row .related-widget-wrapper:has(> .selector),
body.change-form fieldset.module.aligned > .form-row .selector {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  box-sizing: border-box;
}

body.change-form fieldset.module.aligned > .form-row .selector .selector-available,
body.change-form fieldset.module.aligned > .form-row .selector .selector-chosen {
  min-width: 0 !important;
}

body.change-form fieldset.module.aligned > .form-row .selector select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Narrow change-form columns compress both SelectFilter halves to a sliver.
   Stack them vertically once each half would fall under ~260px. */
@media (max-width: 1100px) {
  body.change-form fieldset.module.aligned > .form-row .selector {
    flex-wrap: wrap !important;
  }
  body.change-form fieldset.module.aligned > .form-row .selector .selector-available,
  body.change-form fieldset.module.aligned > .form-row .selector .selector-chosen {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.change-form fieldset.module.aligned > .form-row .selector .selector-chooser {
    flex: 0 0 auto !important;
    margin: 8px auto !important;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  body.change-form fieldset.module.aligned > .form-row .selector .selector-chooser li {
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav-sidebar,
  .admin-nav-overlay {
    transition: none !important;
  }
}

@media (max-width: 480px) {
  body:not(.login) #header #site-name,
  body:not(.login) #header #site-name a,
  body:not(.login) #header #site-name a:link,
  body:not(.login) #header #site-name a:visited,
  body:not(.login) #site-name,
  body:not(.login) #site-name a,
  body:not(.login) #site-name a:link,
  body:not(.login) #site-name a:visited {
    font-size: var(--cu-brand-wordmark-size-mobile) !important;
  }
}

@media (max-width: 375px) {
  body:not(.login) #site-branding .org-logo {
    --cu-brand-logo-box: var(--cu-brand-logo-size-mobile);
  }
}

/* Override inline light color for current file path display */
.form-row .readonly,
.field-logo .readonly,
.form-row div[style*="color:#eee"] {
  color: #333 !important;
}

html[data-theme="dark"] .form-row .readonly,
html[data-theme="dark"] .field-logo .readonly,
html[data-theme="dark"] .form-row div[style*="color:#eee"] {
  color: #848484 !important;
}

/* Slightly wider Status column in ArchiveItem changelist */
.app-core.model-archiveitem .column-status {
  min-width: 130px;
}

/* Slightly wider Title column in ArchiveItem changelist */ 
.app-core.model-archiveitem .column-title {
  min-width: 220px;
}

/* Slightly wider Task name column in ProjectTask changelist */
.app-core.model-projecttask .column-title {
  min-width: 300px;
}

/* Slightly wider Project column in ProjectTask changelist */
.app-core.model-projecttask .column-project_link {
  min-width: 250px;
}

/* Give key Document Library changelist columns a bit more room */
.app-core.model-documentlibrary .column-title {
  min-width: 240px;
}

/* Hide the "Clear" checkbox on file fields -- replace by uploading a new file */
.app-core.model-documentlibrary .clearable-file-input {
  display: none;
}

.app-core.model-documentlibrary .column-storage_source {
  min-width: 140px;
}

.app-core.model-documentlibrary .column-uploaded_by_display {
  min-width: 140px;
}

.app-core.model-documentlibrary .form-row.field-is_external_link {
  flex-direction: column;
}

.app-core.model-documentlibrary .form-row.field-is_external_link .checkbox-row {
  display: flex;
  align-items: center;
}

.app-core.model-documentlibrary .form-row.field-is_external_link .checkbox-row > label {
  order: -1;
  width: 160px;
  padding: 0 10px 0 0;
  margin: 0;
}

.app-core.model-documentlibrary .form-row.field-is_external_link .checkbox-row > input[type="checkbox"] {
  margin: 0;
}

.app-core.model-documentlibrary .form-row.field-is_external_link .help,
.app-core.model-documentlibrary .form-row.field-is_external_link .helptext {
  margin-left: 170px;
}

/* Keep admin changelist rows vertically aligned */
#result_list tbody th,
#result_list tbody td {
  vertical-align: middle;
}

#result_list td.action-checkbox,
#result_list th.action-checkbox {
  vertical-align: middle;
}

/* Nudge admin list checkboxes down slightly so they sit level with row text */
#result_list td.action-checkbox input[type="checkbox"],
#result_list th.action-checkbox input[type="checkbox"] {
  margin-top: 0;
  vertical-align: middle;
  position: relative;
  top: 1px;
}

/* Give the Organisation column more room on the global user changelist. */
#result_list th.column-get_client,
#result_list td.field-get_client {
  min-width: 14rem;
  width: 14rem;
}

.help-tooltip-wrap {
  position: relative;
  display: inline-block;
}

.help-tooltip,
.admin-help-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(42, 59, 46, 0.28);
  border-radius: 50%;
  background: #fffaf4;
  color: #2a3b2e;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  flex: 0 0 17px;
}

.help-tooltip {
  margin-left: 5px;
  cursor: default;
}

.help-tooltip:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html[data-theme="dark"] .help-tooltip,
html[data-theme="dark"] .admin-help-note__icon {
  border-color: rgba(240, 234, 216, 0.36);
  background: #2f3135;
  color: #f0ead8;
}

/* Tooltip icon inside inline headings (e.g. pre-restoration images) */
.inline-heading .help-tooltip-wrap {
  text-transform: none;
  vertical-align: middle;
}

/* Allow tooltips inside tabular inline fieldsets to escape the fieldset boundary.
   .module uses overflow:hidden for rounded corners, which clips ::after balloons. */
.inline-group .tabular fieldset.module {
  overflow: visible !important;
}

/* Flip the tooltip upward in inline table headers — these always sit at the
   bottom of their fieldset, so opening downward crowds the bottom of the page. */
fieldset.module thead th .help-tooltip-wrap::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
  transform: translateY(-2px);
}
fieldset.module thead th .help-tooltip-wrap:hover::after,
fieldset.module thead th .help-tooltip-wrap:focus::after,
fieldset.module thead th .help-tooltip-wrap:focus-within::after {
  transform: translateY(0);
}

.help-tooltip-wrap::after {
  content: attr(data-help);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  background: #2b2b2b;
  color: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.2;
  width: max-content;
  max-width: 360px;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.05s ease, transform 0.05s ease;
  pointer-events: none;
  z-index: 1000;
  text-transform: none;
}

.help-tooltip-wrap:hover::after,
.help-tooltip-wrap:focus::after,
.help-tooltip-wrap:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.admin-help-note {
  display: flex;
  align-items: flex-start;
  gap: 3.5px;
  margin-top: 6px;
  color: var(--body-quiet-color);
}

.admin-help-note__icon {
  margin-top: 1px;
}

.admin-help-note__text {
  min-width: 0;
  color: currentColor;
  font-size: 0.80rem;
}

.change-list #content-main > .admin-help-note {
  max-width: min(100%, calc(100vw - 32px));
}

.change-list #content-main > .admin-help-note .admin-help-note__text {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}

@media (max-width: 1024px) {
  .change-list #content-main > .admin-help-note {
    width: calc(100vw - 40px);
  }
}

.admin-help-note--warning {
  color: #b26a00;
}

.admin-help-note--warning .admin-help-note__icon {
  color: currentColor;
}

.admin-help-note--warning .admin-help-note__text {
  color: currentColor;
}

/* Match archive inline image layout to the tighter project image inline layout. */
body.model-archiveitem .inline-group .tabular td.original p {
  display: none;
}

body.model-archiveitem .inline-group .tabular td.field-thumbnail {
  width: 110px;
  padding: 5px !important;
  vertical-align: middle;
}

body.model-archiveitem .inline-group .archive-condition-log-inline tr.form-row:not(.has_original):not(.empty-form) {
  display: none;
}

/* RestorationProject pre/post images and project files: hide the visible
   "extra" blank form rows while keeping the empty-form template so the
   inline JS still renders the "Add another ..." link below the cards. */
body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.form-row:not(.has_original):not(.empty-form) {
  display: none;
}

body.model-archiveitem .inline-group .archive-condition-log-inline tr.add-row {
  display: none !important;
}

body.model-archiveitem .inline-group .tabular tr.add-row td a {
  display: inline;
}

body.model-archiveitem :is(#images-group, #archiveimage_set-group, #archive_image_set-group, #files-group, #archivefile_set-group, #archive_file_set-group) .tabular tr.add-row,
body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row,
body.model-projecttask :is(#images-group, #taskimage_set-group, #task_image_set-group) .tabular tr.add-row {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.model-archiveitem :is(#images-group, #archiveimage_set-group, #archive_image_set-group, #files-group, #archivefile_set-group, #archive_file_set-group) .tabular tr.add-row td,
body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row td,
body.model-projecttask :is(#images-group, #taskimage_set-group, #task_image_set-group) .tabular tr.add-row td {
  padding: 0 !important;
  border: 0 !important;
}

body.model-archiveitem :is(#images-group, #archiveimage_set-group, #archive_image_set-group, #files-group, #archivefile_set-group, #archive_file_set-group) .tabular tr.add-row td a,
body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row td a,
body.model-projecttask :is(#images-group, #taskimage_set-group, #task_image_set-group) .tabular tr.add-row td a {
  display: block;
  padding: 11px 14px;
  border: 1px dashed var(--hairline-color);
  border-radius: 10px;
  background: var(--darkened-bg);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}

body.model-restorationproject :is(#projectfile_set-group, #project_file_set-group, #files-group) .tabular tr.add-row td a,
body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular tr.add-row td a {
  border: none;
}

/* Archive item related files and images: remove slot borders to match project page style */
body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular tr.form-row {
  border: none;
  box-shadow: none;
  border-top: 1px solid var(--hairline-color);
}

/* RestorationProject pre/post images and project files: hairline separators
   between rows only — not above the first row (fieldset already draws the card edge). */
body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.form-row {
  border: none !important;
  box-shadow: none !important;
}

body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.form-row:not(:first-child) {
  border-top: 1px solid var(--hairline-color) !important;
}

/* Pre/post image cards: caption under thumb+upload so half-width cards don't clip.
   Desktop/tablet only — phone stack rules below override to display:block. */
@media (min-width: 601px) {
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular thead {
    display: none;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular tbody tr.form-row.has_original,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular tbody tr.form-row.custodia-added-inline {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb image delete"
      "caption caption caption";
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    padding: 12px 14px;
    box-sizing: border-box;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular tbody tr.form-row.has_original > td,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular tbody tr.form-row.custodia-added-inline > td {
    display: block;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    border: 0 !important;
    padding: 0 !important;
    white-space: normal;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.original {
    display: none !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-thumbnail {
    grid-area: thumb;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-image {
    grid-area: image;
    min-width: 0;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-caption {
    grid-area: caption;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.delete {
    grid-area: delete;
    align-self: start;
    text-align: left;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-caption::before {
    content: "Caption";
    display: block;
    margin-bottom: 6px;
    color: var(--body-quiet-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Thead is hidden in this card layout — restore the Delete? label above the checkbox. */
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.delete:has(input)::before {
    content: "Delete?";
    display: block;
    margin-bottom: 6px;
    color: var(--body-quiet-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-caption input,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-caption textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-image p.file-upload {
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.delete input[type="checkbox"] {
    width: auto !important;
    margin: 2px 0 0;
  }
}

body.model-projecttask .inline-group .tabular td.original p {
  display: none;
}

body.model-projecttask .inline-group .tabular td.field-thumbnail {
  width: 110px;
  padding: 5px !important;
  vertical-align: middle;
}

/* Narrow-viewport scroll for tabular inlines (archiveitem excluded -- it
   has its own tablet/mobile handling below); overrides .module's global
   overflow:hidden. */
@media (max-width: 1024px) {
  /* The fieldset is the scroll container (table keeps native layout); its
     sticky <h2> stays visible at the left edge while scrolling right. */
  body.change-form:not(.model-archiveitem) .inline-group .inline-related.tabular,
  body.change-form:not(.model-archiveitem) .inline-group .inline-related.tabular fieldset.module {
    max-width: 100%;
    min-width: 0;
  }

  /* Django's responsive.css sets .inline-group { overflow: auto } at <=1024px,
     which clips the fieldset's 1px box-shadow ring at the parent's content
     edges (the shadow is flush with the fieldset, which fills its parent).
     Override so the rounded card border renders on all four sides; the
     fieldset's own overflow-x:auto still handles horizontal scrolling. */
  body.change-form .inline-group {
    overflow: visible !important;
  }

  body.change-form:not(.model-archiveitem) .inline-group .inline-related.tabular fieldset.module {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  body.change-form:not(.model-archiveitem) .inline-group .inline-related.tabular fieldset.module > h2 {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  body.change-form:not(.model-archiveitem) .inline-group .inline-related.tabular table {
    min-width: max-content;
  }
}

/* Tablet archive-item inlines keep the native table layout. Phone widths
   switch to cards below, matching other stacked inlines on this page. */
@media (min-width: 601px) and (max-width: 1024px) {
  body.model-archiveitem .inline-group .inline-related.tabular,
  body.model-archiveitem .inline-group .inline-related.tabular fieldset.module {
    max-width: 100%;
    min-width: 0;
  }

  body.model-archiveitem .inline-group .inline-related.tabular fieldset.module {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    /* Keep the custodia card surface on tablet widths. */
    border: 1px solid var(--custodia-card-border-color) !important;
    box-shadow: var(--custodia-card-shadow) !important;
  }

  body.model-archiveitem .archive-condition-log-inline td.field-assessment_date .datetimeshortcuts {
    margin-top: 6px;
  }
}

/* Let condition-log inline columns compress before the delete column gets clipped. */
@media (max-width: 1360px) {
  body.model-archiveitem .inline-group .tabular th.field-assessment_date,
  body.model-archiveitem .inline-group .tabular td.field-assessment_date,
  body.model-archiveitem .inline-group .tabular th.field-item_condition,
  body.model-archiveitem .inline-group .tabular td.field-item_condition,
  body.model-archiveitem .inline-group .tabular th.field-checked_by,
  body.model-archiveitem .inline-group .tabular td.field-checked_by {
    width: 1%;
  }

  body.model-archiveitem .inline-group .tabular td.field-item_condition select,
  body.model-archiveitem .inline-group .tabular td.field-checked_by select,
  body.model-archiveitem .inline-group .tabular td.field-assessment_date input,
  body.model-archiveitem .inline-group .tabular td.field-item_condition .related-widget-wrapper,
  body.model-archiveitem .inline-group .tabular td.field-checked_by .related-widget-wrapper {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.model-archiveitem .inline-group .tabular th.field-assessment_date,
  body.model-archiveitem .inline-group .tabular td.field-assessment_date {
    width: 28%;
  }

  body.model-archiveitem .inline-group .tabular th.field-item_condition,
  body.model-archiveitem .inline-group .tabular td.field-item_condition {
    width: 30%;
  }

  body.model-archiveitem .inline-group .tabular th.field-checked_by,
  body.model-archiveitem .inline-group .tabular td.field-checked_by {
    width: 30%;
  }

  body.model-archiveitem .inline-group .tabular th.delete,
  body.model-archiveitem .inline-group .tabular td.delete {
    width: 56px;
    min-width: 56px;
  }
}

body.model-archiveitem .field-project_history_inline .readonly {
  display: block;
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.model-archiveitem .field-project_history_inline .readonly table {
  width: 100% !important;
  min-width: 40rem;
}

body.model-archiveitem .field-project_history_inline .readonly .admin-help-note {
  width: 100%;
  max-width: 100%;
}

body.model-archiveitem .field-project_history_inline .readonly .admin-help-note__text {
  white-space: normal;
}

/* On phone widths, collapse archive item tabular inlines into stacked cards
   rather than using horizontal scrolling, which clips/shrinks inline headers. */
@media (max-width: 600px) {
  body.model-archiveitem .inline-group .tabular .module {
    width: 100%;
    max-width: 100%;
    /* Keep the custodia card surface on phone widths. */
    border: 1px solid var(--custodia-card-border-color) !important;
    box-shadow: var(--custodia-card-shadow) !important;
  }

  body.model-archiveitem .inline-group .tabular table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  body.model-archiveitem .inline-group .tabular thead {
    display: none;
  }

  body.model-archiveitem .inline-group .tabular tbody,
  body.model-archiveitem .inline-group .tabular tr,
  body.model-archiveitem .inline-group .tabular th,
  body.model-archiveitem .inline-group .tabular td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  body.model-archiveitem .inline-group .tabular tr {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--hairline-color);
    border-radius: 10px;
    background: var(--body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  body.model-archiveitem .inline-group .tabular tbody tr.form-row:first-child {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
  }

  body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular tr.form-row {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    border-top: 1px solid var(--hairline-color);
  }

  /* Fieldset already draws the card top edge; drop the first row's top border
     so phone widths don't stack two hairlines (matches custodia-card-form rows). */
  body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular tr.form-row:first-child {
    border-top: 0;
  }

  body.model-archiveitem .inline-group .tabular tr.empty-form {
    display: none !important;
  }

  body.model-archiveitem .inline-group .tabular tr.add-row {
    margin-bottom: 0;
  }

  body.model-archiveitem .inline-group .tabular tr.add-row {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  body.model-archiveitem .inline-group .tabular td {
    position: relative;
    padding: 0 0 10px 0 !important;
    border: 0 !important;
    white-space: normal;
  }

  body.model-archiveitem .inline-group .tabular td:last-child {
    padding-bottom: 0 !important;
  }

  body.model-archiveitem .inline-group .tabular tr.add-row td {
    padding: 0 !important;
  }

  body.model-archiveitem .inline-group .tabular tr.add-row td::before {
    content: none;
  }

  body.model-archiveitem .inline-group .tabular td::before {
    display: block;
    margin-bottom: 6px;
    color: var(--body-quiet-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.model-archiveitem .inline-group .tabular td.field-assessment_date::before {
    content: "Checked On";
  }

  body.model-archiveitem .inline-group .tabular td.field-item_condition::before {
    content: "Condition";
  }

  body.model-archiveitem .inline-group .tabular td.field-checked_by::before {
    content: "Checked By";
  }

  body.model-archiveitem .inline-group .tabular td.field-thumbnail::before {
    content: "Image";
  }

  body.model-archiveitem .inline-group .tabular td.original::before {
    content: "Existing";
  }

  body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular td.original::before {
    content: none;
  }

  body.model-archiveitem .inline-group .tabular td.field-image::before {
    content: "Upload Image";
  }

  body.model-archiveitem .inline-group .tabular td.field-file::before {
    content: "File";
  }

  body.model-archiveitem .inline-group .tabular td.delete::before {
    content: "Delete";
    display: inline;
    font-weight: 600;
    margin-right: 14px;
    vertical-align: middle;
  }

  /* Hide delete cell for empty file/image slots (nothing to delete yet) */
  body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular tr.form-row:not(.has_original) td.delete {
    display: none;
  }

  body.model-archiveitem .field-project_history_inline .readonly {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.model-archiveitem .field-project_history_inline .readonly table {
    min-width: 28rem;
    width: auto;
    font-size: 0.88rem;
  }

  body.model-archiveitem .field-project_history_inline .readonly th {
    white-space: nowrap;
    padding: 3px 6px !important;
    font-size: 0.76rem;
  }

  body.model-archiveitem .field-project_history_inline .readonly td {
    padding: 3px 6px !important;
    line-height: 1.25;
    vertical-align: top;
  }

  body.model-archiveitem .field-project_history_inline .readonly td:first-child {
    min-width: 7.5rem;
    max-width: 9rem;
  }

  body.model-archiveitem .field-project_history_inline .readonly td:first-child a {
    overflow-wrap: anywhere;
  }

  body.model-archiveitem .field-project_history_inline .readonly .admin-help-note {
    width: max-content;
    max-width: none;
  }

  body.model-archiveitem .field-project_history_inline .readonly .admin-help-note__text {
    white-space: nowrap;
  }

  body.model-archiveitem .inline-group .tabular td input,
  body.model-archiveitem .inline-group .tabular td select,
  body.model-archiveitem .inline-group .tabular td textarea,
  body.model-archiveitem .inline-group .tabular td .related-widget-wrapper,
  body.model-archiveitem .inline-group .tabular td .related-widget-wrapper input,
  body.model-archiveitem .inline-group .tabular td .related-widget-wrapper select,
  body.model-archiveitem .inline-group .tabular td .related-widget-wrapper .vTextField {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.model-archiveitem .inline-group .tabular td .related-widget-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
  }

  /* Date widget in card-stacked condition log: separate the "Today | Choose a Date"
     shortcuts from the input field above when they wrap onto their own line. */
  body.model-archiveitem .inline-group .tabular td.field-assessment_date input.vDateField {
    margin-bottom: 6px;
  }

  body.model-archiveitem .inline-group .tabular td.field-assessment_date .datetimeshortcuts {
    margin-top: 4px;
    display: inline-block !important;
  }

  body.model-archiveitem .inline-group .tabular td .related-widget-wrapper-link,
  body.model-archiveitem .inline-group .tabular td .datetimeshortcuts,
  body.model-archiveitem .inline-group .tabular td .help-tooltip-wrap {
    width: auto !important;
    max-width: none;
  }

  body.model-archiveitem .inline-group .tabular td.field-thumbnail,
  body.model-archiveitem .field-project_history_inline .readonly td:first-child {
    white-space: normal;
  }

  body.model-archiveitem .inline-group .tabular td.field-thumbnail,
  body.model-archiveitem .inline-group .tabular td.original {
    padding-bottom: 12px !important;
  }

  body.model-archiveitem .inline-group .tabular td.field-thumbnail img.admin-inline-thumb {
    max-width: min(100%, 170px);
    max-height: 120px;
    padding: 6px;
    border: 1px solid var(--hairline-color);
    border-radius: 8px;
    background: #fff;
  }

  body.model-archiveitem .inline-group .tabular td.original a {
    display: inline-block;
    overflow-wrap: anywhere;
  }

  body.model-archiveitem .inline-group .tabular td.delete {
    text-align: left;
    margin-top: 4px;
    padding-top: 12px !important;
    border-top: 1px solid var(--hairline-color) !important;
  }

  /* Remove hairline between file/image input and delete row; align checkbox with label */
  body.model-archiveitem :is(#files-group, #archivefile_set-group, #archive_file_set-group, #images-group, #archiveimage_set-group, #archive_image_set-group) .tabular td.delete {
    padding-top: 0 !important;
    border-top: none !important;
    margin-top: 0;
  }

  body.model-archiveitem .inline-group .tabular td.delete input[type="checkbox"] {
    width: auto !important;
    margin: 0 8px 0 0;
    transform: scale(1.1);
    transform-origin: left center;
  }

  body.model-archiveitem :is(#images-group, #archiveimage_set-group, #archive_image_set-group) .tabular tr.add-row td a {
    border: none;
  }

  body.model-archiveitem .inline-group .tabular tr.add-row td a {
    display: block;
    padding: 11px 14px;
    border: 1px dashed var(--hairline-color);
    border-radius: 10px;
    background: var(--darkened-bg);
    text-align: center;
    font-weight: 600;
    text-decoration: none;
  }
}

/* RestorationProject: card-stack pre/post image and project-file inlines
   on phone widths (tablet keeps scroll; project tasks always scroll). */
@media (max-width: 600px) {
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular table {
    display: table;
    min-width: 0;
    overflow: visible;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular fieldset.module {
    overflow: hidden !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular .module {
    width: 100%;
    max-width: 100%;
    /* Keep the custodia card surface on phone widths. */
    border: 1px solid var(--custodia-card-border-color) !important;
    box-shadow: var(--custodia-card-shadow) !important;
  }

  /* When no images/files exist yet (no saved rows AND no unsaved added rows),
     drop the card border so only the section title + underline shows --
     no empty bordered box on mobile. */
  body.model-restorationproject :is(#pre_restoration_images-group, #post_restoration_images-group, #projectfile_set-group, #files-group, #project_file_set-group):not(:has(tr.has_original, tr.custodia-added-inline)) .tabular .module {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular thead {
    display: none;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tbody,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular th,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--hairline-color);
    border-radius: 10px;
    background: var(--body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.form-row {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 12px 14px;
    margin: 0;
    border-top: 1px solid var(--hairline-color) !important;
    border-bottom: 0 !important;
  }

  /* Fieldset already draws the card top edge; drop the first row's top border
     so phone widths don't stack two hairlines (matches archive item inlines). */
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.form-row:first-child {
    border-top: 0 !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.empty-form {
    display: none !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td {
    position: relative;
    padding: 0 0 10px 0 !important;
    border: 0 !important;
    white-space: normal;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td:last-child {
    padding-bottom: 0 !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row td {
    padding: 0 !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row td::before {
    content: none;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td::before {
    display: block;
    margin-bottom: 6px;
    color: var(--body-quiet-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-thumbnail::before {
    content: "Image";
  }

  /* Hide td.original on stacked mobile -- it's redundant noise above the
     IMAGE row; its hidden pk/fk inputs don't need to be visible. */
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td.original {
    display: none !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-image::before {
    content: "Upload Image";
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-caption::before {
    content: "Caption";
  }

  body.model-restorationproject :is(#projectfile_set-group, #files-group, #project_file_set-group) .tabular td.field-file::before {
    content: "File";
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td.delete::before {
    content: "Delete";
    display: inline;
    font-weight: 600;
    margin-right: 14px;
    vertical-align: middle;
  }

  /* Hide delete cell for empty file slots (nothing to delete yet) */
  body.model-restorationproject :is(#projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.form-row:not(.has_original) td.delete {
    display: none;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-thumbnail img.admin-inline-thumb {
    max-width: min(100%, 170px);
    max-height: 120px;
    padding: 6px;
    border: 1px solid var(--hairline-color);
    border-radius: 8px;
    background: #fff;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td.original a {
    display: inline-block;
    overflow-wrap: anywhere;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group) .tabular td.field-thumbnail,
  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td.original {
    padding-bottom: 12px !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td.delete {
    text-align: left;
    margin-top: 4px;
    padding-top: 0 !important;
    border-top: none !important;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular td.delete input[type="checkbox"] {
    width: auto !important;
    margin: 0 8px 0 0;
    transform: scale(1.1);
    transform-origin: left center;
  }

  body.model-restorationproject :is(#prerestorationimage_set-group, #pre_restoration_images-group, #pre_restoration_image_set-group, #postrestorationimage_set-group, #post_restoration_images-group, #post_restoration_image_set-group, #projectfile_set-group, #files-group, #project_file_set-group) .tabular tr.add-row td a {
    display: block;
    padding: 11px 14px;
    border: 1px dashed var(--hairline-color);
    border-radius: 10px;
    background: var(--darkened-bg);
    text-align: center;
    font-weight: 600;
    text-decoration: none;
  }

  body.model-restorationproject :is(#projectfile_set-group, #project_file_set-group, #files-group) .tabular tr.add-row td a {
    border: none;
  }
}

.app-core.model-documentlibrary [data-file-upload-warning="true"] {
  margin-top: 8px;
  margin-left: 160px;
}

.pending-setup-password-field::placeholder {
  font-size: 0.88em;
  font-style: italic;
}

/* ===========================================
   MODERN REFINEMENTS -- style coating over the
   base admin CSS; safe to revert by removing.
   =========================================== */
 
/* ---- Header depth ---- */
#header {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  z-index: 100;
}
 
/* ---- Breadcrumbs -- rounder, better spacing ---- */
.breadcrumbs {
  padding: 8px 35px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 99;
  font-size: 14.2px !important;
  letter-spacing: 0.1px;
}
 
/* ---- Sidebar modules -- one card per section ---- */
#nav-sidebar .module {
  margin-bottom: 22px !important;
  border-radius: 10px !important;
  overflow: hidden !important;      /* clip table to card corners */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--hairline-color) !important;
}

#nav-sidebar .module table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#nav-sidebar .module tbody,
#nav-sidebar .module tr,
#nav-sidebar .module th,
#nav-sidebar .module td {
  background: transparent !important;
}

#nav-sidebar .module tbody,
#nav-sidebar .module tr,
#nav-sidebar .module th,
#nav-sidebar .module td {
  border-left: 0 !important;
  border-right: 0 !important;
}
 
/* ---- Sidebar section headers -- flush to card top ---- */
#nav-sidebar .module > h2,
#nav-sidebar .module > caption,
#nav-sidebar caption {
  border-radius: 0 !important;       /* parent overflow:hidden handles corners */
  margin: 0 !important;              /* was 4px 0 2px -- floated header away from links */
  font-size: 11.5px !important;
  letter-spacing: 0.8px !important;
}
 
/* ---- Sidebar links -- pill hover + active ---- */
#nav-sidebar .module ul li a {
  border-radius: 7px !important;
  margin: 1px 4px !important;
  padding: 4px 8px !important;
  display: block;
  transition: background 0.12s ease !important;
}
 
#nav-sidebar .module ul li a:hover {
  background: rgba(0, 0, 0, 0.055) !important;
}
 
html[data-theme="dark"] #nav-sidebar .module ul li a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
 
/* Active model -- pill shape overrides existing rule */
#nav-sidebar .current-model {
  border-radius: 7px !important;
  margin: 2px 4px !important;
}
 
/* ---- Content modules -- rounded + shadow ---- */
.module {
  background: var(--admin-card-bg) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
}

body.change-form {
  --admin-form-label-column-width: max(135px, 18%);
}

/* Shared "card" surface tokens — used by both the Manage plan cards
   (`.custodia-card`) and the opt-in card-form fieldsets, so the elevated-card
   look is defined in one place. The row-separator token auto-adapts to dark
   mode through the themed `--hairline-color`. */
:root {
  --custodia-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)),
    var(--admin-card-bg, var(--body-bg));
  --custodia-card-border-color: var(--hairline-color, #ddd5c0);
  --custodia-card-shadow: 0 10px 24px rgba(40, 32, 22, 0.07), 0 1px 2px rgba(40, 32, 22, 0.05);
  --custodia-card-row-sep-color: color-mix(in srgb, var(--hairline-color, #ddd5c0) 68%, transparent);
  /* Vertical gap between stacked cards (Contributor card-form + Manage plan). */
  --custodia-card-gap: 28px;
}

html[data-theme="dark"] {
  --custodia-card-bg: color-mix(in srgb, var(--body-bg) 92%, white 4%);
  --custodia-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Card-form variant: opt-in via `custodia-card-form` on <body>. The section
   heading is rendered OUTSIDE the fieldset (see card_fieldset.html) so the title
   sits above the card; it reuses the standard admin `.fieldset-heading` styling
   (hairline + top margin) via the shared rule below. The full
   grid/label/help/errorlist layout is inherited from the `body.change-form`
   rules; this only turns each fieldset into an elevated card and demotes the row
   group's outer border to hairline separators. */
body.custodia-card-form .custodia-card-section {
  margin-bottom: var(--custodia-card-gap);
}

body.custodia-card-form.change-form fieldset.module.aligned,
body.custodia-card-form.change-form .inline-group .inline-related.tabular fieldset.module {
  background: var(--custodia-card-bg) !important;
  border: 1px solid var(--custodia-card-border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--custodia-card-shadow) !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

/* Fieldset already draws the card top edge; drop the first row hairline. */
body.custodia-card-form.change-form .inline-group .inline-related.tabular tbody tr.form-row:first-child {
  border-top: 0 !important;
}

/* Custodia card inlines render the section title above the fieldset, so table
   headers sit at the top of the card body. Open help balloons downward so they
   stay inside the clipped fieldset (condition log, etc.). */
body.custodia-card-form.change-form .custodia-card-section .inline-related.tabular fieldset.module thead th .help-tooltip-wrap::after {
  top: 100%;
  bottom: auto;
  margin-top: 6px;
  margin-bottom: 0;
  transform: translateY(2px);
}

body.custodia-card-form.change-form .custodia-card-section .inline-related.tabular fieldset.module thead th .help-tooltip-wrap:hover::after,
body.custodia-card-form.change-form .custodia-card-section .inline-related.tabular fieldset.module thead th .help-tooltip-wrap:focus::after,
body.custodia-card-form.change-form .custodia-card-section .inline-related.tabular fieldset.module thead th .help-tooltip-wrap:focus-within::after {
  transform: translateY(0);
}

/* Empty header-led card inlines: leave room under the header for help. */
body.custodia-card-form.change-form fieldset.archive-condition-log-inline:not(:has(tr.has_original)) {
  padding-bottom: 3.25rem;
}

/* Related files: put the spare height above the add link so it stays at the base. */
body.custodia-card-form.change-form :is(#files-group, #archivefile_set-group, #archive_file_set-group) fieldset.module:not(:has(tr.has_original)) tr.add-row td {
  padding-top: 1.45rem !important;
}

/* Remove table header top border inside card inlines to prevent doubled/thick borders */
body.custodia-card-form.change-form .inline-group .inline-related.tabular table thead th {
  border-top: 0 !important;
}

/* Info note / description sits between the section title and the card body. */
body.custodia-card-form.change-form .custodia-card-section > .description {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Rows are internal: drop the outer border/rounding, keep hairline separators. */
body.custodia-card-form.change-form fieldset.module.aligned > .form-row {
  background:
    linear-gradient(
      to right,
      var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) 0,
      var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) var(--admin-form-label-column-width),
      var(--admin-form-card-bg, var(--admin-card-bg)) var(--admin-form-label-column-width),
      var(--admin-form-card-bg, var(--admin-card-bg)) 100%
    ) !important;
  border: 0 !important;
  border-top: 1px solid var(--custodia-card-row-sep-color) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* No separator above the first visible row. Selectors mirror the base
   first/last-row rules so they win on specificity (and source order).
   Extra top padding gives the first field breathing room from the card edge;
   the label is pulled up via negative margin so its right border still
   reaches the card top. */
body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type,
body.custodia-card-form.change-form fieldset.module.aligned > .form-row.hidden + .form-row:not(.hidden),
body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(~ .form-row:not(.hidden))) {
  border-top: 0 !important;
  border-radius: 0 !important;
  padding-top: 5px !important;
}

body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type .flex-container > label,
body.custodia-card-form.change-form fieldset.module.aligned > .form-row.hidden + .form-row:not(.hidden) .flex-container > label,
body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(~ .form-row:not(.hidden))) .flex-container > label {
  margin-top: -5px !important;
  padding-top: 24px !important;
}

/* First-row 24px padding is tuned for input+help rows (label lines up
   with the input). Without help text the row is short — use equal row
   padding for air, pull the label into that padding so the demarcation
   stays full height, and center the label on the field. */
body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(.help, .helptext)),
body.custodia-card-form.change-form fieldset.module.aligned > .form-row.hidden + .form-row:not(.hidden):not(:has(.help, .helptext)),
body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(~ .form-row:not(.hidden))):not(:has(.help, .helptext)) {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(.help, .helptext)) .flex-container > label,
body.custodia-card-form.change-form fieldset.module.aligned > .form-row.hidden + .form-row:not(.hidden):not(:has(.help, .helptext)) .flex-container > label,
body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(~ .form-row:not(.hidden))):not(:has(.help, .helptext)) .flex-container > label {
  align-items: center !important;
  /* Pull label into the row padding so the label/input demarcation
     stays full height (same trick as the help-text first-row rule). */
  margin-top: -6px !important;
  margin-bottom: -6px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.custodia-card-form.change-form fieldset.module.aligned > .form-row:not(.hidden):not(:has(~ .form-row:not(.hidden))) {
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Manage Plan: explicit rows so headings span the full section width. */
body.manage-plan-page form#client_form > div {
  display: block;
}

body.manage-plan-page .manage-plan-layout {
  display: grid;
  gap: var(--custodia-card-gap);
  margin-bottom: 22px;
  /* Breathing space between the page title and the first card (matches the
     top margin the standard admin section headings give). */
  margin-top: 18px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

body.manage-plan-page .manage-plan-section {
  max-width: 100%;
  min-width: 0;
}

body.manage-plan-page .manage-plan-section-title {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-color, #ddd5c0);
  color: var(--body-quiet-color, #5a4a35);
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 8px;
  padding: 0 0 7px;
  text-transform: uppercase;
  width: 100%;
}

body.manage-plan-page #invoices-group {
  margin-top: 0;
}

/* Invoices: render the tabular inline on the same card surface as the
   sections above. The template lifts the "Invoices" heading above the card. */
body.manage-plan-page #invoices-group .inline-related.tabular {
  margin: 0;
}

body.manage-plan-page #invoices-group fieldset.module {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)),
    var(--admin-card-bg, var(--body-bg)) !important;
  border: 1px solid var(--hairline-color, #ddd5c0) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(40, 32, 22, 0.07), 0 1px 2px rgba(40, 32, 22, 0.05) !important;
  box-sizing: border-box;
  overflow: hidden !important;
  padding: 0 !important;
}

body.manage-plan-page #invoices-group .invoice-inline-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.manage-plan-page #invoices-group .invoice-inline-table {
  background: transparent;
  border: 0;
  margin: 0;
  width: 100%;
}

body.manage-plan-page #invoices-group .invoice-inline-table thead th {
  background: color-mix(in srgb, var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) 55%, transparent) !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline-color, #ddd5c0) 80%, transparent) !important;
  color: var(--body-quiet-color, #5a4a35) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 9px 12px !important;
  text-transform: uppercase !important;
}

body.manage-plan-page #invoices-group .invoice-inline-table tbody td {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--hairline-color, #ddd5c0) 68%, transparent) !important;
  padding: 10px 12px !important;
  vertical-align: middle;
}

body.manage-plan-page #invoices-group .invoice-inline-table tbody tr:first-child td {
  border-top: 0 !important;
}

html[data-theme="dark"] body.manage-plan-page #invoices-group fieldset.module {
  background: color-mix(in srgb, var(--body-bg) 92%, white 4%) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] body.manage-plan-page #invoices-group .invoice-inline-table thead th {
  background: rgba(240, 234, 216, 0.045) !important;
}

body.manage-plan-page .manage-plan-section--export {
  margin-top: 55px;
}

body.manage-plan-page .manage-plan-export {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 2px 0 4px;
}

body.manage-plan-page .manage-plan-export-intro {
  margin: 0;
  color: var(--body-fg, #3d2b1a);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
}

body.manage-plan-page .manage-plan-export-note {
  margin: 6px 0 33px;
  color: var(--body-quiet-color, #5a4a35);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
}

body.manage-plan-page .manage-plan-export-btn {
  align-items: center;
  align-self: flex-start;
  background-color: var(--admin-object-tools-bg);
  border: 0;
  border-radius: 6px;
  color: var(--admin-object-tools-fg);
  display: inline-flex;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
  gap: 6px;
  line-height: 1.2;
  margin: 0.15rem 0;
  padding: 8px 14px;
  text-decoration: none;
  transition: filter 0.15s ease;
}

body.manage-plan-page .manage-plan-export-btn .material-symbols-outlined {
  font-size: 1.05rem;
}

body.manage-plan-page .manage-plan-export-btn:hover {
  color: var(--admin-object-tools-fg);
  filter: brightness(0.95);
}

/* Scrollable wrapper for tabular inlines that opt in via wrap_table.
   Mirrors the invoice table horizontal-scroll behaviour on the manage plan page. */
.custodia-scroll-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.custodia-scroll-table-wrap > table {
  width: 100%;
  min-width: max-content;
}

/* Horizontal scroll for the invoice breakdown table on the invoice detail page. */
.breakdown-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.breakdown-table-wrap > table {
  width: 100%;
  min-width: max-content;
}

/* Prevent doubled/thick borders where the breakdown table meets the fieldset edges. */
.breakdown-table-wrap > table thead th {
  border-top: 0 !important;
}

.breakdown-table-wrap > table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/*
 * Reusable card primitives. Put `class="custodia-cards"` on a wrapper, then use
 * `.custodia-card-grid` > `.custodia-card` (with an optional `.custodia-card-title`
 * and a `.custodia-card-list` of `.custodia-card-row` <dt>/<dd> pairs) inside.
 * Currently used by Manage plan; self-contained so other admin pages can reuse it.
 */
.custodia-cards {
  --admin-form-label-column-width: max(135px, 28%);
}

.custodia-cards .custodia-card-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custodia-cards .custodia-card {
  background: var(--custodia-card-bg);
  border: 1px solid var(--custodia-card-border-color);
  border-radius: 8px;
  box-shadow: var(--custodia-card-shadow);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.custodia-cards .custodia-card-title {
  background: color-mix(in srgb, var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) 82%, var(--admin-card-bg, #fff) 18%);
  border-bottom: 1px solid var(--hairline-color, #ddd5c0);
  color: var(--body-fg, #3d2b1a);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  padding: 14px 16px;
}

.custodia-cards .custodia-card-title--with-action {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.custodia-cards .custodia-card-title h3 {
  color: inherit;
  flex: 1 1 auto;
  font: inherit;
  line-height: inherit;
  margin: 0;
  min-width: 0;
}

.custodia-cards .custodia-card-list {
  margin: 0;
}

.custodia-cards .custodia-card-row {
  align-items: start;
  background:
    linear-gradient(
      to right,
      var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) 0,
      var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) var(--admin-form-label-column-width),
      var(--admin-form-card-bg, var(--admin-card-bg)) var(--admin-form-label-column-width),
      var(--admin-form-card-bg, var(--admin-card-bg)) 100%
    );
  border-top: 1px solid var(--custodia-card-row-sep-color);
  display: grid;
  gap: 0;
  grid-template-columns: var(--admin-form-label-column-width) minmax(0, 1fr);
  min-width: 0;
  padding: 0;
}

.custodia-cards .custodia-card-list .custodia-card-row:first-child {
  border-top: 0;
}

.custodia-cards .custodia-card-row dt {
  align-items: flex-start;
  border-right: 1px solid var(--hairline-color, #ede6d6);
  box-sizing: border-box;
  color: var(--body-fg, #3d2b1a);
  display: flex;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
  min-height: 48px;
  min-width: 0;
  padding: 14px 14px;
}

.custodia-cards .custodia-card-label-with-action {
  flex-direction: column;
  gap: 11px;
}

.custodia-cards .custodia-card-label-text {
  display: block;
}

body.manage-plan-page .custodia-cards .custodia-card-label-with-action .custodia-card-action {
  background: var(--custodia-moss, #2a3d2a);
  border-color: var(--custodia-moss, #2a3d2a);
  color: rgba(240, 234, 216, 0.92);
}

body.manage-plan-page .custodia-cards .custodia-card-label-with-action .custodia-card-action:hover,
body.manage-plan-page .custodia-cards .custodia-card-label-with-action .custodia-card-action:focus {
  background: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 88%, black 12%);
  border-color: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 88%, black 12%);
  color: rgba(240, 234, 216, 0.98);
}

.custodia-cards .custodia-card-row dd {
  align-self: center;
  color: var(--body-fg, #2f332d);
  line-height: 1.45;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.custodia-cards .custodia-card-row dd > .custodia-empty-value:only-child {
  display: inline-flex;
  min-height: 28px;
}

.custodia-cards .custodia-card-action {
  align-items: center;
  background: transparent;
  border: 1px solid var(--hairline-color, #ddd5c0);
  border-radius: 6px;
  color: var(--body-fg, #3d2b1a);
  cursor: pointer;
  display: inline-flex;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  gap: 6px;
  line-height: 1.2;
  padding: 6px 10px;
  white-space: nowrap;
}

.custodia-cards .custodia-card-title--with-action .custodia-card-action {
  flex: 0 0 auto;
  margin-left: auto;
}

.custodia-cards .custodia-card-action:hover {
  background: color-mix(in srgb, var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) 60%, transparent);
}

.custodia-cards .custodia-card-action .material-symbols-outlined {
  font-size: 1rem;
}

html[data-theme="dark"] .custodia-cards .custodia-card-title {
  background: rgba(240, 234, 216, 0.06);
}

html[data-theme="dark"] .custodia-cards .custodia-card-row {
  background: rgba(240, 234, 216, 0.035);
}

html[data-theme="dark"] .custodia-cards .custodia-card-row dt {
  background: rgba(240, 234, 216, 0.045);
}

html[data-theme="dark"] .custodia-cards .custodia-card-action:hover {
  background: rgba(240, 234, 216, 0.08);
}

@media (max-width: 900px) {
  .custodia-cards .custodia-card-grid,
  .custodia-cards .custodia-card-row {
    grid-template-columns: 1fr;
  }

  .custodia-cards .custodia-card-row {
    background: var(--admin-form-card-bg, var(--admin-card-bg));
    gap: 4px;
    padding: 12px 14px;
  }

  .custodia-cards .custodia-card-row dt {
    background: transparent;
    border-right: 0;
    min-height: 0;
    padding: 0 0 5px;
  }

  .custodia-cards .custodia-card-row dd {
    padding: 0;
  }

  .custodia-cards .custodia-card-action {
    white-space: normal;
  }

  .custodia-cards .custodia-card-title--with-action .custodia-card-action {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .custodia-cards .custodia-card-title--with-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .custodia-cards .custodia-card-title--with-action .custodia-card-action {
    align-self: flex-start;
    margin-left: 0;
    white-space: normal;
  }
}

body.change-form fieldset.module.aligned > .fieldset-heading,
body.custodia-card-form .custodia-card-section > .custodia-section-title {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline-color, #ddd5c0) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--body-quiet-color, #5a4a35) !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.35 !important;
  margin: 18px 0 8px !important;
  padding: 0 0 7px !important;
  text-transform: uppercase !important;
}



body.change-form fieldset.module.aligned > .form-row > div {
  display: grid !important;
  grid-template-columns: var(--admin-form-label-column-width) minmax(0, 1fr);
  padding: 0 !important;
}

body.change-form fieldset.module.aligned > .form-row .flex-container:not(.form-multiline) {
  align-items: stretch !important;
  display: contents !important;
}

body.change-form fieldset.module.aligned > .form-row .flex-container > label {
  align-items: flex-start;
  background: var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) !important;
  border-right: 1px solid var(--hairline-color, #ede6d6) !important;
  box-sizing: border-box !important;
  color: var(--body-fg, #3d2b1a) !important;
  display: flex !important;
  font-weight: 650 !important;
  grid-column: 1;
  grid-row: 1 / span 20;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  width: 100% !important;
}

body.change-form fieldset.module.aligned > .form-row .flex-container > label.required::after {
  margin-left: 2px;
}

body.change-form fieldset.module.aligned > .form-row .flex-container > :not(label) {
  align-self: center;
  grid-column: 2;
  margin: 8px 12px !important;
  min-width: 0;
}

body.change-form fieldset.module.aligned > .form-row .readonly {
  background: var(--admin-form-input-bg, #fffaf4) !important;
  border: 1px solid color-mix(in srgb, var(--hairline-color, #ddd5c0) 70%, var(--body-bg, #ffffff) 30%) !important;
  border-radius: 4px !important;
  box-sizing: border-box;
  padding: 7px 9px !important;
  width: fit-content;
  max-width: calc(100% - 24px);
}

/* Status pills already have their own styling - remove the readonly input-like box around them */
body.change-form fieldset.module.aligned > .form-row .readonly:has(> .custodia-status-badge) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Empty values are just a dash, so do not wrap them in an input-like box. */
body.change-form fieldset.module.aligned > .form-row .readonly:has(> .custodia-empty-value:only-child) {
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  line-height: 1.35 !important;
  min-height: 31px;
  padding: 0 !important;
}

.custodia-empty-value {
  color: var(--body-quiet-color, #6f6254);
  display: inline-block;
  line-height: 1;
  transform: translateY(-1px);
}

/* Invoice breakdown - hide the empty label row; let the table span full width */
body.change-form fieldset.module.aligned > .form-row.field-line_items_display[class].field-line_items_display[class] {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.change-form fieldset.module.aligned > .form-row.field-line_items_display[class].field-line_items_display[class] .flex-container > label {
  display: none !important;
}
body.change-form fieldset.module.aligned > .form-row.field-line_items_display[class].field-line_items_display[class] .flex-container > .readonly {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body.change-form fieldset.module.aligned > .form-row input:not([type="checkbox"]):not([type="radio"]),
body.change-form fieldset.module.aligned > .form-row textarea,
body.change-form fieldset.module.aligned > .form-row select {
  background-color: var(--admin-form-input-bg, #fffaf4) !important;
  border-color: color-mix(in srgb, var(--border-color, #bfb099) 70%, var(--body-bg, #ffffff) 30%) !important;
}

body.change-form fieldset.module.aligned > .form-row .help,
body.change-form fieldset.module.aligned > .form-row .helptext {
  grid-column: 2;
  margin: 0 12px 10px !important;
  padding: 0 !important;
  min-width: 0;
  max-width: calc(100% - 24px);
  overflow-wrap: break-word;
  word-break: break-word;
}

body.change-form fieldset.module.aligned > .form-row > .errorlist,
body.change-form fieldset.module.aligned > .form-row > div > .errorlist {
  grid-column: 2;
  margin: 8px 12px 0 !important;
  padding: 0 !important;
}

body.change-form fieldset.module.aligned > .form-row > .errorlist {
  margin-left: calc(var(--admin-form-label-column-width) + 12px) !important;
}

body.change-form fieldset.module.aligned .form-multiline {
  display: grid !important;
  gap: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 0 !important;
  width: 100%;
}

body.change-form fieldset.module.aligned .fieldBox {
  display: grid !important;
  grid-template-columns: minmax(125px, 34%) minmax(0, 1fr);
  min-height: 44px;
}

body.change-form fieldset.module.aligned .fieldBox > label {
  padding: 12px !important;
}

body.change-form fieldset.module.aligned .checkbox-row {
  align-items: center !important;
  display: contents !important;
}

body.change-form fieldset.module.aligned .checkbox-row > input[type="checkbox"] {
  grid-column: 2;
  justify-self: start;
  margin: 14px 12px !important;
}

body.change-form fieldset.module.aligned .checkbox-row > label {
  background: var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) !important;
  border-right: 1px solid var(--hairline-color, #ede6d6) !important;
  padding: 12px 14px !important;
}

@media (max-width: 1024px) {
  body.change-form fieldset.module.aligned > .form-row .flex-container:not(.form-multiline),
  body.change-form fieldset.module.aligned .fieldBox,
  body.change-form fieldset.module.aligned > .form-row > div {
    grid-template-columns: var(--admin-form-label-column-width) minmax(0, 1fr);
  }

  body.change-form fieldset.module.aligned > .form-row .flex-container > label,
  body.change-form fieldset.module.aligned .fieldBox > label {
    border-bottom: 0 !important;
    border-right: 1px solid var(--hairline-color, #ede6d6) !important;
    padding: 9px 12px !important;
  }

  body.change-form fieldset.module.aligned > .form-row .flex-container > :not(label) {
    margin: 8px 12px !important;
  }

}

/* Above the phone threshold, keep the date input and "Today | 📅" shortcut
   on one line.  Django wraps date widgets in <p class="date"> so .vDateField
   and .datetimeshortcuts are NOT direct children of .flex-container — the
   child-combinator selectors that were here before never matched.
   Restore the label to a single row (no span-20) so the date field row
   is tight; use internal flexbox on the <p> for centering. */
@media (min-width: 601px) {
  body.change-form fieldset.module.aligned > .form-row:has(.flex-container .datetimeshortcuts) > div {
    grid-template-columns:
      var(--admin-form-label-column-width)
      max-content
      minmax(0, 1fr);
  }

  /* Stop the label spanning 20 rows for date rows — that artificially
     tall row made the date input hug the top border.  Span enough rows
     (100) so the label border still reaches the bottom of the cell
     covering any help-text row below. */
  body.change-form fieldset.module.aligned > .form-row:has(.flex-container .datetimeshortcuts) .flex-container > label {
    align-self: stretch !important;
    grid-row: 1 / span 100 !important;
  }

  /* The <p> wrapper Django emits for date widgets.  Internal flexbox
     reliably centres the input + shortcut.  The extra vertical padding
     compensates for the help-text row that sits below the field. */
  body.change-form fieldset.module.aligned > .form-row:has(.flex-container .datetimeshortcuts) .flex-container > p {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    margin: 0 12px !important;
    min-width: 0;
    padding: 12px 0 !important;
  }

  body.change-form fieldset.module.aligned > .form-row:has(.flex-container .datetimeshortcuts) .flex-container > p .datetimeshortcuts {
    white-space: nowrap;
  }

  /* Hide Django's <br> between date input and shortcut. */
  body.change-form fieldset.module.aligned > .form-row:has(.flex-container .datetimeshortcuts) .flex-container > p br {
    display: none;
  }
}

/* Mobile: switch the cramped side-by-side label/field grid to a stacked
   layout (label above field). Must follow the display:contents rules. */
@media (max-width: 600px) {
  /* Flatten the side-by-side gradient background to the card colour for
     stacked layout; the label paints its own beige bar. */
  body.change-form fieldset.module.aligned > .form-row,
  body.custodia-card-form.change-form fieldset.module.aligned > .form-row {
    background: var(--admin-form-card-bg, var(--admin-card-bg)) !important;
  }

  /* Drop the first/last form-row 10px padding -- in stacked layout it
     renders as a gap above the label bar / below the last field. */
  body.change-form fieldset.module.aligned > .form-row:first-of-type,
  body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type,
  body.custodia-card-form.change-form fieldset.module.aligned > .form-row.hidden + .form-row:not(.hidden),
  body.custodia-card-form.change-form fieldset.module.aligned > .form-row:first-of-type:not(:has(~ .form-row:not(.hidden))) {
    padding-top: 0 !important;
  }

  body.change-form fieldset.module.aligned > .form-row:not(.hidden):not(:has(~ .form-row:not(.hidden))),
  body.custodia-card-form.change-form fieldset.module.aligned > .form-row:not(.hidden):not(:has(~ .form-row:not(.hidden))) {
    padding-bottom: 0 !important;
  }

   body.change-form fieldset.module.aligned > .form-row .flex-container:not(.form-multiline) {
     display: flex !important;
     flex-flow: row wrap !important;
     align-items: center !important;
     grid-column: 1 / -1 !important;
     grid-row: auto !important;
     /* Gap between wrapped flex lines only -- separates the Today/📅
        shortcut from the input above when it wraps at narrow widths. */
     row-gap: 11px !important;
   }

  body.change-form fieldset.module.aligned > .form-row .flex-container > label {
    flex: 1 1 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    background: var(--admin-form-label-bg, var(--darkened-bg, #f9f5ee)) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline-color, #ede6d6) !important;
    padding: 8px 12px !important;
  }

  body.change-form fieldset.module.aligned > .form-row .flex-container > :not(label) {
    grid-column: auto !important;
    align-self: center !important;
    margin: 8px 12px !important;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
  }

  /* Date inputs keep their natural narrow width so the Today/📅 shortcut
     sits on the same row; other fields still expand to fill the row. */
  body.change-form fieldset.module.aligned > .form-row .flex-container > input.vDateField,
  body.change-form fieldset.module.aligned > .form-row .flex-container > input.vDateTimeField,
  body.change-form fieldset.module.aligned > .form-row .flex-container > input[type="date"],
  body.change-form fieldset.module.aligned > .form-row .flex-container > input[type="datetime-local"] {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  body.change-form fieldset.module.aligned > .form-row .help,
  body.change-form fieldset.module.aligned > .form-row .helptext {
    grid-column: 1 / -1 !important;
    margin: 0 12px 10px !important;
  }

  /* Multi-select boxes ship ~80px tall (size=4) -- too short to scan.
     Give them room at phone widths. */
  body.change-form fieldset.module.aligned > .form-row select[multiple],
  body.change-form fieldset.module.aligned > .form-row select[size]:not([size="1"]) {
    min-height: 160px;
  }

  /* Clear Django's 15px margin-left on the date shortcut so it sits inline
     with the input; row-gap above handles separation when it wraps. */
   html body.change-form .form-row .flex-container .datetimeshortcuts,
   html body.change-form .form-row .flex-container > .datetimeshortcuts {
     /* Promote to inline-block (Django renders it inline, so margin-top
        is otherwise ignored) so the wrap spacing actually paints. */
     display: inline-block !important;
     margin: 0 0 14px 0 !important;
     align-self: center !important;
     flex: 0 0 auto !important;
   }

  html body.change-form .form-row .flex-container br {
    display: none !important;
  }

  /* Give textareas a comfortable min-height so users don't have to drag
     the resize handle every time. */
  body.change-form fieldset.module.aligned > .form-row textarea,
  body.change-form .form-row.aligned textarea,
  body.change-form .form-row.field-project_notes textarea {
    min-height: 140px;
  }

  /* Checkbox rows: DOM order is <input><label>. Swap so the label
     sits on top and the checkbox sits flush underneath on mobile. */
  body.change-form fieldset.module.aligned > .form-row .flex-container.checkbox-row > label {
    order: -1;
  }

  body.change-form fieldset.module.aligned > .form-row .flex-container.checkbox-row > input[type="checkbox"] {
    order: 0;
    margin: 4px 12px 12px !important;
  }
}

@media (max-width: 360px) {
  body.change-form fieldset.module.aligned {
    --admin-form-label-column-width: 110px;
  }

  /* Extra-narrow: date shortcuts wrap below the input and need more
     breathing room from the field above and help text below. */
  html body.change-form .form-row .flex-container .datetimeshortcuts,
  html body.change-form .form-row .flex-container > .datetimeshortcuts {
    margin-top: 8px !important;
    margin-bottom: 20px !important;
  }
}

/* Changelist pages use a flex layout with their own spacing rules.
   Avoid wrapping the whole `#changelist` in a fixed-height card shell. */
body.change-list #changelist.module {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

@media (min-width: 1600px) {
  /* Cap textarea width on very wide screens so it doesn't stretch
     edge-to-edge, while still filling the column at laptop widths. */
  body.change-form fieldset.module.aligned > .form-row textarea {
    max-width: 960px;
  }
}
 
/* Module captions -- already inherit top corners via overflow:hidden on .module */
.module caption,
.app-module .model {
  font-size: 10.5px !important;
  letter-spacing: 0.8px !important;
}
 
/* Inline group modules */
.inline-group .module {
  border-radius: 10px !important;
}
 
/* ---- Filter drawer (all breakpoints: slides in from the right) ---- */
#changelist-filter {
  position: fixed !important;
  /* Full viewport — stays correct when the page is scrolled */
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 280px !important;
  max-width: min(280px, 90vw);
  flex: none !important;
  align-self: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  border-radius: 0 !important;
  border: none !important;
  background: var(--body-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  z-index: 1080;
}

#changelist-filter.is-open {
  transform: translateX(0);
}

/* Django's default "Filter" heading — replaced by .changelist-filter-header */
#changelist-filter > h2 {
  display: none;
}

/* Brand filter link colors (replace Django blue) */
#changelist-filter a:link,
#changelist-filter a:visited {
  color: var(--body-quiet-color) !important;
  text-decoration: none !important;
}

#changelist-filter li.selected {
  border-left-color: color-mix(in srgb, var(--custodia-moss) 70%, var(--body-quiet-color) 30%) !important;
}

#changelist-filter li.selected a,
#changelist-filter li.selected a:link,
#changelist-filter li.selected a:visited {
  /* Soften solid moss so selected links don't read as harsh on light monitors */
  color: color-mix(in srgb, var(--custodia-moss) 68%, var(--body-quiet-color) 32%) !important;
  font-weight: 500;
}

#changelist-filter a:focus,
#changelist-filter a:hover,
#changelist-filter li.selected a:focus,
#changelist-filter li.selected a:hover {
  color: color-mix(in srgb, var(--custodia-moss) 78%, var(--body-quiet-color) 22%) !important;
}

#changelist-filter h3,
#changelist-filter details summary,
#changelist-filter details > summary::before {
  color: color-mix(in srgb, var(--custodia-moss) 72%, var(--body-quiet-color) 28%) !important;
}
 
/* ---- Form inputs & selects ---- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  border-radius: 7px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Match Django tablet field height on desktop too (responsive.css
   only applies min-height / padding below 1025px). */
.form-row input:not([type]),
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="datetime-local"],
.form-row select,
.form-row .vTextField {
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 6px 8px;
}

.form-row select:not([multiple]) {
  height: 2.25rem;
}
 
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(123, 107, 78, 0.15) !important;
  outline: none !important;
}
 
/* ---- Buttons ---- */
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.submit-row input,
.submit-row a.deletelink,
a.button,
.changelink,
.addlink {
  border-radius: 7px !important;
  transition: opacity 0.12s ease, box-shadow 0.12s ease !important;
}
 
.button:hover,
input[type="submit"]:hover,
.submit-row input:hover,
.submit-row a.deletelink:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Changelist Search + Go — brand moss CTA (same in light/dark) */
#toolbar form input[type="submit"],
#changelist-search input[type="submit"],
#changelist .actions .button,
#changelist .changelist-actions > button.button {
  background: var(--custodia-moss, #2a3d2a) !important;
  color: rgba(240, 234, 216, 0.92) !important;
  border: 1px solid var(--custodia-moss, #2a3d2a) !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}

#toolbar form input[type="submit"]:hover,
#toolbar form input[type="submit"]:focus,
#changelist-search input[type="submit"]:hover,
#changelist-search input[type="submit"]:focus,
#changelist .actions .button:hover,
#changelist .actions .button:focus,
#changelist .changelist-actions > button.button:hover,
#changelist .changelist-actions > button.button:focus {
  background: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 88%, black 12%) !important;
  border-color: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 88%, black 12%) !important;
  color: rgba(240, 234, 216, 0.98) !important;
}

/* ---- Object tools (Add, History pills) ---- */
.object-tools li {
  border-radius: 20px !important;
  height: auto !important;
  overflow: hidden;
}
 
.object-tools a,
.object-tools a.addlink,
.object-tools a.viewlink,
.object-tools a.historylink,
.object-tools a.deletelink {
  border-radius: 20px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.4px !important;
  background-color: var(--admin-object-tools-bg);
  color: var(--admin-object-tools-fg);
}

/* Change-form header tools: Django stacks .object-tools below the title at
   max-width:767px. Keep History inline on tablets (601px+) and only stack on
   phone, with extra space below the item title/subtitle. */
@media (min-width: 601px) {
  body.change-form #content-main > .object-tools {
    float: right !important;
    margin: -48px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.change-form #content-main > .object-tools li {
    float: left;
    height: 1rem;
    margin-left: 5px;
  }

  body.change-form #content-main > .object-tools li + li {
    margin-left: 5px;
  }

  body.change-form .object-tools.curator-history-tools {
    float: none !important;
    margin: 12px 0 0 0 !important;
  }
}

@media (max-width: 600px) {
  body.change-form #content-main > .object-tools {
    float: none !important;
    clear: both;
    margin: 14px 0 18px !important;
    padding: 0 !important;
    overflow: hidden;
  }

  body.change-form #content-main > .object-tools li {
    float: none;
    display: inline-block;
    height: auto;
    margin-left: 0;
  }

  body.change-form #content-main > .object-tools li + li {
    margin-left: 15px;
  }

  body.change-form #content .archive-item-page-subtitle {
    margin-bottom: 2px;
  }
}
 
/* ---- Success/info/error messages ---- */
.messagelist {
  box-sizing: border-box;
  padding: 0 40px !important;
}

.messagelist li {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  padding: 9px 14px 9px 38px !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  font-size: 13px !important;
}
 
.messagelist .success {
  border-color: rgba(80, 160, 80, 0.25) !important;
  margin-top: 7px;
}

.messagelist .warning {
  border-color: rgba(200, 160, 40, 0.3) !important;
}

.messagelist .error {
  border-color: rgba(180, 60, 60, 0.3) !important;
}

@media (max-width: 1024px) {
  .messagelist {
    padding: 0 20px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1360px) {
  .aligned label,
  .form-row label,
  .submit-row label {
    font-size: 0.8125rem !important;
  }
}

@media (min-width: 768px) {
  .form-row input:not([type]),
  .form-row input[type="text"],
  .form-row input[type="password"],
  .form-row input[type="email"],
  .form-row input[type="url"],
  .form-row input[type="tel"],
  .form-row input[type="number"],
  .form-row input[type="date"],
  .form-row input[type="time"],
  .form-row select,
  .form-row textarea,
  .form-row .vTextField {
    font-size: 0.8125rem !important;
  }

}

/* Cap field widths everywhere except phones (≤600px releases to full
   width, handled separately). */
@media (min-width: 601px) {
  body.change-form fieldset.module.aligned > .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.change-form fieldset.module.aligned > .form-row select,
  body.change-form fieldset.module.aligned > .form-row .vTextField {
    max-width: 320px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Textarea fills the column, minus the 12px side margins, so it stays
     inside the form-row with symmetrical padding. */
  body.change-form fieldset.module.aligned > .form-row textarea {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    box-sizing: border-box;
  }

  /* filter_horizontal / filter_vertical pick-list widget
     (e.g. Groups, User permissions on the user change form). */
  body.change-form fieldset.module.aligned > .form-row .selector {
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
  }

  body.change-form fieldset.module.aligned > .form-row .selector select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Standalone multi-selects (no SelectFilter): match the text-input
     width so they don't stretch wider than surrounding fields. */
  body.change-form fieldset.module.aligned > .form-row select[multiple],
  body.change-form fieldset.module.aligned > .form-row select[size]:not([size="1"]) {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
  }
}


@media (min-width: 1025px) {
  #nav-sidebar .module > h2,
  #nav-sidebar .module > caption,
  #nav-sidebar caption {
    font-size: 11.5px !important;
  }

  #nav-sidebar .module th,
  #nav-sidebar .module td,
  #nav-sidebar .module th a,
  #nav-sidebar .module td a,
  #nav-sidebar .module ul li a {
    font-size: 0.8125rem !important;
  }
}
 
/* ---- Changelist result table ---- */
#changelist .results,
#result_list {
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* ---- Minimal nav sidebar styling ---- */
#nav-sidebar {
  background: #fff !important;
  border-right: 1px solid #ddd5c0 !important;
  border-inline-end: 1px solid #ddd5c0 !important;
  box-shadow: none !important;
}

/* Hide Django sidebar search */
#nav-sidebar #nav-filter,
#nav-sidebar .sidebar-search-input,
#nav-sidebar input[type="search"] {
  display: none !important;
}

#nav-sidebar .module {
  margin: 0 0 14px !important;
  padding: 8px 0 10px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #ede6d6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#nav-sidebar .module:last-child {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

#nav-sidebar .module table {
  width: 100%;
  border-collapse: collapse;
}

#nav-sidebar .module caption {
  caption-side: top;
  display: block;
  margin: 0 !important;
  padding: 4px 14px 6px !important;
  background: transparent !important;
  color: #8a7a60 !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-align: left;
  text-transform: uppercase;
}

#nav-sidebar .module caption .section,
#nav-sidebar .module caption .section:link,
#nav-sidebar .module caption .section:visited {
  color: inherit !important;
  text-decoration: none !important;
}

#nav-sidebar .module th,
#nav-sidebar .module td {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  vertical-align: middle;
}

#nav-sidebar .module th {
  width: 100%;
}

#nav-sidebar .module th a,
#nav-sidebar .module th a:link,
#nav-sidebar .module th a:visited {
  display: block;
  padding: 5px 14px !important;
  color: #3d2b1a !important;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#nav-sidebar .module tr:hover th a,
#nav-sidebar .module tr:hover td a,
#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus {
  background: transparent !important;
}

#nav-sidebar .module td {
  display: none !important;
}

#nav-sidebar .current-model {
  background: transparent !important;
}

#nav-sidebar .current-model th a,
#nav-sidebar .current-model th a:link,
#nav-sidebar .current-model th a:visited {
  background: #eee5cc !important;
  box-shadow: inset 2px 0 0 #1e3d2a;
  color: #1e3d2a !important;
  font-weight: 500;
}

#nav-sidebar .current-model td a,
#nav-sidebar .current-model td a:link,
#nav-sidebar .current-model td a:visited {
  background: #eee5cc !important;
}

html[data-theme="dark"] #nav-sidebar {
  background: #1f2022 !important;
  border-right-color: #2e3033 !important;
  border-inline-end-color: #2e3033 !important;
}

html[data-theme="dark"] #nav-sidebar .module {
  background: #1f2022 !important;
  border-bottom-color: #31343a !important;
}

html[data-theme="dark"] #nav-sidebar .module caption,
html[data-theme="dark"] #nav-sidebar .module caption .section,
html[data-theme="dark"] #nav-sidebar .module caption .section:link,
html[data-theme="dark"] #nav-sidebar .module caption .section:visited {
  color: #aa9f8a !important;
}

html[data-theme="dark"] #nav-sidebar .module th a,
html[data-theme="dark"] #nav-sidebar .module th a:link,
html[data-theme="dark"] #nav-sidebar .module th a:visited {
  color: #e7dfcf !important;
}

html[data-theme="dark"] #nav-sidebar .module tr:hover th a,
html[data-theme="dark"] #nav-sidebar .module th a:hover,
html[data-theme="dark"] #nav-sidebar .module th a:focus {
  background: transparent !important;
}

html[data-theme="dark"] #nav-sidebar .current-model th a,
html[data-theme="dark"] #nav-sidebar .current-model th a:link,
html[data-theme="dark"] #nav-sidebar .current-model th a:visited,
html[data-theme="dark"] #nav-sidebar .current-model td a,
html[data-theme="dark"] #nav-sidebar .current-model td a:link,
html[data-theme="dark"] #nav-sidebar .current-model td a:visited {
  background: #353128 !important;
  color: #f2ead8 !important;
}

/* Dark mode drawer header */
html[data-theme="dark"] .custodia-drawer-header {
  background: #1f2022;
  border-bottom-color: #3b3a33;
}

html[data-theme="dark"] .custodia-drawer-branding {
  color: #f0ead8;
}

html[data-theme="dark"] .custodia-drawer-name::after {
  color: var(--custodia-gold);
}

html[data-theme="dark"] .custodia-drawer-close {
  color: #e8d9c0;
}

html[data-theme="dark"] .custodia-drawer-close:hover,
html[data-theme="dark"] .custodia-drawer-close:focus {
  background: rgba(255, 255, 255, 0.1);
}

/* Breathing room between the action bar and the elevated results card */
body.change-list #changelist .changelist-actions.has-actions {
  margin-bottom: 10px;
}

/* Changelist tables can be wider than the content pane (many columns).
   Allow horizontal scrolling instead of clipping the right-most columns.
   Elevated surface matches form cards via shared --custodia-card-* tokens. */
body.change-list #changelist .results {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: var(--custodia-card-bg) !important;
  border: 1px solid var(--custodia-card-border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--custodia-card-shadow) !important;
  /* Soft horizontal scrollbar — thin, low-contrast, no arrow buttons */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--body-quiet-color, #6f6254) 32%, transparent) transparent;
}

/* Single-field changelists (name only) — keep the results card compact,
   but leave search / actions full width so the header Add button isn't stranded. */
body.change-list.model-category #changelist .results,
body.change-list.model-role #changelist .results {
  max-width: 37rem;
}

body.change-list #changelist .results::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

body.change-list #changelist .results::-webkit-scrollbar-track {
  background: transparent;
}

body.change-list #changelist .results::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--body-quiet-color, #6f6254) 28%, transparent);
  border-radius: 999px;
}

body.change-list #changelist .results::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--body-quiet-color, #6f6254) 48%, transparent);
}

body.change-list #changelist .results::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Drop Django thead/row hairlines that double up against the card edge */
body.change-list #changelist .results #result_list thead th {
  border-top: 0 !important;
}

body.change-list #changelist .results #result_list tbody tr:last-child > th,
body.change-list #changelist .results #result_list tbody tr:last-child > td {
  border-bottom: 0 !important;
}

body.change-list #changelist .results #result_list tfoot td {
  border-bottom: 0 !important;
}

body.change-list #changelist #result_list {
  min-width: max-content !important;
  width: 100% !important;
}

/* Changelist toolbar search -- rounded corners to match card style */
#toolbar {
  border-radius: 10px !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
 
/* Zebra rows -- subtle, not harsh */
body.app-index #content-main .module tbody tr:nth-child(even),
body.dashboard #content-main .module tbody tr:nth-child(even),
body.app-index #content-main .module tbody tr:nth-child(even) > th,
body.app-index #content-main .module tbody tr:nth-child(even) > td,
body.dashboard #content-main .module tbody tr:nth-child(even) > th,
body.dashboard #content-main .module tbody tr:nth-child(even) > td,
#result_list tbody tr:nth-child(even) {
  background: var(--zebra-color) !important;
}
 
/* Suppress Django a:focus underline on changelist row links */
#result_list tbody a:link,
#result_list tbody a:visited,
#result_list tbody a:hover,
#result_list tbody a:focus,
#result_list tbody a:active {
  text-decoration: none !important;
}

/* ---- Row hover for changelist ---- */
#result_list tbody tr {
  transition: background 0.1s ease !important;
}
 
#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
  background: rgba(123, 107, 78, 0.07) !important;
}
 
html[data-theme="dark"] #result_list tbody tr:hover td,
html[data-theme="dark"] #result_list tbody tr:hover th {
  background: rgba(180, 160, 100, 0.1) !important;
}
 
/* ---- Pagination ---- */
.paginator {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
}

.paginator .this-page,
.paginator a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 16px !important;
  padding: 2px 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.paginator .this-page {
  background: var(--admin-header-active-color, #2a3d2a) !important;
  color: var(--admin-header-text-color, #ffffff) !important;
  border: 1px solid var(--admin-header-active-color, #2a3d2a) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16) !important;
}

.paginator a {
  background: color-mix(in srgb, var(--body-bg, #ffffff) 88%, var(--admin-header-active-color, #2a3d2a) 12%) !important;
  border: 1px solid color-mix(in srgb, var(--admin-header-active-color, #2a3d2a) 38%, transparent) !important;
  color: var(--link-fg, #1f6b8b) !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}

.paginator a:hover,
.paginator a:focus-visible {
  background: color-mix(in srgb, var(--admin-header-active-color, #2a3d2a) 14%, var(--body-bg, #ffffff)) !important;
  border-color: var(--admin-header-active-color, #2a3d2a) !important;
  color: var(--admin-header-active-color, #2a3d2a) !important;
}

.invoice-inline-paginator {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-top: 1px solid var(--hairline-color);
}

.invoice-inline-table tbody tr.has_original td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle;
}

.invoice-inline-table tbody td p {
  margin: 0;
}

.invoice-inline-paginator__ellipsis {
  padding: 0 3px;
  color: var(--body-quiet-color);
}
 
/* ---- Date/time shortcuts ---- */
.datetimeshortcuts a {
  border-radius: 5px !important;
  transition: opacity 0.1s ease !important;
}

body.model-archiveitem .archive-condition-log-inline td.field-assessment_date .datetimeshortcuts {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

@media (min-width: 601px) {
  body.model-archiveitem .archive-condition-log-inline td.field-assessment_date input.vDateField {
    width: 9.5rem !important;
    max-width: 100%;
  }
}
 
/* ---- Related-object popup links ---- */
.related-widget-wrapper-link {
  border-radius: 5px !important;
  transition: opacity 0.12s ease !important;
}
 
/* ---- Submit row ---- */
.submit-row {
  border-radius: 0 0 10px 10px !important;
  padding: 12px 16px !important;
}

body.app-auth.model-group.change-form .submit-row {
  border-radius: 10px !important;
}

.submit-row input.default {
  background: var(--admin-submit-primary-bg) !important;
  color: #fff !important;
  width: var(--admin-submit-action-width) !important;
  text-align: center !important;
}

.submit-row input[name="_addanother"] {
  background: var(--admin-submit-secondary-bg) !important;
  color: #fff !important;
}

.submit-row input[name="_continue"] {
  background: var(--admin-submit-tertiary-bg) !important;
  color: #fff !important;
}

.submit-row a.deletelink {
  display: inline-block !important;
  width: var(--admin-submit-action-width) !important;
  height: 2.1875rem !important;
  line-height: 0.9375rem !important;
  padding: 10px 15px !important;
  box-sizing: border-box !important;
  border: none !important;
  text-align: center !important;
  text-decoration: none !important;
  background: var(--admin-submit-danger-bg) !important;
  color: #fff !important;
}

.submit-row a.deletelink:focus,
.submit-row a.deletelink:hover,
.submit-row a.deletelink:active {
  background: color-mix(in srgb, var(--admin-submit-danger-bg) 88%, black 12%) !important;
  color: #fff !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  body.change-form .submit-row input,
  body.change-form .submit-row a.deletelink {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body.change-form .submit-row a.deletelink {
    margin-left: 0 !important;
  }
}
 
/* ---- Calendar widget ---- */
.calendarbox,
.clockbox {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
}
 
/* ---- Popup windows / selector filter ---- */
.selector {
  border-radius: 8px !important;
}
 
.selector .selector-available h2,
.selector .selector-chosen h2 {
  border-radius: 8px 8px 0 0 !important;
}
 
/* ---- Inline tabular headers ---- */
.inline-group > h2 {
  border-radius: 8px 8px 0 0 !important;
}
 
/* ---- Dark mode shadow softening ---- */
html[data-theme="dark"] .module {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
 
html[data-theme="dark"] #nav-sidebar .module {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
 
html[data-theme="dark"] body.change-list #changelist .results {
  box-shadow: var(--custodia-card-shadow) !important;
}

html[data-theme="dark"] #result_list {
  box-shadow: none !important;
}
 
html[data-theme="dark"] #changelist-filter {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] #changelist-filter li.selected {
  border-left-color: color-mix(in srgb, var(--custodia-gold) 65%, var(--custodia-parchment) 35%) !important;
}

html[data-theme="dark"] #changelist-filter li.selected a,
html[data-theme="dark"] #changelist-filter li.selected a:link,
html[data-theme="dark"] #changelist-filter li.selected a:visited,
html[data-theme="dark"] .changelist-filter-clear a {
  color: color-mix(in srgb, var(--custodia-gold) 72%, var(--custodia-parchment) 28%) !important;
}

html[data-theme="dark"] #changelist-filter a:focus,
html[data-theme="dark"] #changelist-filter a:hover,
html[data-theme="dark"] #changelist-filter li.selected a:focus,
html[data-theme="dark"] #changelist-filter li.selected a:hover,
html[data-theme="dark"] .changelist-filter-clear a:hover {
  color: color-mix(in srgb, var(--custodia-gold) 88%, var(--custodia-parchment) 12%) !important;
}

html[data-theme="dark"] #changelist-filter h3,
html[data-theme="dark"] #changelist-filter details summary,
html[data-theme="dark"] #changelist-filter details > summary::before {
  color: color-mix(in srgb, var(--custodia-gold) 70%, var(--custodia-parchment) 30%) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #changelist-filter li.selected {
    border-left-color: color-mix(in srgb, var(--custodia-gold) 65%, var(--custodia-parchment) 35%) !important;
  }

  html[data-theme="auto"] #changelist-filter li.selected a,
  html[data-theme="auto"] #changelist-filter li.selected a:link,
  html[data-theme="auto"] #changelist-filter li.selected a:visited,
  html[data-theme="auto"] .changelist-filter-clear a {
    color: color-mix(in srgb, var(--custodia-gold) 72%, var(--custodia-parchment) 28%) !important;
  }

  html[data-theme="auto"] #changelist-filter a:focus,
  html[data-theme="auto"] #changelist-filter a:hover,
  html[data-theme="auto"] #changelist-filter li.selected a:focus,
  html[data-theme="auto"] #changelist-filter li.selected a:hover,
  html[data-theme="auto"] .changelist-filter-clear a:hover {
    color: color-mix(in srgb, var(--custodia-gold) 88%, var(--custodia-parchment) 12%) !important;
  }

  html[data-theme="auto"] #changelist-filter h3,
  html[data-theme="auto"] #changelist-filter details summary,
  html[data-theme="auto"] #changelist-filter details > summary::before {
    color: color-mix(in srgb, var(--custodia-gold) 70%, var(--custodia-parchment) 30%) !important;
  }
}
 
p.paginator {
    margin-top: 2em;
}


p.date {
    width: 100%;
}

body.change-form fieldset.module.aligned > .form-row .flex-container > p.date {
    margin: 0 12px !important;
}

body.app-auth.model-group.change-form fieldset.module.aligned > .form-row.field-granted_permissions > div {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible !important;
}

body.app-auth.model-group.change-form fieldset.module.aligned > .form-row.field-granted_permissions .flex-container {
  display: block !important;
  overflow: visible !important;
}

body.app-auth.model-group.change-form fieldset.module.aligned > .form-row.field-granted_permissions .flex-container > label {
  display: none !important;
}

body.app-auth.model-group.change-form fieldset.module.aligned > .form-row.field-granted_permissions .flex-container > .readonly {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  grid-column: 1 !important;
  margin: 12px !important;
  overflow: visible !important;
  padding: 0 !important;
  width: auto !important;
}

body.app-auth.model-group.change-form fieldset.permissions-summary-fieldset > .form-row.field-granted_permissions {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 243, 235, 0.86)),
    var(--body-bg, #fff) !important;
  border: 1px solid rgba(79, 100, 78, 0.18) !important;
  border-radius: 10px !important;
  padding: 0 !important;
}

body.app-auth.model-group.change-form fieldset.permissions-summary-fieldset.module.aligned > .form-row.field-granted_permissions:not(.hidden):not(:has(~ .form-row:not(.hidden))) {
  border-radius: 10px !important;
}


div#user-tools {
    text-align: center;
}

/* ===========================================
   Custodia compact admin header
   =========================================== */

:root {
  /* --custodia-moss defined in the main admin token block above (compact header fill). */
  --cu-brand-light-green: #4c9b4c;
  --custodia-gold: var(--cu-brand-gold);
  --custodia-parchment: #f5f0e8;
  --custodia-parchment-dark: #ede7d8;
  --custodia-breadcrumb-border: #d8cebc;
  /* Stable, self-contained header height. The header's own `height` must use
     this (NOT --custodia-header-height) to avoid a feedback loop: JS writes the
     measured header height into --custodia-header-height for menu/sticky offsets,
     so if the header's height also read that var it would inflate itself. */
  --custodia-header-height-base: 135px;
  --custodia-header-height: 121px;
  --custodia-breadcrumb-height: 30px;
  --custodia-chip-size: 33px;       /* shared size for theme toggle + avatar chip */
  --custodia-chip-icon-size: 23px;  /* icon inside the chip */
}

/* Live admin header fill — edit --custodia-moss in the main :root token block. */
body:not(.login) #header.custodia-admin-header {
  display: flex !important;
  align-items: center;
  height: var(--custodia-header-height-base);
  min-height: var(--custodia-header-height-base);
  box-sizing: border-box;
  padding: 0 18px !important;
  background: var(--custodia-moss) !important;
  padding-right: 40px !important;
}

/* Mobile hamburger — hidden on desktop */
.custodia-mobile-hamburger {
  display: none;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(240, 234, 216, 0.85);
  cursor: pointer;
}

.custodia-mobile-hamburger:hover,
.custodia-mobile-hamburger:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

/* Desktop toggle slot — hidden on mobile */
.custodia-header-toggle-slot {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}

/* Drawer header — hidden on desktop */
.custodia-drawer-header {
  display: none;
}

body:not(.login) #site-branding.custodia-header-identity,
body:not(.login) #site-branding.custodia-header-identity:link,
body:not(.login) #site-branding.custodia-header-identity:visited {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: row !important;
  min-width: 0;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--cu-brand-logo-gap) !important;
  width: auto !important;
  padding: 0 !important;
  color: var(--cu-brand-ink) !important;
  text-align: left !important;
  text-decoration: none !important;
}

/* Logo link / bare logo: size to mark so flex gap matches product nav */
body:not(.login) #site-branding.custodia-header-identity > a:has(.org-logo) {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  /* margin-bottom: 10px; */
}

body:not(.login) #site-branding.custodia-header-identity .org-logo {
  border-radius: 4px;
}

.custodia-header-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

body:not(.login) .custodia-header-copy a {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-decoration: none !important;
}

body:not(.login) #header #site-name.custodia-header-org,
body:not(.login) #header #site-name.custodia-header-org:link,
body:not(.login) #header #site-name.custodia-header-org:visited,
body:not(.login) #site-name.custodia-header-org {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--cu-brand-ink) !important;
  font-family: var(--cu-brand-wordmark-font) !important;
  font-size: var(--admin-site-title-font-size-desktop) !important;
  font-weight: var(--cu-brand-wordmark-weight) !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

.custodia-header-subtitle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: rgba(240, 234, 216, 0.6);
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.7rem, 0.65rem + 0.12vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: 1px;
}

.custodia-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Trial badge in admin header (%s days left) */
.trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--custodia-chip-size);
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c47a3a 0%, #8b4513 100%);
  color: #fef3c7;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(180, 100, 40, 0.35);
  animation: trial-pulse 2.4s ease-in-out infinite;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.trial-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(180, 100, 40, 0.5);
}

.trial-badge,
.trial-badge:hover,
.trial-badge:visited,
.trial-badge:link {
  text-decoration: none !important;
}

.trial-badge__icon {
  font-size: 1rem;
  line-height: 1;
}

.trial-badge__text {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.trial-badge__days {
  font-weight: 500;
  opacity: 0.9;
}

@keyframes trial-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(180, 100, 40, 0.35); }
  50% { box-shadow: 0 0 16px rgba(180, 100, 40, 0.5); }
}

/* Expired trial badge — red warning variant */
.trial-badge--expired {
  background: linear-gradient(135deg, #c0392b 0%, #7b241c 100%);
  color: #fadbd8;
  box-shadow: 0 0 12px rgba(192, 57, 43, 0.35);
  animation: none;
}

.trial-badge--expired:hover {
  box-shadow: 0 0 16px rgba(192, 57, 43, 0.5);
}

/* Mobile: stack badge below header on small screens */
@media (max-width: 640px) {
  .trial-badge {
    font-size: 0.7rem;
    padding: 0 10px 0 6px;
    gap: 3px;
  }
  .trial-badge__days {
    display: none;
  }
}

body:not(.login) #header.custodia-admin-header .theme-toggle,
.custodia-avatar-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--custodia-chip-size) !important;
  height: var(--custodia-chip-size) !important;
  min-width: var(--custodia-chip-size) !important;
  min-height: var(--custodia-chip-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
}

body:not(.login) #header.custodia-admin-header .theme-toggle {
  background: transparent !important;
  color: rgba(240, 234, 216, 0.86) !important;
}

body:not(.login) #header.custodia-admin-header .theme-toggle svg {
  width: var(--custodia-chip-icon-size);
  height: var(--custodia-chip-icon-size);
  flex-shrink: 0;
}

.custodia-avatar-button {
  background: var(--custodia-gold) !important;
  color: var(--custodia-moss) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.custodia-avatar-image {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #d0d7de;
  background: #fff;
}

.custodia-avatar-button .custodia-avatar-image {
  width: var(--custodia-chip-size);
  height: var(--custodia-chip-size);
}

.custodia-avatar-button:hover,
.custodia-avatar-button:focus-visible,
body:not(.login) #header.custodia-admin-header .theme-toggle:hover,
body:not(.login) #header.custodia-admin-header .theme-toggle:focus-visible {
  outline: 2px solid rgba(240, 234, 216, 0.42);
  outline-offset: 1px;
}

/* ── Preview-features menu button (Curator plan) ── */
.custodia-previews-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--custodia-chip-size);
  height: var(--custodia-chip-size);
  min-width: var(--custodia-chip-size);
  min-height: var(--custodia-chip-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(240, 234, 216, 0.86);
  cursor: pointer;
}
.custodia-previews-button svg {
  width: var(--custodia-chip-icon-size);
  height: var(--custodia-chip-icon-size);
  flex-shrink: 0;
}
.custodia-previews-button:hover,
.custodia-previews-button:focus-visible {
  outline: 2px solid rgba(240, 234, 216, 0.42);
  outline-offset: 1px;
}

.custodia-user-menu[hidden] {
  display: none !important;
}

.custodia-user-menu {
  display: flex;
  justify-content: flex-end;
  position: fixed !important;
  /* Anchor just under the header icons (header vertical centre + half a chip,
     plus a small gap) rather than at the full header bottom, so the dropdown
     sits close to the avatar/menu buttons. Variable-driven, so it stays correct
     at every breakpoint. */
  top: calc(var(--custodia-header-height) / 2 + var(--custodia-chip-size) / 2 + 8px);
  right: 0;
  left: 0;
  z-index: 1070;
  background: transparent;
  border-bottom: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  pointer-events: none;
}

.custodia-user-menu-card {
  width: min(320px, calc(100vw - 20px));
  overflow: hidden;
  border: 1px solid #e7ddcd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(42, 61, 42, 0.16);
  color: #2f2a21;
  font-family: 'DM Sans', sans-serif;
  pointer-events: auto;
}

.custodia-user-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
}

.custodia-user-summary__text {
  min-width: 0;
  flex: 1 1 auto;
}

.custodia-user-avatar-edit {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
}

.custodia-user-avatar-edit__label {
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.custodia-user-avatar-edit__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.custodia-user-avatar-edit__img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.custodia-user-avatar-edit__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.custodia-user-avatar-edit__overlay .material-symbols-outlined {
  font-size: 18px;
}

.custodia-user-avatar-edit:hover .custodia-user-avatar-edit__overlay,
.custodia-user-avatar-edit:focus-visible .custodia-user-avatar-edit__overlay {
  opacity: 1;
}

.custodia-user-name {
  color: #2f2a21;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.custodia-user-role {
  margin-top: 2px;
  color: rgba(47, 42, 33, 0.62);
  font-size: 11.5px;
  line-height: 1.35;
}

.custodia-user-email {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin-top: 2px;
  color: rgba(47, 42, 33, 0.62);
  font-size: 11.5px;
  line-height: 1.35;
  max-width: 100%;
}

.custodia-user-email__address {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.custodia-user-email__actions {
  flex: 0 0 auto;
  white-space: nowrap;
}

html[data-theme="dark"] .custodia-user-email {
  color: rgba(240, 234, 216, 0.62);
}

.custodia-user-email a {
  color: color-mix(in srgb, var(--custodia-gold, #c9a84c) 50%, #000 50%);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  transition: color 0.15s;
}

.custodia-user-email a:hover {
  color: color-mix(in srgb, var(--custodia-gold, #c9a84c) 42%, #000 58%);
  text-decoration: underline;
}

html[data-theme="dark"] .custodia-user-email a {
  color: var(--custodia-gold, #c9a84c);
}

html[data-theme="dark"] .custodia-user-email a:hover {
  color: color-mix(in srgb, var(--custodia-gold, #c9a84c) 80%, #fff 20%);
}

.custodia-user-menu-group {
  border-top: 1px solid #e7ddcd;
}

.custodia-user-menu-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.custodia-user-menu-item,
.custodia-user-menu-item:link,
.custodia-user-menu-item:visited,
.custodia-user-menu-item:hover,
.custodia-user-menu-item:focus {
  display: grid;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: #2f2a21 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.custodia-user-menu-item:hover,
.custodia-user-menu-item:focus {
  background: #f7f1e7;
  outline: none;
}

.custodia-menu-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  align-self: center;
  justify-content: center;
  color: currentColor;
  font-size: 16px;
  line-height: 1;
}

.custodia-menu-icon.material-symbols-outlined {
  font-size: 20px;
}

.custodia-menu-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.custodia-menu-icon circle {
  fill: currentColor;
  stroke: none;
}

.custodia-icon-muted-line {
  opacity: 0.42;
}

.custodia-user-menu-danger,
.custodia-user-menu-danger:hover,
.custodia-user-menu-danger:focus {
  color: #9b2f2f !important;
}

.custodia-user-menu-upgrade,
.custodia-user-menu-upgrade:link,
.custodia-user-menu-upgrade:visited {
  color: color-mix(in srgb, var(--custodia-gold) 72%, #6b5a30 28%) !important;
  font-weight: 600;
}
.custodia-user-menu-upgrade:hover,
.custodia-user-menu-upgrade:focus {
  color: var(--custodia-gold) !important;
}

.custodia-client-switcher {
  padding: 12px 0 10px;
}

.custodia-client-switcher form {
  display: grid;
  max-height: 190px;
  overflow-y: auto;
  padding: 0 8px;
}

.custodia-client-switcher-label {
  display: grid;
  align-items: center;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  padding: 0 16px 8px;
  color: rgba(47, 42, 33, 0.7);
  font-size: 11.5px;
  font-weight: 500;
}

.custodia-client-switch-option {
  display: flex;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2f2a21;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.custodia-client-switch-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custodia-client-switch-option:hover,
.custodia-client-switch-option:focus {
  background: #f7f1e7;
  outline: none;
}

.custodia-client-switch-option.is-selected {
  background: #efe6d7;
  color: var(--custodia-moss);
}

.custodia-client-switch-option.is-selected::after {
  content: "\2713";
  flex: 0 0 auto;
  margin-left: 8px;
  color: var(--custodia-gold);
  font-size: 12px;
  font-weight: 700;
}

body:not(.login) .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--custodia-breadcrumb-height);
  min-height: var(--custodia-breadcrumb-height);
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 12px !important;
  border-bottom: 0.5px solid var(--custodia-breadcrumb-border);
  background: var(--custodia-parchment-dark) !important;
  box-shadow: none !important;
  /* Slightly darker than links so bare text nodes (current page on Django's change_form)
     stand out without needing a wrapper span. Links override this with their own rule. */
  color: rgba(74, 62, 42, 0.82) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px !important;
  line-height: var(--custodia-breadcrumb-height);
  white-space: nowrap;
}

body:not(.login) .breadcrumbs a,
body:not(.login) .breadcrumbs a:link,
body:not(.login) .breadcrumbs a:visited {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(74, 62, 42, 0.65) !important;
  font-size: 11.5px !important;
  line-height: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custodia-breadcrumb-separator {
  flex: 0 0 auto;
  color: rgba(122, 98, 34, 0.55);
}

.custodia-breadcrumb-current {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--custodia-moss);
  font-size: 11.5px;
  font-weight: 500;
  line-height: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] .custodia-user-menu {
  background: transparent;
  border-bottom-color: transparent;
}

html[data-theme="dark"] .custodia-user-menu-card {
  background: #262823;
  color: #f0ead8;
}

html[data-theme="dark"] .custodia-user-name,
html[data-theme="dark"] .custodia-user-menu-item,
html[data-theme="dark"] .custodia-user-menu-item:link,
html[data-theme="dark"] .custodia-user-menu-item:visited,
html[data-theme="dark"] .custodia-user-menu-item:hover,
html[data-theme="dark"] .custodia-user-menu-item:focus {
  color: #f0ead8 !important;
}

html[data-theme="dark"] .custodia-user-role,
html[data-theme="dark"] .custodia-client-switcher-label {
  display: grid;
  align-items: center;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  color: rgba(240, 234, 216, 0.62);
}

html[data-theme="dark"] .custodia-user-menu-group {
  border-top-color: #3b3a33;
}

html[data-theme="dark"] .custodia-user-menu-item:hover,
html[data-theme="dark"] .custodia-user-menu-item:focus {
  background: #30332d;
}

html[data-theme="dark"] .custodia-user-menu-danger,
html[data-theme="dark"] .custodia-user-menu-danger:hover,
html[data-theme="dark"] .custodia-user-menu-danger:focus {
  color: #ff9f9f !important;
}

html[data-theme="dark"] .custodia-user-menu-upgrade,
html[data-theme="dark"] .custodia-user-menu-upgrade:link,
html[data-theme="dark"] .custodia-user-menu-upgrade:visited {
  color: color-mix(in srgb, var(--custodia-gold) 80%, #e8dcb8 20%) !important;
}
html[data-theme="dark"] .custodia-user-menu-upgrade:hover,
html[data-theme="dark"] .custodia-user-menu-upgrade:focus {
  color: var(--custodia-gold) !important;
}

html[data-theme="dark"] .custodia-client-switch-option {
  color: #f0ead8;
}

html[data-theme="dark"] .custodia-client-switch-option:hover,
html[data-theme="dark"] .custodia-client-switch-option:focus {
  background: #30332d;
}

html[data-theme="dark"] .custodia-client-switch-option.is-selected {
  background: #353128;
  color: #f0ead8;
}

html[data-theme="dark"] body:not(.login) .breadcrumbs {
  border-bottom-color: #3b3a33;
  background: #262823 !important;
  color: rgba(240, 234, 216, 0.75) !important;
}

html[data-theme="dark"] body:not(.login) .breadcrumbs a,
html[data-theme="dark"] body:not(.login) .breadcrumbs a:link,
html[data-theme="dark"] body:not(.login) .breadcrumbs a:visited {
  color: rgba(240, 234, 216, 0.62) !important;
}

html[data-theme="dark"] .custodia-breadcrumb-current {
  color: #fff8ec;
  font-weight: 600;
}

html[data-theme="dark"] .custodia-breadcrumb-separator {
  color: rgba(240, 234, 216, 0.75);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body:not(.login) .breadcrumbs {
    border-bottom-color: #3b3a33;
    background: #262823 !important;
    color: rgba(240, 234, 216, 0.75) !important;
  }

  html[data-theme="auto"] body:not(.login) .breadcrumbs a,
  html[data-theme="auto"] body:not(.login) .breadcrumbs a:link,
  html[data-theme="auto"] body:not(.login) .breadcrumbs a:visited {
    color: rgba(240, 234, 216, 0.62) !important;
  }

  html[data-theme="auto"] .custodia-breadcrumb-current {
    color: #fff8ec;
    font-weight: 600;
  }

  html[data-theme="auto"] .custodia-breadcrumb-separator {
    color: rgba(240, 234, 216, 0.75);
  }

  html[data-theme="auto"] .custodia-drawer-close {
    color: #e8d9c0;
  }

  html[data-theme="auto"] #nav-sidebar {
    background: #1f2022 !important;
    border-right-color: #2e3033 !important;
    border-inline-end-color: #2e3033 !important;
  }

  html[data-theme="auto"] #nav-sidebar .module {
    background: #1f2022 !important;
    border-bottom-color: #31343a !important;
  }

  html[data-theme="auto"] #nav-sidebar .module caption,
  html[data-theme="auto"] #nav-sidebar .module caption .section,
  html[data-theme="auto"] #nav-sidebar .module caption .section:link,
  html[data-theme="auto"] #nav-sidebar .module caption .section:visited {
    color: #aa9f8a !important;
  }

  html[data-theme="auto"] #nav-sidebar .module th a,
  html[data-theme="auto"] #nav-sidebar .module th a:link,
  html[data-theme="auto"] #nav-sidebar .module th a:visited {
    color: #e7dfcf !important;
  }

  html[data-theme="auto"] #nav-sidebar .current-model th a,
  html[data-theme="auto"] #nav-sidebar .current-model th a:link,
  html[data-theme="auto"] #nav-sidebar .current-model th a:visited,
  html[data-theme="auto"] #nav-sidebar .current-model td a,
  html[data-theme="auto"] #nav-sidebar .current-model td a:link,
  html[data-theme="auto"] #nav-sidebar .current-model td a:visited {
    background: #353128 !important;
    color: #f2ead8 !important;
  }

  html[data-theme="auto"] .custodia-drawer-header {
    background: #1f2022;
    border-bottom-color: #3b3a33;
  }

  html[data-theme="auto"] .custodia-drawer-name {
    color: #f0ead8;
  }

  html[data-theme="auto"] .custodia-drawer-name::after {
    color: var(--custodia-gold);
  }

  html[data-theme="auto"] .custodia-drawer-subtitle {
    color: rgba(240, 234, 216, 0.55);
  }
}

@media (min-width: 700px) {
  .custodia-user-menu {
    justify-content: flex-end;
    padding: 8px 10px;
  }

  .custodia-user-menu-card {
    width: min(320px, calc(100vw - 20px));
  }

  html[data-theme="dark"] .custodia-user-menu-card {
    border-color: #3b3a33;
  }
}

@media (max-width: 1024px) {
  body:not(.login) #header.custodia-admin-header {
    position: static;
    top: auto;
  }

  #nav-sidebar .module th a,
  #nav-sidebar .module th a:link,
  #nav-sidebar .module th a:visited {
    font-size: 1.1125rem !important;
  }

  body:not(.login) #header,
  body:not(.login) #header::after,
  body:not(.login) .breadcrumbs {
    box-shadow: none !important;
  }

  body:not(.login) #header {
    border-bottom: 0;
  }

  body:not(.login) #header::after {
    content: none;
  }

  body:not(.login) .breadcrumbs {
    box-shadow: inset 0 9px 12px -10px rgba(0, 0, 0, 0.42) !important;
  }

  /* Same pattern as desktop: header height comes from --custodia-header-height-base
     (not --custodia-header-height, which JS overwrites for sticky offsets). */
  :root {
    --custodia-header-height-base: 92px;
    --custodia-header-height: 92px;
  }

  /* Compact tablet/mobile header — logo + wordmark + tagline */
  body:not(.login) #header.custodia-admin-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: var(--custodia-header-height-base) !important;
    min-height: var(--custodia-header-height-base) !important;
    padding: 6px 18px 6px 7px !important;
    gap: 6px;
    overflow: hidden;
  }

  /* Hide desktop toggle slot on mobile */
  .custodia-header-toggle-slot {
    display: none !important;
  }

  /* Show mobile hamburger */
  .custodia-mobile-hamburger {
    display: inline-flex !important;
  }

  /* Hide hamburger on dashboard — no sidebar available */
  body.dashboard .custodia-mobile-hamburger {
    display: none !important;
  }

  /* Branding — logo + wordmark + tagline (same lockup as desktop, scaled) */
  body:not(.login) #site-branding.custodia-header-identity {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body:not(.login) #site-branding.custodia-header-identity .org-logo {
    --cu-brand-logo-box: var(--cu-brand-logo-size-tablet);
    border-radius: 4px;
  }

  body:not(.login) .custodia-header-subtitle {
    display: block !important;
    font-size: 0.65rem;
    letter-spacing: 0.8px;
  }

  body:not(.login) .custodia-header-copy {
    min-width: 0;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
  }

  body:not(.login) #header #site-name.custodia-header-org,
  body:not(.login) #site-name.custodia-header-org {
    font-size: var(--admin-site-title-font-size-tablet) !important;
    line-height: 1.2 !important;
    text-align: left !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Actions — theme toggle + avatar on right */
  body:not(.login) .custodia-header-actions {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    /* gap: 4px !important; */
  }

  body:not(.login) #header.custodia-admin-header .theme-toggle,
  .custodia-avatar-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body:not(.login) #header.custodia-admin-header .theme-toggle svg {
    width: 20px;
    height: 20px;
  }

  .custodia-avatar-button {
    font-size: 10px !important;
  }

  .custodia-avatar-button .custodia-avatar-image {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
  }

  /* Drawer header inside sidebar */
  .custodia-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 60px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 3px;
  }

  .custodia-drawer-branding {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .custodia-drawer-branding .org-logo {
    --cu-brand-logo-box: 60px;
  }

  .custodia-drawer-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
  }

  .custodia-drawer-name {
    font-family: 'Fraunces', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
  }

  .custodia-drawer-name::after {
    content: '.';
    color: var(--cu-brand-light-green);
  }

  .custodia-drawer-subtitle {
    /* color: rgba(240, 234, 216, 0.55); */
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    /* line-height: 1; */
  }

  .custodia-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9b947d;
    cursor: pointer;
  }

  .custodia-drawer-close:hover,
  .custodia-drawer-close:focus {
    background: rgba(0, 0, 0, 0.08);
    outline: none;
  }

  /* Sidebar nav content below drawer header */
  body.admin-mobile-nav-open #main #nav-sidebar {
    padding-top: 0 !important;
  }

  #main #nav-sidebar {
    padding-top: 0 !important;
  }
}

@media (max-width: 700px) {
  :root {
    --custodia-header-height-base: 72px;
    --custodia-header-height: 72px;
  }

  body:not(.login) #site-branding.custodia-header-identity .org-logo {
    --cu-brand-logo-box: var(--cu-brand-logo-size-mobile);
  }

  body:not(.login) #header #site-name.custodia-header-org,
  body:not(.login) #site-name.custodia-header-org {
    font-size: var(--admin-site-title-font-size-mobile) !important;
  }
}

@media (max-width: 399px) {
  body:not(.login) .breadcrumbs a:not(:last-of-type):not(:first-child),
  body:not(.login) .breadcrumbs .custodia-breadcrumb-separator:not(:last-of-type) {
    display: none;
  }
}

/* -- Inline image lightbox modal -- */

#custodia-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

#custodia-lightbox.custodia-lightbox-open {
  display: flex;
}

.custodia-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.custodia-lightbox-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
}

.custodia-lightbox-topbar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.custodia-lightbox-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.custodia-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

.custodia-lightbox-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custodia-lightbox-prev,
.custodia-lightbox-next {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.custodia-lightbox-prev:hover,
.custodia-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.32);
}

.custodia-lightbox-img {
  display: block;
  max-width: min(80vw, 1200px);
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
  background: #1a1a1a;
}

.custodia-lightbox-counter {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  min-height: 1em;
}

/* ===========================================
   MOBILE / TABLET CHANGE LIST REFINEMENTS
   Card layout, drawer filters, icon actions, badges.
   =========================================== */

/* -- Header bar (title + actions) -- */
.changelist-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.changelist-header-bar h1 {
  margin: 0;
  flex: 1 1 auto;
}

.changelist-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.changelist-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--hairline-color);
  background: var(--darkened-bg);
  color: var(--body-fg);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.changelist-header-btn:hover {
  background: var(--admin-accent-active-color);
  color: var(--admin-accent-text-active-color);
  border-color: transparent;
}

.changelist-header-actions .object-tools {
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.changelist-header-actions .object-tools li {
  list-style: none;
  display: block;
}

/* -- Breadcrumb toggle -- */
body:not(.login) .custodia-mobile-breadcrumb {
  display: none !important;
}

body:not(.login) .custodia-desktop-breadcrumb {
  display: flex;
}

/* Filter toggle visible on all breakpoints; Add icon is mobile-only */
.changelist-filter-btn {
  display: inline-flex;
}

.changelist-add-btn {
  display: none;
}

/* -- Status badges (all breakpoints) -- */
.custodia-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  background: var(--darkened-bg);
  color: var(--body-quiet-color);
  border: 1px solid transparent;
  box-sizing: border-box;
}

body.change-form .custodia-status-badge {
  border-color: var(--custodia-gold);
}

.status-success {
  background: #d4edda;
  color: #155724;
}

.status-warning {
  background: #fff3cd;
  color: #856404;
}

.status-info {
  background: #cce5ff;
  color: #004085;
}

.status-neutral {
  background: #e2e3e5;
  color: #383d41;
}

.status-danger {
  background: #f8d7da;
  color: #721c24;
}

/* -- Filter drawer overlay -- */
.changelist-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1070;
}

body.changelist-filter-open .changelist-filter-overlay {
  display: block;
}

body.changelist-filter-open {
  overflow: hidden;
}

.changelist-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.changelist-filter-header h2 {
  margin: 0;
  font-size: 1.1rem;
  border-radius: 16px;
}

.changelist-filter-close {
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--body-quiet-color);
}

.changelist-filter-clear {
  margin: 0 0 16px;
}

#changelist-filter .changelist-filter-clear a {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--custodia-moss) 68%, var(--body-quiet-color) 32%) !important;
  text-decoration: none !important;
  word-break: normal;
}

#changelist-filter .changelist-filter-clear-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: block;
}

#changelist-filter .changelist-filter-clear a:hover {
  text-decoration: none !important;
  color: color-mix(in srgb, var(--custodia-moss) 78%, var(--body-quiet-color) 22%) !important;
}

/* -- Mobile-only breadcrumb switch (tablets keep full path) -- */
@media (max-width: 767px) {
  body:not(.login) .custodia-mobile-breadcrumb {
    display: flex !important;
  }

  /* Override the 11.5px rule that targets .breadcrumbs a directly */
  body:not(.login) .custodia-mobile-breadcrumb.breadcrumbs a,
  body:not(.login) .custodia-mobile-breadcrumb.breadcrumbs a:link,
  body:not(.login) .custodia-mobile-breadcrumb.breadcrumbs a:visited {
    font-size: 0.8rem !important;
    font-weight: 500;
  }

  body:not(.login) .custodia-desktop-breadcrumb {
    display: none !important;
  }
}

/* -- Mobile / tablet breakpoints -- */
@media (max-width: 1024px) {
  /* Show Add icon on mobile; hide desktop Add pill */
  .changelist-add-btn {
    display: inline-flex;
  }

  .changelist-header-actions .object-tools {
    display: none;
  }

  /* Simplify toolbar: full-width search, no button */
  #toolbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px;
  }

  #changelist-search {
    width: 100%;
  }

  #changelist-search > div {
    display: block;
  }

  #changelist-search label,
  #changelist-search input[type="submit"] {
    display: none;
  }

  #changelist-search .small.quiet {
    display: none;
  }

  #changelist-search input#searchbar {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 18px;
  }

  /* Bulk actions hidden until selection */
  .changelist-actions {
    display: none;
    margin-bottom: 12px;
  }

  .changelist-actions.is-visible {
    display: block;
  }

  /* Card rows */
  body.change-list #result_list thead {
    display: none;
  }

  body.change-list #result_list,
  body.change-list #result_list tbody,
  body.change-list #result_list tr,
  body.change-list #result_list th,
  body.change-list #result_list td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Remove outer table borders and shadow on mobile */
  body.change-list #changelist .results {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body.change-list #changelist #result_list {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Kill table borders inside cards so no grid lines show */
  body.change-list #result_list tbody tr td,
  body.change-list #result_list tbody tr th {
    border: 0 !important;
  }

  body.change-list #result_list tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 18px 16px 16px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--custodia-card-border-color);
    border-radius: 8px;
    background: var(--custodia-card-bg) !important;
    box-shadow: var(--custodia-card-shadow);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Checkbox */
  body.change-list #result_list td.action-checkbox {
    flex: 0 0 auto;
    width: auto;
    padding: 2px 10px 0 0;
    order: 1;
  }

  /* Primary field (first th in row) */
  body.change-list #result_list tbody tr th:first-of-type {
    flex: 1 1 0;
    min-width: 0;
    width: calc(100% - 42px);
    padding: 0 36px 4px 0;
    order: 2;
    font-weight: 600;
    font-size: 1rem;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.change-list #result_list tbody tr th:first-of-type a {
    display: block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Status badge cell */
  body.change-list #result_list tbody tr td.field-status {
    flex: 1 1 100%;
    width: auto;
    padding: 4px 0 0 28px;
    order: 3;
    font-size: 0.8rem;
  }

  /* Hide all other cells */
  body.change-list #result_list tbody tr td:not(.action-checkbox):not(.field-status) {
    display: none !important;
  }

  /* Chevron */
  body.change-list #result_list tbody tr::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--body-quiet-color);
    border-right: 2px solid var(--body-quiet-color);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
  }
}

/* ===========================================
   EMAIL VERIFICATION PROCESS STYLES
   =========================================== */
.custodia-verification-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--custodia-parchment);
  color: var(--custodia-moss);
  padding: 12px 20px;
  margin: 10px 0 20px 0;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  animation: slideDown 0.3s ease-out;
}

html[data-theme="dark"] .custodia-verification-banner {
  background-color: var(--custodia-moss);
  color: var(--custodia-parchment);
  border-left-color: var(--custodia-gold);
}

.custodia-verification-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custodia-verification-banner__icon {
  font-size: 1.3rem;
  color: var(--custodia-gold);
}

html[data-theme="dark"] .custodia-verification-banner__icon {
  color: var(--custodia-gold);
}

.custodia-verification-banner__text {
  font-weight: 500;
}

.custodia-verification-banner__link {
  color: inherit !important;
  font-weight: 700;
  text-decoration: underline !important;
  margin-left: 4px;
}

.custodia-verification-banner__link:hover {
  opacity: 0.8;
}

.custodia-verification-banner__dismiss {
  color: inherit !important;
  opacity: 0.7;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
}

.custodia-verification-banner__dismiss:hover {
  opacity: 1;
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Blocking "verify your email" window shown after login once an unverified
   account is older than EMAIL_VERIFICATION_GRACE_DAYS. */
.custodia-verify-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease-out;
}

.custodia-verify-modal__dialog {
  background-color: var(--custodia-parchment);
  color: var(--custodia-moss);
  width: 100%;
  max-width: 460px;
  border-radius: 10px;
  padding: 28px 28px 22px 28px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: slideDown 0.25s ease-out;
}

html[data-theme="dark"] .custodia-verify-modal__dialog {
  background-color: var(--custodia-moss);
  color: var(--custodia-parchment);
}

.custodia-verify-modal__icon {
  font-size: 2.6rem;
  color: var(--custodia-gold);
}

.custodia-verify-modal__title {
  margin: 10px 0 12px 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: inherit;
}

.custodia-verify-modal__text {
  margin: 0 0 12px 0;
  font-size: 0.97rem;
  line-height: 1.5;
}

.custodia-verify-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 14px 0;
}

.custodia-verify-modal__btn {
  display: block;
  padding: 11px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: opacity 0.2s, background-color 0.2s;
}

.custodia-verify-modal__btn--primary {
  background-color: var(--custodia-gold);
  color: var(--custodia-moss) !important;
}

.custodia-verify-modal__btn--primary:hover {
  opacity: 0.9;
}

.custodia-verify-modal__btn--secondary {
  background-color: transparent;
  color: inherit !important;
  border: 1px solid currentColor;
}

.custodia-verify-modal__btn--secondary:hover {
  opacity: 0.8;
}

.custodia-verify-modal__later {
  display: inline-block;
  margin-top: 4px;
  color: inherit !important;
  opacity: 0.7;
  font-size: 0.88rem;
  text-decoration: underline !important;
}

.custodia-verify-modal__later:hover {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}



/* ===========================================
   Plan upgrade page
   =========================================== */

.plan-action-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 28px 52px;
}

/* ── Header with icon ── */
.plan-action-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.plan-action-header__icon {
  font-size: 2.2rem;
  color: color-mix(in srgb, var(--custodia-gold) 78%, #b8860b 22%);
  filter: drop-shadow(0 2px 3px rgba(184, 134, 11, 0.25));
}

.plan-action-page h2 {
  font-family: 'Fraunces', serif !important;
  font-size: 2.3rem;
  font-weight: 500;
  margin: 0;
  color: var(--body-fg);
}

.plan-action-intro {
  font-size: 0.98rem;
  color: var(--body-quiet-color);
  line-height: 1.6;
  margin: 12px 0 24px;
}

/* ── Card grid ── */
.plan-action-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 32px;
  margin-top: 47px;
}

/* ── Shared card ── */
.plan-action-card {
  position: relative;
  padding: 28px 22px 22px;
  border: 1px solid var(--hairline-color);
  border-radius: 12px;
  background: var(--admin-card-bg, var(--body-bg));
  box-shadow: 0 4px 14px rgba(40, 32, 22, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.plan-action-card:hover {
  box-shadow: 0 8px 24px rgba(40, 32, 22, 0.1);
  transform: translateY(-2px);
}

/* ── Target card gets a vibrant gold-tinted glow ── */
.plan-action-card--target {
  border-color: color-mix(in srgb, var(--custodia-gold) 55%, #c9a84c 45%);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--custodia-gold) 18%, transparent) 0%,
      color-mix(in srgb, var(--custodia-gold) 5%, var(--body-bg)) 50%,
      var(--body-bg) 100%
    ),
    var(--admin-card-bg, var(--body-bg));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--custodia-gold) 30%, transparent),
    0 8px 30px rgba(184, 134, 11, 0.11),
    0 3px 8px rgba(40, 32, 22, 0.07);
}

.plan-action-card--target:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--custodia-gold) 50%, transparent),
    0 14px 40px rgba(184, 134, 11, 0.18),
    0 4px 12px rgba(40, 32, 22, 0.1);
  transform: translateY(-3px);
}

/* ── Corner ribbon for target card ── */
.plan-action-card__ribbon {
  position: absolute;
  top: 12px;
  right: -6px;
  padding: 4px 14px 4px 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--custodia-gold) 85%, #b8860b 15%),
    color-mix(in srgb, var(--custodia-gold) 65%, #8b6914 35%)
  );
  color: #121212;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.plan-action-card__ribbon::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--custodia-gold) 40%, #5c4a10 60%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ── Badge pills ── */
.plan-action-card__badge {
  position: absolute;
  top: -11px;
  left: 20px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--darkened-bg);
  color: var(--body-quiet-color);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.plan-action-card__badge--new {
  background: linear-gradient(135deg,
    var(--admin-header-active-color),
    color-mix(in srgb, var(--admin-header-active-color) 78%, black 22%)
  );
  color: var(--admin-header-text-color);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ── Card typography ── */
/* Override #content h3 { font-family: 'DM Sans' !important; } to use display font */
#content .plan-action-card__name,
body #content .plan-action-card__name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 2.3rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--body-fg);
}

.plan-modal .plan-action-card__name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--body-fg);
}

.plan-action-card__price {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 18px;
  line-height: 1;
}

.plan-action-card__price sup {
  font-size: 1.2rem;
  vertical-align: super;
}

.plan-action-card__price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--body-quiet-color);
}

/* ── Annual total line under price ── */
.plan-action-card__annual {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #613f30;
  margin: -12px 0 18px;
  line-height: 1;
}

/* ── Trial label under price ── */
.plan-action-card__trial-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--custodia-gold) 78%, #8b6914 22%);
  margin: 4px 0 16px;
}

/* ── Feature lists ── */
.plan-action-card__features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-action-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline-color) 55%, transparent);
  font-size: 0.86rem;
  color: var(--body-fg);
  line-height: 1.35;
  text-align: left;
}

.plan-action-card__features li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ── Custom bullet icons ── */
.plan-action-bullet {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
}

.plan-action-bullet--check {
  background: color-mix(in srgb, #4f8a38 18%, transparent);
  color: #3d6e2b;
  font-weight: 700;
}

.plan-action-bullet--star {
  background: color-mix(in srgb, var(--custodia-gold) 22%, transparent);
  color: color-mix(in srgb, var(--custodia-gold) 72%, #8b6914 28%);
}

.plan-action-bullet--sparkle {
  background: color-mix(in srgb, var(--admin-header-active-color) 22%, transparent);
  color: var(--admin-header-active-color);
  font-size: 0.75rem;
}

.plan-action-bullet--unavail {
  background: color-mix(in srgb, var(--body-quiet-color) 15%, transparent);
  color: var(--body-quiet-color);
  font-weight: 700;
}

/* ── Feature type variations ── */
.plan-action-card__feature--unavail {
  opacity: 0.45;
  color: var(--body-quiet-color);
}

.plan-action-card__feature--base {
  color: var(--body-quiet-color);
  font-style: italic;
}

.plan-action-card__feature--new {
  font-weight: 650;
  color: var(--body-fg);
}

/* ── Shared action button base ── */
a.plan-action-btn,
.plan-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 30px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.plan-action-btn .material-symbols-outlined {
  font-size: 1.25rem;
}

a.plan-action-btn:hover,
.plan-action-btn:hover {
  transform: translateY(-2px);
}

a.plan-action-btn:active,
.plan-action-btn:active {
  transform: translateY(0);
}

/* Primary (activate / upgrade) */
a.plan-action-btn--primary,
.plan-action-btn--primary {
  padding: 14px 40px;
  border: 0;
  background: linear-gradient(135deg,
    var(--custodia-moss),
    color-mix(in srgb, var(--custodia-moss) 85%, black 15%)
  );
  color: #ffffff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--custodia-moss) 25%, transparent);
}

a.plan-action-btn--primary:hover,
.plan-action-btn--primary:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--custodia-moss) 90%, black 10%),
    color-mix(in srgb, var(--custodia-moss) 72%, black 28%)
  );
  color: #ffffff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--custodia-moss) 35%, transparent);
}

a.plan-action-btn--primary:active,
.plan-action-btn--primary:active {
  box-shadow: 0 2px 8px rgba(42, 61, 42, 0.2);
}

/* Secondary (maybe later / dismiss) */
a.plan-action-btn--secondary,
.plan-action-btn--secondary {
  padding: 14px 32px;
  border: 1px solid var(--border-color);
  background: var(--admin-card-bg, var(--body-bg));
  color: var(--custodia-moss);
}

a.plan-action-btn--secondary:hover,
.plan-action-btn--secondary:hover {
  background: var(--hairline-color);
  color: var(--custodia-moss);
  border-color: var(--border-color);
}

/* Dark mode: primary */
html[data-theme="dark"] a.plan-action-btn--primary,
html[data-theme="dark"] .plan-action-btn--primary {
  background: color-mix(in srgb, var(--custodia-moss) 55%, var(--darkened-bg) 45%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] a.plan-action-btn--primary,
  html[data-theme="auto"] .plan-action-btn--primary {
    background: color-mix(in srgb, var(--custodia-moss) 55%, var(--darkened-bg) 45%);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Dark mode: secondary */
html[data-theme="dark"] a.plan-action-btn--secondary,
html[data-theme="dark"] .plan-action-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"] a.plan-action-btn--secondary:hover,
html[data-theme="dark"] .plan-action-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] a.plan-action-btn--secondary,
  html[data-theme="auto"] .plan-action-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
  }

  html[data-theme="auto"] a.plan-action-btn--secondary:hover,
  html[data-theme="auto"] .plan-action-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* ── Footer note ── */
.plan-action-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 0.83rem;
  color: var(--body-quiet-color);
  line-height: 1.55;
}

.plan-action-footer a {
  color: var(--link-fg);
  font-weight: 600;
}

/* ── Dark mode overrides ── */
html[data-theme="dark"] .plan-action-card {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .plan-action-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .plan-action-card--target {
  border-color: color-mix(in srgb, var(--custodia-gold) 68%, #e8d5a0 32%);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--custodia-gold) 12%, transparent) 0%,
      color-mix(in srgb, var(--custodia-gold) 4%, var(--body-bg)) 50%,
      var(--body-bg) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--custodia-gold) 25%, transparent),
    0 12px 40px rgba(0,0,0,0.35);
}

html[data-theme="dark"] .plan-action-card--target:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--custodia-gold) 40%, transparent),
    0 18px 50px rgba(0,0,0,0.45);
}

html[data-theme="dark"] .plan-action-bullet--check {
  background: color-mix(in srgb, #5fa846 22%, transparent);
  color: #7cc465;
}

html[data-theme="dark"] .plan-action-bullet--star {
  background: color-mix(in srgb, var(--custodia-gold) 28%, transparent);
  color: color-mix(in srgb, var(--custodia-gold) 88%, #f0ead8 12%);
}

html[data-theme="dark"] .plan-action-bullet--sparkle {
  background: color-mix(in srgb, var(--admin-header-text-color) 18%, transparent);
  color: var(--admin-header-text-color);
}

html[data-theme="dark"] .plan-action-card__ribbon {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--custodia-gold) 88%, #f0ead8 12%),
    color-mix(in srgb, var(--custodia-gold) 68%, #8b6914 32%)
  );
  color: #121212;
}

html[data-theme="dark"] .plan-action-card__ribbon::after {
  background: color-mix(in srgb, var(--custodia-gold) 50%, #5c4a10 50%);
}

html[data-theme="dark"] .plan-action-card__badge--new {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Auto dark-mode (system preference) ── */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .plan-action-card--target {
    border-color: color-mix(in srgb, var(--custodia-gold) 68%, #e8d5a0 32%);
    background:
      linear-gradient(165deg,
        color-mix(in srgb, var(--custodia-gold) 12%, transparent) 0%,
        color-mix(in srgb, var(--custodia-gold) 4%, var(--body-bg)) 50%,
        var(--body-bg) 100%
      );
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--custodia-gold) 25%, transparent),
      0 12px 40px rgba(0,0,0,0.35);
  }

  html[data-theme="auto"] .plan-action-card--target:hover {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--custodia-gold) 40%, transparent),
      0 18px 50px rgba(0,0,0,0.45);
  }

  html[data-theme="auto"] .plan-action-bullet--check {
    background: color-mix(in srgb, #5fa846 22%, transparent);
    color: #7cc465;
  }

  html[data-theme="auto"] .plan-action-bullet--star {
    background: color-mix(in srgb, var(--custodia-gold) 28%, transparent);
    color: color-mix(in srgb, var(--custodia-gold) 88%, #f0ead8 12%);
  }

  html[data-theme="auto"] .plan-action-bullet--sparkle {
    background: color-mix(in srgb, var(--admin-header-text-color) 18%, transparent);
    color: var(--admin-header-text-color);
  }

  html[data-theme="auto"] .plan-action-card__ribbon {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--custodia-gold) 88%, #f0ead8 12%),
      color-mix(in srgb, var(--custodia-gold) 68%, #8b6914 32%)
    );
    color: #121212;
  }

  html[data-theme="auto"] .plan-action-card__ribbon::after {
    background: color-mix(in srgb, var(--custodia-gold) 50%, #5c4a10 50%);
  }

  html[data-theme="auto"] .plan-action-card__badge--new {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .plan-action-cards {
    grid-template-columns: 1fr;
  }

  .plan-action-page {
    padding: 22px 16px 40px;
  }

  .plan-action-page h2 {
    font-size: 1.95rem;
  }

  .plan-action-card__ribbon {
    font-size: 0.57rem;
    padding: 3px 10px 3px 8px;
  }
}


.plan-action-card--selectable {
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.plan-action-card--selectable:hover {
  transform: translateY(-2px);
}

/* Radio input hidden but accessible */
.plan-action-card__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Selected state via :has() — modern browsers */
.plan-action-card--selectable:has(.plan-action-card__radio:checked) {
  border-color: var(--custodia-gold);
  box-shadow:
    0 0 0 1px var(--custodia-gold),
    0 0 24px rgba(212, 175, 55, 0.25);
  transform: translateY(-2px);
}

/* Override permanent --target gold border on commit cards —
   border is driven by :checked state only */
.plan-action-card--selectable.plan-action-card--target {
  border-color: transparent !important;
  box-shadow: none;
}

.plan-action-card--selectable.plan-action-card--target:has(.plan-action-card__radio:checked) {
  border-color: var(--custodia-gold) !important;
}

.plan-action-card--curator:has(.plan-action-card__radio:checked) {
  border-color: var(--custodia-moss);
  border-width: 1px;
  box-shadow:
    0 0 0 1px var(--custodia-moss),
    0 0 24px color-mix(in srgb, var(--custodia-moss) 35%, transparent);
}

/* Fallback for browsers without :has() — checked class via JS would help,
   but Django admin already relies on modern browsers, so :has() is fine. */

.plan-action-intro--sub {
  font-size: 0.92rem;
  opacity: 0.75;
  margin-top: -6px;
  margin-bottom: 20px;
}

/* ── Billing toggle (monthly / annual) ── */
.billing-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  margin: 0 auto 0px;
  width: fit-content;
  border: 1px solid var(--hairline-color);
  border-radius: 999px;
  background: var(--admin-card-bg, var(--body-bg));
}

.billing-toggle button {
  border: none;
  background: var(--admin-card-bg, var(--body-bg));
  color: var(--body-fg);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.billing-toggle button:hover {
  background: var(--hairline-color);
}

.billing-toggle button.billing-toggle--active,
.billing-toggle button[aria-pressed='true'] {
  background: var(--admin-submit-primary-bg);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(42, 61, 42, 0.22);
}

.billing-toggle button:focus-visible {
  outline: 2px solid var(--admin-header-active-color);
  outline-offset: 2px;
}

/* Dark mode billing toggle */
html[data-theme="dark"] .billing-toggle {
  background: var(--darkened-bg);
  border-color: color-mix(in srgb, var(--hairline-color) 60%, transparent);
}

html[data-theme="dark"] .billing-toggle button.billing-toggle--active,
html[data-theme="dark"] .billing-toggle button[aria-pressed='true'] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .billing-toggle {
    background: var(--darkened-bg);
    border-color: color-mix(in srgb, var(--hairline-color) 60%, transparent);
  }

  html[data-theme="auto"] .billing-toggle button.billing-toggle--active,
  html[data-theme="auto"] .billing-toggle button[aria-pressed='true'] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}

/* Mobile billing toggle */
@media (max-width: 600px) {
  .billing-toggle {
    width: 100%;
  }

  .billing-toggle button {
    flex: 1 1 50%;
    text-align: center;
  }
}

/* Actions row: submit + dismiss buttons */
.plan-action-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.plan-action-actions .chk-btn {
  width: 175px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Form centering (billing toggle + cards) */
.plan-action-form {
  text-align: center;
}
.plan-action-form .chk-btn {
  width: 240px;
  margin: 0 auto;
  padding: 0 32px;
  white-space: nowrap;
}

/* Dark mode overrides for commit cards */
html[data-theme="dark"] .plan-action-card--curator:has(.plan-action-card__radio:checked) {
  border-color: #7cc465;
  box-shadow: 0 0 0 1px #7cc465, 0 0 24px rgba(124, 196, 101, 0.18);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .plan-action-card--curator:has(.plan-action-card__radio:checked) {
    border-color: #7cc465;
    box-shadow: 0 0 0 1px #7cc465, 0 0 24px rgba(124, 196, 101, 0.18);
  }
}

/* ===== Checkout Step (chk-*) ===== */
.chk-page {
  max-width: 520px;
  margin: 0 auto;
}
.chk-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #e2ddd7);
  background: var(--body-bg, #fff);
}

/* ── Header (dark green) ── */
.chk-header {
  background: var(--custodia-moss, #2a3d2a);
  padding: 28px 32px 24px;
  position: relative;
}
.chk-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 22px;
}
.chk-header__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.chk-header__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.chk-header__close .material-symbols-outlined {
  font-size: 18px;
}
.chk-branding {
  display: flex;
  align-items: center;
  gap: 9px;
}
.chk-branding .org-logo {
  --cu-brand-logo-box: 45px;
  border-radius: 6px;
}
.chk-brand-name {
  font-size: 29px;
  font-weight: 500;
  color: #F2ECD8;
  letter-spacing: 0.01em;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
}
.chk-brand-dot {
  color: #C9A84C;
}
.chk-header-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #8FA893;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.chk-header-sub {
  font-size: 0.92rem;
  color: rgba(242, 236, 216, 0.75);
  line-height: 1.6;
  margin: 10px 0 0;
}
.chk-header-sub strong {
  color: rgba(242, 236, 216, 0.92);
  font-weight: 600;
}
.chk-plan-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.chk-plan-name {
  font-weight: 600;
  color: #F2ECD8;
  font-family: 'Fraunces',serif;
  font-size: 2.6rem;
}
h2.chk-plan-name {
  margin-top: 0;
  margin-bottom: 10px;
}
.chk-plan-badge {
  background: rgba(201,168,76,0.2);
  color: #C9A84C;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 0.5px solid rgba(201,168,76,0.4);
  font-weight: 500;
}
.chk-price-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.chk-price {
  font-size: 36px;
  font-weight: 500;
  color: #C9A84C;
  font-family: var(--font-display, Georgia, serif);
}
.chk-price-per {
  font-size: 15px;
  color: #8FA893;
}

/* ── Body ── */
.chk-body {
  padding: 28px 32px 32px;
  background-color: var(--admin-card-bg, var(--body-bg, #fff));
}
.chk-form {
  text-align: left;
}

/* ── Section ── */
.chk-section {
  margin-bottom: 24px;
}
.chk-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.chk-section-icon {
  font-size: 16px;
  color: var(--text-muted, #6b6658);
}
.chk-section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-muted, #6b6658);
  text-transform: uppercase;
}
.chk-section-sub {
  font-size: 13px;
  color: var(--text-muted-tertiary, #9b9189);
  margin: 0 0 18px;
}

/* ── Field ── */
.chk-field {
  margin-bottom: 12px;
}
.chk-label {
  font-size: 13px;
  color: var(--text-muted, #6b6658);
  display: block;
  margin-bottom: 5px;
  font-weight: 400;
}
.chk-req { color: #c0392b; }
.chk-label-opt { color: var(--text-muted-tertiary, #9b9189); }
.chk-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border, #e2ddd7);
  border-radius: 8px;
  height: 40px;
  background: var(--body-bg-alt, #f8f7f7);
  overflow: hidden;
  transform: translateZ(0);
}
.chk-input-wrap--dim {
  border-color: var(--border-light, #ede8e0);
}
.chk-input-icon {
  font-size: 16px;
  color: var(--text-muted-tertiary, #9b9189);
  padding: 12px;
  border-right: 1px solid var(--border, #e2ddd7);
  flex-shrink: 0;
}
.chk-input-chevron {
  font-size: 16px;
  color: var(--text-muted-tertiary, #9b9189);
  margin-right: 10px;
  flex-shrink: 0;
  pointer-events: none;
  margin: 10px;
}
.chk-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none !important;
  background: transparent;
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  color: var(--body-fg, #1c1917);
  outline: none;
}
.chk-input::placeholder {
  color: var(--text-muted-tertiary, #9b9189);
  font-style: italic;
}
.chk-input-wrap:focus-within {
  border-color: var(--admin-header-color, #2A3B2E);
  box-shadow: 0 0 0 2px rgba(42, 59, 46, 0.12);
}

.chk-input-wrap--textarea {
  height: auto;
  min-height: 120px;
  align-items: stretch;
}

.chk-textarea {
  min-height: 120px;
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}

/* ── Field row (city + postcode) ── */
.chk-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Total section ── */
.chk-total-section {
  padding-top: 18px;
  border-top: 1px solid var(--border, #e2ddd7);
  margin-bottom: 18px;
}
.chk-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.chk-total-label {
  font-size: 13px;
  color: var(--text-muted, #6b6658);
}
.chk-total-amount {
  font-size: 13px;
  color: var(--body-fg, #1c1917);
  font-weight: 500;
}
.chk-total-divider {
  padding-top: 10px;
  border-top: 1px solid var(--border, #e2ddd7);
}
.chk-total-final {
  font-size: 18px;
  font-family: var(--font-display, Georgia, serif);
}

/* ── Button ── */
.chk-btn {
  width: 100%;
  background: var(--custodia-moss, #2a3d2a);
  color: #F2ECD8;
  border: none;
  border-radius: 10px;
  height: 48px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.01em;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.chk-btn .material-symbols-outlined {
  font-size: 20px;
  color: #C9A84C;
}
.chk-btn:hover {
  background: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 97%, white 3%);
  color: #fff;
}
.chk-btn:active {
  background: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 92%, black 8%);
}

/* ── Secure footer ── */
.chk-secure {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted-tertiary, #9b9189);
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.chk-secure .material-symbols-outlined {
  font-size: 14px;
}

/* ── Dark mode ── */
html[data-theme="dark"] .chk-page {
  background: var(--darkened-bg, #1e1e1e);
}
html[data-theme="dark"] .chk-header {
  background: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 90%, #111 10%);
}
html[data-theme="dark"] .chk-input-wrap {
  background: var(--darkened-bg-alt, #2b2b2b);
  border-color: var(--hairline-color, #3a3a3a);
}
html[data-theme="dark"] .chk-input-icon {
  border-right-color: var(--hairline-color, #3a3a3a);
}
html[data-theme="dark"] .chk-input {
  color: var(--body-fg, #eee);
}
html[data-theme="dark"] .chk-total-section {
  border-top-color: var(--hairline-color, #3a3a3a);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .chk-page {
    background: var(--darkened-bg, #1e1e1e);
  }
  html[data-theme="auto"] .chk-header {
    background: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 90%, #111 10%);
  }
  html[data-theme="auto"] .chk-input-wrap {
    background: var(--darkened-bg-alt, #2b2b2b);
    border-color: var(--hairline-color, #3a3a3a);
  }
  html[data-theme="auto"] .chk-input-icon {
    border-right-color: var(--hairline-color, #3a3a3a);
  }
  html[data-theme="auto"] .chk-input {
    color: var(--body-fg, #eee);
  }
  html[data-theme="auto"] .chk-total-section {
    border-top-color: var(--hairline-color, #3a3a3a);
  }
}

/* ===========================================
   PLAN MODAL — Glass-blur overlay
   =========================================== */

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ── Backdrop ── */
.plan-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: plan-modal-fade-in 0.25s ease-out;
}

@keyframes plan-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.plan-modal-backdrop[hidden] {
  display: none;
}

/* ── Modal container ── */
.plan-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
  width: calc(100vw - 48px);
  max-width: 939px;
  max-height: calc(100vh - 64px);
  transition: max-width 0.3s ease;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--admin-card-bg, var(--body-bg, #fff));
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.25),
    0 8px 30px rgba(0, 0, 0, 0.12);
  animation: plan-modal-slide-up 0.3s ease-out;
  overscroll-behavior: contain;
  /* Auto-hide scrollbar: invisible by default, revealed only while the
     user is actively scrolling (JS toggles .is-scrolling). The gutter is
     kept reserved so the thumb fading in/out causes no layout shift. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.plan-modal.is-scrolling {
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.plan-modal::-webkit-scrollbar {
  width: 6px;
}

.plan-modal::-webkit-scrollbar-track {
  background: transparent;
  margin: 16px 0;
}

.plan-modal::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 0.3s ease;
}

.plan-modal.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
}

.plan-modal.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.55);
}

@keyframes plan-modal-slide-up {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.plan-modal[hidden] {
  display: none;
}

/* ── Close button: raised round chip at top-right ── */
.plan-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--admin-card-bg, var(--body-bg, #fff));
  color: var(--body-quiet-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  outline: none;
}

.plan-modal__close:focus-visible {
  outline: none;
}

.plan-modal__close:hover {
  background: var(--admin-card-bg, var(--body-bg, #fff));
  color: var(--body-fg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.plan-modal__close:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.plan-modal__close .material-symbols-outlined {
  font-size: 1.3rem;
}

/* ── Loading state ── */
.plan-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  color: var(--body-quiet-color);
  gap: 16px;
}

.plan-modal__loading[hidden] {
  display: none;
}

.plan-modal__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--hairline-color, #ddd);
  border-top-color: var(--custodia-gold, #b8860b);
  border-radius: 50%;
  animation: plan-modal-spin 0.7s linear infinite;
}

.plan-modal__spinner-btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: plan-modal-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

@keyframes plan-modal-spin {
  to { transform: rotate(360deg); }
}

/* ── Error state ── */
.plan-modal__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  color: #b22222;
  gap: 12px;
  text-align: center;
}

.plan-modal__error[hidden] {
  display: none;
}

.plan-modal__error .material-symbols-outlined {
  font-size: 2.5rem;
}

/* ── Content area ── */
.plan-modal__content {
  padding: 33px 48px 21px;
}

/* Override plan-action-page when inside modal */
.plan-modal__content .plan-action-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Override chk-page when inside modal */
.plan-modal__content .chk-page {
  max-width: none;
  margin: 0;
}

/* chk-page modals: header goes edge-to-edge, no content padding, hidden scrollbar */
.plan-modal:has(.chk-page) .plan-modal__content {
  padding: 0;
}
.plan-modal:has(.chk-page) {
  max-width: 870px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.plan-modal:has(.chk-page)::-webkit-scrollbar {
  display: none;
}

/* Hide the modal's global close button when chk-page is showing
   (the chk-header provides its own close button) */
.plan-modal:has(.chk-page) > .plan-modal__close {
  display: none;
}

/* Checkout-specific: narrower modal */
.plan-modal:has(.chk-form) {
  max-width: 560px;
}

/* ── Dark mode ── */
html[data-theme="dark"] .plan-modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .plan-modal {
  background: var(--darkened-bg, #1e1e1e);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.3);
  scrollbar-color: transparent transparent;
}

html[data-theme="dark"] .plan-modal.is-scrolling {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html[data-theme="dark"] .plan-modal.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .plan-modal.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .plan-modal__close {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .plan-modal__close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .plan-modal__close:active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .plan-modal__close:focus-visible {
  outline: none;
}

html[data-theme="dark"] .plan-modal__error {
  color: #ff6b6b;
}

/* Auto dark mode via system preference */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .plan-action-card {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

  html[data-theme="auto"] .plan-action-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }

  html[data-theme="auto"] .plan-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html[data-theme="auto"] .plan-modal {
    background: var(--darkened-bg, #1e1e1e);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 24px 80px rgba(0, 0, 0, 0.5),
      0 8px 30px rgba(0, 0, 0, 0.3);
    scrollbar-color: transparent transparent;
  }

  html[data-theme="auto"] .plan-modal.is-scrolling {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  html[data-theme="auto"] .plan-modal.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }

  html[data-theme="auto"] .plan-modal.is-scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  html[data-theme="auto"] .plan-modal__close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  html[data-theme="auto"] .plan-modal__close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }

  html[data-theme="auto"] .plan-modal__close:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  html[data-theme="auto"] .plan-modal__close:focus-visible {
    outline: none;
  }

  html[data-theme="auto"] .plan-modal__error {
    color: #ff6b6b;
  }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .plan-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    border-radius: 12px;
  }

  .plan-modal__content {
    padding: 16px 20px 28px;
  }

  .plan-modal__loading,
  .plan-modal__error {
    padding: 40px 20px;
  }

  .plan-modal__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  .plan-modal__close .material-symbols-outlined {
    font-size: 1.1rem;
  }
}

/* ── Trial badge as button ── */
button.trial-badge {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

/* ── Menu item button styling ── */
button.custodia-user-menu-item {
  width: 100%;
  text-align: left;
}

/* ── Product landing page showcase iframe embed ── */
html.showcase-embed {
  --showcase-logo-size: 80px;
  --showcase-header-height: 110px;
  --cu-brand-logo-size: var(--showcase-logo-size);
  --cu-brand-wordmark-size: 2.35rem;
  --cu-brand-logo-gap: 12px;
  --custodia-header-height-base: var(--showcase-header-height);
  --custodia-header-height: var(--showcase-header-height);
}

html.showcase-embed body:not(.login) #header.custodia-admin-header {
  height: var(--showcase-header-height) !important;
  min-height: var(--showcase-header-height) !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html.showcase-embed body:not(.login) #site-branding.custodia-header-identity > a:has(.org-logo) {
  margin-bottom: 0 !important;
}

html.showcase-embed body:not(.login) #site-branding.custodia-header-identity .org-logo {
  --cu-brand-logo-box: var(--showcase-logo-size);
}

html.showcase-embed body:not(.login) #header #site-name.custodia-header-org,
html.showcase-embed body:not(.login) #header #site-name.custodia-header-org:link,
html.showcase-embed body:not(.login) #header #site-name.custodia-header-org:visited,
html.showcase-embed body:not(.login) #site-name.custodia-header-org {
  font-size: var(--cu-brand-wordmark-size) !important;
}

html.showcase-embed .custodia-activity-panel {
  display: none !important;
}

html.showcase-embed,
html.showcase-embed body {
  width: 100% !important;
  min-width: 1280px !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  scrollbar-gutter: unset !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.showcase-embed::-webkit-scrollbar,
html.showcase-embed body::-webkit-scrollbar,
html.showcase-embed *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html.showcase-embed #container {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

html.showcase-embed #header.custodia-admin-header,
html.showcase-embed #content,
html.showcase-embed .custodia-dashboard-shell,
html.showcase-embed .custodia-module-grid {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

html.showcase-embed #content {
  padding-bottom: 24px !important;
}

html.showcase-embed .custodia-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.showcase-embed .custodia-module-card.app-auth {
  grid-column: auto;
}

html.showcase-embed #changelist-filter {
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 280px !important;
  max-width: 280px !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
}

html.showcase-embed body.changelist-filter-open {
  overflow: hidden !important;
}

html.showcase-embed .changelist-filter-overlay {
  display: none !important;
}

/* Projects / tasks list slides: no filter drawer (list-only preview). */
html.showcase-embed body.change-list.model-restorationproject #changelist-filter,
html.showcase-embed body.change-list.model-restorationproject .changelist-filter-btn,
html.showcase-embed body.change-list.model-projecttask #changelist-filter,
html.showcase-embed body.change-list.model-projecttask .changelist-filter-btn {
  display: none !important;
}

html.showcase-embed body.change-list #result_list thead {
  display: table-header-group !important;
}

html.showcase-embed body.change-list #result_list,
html.showcase-embed body.change-list #result_list tbody,
html.showcase-embed body.change-list #result_list tr {
  display: table !important;
  width: 100% !important;
}

html.showcase-embed body.change-list #result_list tbody {
  display: table-row-group !important;
}

html.showcase-embed body.change-list #result_list tr {
  display: table-row !important;
}

html.showcase-embed body.change-list #result_list th,
html.showcase-embed body.change-list #result_list td {
  display: table-cell !important;
  width: auto !important;
}

html.showcase-embed .changelist-header-actions .object-tools {
  display: block !important;
}

html.showcase-embed .changelist-add-btn {
  display: none !important;
}

/* Hide nav sidebar on record detail / add forms so the form fills the frame.
   Settings and task pages keep the default sidebar. */
html.showcase-embed body.change-form.model-archiveitem #nav-sidebar,
html.showcase-embed body.change-form.model-restorationproject #nav-sidebar,
html.showcase-embed body.change-form.model-contributor #nav-sidebar {
  display: none !important;
}

html.showcase-embed body.change-form .breadcrumbs,
html.showcase-embed body.change-form .object-tools,
html.showcase-embed body.change-form .submit-row,
html.showcase-embed body.change-form .add-task-link-wrapper {
  display: none !important;
}

html.showcase-embed body.change-form #content {
  overflow: hidden auto !important;
  max-height: calc(875px - var(--showcase-header-height)) !important;
}