/* Compact, responsive Cloudex.Auth account dashboard, scoped to session only. */
#session-step .dashboard-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}
#session-step .dashboard-header h2{margin:3px 0}
#session-step .eyebrow{font-size:11px;color:#4779b3;font-weight:750;letter-spacing:.11em}
#session-step .muted{color:#667c90;font-size:13px;line-height:1.6}
#session-step .status-chip{display:inline-block;white-space:nowrap;font-size:11px;color:#116a50;background:#e0f5ec;border:1px solid #9dd8bf;border-radius:100px;padding:8px 11px}
#session-step .dashboard-tabs{display:flex;gap:5px;padding:4px;border-radius:10px;background:#edf3f7;flex-wrap:wrap;margin:22px 0}
#session-step .dashboard-tabs .tab-button{flex:1;min-width:105px;width:auto;border-radius:7px;background:transparent;color:#47627d;font-size:13px;padding:11px 9px;margin:0;cursor:pointer}
#session-step .dashboard-tabs .tab-button.selected{background:white;box-shadow:0 1px 6px #1b375d1a;color:#123a61}
#session-step .dashboard-panel{padding:2px 0 12px}
#session-step h3{margin:20px 0 8px;color:#16334d;font-size:19px}
#session-step h4{margin:19px 0 7px;font-size:15px}
#session-step .surface{border:1px solid #dde7ef;border-radius:10px;padding:16px;margin:18px 0;background:#fcfdff}
#session-step .surface.note{background:#f5f8fc}
#session-step .scope-tags{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}
#session-step .scope-tag{font-size:12px;background:#ecf3fa;border:1px solid #bad1e6;color:#1d5279;border-radius:7px;padding:6px 9px}
#session-step .scope-choice{display:grid;gap:8px}
#session-step .checkline{display:flex;align-items:center;gap:10px;cursor:pointer;line-height:1.4;margin:8px 0;font-weight:500}
#session-step .checkline input{width:auto;margin:0}
#session-step .form-field{margin:16px 0}
#session-step .form-field label{margin:0 0 7px}
#session-step .readonly-field{font-size:13px;color:#31475a;background:#f5f7f9;padding:10px 13px;border-radius:8px;word-break:break-all}
#session-step .button-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
#session-step .button-row button{flex:1;min-width:125px;width:auto;font-size:13px;padding:11px 12px;margin:0}
#session-step button.secondary-action{background:#eff4f9;color:#174b78;border:1px solid #cddde9}
#session-step textarea{width:100%;border:1px solid #cbd9e6;border-radius:8px;padding:12px;font:12px/1.5 ui-monospace,Consolas,monospace;resize:vertical}
#session-step .secret-textarea{background:#f9fbfd;color:#253c4f;word-break:break-all}
#session-step .secret-output,#session-step .json-output,#session-step .scope-lines{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,Consolas,monospace}
#session-step .admin-details{border:1px solid #dce7ef;border-radius:10px;padding:12px 15px;margin:11px 0}
#session-step .admin-details summary{font-weight:650;cursor:pointer;color:#194566}
#session-step .sign-out-button{background:#e7eef5;color:#163d63;margin-top:28px}
#session-step .error{word-break:break-word}
@media(max-width:650px){#session-step .dashboard-header{flex-wrap:wrap}#session-step .dashboard-tabs .tab-button{min-width:90px;font-size:12px}#session-step .button-row button{min-width:115px}}

@media(min-width:900px){body.authenticated main{width:min(1240px,94vw);grid-template-columns:245px minmax(0,1fr);gap:40px;align-items:start;padding-top:42px}body.authenticated aside{padding:15px 0}body.authenticated aside h1{font-size:32px}body.authenticated aside p{font-size:14px}body.authenticated .card{max-width:930px}}

/* Recovery-code checkbox on the MFA screen.
   Keep this in a stylesheet: our CSP blocks inline style attributes. */
#mfa-step .recovery-checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 16px 0;
  cursor: pointer;
  line-height: 1.4;
  text-align: left;
}
#mfa-step .recovery-checkbox-row input[type="checkbox"] {
  box-sizing: border-box;
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  accent-color: #1b4772;
}
#mfa-step .recovery-checkbox-row span {
  display: inline;
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 650;
}

/* Collapsible OAuth integration documentation in the API Access tab. */
#session-step .integration-guide{border:1px solid #cadce9;border-radius:11px;padding:15px 17px;margin:24px 0;background:#f6f9fc}
#session-step .integration-guide > summary{color:#16486e;font-weight:700;cursor:pointer;line-height:1.5}
#session-step .integration-guide-content{padding-top:10px;font-size:13px;line-height:1.7}
#session-step .integration-guide-content ol{padding-left:22px}
#session-step .integration-guide-content li{margin:0 0 12px}
#session-step .integration-guide-content code{overflow-wrap:anywhere}
#session-step .integration-code{display:block;max-height:360px;overflow:auto;border:1px solid #d2dfe9;border-radius:8px;padding:12px;margin:9px 0 18px;background:white;color:#1d394d;white-space:pre;font:12px/1.5 ui-monospace,Consolas,monospace}
#session-step .integration-callback-note{background:#eaf2f9;border-left:3px solid #3c7ba7;padding:11px 13px;border-radius:5px;margin:16px 0}
#session-step .integration-callback-note p{margin:5px 0 0}
#session-step #integration-copy-example{width:auto;margin:8px 0}

/* OAuth test client: only successful callback/refresh/clear messages are green.
   CSS stays in the external stylesheet to respect Cloudex.Auth CSP. */
#session-step #developer-error.developer-success {
  background: #e6f5eb;
  border: 1px solid #a7dbc0;
  color: #17633d;
}