:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b0c10; color: #eaecef; }
a { color: #9cdcfe; text-decoration: none; margin-left: 12px; }
.container { max-width: 1200px; margin: 32px auto; padding: 0 16px; }
h1 { margin: 0 0 16px; font-weight: 600; }
label { margin: 0; }
input, select, button, textarea {
  background: #1f2430; color: #eaecef; border: 1px solid #2f3542; border-radius: 8px; padding: 8px 10px;
}
button { cursor: pointer; }
.msg { margin-top: 10px; color: #f5c542; }
.card { border: 1px solid #2f3542; padding: 14px; border-radius: 12px; background: #141820; }
.hidden { display: none; }
.flex { display:flex; align-items:center; justify-content: space-between; }

/* NAV & THEME */
.nx-dark { background:#0c0f13; color:#e9edf3; }
.nx-header{position:sticky;top:0;z-index:10;background:#0c0f13;border-bottom:1px solid #1a2230}
.nx-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:8px 12px}
.nx-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nx-logo img{display:block; height:66px}
.nx-app-title{font-weight:700;color:#e9edf3}
.nx-nav{display:flex;gap:10px;margin-left:16px}
.nx-nav-item{color:#b8c3d1;text-decoration:none;padding:6px 10px;border-radius:8px}
.nx-nav-item.is-active,.nx-nav-item:hover{background:#131a24;color:#fff}
.nx-spacer{flex:1}

/* Controls page scope */
.nx-scope .nx-main{max-width:1200px;margin:16px auto;padding:0 12px}
.nx-scope .nx-card{background:#10161f;border:1px solid #1a2230;border-radius:10px;padding:12px;color:#dfe6ef}
.nx-scope .nx-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.nx-scope .nx-select{display:inline-flex;align-items:center;gap:6px}
.nx-scope .nx-select label{font-size:12px;color:#98a6b7}
.nx-scope input, .nx-scope select{background:#0f1520;color:#e9edf3;border:1px solid #2a3445;border-radius:8px;padding:6px 8px}
.nx-scope .nx-notice{padding:8px 10px;border:1px solid #5a3d1f;background:#2a1b0b;color:#ffd8a8;border-radius:8px}
.nx-scope .nx-hidden{display:none}
.nx-scope .nx-muted{color:#98a6b7}
.nx-scope .nx-table-wrap{overflow:auto;border:1px solid #1a2230;border-radius:10px;background:#0f1520}
.nx-scope .nx-table{width:100%;border-collapse:collapse;font-size:14px;color:#dfe6ef}
.nx-scope .nx-table thead th{position:sticky;top:0;background:#131a24;border-bottom:1px solid #1a2230;text-align:left;padding:8px}
.nx-scope .nx-table tbody td{border-top:1px solid #1a2230;padding:8px;vertical-align:middle}
.nx-scope .nx-pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px 0}

/* Toolbar alignment + sizes */
#tenantSel, #snapshotSel, #frameworkSel,
#enabledSel, #stateSel, #searchBox {
  height: 34px;
  line-height: 34px;
  padding: 6px 10px;
  margin: 0 8px 8px 0;
  vertical-align: middle;
  border-radius: 8px;
  border: 1px solid #2a3140;
  background: #12161f;
  color: #e7eef8;
}
label[for="tenantSel"], label[for="snapshotSel"], label[for="frameworkSel"] {
  display:inline-block;
  margin-right: 6px;
  font-size: .9rem;
  color: #a8b3c7;
  line-height: 34px; /* align with selects */
}

/* Inline switch for Enabled */
.nx-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.nx-switch input { opacity: 0; width: 0; height: 0; }
.nx-switch span {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: #3a4254; transition: .2s; border-radius: 999px;
}
.nx-switch span::before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 2px; top: 2px;
  background: #cbd5e1; transition: .2s; border-radius: 50%;
}
.nx-switch input:checked + span { background: #2d6cdf; }
.nx-switch input:checked + span::before { transform: translateX(16px); }

/* Saving/ok states */
td.is-saving { filter: saturate(0.6); opacity: .6; }
td.is-ok { box-shadow: inset 0 0 0 1px #2ecc71; }

/* Debug UI */
#nx-debug {
  position: fixed;
  top: 64px;
  right: 16px;
  max-width: 42vw;
  max-height: 40vh;
  background:#0b1220;
  color:#9ecbff;
  border:1px dashed #2a3140;
  border-radius:8px;
  padding:8px 10px;
  overflow:auto;
  z-index:1100;
  font:12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  display:none; /* hidden until toggled */
}
#debugToggle {
  position: fixed;
  top: 24px;
  right: 16px;
  z-index: 1101;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #2a3140;
  background: #172036;
  color: #9ecbff;
  cursor: pointer;
  font-size: .85rem;
}


/* bump header logo height */
.header .brand img,
.brand img,
.logo img {
  height: 66px !important;
  max-height: 66px !important;
}

/* Elytra brand logo height normalization */
img.elytra-brand-logo { height: 66px; }