/*
  IAM admin chrome.

  Unfold ships a purged Tailwind bundle. Classes that appear only in our
  templates are dropped, so layout here is real CSS (not utility class names).
  Unfold components (card, button, table, label) keep their compiled classes;
  these rules fix flex stretch, hover, sidebar titles, and both themes.

  Blue #2563EB / #3B82F6 is the only accent: primary button, active nav,
  focus ring, links, and the main chart series. Surfaces stay neutral.
  Hover uses the surface token, never a colored wash.
*/

:root {
  --iam-1: 4px;
  --iam-2: 8px;
  --iam-3: 12px;
  --iam-4: 16px;
  --iam-5: 20px;
  --iam-6: 24px;
  --iam-8: 32px;
  --iam-radius: 8px;
  --iam-radius-sm: 6px;
  --iam-title-size: 1.375rem;
  --iam-section-size: 0.9375rem;
  --iam-body-size: 0.875rem;
  --iam-meta-size: 0.75rem;
  --iam-stat-size: 1.75rem;
  --iam-accent: #2563eb;
  --iam-accent-hover: #1d4ed8;
  --iam-accent-soft: #3b82f6;
  --iam-hover: #f0f0f0;
  --iam-hover-strong: #e8e8e8;
  --iam-bg: #fafafa;
  --iam-sidebar: #f5f5f5;
  --iam-card: #ffffff;
  --iam-text: #171717;
  --iam-muted: #6b6b6b;
  --iam-faint: #6b6b6b;
  --iam-title: #0a0a0a;
  --iam-input-bg: #ffffff;
  --iam-border: #e5e5e5;
  --iam-danger: #9a4034;
  --iam-danger-text: #7a2e24;
  --iam-success: #2d6a4f;
  --iam-success-text: #1b4332;
  --iam-success-bg: rgba(45, 106, 79, 0.12);
  --iam-warning: #b45309;
  --iam-warning-text: #92400e;
  --iam-warning-bg: rgba(245, 158, 11, 0.12);
  --iam-font: Inter, ui-sans-serif, system-ui, sans-serif;
}

html.dark {
  --iam-accent: #3b82f6;
  --iam-accent-hover: #60a5fa;
  --iam-accent-soft: #3b82f6;
  --iam-hover: #1f1f1f;
  --iam-hover-strong: #262626;
  --iam-bg: #0a0a0a;
  --iam-sidebar: #0f0f0f;
  --iam-card: #161616;
  --iam-text: #ededed;
  --iam-muted: #a1a1a1;
  --iam-faint: #6b6b6b;
  --iam-title: #ededed;
  --iam-input-bg: #161616;
  --iam-border: #262626;
  --iam-danger: #c45c4a;
  --iam-danger-text: #f0b4aa;
  --iam-success: #74c69d;
  --iam-success-text: #95d5b2;
  --iam-success-bg: rgba(45, 106, 79, 0.18);
  --iam-warning: #fbbf24;
  --iam-warning-text: #fcd34d;
  --iam-warning-bg: rgba(245, 158, 11, 0.16);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--iam-font) !important;
}

html,
html.light,
html:not(.dark) {
  background: var(--iam-bg);
  color: var(--iam-text);
}

/* ---- Fixed sidebar + scrolling main + sticky header ---- */

html,
body {
  height: 100%;
}

body:not(.popup):not(.iam-otp) {
  overflow: hidden;
}

body:not(.popup):not(.iam-otp) #page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

#page {
  align-items: stretch;
  min-height: 100vh;
}

body:not(.popup):not(.iam-otp) #main {
  height: 100vh;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

#page > .relative.z-60 {
  align-self: stretch;
  background: var(--iam-sidebar) !important;
  flex: 0 0 auto;
  height: 100vh;
  max-height: 100vh;
}

#nav-sidebar {
  background: var(--iam-sidebar) !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
  position: fixed !important;
  top: 0 !important;
}

#nav-sidebar-inner {
  background: var(--iam-sidebar) !important;
  display: flex;
  flex-direction: column;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden;
}

#nav-sidebar-apps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.iam-topbar {
  background: var(--iam-bg) !important;
  border-bottom: 1px solid var(--iam-border) !important;
  margin-bottom: 0 !important;
  position: sticky;
  top: 0;
  z-index: 50;
}

html.dark #page,
html.dark #main,
html.dark body,
html.dark .dark\:bg-base-900 {
  background: #0a0a0a !important;
  color: #ededed;
}

html:not(.dark) #page,
html:not(.dark) #main,
html:not(.dark) body,
html.light #page,
html.light #main,
html.light body {
  background: #fafafa !important;
  color: #171717;
}

html.dark #nav-sidebar,
html.dark #nav-sidebar-inner,
html.dark #page > .relative.z-60,
html.dark #page > .relative.z-60 > div {
  background: #0f0f0f !important;
}

html:not(.dark) #nav-sidebar,
html:not(.dark) #nav-sidebar-inner,
html:not(.dark) #page > .relative.z-60,
html:not(.dark) #page > .relative.z-60 > div {
  background: #f5f5f5 !important;
}

html.dark .dark\:bg-base-900.border,
html.dark [class*="rounded"].dark\:bg-base-900.border,
html.dark .iam-card,
html.dark .iam-stat,
html.dark .iam-rule,
html.dark .iam-condition {
  background: #161616 !important;
  border-color: var(--iam-border) !important;
}

html:not(.dark) .bg-white.border,
html:not(.dark) .bg-white {
  border-color: var(--iam-border);
}

html.dark .iam-topbar,
html.dark .iam-topbar.dark\:bg-base-900 {
  background: #0a0a0a !important;
}

html:not(.dark) .iam-topbar {
  background: #fafafa !important;
}

/* ---- Sidebar group titles / branding (neutral, always visible) ---- */

#nav-sidebar-apps > div:has(ol li) {
  display: block !important;
}

#nav-sidebar h2,
#nav-sidebar-apps h2,
#nav-sidebar .iam-nav-group {
  align-items: center !important;
  color: var(--iam-faint) !important;
  display: flex !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  gap: 0.4rem;
  letter-spacing: 0.06em;
  opacity: 1 !important;
  text-transform: uppercase;
  visibility: visible !important;
}

#nav-sidebar h2 .material-symbols-outlined,
#nav-sidebar .iam-nav-group .material-symbols-outlined {
  color: var(--iam-faint) !important;
  font-size: 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#nav-sidebar .text-important,
#nav-sidebar-inner .text-important {
  color: var(--iam-title) !important;
  opacity: 1 !important;
}

#nav-sidebar .text-subtle,
#nav-sidebar-inner .text-subtle {
  color: var(--iam-muted) !important;
}

#nav-sidebar a.active,
#nav-sidebar a.bg-base-100 {
  background-color: var(--iam-hover) !important;
  box-shadow: inset 3px 0 0 var(--iam-accent);
  color: var(--iam-title) !important;
}

#nav-sidebar a.active .material-symbols-outlined {
  color: var(--iam-accent) !important;
}

#nav-sidebar a:hover,
#nav-sidebar a:focus-visible {
  background-color: var(--iam-hover) !important;
  color: var(--iam-title) !important;
  text-decoration: none !important;
}

#nav-sidebar a:hover .material-symbols-outlined,
#nav-sidebar a:focus-visible .material-symbols-outlined {
  color: var(--iam-title) !important;
}

/* ---- Hover: surface token, never a colored wash ---- */

.hover\:bg-base-50:hover,
.hover\:bg-base-100:hover,
.hover\:bg-base-100\/80:hover,
.hover\:bg-base-200:hover,
.\*\:hover\:bg-base-100 > *:hover,
html.dark .dark\:hover\:bg-base-700:hover,
html.dark .dark\:hover\:bg-base-800:hover,
html.dark .dark\:hover\:bg-base-800\/80:hover,
html.dark .dark\:hover\:bg-white\/\[\.06\]:hover,
html.dark .hover\:bg-base-50:hover,
html.dark .hover\:bg-base-100:hover,
html.dark .hover\:bg-base-100\/80:hover {
  background-color: var(--iam-hover) !important;
}

.hover\:text-base-700:hover,
.hover\:text-base-600:hover,
.hover\:text-base-500:hover,
.hover\:text-font-important-light:hover {
  color: var(--iam-title) !important;
}

html.dark .hover\:text-base-700:hover,
html.dark .hover\:text-base-600:hover,
html.dark .dark\:hover\:text-base-200:hover,
html.dark .dark\:hover\:text-font-important-dark:hover {
  color: var(--iam-title) !important;
}

#result_list tbody:hover,
#result_list tbody:hover > tr.data-row,
#result_list tbody:hover > tr.data-row > td,
.iam-table tbody tr:hover,
.iam-table tbody tr:hover td {
  background-color: var(--iam-hover) !important;
}

#result_list tbody:hover a,
.iam-table tbody tr:hover a,
#content a:hover:not([class*="bg-primary"]):not(.iam-btn):not([class*="button"]) {
  color: var(--iam-accent);
  text-decoration: underline;
}

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

.iam-btn:hover,
.iam-page .iam-btn-group button:hover,
.iam-page .iam-btn-group a:hover,
.iam-page .iam-row > a:hover,
.iam-page .iam-heading a:hover,
.iam-pill:hover {
  background: var(--iam-hover);
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.iam-btn:focus-visible,
.iam-pill:focus-visible,
#nav-sidebar a:focus-visible {
  outline: 2px solid var(--iam-accent) !important;
  outline-offset: 2px;
}

:disabled,
[disabled],
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.45;
}

:disabled:hover,
[disabled]:hover,
[aria-disabled="true"]:hover {
  background-color: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* ---- Page chrome ---- */

.iam-page {
  display: flex;
  flex-direction: column;
  gap: var(--iam-6);
  padding: var(--iam-6) 0 var(--iam-8);
  width: 100%;
}

.iam-heading {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iam-3);
  justify-content: space-between;
}

.iam-heading-copy {
  display: flex;
  flex-direction: column;
  gap: var(--iam-1);
  min-width: 0;
}

.iam-heading-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--iam-2);
  margin-left: auto;
}

.iam-title {
  color: var(--iam-title);
  font-size: var(--iam-title-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.iam-lede,
.iam-heading-copy > .iam-muted {
  color: var(--iam-muted);
  font-size: var(--iam-body-size);
  line-height: 1.45;
  margin: 0;
}

.iam-subtitle {
  color: var(--iam-muted);
  font-size: var(--iam-section-size);
  font-weight: 500;
  margin: 0;
}

.iam-kpi {
  color: var(--iam-title);
  font-size: var(--iam-stat-size);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.iam-muted {
  color: var(--iam-muted);
  font-size: var(--iam-body-size);
  line-height: 1.4;
}

.iam-grid {
  display: grid;
  gap: var(--iam-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.iam-grid h2,
.iam-grid .text-important {
  color: var(--iam-muted) !important;
  font-size: var(--iam-meta-size) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.iam-grid [class*="border-b"] {
  border-bottom: 0 !important;
  margin-bottom: 0.35rem !important;
  padding-bottom: 0 !important;
}

.iam-split {
  align-items: start;
  display: grid;
  gap: var(--iam-4);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .iam-split {
    grid-template-columns: 1fr;
  }
}

.iam-stack {
  display: flex;
  flex-direction: column;
  gap: var(--iam-4);
}

.iam-row,
.iam-btn-group,
.iam-heading,
form.iam-row,
form.iam-btn-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iam-2);
}

.iam-row {
  width: 100%;
}

.iam-row-main {
  align-items: center;
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  gap: var(--iam-2);
  min-width: 0;
}

.iam-row-title {
  color: var(--iam-title);
  font-size: var(--iam-section-size);
  font-weight: 600;
  line-height: 1.3;
}

.iam-btn-group {
  flex: 0 0 auto;
  margin: 0;
}

.iam-row > *,
.iam-btn-group > *,
.iam-heading > *,
.iam-row-main > * {
  align-self: center;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  min-height: 0;
}

/* Unfold buttons/labels become flex items and stretch without this. */
.iam-page button,
.iam-page .iam-btn,
.iam-row button,
.iam-row a,
.iam-btn-group button,
.iam-btn-group a,
.iam-heading a,
.iam-heading button,
.iam-heading-actions a,
.iam-heading-actions button,
.iam-actions button,
.iam-actions a {
  align-items: center !important;
  align-self: center !important;
  box-sizing: border-box;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: auto !important;
  justify-content: center;
  line-height: 1.25 !important;
  max-height: none !important;
  min-height: 0 !important;
  white-space: nowrap;
}

.iam-btn,
.iam-page .iam-btn-group button,
.iam-page .iam-btn-group a,
.iam-page .iam-row > a,
.iam-page .iam-heading a,
.iam-page .iam-heading-actions a {
  background: transparent;
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius-sm);
  color: var(--iam-title);
  cursor: pointer;
  font-size: var(--iam-body-size);
  font-weight: 500;
  height: 36px;
  padding: 0 var(--iam-3);
  text-decoration: none;
}

.iam-btn--sm,
.iam-page .iam-btn-group .iam-btn--sm,
.iam-page .iam-row .iam-btn--sm {
  font-size: var(--iam-meta-size);
  height: 28px;
  padding: 0 var(--iam-2);
}

.iam-link,
.iam-btn--ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--iam-accent) !important;
  text-decoration: none;
}

.iam-link:hover,
.iam-link:focus-visible,
.iam-btn--ghost:hover {
  text-decoration: underline;
}

.iam-pill,
.iam-badge,
.iam-badge > * {
  align-items: center !important;
  align-self: center !important;
  box-sizing: border-box;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: 1.375rem !important;
  line-height: 1 !important;
  max-height: 1.375rem !important;
  min-height: 0 !important;
}

.iam-pill {
  background: transparent;
  border: 1px solid var(--iam-border);
  border-radius: 999px;
  color: var(--iam-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.iam-pill--success {
  background: var(--iam-success-bg);
  border-color: transparent;
  color: var(--iam-success-text);
}

.iam-pill--warning {
  background: var(--iam-warning-bg);
  border-color: transparent;
  color: var(--iam-warning-text);
}

.iam-pill--info,
.iam-pill--default {
  border-color: var(--iam-border);
  color: var(--iam-muted);
}

.iam-pill--danger {
  background: rgba(154, 64, 52, 0.12);
  border-color: transparent;
  color: var(--iam-danger-text);
}

.iam-card {
  background: var(--iam-card);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--iam-4);
}

.iam-card:has(> .iam-card-body--flush) {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.iam-page .bg-white,
.iam-page .dark\:bg-base-900 {
  border-color: var(--iam-border) !important;
  border-radius: var(--iam-radius);
}

.iam-stage {
  border-top: 1px solid var(--iam-border);
  display: flex;
  flex-direction: column;
  gap: var(--iam-3);
  padding-top: var(--iam-4);
}

.iam-preview {
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  color: var(--iam-text);
  padding: var(--iam-4);
  white-space: pre-wrap;
}

.iam-condition {
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
}

.iam-field {
  display: flex;
  flex-direction: column;
  gap: var(--iam-1);
}

.iam-field-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iam-2);
}

.iam-field-row > * {
  align-self: center;
  flex: 0 0 auto;
  height: auto;
}

.iam-page input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
.iam-page select,
.iam-page textarea,
.iam-field input:not([type="checkbox"]):not([type="hidden"]),
.iam-field select,
.iam-field textarea,
.iam-section input:not([type="checkbox"]):not([type="hidden"]),
.iam-section select,
.iam-section textarea,
.aligned input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
.aligned select,
.aligned textarea,
.form-row input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
.form-row select,
.form-row textarea,
.iam-rule-inline select,
.iam-rule-inline input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius-sm);
  color: var(--iam-text);
  font-size: var(--iam-body-size);
  line-height: 1.3;
  min-height: 36px;
  padding: 0.35rem 0.55rem;
}

.iam-page select,
.iam-field select,
.iam-section select,
.iam-toolbar select,
.iam-builder-add select,
.aligned select,
.form-row select,
.iam-rule-inline select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B6B6B' d='M1.2 1.2 6 6l4.8-4.8'/></svg>");
  background-position: right 0.7rem center;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.iam-page input[type="search"],
.iam-page input[type="text"],
.iam-page input[type="number"],
.iam-page input[type="email"],
.iam-page select {
  min-width: 12rem;
}

.iam-condition input,
.iam-condition select {
  min-width: 8rem;
  width: auto;
}

.iam-condition input[name^="count_"],
.iam-condition input[name^="days_"],
.iam-condition input[name^="duration_"],
.iam-condition input[name^="min_chars_"],
.iam-rule input[inputmode="numeric"],
.iam-rule input[type="number"] {
  min-width: 4.5rem !important;
  width: 5rem;
}

.iam-chart,
.iam-chart .relative,
.iam-chart canvas {
  box-sizing: border-box;
  height: 220px !important;
  max-height: 220px !important;
  position: relative;
}

.iam-chart--signup,
.iam-chart--signup .relative,
.iam-chart--signup canvas {
  height: 200px !important;
  max-height: 200px !important;
}

.iam-chart canvas {
  width: 100% !important;
}

.iam-chart-card {
  overflow: hidden;
}

.iam-chart-card--signup {
  flex: 0 0 auto;
}

.iam-table--activity {
  table-layout: fixed;
  width: 100%;
}

.iam-table--activity th:nth-child(1),
.iam-table--activity td:nth-child(1) {
  width: 8.75rem;
}

.iam-table--activity th:nth-child(2),
.iam-table--activity td:nth-child(2) {
  width: 18rem;
}

.iam-table--activity th:nth-child(3),
.iam-table--activity td:nth-child(3) {
  width: 10rem;
}

.iam-when {
  color: var(--iam-muted);
  white-space: nowrap;
}

.iam-detail {
  min-width: 0;
}

.iam-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iam-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.iam-table {
  border-collapse: collapse;
  width: 100%;
}

.iam-table th,
.iam-table td {
  border-bottom: 1px solid var(--iam-border);
  font-size: var(--iam-body-size);
  padding: var(--iam-3) var(--iam-4);
  text-align: left;
  vertical-align: middle;
}

.iam-table tbody tr:last-child td {
  border-bottom: 0;
}

.iam-table th {
  background: var(--iam-hover);
  color: var(--iam-faint);
  font-size: var(--iam-meta-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.iam-table td .iam-btn-group,
.iam-table td form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iam-1);
  justify-content: flex-end;
  margin: 0;
}

#changelist-form .flex.items-center > a,
#changelist-form .flex.items-center > button,
.submit-row button,
.submit-row a,
.object-tools a {
  align-items: center;
  align-self: center;
  height: auto;
  line-height: 1.25;
}

html.dark .aligned label,
html.dark .form-row label,
html:not(.dark) .aligned label,
html:not(.dark) .form-row label {
  color: var(--iam-muted);
}

.iam-otp {
  background: var(--iam-bg);
  color: var(--iam-text);
  font-family: var(--iam-font);
  margin: 0;
  min-height: 100vh;
}

.iam-otp main,
.iam-otp-card {
  background: var(--iam-card);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  box-sizing: border-box;
  margin: 4rem auto;
  max-width: 28rem;
  overflow: hidden;
  padding: var(--iam-6);
  width: calc(100% - 2rem);
}

.iam-otp h1 {
  color: var(--iam-title);
  font-size: var(--iam-title-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--iam-3);
}

.iam-otp p {
  color: var(--iam-muted);
  font-size: var(--iam-body-size);
  line-height: 1.45;
}

.iam-otp input {
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius-sm);
  box-sizing: border-box;
  color: var(--iam-text);
  font-size: 1.1rem;
  padding: 0.6rem;
  width: 100%;
}

.iam-otp button {
  background: var(--iam-accent);
  border: 0;
  border-radius: var(--iam-radius);
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
  margin-top: 0.8rem;
  padding: 0.6rem 1rem;
}

.iam-otp button:hover {
  background: var(--iam-accent-hover);
  color: #ffffff;
}

.iam-otp-qr-wrap {
  background: #ffffff;
  border-radius: var(--iam-radius);
  box-sizing: border-box;
  margin: var(--iam-4) auto;
  max-width: 220px;
  padding: var(--iam-2);
  width: 100%;
}

.iam-otp img,
.iam-otp-qr {
  background: #ffffff;
  box-sizing: border-box;
  display: block;
  height: auto;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

.iam-otp .error {
  color: var(--iam-danger);
}

.iam-otp code {
  display: block;
  font-size: var(--iam-meta-size);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.iam-grid--stats {
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.iam-stat {
  background: var(--iam-card);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--iam-2);
  min-height: 10rem;
  padding: var(--iam-5);
}

.iam-stat-label {
  color: var(--iam-muted);
  font-size: var(--iam-meta-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.iam-stat-value {
  color: var(--iam-title);
  font-size: var(--iam-stat-size);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.iam-stat-meta {
  display: flex;
  flex-direction: column;
  gap: var(--iam-1);
  margin-top: auto;
}

.iam-delta {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  width: fit-content;
}

.iam-delta--up {
  background: var(--iam-success-bg);
  color: var(--iam-success-text);
}

.iam-delta--down {
  background: rgba(154, 64, 52, 0.12);
  color: var(--iam-danger-text);
}

.iam-delta--flat {
  background: transparent;
  border: 1px solid var(--iam-border);
  color: var(--iam-muted);
}

.iam-card-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iam-2) var(--iam-4);
  justify-content: space-between;
  padding: 0;
  position: relative;
  z-index: 1;
}

.iam-card:has(> .iam-card-body--flush) > .iam-card-head {
  padding: 0 var(--iam-4) var(--iam-3);
}

.iam-card-title {
  color: var(--iam-title);
  font-size: var(--iam-section-size);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.iam-card-body {
  min-width: 0;
}

.iam-card-body--flush {
  margin: 0;
  width: 100%;
}

.iam-legend {
  align-items: center;
  color: var(--iam-muted);
  display: inline-flex;
  font-size: var(--iam-meta-size);
  gap: var(--iam-1);
}

.iam-legend-swatch {
  background: var(--iam-accent);
  border-radius: 2px;
  display: inline-block;
  height: 0.5rem;
  width: 0.75rem;
}

.iam-chart-card .iam-muted {
  margin: 0;
}

.iam-empty {
  color: var(--iam-muted);
  padding: var(--iam-6) var(--iam-4);
  text-align: center;
}

.iam-empty-value {
  color: var(--iam-faint);
}

.iam-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.3;
  min-width: 0;
}

.iam-user-name {
  color: var(--iam-title);
  font-weight: 500;
}

.iam-user-email {
  color: var(--iam-muted);
  font-size: 0.8rem;
}

.iam-num,
#result_list td.field-amount_display,
#result_list td.field-price_display,
#result_list td.field-final_display,
#result_list td.field-watched_display,
#result_list td.field-length,
#result_list td.field-order,
#result_list td.field-sort,
#result_list td.field-required_days,
#result_list td.field-max_uses,
#result_list td.field-max_redemptions,
#result_list td.field-rule_count,
#result_list td.field-duration_display {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.iam-table th.iam-num,
.iam-table td.iam-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#result_list tbody td,
#result_list tbody th {
  height: 3rem;
  padding: var(--iam-3) var(--iam-4);
  vertical-align: middle;
}

#result_list thead th {
  padding: var(--iam-3) var(--iam-4);
}

.iam-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iam-3);
}

.iam-toolbar .iam-field {
  margin: 0;
}

.iam-field-label {
  color: var(--iam-muted);
  font-size: var(--iam-meta-size);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.iam-field--grow {
  flex: 1 1 12rem;
  min-width: 0;
}

.iam-unit {
  color: var(--iam-muted);
  font-size: var(--iam-body-size);
  white-space: nowrap;
}

.iam-btn--primary {
  background: var(--iam-accent) !important;
  border-color: var(--iam-accent) !important;
  color: #ffffff !important;
}

.iam-btn--primary:hover {
  background: var(--iam-accent-hover) !important;
  color: #ffffff !important;
}

.iam-btn--danger {
  border-color: var(--iam-danger) !important;
  color: var(--iam-danger-text) !important;
}

.iam-builder {
  align-items: start;
  display: grid;
  gap: var(--iam-4);
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.7fr);
}

@media (max-width: 960px) {
  .iam-builder {
    grid-template-columns: 1fr;
  }
}

.iam-builder-main,
.iam-builder-aside,
.iam-rules {
  display: flex;
  flex-direction: column;
  gap: var(--iam-4);
}

.iam-preview-card {
  position: sticky;
  top: var(--iam-4);
}

.iam-rule {
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  display: flex;
  flex-direction: column;
  gap: var(--iam-3);
  padding: var(--iam-4);
}

.iam-rule-head,
.iam-builder-add {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.iam-builder-add select,
.iam-builder-add .iam-btn,
.iam-toolbar select,
.iam-toolbar .iam-btn {
  height: 36px;
  min-height: 36px;
}

.iam-icon-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--iam-radius-sm);
  color: var(--iam-muted);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.iam-icon-btn:hover,
.iam-icon-btn:focus-visible {
  background: var(--iam-hover);
  color: var(--iam-title);
}

.iam-icon-btn .material-symbols-outlined {
  font-size: 18px;
}

.iam-rule-index {
  align-items: center;
  background: var(--iam-hover);
  border-radius: 999px;
  color: var(--iam-muted);
  display: inline-flex;
  font-size: var(--iam-meta-size);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  height: 1.75rem;
  justify-content: center;
  margin-bottom: 0;
  min-width: 1.75rem;
}

.iam-rule-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.iam-rule [hidden],
.iam-rule-body [hidden] {
  display: none !important;
}

.iam-and {
  align-items: center;
  color: var(--iam-faint);
  display: flex;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 0.65rem;
  justify-content: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iam-and::before,
.iam-and::after {
  background: var(--iam-border);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.iam-rule-inline .inline-related,
.iam-rule-inline .form-group {
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius);
  margin: 0 0 var(--iam-2);
  padding: 0.85rem 1rem;
}

.iam-rule-inline .inline-related + .inline-related,
.iam-rule-inline .form-group + .form-group,
.iam-rule-inline .formset .form-group + .form-group {
  margin-top: 1.75rem;
  position: relative;
}

.iam-rule-inline .inline-related + .inline-related::before,
.iam-rule-inline .form-group + .form-group::before,
.iam-rule-inline .formset .form-group + .form-group::before {
  background: var(--iam-card);
  color: var(--iam-faint);
  content: "AND";
  font-size: 0.68rem;
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.12em;
  padding: 0 0.5rem;
  position: absolute;
  top: -1.15rem;
  transform: translateX(-50%);
}

.field-line[hidden],
.form-row[hidden],
.field-row[hidden] {
  display: none !important;
}

.iam-inline-card .inline-related,
.iam-inline-card table {
  border-radius: var(--iam-radius);
}

.readonly,
.form-row .readonly {
  background: var(--iam-input-bg);
  border: 1px solid var(--iam-border);
  border-radius: var(--iam-radius-sm);
  padding: 0.45rem 0.65rem;
}

#changelist .empty-value,
.iam-page .empty-form {
  color: var(--iam-muted);
}

html:not(.dark) .bg-green-100 {
  background: var(--iam-success-bg) !important;
  color: var(--iam-success-text) !important;
}

html:not(.dark) .bg-orange-100 {
  background: var(--iam-warning-bg) !important;
  color: var(--iam-warning-text) !important;
}

html:not(.dark) .bg-blue-100,
html:not(.dark) .bg-primary-100 {
  background: var(--iam-hover) !important;
  color: var(--iam-muted) !important;
}

html.dark .bg-green-100,
html.dark .dark\:bg-green-500\/20 {
  background: var(--iam-success-bg) !important;
  color: var(--iam-success-text) !important;
}

html.dark .bg-orange-100,
html.dark .dark\:bg-orange-500\/20 {
  background: var(--iam-warning-bg) !important;
  color: var(--iam-warning-text) !important;
}

html.dark .bg-blue-100,
html.dark .dark\:bg-blue-500\/20,
html.dark .bg-primary-100,
html.dark .dark\:bg-primary-500\/20 {
  background: var(--iam-hover) !important;
  color: var(--iam-muted) !important;
}

html .bg-red-100 {
  background: rgba(154, 64, 52, 0.12) !important;
  color: var(--iam-danger-text) !important;
}

.iam-page [class*="rounded-default"] > .grow.relative:last-child {
  padding-bottom: 0.25rem;
}

.help,
.helptext,
.form-row .help {
  color: var(--iam-muted) !important;
  font-size: 0.8rem;
  line-height: 1.4;
}

fieldset .description {
  color: var(--iam-muted);
  font-size: var(--iam-body-size);
  line-height: 1.45;
  margin: 0 0 var(--iam-3);
}

.tabular .form-row td,
.tabular .form-row th {
  padding: 0.55rem 0.65rem;
  vertical-align: middle;
}

#changelist #result_list tbody tr:last-child td {
  border-bottom: 0;
}

#result_list thead th,
#result_list thead th a,
#result_list thead th span {
  color: var(--iam-faint) !important;
}

form .inline-group,
.iam-rule-inline,
.iam-rule-inline .formset {
  padding-bottom: 2.5rem;
}

#submit-row {
  background: var(--iam-bg);
  bottom: auto !important;
  position: relative !important;
}

.field-order,
.field-order.hidden,
[class*="field-order"].hidden {
  display: none !important;
}

input[name$="-order"][type="hidden"] {
  display: none;
}

.iam-num-input,
.field-days input,
.field-count input,
.field-duration input,
.field-min_chars input,
.iam-rule input[type="number"],
.iam-condition input[type="number"] {
  max-width: 6rem !important;
  min-width: 4.5rem !important;
  width: 5.5rem !important;
}

#result_list [class*="rounded-full"]:not([type="checkbox"]),
#content [class*="rounded-full"][class*="bg-white"]:not([type="checkbox"]),
#content [class*="rounded-full"][class*="bg-base"]:not([type="checkbox"]) {
  background: var(--iam-hover) !important;
  border-color: var(--iam-border) !important;
  color: var(--iam-text) !important;
}

/*
  Unfold boolean switch (Required, Active, Published).
  Off = grey track. On = blue track. The generic rounded-full
  rule above used to paint both states the same hover grey.
*/
#content input[type="checkbox"][class*="rounded-full"],
.aligned input[type="checkbox"][class*="rounded-full"],
.form-row input[type="checkbox"][class*="rounded-full"],
.iam-rule-inline input[type="checkbox"][class*="rounded-full"] {
  appearance: none;
  -webkit-appearance: none;
  background: #c4c4c4 !important;
  border: 1px solid #a3a3a3 !important;
}

html.dark #content input[type="checkbox"][class*="rounded-full"],
html.dark .aligned input[type="checkbox"][class*="rounded-full"],
html.dark .form-row input[type="checkbox"][class*="rounded-full"],
html.dark .iam-rule-inline input[type="checkbox"][class*="rounded-full"] {
  background: #525252 !important;
  border-color: #6b6b6b !important;
}

#content input[type="checkbox"][class*="rounded-full"]:checked,
.aligned input[type="checkbox"][class*="rounded-full"]:checked,
.form-row input[type="checkbox"][class*="rounded-full"]:checked,
.iam-rule-inline input[type="checkbox"][class*="rounded-full"]:checked {
  background: var(--iam-accent) !important;
  border-color: var(--iam-accent) !important;
}

html.dark #content input[type="checkbox"][class*="rounded-full"]:checked,
html.dark .aligned input[type="checkbox"][class*="rounded-full"]:checked,
html.dark .form-row input[type="checkbox"][class*="rounded-full"]:checked,
html.dark .iam-rule-inline input[type="checkbox"][class*="rounded-full"]:checked {
  background: var(--iam-accent) !important;
  border-color: var(--iam-accent) !important;
}

select.iam-wrap-select,
.iam-field select.iam-wrap-select,
.iam-rule-inline select.iam-wrap-select,
.aligned select.iam-wrap-select {
  height: auto !important;
  line-height: 1.35;
  min-height: 2.5rem;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}

select.iam-wrap-select option {
  white-space: normal;
  word-break: break-word;
}

.iam-inline-help {
  color: var(--iam-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 0.85rem;
}

a:not([class*="bg-primary"]):not(.iam-btn--primary):not(.iam-btn) {
  color: inherit;
}

#content a:not([class*="bg-primary"]):not(.iam-btn):not([class*="button"]):not(.iam-icon-btn) {
  color: var(--iam-accent);
}

[class*="bg-primary-600"],
[class*="bg-primary-500"],
button[class*="bg-primary"],
a[class*="bg-primary"] {
  background-color: var(--iam-accent) !important;
  border-color: var(--iam-accent) !important;
  color: #ffffff !important;
}

[class*="bg-primary-600"]:hover,
[class*="bg-primary-500"]:hover,
button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover {
  background-color: var(--iam-accent-hover) !important;
}