/* Make the JET content area not force scrolling because of our block */
.du-authPage{
  /* 100% of viewport height (footer stays visible below naturally) */
  min-height: calc(100vh - 120px); /* adjust if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.du-authContent{
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;

  /* lift slightly so it feels centered even with header/footer */
  transform: translateY(-24px);
}

.du-header{
  text-align: center;
}

.du-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-bottom: 10px;
}

.du-brandLogo{
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.du-brandName{
  font-weight: 700;
  font-size: 18px;
  opacity: .9;
}

.du-h1{
  margin: 4px 0 4px 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
}

.du-h2{
  font-size: 18px;
  opacity: .75;
}

/* Card */
.du-card{
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* Form */
.du-form{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Pill inputs */
.du-input{
  --oj-text-field-border-radius: 999px;
  --oj-text-field-bg-color: #f2f3f5;
  --oj-text-field-border-color: transparent;
  --oj-text-field-padding-x: 18px;
}

/* Yellow button */
.du-loginBtn{
  width: 100%;
  margin-top: 6px;

  --oj-button-solid-chrome-bg-color: #f6c200;
  --oj-button-solid-chrome-text-color: #111;
  --oj-button-solid-chrome-border-color: transparent;

  --oj-button-solid-chrome-bg-color-hover: #e6b400;
  --oj-button-solid-chrome-bg-color-active: #d8aa00;

  border-radius: 14px;
}

.du-msg{
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  white-space: pre-line;
}

.du-msg-title{
  font-weight: 800;
  margin-bottom: 4px;
}

.du-msg-error{ background: #fdecec; }
.du-msg-success{ background: #e9f8ef; }
.du-msg-warning{ background: #fff6da; }

.du-msg-actions{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.du-footer{
  margin-top: 18px;
  text-align: center;
  opacity: 0.6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.du-linksRow{
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}

.du-muted{
  opacity: 0.7;
  margin-right: 6px;
}

.du-link{
  color: #1a5fd0;
  text-decoration: underline;
  font-weight: 600;
}

.du-link:hover{
  text-decoration: none;
}
.footer-center {
    text-align: center;
}


.du-page {
  padding: 32px 24px;
}

.du-hostsSearch {
  max-width: 1100px;
  margin: 0 auto 20px;
}

.du-hostsSearch-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fb;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e2e6eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Animation on focus inside */
.du-hostsSearch-inner:focus-within {
  border: 1px solid #c6d3e2;
  box-shadow: 0 0 8px rgba(99, 136, 186, 0.15);
}

/* Input styling */
.du-hostsSearch-input {
  flex: 1;
  min-width: 240px;
}

.du-searchIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.du-hostsSearch-input .oj-inputtext {
  border-radius: 10px;
}

/* Clear button smaller & subtle */
.du-btn-clear {
  min-width: 60px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0.9;
}

.du-btn-clear:disabled {
  opacity: 0.5;
}

/* Center the table like v5 */
.du-tableContainer {
  max-width: 1100px;
  margin: 0 auto;
}

/* Buttons row */
.du-actionsRow {
  max-width: 1100px;
  margin: 24px auto 0;
  display: flex;
  gap: 12px;
}


/* Yellow main button */
.du-btn-yellow .oj-button-button {
  background-color: #f2c94c !important;
  border-color: #f2c94c !important;
  color: #000 !important;
}

.du-btn-yellow .oj-button-button:disabled,
.du-btn-yellow .oj-button-button[disabled] {
  background-color: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #888 !important;
}

/* Gray disabled look */
.du-btn-gray .oj-button-button {
  background-color: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #888 !important;
}

/* Outline button */
.du-btn-outline .oj-button-button {
  background: transparent !important;
  border: 1px solid #999 !important;
  color: #000 !important;
}



/* eula  */

#eulaDialog .oj-dialog {
  width: 780px !important;
  max-width: 92vw !important;
  height: 560px !important;
  max-height: 90vh !important;
  padding: 0 !important;
}

/* Dark top bar */
.eula-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 48px;

  background: #2f2f2f;
  color: #ffffff;

  font-weight: 600;
  font-size: 16px;

  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}


/* Centered title */
.eula-title {
  background: none;
  padding: 0;
}

/* Body spacing */
.eula-body {
  padding: 12px 12px 0 12px;
}

/* Big inner white text box with border + vertical scroll only */
.eula-text {
  height: 420px;
  overflow-y: auto;
  overflow-x: hidden;

  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 12px;
  box-sizing: border-box;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  margin-bottom: 10px;
}
/* Footer */
.eula-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px 24px;
  min-height: 48px;
  background: #fafafa;
  border-top: 1px solid #dcdcdc;
}

.eula-footer oj-checkboxset {
  margin: 0 !important;
}

.eula-footer .oj-choice-item {
  margin: 0 !important;
}

.eula-continue-btn .oj-button-button {
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: 6px !important;
}

/* Yellow when enabled */
.eula-continue-btn .oj-button-button {
  background-color: #f2c94c !important;
  border-color: #f2c94c !important;
  color: #000 !important;
}

/* Gray when disabled */
.eula-continue-btn .oj-button-button:disabled {
  background-color: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #888 !important;
}

#eulaDialog .oj-dialog-header,
#eulaDialog .oj-dialog-body,
#eulaDialog .oj-dialog-footer {
  padding: 0 !important;
}
.eula-header {
  border-bottom: 10px solid #ffffff !important;
}
/* Close button position */
.eula-close{
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* The square */
.eula-close .oj-button-button{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;

  background: #2f2f2f !important;
  border-radius: 6px !important;

  position: relative !important;
  overflow: hidden;
}
.eula-close .oj-button-label{
  padding: 0 !important;
  margin: 0 !important;
}
.eula-x{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  user-select: none;
  pointer-events: none;
}
/* hover */
.eula-close:hover .oj-button-button{
  background: #3a3a3a !important;
}
.du-onboarding {
  display: flex;
  justify-content: center;
  padding-top: 28px;
}

.du-card {
  width: min(760px, 92vw);
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 22px;
}

.du-onb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.du-onb-stepText { opacity: 0.75; font-size: 14px; }

.du-onb-steps {
  display: flex;
  gap: 8px;
  margin: 10px 0 16px;
}

.du-onb-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ddd;
}
.du-onb-dot.active { background: #f2c94c; }

.du-muted { opacity: 0.85; }

.du-featureList { margin-top: 16px; display: grid; gap: 12px; }
.du-feature { padding: 12px; border: 1px solid #eee; border-radius: 10px; background: #fafafa; }
.du-featureTitle { font-weight: 700; margin-bottom: 4px; }

.du-settingRow {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
}
.du-settingTitle { font-weight: 700; }

/* Full page center */
.du-signedout-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  background: linear-gradient(135deg, #f9fafb, #f1f5f9);
  padding: 24px;
}

/* Card */
.du-card {
  background: white;
  padding: 48px 40px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  max-width: 420px;
  width: 100%;
}

/* Success icon */
.du-icon {
  width: 64px;
  height: 64px;
  background-color: #e6f4ea;
  color: #2e7d32;
  font-size: 28px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
}

/* Title */
.du-title {
  font-size: 24px;
  margin-bottom: 12px;
}

/* Subtitle */
.du-subtitle {
  font-size: 15px;
  margin-bottom: 8px;
}

/* Muted text */
.du-muted {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Button container */
.du-actions {
  margin-top: 16px;
}

/* Primary button */
.du-primary-btn {
  --oj-button-bg-color: #facc15;
  --oj-button-text-color: #000;
}

.du-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.du-header-version {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.du-logo {
  height: 34px;
  width: auto;
}

.oj-web-applayout-header-title {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.du-forgotRow {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;      /* pulls it closer to password */
  margin-bottom: -8px;    /* reduce space before button */
}

.du-loginBtn {
  margin-top: 8px;       /* small clean spacing */
}

.du-actionsRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;   /* IMPORTANT */
  margin-top: 20px;
}

.du-pagingWrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.du-configPreview {
  margin-top: 16px;
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 16px;
}

.du-configPreview-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.du-configPreview-code {
  margin: 0;
  white-space: pre-wrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  color: #333;
}
.du-preferencesPage {
  padding-top: 8px;
}

.du-prefHeader {
  margin-bottom: 18px;
}

.du-prefSubtext {
  margin-top: 6px;
  color: #6b7280; /* gray */
  font-size: 14px;
  max-width: 720px;
}

.du-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  max-width: 820px;
}

.du-prefCard {
  box-shadow: 0 1px 1px rgba(0,0,0,0.03);
}

.du-cardTop {
  margin-bottom: 14px;
}

.du-cardTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.du-cardTitle {
  font-size: 18px;
  font-weight: 650;
  color: #111827;
}

.du-cardDesc {
  margin-top: 6px;
  color: #6b7280;
  font-size: 14px;
}

.du-settingRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #f3f4f6;
}

.du-settingMain {
  flex: 1;
  min-width: 240px;
}

.du-settingLabel {
  font-weight: 600;
  color: #111827;
}

.du-settingHelp {
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
}

.du-settingControl {
  display: flex;
  align-items: center;
}

.du-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid;
  white-space: nowrap;
}

.du-pill--on {
  background: #e7f6ec;
  border-color: #bfe6cb;
  color: #1f6b3a;
}

.du-pill--off {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}

.du-saveMsg {
  margin-top: 8px;
  color: #1f6b3a;
  font-size: 13px;
}

.du-cardFooter {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.du-diagnostics .du-h1 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 16px;
}

.du-diagnostics .du-panel {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 16px;
  margin-top: 16px;
}

.du-diagnostics .du-subtext {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

/* Logs */
.du-diagnostics .du-textarea {
  width: 100%;
  height: 380px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  font-family: monospace;
  font-size: 13px;
  background: #fff;
  color: #333;
  resize: none;
  margin-bottom: 12px;
}

/* Config */
.du-diagnostics .du-pre {
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 4px;
  font-size: 13px;
  overflow: auto;
  margin-bottom: 12px;
}

/* Buttons */
.du-diagnostics .du-actionsRow {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.du-diagnostics-back {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-end;
}


.du-preferencesPage {
  max-width: 900px;
  margin: auto;
  padding: 24px;
}

/* Header */
.du-preferencesPage .du-prefSubtext {
  color: #666;
  font-size: 14px;
  margin-top: 4px;
}

/* Section */
.du-settingsSection {
  margin-top: 20px;
  border-top: 1px solid #eee;
}

/* Section title */
.du-sectionTitle {
  font-size: 13px;
  color: #888;
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Setting item */
.du-settingItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

/* Left */
.du-settingLeft {
  max-width: 70%;
}

.du-settingTitle {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.du-settingDesc {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

/* Status inline */
.du-inlineStatus {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.du-inlineStatus.on {
  background: #e6f4ea;
  color: #1e7e34;
}

.du-inlineStatus.off {
  background: #f5f5f5;
  color: #777;
}

/* Footer */
.du-footerBar {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Button */
.du-btn-primary {
  background-color: #f0c000;
}

/* Save msg */
.du-saveMsg {
  margin-top: 10px;
  font-size: 13px;
  color: #2e7d32;
}
.du-version-footer {
  font-size: 11px;
  color: #aaa;
  margin-right: auto;
}