/* Components: Midnight & Marigold. Plain CSS for Razor views and JS-rendered markup. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ib-space-2);
  height: 2.5rem;
  padding: 0 var(--ib-space-4);
  border-radius: var(--ib-radius);
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background-color var(--ib-duration-fast) var(--ib-ease),
    color var(--ib-duration-fast) var(--ib-ease),
    border-color var(--ib-duration-fast) var(--ib-ease),
    box-shadow var(--ib-duration-fast) var(--ib-ease),
    transform var(--ib-duration-fast) var(--ib-ease);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ib-focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--ib-muted) transparent var(--ib-muted) transparent;
  animation: ib-spin 0.8s linear infinite;
}

.btn--primary {
  background: var(--ib-primary);
  color: var(--ib-on-primary);
  box-shadow: 0 1px 2px rgba(26, 47, 138, 0.25);
}
.btn--primary:hover {
  background: var(--ib-primary-hover);
  color: var(--ib-on-primary);
  box-shadow: 0 4px 12px rgba(26, 47, 138, 0.25);
}

/* Marigold: the one highlighted action per view (hero, CTA band). Ink type. */
.btn--accent {
  background: var(--ib-marigold);
  color: var(--ib-on-accent);
  box-shadow: 0 1px 2px rgba(107, 74, 0, 0.25);
}
.btn--accent:hover {
  background: var(--ib-marigold-hover);
  color: var(--ib-on-accent);
  box-shadow: 0 6px 16px rgba(233, 168, 23, 0.32);
}
.btn--accent:focus-visible { box-shadow: var(--ib-shadow-accent-glow); }

.btn--secondary {
  background: var(--ib-surface);
  color: var(--ib-ink);
  border-color: var(--ib-border-strong);
  box-shadow: var(--ib-shadow-xs);
}
.btn--secondary:hover {
  background: var(--ib-surface);
  border-color: var(--ib-primary);
  color: var(--ib-primary-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--ib-ink-soft);
}
.btn--ghost:hover {
  background: var(--ib-primary-softer);
  color: var(--ib-primary-deep);
}

.btn--outline {
  background: transparent;
  border-color: var(--ib-border-strong);
  color: var(--ib-ink);
}
.btn--outline:hover {
  border-color: var(--ib-primary);
  color: var(--ib-primary);
  background: var(--ib-primary-softer);
}

.btn--destructive {
  background: var(--ib-danger);
  color: #fff;
}
.btn--destructive:hover { background: var(--ib-danger-hover); color: #fff; }

.btn--on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn--sm { height: 2rem; padding: 0 var(--ib-space-3); font-size: var(--ib-text-xs); border-radius: var(--ib-radius-sm); }
.btn--lg { height: 3rem; padding: 0 var(--ib-space-6); font-size: var(--ib-text-base); border-radius: var(--ib-radius-md); }
.btn--xl { height: 3.5rem; padding: 0 var(--ib-space-8); font-size: var(--ib-text-lg); border-radius: var(--ib-radius-md); }
.btn--icon {
  width: 2.5rem;
  padding: 0;
}
.btn--icon.btn--sm { width: 2rem; }
.btn--block { width: 100%; }

/* ---------- Badge / Pill ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.5rem;
  padding: 0 0.6rem;
  border-radius: var(--ib-radius-full);
  font-family: var(--ib-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--default { background: var(--ib-surface-sunken); color: var(--ib-ink-soft); }
.badge--primary { background: var(--ib-primary-soft); color: var(--ib-primary-deep); }
.badge--accent { background: var(--ib-marigold-soft); color: var(--ib-marigold-ink); border-color: rgba(201, 138, 18, 0.28); }
.badge--brass { background: var(--ib-brass-soft); color: #7A5200; }
.badge--midnight { background: var(--ib-midnight); color: #FFFFFF; }
.badge--success { background: var(--ib-success-soft); color: var(--ib-success); }
.badge--warning { background: var(--ib-warning-soft); color: var(--ib-warning); }
.badge--danger { background: var(--ib-danger-soft); color: var(--ib-danger); }
.badge--outline {
  background: transparent;
  border-color: var(--ib-border-strong);
  color: var(--ib-muted);
}
.badge--dot::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Cards ---------- */
.card {
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  overflow: hidden;
}
.card--raised {
  background: var(--ib-surface-raised);
  border-color: transparent;
  box-shadow: var(--ib-shadow);
}
.card--interactive {
  transition: border-color var(--ib-duration) var(--ib-ease), box-shadow var(--ib-duration) var(--ib-ease);
}
.card--interactive:hover {
  border-color: var(--ib-border-strong);
  box-shadow: var(--ib-shadow-sm);
}
.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ib-space-4);
  padding: var(--ib-space-5) var(--ib-space-6) 0;
}
.card__title {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0;
}
.card__desc {
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
  margin: var(--ib-space-1) 0 0;
}
.card__body { padding: var(--ib-space-5) var(--ib-space-6); }
.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ib-space-3);
  padding: 0 var(--ib-space-6) var(--ib-space-5);
  border-top: 1px solid transparent;
}
.card__footer--bordered {
  border-top-color: var(--ib-border);
  padding-top: var(--ib-space-4);
  margin-top: var(--ib-space-2);
}

/* Stat cards: numbers first, with a soft wash in the corner (old ImageBulkify card, cooler) */
.stat-card {
  position: relative;
  padding: var(--ib-space-5);
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  overflow: hidden;
}
.stat-card__label {
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
  font-weight: 500;
  margin-bottom: var(--ib-space-3);
}
.stat-card__value {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-3xl);
  font-weight: 700;
  letter-spacing: var(--ib-tracking-tight);
  line-height: 1;
  margin-bottom: var(--ib-space-2);
}
.stat-card__meta {
  font-size: var(--ib-text-xs);
  color: var(--ib-muted);
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
}
.stat-card__meta .up { color: var(--ib-success); font-weight: 600; }
.stat-card__meta .down { color: var(--ib-danger); font-weight: 600; }

/* ---------- Forms ---------- */
.form-group { display: flex; flex-direction: column; gap: var(--ib-space-2); margin-bottom: var(--ib-space-4); }
.reg-form-group { margin-bottom: var(--ib-space-1); }
.req {
  color: var(--ib-danger);
  font-weight: 700;
  margin-left: 0.15rem;
}
.opt {
  color: var(--ib-muted);
  font-weight: 400;
  font-size: 0.85em;
}
.field-error {
  display: block;
  min-height: 1.1em;
  margin-top: 0.25rem;
  font-size: var(--ib-text-xs);
  color: var(--ib-danger);
}
.input.is-invalid,
.textarea.is-invalid,
.select.is-invalid {
  border-color: var(--ib-danger);
  box-shadow: 0 0 0 3px rgba(194, 40, 59, 0.12);
}
.form-label {
  font-family: var(--ib-font-body);
  font-size: var(--ib-text-sm);
  font-weight: 600;
  color: var(--ib-ink);
}
.form-hint { font-size: var(--ib-text-xs); color: var(--ib-muted); }
.form-error { font-size: var(--ib-text-xs); color: var(--ib-danger); font-weight: 500; }

.input,
.select,
.textarea {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--ib-space-3);
  background: var(--ib-surface);
  border: 1px solid var(--ib-border-strong);
  border-radius: var(--ib-radius);
  font-size: var(--ib-text-sm);
  color: var(--ib-ink);
  transition: border-color var(--ib-duration-fast) var(--ib-ease), box-shadow var(--ib-duration-fast) var(--ib-ease);
}
.select {
  appearance: none;
  padding-right: 2.25rem;
  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='%235B6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
}
select.select[multiple] { background-image: none; padding-right: var(--ib-space-3); height: auto; }
.textarea,
textarea.input,
textarea.textarea {
  height: auto;
  min-height: 6rem;
  padding: var(--ib-space-3);
  resize: vertical;
  line-height: var(--ib-leading-normal);
  field-sizing: content;
}
textarea.input--sm,
textarea.textarea--sm { min-height: 4.5rem; }
textarea.input--md,
textarea.textarea--md { min-height: 8rem; }
textarea.input--lg,
textarea.textarea--lg { min-height: 18rem; }
textarea.input--xl,
textarea.textarea--xl { min-height: 24rem; }
.input::placeholder,
.textarea::placeholder { color: var(--ib-subtle); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ib-muted); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ib-primary);
  box-shadow: var(--ib-shadow-glow);
}
.input:disabled,
.select:disabled,
.textarea:disabled,
.input[readonly] {
  background: var(--ib-surface-2);
  color: var(--ib-muted);
  cursor: not-allowed;
}
.input--error,
.textarea--error { border-color: var(--ib-danger); }
.input--error:focus,
.textarea--error:focus { box-shadow: 0 0 0 3px rgba(194, 40, 59, 0.14); }
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap .input { padding-left: 2.5rem; }
.input-wrap__icon {
  position: absolute;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  color: var(--ib-muted);
  pointer-events: none;
}
.input-group {
  display: flex;
  gap: var(--ib-space-2);
}
.checkbox-row,
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ib-space-3);
  font-size: var(--ib-text-sm);
}
.checkbox-row input,
.radio-row input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--ib-primary);
}
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--ib-primary); }

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  overflow: hidden;
  position: relative;
}
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ib-space-3);
  padding: var(--ib-space-4);
  border-bottom: 1px solid var(--ib-border);
  background: var(--ib-surface);
}
/* Positioned so absolutely placed cell content (.sr-only labels) is clipped by the scroller instead of widening the page. */
.table-scroll { position: relative; overflow-x: auto; }
.table {
  width: 100%;
  min-width: 640px;
  font-size: var(--ib-text-sm);
  font-variant-numeric: tabular-nums;
}
.table th {
  text-align: left;
  font-family: var(--ib-font-body);
  font-size: var(--ib-text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ib-muted);
  padding: var(--ib-space-3) var(--ib-space-4);
  background: var(--ib-surface-2);
  border-bottom: 1px solid var(--ib-border);
  white-space: nowrap;
}
.table td {
  padding: var(--ib-space-3) var(--ib-space-4);
  border-bottom: 1px solid var(--ib-border);
  vertical-align: middle;
  color: var(--ib-ink-soft);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--ib-duration-fast) var(--ib-ease); }
.table tbody tr:hover { background: var(--ib-primary-softer); }
.table__cell-strong {
  font-weight: 600;
  color: var(--ib-ink);
}
.table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ib-space-1);
}
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ib-space-3);
  padding: var(--ib-space-3) var(--ib-space-4);
  border-top: 1px solid var(--ib-border);
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
  background: var(--ib-surface);
}

/* ---------- Alerts ---------- */
.alert {
  display: flex;
  gap: var(--ib-space-3);
  padding: var(--ib-space-4);
  border-radius: var(--ib-radius-md);
  border: 1px solid transparent;
  font-size: var(--ib-text-sm);
}
.alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }
.alert__title { font-weight: 700; margin-bottom: 0.15rem; }
.alert--info { background: var(--ib-info-soft); border-color: #CDD6F6; color: var(--ib-primary-deep); }
.alert--success { background: var(--ib-success-soft); border-color: var(--ib-success-line); color: var(--ib-success-deep); }
.alert--warning { background: var(--ib-warning-soft); border-color: var(--ib-warning-line); color: var(--ib-warning-deep); }
.alert--danger { background: var(--ib-danger-soft); border-color: var(--ib-danger-line); color: var(--ib-danger-deep); }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: var(--ib-space-16) var(--ib-space-6);
}
.empty-state__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--ib-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ib-radius-lg);
  background: var(--ib-primary-soft);
  color: var(--ib-primary);
}
.empty-state__icon svg { width: 1.75rem; height: 1.75rem; }
.empty-state__title {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-xl);
  font-weight: 700;
  margin-bottom: var(--ib-space-2);
}
.empty-state__desc {
  color: var(--ib-muted);
  max-width: 26rem;
  margin: 0 auto var(--ib-space-6);
  font-size: var(--ib-text-sm);
}

/* ---------- Progress ---------- */
.progress {
  height: 0.5rem;
  background: var(--ib-surface-sunken);
  border-radius: var(--ib-radius-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--ib-primary);
  border-radius: inherit;
  transition: width var(--ib-duration-slow) var(--ib-ease);
}
.progress__bar--accent { background: var(--ib-marigold); }
.progress__bar--success { background: var(--ib-success); }
.progress__bar--warning { background: var(--ib-marigold); }

/* ---------- Avatar ---------- */
.avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ib-radius-full);
  background: var(--ib-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ib-font-body);
  font-size: var(--ib-text-xs);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.625rem; }
.avatar--lg { width: 3rem; height: 3rem; font-size: var(--ib-text-sm); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-stack { display: flex; }
.avatar-stack .avatar {
  margin-left: -0.5rem;
  border: 2px solid var(--ib-surface);
}
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: var(--ib-space-1);
  border-bottom: 1px solid var(--ib-border);
  overflow-x: auto;
}
.tabs__btn {
  height: 2.75rem;
  padding: 0 var(--ib-space-4);
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-sm);
  font-weight: 600;
  color: var(--ib-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--ib-duration-fast) var(--ib-ease), border-color var(--ib-duration-fast) var(--ib-ease);
}
.tabs__btn:hover { color: var(--ib-ink); }
.tabs__btn.is-active {
  color: var(--ib-ink);
  border-bottom-color: var(--ib-primary);
}

/* ---------- Dialog / Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 56, 0.5);
  z-index: var(--ib-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ib-space-4);
}
.modal-backdrop.is-open { display: flex; }
.modal {
  width: 100%;
  max-width: 28rem;
  background: var(--ib-surface);
  border-radius: var(--ib-radius-xl);
  box-shadow: var(--ib-shadow-lg);
  max-height: min(90vh, 40rem);
  display: flex;
  flex-direction: column;
  animation: ib-scale-in var(--ib-duration) var(--ib-ease);
}
.modal--lg { max-width: 40rem; }
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ib-space-4);
  padding: var(--ib-space-5) var(--ib-space-6);
  border-bottom: 1px solid var(--ib-border);
}
.modal__title {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-lg);
  font-weight: 700;
  margin: 0;
}
.modal__desc {
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
  margin-top: var(--ib-space-1);
}
.modal__body {
  padding: var(--ib-space-5) var(--ib-space-6);
  overflow-y: auto;
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ib-space-2);
  padding: var(--ib-space-4) var(--ib-space-6);
  border-top: 1px solid var(--ib-border);
  background: var(--ib-surface-2);
  border-radius: 0 0 var(--ib-radius-xl) var(--ib-radius-xl);
}

/* ---------- Drawer ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 56, 0.45);
  z-index: var(--ib-z-drawer);
  display: none;
}
.drawer-backdrop.is-open { display: block; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(28rem, 100%);
  background: var(--ib-surface);
  z-index: calc(var(--ib-z-drawer) + 1);
  /* Closed drawers leave layout entirely: a translated off-screen panel widens the page on mobile browsers. */
  display: none;
  flex-direction: column;
  transform: translateX(100%);
  box-shadow: none;
  transition: transform var(--ib-duration-slow) var(--ib-ease), display var(--ib-duration-slow) allow-discrete;
}
.drawer.is-open {
  display: flex;
  transform: translateX(0);
  box-shadow: var(--ib-shadow-lg);
}
@starting-style {
  .drawer.is-open { transform: translateX(100%); }
}
.drawer--lg { width: min(36rem, 100%); }
.drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ib-space-4);
  padding: var(--ib-space-5) var(--ib-space-6);
  border-bottom: 1px solid var(--ib-border);
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ib-space-5) var(--ib-space-6);
}
.drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ib-space-2);
  padding: var(--ib-space-4) var(--ib-space-6);
  border-top: 1px solid var(--ib-border);
  background: var(--ib-surface-2);
}

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed;
  top: var(--ib-space-5);
  right: var(--ib-space-5);
  bottom: auto;
  z-index: var(--ib-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-2);
  max-width: 24rem;
  width: calc(100% - 2rem);
  pointer-events: none;
}
.toast {
  display: flex;
  gap: var(--ib-space-3);
  padding: var(--ib-space-4);
  background: var(--ib-midnight);
  color: var(--ib-on-midnight);
  border-radius: var(--ib-radius-md);
  box-shadow: var(--ib-shadow-lg);
  font-size: var(--ib-text-sm);
  animation: ib-slide-down var(--ib-duration) var(--ib-ease);
  pointer-events: auto;
}
.toast--success { background: var(--ib-success-deep); }
.toast--danger { background: var(--ib-danger-deep); }

/* ---------- Skeleton loading ---------- */
.skeleton {
  background: linear-gradient(90deg, #EDEFF5 25%, #F7F8FB 50%, #EDEFF5 75%);
  background-size: 200% 100%;
  animation: ib-shimmer 1.4s infinite linear;
  border-radius: var(--ib-radius-sm);
}
.skeleton--text { height: 0.875rem; margin-bottom: 0.5rem; }
.skeleton--title { height: 1.25rem; width: 40%; margin-bottom: 0.75rem; }
.skeleton--avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.skeleton--card { height: 8rem; }

/* ---------- Inline load-more / skeleton grid ---------- */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ib-space-3);
  flex-wrap: wrap;
  padding: var(--ib-space-4) 0 var(--ib-space-2);
}
.skeleton-card {
  pointer-events: none;
  overflow: hidden;
}
.skeleton-row td { vertical-align: middle; }
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 10rem;
  overflow: auto;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ib-border-strong);
  border-radius: var(--ib-radius-sm);
  background: var(--ib-surface);
}
.checkbox-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ib-text-sm);
  cursor: pointer;
  user-select: none;
}
.checkbox-list__item input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ib-primary);
}

/* ---------- Dropdown ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 12rem;
  background: var(--ib-surface);
  border-radius: var(--ib-radius-md);
  box-shadow: var(--ib-shadow-md);
  padding: var(--ib-space-1);
  z-index: var(--ib-z-dropdown);
  display: none;
}
.dropdown.is-open .dropdown__menu { display: block; animation: ib-scale-in var(--ib-duration-fast) var(--ib-ease); }
.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ib-radius-sm);
  font-size: var(--ib-text-sm);
  color: var(--ib-ink-soft);
  text-align: left;
  transition: background var(--ib-duration-fast) var(--ib-ease);
}
.dropdown__item:hover { background: var(--ib-primary-softer); color: var(--ib-ink); }
.dropdown__item--danger { color: var(--ib-danger); }
.dropdown__item--danger:hover { background: var(--ib-danger-soft); color: var(--ib-danger); }
.dropdown__sep {
  height: 1px;
  background: var(--ib-border);
  margin: var(--ib-space-1) 0;
}

/* ---------- Accordion (FAQ): one white card, hairline between questions ---------- */
.accordion {
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  overflow: hidden;
  background: var(--ib-surface);
}
.accordion__item + .accordion__item { border-top: 1px solid var(--ib-border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ib-space-4);
  padding: var(--ib-space-5) var(--ib-space-6);
  text-align: left;
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ib-ink);
  transition: background-color var(--ib-duration-fast) var(--ib-ease), color var(--ib-duration-fast) var(--ib-ease);
}
.accordion__trigger:hover { background: var(--ib-primary-softer); color: var(--ib-primary-deep); }
.accordion__trigger:focus-visible { outline-offset: -2px; }
.accordion__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ib-muted);
  transition: transform var(--ib-duration) var(--ib-ease);
  flex-shrink: 0;
}
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); color: var(--ib-primary); }
.accordion__panel {
  display: none;
  padding: 0 var(--ib-space-6) var(--ib-space-6);
  color: var(--ib-ink-soft);
  font-size: var(--ib-text-base);
  line-height: 1.65;
  max-width: 72ch;
}
.accordion__item.is-open .accordion__panel { display: block; }

/* ---------- Page header (app) ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ib-space-4);
  margin-bottom: var(--ib-space-6);
}
.page-header__title {
  font-size: var(--ib-text-2xl);
  font-weight: 700;
  margin: 0 0 var(--ib-space-1);
}
.page-header__desc {
  color: var(--ib-muted);
  font-size: var(--ib-text-sm);
  margin: 0;
  max-width: 40rem;
}
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ib-space-2);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ib-space-2);
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
  margin-bottom: var(--ib-space-3);
}
.breadcrumb a { color: var(--ib-muted); }
.breadcrumb a:hover { color: var(--ib-primary); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb__current { color: var(--ib-ink); font-weight: 500; }

/* ---------- Icon tile ---------- */
.icon-tile {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ib-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ib-primary-soft);
  color: var(--ib-primary);
  flex-shrink: 0;
}
.icon-tile svg { width: 1.25rem; height: 1.25rem; }
.icon-tile--accent { background: var(--ib-marigold-soft); color: #8A5A00; }
.icon-tile--brass { background: #E7F5EE; color: var(--ib-success); }
.icon-tile--ink { background: var(--ib-midnight); color: var(--ib-marigold); }

/* ---------- Billing sandbox notice (no live gateway yet) ---------- */
.billing-sandbox-notice {
  display: flex;
  gap: var(--ib-space-3);
  align-items: flex-start;
  padding: var(--ib-space-4) var(--ib-space-5);
  margin: 0 0 var(--ib-space-8);
  max-width: 52rem;
  background: var(--ib-marigold-soft);
  border: 1px solid #F1D79A;
  border-radius: var(--ib-radius-md);
  text-align: left;
}
.billing-sandbox-notice--compact {
  max-width: none;
  margin: 0 0 var(--ib-space-4);
  padding: var(--ib-space-3) var(--ib-space-4);
}
.billing-sandbox-notice__icon {
  flex-shrink: 0;
  color: #8A5A00;
  margin-top: 0.15rem;
}
.billing-sandbox-notice__title {
  display: block;
  font-size: var(--ib-text-sm);
  font-weight: 700;
  color: var(--ib-ink);
  margin-bottom: 0.25rem;
}
.billing-sandbox-notice__text {
  margin: 0;
  font-size: var(--ib-text-sm);
  color: #5C4100;
  line-height: 1.45;
}

/* ---------- Pricing page layout ---------- */
.pricing-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-16);
}
.pricing-block__head {
  text-align: left;
  margin-bottom: var(--ib-space-6);
}
.pricing-block__title {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-3xl);
  font-weight: 700;
  letter-spacing: var(--ib-tracking-tight);
  margin: 0 0 var(--ib-space-2);
}
.pricing-block__desc {
  margin: 0;
  font-size: var(--ib-text-base);
  color: var(--ib-muted);
  max-width: 60ch;
}
.pricing-plans-grid,
.pricing-packs-grid { align-items: stretch; }
.pricing-compare-card { margin: 0; }
.pricing-compare-table {
  width: 100%;
  min-width: 36rem;
}
.pricing-compare-table th,
.pricing-compare-table td {
  text-align: center;
  vertical-align: middle;
}
.pricing-compare-table th:first-child,
.pricing-compare-table td:first-child {
  text-align: left;
  font-weight: 600;
}
.pricing-pack-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--ib-space-1);
  height: 100%;
  padding: var(--ib-space-5);
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-lg);
  transition: border-color var(--ib-duration) var(--ib-ease), box-shadow var(--ib-duration) var(--ib-ease);
}
.pricing-pack-card:hover { border-color: var(--ib-border-strong); box-shadow: var(--ib-shadow-sm); }
.pricing-pack-card--featured {
  border-color: var(--ib-primary);
  box-shadow: inset 0 0 0 1px var(--ib-primary);
}
.pricing-pack-card__tokens {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-2xl);
  font-weight: 700;
  letter-spacing: var(--ib-tracking-tight);
  line-height: 1.1;
  margin-top: var(--ib-space-2);
  font-variant-numeric: tabular-nums;
}
.pricing-pack-card__label {
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
}
.pricing-pack-card__price {
  font-size: var(--ib-text-xl);
  font-weight: 700;
  margin-top: var(--ib-space-2);
  font-variant-numeric: tabular-nums;
}
.pricing-pack-card__meta {
  font-size: var(--ib-text-xs);
  color: var(--ib-muted);
  min-height: 1rem;
  margin-bottom: var(--ib-space-3);
  flex: 1;
}
.pricing-pack-card .btn {
  width: 100%;
  margin-top: auto;
}
.pricing-skeleton {
  min-height: 12rem;
  display: grid;
  place-items: center;
  color: var(--ib-muted);
  font-size: var(--ib-text-sm);
  grid-column: 1 / -1;
  border: 1px dashed var(--ib-border-strong);
  border-radius: var(--ib-radius-lg);
  background: var(--ib-surface-2);
}

/* ---------- Pricing card ---------- */
.pricing-card {
  position: relative;
  background: var(--ib-surface);
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius-xl);
  padding: var(--ib-space-8) var(--ib-space-6) var(--ib-space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  transition: border-color var(--ib-duration) var(--ib-ease), box-shadow var(--ib-duration) var(--ib-ease);
}
.pricing-card:not(.pricing-card--featured):hover { border-color: var(--ib-border-strong); box-shadow: var(--ib-shadow); }
.pricing-card--featured {
  background: var(--ib-midnight);
  border-color: var(--ib-midnight);
  color: var(--ib-on-midnight);
  box-shadow: var(--ib-shadow-lg);
}
.pricing-card--featured .pricing-card__name,
.pricing-card--featured .pricing-card__price { color: #FFFFFF; }
.pricing-card--featured .pricing-card__price span,
.pricing-card--featured .pricing-card__desc { color: var(--ib-on-midnight-muted); }
.pricing-card--featured .pricing-card__features li { color: #E4E8FA; }
.pricing-card--featured .pricing-card__features li svg,
.pricing-card--featured .pricing-card__features li i[data-lucide] { color: var(--ib-marigold); }
.pricing-card--featured .badge--primary,
.pricing-card--featured .badge--accent { background: var(--ib-marigold); color: var(--ib-ink); border-color: transparent; }
.pricing-card--featured .btn--primary { background: var(--ib-marigold); color: var(--ib-ink); box-shadow: none; }
.pricing-card--featured .btn--primary:hover { background: var(--ib-marigold-hover); color: var(--ib-ink); }
.pricing-card--featured .btn--secondary,
.pricing-card--featured .btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.pricing-card--featured .btn--secondary:hover,
.pricing-card--featured .btn--outline:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }
.pricing-card--current {
  border-color: var(--ib-success);
  box-shadow: inset 0 0 0 1px var(--ib-success);
}
.pricing-card__ribbon {
  position: absolute;
  top: var(--ib-space-5);
  right: var(--ib-space-5);
}
.pricing-card__name {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-lg);
  font-weight: 700;
  margin-bottom: var(--ib-space-4);
  padding-right: 5rem;
}
.pricing-card__price {
  font-family: var(--ib-font-display);
  font-size: var(--ib-text-5xl);
  font-weight: 700;
  letter-spacing: var(--ib-tracking-tight);
  line-height: 1;
  margin-bottom: var(--ib-space-2);
  font-variant-numeric: tabular-nums;
}
.pricing-card__price span {
  font-family: var(--ib-font-body);
  font-size: var(--ib-text-base);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ib-muted);
}
.pricing-card__desc {
  font-size: var(--ib-text-sm);
  color: var(--ib-muted);
  margin-bottom: var(--ib-space-6);
  min-height: 2.75rem;
}
.pricing-card__features {
  list-style: none;
  flex: 1;
  margin: 0 0 var(--ib-space-6);
  padding: 0;
}
.pricing-card__features li {
  display: flex;
  gap: var(--ib-space-3);
  font-size: var(--ib-text-sm);
  padding: var(--ib-space-2) 0;
  color: var(--ib-ink-soft);
}
.pricing-card__features li svg,
.pricing-card__features li i[data-lucide] {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ib-primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.pricing-card__cta { margin-top: auto; }
.pricing-card__cta .btn { width: 100%; }

.app-nav-link svg,
.app-nav-link i[data-lucide],
.mobile-tabbar a svg,
.mobile-tabbar a i[data-lucide],
.nav-toggle svg,
.nav-toggle i[data-lucide],
.icon-tile i[data-lucide],
.input-wrap__icon i[data-lucide],
.input-wrap i[data-lucide] {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.icon-tile i[data-lucide] {
  width: 1.25rem;
  height: 1.25rem;
}

.input-wrap i[data-lucide],
.input-wrap > svg,
.input-wrap__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ib-muted);
  pointer-events: none;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ib-font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.025em;
  color: var(--ib-ink);
  text-decoration: none;
}
.logo:hover { color: var(--ib-ink); }
/* One flat mark everywhere, drawn the same as wwwroot/favicon.svg (Views/Shared/_Logo.cshtml). */
.logo__mark { display: block; flex: none; width: 2.125rem; height: 2.125rem; }
.logo__tile { fill: var(--ib-primary); }
.logo__rows { fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; }
.logo__dot { fill: var(--ib-marigold); }
.logo--on-dark { color: #FFFFFF; }
.logo--on-dark:hover { color: #FFFFFF; }

/* ---------- Animations ---------- */
@keyframes ib-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ib-slide-up {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ib-slide-down {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ib-spin {
  to { transform: rotate(360deg); }
}
@keyframes ib-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes ib-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Validation summaries render nothing until there is an error. */
.validation-summary-valid { display: none !important; }
.input[type="file"] { height: auto; padding: 0.45rem; }
.input[type="file"]::file-selector-button {
  margin-right: var(--ib-space-3);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ib-border-strong);
  border-radius: var(--ib-radius-sm);
  background: var(--ib-surface-2);
  color: var(--ib-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}