:root {
  color: #172033;
  background: #f5f7fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #172033;
  --muted: #667085;
  --subtle: #98a2b3;
  --line: #e2e7ef;
  --line-strong: #cfd7e4;
  --panel: #ffffff;
  --canvas: #f5f7fb;
  --navy: #1b2942;
  --blue: #2e5aac;
  --blue-soft: #edf3ff;
  --green: #16835b;
  --green-soft: #eaf8f1;
  --amber: #a66b00;
  --amber-soft: #fff7e5;
  --red: #b42318;
  --red-soft: #fff1f0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #b9cdfc;
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.app-root {
  min-height: 100vh;
}

.eyebrow {
  margin: 0;
  color: #5471ab;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.mono,
code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .88em;
}

/* Authentication */

.auth-page {
  display: grid;
  gap: 1.5rem;
  width: min(100% - 2rem, 31rem);
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 7rem) 0 3rem;
}

.auth-brand h1 {
  margin: .6rem 0 .35rem;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.65rem);
  letter-spacing: -.04em;
  line-height: 1.05;
}

.auth-brand-copy {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.auth-panel {
  min-width: 0;
  min-height: 16rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.clerk-slot {
  min-height: 1rem;
}

.auth-status {
  display: grid;
  justify-items: center;
  gap: .7rem;
  padding: 3.5rem 1rem 1rem;
  color: var(--muted);
  text-align: center;
}

.auth-status p,
.auth-status h2 {
  margin: 0;
}

.auth-status h2 {
  color: var(--ink);
  font-size: 1rem;
}

.auth-status-error {
  justify-items: start;
  padding: 1.25rem 0 0;
  color: var(--red);
  text-align: left;
}

.auth-status-error h2 {
  color: var(--red);
}

.spinner {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid #d8e1f3;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.spinner-small {
  width: .85rem;
  height: .85rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#clerk-sign-in {
  width: 100%;
  min-width: 0;
}

#clerk-sign-in .cl-rootBox,
#clerk-sign-in .cl-cardBox,
#clerk-sign-in .cl-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#clerk-sign-in .cl-card,
#clerk-sign-in .cl-footer {
  padding-inline: clamp(.75rem, 4vw, 2rem);
}

#clerk-sign-in:empty {
  display: none;
}

.console-placeholder {
  display: none;
}

/* Application shell */

.app-layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  flex-direction: column;
  width: 15.5rem;
  height: 100vh;
  padding: 1.35rem 1rem 1rem;
  border-right: 1px solid var(--line);
  background: #fbfcfe;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .2rem .45rem 1.9rem;
}

.brand-mark {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: var(--navy);
  color: white;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.sidebar-brand strong,
.sidebar-brand span {
  display: block;
}

.sidebar-brand strong {
  font-size: .87rem;
  line-height: 1.25;
}

.sidebar-brand span {
  margin-top: .16rem;
  color: var(--muted);
  font-size: .68rem;
}

.primary-nav {
  display: grid;
  gap: .25rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 2.6rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #475467;
  font-size: .86rem;
  text-align: left;
}

.nav-item:hover {
  background: #f0f3f8;
  color: var(--ink);
}

.nav-item-active {
  border-color: #dbe5f8;
  background: var(--blue-soft);
  color: #214b98;
  font-weight: 700;
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.sidebar-footer {
  display: grid;
  gap: .3rem;
  margin-top: auto;
  padding: .8rem .65rem .25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .69rem;
  overflow-wrap: anywhere;
}

.sidebar-footer-label {
  color: var(--subtle);
  font-family: inherit;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.main-area {
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.35rem;
  padding: .8rem clamp(1.25rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
}

.topbar-left,
.topbar-actions,
.user-menu {
  display: flex;
  align-items: center;
}

.topbar-left {
  gap: .7rem;
}

.topbar-left strong {
  font-size: .9rem;
}

.topbar-kicker {
  margin: 0 0 .12rem;
  color: var(--subtle);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.topbar-actions {
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
}

.user-menu {
  gap: .55rem;
  min-width: 0;
}

.avatar {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #bfd0ec;
  border-radius: 50%;
  background: #eef4ff;
  color: #244b91;
  font-size: .66rem;
  font-weight: 800;
}

.user-details {
  display: grid;
  min-width: 0;
  gap: .08rem;
}

.user-details strong,
.user-details span {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-details strong {
  font-size: .76rem;
}

.user-details span {
  color: var(--muted);
  font-size: .67rem;
}

.icon-button.menu-button {
  display: none;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.icon-button:hover {
  border-color: #9eb3d5;
  color: var(--ink);
}

.page-content {
  width: min(100%, 94rem);
  min-width: 0;
  margin: 0 auto;
  padding: 2.15rem clamp(1.25rem, 3vw, 2.75rem) 4rem;
}

.page-section {
  display: grid;
  gap: 1.4rem;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.page-heading h1 {
  margin: .35rem 0 .45rem;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.page-lede {
  max-width: 48rem;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.page-heading-overview {
  align-items: flex-start;
}

.revision-chip {
  display: grid;
  gap: .15rem;
  min-width: 6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: right;
}

.revision-chip span {
  color: var(--muted);
  font-size: .64rem;
  text-transform: uppercase;
}

.revision-chip strong {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 1rem;
}

.button {
  min-height: 2.2rem;
  padding: .5rem .8rem;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.button-primary {
  border-color: #234b97;
  background: var(--navy);
  color: white;
}

.button-primary:hover {
  background: #2b4165;
}

.button-secondary {
  border-color: var(--line-strong);
  background: white;
  color: #344054;
}

.button-secondary:hover {
  border-color: #9eb3d5;
  background: #f8faff;
}

.button-quiet {
  min-height: 1.9rem;
  padding: .35rem .5rem;
  background: transparent;
  color: var(--muted);
  font-size: .7rem;
}

.button-quiet:hover {
  color: var(--ink);
}

/* Feedback and data loading */

.feedback-placeholder {
  min-height: 0;
}

.feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  margin-bottom: 1.35rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #344054;
  font-size: .82rem;
}

.feedback p {
  margin: .2rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.feedback > div,
.feedback > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-loading {
  justify-content: flex-start;
  color: var(--muted);
}

.feedback-success {
  border-color: #b9e6d2;
  background: var(--green-soft);
  color: #116b4a;
}

.feedback-warning {
  border-color: #f4d38b;
  background: var(--amber-soft);
  color: #875900;
}

.feedback-error {
  border-color: #f2b8b5;
  background: var(--red-soft);
  color: var(--red);
}

.feedback-dismiss {
  flex: 0 0 auto;
  padding: 0 .2rem;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 1.2rem;
  line-height: 1;
}

.loading-block {
  display: grid;
  justify-items: center;
  gap: .8rem;
  min-height: 15rem;
  padding-top: 5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--muted);
}

.loading-block p {
  margin: 0;
  font-size: .85rem;
}

.skeleton {
  border-radius: 5px;
  background: #e9edf4;
}

.skeleton-title {
  width: 12rem;
  height: 1.8rem;
}

.skeleton-copy {
  width: 22rem;
  max-width: 70vw;
  height: .8rem;
  margin-top: .8rem;
}

/* Overview */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.metric-card {
  display: grid;
  gap: .35rem;
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.metric-label,
.metric-detail {
  color: var(--muted);
  font-size: .72rem;
}

.metric-value {
  color: var(--ink);
  font-size: 1.45rem;
  letter-spacing: -.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.metric-detail {
  color: var(--subtle);
  font-size: .68rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
  gap: 1rem;
}

.panel,
.table-panel,
.editor-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.panel {
  padding: 1.2rem;
}

.panel-heading,
.editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.panel-heading h2,
.editor-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: -.01em;
}

.panel-heading p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .76rem;
}

.panel-count {
  color: var(--subtle);
  font-size: .7rem;
  white-space: nowrap;
}

.relationship-list {
  display: grid;
  gap: .9rem;
  margin-top: 1.25rem;
}

.relationship-row {
  display: grid;
  grid-template-columns: minmax(10rem, .8fr) 1.5rem minmax(0, 1.7fr);
  align-items: center;
  gap: .6rem;
  padding: .75rem;
  border: 1px solid #edf0f5;
  border-radius: 8px;
}

.relationship-node,
.relationship-child {
  display: grid;
  min-width: 0;
  gap: .25rem;
}

.relationship-node-profile {
  align-content: center;
}

.node-type {
  color: var(--subtle);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inline-link {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2856a2;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: left;
}

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

.relationship-arrow {
  color: #9aabc4;
  font-size: 1.1rem;
  text-align: center;
}

.relationship-children {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.relationship-child {
  padding-left: .65rem;
  border-left: 2px solid #dfe7f5;
  color: #475467;
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.detail-list {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .55rem .9rem;
  margin: 1.2rem 0;
  font-size: .76rem;
}

.detail-list dt {
  color: var(--muted);
}

.detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-list code {
  color: #2856a2;
}

.info-note,
.management-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .75rem;
  border: 1px solid #dbe5f8;
  border-radius: 7px;
  background: #f7faff;
  color: #475f89;
  font-size: .72rem;
  line-height: 1.45;
}

.info-note p,
.management-note p {
  margin: 0;
}

.info-icon {
  display: grid;
  flex: 0 0 1rem;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1;
}

/* Management tables and forms */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.search-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: min(100%, 23rem);
  min-height: 2.35rem;
  padding: 0 .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
}

.search-field:focus-within {
  border-color: #89a7dc;
  box-shadow: 0 0 0 3px #e3ecff;
}

.search-icon {
  color: var(--subtle);
  font-size: 1.1rem;
  line-height: 1;
}

.search-field input {
  width: 100%;
  min-width: 0;
  padding: .4rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: .8rem;
}

.toolbar-hint {
  color: var(--subtle);
  font-size: .68rem;
  text-align: right;
}

.table-panel {
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  min-width: 0;
  padding: .85rem .9rem;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.data-table th {
  background: #fafbfc;
  color: var(--muted);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.data-table td {
  color: #475467;
  font-size: .76rem;
}

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

.data-table td strong {
  color: var(--ink);
  font-size: .77rem;
}

.data-table td:first-child,
.data-table th:first-child {
  width: 15%;
}

.data-table td:nth-child(2),
.data-table th:nth-child(2) {
  width: 13%;
}

.data-table td:nth-child(3),
.data-table th:nth-child(3) {
  width: 15%;
}

.truncate-text {
  display: block;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .2rem .45rem;
  border: 1px solid #b9e6d2;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .64rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-badge::before {
  width: .34rem;
  height: .34rem;
  margin-right: .3rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-badge-disabled {
  border-color: #d9dee8;
  background: #f2f4f7;
  color: var(--muted);
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  width: 10rem;
  text-align: right !important;
}

.actions-heading {
  width: 10rem;
  text-align: right !important;
}

.table-action {
  padding: .25rem .1rem;
  border: 0;
  background: transparent;
  color: #2856a2;
  font-size: .7rem;
  font-weight: 700;
}

.table-action:hover {
  text-decoration: underline;
}

.table-action-danger {
  color: var(--red);
}

.empty-table-row td {
  padding: 0;
}

.empty-state-inline {
  padding: 2rem 1rem;
  color: var(--muted);
  text-align: center;
}

.empty-state-inline strong {
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 600;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: 3.5rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--muted);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--subtle);
}

.empty-state h2,
.empty-state p {
  margin: 0;
}

.empty-state h2 {
  color: var(--ink);
  font-size: 1rem;
}

.empty-state p {
  max-width: 30rem;
  font-size: .8rem;
  line-height: 1.45;
}

.editor-panel {
  display: grid;
  gap: 1.2rem;
  padding: 1.2rem;
  border-color: #d5dff0;
  box-shadow: 0 8px 24px rgba(37, 67, 118, .04);
}

.editor-heading {
  align-items: center;
  padding-bottom: .15rem;
}

.editor-heading h2 {
  margin-top: .25rem;
}

.editor-copy {
  max-width: 48rem;
  margin: .38rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.form-section {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  background: #fcfdff;
}

.form-section-heading {
  display: grid;
  gap: .25rem;
}

.form-section-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: .82rem;
  letter-spacing: -.005em;
}

.form-section-heading p {
  max-width: 52rem;
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

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

.form-field {
  display: grid;
  align-content: start;
  gap: .35rem;
  min-width: 0;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field label,
.field-label {
  color: #344054;
  font-size: .75rem;
  font-weight: 700;
}

.form-field label {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.required-marker {
  color: var(--red);
  font-weight: 800;
}

.optional-marker {
  color: var(--subtle);
  font-size: .63rem;
  font-weight: 500;
}

.form-field input,
.form-field select {
  width: 100%;
  min-height: 2.35rem;
  padding: .5rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font-size: .8rem;
}

.form-field select {
  min-width: 0;
}

.form-field input:hover,
.form-field select:hover {
  border-color: #aebed8;
}

.form-field input:focus,
.form-field select:focus {
  border-color: #7899d2;
  box-shadow: 0 0 0 3px #e5edff;
  outline: 0;
}

.form-field-invalid input,
.form-field-invalid select {
  border-color: #dc8d88;
  background: #fffafa;
}

.form-field-invalid input:focus,
.form-field-invalid select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px #ffe5e3;
}

.form-field input::placeholder {
  color: #b0b8c6;
}

.form-field small,
.pipeline-preview small {
  color: var(--subtle);
  font-size: .67rem;
  line-height: 1.35;
}

.field-error {
  margin: -.05rem 0 0;
  color: var(--red);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.35;
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.35rem;
  color: #344054;
  cursor: pointer;
}

.checkbox-field input {
  width: 1rem;
  min-height: 1rem;
  accent-color: var(--blue);
}

.pipeline-preview {
  display: grid;
  gap: .5rem;
  padding: .8rem;
  border: 1px solid #e7edf7;
  border-radius: 7px;
  background: #fafcff;
}

.pipeline-preview > div:first-child {
  display: grid;
  gap: .2rem;
}

.pipeline-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.pipeline-steps span {
  padding: .28rem .45rem;
  border: 1px solid #cbd9f2;
  border-radius: 5px;
  background: white;
  color: #31558f;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
}

.editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
  padding-top: .2rem;
  border-top: 1px solid #edf0f4;
}

.editor-actions-hint {
  margin-right: auto;
  color: var(--subtle);
  font-size: .68rem;
  line-height: 1.35;
}

.editor-panel-empty {
  gap: 1.4rem;
}

.dependency-empty {
  display: grid;
  justify-items: center;
  gap: .65rem;
  padding: 2.25rem 1rem;
  border: 1px dashed #cbd8ed;
  border-radius: 8px;
  background: #f9fbff;
  text-align: center;
}

.dependency-empty h3,
.dependency-empty p {
  margin: 0;
}

.dependency-empty h3 {
  color: var(--ink);
  font-size: .95rem;
}

.dependency-empty p {
  max-width: 32rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

/* Dedicated model editors */

.profile-editor-page,
.asset-editor-page,
.deployment-editor-page {
  gap: 1.1rem;
}

.editor-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  color: var(--subtle);
  font-size: .7rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 1.9rem;
  padding: .25rem .45rem .25rem 0;
  border: 0;
  background: transparent;
  color: #2856a2;
  font-size: .72rem;
  font-weight: 700;
}

.back-link:hover {
  color: #173d80;
  text-decoration: underline;
}

.back-link span {
  font-size: 1rem;
  line-height: 1;
}

.breadcrumb-separator {
  color: #c0c8d5;
}

.profile-editor-heading,
.asset-editor-heading,
.deployment-editor-heading {
  align-items: flex-start;
}

.config-controls {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-badge {
  flex: 0 0 auto;
  padding: .38rem .55rem;
  border: 1px solid #cddaf3;
  border-radius: 999px;
  background: var(--blue-soft);
  color: #31558f;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.profile-editor-layout,
.asset-editor-layout,
.deployment-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
  align-items: start;
  gap: 1rem;
}

.profile-editor-main,
.profile-editor-aside,
.asset-editor-main,
.asset-editor-aside,
.deployment-editor-main,
.deployment-editor-aside {
  min-width: 0;
}

.profile-editor-main .editor-panel,
.asset-editor-main .editor-panel,
.deployment-editor-main .editor-panel {
  min-height: 100%;
}

.profile-editor-main > .editor-panel > .editor-heading,
.asset-editor-main > .editor-panel > .editor-heading,
.deployment-editor-main > .editor-panel > .editor-heading {
  display: none;
}

.profile-editor-aside,
.asset-editor-aside,
.deployment-editor-aside {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.profile-editor-aside .panel,
.asset-editor-aside .panel,
.deployment-editor-aside .panel {
  padding: 1rem;
}

.editor-checklist {
  display: grid;
  gap: .7rem;
  margin: 1.15rem 0 0;
  padding: 0 0 0 1.05rem;
  color: #475467;
  font-size: .75rem;
  line-height: 1.45;
}

.editor-checklist li::marker {
  color: #7899d2;
}

/* Tablet: drawer navigation and reduced density */

.sidebar-overlay {
  display: none;
}

@media (max-width: 1023px) {
  .app-layout {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 10px 0 26px rgba(23, 32, 51, .12);
  }

  .sidebar-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(23, 32, 51, .28);
  }

  .icon-button.menu-button {
    display: grid;
  }

  .page-content {
    padding-top: 1.6rem;
  }

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

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

  .profile-editor-layout,
  .asset-editor-layout,
  .deployment-editor-layout {
    grid-template-columns: 1fr;
  }

  .cell-secondary {
    display: none;
  }

  .data-table td.cell-secondary,
  .data-table th.cell-secondary {
    display: none;
  }

  .data-table td,
  .data-table th {
    padding-right: .65rem;
    padding-left: .65rem;
  }
}

/* Mobile: single-column content and stacked table rows */

@media (max-width: 767px) {
  .auth-page {
    width: min(100% - 1.25rem, 31rem);
    padding-top: 2.5rem;
  }

  .auth-panel {
    padding: 1rem;
  }

  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: .75rem .85rem;
  }

  .topbar-left,
  .topbar-actions {
    width: 100%;
  }

  .topbar-actions {
    justify-content: flex-end;
  }

  .topbar-actions {
    gap: .25rem;
  }

  .user-details {
    display: none;
  }

  .button-quiet {
    padding-right: .15rem;
    padding-left: .15rem;
  }

  .page-content {
    padding: 1.35rem .85rem 3rem;
  }

  .page-heading,
  .page-heading-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-editor-heading,
  .asset-editor-heading,
  .deployment-editor-heading {
    gap: .7rem;
  }

  .editor-badge {
    align-self: flex-start;
  }

  .page-heading .button {
    width: 100%;
  }

  .revision-chip {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    text-align: left;
  }

  .metric-grid {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }

  .metric-card {
    padding: .8rem;
  }

  .metric-value {
    font-size: 1.2rem;
  }

  .metric-detail {
    overflow-wrap: anywhere;
  }

  .relationship-row {
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .relationship-arrow {
    transform: rotate(0deg);
    text-align: left;
  }

  .relationship-children {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search-field {
    width: 100%;
  }

  .toolbar-hint {
    text-align: left;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
  }

  .data-table thead {
    display: none;
  }

  .data-table tr {
    padding: .8rem;
    border-bottom: 1px solid var(--line);
  }

  .data-table tr:last-child {
    border-bottom: 0;
  }

  .data-table td,
  .data-table td:first-child,
  .data-table td:nth-child(2),
  .data-table td:nth-child(3) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .35rem 0;
    border: 0;
    text-align: right;
  }

  .data-table td::before {
    flex: 0 0 auto;
    color: var(--muted);
    content: attr(data-label);
    font-size: .65rem;
    font-weight: 700;
    text-align: left;
  }

  .data-table td.row-actions {
    justify-content: flex-end;
    width: 100%;
    margin-top: .45rem;
    padding-top: .65rem;
    border-top: 1px solid #edf0f4;
  }

  .data-table td.row-actions::before {
    display: none;
  }

  .data-table .empty-table-row td {
    display: block;
    padding: 1.8rem .5rem;
    text-align: center;
  }

  .data-table .empty-table-row td::before {
    display: none;
  }

  .truncate-text {
    max-width: 58%;
  }

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

  .form-field-full {
    grid-column: auto;
  }

  .editor-panel,
  .panel {
    padding: .95rem;
  }

  .form-section {
    padding: .8rem;
  }

  .editor-actions {
    align-items: stretch;
  }

  .editor-actions-hint {
    flex: 0 0 100%;
    margin-right: 0;
  }

  .editor-actions .button {
    flex: 1 1 0;
  }

  .feedback {
    align-items: flex-start;
  }

  .feedback .button {
    flex: 0 0 auto;
  }
}

.api-key-page {
  gap: 1rem;
}

.api-key-role-note {
  padding: .75rem .9rem;
  border: 1px solid #dce6f4;
  border-radius: 8px;
  background: #f6f9ff;
  color: #405573;
  font-size: .78rem;
}

.api-key-role-note p {
  margin: 0;
}

.api-role-badge {
  display: inline-flex;
  align-items: center;
  padding: .4rem .65rem;
  border: 1px solid #d7e2f3;
  border-radius: 999px;
  background: #f3f7ff;
  color: #31558f;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.api-key-layout {
  display: grid;
  grid-template-columns: minmax(17rem, .85fr) minmax(0, 1.5fr);
  align-items: start;
  gap: 1rem;
}

.api-key-create-panel,
.api-key-list-panel,
.api-admin-panel {
  display: grid;
  min-width: 0;
  gap: 1rem;
  padding: 1.1rem;
}

.api-key-form {
  gap: .85rem;
}

.api-key-profile-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.api-key-profile-picker legend {
  padding: 0 .3rem;
}

.api-key-profile-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .55rem .65rem;
  border: 1px solid #e2e8f1;
  border-radius: 7px;
  background: #fbfcfe;
  color: #344054;
  cursor: pointer;
  font-size: .75rem;
}

.api-key-profile-option input {
  width: 1rem;
  min-height: 1rem;
  margin: 0;
  accent-color: #315c9b;
}

.api-key-profile-option span {
  display: grid;
  gap: .12rem;
}

.api-key-profile-option small,
.api-key-no-profiles {
  color: var(--muted);
  font-size: .67rem;
}

.api-key-no-profiles {
  margin: .1rem 0;
  line-height: 1.45;
}

.api-key-form-actions {
  display: flex;
  justify-content: flex-end;
}

.api-key-table-panel {
  overflow-x: auto;
}

.api-key-table {
  min-width: 38rem;
}

.api-key-table .table-action,
.api-admin-table .table-action {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .api-admin-table th:first-child,
  .api-admin-table td:first-child {
    width: auto;
  }

  .api-admin-table th:nth-child(2),
  .api-admin-table td:nth-child(2) {
    width: 7rem;
  }

  .api-admin-table th:nth-child(3),
  .api-admin-table td:nth-child(3) {
    width: 6rem;
  }

  .api-key-table td.row-actions,
  .api-admin-table td.row-actions {
    display: table-cell;
  }

  .api-key-table th:first-child,
  .api-key-table td:first-child {
    width: 22%;
  }

  .api-key-table th:nth-child(2),
  .api-key-table td:nth-child(2) {
    width: 28%;
  }

  .api-key-table th:nth-child(3),
  .api-key-table td:nth-child(3) {
    width: 6rem;
  }

  .api-key-table th:nth-child(4),
  .api-key-table td:nth-child(4) {
    width: 7rem;
  }

  .api-key-table th:nth-child(5),
  .api-key-table td:nth-child(5) {
    width: 5rem;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

.api-key-table td,
.api-key-table th,
.api-admin-table td,
.api-admin-table th {
  vertical-align: top;
}

.api-key-id {
  display: block;
  margin-top: .2rem;
  color: var(--subtle);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .64rem;
  overflow-wrap: anywhere;
}

.api-key-profile-list {
  min-width: 8rem;
}

.api-key-profile-tag {
  display: inline-flex;
  margin: 0 .2rem .2rem 0;
  padding: .2rem .42rem;
  border-radius: 999px;
  background: #edf3ff;
  color: #405d91;
  font-size: .64rem;
  font-weight: 700;
}

.api-key-status {
  display: inline-flex;
  padding: .22rem .45rem;
  border-radius: 999px;
  background: #e7f5ed;
  color: #247147;
  font-size: .65rem;
  font-weight: 800;
  white-space: nowrap;
}

.api-key-status-revoked {
  background: #edf0f5;
  color: #69768a;
}

.api-key-created {
  min-width: 8rem;
  color: var(--muted);
  font-size: .68rem;
  overflow-wrap: anywhere;
}

.api-key-secret {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid #cdddf7;
  border-radius: 9px;
  background: #f3f8ff;
}

.api-key-secret > div {
  flex: 1;
  min-width: 0;
}

.api-key-secret strong {
  color: #19345d;
  font-size: .82rem;
}

.api-key-secret p {
  margin: .2rem 0 .5rem;
  color: var(--muted);
  font-size: .7rem;
}

.api-key-secret code {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: .55rem .65rem;
  border: 1px solid #dfe7f3;
  border-radius: 6px;
  background: white;
  color: #19345d;
  font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

.api-admin-panel {
  gap: .8rem;
}

.gateway-layout > .panel,
.gateway-list,
.gateway-card {
  min-width: 0;
}

.gateway-list {
  display: grid;
  gap: .8rem;
}

.gateway-layout > .panel {
  display: grid;
  gap: 1rem;
}

.gateway-card {
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.gateway-card p {
  margin: .65rem 0;
  color: var(--muted);
}

.gateway-card .panel-heading,
.gateway-card .api-key-form-actions {
  flex-wrap: wrap;
}

.gateway-configuration {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gateway-page .form-grid p,
.gateway-list > p {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .api-key-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .gateway-page .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .api-key-page .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .api-key-secret {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .api-key-secret > div {
    flex: 0 0 100%;
  }

  .api-key-table {
    min-width: 0;
  }
}
.discard-dialog {
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 16px 48px #18263c33;
}
.discard-dialog::backdrop { background: #18263c80; }
.discard-dialog h2 { margin: 0 0 12px; font-size: 20px; }
.discard-dialog p { margin: 0 0 24px; line-height: 1.5; }
.discard-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.discard-dialog .button-danger { color: #fff; background: var(--red); border-color: var(--red); }
.discard-dialog .button-danger:hover { filter: brightness(0.92); }