/* ============================================================
   Cesivi Modern UI — Forms (NewForm / EditForm / DispForm)
   Scoped via body[data-modern-ui="true"] to avoid classic collisions.
   ============================================================ */

/* ── SPM alert banners (info / warning) inside forms ─────── */

body[data-modern-ui="true"] .spm-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

body[data-modern-ui="true"] .spm-alert-info {
  background: #cfe2ff;
  border: 1px solid #9ec5fe;
  color: #084298;
}

body[data-modern-ui="true"] .spm-alert-warning {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #664d03;
}

body[data-modern-ui="true"] .archive-banner-inline {
  font-weight: 500;
}

/* ── Page head ────────────────────────────────────────────── */

body[data-modern-ui="true"] .form-page-head {
  padding: 20px 28px 0;
}

body[data-modern-ui="true"] .form-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  margin-bottom: 10px;
}

body[data-modern-ui="true"] .form-breadcrumbs a {
  color: var(--fg-muted);
  text-decoration: none;
}

body[data-modern-ui="true"] .form-breadcrumbs a:hover {
  color: var(--fg);
  text-decoration: underline;
}

body[data-modern-ui="true"] .form-breadcrumbs .sep {
  color: var(--fg-faint);
  user-select: none;
}

body[data-modern-ui="true"] .page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

body[data-modern-ui="true"] .page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}
/* Inside a card-header the parent provides the text color (e.g. text-white on bg-primary).
   Let .page-title inherit rather than forcing var(--fg) which would be dark on a blue bg. */
body[data-modern-ui="true"] .card-header .page-title {
  color: inherit;
}

body[data-modern-ui="true"] .page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  margin-bottom: 4px;
}

body[data-modern-ui="true"] .page-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

body[data-modern-ui="true"] .page-badges .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border: 1px solid var(--border-subtle);
}

body[data-modern-ui="true"] .page-badges .tag.blue { background: oklch(0.93 0.04 235); color: oklch(0.36 0.1 235); border-color: oklch(0.86 0.06 235); }
body[data-modern-ui="true"] .page-badges .tag.green { background: var(--accent-soft); color: var(--accent-fg); border-color: var(--accent-border); }
body[data-modern-ui="true"] .page-badges .tag.amber { background: oklch(0.96 0.04 75); color: oklch(0.44 0.1 75); border-color: oklch(0.88 0.06 75); }
body[data-modern-ui="true"] .page-badges .tag.red { background: oklch(0.96 0.04 27); color: oklch(0.44 0.14 27); border-color: oklch(0.88 0.08 27); }

/* ── Split layout ─────────────────────────────────────────── */

body[data-modern-ui="true"] .split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  min-height: calc(100vh - 120px);
}

body[data-modern-ui="true"] .split > .main-col {
  overflow: auto;
  padding: 20px 28px;
}

body[data-modern-ui="true"] .split > .side-col {
  border-left: 1px solid var(--border-subtle);
  padding: 20px 18px;
  background: var(--bg-sunken);
  overflow: auto;
}

@media (max-width: 900px) {
  body[data-modern-ui="true"] .split {
    grid-template-columns: 1fr;
  }
  body[data-modern-ui="true"] .split > .side-col {
    order: 2;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }
}

/* ── Panel ────────────────────────────────────────────────── */

body[data-modern-ui="true"] .panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

body[data-modern-ui="true"] .panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
}

body[data-modern-ui="true"] .panel-head .title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
}

body[data-modern-ui="true"] .panel-head .sub {
  color: var(--fg-muted);
  font-size: var(--font-size-sm);
}

body[data-modern-ui="true"] .panel-body {
  padding: 14px 16px;
}

body[data-modern-ui="true"] .panel-body.flush {
  padding: 0;
}

/* ── Field grid ───────────────────────────────────────────── */

body[data-modern-ui="true"] .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body[data-modern-ui="true"] .field-grid .field-full {
  grid-column: 1 / -1;
}

body[data-modern-ui="true"] .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-modern-ui="true"] .field > label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--fg-muted);
}

body[data-modern-ui="true"] .field > label .req {
  color: var(--danger);
}

body[data-modern-ui="true"] .field > label .hint {
  color: var(--fg-muted);
  font-weight: 400;
  margin-left: auto;
  font-size: 11px;
}

body[data-modern-ui="true"] .field .ctl,
body[data-modern-ui="true"] .field input:not([type="checkbox"]):not([type="radio"]),
body[data-modern-ui="true"] .field select,
body[data-modern-ui="true"] .field textarea {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--fg);
  font-size: var(--font-size);
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}

body[data-modern-ui="true"] .field textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
}

body[data-modern-ui="true"] .field .ctl:focus,
body[data-modern-ui="true"] .field input:focus,
body[data-modern-ui="true"] .field select:focus,
body[data-modern-ui="true"] .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

body[data-modern-ui="true"] .field .ctl:disabled,
body[data-modern-ui="true"] .field input:disabled,
body[data-modern-ui="true"] .field select:disabled {
  background: var(--bg-sunken);
  color: var(--fg-muted);
  cursor: not-allowed;
}

body[data-modern-ui="true"] .field .help {
  color: var(--fg-muted);
  font-size: 11.5px;
  margin-top: 2px;
}

/* Validation */

body[data-modern-ui="true"] .field.invalid .ctl,
body[data-modern-ui="true"] .field.invalid input:not([type="checkbox"]):not([type="radio"]),
body[data-modern-ui="true"] .field.invalid select,
body[data-modern-ui="true"] .field.invalid textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px oklch(0.95 0.04 27);
}

body[data-modern-ui="true"] .field-error {
  color: var(--danger);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Radio-group (used by CheckIn / publishing pages) ─────── */

body[data-modern-ui="true"] .radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-modern-ui="true"] .radio-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .08s, border-color .08s;
}

body[data-modern-ui="true"] .radio-option:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}

body[data-modern-ui="true"] .radio-option:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

body[data-modern-ui="true"] .radio-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

body[data-modern-ui="true"] .radio-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size);
  color: var(--fg);
}

body[data-modern-ui="true"] .radio-option-body .help {
  color: var(--fg-muted);
  font-size: var(--font-size-sm);
  font-weight: normal;
}

/* Display-mode value */

body[data-modern-ui="true"] .field-value {
  font-size: var(--font-size);
  color: var(--fg);
  padding: 4px 0;
  word-break: break-word;
}

body[data-modern-ui="true"] .field-value.muted {
  color: var(--fg-muted);
}

/* ── Small-meta utility (for table cell counts, comments, footnotes) ── */

body[data-modern-ui="true"] .text-meta {
  color: var(--fg-muted);
  font-size: var(--font-size-sm);
}

body[data-modern-ui="true"] .text-meta-faint {
  /* PLAN-1640: --fg-faint (oklch 0.74) ≈2:1 on white — fails WCAG AA; --fg-subtle (0.55) ≈4.67:1 */
  color: var(--fg-subtle);
  font-size: var(--font-size-sm);
}

/* ── Doc-Set hero (PLAN-1351 Phase 3 — DocSetHome) ────────── */

body[data-modern-ui="true"] .docset-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

body[data-modern-ui="true"] .docset-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

body[data-modern-ui="true"] .docset-hero-info {
  flex: 1;
}

body[data-modern-ui="true"] .docset-stats {
  display: flex;
  gap: 24px;
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  margin-top: 6px;
}

body[data-modern-ui="true"] .docset-stat-value {
  font-weight: 600;
  color: var(--fg);
}

body[data-modern-ui="true"] .docset-upload-area {
  display: none;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

body[data-modern-ui="true"] .docset-upload-area.is-open {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-modern-ui="true"] .docset-upload-area form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

/* ── Field-list (PLAN-1351 Phase 3 — DocSetSettings) ──────── */

body[data-modern-ui="true"] .field-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

body[data-modern-ui="true"] .field-list li {
  padding: 6px 10px;
  font-size: var(--font-size);
  border-bottom: 1px solid var(--border-subtle);
}

body[data-modern-ui="true"] .field-list li:last-child {
  border-bottom: none;
}

body[data-modern-ui="true"] .field-list li:hover {
  background: var(--bg-hover);
}

body[data-modern-ui="true"] .field-list li label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

body[data-modern-ui="true"] .field-list li label input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

body[data-modern-ui="true"] .field-list .field-internal {
  color: var(--fg-faint);
  font-size: var(--font-size-sm);
  margin-left: auto;
}

/* ── Side rail ────────────────────────────────────────────── */

body[data-modern-ui="true"] .details-head {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--fg);
}

body[data-modern-ui="true"] .details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--font-size-sm);
}

body[data-modern-ui="true"] .details-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

body[data-modern-ui="true"] .details-row .dk {
  color: var(--fg-muted);
  flex-shrink: 0;
}

body[data-modern-ui="true"] .details-row .dv {
  text-align: right;
  word-break: break-word;
}

body[data-modern-ui="true"] .details-sep {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 14px 0;
}

/* ── Activity ─────────────────────────────────────────────── */

body[data-modern-ui="true"] .activity {
  display: flex;
  flex-direction: column;
}

body[data-modern-ui="true"] .activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}

body[data-modern-ui="true"] .activity-item:last-child {
  border-bottom: none;
}

body[data-modern-ui="true"] .activity-item .content {
  flex: 1;
  min-width: 0;
}

body[data-modern-ui="true"] .activity-item .who {
  font-weight: 500;
}

body[data-modern-ui="true"] .activity-item .time {
  color: var(--fg-subtle);
  font-size: 11px;
}

/* ── Content type selector ────────────────────────────────── */

body[data-modern-ui="true"] .ct-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
}

body[data-modern-ui="true"] .ct-selector label {
  color: var(--fg-muted);
  flex-shrink: 0;
}

body[data-modern-ui="true"] .ct-selector select {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--fg);
  font-size: var(--font-size-sm);
  font-family: inherit;
}

/* ── Action bar (Save / Cancel / Edit / Delete) ───────────── */

body[data-modern-ui="true"] .action-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-modern-ui="true"] .btn-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}

body[data-modern-ui="true"] .btn-save:hover {
  background: var(--accent-hover);
}

body[data-modern-ui="true"] .btn-cancel,
body[data-modern-ui="true"] .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-decoration: none;
}

body[data-modern-ui="true"] .btn-cancel:hover,
body[data-modern-ui="true"] .btn-back:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

body[data-modern-ui="true"] .btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-panel);
  color: var(--accent-fg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}

body[data-modern-ui="true"] .btn-edit:hover {
  background: var(--accent-soft);
}

body[data-modern-ui="true"] .btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-panel);
  color: var(--danger);
  border: 1px solid oklch(0.88 0.06 27);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  cursor: pointer;
  transition: background 0.12s;
}

body[data-modern-ui="true"] .btn-delete:hover {
  background: oklch(0.96 0.03 27);
}

body[data-modern-ui="true"] .btn-save-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  cursor: pointer;
  transition: background 0.12s;
}

body[data-modern-ui="true"] .btn-save-new:hover {
  background: var(--bg-hover);
}

/* ── Toast ────────────────────────────────────────────────── */

body[data-modern-ui="true"] .form-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  z-index: 9999;
  animation: form-toast-in 0.2s ease;
  box-shadow: 0 4px 12px oklch(0.2 0.02 240 / 0.15);
}

@keyframes form-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── General validation banner ────────────────────────────── */

body[data-modern-ui="true"] .form-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: oklch(0.96 0.03 27);
  border: 1px solid oklch(0.88 0.06 27);
  border-radius: var(--radius);
  color: oklch(0.38 0.12 27);
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
}

/* ── Inline page banner (success) — pairs with .form-error-banner (PLAN-1352 Phase 1) ── */

body[data-modern-ui="true"] .banner-success {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: oklch(0.96 0.05 145);
  border: 1px solid oklch(0.85 0.10 145);
  border-radius: var(--radius);
  color: oklch(0.38 0.12 145);
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
}
body[data-modern-ui="true"] .banner-success .banner-close,
body[data-modern-ui="true"] .form-error-banner .banner-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  color: inherit;
  opacity: 0.7;
  font-size: var(--font-size);
  line-height: 1;
}
body[data-modern-ui="true"] .banner-success .banner-close:hover,
body[data-modern-ui="true"] .form-error-banner .banner-close:hover { opacity: 1; }

/* ── Inline page banner (warning) — pairs with .form-error-banner / .banner-success (PLAN-1354 Phase 1) ── */

body[data-modern-ui="true"] .banner-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: oklch(0.96 0.07 85);
  border: 1px solid oklch(0.85 0.12 85);
  border-radius: var(--radius);
  color: oklch(0.40 0.13 85);
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
}
body[data-modern-ui="true"] .banner-warning .banner-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  color: inherit;
  opacity: 0.7;
  font-size: var(--font-size);
  line-height: 1;
}
body[data-modern-ui="true"] .banner-warning .banner-close:hover { opacity: 1; }

/* ── Editor toolbar — formatting button cluster (Wiki edit-mode, PLAN-1352 Phase 1) ── */

body[data-modern-ui="true"] .editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
body[data-modern-ui="true"] .editor-toolbar .toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--border);
}
body[data-modern-ui="true"] .editor-toolbar button.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
body[data-modern-ui="true"] .editor-toolbar button.tb-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
body[data-modern-ui="true"] .editor-toolbar button.tb-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
body[data-modern-ui="true"] .editor-toolbar .tb-spacer { flex: 1; }

/* ── Rich editor (contenteditable canvas) — Wiki edit-mode (PLAN-1352 Phase 1) ── */

body[data-modern-ui="true"] .rich-editor {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 400px;
  outline: none;
  font-size: var(--font-size);
  line-height: 1.6;
  color: var(--fg);
  transition: border-color 0.12s;
}
body[data-modern-ui="true"] .rich-editor:focus { border-color: var(--accent-border); }

/* ── Page-meta footer (modified-date + author small caption) ── */

body[data-modern-ui="true"] .page-meta-row {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
}

/* ── Inline page caption: "Site Settings > Web Part Gallery" (PLAN-1352 Phase 2) ── */

body[data-modern-ui="true"] .page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
}
body[data-modern-ui="true"] .page-breadcrumb a {
  color: var(--accent-fg);
  text-decoration: none;
}
body[data-modern-ui="true"] .page-breadcrumb a:hover { text-decoration: underline; }

/* ── Section title + description (used inside .lst-setng-page) ── */

body[data-modern-ui="true"] .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 4px;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--fg);
}
body[data-modern-ui="true"] .section-title .tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--bg-hover);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}
body[data-modern-ui="true"] .section-desc {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
}

/* ── Inline info banner (neutral) — pairs with .banner-success / .form-error-banner ── */

body[data-modern-ui="true"] .form-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: oklch(0.96 0.03 235);
  border: 1px solid oklch(0.88 0.06 235);
  border-radius: var(--radius);
  color: oklch(0.38 0.10 235);
  font-size: var(--font-size-sm);
}

/* ---------- Upload page (PLAN-1348 Phase 3) ---------- */
body[data-modern-ui="true"] .upload-page {
  max-width: 720px;
  margin: 16px auto;
  padding: 0 16px;
}
body[data-modern-ui="true"] .dropzone {
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-sunken);
  margin-bottom: 16px;
  transition: background 0.2s, border-color 0.2s;
}
body[data-modern-ui="true"] .dropzone:hover,
body[data-modern-ui="true"] .dropzone.drag-over,
body[data-modern-ui="true"] .dropzone:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-hover);
  outline: none;
}
body[data-modern-ui="true"] .dropzone-input {
  display: none;
}
body[data-modern-ui="true"] .dropzone-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: var(--accent);
}
body[data-modern-ui="true"] .dropzone-icon svg {
  width: 40px;
  height: 40px;
}
body[data-modern-ui="true"] .dropzone-title {
  font-size: var(--font-size);
  font-weight: 600;
  color: var(--fg);
}
body[data-modern-ui="true"] .dropzone-sub {
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  margin-top: 4px;
}
body[data-modern-ui="true"] .dropzone-selected {
  margin: 8px 0 16px;
}
body[data-modern-ui="true"] .dropzone-section-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg);
}
body[data-modern-ui="true"] .dropzone-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
body[data-modern-ui="true"] .dropzone-file-list li {
  padding: 4px 0;
  font-size: var(--font-size-sm);
  color: var(--fg);
  border-bottom: 1px solid var(--border-subtle);
}
body[data-modern-ui="true"] .dropzone-file-list li:last-child {
  border-bottom: none;
}
body[data-modern-ui="true"] .dropzone-options {
  margin: 8px 0 4px;
}
body[data-modern-ui="true"] .dropzone-checkbox-label {
  font-size: var(--font-size-sm);
  color: var(--fg);
  cursor: pointer;
}
body[data-modern-ui="true"] .dropzone-checkbox-label input {
  margin-right: 6px;
}

/* ---------- Settings page (PLAN-1348 Phase 3) ---------- */
body[data-modern-ui="true"] .settings-page {
  max-width: 1100px;
  margin: 16px auto;
  padding: 0 16px;
}
body[data-modern-ui="true"] .settings-page .panel {
  margin-top: 12px;
}

/* ---------- LstSetng family page wrapper (PLAN-1348 Phase 4) ---------- */
body[data-modern-ui="true"] .lst-setng-page {
  max-width: 760px;
  margin: 16px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-modern-ui="true"] .radio-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
body[data-modern-ui="true"] .radio-row input[type="radio"],
body[data-modern-ui="true"] .radio-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
body[data-modern-ui="true"] .ctl.indent,
body[data-modern-ui="true"] .field .ctl.indent {
  margin-left: 24px;
}
body[data-modern-ui="true"] .ctl-num {
  width: 80px !important;
  display: inline-block;
}

/* ---------- Monospace control variant (PLAN-1348 Phase 4) ---------- */
body[data-modern-ui="true"] .ctl-mono {
  font-family: var(--font-mono);
}

/* ---------- Info banner (PLAN-1348 Phase 4) ---------- */
body[data-modern-ui="true"] .info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: oklch(0.97 0.025 235);
  border: 1px solid oklch(0.88 0.05 235);
  border-radius: var(--radius);
  color: oklch(0.32 0.1 235);
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
}
body[data-modern-ui="true"] .info-banner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---------- Drag-reorder list (PLAN-1348 Phase 4, Columnorder + ListContentTypeOrder) ---------- */
body[data-modern-ui="true"] .reorder-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  max-width: 480px;
}
body[data-modern-ui="true"] .reorder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  cursor: default;
}
body[data-modern-ui="true"] .reorder-item:hover {
  background: var(--accent-soft);
}
body[data-modern-ui="true"] .reorder-item.dragging {
  opacity: 0.5;
}
body[data-modern-ui="true"] .reorder-handle {
  cursor: grab;
  color: var(--fg-faint);
  user-select: none;
}
body[data-modern-ui="true"] .reorder-label {
  flex: 1;
  font-size: var(--font-size-sm);
}
body[data-modern-ui="true"] .reorder-label a {
  text-decoration: underline;
}
body[data-modern-ui="true"] .reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body[data-modern-ui="true"] .reorder-btn {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 2px;
  line-height: 1.4;
}
body[data-modern-ui="true"] .reorder-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---------- Version-history helpers (PLAN-1348 Phase 4, Versions.cshtml) ---------- */
body[data-modern-ui="true"] .version-label {
  font-weight: 600;
}
body[data-modern-ui="true"] .version-label-major {
  color: var(--accent-fg);
}
body[data-modern-ui="true"] .version-label-minor {
  color: var(--fg-muted);
}
body[data-modern-ui="true"] .version-fieldlist {
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  max-height: 80px;
  overflow: auto;
  margin: 0;
}
body[data-modern-ui="true"] .version-fieldlist dt {
  font-weight: 600;
  float: left;
  margin-right: 4px;
}
body[data-modern-ui="true"] .version-fieldlist dd {
  margin: 0 0 2px 0;
}
body[data-modern-ui="true"] .form-error-banner-link {
  margin-left: 12px;
  font-size: var(--font-size-sm);
  color: var(--accent-fg);
}
body[data-modern-ui="true"] .dt-actions {
  display: flex;
  gap: 4px;
}
body[data-modern-ui="true"] .dt-action-form {
  display: inline-flex;
  margin: 0;
}
body[data-modern-ui="true"] tr.dt-row-current td {
  background: var(--accent-soft) !important;
  font-weight: 600;
}

/* ---------- Fldedit aliases (PLAN-1348 Phase 4) ----------
   Fldedit is the most complex LstSetng-family page (448 LOC) with 7+
   conditional type-specific blocks. Rather than rewriting all 350+
   lines of markup, we keep the .fldnew-* / .btn-primary etc. class
   names and provide canvas-token-driven implementations here. This
   gives the same visual face-lift result with much less code churn. */
body[data-modern-ui="true"] .fldnew-form-row {
  margin-bottom: 14px;
}
body[data-modern-ui="true"] .fldnew-form-row > label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
body[data-modern-ui="true"] .fldnew-form-row input[type=text],
body[data-modern-ui="true"] .fldnew-form-row select,
body[data-modern-ui="true"] .fldnew-form-row textarea {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: var(--font-size-sm);
  font-family: inherit;
  box-sizing: border-box;
  background: var(--bg-panel);
  color: var(--fg);
}
body[data-modern-ui="true"] .fldnew-form-row textarea {
  height: 80px;
  resize: vertical;
}
body[data-modern-ui="true"] .fldnew-form-row .sp-hint {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 3px;
}
body[data-modern-ui="true"] .fldnew-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
body[data-modern-ui="true"] .fldnew-checkbox-row label {
  font-size: var(--font-size-sm);
  color: var(--fg);
}
body[data-modern-ui="true"] .fldnew-type-specific {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-sunken);
}
body[data-modern-ui="true"] .fldnew-type-specific h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--fg);
}
body[data-modern-ui="true"] .fldnew-buttons {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}
body[data-modern-ui="true"] .field-type-readonly,
body[data-modern-ui="true"] .field-info-readonly {
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  padding: 5px 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-block;
}
body[data-modern-ui="true"] .field-info-readonly {
  min-width: 150px;
}
body[data-modern-ui="true"] .field-type-note {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 3px;
}
body[data-modern-ui="true"] .formula-textarea {
  font-family: var(--font-mono);
  height: 60px;
}
body[data-modern-ui="true"] .fldnew-validation-section {
  margin-top: 8px;
}
body[data-modern-ui="true"] .fldnew-validation-section summary {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  margin-bottom: 8px;
}

/* Btn-primary/secondary/danger ALIASES (only on settings pages — Fldedit, ListContentType, ListContentTypeOrder).
   Real canvas equivalents are .btn-save / .btn-cancel / .btn-delete from the
   action-bar pattern; these aliases give the same look without renaming every
   form button. Body scope is required so we don't collide with Bootstrap. */
body[data-modern-ui="true"] .lst-setng-page .btn-primary,
body[data-modern-ui="true"] .form-page-head + .lst-setng-page .btn-primary,
/* PLAN-1640: extend accent override to DispForm split container — Bootstrap #0d6efd ≈4.50:1 trips axe */
body[data-modern-ui="true"] .split .btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 20px;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
body[data-modern-ui="true"] .lst-setng-page .btn-primary:hover,
body[data-modern-ui="true"] .split .btn-primary:hover {
  background: var(--accent-hover);
}
body[data-modern-ui="true"] .lst-setng-page .btn-secondary {
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 20px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
body[data-modern-ui="true"] .lst-setng-page .btn-secondary:hover {
  background: var(--bg-hover);
}
body[data-modern-ui="true"] .lst-setng-page .btn-danger {
  background: var(--danger);
  color: oklch(0.99 0.005 27);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 20px;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
body[data-modern-ui="true"] .lst-setng-page .btn-danger:hover {
  filter: brightness(0.9);
}
body[data-modern-ui="true"] .lst-setng-page .sp-error-msg {
  background: oklch(0.96 0.04 27);
  border-left: 3px solid var(--danger);
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  margin-bottom: 14px;
  color: oklch(0.40 0.14 27);
}

/* ============================================================
   PLAN-1348 Phase 2: NewForm / EditForm / DispForm consolidated
   Migrated from inline <style> blocks at end of each .cshtml.
   All hardcoded colours replaced with tokens; density-aware via
   --font-size-sm; dark-mode-friendly via OKLCH accent / fg / bg.
   ============================================================ */
body[data-modern-ui="true"] .ms-formtable {
  border-collapse: collapse;
  width: 100%;
}
body[data-modern-ui="true"] .ms-formlabel {
  padding: 8px 12px 8px 0;
  vertical-align: top;
  width: 190px;
  color: var(--fg);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
body[data-modern-ui="true"] .ms-formbody {
  padding: 8px 12px;
  vertical-align: top;
  font-size: var(--font-size-sm);
  color: var(--fg);
  position: relative;
}
body[data-modern-ui="true"] .ms-h3.ms-standardheader {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--fg);
}
body[data-modern-ui="true"] .ms-accentText {
  color: var(--danger);
  font-weight: 700;
}
body[data-modern-ui="true"] .ms-metadata {
  font-size: 11px;
  color: var(--fg-muted);
}
body[data-modern-ui="true"] .ms-formvalidation { margin-top: 4px; }
body[data-modern-ui="true"] .ms-error {
  color: var(--danger);
  font-size: var(--font-size-sm);
}
body[data-modern-ui="true"] .ms-formerror-row {
  background-color: oklch(0.97 0.025 27);
}
body[data-modern-ui="true"] .ms-formtable tr {
  border-bottom: 1px solid var(--border-subtle);
}
body[data-modern-ui="true"] .ms-formtable tr:last-child { border-bottom: none; }

body[data-modern-ui="true"] .field-editor { position: relative; }
body[data-modern-ui="true"] .field-editor.is-invalid .form-control,
body[data-modern-ui="true"] .field-editor.is-invalid .form-select {
  border-color: var(--danger);
}

body[data-modern-ui="true"] .field-value { min-height: 1.2rem; }
body[data-modern-ui="true"] .field-value:empty::after {
  content: '-';
  color: var(--fg-faint);
}

body[data-modern-ui="true"] button[type="submit"]:disabled { cursor: not-allowed; }

/* Attachment list (Phase 67/70) */
body[data-modern-ui="true"] .sp-att-list { display: flex; flex-direction: column; gap: 2px; }
body[data-modern-ui="true"] .sp-att-item {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--font-size-sm); padding: 2px 0;
}
body[data-modern-ui="true"] .sp-att-icon { color: var(--fg-muted); flex-shrink: 0; }
body[data-modern-ui="true"] .sp-att-link { color: var(--accent-fg); flex-shrink: 0; }
body[data-modern-ui="true"] .sp-att-size { color: var(--fg-faint); font-size: var(--font-size-sm); flex-shrink: 0; }
body[data-modern-ui="true"] .sp-att-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--fg-faint); font-size: 16px; line-height: 1;
  padding: 0 2px; flex-shrink: 0; display: flex; align-items: center;
}
body[data-modern-ui="true"] .sp-att-del-btn:hover { color: var(--danger); }
body[data-modern-ui="true"] .sp-att-upload-label { cursor: pointer; font-size: var(--font-size-sm); }
body[data-modern-ui="true"] .sp-att-file-hidden { display: none; }
body[data-modern-ui="true"] .sp-att-status-text { font-size: var(--font-size-sm); }

/* Phase 73 client-side validation */
body[data-modern-ui="true"] .sp-field-invalid {
  border: 2px solid var(--danger) !important;
  border-radius: var(--radius-sm);
  padding: 2px;
  background-color: oklch(0.97 0.03 27);
}
body[data-modern-ui="true"] .sp-client-error .ms-error {
  color: var(--danger); font-size: var(--font-size-sm);
  display: block; margin-top: 2px;
}

/* Phase 81 draft-restore banner */
body[data-modern-ui="true"] .sp-draft-restore-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; margin-bottom: 1rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-fg);
}
body[data-modern-ui="true"] .sp-draft-restore-banner .btn { flex-shrink: 0; }

/* Phase 83 unsaved-changes indicator */
body[data-modern-ui="true"] .sp-unsaved-indicator {
  display: none; margin-left: 12px;
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--warn); vertical-align: middle;
}

/* Phase 108 textarea autogrow */
body[data-modern-ui="true"] textarea.form-control:not(.rich-text-editor) {
  overflow-y: hidden; resize: vertical;
}

/* Phase 114 character counter */
body[data-modern-ui="true"] .sp-char-count {
  display: block; font-size: 0.72em; margin-top: 2px;
  color: var(--fg-muted); transition: color 0.2s;
}
body[data-modern-ui="true"] .sp-char-count.sp-char-warn   { color: var(--warn) !important; }
body[data-modern-ui="true"] .sp-char-count.sp-char-danger { color: var(--danger) !important; }

/* DispForm Phase 90 hide empty rows */
body[data-modern-ui="true"] .ms-formtable tr.sp-row-empty-hidden { display: none; }
body[data-modern-ui="true"] #sp-hide-empty-btn.active { background-color: rgba(255, 255, 255, 0.25); }

/* DispForm Phase 96 copy-on-hover */
body[data-modern-ui="true"] .sp-field-copy-btn {
  position: absolute; top: 4px; right: 4px;
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--fg-faint); font-size: var(--font-size-sm); opacity: 0;
  transition: opacity 0.15s; border-radius: var(--radius-sm); line-height: 1;
}
body[data-modern-ui="true"] .ms-formbody:hover .sp-field-copy-btn { opacity: 1; }
body[data-modern-ui="true"] .sp-field-copy-btn:hover {
  color: var(--accent); background: var(--accent-soft);
}
body[data-modern-ui="true"] .sp-field-copy-tooltip {
  position: absolute; top: 4px; right: 30px;
  background: var(--fg); color: var(--bg);
  font-size: 11px; padding: 2px 6px; border-radius: var(--radius-sm);
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
  white-space: nowrap;
}
body[data-modern-ui="true"] .sp-field-copy-tooltip.sp-visible { opacity: 1; }

/* DispForm Phase 105 item position */
body[data-modern-ui="true"] .ms-item-position {
  font-size: var(--font-size-sm); color: var(--fg-muted);
  white-space: nowrap; user-select: none; padding: 0 4px; align-self: center;
}
/* PLAN-1640: opacity: 0.65 removed — effective contrast fell below 4.5:1; inherits --fg-muted which passes AA */

/* DispForm Phase 98 print header */
body[data-modern-ui="true"] .sp-print-header { display: none; }

/* DispForm PLAN-520 reputation bar */
body[data-modern-ui="true"] .sp-reputation-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
}
body[data-modern-ui="true"] .sp-like-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 4px 12px;
  font-size: var(--font-size-sm); color: var(--fg);
  cursor: pointer; transition: all 0.15s ease;
}
body[data-modern-ui="true"] .sp-like-btn:hover {
  background: var(--bg-hover); border-color: var(--border-strong);
}
body[data-modern-ui="true"] .sp-like-btn.sp-liked {
  background: oklch(0.96 0.04 27);
  border-color: var(--danger);
  color: var(--danger);
}
body[data-modern-ui="true"] .sp-like-btn.sp-liked:hover {
  background: oklch(0.92 0.08 27);
}
body[data-modern-ui="true"] .sp-like-icon { font-size: 16px; line-height: 1; }
body[data-modern-ui="true"] .sp-like-label { font-size: var(--font-size-sm); }
body[data-modern-ui="true"] .sp-like-count { font-size: var(--font-size-sm); color: var(--fg-muted); }
body[data-modern-ui="true"] .sp-like-count:empty { display: none; }

/* DispForm Phase 98 print media (chrome hiding + page-break control) */
@media print {
  body[data-modern-ui="true"] .ms-navbar,
  body[data-modern-ui="true"] .ms-ribbon,
  body[data-modern-ui="true"] nav,
  body[data-modern-ui="true"] .ms-breadcrumb,
  body[data-modern-ui="true"] .ms-quicklaunch,
  body[data-modern-ui="true"] .sp-sidebar,
  body[data-modern-ui="true"] footer,
  body[data-modern-ui="true"] .ms-command-bar,
  body[data-modern-ui="true"] .ms-list-toolbar,
  body[data-modern-ui="true"] .card-header,
  body[data-modern-ui="true"] #sp-hide-empty-btn,
  body[data-modern-ui="true"] #sp-print-btn,
  body[data-modern-ui="true"] .sp-att-upload-row,
  body[data-modern-ui="true"] .sp-att-del-btn,
  body[data-modern-ui="true"] .sp-field-copy-btn,
  body[data-modern-ui="true"] .sp-field-copy-tooltip,
  body[data-modern-ui="true"] .sp-scroll-top-btn,
  body[data-modern-ui="true"] #sp-kb-help-modal,
  body[data-modern-ui="true"] .card-footer { display: none !important; }

  body[data-modern-ui="true"] .sp-print-header { display: block !important; margin-bottom: 12px; }
  body[data-modern-ui="true"] .sp-print-site   { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  body[data-modern-ui="true"] .sp-print-list   { font-size: 18px; font-weight: 700; margin: 2px 0 4px; }
  body[data-modern-ui="true"] .sp-print-item   { font-size: 13px; color: var(--fg); }
  body[data-modern-ui="true"] .sp-print-date   { font-size: 10px; color: var(--fg-faint); margin-top: 2px; }
  body[data-modern-ui="true"] .sp-print-divider { border: none; border-top: 1px solid var(--fg); margin: 8px 0 12px; }

  body[data-modern-ui="true"] .card { border: none !important; box-shadow: none !important; }
  body[data-modern-ui="true"] .card-body { padding: 0 !important; }
  body[data-modern-ui="true"] .container-fluid { padding: 0 !important; margin: 0 !important; }
  body[data-modern-ui="true"] .ms-formtable { width: 100% !important; }
  body[data-modern-ui="true"] .ms-formlabel { width: 160px !important; font-weight: 600; font-size: 12px; }
  body[data-modern-ui="true"] .ms-formbody  { border-bottom: 1px solid var(--border-subtle); font-size: 12px; }
  body[data-modern-ui="true"] .ms-formtable tr { page-break-inside: avoid; }
}

/* ── Auth shell + card (PLAN-1355 Phase 1 — Account cluster) ──
   Centered shell + neutral card replaces Bootstrap container/row/col + .card.shadow
   on /Account/Login, /Account/Logout, /Account/AccessDenied, /Account/External. */
body[data-modern-ui="true"] .auth-shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
}
body[data-modern-ui="true"] .auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  padding: 28px 32px;
}
body[data-modern-ui="true"] .auth-card.is-error {
  border-top: 3px solid #d13438;
}
body[data-modern-ui="true"] .auth-card-title {
  margin: 0 0 18px 0;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--fg);
}
body[data-modern-ui="true"] .auth-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
body[data-modern-ui="true"] .auth-card-actions .btn-save,
body[data-modern-ui="true"] .auth-card-actions .btn-cancel {
  justify-content: center;
  padding: 8px 14px;
  font-size: 1rem;
}
body[data-modern-ui="true"] .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
}
body[data-modern-ui="true"] .auth-divider::before,
body[data-modern-ui="true"] .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ── PLAN-1617 — Multi-provider login chip grid ───────────────
   .sp-login-chip-group  — radiogroup wrapper per protocol
   .sp-login-chip-row    — flex row of chip buttons
   .sp-login-chip        — individual chip button (submit)
   ── */

body[data-modern-ui="true"] .sp-login-chip-group {
  margin-bottom: 16px;
}
body[data-modern-ui="true"] .sp-login-chip-group-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
}
body[data-modern-ui="true"] .sp-login-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-modern-ui="true"] .sp-login-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--fg);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
  min-height: 40px;
  text-align: left;
  position: relative;
}
body[data-modern-ui="true"] .sp-login-chip:hover {
  border-color: var(--accent);
  background: var(--bg-hover, #f0f4ff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body[data-modern-ui="true"] .sp-login-chip:focus-visible {
  outline: var(--focus-ring, 2px solid #0078d4);
  outline-offset: 2px;
  border-color: var(--accent);
}
body[data-modern-ui="true"] .sp-login-chip:active {
  background: var(--bg-active);
  border-color: var(--accent);
}
body[data-modern-ui="true"] .sp-login-chip-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}
body[data-modern-ui="true"] .sp-login-chip-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #0078d4);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
body[data-modern-ui="true"] .sp-login-chip-label {
  white-space: nowrap;
}
body[data-modern-ui="true"] .sp-login-autosubmit {
  text-align: center;
  padding: 16px 0;
  color: var(--fg-muted);
}
body[data-modern-ui="true"] .sp-login-autosubmit-via {
  font-size: 0.9rem;
  color: var(--fg-muted);
}

/* Mobile: chips go full-width */
@media (max-width: 480px) {
  body[data-modern-ui="true"] .sp-login-chip {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ============================================================
   PLAN-1364 Phase 5 — Forms mobile: single-column, touch targets, safe-area, modals fullscreen
   ============================================================ */

/* ── Single-column field grid at tablet ──────────────────── */
@media (max-width: 768px) { /* token: --bp-tablet */
  body[data-modern-ui="true"] .field-grid {
    grid-template-columns: 1fr;
  }

  body[data-modern-ui="true"] .field-grid .field-full {
    grid-column: 1;
  }

  /* Form page padding reduction */
  body[data-modern-ui="true"] .form-page-head {
    padding: 12px 16px 0;
  }

  body[data-modern-ui="true"] .panel-body {
    padding: 12px 14px;
  }

  /* Touch targets: inputs + buttons on form pages */
  body[data-modern-ui="true"] .field input:not([type="checkbox"]):not([type="radio"]),
  body[data-modern-ui="true"] .field select,
  body[data-modern-ui="true"] .field .ctl {
    min-block-size: var(--touch-target-min);
    font-size: 16px; /* prevent iOS zoom on focus */
  }

  /* Form action buttons: full-width + touch-target height */
  body[data-modern-ui="true"] .form-actions {
    flex-direction: column;
    gap: 8px;
  }

  body[data-modern-ui="true"] .form-actions .btn-save,
  body[data-modern-ui="true"] .form-actions .btn-cancel {
    width: 100%;
    justify-content: center;
    min-block-size: var(--touch-target-min);
    padding: 10px 18px;
  }

  /* iOS safe-area for sticky form footers */
  body[data-modern-ui="true"] .form-footer-sticky {
    padding-bottom: max(var(--safe-area-bottom), 12px);
  }

  /* People-picker chips: larger touch targets */
  body[data-modern-ui="true"] .sp-peopleeditor .pe-chip {
    min-block-size: 36px;
    padding: 6px 10px;
  }

  /* Taxonomy/lookup select: full width */
  body[data-modern-ui="true"] .field .sp-taxonomy-select,
  body[data-modern-ui="true"] .field .sp-lookup-select {
    width: 100%;
  }
}

/* ── Bootstrap modal fullscreen at phone ─────────────────── */
@media (max-width: 480px) { /* token: --bp-phone */
  /* Fullscreen modal on phone — matches Bootstrap's .modal-fullscreen but scoped to modern UI */
  body[data-modern-ui="true"] .modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
  }

  body[data-modern-ui="true"] .modal-content {
    border-radius: 0 !important;
    border: none !important;
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
    display: flex;
    flex-direction: column;
  }

  body[data-modern-ui="true"] .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS safe-area for modal footer */
  body[data-modern-ui="true"] .modal-footer {
    padding-bottom: max(var(--safe-area-bottom), 16px);
  }

  /* iOS safe-area for modal header */
  body[data-modern-ui="true"] .modal-header {
    padding-top: max(var(--safe-area-top), 16px);
  }
}

/* ── PLAN-1618 — People-picker provider badge ────────────────
   Shown on chips when a user came from an OIDC directory provider
   (i.e. not a local SP user from UserInformationList).
   ─────────────────────────────────────────────────────────── */
.sp-picker-provider-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 3px;
  background: oklch(0.90 0.06 235);
  color: oklch(0.34 0.12 235);
  border: 1px solid oklch(0.82 0.08 235);
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}

body[data-modern-ui="true"] .sp-picker-provider-badge {
  background: oklch(0.93 0.04 235);
  color: oklch(0.32 0.10 235);
  border-color: oklch(0.86 0.06 235);
}

.sp-peopleeditor-suggestion .sp-picker-provider-badge {
  font-size: 0.60rem;
  padding: 0 4px;
  margin-left: 6px;
  align-self: center;
}