/* Developer portal and API integration workspace */

.developer-body {
  --green: #2f6fb3;
  --green-dark: #21548c;
  --green-soft: #eaf1fa;
  --chart-muted: #d7e3f4;
  background: #f6f8fb;
}
.developer-body .brand-mark { background: #16324a; }
.developer-body .workspace-icon { background: #eaf1fa; color: #2f6fb3; }
.developer-body .status-dot { background: #4f9f6d; }
.developer-body .help-card { background: #fafcfe; border-color: #eaf0f5; }
.developer-body .help-icon { background: #eaf1fa; color: #2f6fb3; }
.developer-body .nav-link-active, .developer-body .nav-link-active:hover { background: #eaf1fa; color: #21548c; }
.developer-body .nav-link-active .nav-icon { color: #2f6fb3; }
.developer-body .metric-card:first-child .metric-value { color: #21548c; }
.developer-body .topbar { background: rgba(255, 255, 255, .88); }

.developer-auth .brand-mark { background: #16324a; }
.developer-auth .auth-aside { background: #0f2231; }
.developer-auth .auth-aside::before { background: radial-gradient(ellipse at 75% 22%, rgba(120, 180, 230, .18), transparent 38%), radial-gradient(ellipse at 17% 83%, rgba(72, 131, 176, .22), transparent 36%); }
.developer-auth .aside-kicker { color: #9cc3df; }
.developer-auth .aside-caption-dot { background: #7fb3d6; }

.topbar-logout { display: none; }
.topbar-logout .logout-button { width: 31px; height: 31px; }

.dev-alert { margin: 0 0 14px; padding: 11px 13px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.dev-alert-ok { border: 1px solid #cfe4d3; background: #f1f8f2; color: #2b6a45; }
.dev-alert-error { border: 1px solid #f0d4ce; background: #fff5f2; color: #a14a38; }

.dev-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr); gap: 14px; margin-top: 16px; }
.dev-keys-layout { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); }
.dev-table-panel { margin-top: 16px; }
.dev-form-panel, .dev-key-summary { min-height: 0; }

.dev-steps { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.dev-steps li { display: flex; align-items: flex-start; gap: 11px; }
.dev-step-number { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #eaf1fa; color: #2f6fb3; font-size: 10.5px; font-weight: 700; }
.dev-step-copy { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.dev-step-copy strong { font-size: 11.5px; }
.dev-step-copy span { color: #8b968f; font-size: 10.5px; line-height: 1.5; }

.dev-inline-link { display: inline-block; margin-top: 15px; color: var(--green); font-size: 11px; font-weight: 700; }
.dev-inline-link:hover { color: var(--green-dark); }
.dev-note { margin: 12px 0 0; color: #8b968f; font-size: 10.5px; line-height: 1.6; }
.dev-empty { margin: 15px 0 0; padding: 16px; border: 1px dashed #dfe6ec; border-radius: 8px; background: #fbfcfe; color: #89948d; font-size: 11.5px; text-align: center; }

.dev-code { margin: 12px 0 0; padding: 12px 14px; overflow-x: auto; border-radius: 8px; background: #0f2231; color: #d8e6f2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.7; }
.dev-code code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

.dev-copy-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dev-copy-row code { min-width: 0; flex: 1; padding: 9px 10px; overflow-x: auto; border: 1px solid #e3e9ef; border-radius: 7px; background: #f8fafc; color: #2f4b62; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; white-space: nowrap; }
.dev-copy-button { min-height: 34px; padding: 0 11px; border: 1px solid #d5e1ea; border-radius: 7px; background: white; color: #2c5f8a; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dev-copy-button:hover { border-color: #9dbdd6; }
.dev-copy-button:disabled { cursor: default; color: var(--green); }

.dev-reveal { margin: 0 0 16px; padding: 20px; border: 1px solid #cfe0c4; border-radius: 12px; background: linear-gradient(110deg, #f2f8ee, #fff 75%); }
.dev-reveal-kicker { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.dev-reveal h2 { margin: 7px 0 5px; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.dev-reveal p { margin: 0; color: #6d7b71; font-size: 12px; line-height: 1.6; }
.dev-reveal-value { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.dev-reveal-value code { min-width: 0; flex: 1; padding: 11px 12px; overflow-x: auto; border-radius: 8px; background: #10241a; color: #d8f0e2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }

.dev-form { display: grid; gap: 8px; margin-top: 14px; }
.dev-field-label { margin-top: 6px; color: #5c6a61; font-size: 11px; font-weight: 600; }
.dev-input { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid #e1e7e2; border-radius: 7px; background: white; color: #344139; font: inherit; font-size: 12px; }
.dev-input:focus { outline: 2px solid #c6d8e8; outline-offset: 1px; }
.dev-fieldset { display: grid; gap: 7px; margin: 4px 0; padding: 0; border: 0; }
.dev-check { display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border: 1px solid #edf0ed; border-radius: 7px; background: #fbfcfb; cursor: pointer; }
.dev-check input { margin-top: 2px; }
.dev-check-copy { display: flex; flex-direction: column; gap: 2px; }
.dev-check-label { color: #3d4a42; font-size: 11.5px; font-weight: 600; }
.dev-check-description { color: #8b968f; font-size: 10.5px; line-height: 1.4; }
.dev-submit { min-height: 40px; margin-top: 12px; }

.dev-table-wrap { margin-top: 14px; overflow-x: auto; }
.dev-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 11.5px; }
.dev-table th { padding: 9px 10px; border-bottom: 1px solid var(--line); color: #7c8880; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-align: left; text-transform: uppercase; }
.dev-table td { padding: 11px 10px; border-bottom: 1px solid #f0f2f0; color: #46534b; vertical-align: top; }
.dev-table tbody tr:last-child td { border-bottom: 0; }
.dev-table code { padding: 2px 5px; border-radius: 4px; background: #f4f7fa; color: #2f4b62; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; }
.dev-table .dev-url { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.dev-status { display: inline-block; padding: 3px 6px; border-radius: 5px; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.dev-status-ok { background: #eaf4ec; color: #2c7a50; }
.dev-status-error { background: #fbeceb; color: #a14545; }
.dev-status-warn { background: #fbf3e2; color: #946a29; }
.dev-status-muted { background: #f1f3f1; color: #7d8780; }

.dev-method { display: inline-flex; padding: 3px 6px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; }
.dev-method-get { background: #eaf3ec; color: #2c7a50; }
.dev-method-post { background: #eef2fb; color: #4867a8; }
.dev-method-put { background: #fbf3e6; color: #996a2e; }
.dev-method-delete { background: #fbeeee; color: #a14545; }

.dev-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-action-button { min-height: 27px; padding: 0 8px; border: 1px solid #e0e6e1; border-radius: 5px; background: white; color: #536159; font: inherit; font-size: 10.5px; cursor: pointer; }
.dev-action-button:hover { border-color: #b7cfbd; color: var(--green); }
.dev-action-button:disabled { cursor: default; opacity: .6; }
.dev-action-button.dev-danger { color: #a84c4c; }
.dev-action-button.dev-danger:hover { border-color: #e4baba; color: #963c3c; }

.dev-log-list { margin-top: 10px; }
.dev-log-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 45px; border-top: 1px solid #f0f2f0; }
.dev-log-path { overflow: hidden; color: #3b4a41; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.dev-log-meta { color: #8b968f; font-size: 10px; white-space: nowrap; }

.dev-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.dev-mini-stat { display: flex; flex-direction: column; gap: 3px; padding: 11px; border: 1px solid #eef1ee; border-radius: 8px; background: #fafbfa; }
.dev-mini-value { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.dev-mini-label { color: #8a958e; font-size: 10px; }

.dev-endpoint-list { display: grid; gap: 12px; margin-top: 16px; }
.dev-endpoint { padding: 16px 18px; }
.dev-endpoint-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.dev-endpoint-path { color: #2f4b62; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; }
.dev-scope { margin-left: auto; padding: 3px 7px; border-radius: 5px; background: #f2f5f8; color: #66758a; font-size: 9.5px; font-weight: 600; }
.dev-endpoint-summary { margin: 9px 0 0; color: #69766e; font-size: 11.5px; }
.dev-curl { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 1000px) {
  .dev-split, .dev-keys-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .topbar-logout { display: block; }
  .dev-reveal-value { align-items: stretch; flex-direction: column; }
  .dev-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-log-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .dev-log-meta { display: none; }
  .dev-endpoint { padding: 14px; }
  .dev-scope { margin-left: 0; }
  .dev-table { min-width: 700px; }
}

/* Div-based data grids (the template renderer has no table tags) */
.dev-grid { display: grid; align-items: center; gap: 10px; min-height: 44px; padding: 10px; border-bottom: 1px solid #f0f2f0; color: #46534b; font-size: 11.5px; }
.dev-grid-row:last-child { border-bottom: 0; }
.dev-grid-head { min-height: 0; padding: 9px 10px; border-bottom: 1px solid var(--line); color: #7c8880; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.dev-grid code { justify-self: start; max-width: 100%; padding: 2px 5px; overflow: hidden; border-radius: 4px; background: #f4f7fa; color: #2f4b62; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.dev-grid .dev-actions { align-self: start; }
.dev-grid .dev-log-meta { display: block; margin-top: 4px; }
.dev-grid .dev-url { display: inline-block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.dev-grid-keys { grid-template-columns: minmax(130px, 1.1fr) 100px minmax(150px, 1.4fr) 110px 110px 80px 150px; min-width: 880px; }
.dev-grid-webhooks { grid-template-columns: minmax(190px, 1.5fr) minmax(130px, 1.1fr) 100px minmax(140px, 1.1fr) 80px 205px; min-width: 900px; }
.dev-grid-logs { grid-template-columns: 135px 70px minmax(190px, 1fr) 70px 140px 80px; min-width: 720px; }

/* Admin integrations workspace */
.integration-workspace { display: grid; gap: 16px; }
.platform-api-card { background: linear-gradient(120deg, #f7fbf7, #fff 62%); }
.platform-api-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.platform-api-heading h2 { margin: 6px 0 4px; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.platform-api-link { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #d7e5d9; border-radius: 7px; background: #fff; color: var(--green-dark); font-size: 11px; font-weight: 600; white-space: nowrap; }
.platform-api-link:hover { border-color: #a9c9b1; }
.platform-api-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.platform-api-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border: 1px solid #eef2ee; border-radius: 8px; background: rgba(255, 255, 255, .85); }
.platform-api-value { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.platform-api-label { color: #8a958e; font-size: 10px; }
.platform-api-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2ee; }
.platform-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; }
.platform-meta-label { color: #8a958e; }
.platform-meta-value { overflow-wrap: anywhere; color: #3d4a42; font-weight: 600; text-align: right; }
.integration-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; }
.integration-section-heading h2 { margin: 0 0 3px; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.integration-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.integration-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.integration-category { color: #8a958e; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.integration-card h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.integration-status { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.integration-status-ok { background: #eaf4ec; color: #2c7a50; }
.integration-status-warn { background: #fbf3e2; color: #946a29; }
.integration-status-muted { background: #f1f3f1; color: #7d8780; }
.integration-copy { margin: 0; color: #69766e; font-size: 11.5px; line-height: 1.6; }
.integration-env { display: grid; gap: 6px; }
.integration-env-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 7px; background: #fafbfa; }
.integration-env-name { overflow: hidden; color: #4b5a51; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.integration-env-state { flex: 0 0 auto; font-size: 9.5px; font-weight: 600; }
.integration-env-ok { color: #2c7a50; }
.integration-env-warn { color: #946a29; }
.integration-check { margin: 0; font-size: 10.5px; line-height: 1.5; }
.integration-check-ok { color: #2c7a50; }
.integration-check-error { color: #a14545; }
.integration-check-muted { color: #8b968f; }
.integration-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.integration-button { min-height: 32px; padding: 0 11px; border: 1px solid #dbe6dc; border-radius: 7px; background: #fff; color: #3d5a45; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.integration-button:hover { border-color: #a9c9b1; color: var(--green-dark); }
.integration-button:disabled { cursor: default; opacity: .65; }
.integration-docs { margin-left: auto; color: var(--green); font-size: 10.5px; font-weight: 600; }
.integration-test-result { min-height: 14px; margin: 0; color: #8b968f; font-size: 10.5px; line-height: 1.5; }
.integration-test-result.integration-test-ok { color: #2c7a50; }
.integration-test-result.integration-test-error { color: #a14545; }
.api-activity-panel { padding-bottom: 8px; }

@media (max-width: 1000px) {
  .integration-grid { grid-template-columns: minmax(0, 1fr); }
  .platform-api-meta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .platform-api-heading { flex-direction: column; }
  .platform-api-link { width: 100%; text-align: center; }
  .platform-api-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-api-value { font-size: 20px; }
}