:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --ink: #172033;
  --muted: #64748b;
  --line: #d9e2ea;
  --accent: #0f766e;
  --accent-soft: #dff5ef;
  --blue: #1d4ed8;
  --blue-soft: #e0ecff;
  --warn: #b45309;
  --warn-soft: #fff7ed;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
  background: var(--bg);
  overflow-x: hidden;
}

input,
select,
button {
  font: inherit;
}

.shell {
  width: min(1420px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 16px 0 36px;
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 12px;
  align-items: stretch;
}

.brand-block,
.token-card,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.brand-block {
  min-height: 164px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: 42px;
  line-height: 1.05;
}

h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
}

h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.hero-copy {
  max-width: 70ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.token-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.token-card label,
.panel-head h2 {
  font-weight: 800;
}

.token-row,
.form-actions {
  display: flex;
  gap: 8px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

button {
  min-height: 42px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
}

button:hover {
  filter: brightness(0.96);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: none;
}

.ghost-button {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--line);
}

.token-status,
.form-status,
.meta-text {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.view-tabs {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(12px);
}

.view-tab {
  flex: 1 1 140px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}

.view-tab:hover,
.view-tab.active {
  background: var(--accent);
  color: #ffffff;
}

.layout,
.view-pane {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.view-pane {
  display: none;
  width: 100%;
}

.view-pane.active {
  display: grid;
}

.panel {
  padding: 18px;
  min-width: 0;
  max-width: 100%;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.panel-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dossier-filters input {
  width: min(320px, 34vw);
}

.dossier-filters select {
  width: min(220px, 24vw);
}

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.stat-value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 800;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.quick-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}

.quick-card span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
}

.quick-card small {
  color: var(--muted);
  line-height: 1.4;
}

.two-column-view {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 12px;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.forms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.operator-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.operator-form .form-actions,
.operator-form .form-status,
.operator-form .wide-field {
  grid-column: 1 / -1;
}

.admin-input-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.52);
}

.admin-input-dialog[hidden] {
  display: none;
}

.admin-input-panel {
  width: min(560px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.22);
}

.admin-input-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.provisioning-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commercial-offer-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: var(--muted);
  font-size: 13px;
}

.checkbox-row input {
  width: auto;
}

.provisioning-output {
  display: none;
  max-height: 360px;
  margin: 12px 0 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.5;
}

.provisioning-output.is-visible {
  display: block;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  max-height: 620px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.compact-table {
  max-height: 360px;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #ffffff;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

th,
td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  font-size: 13px;
  overflow-wrap: anywhere;
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 4px 4px 0;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.status-pill.active,
.status-pill.healthy,
.status-pill.approved,
.status-pill.confirmed,
.status-pill.installed,
.status-pill.current,
.status-pill.done,
.status-pill.observed,
.status-pill.paid,
.status-pill.priority_low,
.status-pill.renewed,
.status-pill.up_to_date {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill.grace,
.status-pill.renewal-due,
.status-pill.grace-soft,
.status-pill.incomplete,
.status-pill.action_required,
.status-pill.attention,
.status-pill.missing,
.status-pill.never_seen,
.status-pill.never_installed,
.status-pill.no_release,
.status-pill.not_observed,
.status-pill.silent,
.status-pill.runtime_not_ready,
.status-pill.priority_medium,
.status-pill.payment-proof,
.status-pill.operator-validation,
.status-pill.delivery-preparation,
.status-pill.download-access,
.status-pill.download-code-expired,
.status-pill.activation,
.status-pill.to_prepare,
.status-pill.unassigned_report,
.status-pill.under_review,
.status-pill.submitted,
.status-pill.version_drift {
  background: var(--warn-soft);
  color: var(--warn);
}

.status-pill.planned,
.status-pill.prepared,
.status-pill.lead,
.status-pill.paused,
.status-pill.opened,
.status-pill.operator_provisioned,
.status-pill.support,
.status-pill.stable {
  background: #e0ecff;
  color: var(--blue);
}

.status-pill.bug,
.status-pill.awaiting_bundle,
.status-pill.awaiting_bootstrap,
.status-pill.installed_incomplete,
.status-pill.high,
.status-pill.priority_high,
.status-pill.hotfix,
.status-pill.pilot {
  background: var(--warn-soft);
  color: var(--warn);
}

.status-pill.feature,
.status-pill.downloaded,
.status-pill.bundled,
.status-pill.bundle_ready,
.status-pill.activated,
.status-pill.low,
.status-pill.medium,
.status-pill.published,
.status-pill.sent {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill.critical,
.status-pill.priority_critical,
.status-pill.closed,
.status-pill.rejected,
.status-pill.cancelled {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-pill.suspended,
.status-pill.revoked,
.status-pill.expired,
.status-pill.past_due,
.status-pill.grace-hard,
.status-pill.retired,
.status-pill.draft,
.status-pill.error,
.status-pill.failed {
  background: var(--danger-soft);
  color: var(--danger);
}

.contract-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
  text-decoration: none;
}

.mini-button.suspend {
  background: var(--danger-soft);
  color: var(--danger);
}

.mini-button.activate {
  background: var(--accent-soft);
  color: var(--accent);
}

.audit-list {
  display: grid;
  gap: 8px;
}

.audit-entry {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.audit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.audit-title {
  font-weight: 800;
  color: var(--ink);
}

.artifact-path {
  word-break: break-all;
}

.issue-link {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.issue-link:hover {
  text-decoration: underline;
}

.dossier-table {
  min-width: 980px;
}

.fleet-table {
  min-width: 1080px;
}

.workstations-table {
  min-width: 1060px;
}

.contact-line + .contact-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.secondary-contact strong {
  color: var(--muted);
  font-weight: 700;
}

.dossier-timeline {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.timeline-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.empty-timeline {
  color: var(--muted);
  font-size: 13px;
}

.dossier-detail {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.detail-status {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dossier-action-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.action-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.action-card.priority-critical,
.action-card.priority-high {
  border-color: #fecaca;
  background: #fff7f7;
}

.action-card.priority-medium {
  border-color: #fed7aa;
  background: var(--warn-soft);
}

.action-card.priority-low {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.action-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.operations-snapshot {
  min-width: 0;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.operations-head,
.operation-signal-head,
.operations-meta {
  display: flex;
  gap: 8px;
}

.operations-head,
.operation-signal-head {
  align-items: flex-start;
  justify-content: space-between;
}

.operations-head {
  margin-bottom: 10px;
}

.operations-meta {
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.operation-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.operation-signal {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.operation-signal.blocked {
  border-color: #fecaca;
  background: #fff7f7;
}

.operation-signal.attention,
.operation-signal.missing {
  border-color: #fed7aa;
  background: var(--warn-soft);
}

.operation-signal.done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.customer-journey {
  min-width: 0;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.journey-head,
.journey-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.journey-head {
  margin-bottom: 10px;
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.journey-step {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.journey-step.current {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.journey-step.blocked {
  border-color: #fecaca;
  background: #fff7f7;
}

.journey-step.attention,
.journey-step.missing {
  border-color: #fed7aa;
  background: var(--warn-soft);
}

.journey-step.done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.journey-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.detail-grid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.wide-detail {
  grid-column: 1 / -1;
}

.detail-list {
  display: grid;
  gap: 8px;
}

.detail-list-item {
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.detail-list-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.server-cards,
.workstation-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.server-card,
.workstation-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.server-card-head,
.workstation-card-head,
.server-alerts,
.workstation-status-row,
.workstation-alerts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.server-card-head,
.workstation-card-head {
  justify-content: space-between;
}

.server-alerts,
.workstation-status-row,
.workstation-alerts {
  margin-top: 8px;
}

.empty-state {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  background: #ffffff;
}

@media (max-width: 1180px) {
  .app-header,
  .two-column-view,
  .split-grid,
  .provisioning-form {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dossier-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .shell {
    width: min(100vw - 18px, 100%);
    padding-top: 10px;
  }

  .view-tabs {
    position: static;
  }

  .stats-grid,
  .quick-grid,
  .forms-grid,
  .operator-form {
    grid-template-columns: 1fr;
  }

  .compact-table table,
  table {
    min-width: 640px;
  }

  .panel-head,
  .panel-tools,
  .detail-head,
  .token-row,
  .form-actions,
  .contract-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .dossier-action-summary,
  .journey-steps,
  .operation-signals,
  .server-cards,
  .workstation-cards {
    grid-template-columns: 1fr;
  }

  .detail-status {
    justify-items: start;
    text-align: left;
  }

  .dossier-filters input,
  .dossier-filters select {
    width: 100%;
  }

  h1 {
    font-size: 34px;
  }
}