:root,
html[data-theme="light"] {
  --cal-navy-950: #11153f;
  --cal-navy-900: #171a55;
  --cal-navy-800: #20236b;
  --cal-cyan-500: #10cde0;
  --cal-cyan-600: #08aabd;
  --cal-violet-500: #7955df;
  --cal-violet-600: #6542c7;
  --cal-cream: #fffaf1;
  --cal-surface: #ffffff;
  --cal-ink: #20213c;
  --cal-muted: #666a82;
  --cal-border: #dfe2ed;
  --primary: var(--cal-navy-900);
  --secondary: var(--cal-violet-500);
  --accent: var(--cal-cream);
  --primary-fg: #ffffff;
  --body-fg: var(--cal-ink);
  --body-bg: #f5f6fb;
  --body-quiet-color: var(--cal-muted);
  --body-medium-color: #494c66;
  --body-loud-color: var(--cal-navy-950);
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: var(--cal-navy-950);
  --header-link-color: #ffffff;
  --breadcrumbs-fg: #e9e5ff;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: var(--cal-navy-800);
  --link-fg: #5740b5;
  --link-hover-color: var(--cal-violet-600);
  --link-selected-fg: var(--cal-navy-900);
  --hairline-color: var(--cal-border);
  --border-color: var(--cal-border);
  --darkened-bg: #f7f8fc;
  --selected-bg: #edfafd;
  --selected-row: #ecfbfd;
  --button-fg: #ffffff;
  --button-bg: var(--cal-violet-500);
  --button-hover-bg: var(--cal-violet-600);
  --default-button-bg: var(--cal-violet-500);
  --default-button-hover-bg: var(--cal-violet-600);
  --close-button-bg: #646982;
  --close-button-hover-bg: #4d526a;
  --delete-button-bg: #b54055;
  --delete-button-hover-bg: #963246;
  --object-tools-fg: #ffffff;
  --object-tools-bg: var(--cal-violet-500);
  --object-tools-hover-bg: var(--cal-violet-600);
  color-scheme: light;
}

html[data-theme="dark"] {
  --primary: #96eef5;
  --secondary: #a992f0;
  --accent: #fffaf1;
  --body-fg: #eef0ff;
  --body-bg: #10122f;
  --body-quiet-color: #b9bdd8;
  --body-medium-color: #d6d9ec;
  --body-loud-color: #ffffff;
  --darkened-bg: #171a45;
  --selected-bg: #24285f;
  --selected-row: #1b3551;
  --hairline-color: #363a70;
  --border-color: #3f447b;
  --link-fg: #98edf4;
  --link-hover-color: #ffffff;
  --link-selected-fg: #c7b9ff;
  --button-bg: #7955df;
  --button-hover-bg: #9173e7;
  --default-button-bg: #7955df;
  --default-button-hover-bg: #9173e7;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 95% 4%, rgba(121, 85, 223, .08), transparent 24rem),
    var(--body-bg);
}

#header {
  min-height: 76px;
  padding: 8px 28px;
  background:
    radial-gradient(circle at 82% 10%, rgba(121, 85, 223, .42), transparent 27%),
    linear-gradient(115deg, var(--cal-navy-950), var(--cal-navy-800));
  border-bottom: 3px solid var(--cal-cyan-500);
  box-shadow: 0 8px 24px rgba(17, 21, 63, .16);
}

#branding h1 { margin: 0; }

.cal-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff !important;
  text-decoration: none;
}

.cal-brand__logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(7, 9, 36, .28), 0 0 0 3px rgba(16, 205, 224, .2);
}

.cal-brand__copy { display: grid; line-height: 1.1; }
.cal-brand__copy strong { font-size: 1.15rem; letter-spacing: .01em; }
.cal-brand__copy small { margin-top: 5px; color: #cceff3; font-size: .78rem; font-weight: 500; }

.cal-environment {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

div.breadcrumbs {
  padding: 12px 28px;
  border: 0;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .1);
}

#content {
  padding: 30px 34px 42px;
}

#content-main {
  min-width: 0;
}

#content h1 {
  margin: 0 0 22px;
  color: var(--cal-navy-950);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 760;
  letter-spacing: -.025em;
}

html[data-theme="dark"] #content h1 { color: #fff; }

.module,
#changelist .actions,
.submit-row {
  overflow: hidden;
  border: 1px solid var(--cal-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(23, 26, 85, .08);
}

html[data-theme="dark"] .module,
html[data-theme="dark"] #changelist .actions,
html[data-theme="dark"] .submit-row {
  border-color: #363a70;
  background: #171a45;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
}

.module h2,
.module caption,
.inline-group h2 {
  background: linear-gradient(100deg, var(--cal-navy-900), var(--cal-violet-600));
  color: #fff;
  font-weight: 650;
  letter-spacing: .015em;
}

thead th { background: #eef9fb; color: var(--cal-navy-950); }
html[data-theme="dark"] thead th { background: #24285f; color: #f7f5ff; }

tbody tr { transition: background-color .16s ease; }
tbody tr:hover { background: #f7fcfd; }
html[data-theme="dark"] tbody tr:hover { background: #202457; }

td, th { padding-block: 13px; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select,
.vTextField {
  min-height: 42px;
  border-radius: 9px;
  border-color: #cfd4e3;
  padding-inline: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cal-violet-500) !important;
  box-shadow: 0 0 0 3px rgba(121, 85, 223, .15);
  outline: none;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  min-height: 38px;
  border-radius: 9px;
  font-weight: 650;
  box-shadow: 0 6px 16px rgba(101, 66, 199, .18);
}

.object-tools a:link,
.object-tools a:visited {
  background: var(--cal-violet-500);
  border-radius: 999px;
}

.object-tools a:hover { background: var(--cal-violet-600); }

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  background: linear-gradient(100deg, var(--cal-navy-900), var(--cal-violet-600));
}

#nav-sidebar .current-model { background: #e8fbfd; }
html[data-theme="dark"] #nav-sidebar .current-model { background: #24285f; }

#nav-sidebar {
  border-right: 1px solid var(--cal-border);
  background: rgba(255, 255, 255, .9);
  box-shadow: 8px 0 30px rgba(17, 21, 63, .04);
}

html[data-theme="dark"] #nav-sidebar {
  border-right-color: #363a70;
  background: #121536;
}

#nav-sidebar table { margin-bottom: 14px; }
#nav-sidebar th,
#nav-sidebar td { padding-block: 10px; }

/* Changelist and filter panel */
#changelist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 20px;
}

#changelist .changelist-form-container {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cal-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(23, 26, 85, .08);
}

html[data-theme="dark"] #changelist .changelist-form-container {
  border-color: #3f447b;
  background: #171a45;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
}

#changelist-form,
#changelist-form .results,
#changelist-form .paginator {
  background: #fff;
}

html[data-theme="dark"] #changelist-form,
html[data-theme="dark"] #changelist-form .results,
html[data-theme="dark"] #changelist-form .paginator {
  background: #171a45;
}

#changelist-filter {
  overflow: hidden;
  border: 1px solid var(--cal-border) !important;
  border-radius: 14px !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(23, 26, 85, .08);
}

#changelist-filter h2 {
  padding: 15px 18px !important;
  background: linear-gradient(100deg, var(--cal-navy-900), var(--cal-violet-600)) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  letter-spacing: .07em;
}

#changelist-filter h3 {
  margin: 0 !important;
  padding: 14px 18px 8px !important;
  color: var(--cal-navy-900) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
}

#changelist-filter ul { padding: 0 10px 12px !important; }
#changelist-filter li { margin: 2px 0 !important; }
#changelist-filter li a {
  display: block;
  padding: 7px 9px;
  border-radius: 7px;
  color: #4e526b !important;
  line-height: 1.35;
}
#changelist-filter li a:hover { background: #f1effc; color: var(--cal-violet-600) !important; }
#changelist-filter li.selected a { background: #e8fbfd; color: var(--cal-navy-900) !important; font-weight: 700; }
#changelist-filter-extra-actions { padding: 12px 18px !important; border-bottom: 1px solid var(--cal-border); }
#changelist-filter-extra-actions a { color: #555b75 !important; }

html[data-theme="dark"] #changelist-filter {
  border-color: #3f447b !important;
  background: #171a45 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
}
html[data-theme="dark"] #changelist-filter h3 { color: #f4f2ff !important; }
html[data-theme="dark"] #changelist-filter li a,
html[data-theme="dark"] #changelist-filter-extra-actions a { color: #c7cbe0 !important; }
html[data-theme="dark"] #changelist-filter li a:hover { background: #24285f; color: #fff !important; }
html[data-theme="dark"] #changelist-filter li.selected a { background: #1d4a59; color: #b6f8fd !important; }
html[data-theme="dark"] #changelist-filter-extra-actions { border-color: #3f447b; }

#changelist-search {
  margin: 0 !important;
  padding: 16px !important;
  border: 0;
  border-bottom: 1px solid var(--cal-border);
  border-radius: 0;
  background: var(--cal-surface);
  box-shadow: none;
}

#changelist-search #searchbar { min-width: min(460px, 60vw); }

html[data-theme="dark"] #changelist-search {
  border-bottom-color: #3f447b;
  background: #171a45;
}

#changelist .paginator {
  padding: 14px 16px;
  border-bottom: 0;
}

@media (max-width: 1024px) {
  #changelist { grid-template-columns: minmax(0, 1fr); }
  #changelist-filter { width: 100% !important; }
}

.login #container {
  overflow: hidden;
  border: 1px solid var(--cal-border);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(17, 21, 63, .2);
}

.login {
  background:
    radial-gradient(circle at 18% 22%, rgba(16, 205, 224, .18), transparent 22rem),
    radial-gradient(circle at 82% 76%, rgba(121, 85, 223, .2), transparent 24rem),
    #f5f6fb;
}
html[data-theme="dark"] .login { background: radial-gradient(circle at 20% 20%, #20236b, transparent 34rem), #0d102c; }
.login #header { min-height: auto; padding: 22px 26px; }
.login #content { padding: 30px 32px 34px; }
.login .form-row { padding-block: 8px; }
.login .submit-row { padding: 18px 0 0 !important; border: 0; box-shadow: none; background: transparent; }
.login .submit-row input { width: 100%; }
.login .cal-environment { display: none; }

@media (max-width: 767px) {
  #header { padding: 8px 14px; }
  .cal-brand__logo { width: 48px; height: 48px; }
  .cal-brand__copy small, .cal-environment { display: none; }
  div.breadcrumbs { padding-inline: 16px; }
  #content { padding: 24px 16px 34px; }
  #changelist-search #searchbar { min-width: 0; width: calc(100% - 74px); }
}